/**
 * Header — transparent-over-hero state.
 *
 * Default (.is-over-hero NOT present on header): full lotion background,
 *   thin mtn-greige border below — same as before (handled by
 *   network-navigation.css).
 *
 * Over-hero (.is-over-hero present on header AND body): background fades
 *   to transparent on the header, a small black→transparent gradient sits
 *   at viewport top (above EVERYTHING — outside the header, painted via
 *   `body::before` with position: fixed so it isn't subject to header /
 *   global-banner stacking). The thin underline below the menu items
 *   remains for delineation. Link/logo color flips to lotion so the
 *   header reads clearly over the hero image.
 *
 * The page's first hero gets the `.vio-hero-overlap` class added by JS,
 * which pulls it up under the header via a negative top margin equal to
 * the header height (set in --vio-header-height by stickyHeader.js).
 * That way the hero image truly starts at viewport y=0, with the
 * transparent header floating on top of it.
 *
 * Companion JS at assets/js/header-over-hero.js toggles the classes
 * based on scroll position vs the first hero.
 */

/* Smooth transition between the two states. */
header.site-header {
	transition:
		background-color 0.28s ease,
		color 0.28s ease;
}

/* ── HERO OVERLAP — pull the first hero up behind the header ─────── */

/* High-specificity + !important so this wins against the
   `section.vio-section.vio-treatment-hero { margin: 0 !important }`
   rule in viomedspa-global.css. Both branches have matching
   specificity (0,2,1) so source order would pick the LATER one — we
   add !important on ours to win cleanly regardless. */
.vio-hero-overlap,
section.vio-section.vio-hero-overlap,
section.vio-hero-overlap {
	margin-top: calc(-1 * var(--vio-header-height, 80px)) !important;
}

/* CRITICAL — when the overlap section lives inside the post content
   container (`.wp-block-post-content` has `display: flow-root` from
   WordPress core), the section's own negative margin is TRAPPED inside
   that BFC and can't pull above the parent's top edge. To make the
   visual overlap actually happen, pull `<main>` itself up so the
   section's top edge ends up behind the header.

   `:has()` keeps this scoped to pages that actually contain an overlap
   section — every other page keeps its normal top alignment. */
main:has(.vio-hero-overlap) {
	margin-top: calc(-1 * var(--vio-header-height, 80px)) !important;
}
/* Treatment hero relies on its own positioning context for the bottom-
   anchored content stack — make sure the negative margin doesn't
   collapse with any internal margin on the inner layout. */
.vio-hero-overlap.vio-treatment-hero {
	position: relative;
}

/* ── HEADER OVER-HERO STATE ──────────────────────────────────────── */

header.site-header.is-over-hero {
	background-color: transparent !important;
	/* Drop the sticky shadow over hero — the top gradient handles the lift. */
	box-shadow: none !important;
}
header.site-header.is-over-hero .vio-header__inner {
	border-bottom: none;
	background-image: linear-gradient(
		rgba(255, 255, 255, 0.30),
		rgba(255, 255, 255, 0.30)
	);
	background-size: 100% 1px;
	background-position: bottom center;
	background-repeat: no-repeat;
	background-origin: content-box;
}

/* Light text over hero — but ONLY for items visible in the collapsed
   top bar (logo + top-level menu items + CTA pill). Submenu items
   inside mega-menu panels / mobile drawers stay their default ink
   color because those panels open with a WHITE background — white-on-
   white would be invisible. The reset rules further down ensure that.
   ── REST + visited + focus states only. Hover is handled separately
   below so CTA / call buttons can flip text → ink when their bg fills
   with lotion (otherwise lotion-on-lotion = invisible text). */
header.site-header.is-over-hero .vio-logo,
header.site-header.is-over-hero .vio-logo *,
header.site-header.is-over-hero .vio-logo svg,
header.site-header.is-over-hero .vio-network-nav .vio-nav__menu > li > a,
header.site-header.is-over-hero .vio-network-nav .vio-nav__menu > li > a:visited,
header.site-header.is-over-hero .vio-network-nav__call,
header.site-header.is-over-hero .vio-nav__call > a {
	color: var(--wp--preset--color--vio-lotion, #FEFFF9) !important;
}
/* Hover for top-level menu items that are NOT buttons — stay lotion
   (no bg fill happens, just a slight underline). CTA + call items
   get their hover handled by the .vio-btn rules below. */
header.site-header.is-over-hero .vio-network-nav .vio-nav__menu > li:not(.vio-nav__cta):not(.vio-nav__call) > a:hover,
header.site-header.is-over-hero .vio-network-nav .vio-nav__menu > li:not(.vio-nav__cta):not(.vio-nav__call) > a:focus {
	color: var(--wp--preset--color--vio-lotion, #FEFFF9) !important;
}
/* Logo asset swap — the header-logo pattern emits BOTH the dark and
   the white logo SVG as <img class="vio-logo__img vio-logo__img--dark"
   /vio-logo__img--light>. Hard show/hide via `display: none/block` —
   only one image renders at a time, no stacking / no overlap / no
   ghosting. Loses the crossfade animation but is robust against the
   existing `.vio-logo` flex / sizing rules in network-navigation.css. */
.vio-logo .vio-logo__img--light {
	display: none;
}
header.site-header.is-over-hero .vio-logo .vio-logo__img--dark {
	display: none;
}
header.site-header.is-over-hero .vio-logo .vio-logo__img--light {
	display: block;
}

/* Hamburger / mobile menu toggle icon — needs to be VISIBLE over the
   hero (white bars) but flip back to ink when the drawer is OPEN (because
   the drawer opens with a white background and the close-X would be
   invisible). The hamburger is built from three .hamburger__line spans
   styled via `background-color`, not via an SVG fill. */
header.site-header.is-over-hero:not(.has-drawer-open) .hamburger__line,
html:not(.nav-open) header.site-header.is-over-hero .hamburger__line {
	background: var(--wp--preset--color--vio-lotion, #FEFFF9) !important;
}
/* When the drawer is open, force the hamburger (now an X) back to ink
   so it reads against the white drawer panel. */
html.nav-open header.site-header.is-over-hero .hamburger__line {
	background: var(--wp--preset--color--vio-ink, #030303) !important;
}
/* In case any logo or icon SVGs sit inside the toggle button, mirror
   the same conditional white. */
html:not(.nav-open) header.site-header.is-over-hero .vio-nav__toggle svg,
html:not(.nav-open) header.site-header.is-over-hero .vio-nav__toggle svg *,
html:not(.nav-open) header.site-header.is-over-hero .nav-toggle svg,
html:not(.nav-open) header.site-header.is-over-hero .nav-toggle svg * {
	fill: var(--wp--preset--color--vio-lotion, #FEFFF9) !important;
	color: var(--wp--preset--color--vio-lotion, #FEFFF9) !important;
}

/* CTA button (FIND A VIO NEAR ME / similar) — transparent fill, white
   outline + white text at rest. Hover flips to solid white bg, ink text.
   Scoped to .vio-nav__cta only — must NOT match .vio-btn links inside
   mega accordions / drawer, which need ink text on light backgrounds. */
header.site-header.is-over-hero .vio-nav__cta > a,
header.site-header.is-over-hero .vio-nav__cta .vio-btn,
header.site-header.is-over-hero .vio-nav__call > a,
header.site-header.is-over-hero .vio-nav__call .vio-btn {
	background: transparent !important;
	color: var(--wp--preset--color--vio-lotion, #FEFFF9) !important;
	border-color: var(--wp--preset--color--vio-lotion, #FEFFF9) !important;
}
/* HOVER selectors include the full `.vio-network-nav .vio-nav__menu > li`
   chain so their specificity beats the REST rule above (which targets
   `.vio-nav__menu > li > a` and would otherwise win the `color`
   declaration on hover because of its deeper chain). */
header.site-header.is-over-hero .vio-network-nav .vio-nav__menu > li.vio-nav__cta > a:hover,
header.site-header.is-over-hero .vio-network-nav .vio-nav__menu > li.vio-nav__cta .vio-btn:hover,
header.site-header.is-over-hero .vio-network-nav .vio-nav__menu > li.vio-nav__call > a:hover,
header.site-header.is-over-hero .vio-network-nav .vio-nav__menu > li.vio-nav__call .vio-btn:hover {
	background: var(--wp--preset--color--vio-lotion, #FEFFF9) !important;
	color: var(--wp--preset--color--vio-ink, #030303) !important;
	border-color: var(--wp--preset--color--vio-lotion, #FEFFF9) !important;
}
/* Inner .vio-btn__text span — explicit color override so the text is
   readable when the button fills on hover, regardless of CSS variable
   cascades (--vio-btn-fg / --vio-btn-fg-hover) on .vio-btn--primary etc. */
header.site-header.is-over-hero .vio-network-nav .vio-nav__menu > li.vio-nav__cta > a:hover .vio-btn__text,
header.site-header.is-over-hero .vio-network-nav .vio-nav__menu > li.vio-nav__cta .vio-btn:hover .vio-btn__text,
header.site-header.is-over-hero .vio-network-nav .vio-nav__menu > li.vio-nav__call > a:hover .vio-btn__text,
header.site-header.is-over-hero .vio-network-nav .vio-nav__menu > li.vio-nav__call .vio-btn:hover .vio-btn__text {
	color: var(--wp--preset--color--vio-ink, #030303) !important;
}

/* ── RESET — submenu / drawer panels keep their default INK color ─
   The mega-menu panels (desktop dropdown) and the mobile drawer both
   open with a WHITE background. If they inherited the over-hero white
   text color, the links would be white-on-white and invisible. Force
   ink color explicitly on every link inside those panels. */
header.site-header.is-over-hero .vio-nav__menu .sub-menu,
header.site-header.is-over-hero .vio-nav__menu .sub-menu *:not(.vio-btn--primary),
header.site-header.is-over-hero .vio-nav__menu .sub-menu a:not(.vio-btn--primary),
header.site-header.is-over-hero .vio-nav__menu .sub-menu a:not(.vio-btn--primary):visited,
header.site-header.is-over-hero .vio-nav__menu .sub-menu a:not(.vio-btn--primary):hover,
header.site-header.is-over-hero .vio-nav__drawer,
header.site-header.is-over-hero .vio-nav__drawer *:not(.vio-btn--primary),
header.site-header.is-over-hero .vio-nav__drawer a:not(.vio-btn--primary),
header.site-header.is-over-hero .vio-nav__drawer a:not(.vio-btn--primary):visited,
header.site-header.is-over-hero .vio-nav__drawer a:not(.vio-btn--primary):hover {
	color: var(--wp--preset--color--vio-ink, #030303) !important;
}

/* When the mobile drawer is OPEN (html.nav-open), the top-level menu
   items render INSIDE the drawer panel (white background), so they
   must flip back to ink too. Covers the mobile-nav links AND any
   variant where the open drawer reveals the top-level nav menu. */
html.nav-open header.site-header.is-over-hero .vio-network-nav,
html.nav-open header.site-header.is-over-hero .vio-network-nav .vio-nav__menu > li:not(.vio-nav__cta) > a,
html.nav-open header.site-header.is-over-hero .vio-network-nav .vio-nav__menu > li:not(.vio-nav__cta) > a:visited,
html.nav-open header.site-header.is-over-hero .vio-network-nav .vio-nav__menu > li:not(.vio-nav__cta) > a:hover,
html.nav-open header.site-header.is-over-hero .vio-network-nav .vio-nav__menu > li:not(.vio-nav__cta) > a:focus,
html.nav-open header.site-header.is-over-hero .vio-nav--mobile,
html.nav-open header.site-header.is-over-hero .vio-nav--mobile a:not(.vio-btn--primary) {
	color: var(--wp--preset--color--vio-ink, #030303) !important;
}
/* CTA pill inside the drawer flips to its default dark-on-light skin too.
   Scoped to .vio-nav__cta only — must NOT match tertiary .vio-btn links
   (e.g. "View all") inside mega accordions, which need transparent bg. */
html.nav-open header.site-header.is-over-hero .vio-nav__cta .vio-btn,
html.nav-open header.site-header.is-over-hero .vio-nav__cta > a {
	background: var(--wp--preset--color--vio-ink, #030303) !important;
	color: var(--wp--preset--color--vio-lotion, #FEFFF9) !important;
	border-color: var(--wp--preset--color--vio-ink, #030303) !important;
}
/* SVG icons inside panels follow the same reset. */
header.site-header.is-over-hero .vio-nav__menu .sub-menu svg,
header.site-header.is-over-hero .vio-nav__menu .sub-menu svg *,
header.site-header.is-over-hero .vio-nav__drawer svg,
header.site-header.is-over-hero .vio-nav__drawer svg * {
	fill: var(--wp--preset--color--vio-ink, #030303) !important;
}
/* CTA buttons inside the drawer keep their dark-on-light branding
   regardless of the over-hero state. Scoped to .vio-nav__cta only. */
header.site-header.is-over-hero .vio-nav__drawer .vio-nav__cta .vio-btn {
	background: var(--wp--preset--color--vio-ink, #030303) !important;
	color: var(--wp--preset--color--vio-lotion, #FEFFF9) !important;
	border-color: var(--wp--preset--color--vio-ink, #030303) !important;
}
header.site-header.is-over-hero .vio-nav__drawer .vio-nav__cta .vio-btn:hover {
	background: transparent !important;
	color: var(--wp--preset--color--vio-ink, #030303) !important;
	border-color: var(--wp--preset--color--vio-ink, #030303) !important;
}

/* Force transparent bg + ink text on every .vio-btn inside the drawer
   EXCEPT the CTA — prevents over-hero lotion-color leaking onto
   tertiary "View all" links and mega CTA headings. */
header.site-header.is-over-hero .vio-nav__drawer .vio-btn:not(.vio-btn--primary) {
	background: transparent !important;
	color: var(--wp--preset--color--vio-ink, #030303) !important;
	border-color: transparent !important;
}

/* ── TOP GRADIENT — fixed at viewport top, only visible over hero ── */

/* Painted via body::before so it isn't subject to header / banner
   stacking constraints. position: fixed pins it to viewport top.
   z-index above the header (9997) so it paints over the menu area
   too.
   Per design: 100% black at viewport y=0, fades to 0% by 50% down the
   header's vertical height. So the gradient extends exactly half the
   header height (with an 80px fallback when --vio-header-height isn't
   yet set, gradient = 40px tall by default). */
body::before {
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: var(--vio-header-height, 80px);
	background: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0.80) 0%,
		rgba(0, 0, 0, 0) 100%
	);
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.28s ease;
	z-index: 9996;
}
body.is-over-hero::before {
	opacity: 1;
}
/* When the WP admin bar is shown (logged-in users), it occupies the
   top 32px of the viewport at z-index 99999 — above our gradient.
   Shift the gradient down below it so it remains visible to admins.
   `.admin-bar` is added to <body> by WP core only when the bar is on. */
body.admin-bar::before {
	top: 32px;
}
@media screen and (max-width: 782px) {
	body.admin-bar::before {
		/* Mobile admin bar is 46px tall, not 32. */
		top: 46px;
	}
}

/* Respect reduced-motion preferences — instant swap, no fade. */
@media (prefers-reduced-motion: reduce) {
	header.site-header,
	body::before {
		transition: none;
	}
}

/* ── ULTRAWIDE — constrain hero sections on monitors wider than 2:1.
   Cap section width at height × 2, center it, page background shows
   as bars on the sides. Must live in this file (loads AFTER the
   media-cta block CSS which forces width:100vw !important). ──────── */
@media (min-aspect-ratio: 2/1) {
	section.vio-section.vio-media-cta.vio-treatment-hero,
	section.vio-section.vio-media-cta.vio-treatment-hero.vio-hero-overlap {
		width: auto !important;
		min-width: 0 !important;
		max-width: calc(min(800px, var(--vio-viewport-height, 100svh)) * 2) !important;
		margin-left: auto !important;
		margin-right: auto !important;
		margin-bottom: 0 !important;
	}

	section.vio-section.vio-hero,
	section.vio-section.vio-hero.vio-hero-overlap {
		width: auto !important;
		min-width: 0 !important;
		max-width: calc(min(800px, var(--vio-viewport-height, 100svh)) * 2) !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	section.vio-section.vio-hero-slider,
	section.vio-section.vio-hero-slider.vio-hero-overlap {
		width: auto !important;
		min-width: 0 !important;
		max-width: calc(min(800px, var(--vio-viewport-height, 100svh)) * 2) !important;
		margin-left: auto !important;
		margin-right: auto !important;
		overflow: hidden;
	}
}