/* Header: sticky, overlays a hero when body.has-header-overlay, shrinks when .is-scrolled (see header.js).
   Menus are real Navigation blocks: the burger menu (.vaya-header__nav, panel = template part menu-overlay) and the
   header buttons (.vaya-header__ctas, first item filled, the others outlined). */

.wp-site-blocks > header.wp-block-template-part {
	--vaya-header-h: 4.25rem;
	--vaya-header-h-full: 4.25rem;
	--vaya-header-h-scrolled: 3.25rem;
	--vaya-fg: var(--wp--preset--color--deep-sea);
	--vaya-cta-text: var(--wp--preset--color--beton);

	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
	background-color: var(--wp--preset--color--beton);
	border-bottom: 1px solid color-mix(in srgb, currentColor 15%, transparent);
	color: var(--vaya-fg);
	transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

/* The admin bar is only fixed above 600px; below, it scrolls away, so the sticky header must stick to the very top. */
@media (max-width: 600px) {
	.admin-bar .wp-site-blocks > header.wp-block-template-part {
		top: 0;
	}
}

@media (min-width: 782px) {
	.wp-site-blocks > header.wp-block-template-part {
		--vaya-header-h: 5.5rem;
		--vaya-header-h-full: 5.5rem;
		--vaya-header-h-scrolled: 3.75rem;
	}
}

.wp-site-blocks > header.wp-block-template-part.is-scrolled {
	--vaya-header-h: var(--vaya-header-h-scrolled);
}

/* Overlay variant: no space reserved, transparent and light until scrolled; the hero shows the big logo meanwhile. */
/* The negative margin always equals the current header height (+ its 1 px border) and animates with it, so the
   content below never jumps when the header shrinks on scroll. */
.has-header-overlay .wp-site-blocks > header.wp-block-template-part {
	margin-bottom: calc(-1 * (var(--vaya-header-h) + 1px));
	transition: background-color 0.3s, color 0.3s, border-color 0.3s, margin-bottom 0.3s;
}

.has-header-overlay .wp-site-blocks > header.wp-block-template-part:not(.is-scrolled) {
	--vaya-fg: var(--wp--preset--color--beton);
	--vaya-cta-text: var(--wp--preset--color--deep-sea);
	background-color: transparent;
	border-color: transparent;
	/* Scrim keeps the light burger and buttons readable on any hero image or video. */
	background-image: linear-gradient(to bottom, rgb(0 0 0 / 0.35), transparent);
	background-repeat: no-repeat; /* otherwise the gradient repeats into the border and draws a seam */
}

.has-header-overlay .wp-site-blocks > header.wp-block-template-part:not(.is-scrolled) .vaya-header__logo {
	opacity: 0;
	pointer-events: none;
}

/* Layout: desktop nav | logo | ctas, mobile logo | ctas | nav. */
.vaya-header__inner {
	display: grid;
	grid-template-areas: "logo ctas nav";
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	min-height: var(--vaya-header-h);
	padding-inline: var(--wp--preset--spacing--40);
	transition: min-height 0.3s;
}

.vaya-header__inner > * {
	margin: 0;
}

@media (min-width: 782px) {
	.vaya-header__inner {
		grid-template-areas: "nav logo ctas";
		grid-template-columns: 1fr auto 1fr;
	}
}

.vaya-header__nav { grid-area: nav; }
.vaya-header__logo { grid-area: logo; display: block; color: inherit; transition: opacity 0.3s; }
.vaya-header__ctas { grid-area: ctas; justify-self: end; }

.vaya-logo svg {
	display: block;
	width: auto;
	height: 1.5rem;
}

.vaya-header__logo svg {
	height: calc(var(--vaya-header-h) * 0.38);
	transition: height 0.3s;
}

/* Burger: two thin long lines like the reference (26 x 1 px, 6 px apart) instead of WordPress' short icon.
   The 44 px touch area comes from the padding; the accessible name stays on the button. */
.vaya-header__nav .wp-block-navigation__responsive-container-open {
	box-sizing: content-box;
	width: 26px;
	height: 8px;
	margin-inline-start: -9px;
	padding: 18px 9px;
	color: var(--vaya-fg);
}

.vaya-header__nav .wp-block-navigation__responsive-container-open svg {
	display: none;
}

.vaya-header__nav .wp-block-navigation__responsive-container-open::before {
	content: "";
	display: block;
	box-sizing: border-box;
	width: 26px;
	height: 8px;
	border-block: 1px solid currentColor;
}

/* Menu items of the burger menu are shown inside the overlay panel only. */
.vaya-header__nav .wp-block-navigation__responsive-container-content > .wp-block-navigation__container {
	display: none;
}

/* --- Header buttons: a Navigation rendered as buttons (also used in the overlay bar) --- */
.vaya-header__ctas .wp-block-navigation__container {
	flex-wrap: nowrap;
	gap: 0.5rem;
}

.vaya-header__ctas .wp-block-navigation-item__content {
	display: block;
	padding: var(--wp--custom--button--padding-y) var(--wp--custom--button--padding-x);
	border: 1px solid var(--vaya-fg);
	border-radius: var(--wp--custom--button--radius);
	color: var(--vaya-fg);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--custom--button--font-size);
	letter-spacing: var(--wp--custom--button--letter-spacing);
	line-height: var(--wp--custom--button--line-height);
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s, color 0.2s;
}

.vaya-header__ctas .wp-block-navigation-item:first-child .wp-block-navigation-item__content {
	background-color: var(--vaya-fg);
	color: var(--vaya-cta-text);
}

/* Hover/focus inverts filled <-> outline (keeps contrast; Sunset Orange is too light for text). */
.vaya-header__ctas .wp-block-navigation-item:first-child .wp-block-navigation-item__content:hover,
.vaya-header__ctas .wp-block-navigation-item:first-child .wp-block-navigation-item__content:focus-visible {
	background-color: transparent;
	color: var(--vaya-fg);
}

.vaya-header__ctas .wp-block-navigation-item:not(:first-child) .wp-block-navigation-item__content:hover,
.vaya-header__ctas .wp-block-navigation-item:not(:first-child) .wp-block-navigation-item__content:focus-visible {
	background-color: var(--vaya-fg);
	color: var(--vaya-cta-text);
}

/* --- Menu overlay (template part "menu-overlay"): bar with logo, buttons, close; menu; social + language --- */
.vaya-overlay {
	--vaya-fg: var(--wp--preset--color--deep-sea);
	--vaya-cta-text: var(--wp--preset--color--beton);

	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
	padding-inline: var(--wp--preset--spacing--40);
	padding-bottom: var(--wp--preset--spacing--50);
	animation: vaya-fly-in 0.35s ease-out;
}

.vaya-overlay > * {
	margin: 0;
}

.vaya-overlay__bar {
	min-height: var(--vaya-header-h-full, 4.25rem);
	gap: var(--wp--preset--spacing--30);
}

.vaya-overlay__bar .vaya-header__ctas {
	margin-inline-start: auto;
}

.vaya-overlay .wp-block-navigation-overlay-close {
	position: relative;
	width: 44px;
	height: 44px;
	padding: 0;
	color: inherit;
}

/* Thin X to match the burger (two 1 px lines instead of WordPress' bold icon). */
.vaya-overlay .wp-block-navigation-overlay-close svg {
	display: none;
}

.vaya-overlay .wp-block-navigation-overlay-close::before,
.vaya-overlay .wp-block-navigation-overlay-close::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 24px;
	height: 0;
	border-top: 1px solid currentColor;
}

.vaya-overlay .wp-block-navigation-overlay-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.vaya-overlay .wp-block-navigation-overlay-close::after { transform: translate(-50%, -50%) rotate(-45deg); }

.vaya-overlay__nav {
	margin-top: var(--wp--preset--spacing--50);
}

.vaya-overlay__nav .wp-block-navigation__container {
	width: 100%;
	gap: 0;
}

.vaya-overlay__nav .wp-block-navigation-item {
	width: 100%;
	border-bottom: 1px solid color-mix(in srgb, currentColor 15%, transparent);
}

/* Menu entries as quiet as on the reference site: small, tracked, uppercase. */
.vaya-overlay__nav .wp-block-navigation-item__content {
	display: block;
	padding-block: 1.25rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
}

.vaya-overlay__nav .wp-block-navigation-item__content:hover,
.vaya-overlay__nav .wp-block-navigation-item__content:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

/* Desktop: a compact panel from the top (the page stays visible below it, nothing to scroll), no dividers. */
@media (min-width: 782px) {
	.vaya-header__nav .wp-block-navigation__responsive-container.is-menu-open {
		bottom: auto;
		max-height: 100dvh;
	}

	.vaya-overlay {
		min-height: 0;
	}

	.vaya-overlay__nav {
		margin-top: var(--wp--preset--spacing--40);
	}

	.vaya-overlay__nav .wp-block-navigation-item {
		border-bottom: 0;
	}

	.vaya-overlay__nav .wp-block-navigation-item__content {
		padding-block: 0.7rem;
	}
}

.vaya-overlay__foot {
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--50);
	align-items: center;
}

@media (min-width: 782px) {
	.vaya-overlay__foot {
		margin-top: var(--wp--preset--spacing--50);
	}
}

@keyframes vaya-fly-in {
	from { transform: translateY(-100%); }
	to { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.vaya-overlay { animation: none; }
	.wp-site-blocks > header.wp-block-template-part,
	.has-header-overlay .wp-site-blocks > header.wp-block-template-part,
	.vaya-header__inner,
	.vaya-header__logo,
	.vaya-header__logo svg { transition: none; }
}