/* ============================================================
   Amrita SeRVe — Header / Navigation
   Sticky, compact, transparent->solid on scroll, polished
   dropdowns, mobile hamburger. Built for FREE Astra (no Pro).
   ============================================================ */

/* ---- Base sticky header ------------------------------------------- */
#masthead.site-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: var(--as-surface);
	border-bottom: 1px solid var(--as-line);
	box-shadow: none;
	transition: background 0.3s var(--as-ease), box-shadow 0.3s var(--as-ease),
		border-color 0.3s var(--as-ease);
}

/* Compact header height */
.main-header-bar,
.ast-primary-header-bar {
	padding-top: 10px;
	padding-bottom: 10px;
	transition: padding 0.3s var(--as-ease);
	border-bottom: 0 !important;
}

/* Logo sizing / alignment */
.site-header .site-logo-img img,
.site-header .custom-logo-link img,
.custom-logo {
	max-height: 54px;
	width: auto;
	transition: max-height 0.3s var(--as-ease), filter 0.3s var(--as-ease);
}
.site-branding { display: flex; align-items: center; }

/* Scrolled state — shrink + subtle shadow */
#masthead.site-header.as-scrolled {
	box-shadow: var(--as-shadow-sm);
	border-bottom-color: var(--as-line);
}
.as-scrolled .main-header-bar,
.as-scrolled .ast-primary-header-bar { padding-top: 5px; padding-bottom: 5px; }
.as-scrolled .site-logo-img img,
.as-scrolled .custom-logo { max-height: 42px; }

/* ---- Primary menu: spacing + typography --------------------------- */
.main-header-menu .menu-link,
.ast-nav-menu .menu-link,
.ast-header-navigation-wrap .menu-link {
	font-family: var(--as-font-body);
	font-weight: 600;
	font-size: 0.98rem;
	letter-spacing: 0.005em;
	color: var(--as-text) !important;
	padding-left: 16px;
	padding-right: 16px;
	transition: color 0.2s var(--as-ease);
}
.main-header-menu > .menu-item > .menu-link:hover,
.main-header-menu > .current-menu-item > .menu-link,
.main-header-menu > .current-menu-ancestor > .menu-link {
	color: var(--as-green) !important;
}

/* Animated underline on top-level items */
.main-header-menu > .menu-item > .menu-link { position: relative; }
.main-header-menu > .menu-item > .menu-link::after {
	content: "";
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 4px;
	height: 2px;
	border-radius: 2px;
	background: var(--as-orange);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.25s var(--as-ease);
}
.main-header-menu > .menu-item > .menu-link:hover::after,
.main-header-menu > .current-menu-item > .menu-link::after,
.main-header-menu > .current-menu-ancestor > .menu-link::after { transform: scaleX(1); }

/* Dropdown arrow icon inherits text color (was invisible/white) */
.ast-icon.icon-arrow svg,
.ast-arrow-svg,
.ast-header-navigation-wrap .ast-icon svg { fill: currentColor; }

/* ---- Dropdown / sub-menu — polished cards ------------------------- */
/* This block also FIXES the white-on-white "Our Inspiration" item. */
.ast-nav-menu .sub-menu,
.main-header-menu .sub-menu {
	background: var(--as-surface) !important;
	border: 1px solid var(--as-line);
	border-radius: 14px;
	box-shadow: var(--as-shadow);
	padding: 8px;
	min-width: 248px;
	margin-top: 6px;
	overflow: hidden;
}
.ast-nav-menu .sub-menu .menu-link,
.main-header-menu .sub-menu .menu-link {
	color: var(--as-text) !important; /* <- readable, no more white text */
	font-weight: 500;
	font-size: 0.95rem;
	padding: 10px 14px !important;
	border-radius: 10px;
	line-height: 1.3;
}
.ast-nav-menu .sub-menu .menu-link::after { display: none; }
.ast-nav-menu .sub-menu .menu-item > .menu-link:hover,
.main-header-menu .sub-menu .menu-item > .menu-link:hover,
.ast-nav-menu .sub-menu .current-menu-item > .menu-link {
	background: var(--as-green-100);
	color: var(--as-green-900) !important;
}

/* ---- Header CTA button (last menu item, optional) ----------------- */
.main-header-menu .ast-menu-cta .menu-link {
	background: var(--as-green);
	color: #fff !important;
	border-radius: var(--as-radius-pill);
	padding: 8px 20px !important;
}
.main-header-menu .ast-menu-cta .menu-link::after { display: none; }

/* ============================================================
   Transparent header over hero (front page & /about/)
   ============================================================ */
.as-transparent-header #masthead.site-header {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	background: transparent;
	border-bottom-color: transparent;
	box-shadow: none;
}
/* Astra paints the header BAR with a near-opaque off-white background,
   which sits above #masthead. For the transparent/hero state we must
   override the BAR itself with a semi-dark backdrop so white nav text is
   readable over ANY hero image (incl. bright image tops). On scroll the
   bar returns to its solid light background (dark text). */
.as-transparent-header #masthead.site-header:not(.as-scrolled) .ast-primary-header-bar,
.as-transparent-header #masthead.site-header:not(.as-scrolled) .main-header-bar,
.as-transparent-header #masthead.site-header:not(.as-scrolled) .site-primary-header-wrap,
.as-transparent-header #masthead.site-header:not(.as-scrolled) .ast-main-header-wrap {
	background: transparent !important;
}
.as-transparent-header #masthead.site-header:not(.as-scrolled) .ast-primary-header-bar,
.as-transparent-header #masthead.site-header:not(.as-scrolled) .main-header-bar {
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.55) 65%, rgba(0, 0, 0, 0.32) 100%) !important;
}
/* Contrast scrim: guarantees white nav text stays readable over ANY hero
   image (dark or light). Fades out as the header turns solid on scroll. */
/* extra soft feather just below the bar for a smooth blend into the hero */
.as-transparent-header #masthead.site-header::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	height: 24px;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0));
	opacity: 1;
	transition: opacity 0.3s var(--as-ease);
}
.as-transparent-header #masthead.site-header.as-scrolled::after { opacity: 0; }
.as-transparent-header #masthead.site-header.as-scrolled::before { opacity: 0; }
.as-transparent-header #masthead.site-header.as-scrolled {
	background: var(--as-surface);
	border-bottom-color: var(--as-line);
	box-shadow: var(--as-shadow-sm);
}
/* White menu text while transparent */
.as-transparent-header #masthead:not(.as-scrolled) .main-header-menu > .menu-item > .menu-link,
.as-transparent-header #masthead:not(.as-scrolled) .ast-nav-menu > .menu-item > .menu-link {
	color: #fff !important;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7), 0 2px 14px rgba(0, 0, 0, 0.5);
}
.as-transparent-header #masthead:not(.as-scrolled) .main-header-menu > .menu-item > .menu-link:hover { color: #fff !important; }
/* dropdown arrow icons white while transparent */
.as-transparent-header #masthead:not(.as-scrolled) .ast-header-navigation-wrap .ast-icon svg,
.as-transparent-header #masthead:not(.as-scrolled) .main-header-menu .ast-icon svg { fill: #fff; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6)); }
/* Keep sub-menus solid + readable even in transparent mode */
.as-transparent-header #masthead:not(.as-scrolled) .sub-menu .menu-link {
	color: var(--as-text) !important;
	text-shadow: none;
}
/* Logo variant swap: use the WHITE logo over the dark/transparent header
   (matches the white nav), and the default BLUE logo on the solid/scrolled
   and light states. Same 200x81 asset -> no layout shift. Small shadow for
   extra separation over busy imagery. */
.as-transparent-header #masthead:not(.as-scrolled) .custom-logo,
.as-transparent-header #masthead:not(.as-scrolled) .site-logo-img img {
	content: url("/wp-content/uploads/2017/03/ASeRVe_LogoSite_WHITE.png");
	filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.35));
}
/* Hamburger icon white over hero */
.as-transparent-header #masthead:not(.as-scrolled) .ast-mobile-menu-trigger-minimal,
.as-transparent-header #masthead:not(.as-scrolled) .menu-toggle { color: #fff; }

/* ============================================================
   Mobile hamburger + menu panel
   ============================================================ */
.main-header-bar .ast-button-wrap .menu-toggle,
.ast-mobile-menu-buttons .menu-toggle {
	background: transparent;
	color: var(--as-green-900);
	border-radius: 10px;
	padding: 6px 8px;
}
.menu-toggle .menu-toggle-icon { color: inherit; }

@media (max-width: 921px) {
	/* On mobile keep the header solid for legibility */
	.as-transparent-header #masthead.site-header {
		position: sticky;
		background: var(--as-surface);
		border-bottom-color: var(--as-line);
	}
	.as-transparent-header #masthead.site-header::before { display: none; }
	/* Dark menu text on the light mobile panel. Selector matches the desktop
	   transparent rule's specificity and comes later, so it wins. */
	.as-transparent-header #masthead:not(.as-scrolled) .main-header-menu > .menu-item > .menu-link,
	.as-transparent-header #masthead .main-header-menu .menu-link,
	.as-transparent-header #masthead .ast-nav-menu .menu-link,
	#masthead .main-header-menu .menu-link {
		color: var(--as-text) !important;
		text-shadow: none !important;
	}
	/* Solid background for the opened mobile menu panel */
	#masthead .main-header-menu,
	.ast-mobile-header-content,
	.main-header-bar-navigation .main-header-menu {
		background: var(--as-surface) !important;
	}
	.as-transparent-header #masthead:not(.as-scrolled) .custom-logo,
	.as-transparent-header #masthead:not(.as-scrolled) .site-logo-img img { filter: none; }
	.as-transparent-header #masthead .custom-logo,
	.as-transparent-header #masthead .site-logo-img img { filter: none; }

	/* Mobile menu panel — clean card list */
	.ast-mobile-header-wrap .main-header-menu,
	.main-header-menu.ast-nav-menu.ast-flyout-menu-enable,
	.ast-header-break-point .main-header-menu {
		background: var(--as-surface);
		border-top: 1px solid var(--as-line);
		padding: 8px 4px;
	}
	.ast-header-break-point .main-header-menu .menu-link {
		padding: 14px 18px;
		border-bottom: 1px solid var(--as-line);
		font-size: 1.02rem;
	}
	.ast-header-break-point .main-header-menu > .menu-item > .menu-link::after { display: none; }
	.ast-header-break-point .main-header-menu .sub-menu {
		box-shadow: none;
		border: 0;
		border-radius: 0;
		background: var(--as-beige-soft) !important;
		margin: 0;
		padding: 0 0 0 10px;
	}
	.ast-header-break-point .sub-menu .menu-link { border-bottom: 1px solid var(--as-line); }
}

/* Give fixed-header pages breathing room handled by hero padding
   (see sections.css .as-hero). Non-hero transparent pages fallback: */
.as-transparent-header .site-content > .ast-container > article:not(.as-has-hero) {
	padding-top: var(--as-header-h);
}