/*
 * NGM College — Astra Child: header (Header Builder).
 *   Top bar  navy    contact · top links · staff login · Apply
 *   Header   white   logo · accreditation caption · main menu · search
 * Colours of rows, menus and buttons are Customizer defaults (class-ngmca-defaults.php); this
 * sheet adds shape: the gold underline, dropdowns, mega panels, search, mobile panel.
 */

/* ======================================================================================
   Top bar
   ====================================================================================== */
.ast-above-header-bar { border-bottom: 0; }
.ast-above-header-bar .site-above-header-wrap { min-height: 42px; }
.ast-above-header-bar .ast-builder-grid-row { align-items: center; }

.ngmca-contact { display: inline-flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.ngmca-contact__item {
	display: inline-flex; align-items: center; gap: 8px;
	font: 500 13px/1 var(--ngmca-font-body);
	color: #fff; text-decoration: none;
}
.ngmca-contact__item i { color: var(--ngmca-gold); font-size: 12px; width: 14px; text-align: center; }
.ngmca-contact__item:hover span { color: var(--ngmca-gold); }

.ngmca-login {
	display: inline-flex; align-items: center; gap: 8px;
	font: 500 13px/1 var(--ngmca-font-body);
	color: #fff; text-decoration: none; white-space: nowrap;
	padding: 0 4px 0 14px; margin-left: 4px;
	border-left: 1px solid rgba(255, 255, 255, .22);
}
.ngmca-login i { color: var(--ngmca-gold); font-size: 12px; }
.ngmca-login:hover { color: var(--ngmca-gold); }

.ast-above-header-bar .ast-header-html-2,
.ast-above-header-bar .ast-header-button-1 { margin-left: 4px; }

/* top menu: small links with hairline dividers, no icons, no arrows */
.ast-builder-menu-2 .main-header-menu { gap: 0; }
.ast-builder-menu-2 .main-header-menu > .menu-item > .menu-link {
	padding: 0 13px; font-size: 13px; line-height: 1; height: auto;
	display: inline-flex; align-items: center; gap: 6px;
}
.ast-builder-menu-2 .main-header-menu > .menu-item + .menu-item > .menu-link { border-left: 1px solid rgba(255, 255, 255, .18); }
.ast-builder-menu-2 .ngmc-ico, .ast-builder-menu-2 .ast-icon.icon-arrow { display: none; }
.ast-builder-menu-2 .main-header-menu > .menu-item > .menu-link:hover,
.ast-builder-menu-2 .main-header-menu > .menu-item.current-menu-item > .menu-link { color: var(--ngmca-gold); }

/* Apply button */
.ast-header-button-1 .ast-custom-button {
	display: inline-flex; align-items: center; gap: 8px;
	line-height: 1.2; letter-spacing: .01em;
	box-shadow: 0 8px 18px -12px rgba(0, 0, 0, .6);
}
.ast-header-button-1 .ast-custom-button::before {
	content: "\f044"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 11px;
}
.ast-header-button-1 .ast-custom-button-link:hover .ast-custom-button { transform: translateY(-1px); box-shadow: 0 12px 22px -12px rgba(0, 0, 0, .7); }

/* ======================================================================================
   Main row
   ====================================================================================== */
.ast-primary-header-bar { transition: box-shadow .25s ease, background-color .25s ease; }
.ast-primary-header-bar .site-primary-header-wrap { align-items: center; }

/* the right side (menu, search) takes whatever the logo and caption leave; Astra's default 50/50 split would wrap the menu */
.ast-desktop .ast-primary-header-bar .ast-builder-grid-row { grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; }
.ast-desktop .ast-primary-header-bar .site-header-primary-section-right { justify-content: flex-end; min-width: 0; }
.ast-desktop .ast-primary-header-bar .site-header-primary-section-left { min-width: 0; flex-shrink: 0; }
.ast-desktop .ast-above-header-bar .ast-builder-grid-row { grid-template-columns: minmax(0, 1fr) auto; column-gap: 20px; }
.ast-desktop .ast-builder-menu-1 .main-header-menu { flex-wrap: wrap; justify-content: flex-end; }  /* wraps only if a very long menu does not fit */

/* logo (Astra adds 1em of space after an inline logo; the grid gap does that job here) */
.site-branding { padding: 0; }
.ast-logo-title-inline .site-logo-img { padding-right: 0; }
.site-logo-img img.custom-logo { height: auto; display: block; }
.ast-site-identity .site-logo-img { display: block; line-height: 0; }

/* optional accreditation caption beside the logo (drag "HTML 3" next to the logo in the Header Builder; it needs a very wide screen) */
.ast-header-html-3 { display: none; }
@media (min-width: 1700px) {
	.ast-header-html-3 { display: flex; }
	.ngmca-caption {
		display: inline-flex; flex-direction: column; gap: 3px;
		margin-left: 6px; padding-left: 18px;
		border-left: 1px solid var(--ngmca-line);
		max-width: 250px;
	}
	.ngmca-caption__a { font: 600 12.5px/1.25 var(--ngmca-font-head); color: var(--ngmca-blue); }
	.ngmca-caption__a i { color: var(--ngmca-gold); margin-right: 6px; font-size: 11px; }
	.ngmca-caption__b { font: 400 12px/1.3 var(--ngmca-font-body); color: var(--ngmca-muted); }
}

/* main menu */
.ast-builder-menu-1 .main-header-menu { gap: 0; align-items: stretch; }
.ast-builder-menu-1 .main-header-menu > .menu-item { display: flex; align-items: stretch; }
.ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link {
	position: relative;
	display: inline-flex; align-items: center; gap: 3px;
	padding: 0 .45em;
	letter-spacing: .005em;
	white-space: nowrap;
	transition: color .2s ease;
}
.ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link::after {
	content: ""; position: absolute; left: .45em; right: .45em; bottom: 0; height: 3px;
	background: var(--ngmca-gold); border-radius: 3px 3px 0 0;
	transform: scaleX(0); transform-origin: center; transition: transform .25s ease;
}
.ast-builder-menu-1 .main-header-menu > .menu-item:hover > .menu-link::after,
.ast-builder-menu-1 .main-header-menu > .menu-item:focus-within > .menu-link::after,
.ast-builder-menu-1 .main-header-menu > .menu-item.current-menu-item > .menu-link::after,
.ast-builder-menu-1 .main-header-menu > .menu-item.current-menu-ancestor > .menu-link::after,
.ast-builder-menu-1 .main-header-menu > .menu-item.current-menu-parent > .menu-link::after { transform: scaleX(1); }

/* a little tighter on laptops (13.5 px) so the nine items always fit beside the logo */
@media (min-width: 1201px) and (max-width: 1399px) {
	.ast-builder-menu-1 .menu-item > .menu-link { font-size: 13.5px; }
}

/* icons from the plugin's menu editor: shown in the mobile panel only; Home stays as an icon */
.ast-desktop .ast-builder-menu-1 .ngmc-ico { display: none; }
.ast-desktop .ast-builder-menu-1 .ngm-icon-only > .menu-link .ngmc-ico { display: inline-block; font-size: 15px; color: var(--ngmca-blue); }
.ast-desktop .ast-builder-menu-1 .ngm-icon-only > .menu-link .menu-text { font-size: 0; }
.ast-desktop .ast-builder-menu-1 .ngm-icon-only > .menu-link .menu-text .ngmc-ico { font-size: 15px; }

/* dropdown arrow: small, quiet */
.ast-desktop .ast-builder-menu-1 .menu-item-has-children > .menu-link .ast-icon.icon-arrow svg,
.ast-desktop .ast-builder-menu-1 .menu-item-has-children > .menu-link .dropdown-menu-toggle .ast-icon svg { width: 8px; height: 8px; opacity: .6; }

/* dropdowns: white panel, gold top rule, soft shadow */
.ast-desktop .ast-builder-menu-1 .main-header-menu .sub-menu,
.ast-desktop .ast-builder-menu-2 .main-header-menu .sub-menu {
	background: #fff;
	border: 0;
	border-top: 3px solid var(--ngmca-gold);
	border-radius: 0 0 var(--ngmca-radius) var(--ngmca-radius);
	box-shadow: 0 26px 50px -26px rgba(8, 59, 102, .55), 0 0 0 1px rgba(8, 59, 102, .05);
	padding: 8px;
	min-width: 270px;
}
.ast-desktop .ast-builder-menu-1 .main-header-menu .sub-menu .menu-item { border: 0; }
.ast-desktop .ast-builder-menu-1 .main-header-menu .sub-menu .menu-link {
	display: flex; align-items: center; gap: 10px;
	padding: 9px 14px; border: 0; border-radius: var(--ngmca-radius-sm);
	font: 500 14px/1.35 var(--ngmca-font-body);
	color: var(--ngmca-ink);
	transition: background-color .15s ease, color .15s ease, padding-left .15s ease;
}
.ast-desktop .ast-builder-menu-1 .main-header-menu .sub-menu .menu-link:hover,
.ast-desktop .ast-builder-menu-1 .main-header-menu .sub-menu .menu-item.focus > .menu-link,
.ast-desktop .ast-builder-menu-1 .main-header-menu .sub-menu .current-menu-item > .menu-link {
	background: var(--ngmca-mist); color: var(--ngmca-blue);
}
.ast-desktop .ast-builder-menu-1 .main-header-menu .sub-menu .current-menu-item > .menu-link { font-weight: 600; box-shadow: inset 3px 0 0 var(--ngmca-gold); }

/* long flat dropdowns run in two or three columns instead of a tall list */
.ast-desktop .ast-builder-menu-1 .main-header-menu > .menu-item > .sub-menu:has(> .menu-item:nth-child(9)) { column-count: 2; column-gap: 6px; min-width: 540px; }
.ast-desktop .ast-builder-menu-1 .main-header-menu > .menu-item > .sub-menu:has(> .menu-item:nth-child(17)) { column-count: 3; min-width: 780px; }
.ast-desktop .ast-builder-menu-1 .main-header-menu > .menu-item > .sub-menu:has(> .menu-item:nth-child(9)) > .menu-item { break-inside: avoid; }

/* Astra Pro mega menu panel */
.ast-desktop .ast-builder-menu-1 .astra-megamenu {
	padding: 22px 20px 18px;
	border-top: 3px solid var(--ngmca-gold);
	border-radius: 0 0 var(--ngmca-radius-lg) var(--ngmca-radius-lg);
	background: #fff;
	box-shadow: 0 30px 60px -28px rgba(8, 59, 102, .6), 0 0 0 1px rgba(8, 59, 102, .05);
}
.ast-desktop .ast-builder-menu-1 .astra-megamenu > .menu-item { padding: 0 8px; }
.ast-desktop .ast-builder-menu-1 .astra-megamenu .menu-item-heading > .menu-link,
.ast-desktop .ast-builder-menu-1 .astra-megamenu > .menu-item > .menu-link {
	font: 600 12.5px/1.3 var(--ngmca-font-head);
	letter-spacing: .06em; text-transform: uppercase;
	color: var(--ngmca-blue);
	padding: 4px 6px 10px; margin-bottom: 6px;
	border-bottom: 1px solid var(--ngmca-line);
	background: none; box-shadow: none;
}
.ast-desktop .ast-builder-menu-1 .astra-megamenu .sub-menu {
	position: static; opacity: 1; visibility: visible; display: block;
	box-shadow: none; border: 0; padding: 0; min-width: 0; background: transparent;
}
.ast-desktop .ast-builder-menu-1 .astra-megamenu .sub-menu .menu-link { padding: 8px 10px; }
.ast-desktop .ast-builder-menu-1 .astra-megamenu .ast-mm-has-desc > .menu-link { align-items: flex-start; flex-direction: column; gap: 2px; }
.ast-desktop .ast-builder-menu-1 .astra-megamenu .ast-megamenu-menu-description,
.ast-desktop .ast-builder-menu-1 .astra-megamenu .menu-item-description { font: 400 12px/1.4 var(--ngmca-font-body); color: var(--ngmca-muted); }

/* sticky: soft shadow once the header is stuck */
.ast-header-sticked .ast-primary-header-bar,
.ast-header-sticked .main-header-bar { box-shadow: 0 14px 34px -22px rgba(8, 59, 102, .6); border-bottom-color: transparent; }

/* ======================================================================================
   Search
   ====================================================================================== */
.ast-header-search .ast-search-icon,
.ast-builder-layout-element .ast-search-icon {
	display: inline-grid; place-items: center;
	width: 40px; height: 40px; border-radius: 50%;
	transition: background-color .2s ease;
}
.ast-header-search .ast-search-icon:hover { background: var(--ngmca-ice); }
.ast-search-menu-icon .ast-icon.icon-search svg { width: 17px; height: 17px; }

/* full-screen search: deep navy glass, large field */
.ast-search-menu-icon.full-screen .ast-search-form-wrapper,
.ast-search-box.full-screen {
	background: rgba(6, 43, 77, .96);
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.ast-search-box.full-screen .search-field,
.ast-search-box.full-screen input[type="search"] {
	font: 500 clamp(22px, 3.2vw, 38px)/1.3 var(--ngmca-font-head);
	color: #fff; background: transparent;
	border: 0; border-bottom: 2px solid rgba(255, 255, 255, .35); border-radius: 0;
	padding: 14px 4px;
}
.ast-search-box.full-screen .search-field::placeholder { color: rgba(255, 255, 255, .6); }
.ast-search-box.full-screen .search-field:focus { border-bottom-color: var(--ngmca-gold); box-shadow: none; }
.ast-search-box.full-screen .ast-search-close, .ast-search-box.full-screen .close svg { color: #fff; fill: #fff; }

/* ======================================================================================
   Mobile / tablet header (below the breakpoint) and the off-canvas panel
   ====================================================================================== */
.ast-header-break-point .ast-mobile-header-wrap .main-header-bar { border-bottom: 1px solid var(--ngmca-line); }
.ast-header-break-point .ast-mobile-header-wrap .site-logo-img img.custom-logo { max-height: 52px; width: auto; }

body.ast-header-break-point .ast-mobile-header-wrap .ast-button-wrap .menu-toggle,
body.ast-header-break-point .ast-mobile-header-wrap .ast-button-wrap .menu-toggle.main-header-menu-toggle {
	width: 44px; height: 44px; min-width: 44px; padding: 0; margin: 0;
	display: inline-grid; place-items: center;
	background: var(--ngmca-blue); color: #fff; border-radius: 12px; border: 0;
	transition: background-color .2s ease;
}
body.ast-header-break-point .ast-mobile-header-wrap .ast-button-wrap .menu-toggle:hover { background: var(--ngmca-navy); transform: none; box-shadow: none; }
body.ast-header-break-point .ast-mobile-header-wrap .ast-button-wrap .menu-toggle .ast-mobile-svg { fill: currentColor; width: 22px; height: 22px; }

.ast-mobile-popup-drawer .ast-mobile-popup-inner { background: #fff; }
.ast-mobile-popup-drawer .ast-mobile-popup-header { padding: 10px 14px; background: #fff; border-bottom: 1px solid var(--ngmca-line); }
.ast-mobile-popup-drawer .menu-toggle-close { color: var(--ngmca-navy); width: 44px; height: 44px; border-radius: 12px; background: var(--ngmca-ice); display: inline-grid; place-items: center; }
.ast-mobile-popup-drawer .ast-mobile-popup-content { padding: 6px 0 0; }

/* the panel menu: roomy rows with a 44 px arrow target (selectors outrank Astra's `.ast-header-break-point .main-navigation ul …`) */
body.ast-header-break-point .ast-mobile-popup-drawer .main-navigation ul.main-header-menu { margin: 0; padding: 0; }
body.ast-header-break-point .ast-mobile-popup-drawer .main-navigation ul .menu-item { position: relative; border-bottom: 1px solid var(--ngmca-line); }
body.ast-header-break-point .ast-mobile-popup-drawer .main-navigation ul.main-header-menu > .menu-item > .menu-link {
	display: flex; align-items: center; gap: 12px;
	min-height: 52px; padding: 12px 64px 12px 18px;
	font: 500 16px/1.3 var(--ngmca-font-head); color: var(--ngmca-ink);
}
body.ast-header-break-point .ast-mobile-popup-drawer .main-navigation ul .menu-link .ast-icon.icon-arrow { display: none; }
body.ast-header-break-point .ast-mobile-popup-drawer .main-navigation .ngmc-ico { color: var(--ngmca-blue); width: 20px; text-align: center; font-size: 15px; }
body.ast-header-break-point .ast-mobile-popup-drawer .main-navigation .sub-menu { background: var(--ngmca-mist); border-top: 1px solid var(--ngmca-line); margin: 0; padding: 4px 0; }
body.ast-header-break-point .ast-mobile-popup-drawer .main-navigation .sub-menu .menu-item { border-bottom: 0; }
body.ast-header-break-point .ast-mobile-popup-drawer .main-navigation ul .sub-menu .menu-item > .menu-link {
	display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 18px 10px 40px;
	font: 500 14.5px/1.35 var(--ngmca-font-body); color: var(--ngmca-text);
}
body.ast-header-break-point .ast-mobile-popup-drawer .main-navigation .menu-item.current-menu-item > .menu-link,
body.ast-header-break-point .ast-mobile-popup-drawer .main-navigation .menu-item:hover > .menu-link { color: var(--ngmca-blue); }
body.ast-header-break-point .ast-mobile-popup-drawer .main-navigation ul.main-header-menu > .menu-item.current-menu-item > .menu-link,
body.ast-header-break-point .ast-mobile-popup-drawer .main-navigation ul.main-header-menu > .menu-item.current-menu-ancestor > .menu-link { background: var(--ngmca-ice); box-shadow: inset 4px 0 0 var(--ngmca-gold); }
body.ast-header-break-point .ast-mobile-popup-drawer .main-navigation .ast-menu-toggle,
body.ast-header-break-point .ast-mobile-popup-drawer .main-navigation .dropdown-menu-toggle {
	position: absolute; top: 4px; right: 8px; width: 44px; height: 44px; margin: 0; padding: 0;
	display: inline-grid; place-items: center; border-radius: 10px; color: var(--ngmca-blue); background: transparent;
	border: 0; box-shadow: none; line-height: 0;
}
body.ast-header-break-point .ast-mobile-popup-drawer .main-navigation .ast-menu-toggle .ast-icon svg { width: 12px; height: 12px; fill: currentColor; }
body.ast-header-break-point .ast-mobile-popup-drawer .main-navigation .menu-link .dropdown-menu-toggle { display: none; }
body.ast-header-break-point .ast-mobile-popup-drawer .main-navigation .ast-menu-toggle[aria-expanded="true"] .ast-icon { transform: rotate(180deg); }
body.ast-header-break-point .ast-mobile-popup-drawer .main-navigation .sub-menu .menu-item > .ast-menu-toggle { top: 0; right: 8px; }
body.ast-header-break-point .ast-mobile-popup-drawer .main-navigation .sub-menu .menu-item > .menu-link { padding-right: 64px; }

/* foot of the panel */
.ngmca-mfoot { display: grid; gap: 14px; padding: 20px 18px 28px; }
.ngmca-mfoot .ngmca-apply {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	padding: 13px 20px; border-radius: 100px;
	background: var(--ngmca-gold); color: var(--ngmca-navy);
	font: 600 15px/1.2 var(--ngmca-font-head); text-decoration: none;
	box-shadow: 0 12px 22px -14px var(--ngmca-navy);
}
.ngmca-mfoot .ngmca-apply:hover { background: var(--ngmca-gold-hover); }
.ngmca-mfoot .ngmca-contact { display: grid; gap: 10px; }
.ngmca-mfoot .ngmca-contact__item { color: var(--ngmca-ink); font-size: 15px; }
.ngmca-mfoot .ngmca-contact__item i { color: var(--ngmca-blue); }
.ngmca-mfoot .ngmca-social { display: flex; gap: 10px; }
.ngmca-mfoot .ngmca-social a {
	display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
	background: var(--ngmca-ice); color: var(--ngmca-blue); text-decoration: none;
}
.ngmca-mfoot .ngmca-social a:hover { background: var(--ngmca-blue); color: #fff; }

/* ---- Alignment with the page content --------------------------------------------------------
   Astra's builder rows sit flush with the container edge; page content (Elementor boxed sections,
   Astra's own content) starts 20 px inside it. Give header and footer rows the same inset. */
.site-header .ast-builder-grid-row-container.ast-container,
.site-header .site-above-header-wrap, .site-header .site-primary-header-wrap, .site-header .site-below-header-wrap { padding-left: 20px; padding-right: 20px; }
.site-footer .ast-builder-grid-row-container-inner { padding-left: 20px; padding-right: 20px; }
@media (max-width: 544px) {
	.site-header .ast-builder-grid-row-container.ast-container { padding-left: 16px; padding-right: 16px; }
	.site-footer .ast-builder-grid-row-container-inner { padding-left: 16px; padding-right: 16px; }
}

/* ==========================================================================
   Transparent header (Astra Pro). Off by default; where it is switched on the header lies over the
   hero: white logo, white menu and search over the dark image, then the normal colours as soon as
   the header sticks (Astra adds .ast-primary-sticky-header-active to <body> then).
   ========================================================================== */
.site-logo-img.ngmca-logo-pair .ngmca-logo--dark { display: none; }
body.ast-primary-sticky-header-active .site-logo-img.ngmca-logo-pair .ngmca-logo--light { display: none; }
body.ast-primary-sticky-header-active .site-logo-img.ngmca-logo-pair .ngmca-logo--dark { display: inline-block; }

body.ast-theme-transparent-header:not(.ast-primary-sticky-header-active) #masthead .main-header-bar { border-bottom-color: transparent; }
body.ast-theme-transparent-header:not(.ast-primary-sticky-header-active) #masthead .main-header-menu > .menu-item > .menu-link,
body.ast-theme-transparent-header:not(.ast-primary-sticky-header-active) #masthead .ast-header-search :is(.ast-search-icon, .astra-search-icon, .ast-icon) { color: #fff; }
body.ast-theme-transparent-header:not(.ast-primary-sticky-header-active) #masthead .main-header-menu > .menu-item:is(:hover, .focus, .current-menu-item, .current-menu-ancestor, .current_page_item) > .menu-link { color: var(--ngmca-gold); }
body.ast-theme-transparent-header:not(.ast-primary-sticky-header-active) #masthead .main-header-menu > .menu-item > .menu-link .ast-icon svg,
body.ast-theme-transparent-header:not(.ast-primary-sticky-header-active) #masthead .ast-header-search svg,
body.ast-theme-transparent-header:not(.ast-primary-sticky-header-active) #masthead .ast-header-search svg path { fill: currentColor; }