/**
 * Grovidex header styling over Astra (non-homepage routes) plus the
 * shared Grovidex search-form skin.
 *
 * The static front page renders its own child-theme-owned header and
 * footer (header-grovidex-home.php / footer-grovidex-home.php, styled
 * by home-header-footer.css) and uses none of the Astra selectors in
 * this file. Everything #masthead/#ast-* scoped below applies only
 * where Astra renders the header — shop, product, archive and other
 * non-homepage routes.
 *
 * The .gvx-search-form skin is deliberately unscoped so the homepage
 * header and Astra-rendered search share one identical treatment.
 *
 * Astra selectors were verified against Astra 4.13.10 source
 * (template-parts/header/builder/*, inc/markup-extras.php). All rules
 * are additive; no global form, input, nav or button restyling. Zero
 * JavaScript: sticky behavior, the always-open search field and the
 * scrolled shadow are pure CSS.
 */

/* ==================================================================
 * 1. Sticky header band (desktop and mobile — #masthead contains the
 *    desktop row and both mobile rows, so one sticky element covers
 *    every case with no sibling coordination and no layout shift:
 *    the header never leaves normal document flow).
 * ================================================================== */

#masthead {
	position: sticky;
	/* WordPress core sets --wp-admin--admin-bar--height (32px, 46px at
	   <=782px) whenever the admin bar renders; logged-out visitors get
	   the 0px fallback. */
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: var(--gvx-z-header);
	background-color: var(--gvx-surface);
	border-bottom: 1px solid var(--gvx-border);
	/* Device cutout / safe-area protection. */
	padding-left: env(safe-area-inset-left);
	padding-right: env(safe-area-inset-right);
}

/* Below 600px core makes the admin bar position:absolute (it scrolls
   away), so the sticky header docks to the true viewport top. */
@media (max-width: 600px) {
	body.admin-bar #masthead {
		top: 0;
	}
}

/* WooCommerce checkout keeps its existing behavior — do not force a
   sticky storefront header into the payment flow. */
body.woocommerce-checkout #masthead {
	position: static;
}

/* Scrolled-state shadow: progressive enhancement via CSS scroll-driven
   animation. Browsers without support keep the static bottom border —
   fully usable either way. No JavaScript. */
@supports (animation-timeline: scroll()) {
	@keyframes gvx-header-shadow {
		to {
			box-shadow: var(--gvx-shadow-md);
		}
	}

	#masthead {
		animation: gvx-header-shadow linear both;
		animation-timeline: scroll();
		animation-range: 0 120px;
	}

	/* Not a motion effect, but honor the preference anyway — the
	   static border keeps the header fully delineated. */
	@media (prefers-reduced-motion: reduce) {
		#masthead {
			animation: none;
		}
	}
}

/* ==================================================================
 * 2. Anchor / focus offsets — in-page anchors, skip-link targets and
 *    keyboard-focus scrolling land below the sticky region.
 *    921px is Astra's default mobile-header breakpoint.
 * ================================================================== */

html {
	scroll-padding-top: calc(var(--gvx-header-h-desktop, 72px) + var(--wp-admin--admin-bar--height, 0px) + 16px);
}

@media (max-width: 921px) {
	html {
		scroll-padding-top: calc(var(--gvx-header-h-mobile, 112px) + var(--wp-admin--admin-bar--height, 0px) + 16px);
	}
}

/* Per-target insurance alongside the root scroll-padding: anchor and
   focus targets (hero chips → #gvx-exams, CTA → #gvx-trending, skip
   link → main) clear the sticky region in every scroll context. */
#gvx-main,
.gvx-section[id] {
	scroll-margin-top: calc(var(--gvx-header-h-desktop, 72px) + var(--wp-admin--admin-bar--height, 0px) + 16px);
}

@media (max-width: 921px) {
	#gvx-main,
	.gvx-section[id] {
		scroll-margin-top: calc(var(--gvx-header-h-mobile, 112px) + var(--wp-admin--admin-bar--height, 0px) + 16px);
	}
}

/* ==================================================================
 * 3. Header band sizing — stable dimensions, no post-scroll changes.
 *    Height targets (~72px desktop; ~56px + ~56px mobile rows) come
 *    from row padding and the logo cap rather than forced heights, so
 *    Astra configuration cannot cause clipping.
 * ================================================================== */

#masthead .site-logo-img img {
	max-height: 44px;
	width: auto;
}

#ast-desktop-header .ast-primary-header-bar {
	min-height: var(--gvx-header-h-desktop, 72px);
}

#ast-mobile-header .ast-primary-header-bar {
	min-height: var(--gvx-header-row-h-mobile, 56px);
}

/* Desktop primary row: search owns the flexible middle; logo and the
   utility cluster stay compact and cannot squeeze the search field. */
#ast-desktop-header .site-primary-header-wrap .ast-builder-grid-row {
	grid-template-columns: auto minmax(0, 1fr) auto;
	column-gap: var(--gvx-space-5);
	align-items: center;
}

#ast-desktop-header .site-header-primary-section-center {
	min-width: 0;
	width: 100%;
}

/* ==================================================================
 * 4. Search — permanently open at every width.
 *    Astra's Search element wraps the form in an icon-toggled
 *    .ast-search-menu-icon.slide-search container (hidden until
 *    .ast-dropdown-active). These overrides pin the form statically
 *    visible and retire the toggle icon; #masthead id scoping
 *    outweighs Astra's class-chain specificity.
 * ================================================================== */

#masthead .ast-header-search {
	width: 100%;
	max-width: 640px;
	margin-inline: auto;
}

#masthead .ast-header-search .ast-search-menu-icon,
#masthead .ast-header-search .ast-search-menu-icon.slide-search {
	position: static;
	display: block;
	width: 100%;
	visibility: visible;
	opacity: 1;
	transform: none;
}

#masthead .ast-header-search .ast-search-menu-icon .search-form,
#masthead .ast-header-search .ast-search-menu-icon.slide-search .search-form {
	position: static;
	display: block;
	visibility: visible;
	opacity: 1;
	transform: none;
	padding: 0;
	width: 100%;
	inset: auto;
}

/* The icon-only toggle is retired: search is never icon-only. */
#masthead .ast-header-search .ast-search-icon {
	display: none;
}

/* Grovidex search form — shared skin for every context that renders
   gvx_search_form_markup(): the homepage header and Astra-rendered
   header search alike. The class is Grovidex-owned, so the unscoped
   selectors cannot restyle third-party forms. */
.gvx-search-form {
	display: flex;
	align-items: stretch;
	width: 100%;
}

.gvx-search-form .gvx-search-field {
	flex: 1 1 auto;
	min-width: 0;
	height: 48px;
	padding: 0 var(--gvx-space-4);
	border: 1px solid var(--gvx-border);
	border-right: 0;
	border-radius: var(--gvx-radius-md) 0 0 var(--gvx-radius-md);
	background-color: var(--gvx-surface);
	font-family: var(--gvx-font-sans);
	font-size: var(--gvx-text-base);
	color: var(--gvx-ink);
}

.gvx-search-form .gvx-search-field:focus,
.gvx-search-form .gvx-search-field:focus-visible {
	border-color: var(--gvx-teal);
	outline: 2px solid var(--gvx-teal);
	outline-offset: -1px;
}

.gvx-search-form .gvx-search-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 52px;
	height: 48px;
	border: 1px solid var(--gvx-teal);
	border-radius: 0 var(--gvx-radius-md) var(--gvx-radius-md) 0;
	background-color: var(--gvx-teal);
	color: var(--gvx-surface);
	cursor: pointer;
	transition: background-color var(--gvx-duration) var(--gvx-ease);
}

.gvx-search-form .gvx-search-submit:hover,
.gvx-search-form .gvx-search-submit:focus-visible {
	background-color: var(--gvx-teal-dark);
}

/* Pin the submit icon explicitly (Phase 12Z): the inline SVG relied
   on its width/height ATTRIBUTES, which any theme CSS overrides —
   Astra ships em-based .search-submit svg sizing that collapsed the
   icon to 0px wide inside the flex button on production. Explicit
   CSS sizing with flex-shrink: 0 wins in every context the shared
   form renders in. */
.gvx-search-form .gvx-search-submit svg {
	display: block;
	width: 20px;
	height: 20px;
	min-width: 20px;
	flex-shrink: 0;
	stroke: currentColor;
	fill: none;
}

/* ==================================================================
 * 5. Mobile rows — one sticky block, two always-visible rows.
 *    Row 1 (logo | account | cart) and Row 2 (full-width search) are
 *    Astra's mobile primary + below rows inside sticky #masthead.
 *    The search field never collapses, never hides, stays >=44px.
 * ================================================================== */

#ast-mobile-header .ast-header-search {
	max-width: none;
}

#ast-mobile-header .gvx-search-form .gvx-search-field {
	height: 44px;
}

#ast-mobile-header .gvx-search-form .gvx-search-submit {
	height: 44px;
	width: 48px;
}

#ast-mobile-header .ast-below-header-bar {
	padding-top: var(--gvx-space-2);
	padding-bottom: var(--gvx-space-2);
}

/* Track Order never consumes space in the mobile sticky rows (config
   keeps it out of mobile rows; this guards against misconfiguration). */
#ast-mobile-header .gvx-track-order {
	display: none;
}

/* ==================================================================
 * 6. Utility links — compact, readable, 44px targets.
 * ================================================================== */

.gvx-track-order {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 var(--gvx-space-2);
	font-family: var(--gvx-font-sans);
	font-size: var(--gvx-text-sm);
	font-weight: 500;
	color: var(--gvx-ink);
	text-decoration: none;
	white-space: nowrap;
}

.gvx-track-order:hover,
.gvx-track-order:focus-visible {
	color: var(--gvx-teal);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

#masthead .ast-header-account,
#masthead .ast-site-header-cart {
	display: flex;
	align-items: center;
	min-height: 44px;
}

#masthead .ast-header-account a,
#masthead .ast-site-header-cart a {
	color: var(--gvx-ink);
}

#masthead .ast-header-account a:hover,
#masthead .ast-site-header-cart a:hover {
	color: var(--gvx-teal);
}

/* ==================================================================
 * 7. Focus visibility inside the sticky region — never clipped,
 *    never removed. Scoped to the header only.
 * ================================================================== */

#masthead a:focus-visible,
#masthead button:focus-visible,
#masthead input:focus-visible {
	outline: 2px solid var(--gvx-teal);
	outline-offset: 2px;
}