/*
 * Module: Header
 * Owns: .spg-header-phone, header CTA button (.ast-custom-button-link .ast-custom-button / .ast-button)
 * Depends on: tokens.css
 */

/* White header bar (override any inherited palette background) */
.main-header-bar,
.ast-primary-header-bar .main-header-bar,
.site-header .main-header-bar-wrap .main-header-bar {
	background-color: #ffffff;
	border-bottom: 1px solid var(--gray-200);
}

/* Site title/tagline hidden — the logo carries the brand */
.site-header .site-title,
.site-header .site-description,
.ast-site-identity .site-title,
.ast-site-identity .site-description {
	display: none;
}

/* Header content spans wider so 7 nav items + phone + CTA fit one row */
.main-header-bar .ast-container,
.site-header .ast-container {
	max-width: 1500px;
}
/* Logo — re-cropped tight (no baked-in whitespace) so it sits larger. The bar
   keeps Astra's native height/padding (80px); only the logo is bigger. */
.site-header .custom-logo-link img,
.site-header .site-logo-img img {
	max-width: 255px;
	height: auto;
}

/* Nav links dark on white — comfortable defaults */
.main-header-bar .main-header-menu .menu-item > .menu-link,
.ast-builder-menu-1 .menu-item > .menu-link {
	color: var(--color-headings);
	font-size: 15px;
	padding-left: 11px;
	padding-right: 11px;
	letter-spacing: 0.01em;
	white-space: nowrap;
}
.spg-header-phone a,
.spg-header-phone { font-size: 16px; }
/* Header CTA never wraps its text */
.main-header-bar .ast-custom-button-link .ast-custom-button,
.ast-custom-button-link .ast-custom-button,
.ast-custom-button-link .ast-button {
	white-space: nowrap;
}

/* Compress the header only in the tight band (1200px breakpoint -> ~1400px)
   so it stays on one row until the tablet hamburger takes over at 1200. */
@media (max-width: 1400px) {
	.site-header .custom-logo-link img,
	.site-header .site-logo-img img { max-width: 200px; }
	.main-header-bar .main-header-menu .menu-item > .menu-link,
	.ast-builder-menu-1 .menu-item > .menu-link { font-size: 13px; padding-left: 7px; padding-right: 7px; }
	.spg-header-phone a,
	.spg-header-phone { font-size: 14px; }
	.spg-header-phone::before { width: 14px; height: 14px; margin-right: 5px; }
	.main-header-bar .ast-custom-button-link .ast-custom-button,
	.ast-custom-button-link .ast-custom-button,
	.ast-custom-button-link .ast-button { font-size: 14px; padding: 10px 16px; }
}
.main-header-bar .main-header-menu .menu-item > .menu-link:hover,
.main-header-bar .main-header-menu .current-menu-item > .menu-link {
	color: var(--color-alt-brand);
}

/* Ensure dropdowns / mega menus reveal on hover & keyboard focus */
.ast-desktop .main-header-menu .menu-item-has-children:hover > .astra-full-megamenu-wrapper,
.ast-desktop .main-header-menu .menu-item-has-children.focus > .astra-full-megamenu-wrapper,
.ast-desktop .main-header-menu .menu-item-has-children:focus-within > .astra-full-megamenu-wrapper {
	display: flex !important;
	visibility: visible !important;
	opacity: 1 !important;
	transform: none !important;
	pointer-events: auto !important;
}
.ast-desktop .main-header-menu .menu-item-has-children:hover > .sub-menu,
.ast-desktop .main-header-menu .menu-item-has-children.focus > .sub-menu,
.ast-desktop .main-header-menu .menu-item-has-children:focus-within > .sub-menu {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	transform: none !important;
	pointer-events: auto !important;
}
/* Mega menu: reveal the columns (sub-menu) inside the wrapper */
.ast-desktop .main-header-menu .menu-item-has-children:hover > .astra-full-megamenu-wrapper > .sub-menu,
.ast-desktop .main-header-menu .menu-item-has-children.focus > .astra-full-megamenu-wrapper > .sub-menu,
.ast-desktop .main-header-menu .menu-item-has-children:focus-within > .astra-full-megamenu-wrapper > .sub-menu {
	display: flex !important;
	visibility: visible !important;
	opacity: 1 !important;
}
/* Mega menu: column link lists (nested) render inline within each column */
.ast-desktop .main-header-menu .menu-item-has-children:hover .astra-full-megamenu-wrapper .sub-menu .sub-menu,
.ast-desktop .main-header-menu .menu-item-has-children.focus .astra-full-megamenu-wrapper .sub-menu .sub-menu,
.ast-desktop .main-header-menu .menu-item-has-children:focus-within .astra-full-megamenu-wrapper .sub-menu .sub-menu {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	position: static !important;
	transform: none !important;
	box-shadow: none !important;
}
/* Within an open mega panel, every list-item is visible & static */
.ast-desktop .main-header-menu .menu-item-has-children:hover .astra-full-megamenu-wrapper li.menu-item,
.ast-desktop .main-header-menu .menu-item-has-children.focus .astra-full-megamenu-wrapper li.menu-item,
.ast-desktop .main-header-menu .menu-item-has-children:focus-within .astra-full-megamenu-wrapper li.menu-item {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	position: static !important;
}
/* Mega panel: sizing & centered positioning under the header */
.ast-desktop .main-header-bar,
.ast-desktop .ast-primary-header-bar { position: relative; }
/* Anchor the mega to the full-width header bar, not the narrow menu UL */
.ast-desktop .main-header-menu { position: static !important; }
.ast-desktop .main-header-menu .menu-item.full-width-mega { position: static !important; }
/* Astra's `submenu-with-border` puts a 2px maroon border on EVERY sub-menu inside the
   mega panel — including the nested link lists, which drew a partial line under the
   heading row (only where columns had links). Strip borders from all of them so the
   single full-width top divider is the only line (QA). */
.ast-desktop .main-header-menu .astra-full-megamenu-wrapper .astra-megamenu,
.ast-desktop .main-header-menu .astra-full-megamenu-wrapper .sub-menu,
.ast-desktop .main-header-menu .astra-full-megamenu-wrapper .astra-megamenu .sub-menu {
	border: none !important;
}
.ast-desktop .main-header-menu .astra-full-megamenu-wrapper {
	position: absolute !important;
	top: 100% !important;
	left: 0 !important;
	right: 0 !important;
	width: auto !important;
	transform: none !important;
	background: #ffffff !important;
	box-shadow: none !important;   /* QA: no drop shadow on the mega panel */
	/* One bold full-width divider — gold now that the header bar is maroon, so it
	   stays visible against the dark header (was maroon, which blended). */
	border-top: 3px solid var(--color-accent) !important;
	margin-top: -1px !important;
	padding: 30px 0 !important;
	z-index: 200 !important;
}
/* columns laid out in a centered row.
   Astra hides sub-menus with `left:-999em`; the wrapper is on-screen but the inner
   <ul> keeps that off-screen offset, so force it back into normal flow (left:auto,
   static) or the whole panel renders ~16000px off-screen left and looks empty. */
.ast-desktop .main-header-menu .astra-full-megamenu-wrapper > .sub-menu {
	position: static !important;
	left: auto !important;
	right: auto !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	gap: 30px !important;
	width: 100% !important;
	max-width: 1200px !important;
	margin: 0 auto !important;
	padding: 0 34px !important;
}
.ast-desktop .main-header-menu .astra-full-megamenu-wrapper > .sub-menu > .menu-item {
	flex: 1 1 0 !important;
	position: static !important;
	min-width: 0;
}
/* column heading */
.ast-desktop .astra-full-megamenu-wrapper > .sub-menu > .menu-item > .menu-link,
.ast-desktop .astra-full-megamenu-wrapper > .sub-menu > .menu-item > .ast-disable-link {
	font-weight: var(--weight-semibold);
	color: var(--color-brand) !important;
	padding: 0 0 6px !important;
	/* No per-column underline (QA): the single full-width panel border is the
	   only divider. !important also cancels Astra's own border on these items. */
	border-bottom: none !important;
	margin-bottom: 8px;
}
/* column links */
.ast-desktop .astra-full-megamenu-wrapper .sub-menu .sub-menu .menu-link {
	padding: 5px 0 !important;
	font-size: 14px;
	color: var(--color-body) !important;
}
/* allow mega links to wrap so columns fit (top nav stays nowrap) */
.ast-desktop .astra-full-megamenu-wrapper .menu-link {
	white-space: normal !important;
}
.ast-desktop .astra-full-megamenu-wrapper .sub-menu .sub-menu .menu-link:hover {
	color: var(--color-alt-brand) !important;
}
/* hide the submenu arrow toggles inside the mega */
.ast-desktop .astra-full-megamenu-wrapper .ast-header-navigation-arrow,
.ast-desktop .astra-full-megamenu-wrapper .ast-menu-toggle { display: none !important; }

/* Phone HTML component in header */
.spg-header-phone a,
.spg-header-phone {
	font-family: var(--font-body);
	font-weight: var(--weight-semibold);
	font-size: var(--text-nav);
	color: var(--color-brand);
	white-space: nowrap;
}
.spg-header-phone a:hover {
	color: var(--color-alt-brand);
}
.spg-header-phone::before {
	content: "";
	display: inline-block;
	width: 17px;
	height: 17px;
	margin-right: 8px;
	vertical-align: -2px;
	background-color: var(--color-brand);
	-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>') no-repeat center / contain;
	mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>') no-repeat center / contain;
}

/* Header CTA button -> gold with dark text */
/* Header CTA = maroon (the hero CTA is the gold one) */
.ast-header-break-point .main-header-bar .ast-custom-button-link .ast-custom-button,
.main-header-bar .ast-custom-button-link .ast-custom-button,
.ast-custom-button-link .ast-custom-button,
.ast-custom-button-link .ast-button {
	background-color: var(--color-brand);
	color: var(--white);
	border: 2px solid var(--color-brand);
	border-radius: var(--radius-sm);
	font-family: var(--font-button);
	font-weight: var(--weight-semibold);
	padding: 12px 26px;
	transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}
.ast-custom-button-link:hover .ast-custom-button,
.ast-custom-button-link:hover .ast-button {
	background-color: var(--color-alt-brand);
	color: var(--white);
	border-color: var(--color-alt-brand);
}

/* Mobile off-canvas menu: readable hover/current (was dark-red on a charcoal band).
   White text; gold on hover/current; remove the charcoal item background. */
.ast-mobile-popup-drawer .menu-link,
#ast-hf-mobile-menu .menu-link { color: #ffffff; }
.ast-mobile-popup-drawer .menu-link:hover,
.ast-mobile-popup-drawer .menu-item:hover > .menu-link,
.ast-mobile-popup-drawer .current-menu-item > .menu-link,
.ast-mobile-popup-drawer .current-menu-ancestor > .menu-link,
#ast-hf-mobile-menu .menu-link:hover,
#ast-hf-mobile-menu .menu-item:hover > .menu-link,
#ast-hf-mobile-menu .current-menu-item > .menu-link {
	color: var(--color-accent) !important;
}
.ast-mobile-popup-drawer .menu-item:hover,
.ast-mobile-popup-drawer .current-menu-item,
.ast-mobile-popup-drawer .menu-item:hover > .menu-link,
.ast-mobile-popup-drawer .current-menu-item > .menu-link,
#ast-hf-mobile-menu .menu-item:hover,
#ast-hf-mobile-menu .current-menu-item,
#ast-hf-mobile-menu .menu-item:hover > .menu-link,
#ast-hf-mobile-menu .current-menu-item > .menu-link {
	background-color: transparent !important;
}

/* ============================================================
   QA #54: Dark maroon header bar so the gold logo reads clearly.
   Nav links flip to white (gold on hover/current); phone light with
   a gold icon; header CTA becomes gold-on-maroon for contrast.
   ============================================================ */
.main-header-bar-wrap,
.ast-main-header-wrap,
.site-header .ast-primary-header-bar,
.site-header .ast-primary-header,
.site-header .main-header-bar,
.site-header .site-primary-header-wrap {
	background-color: var(--color-brand) !important;
	border-bottom: none !important;
	border-color: var(--color-brand) !important;
}
/* Nav links — TOP-LEVEL only (direct children). Scoping to `> .menu-item`
   keeps the white out of the mega-menu columns, whose links live on the
   white panel and must stay dark/maroon (see the mega-panel rules above). */
.ast-desktop .main-header-bar .main-header-menu > .menu-item > .menu-link,
.ast-desktop .ast-builder-menu-1 > .menu-item > .menu-link,
.main-header-bar .main-header-menu > .menu-item > .menu-link {
	color: #ffffff !important;
}
.ast-desktop .main-header-bar .main-header-menu > .menu-item:hover > .menu-link,
.ast-desktop .main-header-bar .main-header-menu > .current-menu-item > .menu-link,
.ast-desktop .main-header-bar .main-header-menu > .current-menu-ancestor > .menu-link {
	color: var(--color-accent) !important;
}
/* Dropdown caret arrows in the top bar → white */
.main-header-bar .main-header-menu > .menu-item > .menu-link .ast-arrow-svg { fill: #ffffff !important; }
/* Phone: white text, gold handset icon */
.main-header-bar .spg-header-phone a,
.main-header-bar .spg-header-phone { color: #ffffff !important; }
.main-header-bar .spg-header-phone a:hover { color: var(--color-accent) !important; }
.main-header-bar .spg-header-phone::before { background-color: var(--color-accent) !important; }
/* Header CTA: gold fill, maroon text (contrast against the maroon bar) */
.ast-header-break-point .main-header-bar .ast-custom-button-link .ast-custom-button,
.main-header-bar .ast-custom-button-link .ast-custom-button,
.ast-custom-button-link .ast-custom-button,
.ast-custom-button-link .ast-button {
	background-color: var(--color-accent) !important;
	color: var(--color-brand) !important;
	border-color: var(--color-accent) !important;
}
.ast-custom-button-link:hover .ast-custom-button,
.ast-custom-button-link:hover .ast-button {
	background-color: #ffffff !important;
	color: var(--color-brand) !important;
	border-color: #ffffff !important;
}
/* Mobile hamburger lines → light on the maroon bar */
.ast-header-break-point .main-header-bar .menu-toggle .ast-mobile-svg,
.main-header-bar .ast-mobile-menu-trigger-fill .ast-mobile-svg { fill: #ffffff !important; }
/* Mobile hamburger → gold so it's obvious against the maroon bar */
.ast-header-break-point .main-header-bar .menu-toggle .ast-mobile-svg { fill: var(--color-accent) !important; }

/* ============================================================
   Mobile QA #36: on phones the header CTA button overflowed and
   pushed the hamburger toggle off-screen, so the menu was
   unreachable. Hide the header CTA on phones — the hero has a
   prominent CTA right below — so logo + hamburger fit cleanly.
   (Tablet 600–1200px keeps the CTA; there's room there.)
   ============================================================ */
@media (max-width: 600px) {
	/* Plain media query (no .ast-header-break-point gate) so the CTA is reliably
	   hidden on phones even if Astra's body class lags behind the viewport. */
	.site-header .ast-header-button-1,
	.site-header .ast-builder-button-wrap {
		display: none !important;
	}
	/* Give the hamburger comfortable tap room at the right edge */
	.main-header-bar .ast-mobile-menu-buttons,
	.main-header-bar .menu-toggle {
		margin-left: auto;
	}
}

/* ============================================================
   Mobile phone bar (below the header, ≤600px). Two tappable
   numbers with labels; maroon to match the header. The header
   is not sticky, so this scrolls away with the page. Hidden on
   desktop, where the numbers live inside the header bar.
   ============================================================ */
.spg-mobile-phonebar { display: none; }
@media (max-width: 600px) {
	.spg-mobile-phonebar {
		display: flex;
		align-items: stretch;
		background: var(--color-brand);
		border-top: 1px solid rgba(255, 255, 255, 0.16);
	}
	.spg-mphone {
		flex: 1 1 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 9px 6px;
		line-height: 1.15;
		text-decoration: none !important;
	}
	.spg-mphone + .spg-mphone { border-left: 1px solid rgba(255, 255, 255, 0.18); }
	.spg-mphone-num {
		color: #ffffff;
		font-family: var(--font-body);
		font-weight: var(--weight-semibold);
		font-size: 15px;
	}
	.spg-mphone-label {
		color: var(--color-accent);
		font-size: 10px;
		letter-spacing: 0.05em;
		text-transform: uppercase;
		margin-top: 1px;
	}
	.spg-mphone:active .spg-mphone-num { color: var(--color-accent); }
}

/* ============================================================
   Two-number header phone: 336-373-8469 (Existing Clients) and
   336-704-2921 (New Clients), each with a small label underneath.
   Numbers white / labels gold on the maroon bar; divider between.
   ============================================================ */
.spg-header-phones {
	display: flex;
	align-items: center;
}
.spg-hphone {
	display: flex;
	flex-direction: column;
	line-height: 1.12;
	text-decoration: none !important;
	white-space: nowrap;
}
.spg-hphone + .spg-hphone {
	margin-left: 16px;
	padding-left: 16px;
	border-left: 1px solid rgba(255, 255, 255, 0.22);
}
.spg-hphone-num {
	font-family: var(--font-body);
	font-weight: var(--weight-semibold);
	font-size: 16px;
	color: #ffffff;
}
.spg-hphone-label {
	font-size: 10.5px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--color-accent);
	margin-top: 2px;
}
.spg-hphone:hover .spg-hphone-num { color: var(--color-accent); }
/* Compression band (matches the rest of the header at ≤1400px) */
@media (max-width: 1400px) {
	.spg-hphone-num { font-size: 14px; }
	.spg-hphone-label { font-size: 9.5px; }
	.spg-hphone + .spg-hphone { margin-left: 12px; padding-left: 12px; }
}