/**
 * HAViK header — behavior layer.
 *
 * The header and footer are Elementor Theme Builder templates ("HAViK
 * Header", "HAViK Footer"): their layout, colors, type and spacing are set
 * in Elementor, on the variables. This file holds only what Elementor's
 * atomic elements can't do on their own:
 *   - keeping the header pinned to the top (sticky, or fixed over a hero)
 *   - the transparent state over a hero photo, and its scrim
 *   - showing and hiding the mobile drawer
 *   - a visually-hidden text helper for icon-only buttons and links
 * The matching script is assets/js/header.js.
 *
 * Hook classes (Elementor global classes, rendered under these names):
 *   .hv-header         the header's root container
 *   .hv-header-toggle  the hamburger button
 *   .hv-drawer         the mobile drawer
 *   .hv-drawer-close   the drawer's close button
 *   .hv-sr-only        text for screen readers only
 *
 * A page "has a hero" when it contains an element with the class
 * .hv-hero (or the current homepage's .havik-hero). Only then does the
 * header sit over the page, transparent until you scroll. Everywhere else
 * it's solid and takes up its own space, so it never covers content.
 * Phones (767px and below) always get the solid header.
 */

/* ==========================================================================
   Pinning
   ========================================================================== */

/* Every page: the header stays at the top, in the page flow. */
.elementor-location-header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
}

/* Pages with a hero, 768px and up: the header sits over the hero. */
@media (min-width: 768px) {
	body:has(.hv-hero, .havik-hero) .elementor-location-header {
		position: fixed;
		inset-inline: 0;
	}
}

/* ==========================================================================
   Transparent state (pages with a hero, 768px and up, before scrolling)
   ========================================================================== */

:root .hv-header {
	position: relative;
	transition: background-color 0.2s ease;
}

@media (min-width: 768px) {
	body:has(.hv-hero, .havik-hero) .hv-header:not(.hv-header--scrolled) {
		background-color: transparent;
	}

	/* Scrim: color-bg at opacity-70, fading to nothing, so the white menu
	   stays readable over a light part of the photo. */
	body:has(.hv-hero, .havik-hero) .hv-header::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background: linear-gradient(
			to bottom,
			color-mix(in srgb, var(--hv-color-bg) calc(var(--hv-opacity-70) * 100%), transparent),
			transparent
		);
		pointer-events: none;
		transition: opacity 0.2s ease;
	}

	body:has(.hv-hero, .havik-hero) .hv-header.hv-header--scrolled::before {
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	:root .hv-header,
	:root .hv-header::before {
		transition: none;
	}
}

/* ==========================================================================
   Drawer
   ========================================================================== */

/* Closed: hidden. Open: header.js adds .is-open. While the header template
   itself is being edited in Elementor, the drawer is always shown, in the
   page flow, so it can be edited. Elementor marks the document being
   edited with .elementor-edit-area-active; when another page is edited,
   the header is only a preview and the drawer stays hidden, as on the
   live site. */
body .hv-drawer:not(.is-open, .elementor-edit-area-active *) {
	display: none;
}

body .hv-drawer:not(.elementor-edit-area-active *) {
	position: fixed;
	inset: 0;
	z-index: 1000;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.elementor-edit-area-active .hv-drawer {
	position: static;
}

/* No page scrolling behind the open drawer. */
html.hv-drawer-open,
html.hv-drawer-open body {
	overflow: hidden;
}

/* ==========================================================================
   Visually hidden text
   ========================================================================== */

:root .hv-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}