/*
 * LAU global header - responsive and behaviour layer only.
 *
 * Colors, typography, spacing, borders and layout are set from block
 * attributes in the template part and from the presets in project/theme.json.
 * Only the things Gutenberg cannot express live here: sticky positioning,
 * the overlay positioning, the two scroll states, the navigation breakpoint
 * shift and the CTA icons.
 */

/*
 * The header overlays the hero instead of sitting above it, so the photograph
 * reaches the top of the window. Taking it out of the flow is what removes the
 * band that used to separate both sections; no markup or hero change involved.
 */
.lau-site-header {
	position: fixed;
	top: var(--lau-admin-bar-offset, 0px);
	right: 0;
	left: 0;
	z-index: 100;
	/*
	 * No backdrop blur: at the top the photograph must read sharp behind the
	 * header, and once scrolled the background is solid, so blurring it would
	 * only cost paint time.
	 */
	transition:
		background-color 0.32s ease,
		border-color 0.32s ease,
		box-shadow 0.32s ease,
		color 0.32s ease;
}

/*
 * Horizontal breathing room, matching the value the hero sets on its cover so
 * the logo stays aligned with the hero copy. It has to be !important because
 * the block attribute serialises padding inline. Fluid on purpose: it never
 * eats the viewport on small screens and never runs away on wide ones.
 */
.lau-site-header {
	padding-right: clamp(1.25rem, 4vw, 4rem) !important;
	padding-left: clamp(1.25rem, 4vw, 4rem) !important;
}

/* Keep the fixed header clear of the WordPress admin bar. */
.admin-bar .lau-site-header {
	top: var(--lau-admin-bar-offset, 32px);
}

@media (max-width: 782px) {
	.admin-bar .lau-site-header {
		top: var(--lau-admin-bar-offset, 46px);
	}
}

/* The template part wrapper must not keep reserving space once its child is fixed. */
.wp-block-template-part:has(> .lau-site-header) {
	margin-block: 0;
}

/* ---------- Scroll states ---------- */

/*
 * WordPress emits preset colour classes as
 * `.has-*-background-color{background-color:var(--...) !important}`, so the
 * state rules must carry the same weight to win. The block attribute stays as
 * the value shown in the editor; these two rules only drive the scroll states.
 */

/*
 * Top state: fully transparent, with no border and no shadow, so the header
 * reads as part of the photograph rather than as a bar sitting on top of it.
 * The copy stays legible because the cover's own overlay already darkens the
 * whole image, including the strip behind the header.
 */
.lau-site-header.has-spx-header-surface-background-color {
	background-color: transparent !important;
	/* The block serialises its border inline, so removing the rule that would
	   read as a dividing line needs !important too. */
	border-bottom-color: transparent !important;
	box-shadow: none;
}

/*
 * Scrolled state: a warm light grey at 88%, not pure white. The blur is only
 * applied here, where the surface is meant to read as translucent; at the top
 * it would smear the photograph that must stay sharp.
 */
.lau-site-header.is-scrolled.has-spx-header-surface-background-color {
	background-color: color-mix(in srgb, var(--wp--preset--color--spx-surface) 88%, transparent) !important;
	border-bottom-color: color-mix(in srgb, var(--wp--preset--color--spx-border) 70%, transparent) !important;
	box-shadow: 0 1px 2px color-mix(in srgb, var(--wp--preset--color--spx-ink) 5%, transparent);
	-webkit-backdrop-filter: saturate(150%) blur(12px);
	backdrop-filter: saturate(150%) blur(12px);
}

/*
 * The brand text and the header itself carry preset colour classes, which
 * WordPress also emits with !important, so flipping them for the light state
 * needs the same weight. The header colour drives the mobile menu icon too,
 * since it is painted with currentColor.
 */
.lau-site-header.is-scrolled,
.lau-site-header.is-scrolled .lau-site-header__brand-name {
	color: var(--wp--preset--color--spx-ink) !important;
}

.lau-site-header.is-scrolled .lau-site-header__brand-tagline {
	color: var(--wp--preset--color--spx-muted-foreground) !important;
}

/*
 * Inline menu only: the mobile overlay keeps its own dark treatment.
 * On the light surface the label rests on the softer ink and hover deepens it
 * to full ink, mirroring the dim-to-bright move used over the photograph.
 */
.lau-site-header.is-scrolled
	.wp-block-navigation__responsive-container:not(.is-menu-open)
	a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--spx-ink-soft);
}

/* On the light surface the hovered link goes darker, not bronze: the gold cue
   is carried by the underline instead. */
.lau-site-header.is-scrolled
	.wp-block-navigation__responsive-container:not(.is-menu-open)
	a:where(:not(.wp-element-button)):hover {
	color: var(--wp--preset--color--spx-ink);
}

/*
 * The download CTA is paper on paper once scrolled, so it needs an outline to
 * stay readable. Its size, radius and colors are untouched.
 */
.lau-site-header.is-scrolled .lau-site-header__cta-download .wp-block-button__link {
	border: 1px solid var(--wp--preset--color--spx-border);
}

/*
 * Only one logo file exists, so the dark variant is produced by mapping the
 * light artwork to ink. Shapes, alpha and aspect ratio are preserved, and the
 * image is never duplicated.
 */
.lau-site-header__logo img {
	transition: filter 0.3s ease;
}

.lau-site-header.is-scrolled .lau-site-header__logo img {
	filter: brightness(0) opacity(0.86);
}

@media (prefers-reduced-motion: reduce) {
	.lau-site-header,
	.lau-site-header__logo img {
		transition: none;
	}
}

.lau-site-header > * {
	margin-block-start: 0;
}

.lau-site-header__inner {
	width: 100%;
}

/* ---------- Brand ---------- */

.lau-site-header__brand {
	flex: 0 0 auto;
	min-width: 0;
}

.lau-site-header__logo {
	flex: 0 0 auto;
	margin: 0;
	line-height: 0;
}

/*
 * Square box at every tier (96 / 112 / 128px), not the previous flat 96px
 * with an auto height. object-fit: contain is what keeps the mark from
 * stretching now that both dimensions are fixed rather than one being
 * intrinsic - it never crops or distorts, only ever letterboxes if the source
 * artwork is not itself square.
 */
.lau-site-header__logo img {
	display: block;
	width: 6rem;
	height: 6rem;
	object-fit: contain;
}

@media (min-width: 640px) {
	.lau-site-header__logo img {
		width: 7rem;
		height: 7rem;
	}
}

@media (min-width: 1024px) {
	.lau-site-header__logo img {
		width: 8rem;
		height: 8rem;
	}
}

.lau-site-header__brand-text {
	min-width: 0;
	gap: 0.15rem;
}

.lau-site-header__brand-name,
.lau-site-header__brand-tagline {
	white-space: nowrap;
}

/*
 * With the mark scaled up, the wordmark is eased down a step so the lockup
 * reads as one balanced unit and the descriptor keeps its weight. The preset
 * font-size class is emitted with !important, hence the same weight here.
 */
.lau-site-header__brand-name {
	font-size: 1.75rem !important;
}

/* ---------- Navigation ---------- */

.lau-site-header__end {
	flex: 0 1 auto;
	min-width: 0;
}

.lau-site-header__nav {
	flex: 0 1 auto;
}

.lau-site-header__nav .wp-block-navigation-item__content {
	text-decoration: none;
}

/*
 * Resting colour over the photograph: an off-white held slightly back, so that
 * hover reads purely as the label gaining light. The transition lives here so
 * both directions, in and out, are equally smooth.
 */
.lau-site-header
	.wp-block-navigation__responsive-container:not(.is-menu-open)
	a:where(:not(.wp-element-button)) {
	color: color-mix(in srgb, var(--wp--preset--color--spx-on-dark) 82%, transparent);
	transition: color 0.28s ease;
}

.lau-site-header__nav .wp-block-navigation__responsive-container-open,
.lau-site-header__nav .wp-block-navigation__responsive-container-close {
	color: currentColor;
}

/* ---------- Menu hover ---------- */

/*
 * The hover cue is a hairline drawn by a pseudo-element, so it never takes part
 * in layout and cannot change the header height. It is scaled from the centre
 * instead of animating width, which keeps the motion cheap and smooth.
 * Everything is gated behind `hover: hover` so it never sticks on touch.
 */
@media (hover: hover) {
	.lau-site-header__nav
		.wp-block-navigation__responsive-container:not(.is-menu-open)
		.wp-block-navigation-item__content {
		position: relative;
	}

	.lau-site-header__nav
		.wp-block-navigation__responsive-container:not(.is-menu-open)
		.wp-block-navigation-item__content::after {
		content: "";
		position: absolute;
		right: 0;
		bottom: -0.4rem;
		left: 0;
		height: 1px;
		background-color: var(--wp--preset--color--spx-primary);
		opacity: 0;
		transform: scaleX(0);
		transition:
			transform 0.28s ease,
			opacity 0.28s ease;
	}

	.lau-site-header__nav
		.wp-block-navigation__responsive-container:not(.is-menu-open)
		.wp-block-navigation-item__content:hover::after {
		opacity: 1;
		transform: scaleX(1);
	}

	/*
	 * Top state: the label rests as a slightly dimmed off-white and lifts to
	 * pure white on hover, so the change reads as extra light rather than a
	 * change of hue. Pure white is intentional; the palette has no white preset.
	 * All five items share this, Contacto included.
	 */
	.lau-site-header
		.wp-block-navigation__responsive-container:not(.is-menu-open)
		a:where(:not(.wp-element-button)):hover {
		color: #fff;
	}
}

/*
 * Core switches the navigation overlay at 600px. The reference design keeps the
 * inline menu until 1024px, so the drawer/hamburger state is forced across the
 * whole mobile-and-tablet range with a single explicit breakpoint.
 */
@media (max-width: 1023.98px) {
	.lau-site-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	.lau-site-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
}

/* ---------- Call to action buttons ---------- */

.lau-site-header__actions {
	flex: 0 0 auto;
}

.lau-site-header__actions .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	white-space: nowrap;
	text-decoration: none;
	transition:
		background-color 0.28s ease,
		color 0.28s ease,
		/* Slight overshoot so the lift reads as a small hop on the way in,
		   while the return stays smooth. */
		transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
		box-shadow 0.28s ease;
}

/* ---------- Button hover ---------- */

/*
 * Download CTA: on hover it borrows the warm accent already used by the phone
 * button. Size, padding, radius and typography are untouched, so nothing moves.
 * Preset colour classes are !important, so the swap needs the same weight.
 */
@media (hover: hover) {
	.lau-site-header__cta-download .wp-block-button__link:hover,
	.lau-site-header__cta-download .wp-block-button__link:focus-visible {
		background-color: var(--wp--preset--color--spx-primary) !important;
		color: var(--wp--preset--color--spx-paper) !important;
		border-color: transparent;
	}

	/*
	 * The phone/WhatsApp CTA used to lift from here. That lift now comes from
	 * the shared `lau-interactive-cards` utility on .lau-site-header__actions,
	 * so there is one definition instead of two. Its colours, size and radius
	 * are untouched.
	 */
}

@media (prefers-reduced-motion: reduce) {
	.lau-site-header__actions .wp-block-button__link,
	.lau-site-header__nav .wp-block-navigation-item__content,
	.lau-site-header__nav .wp-block-navigation-item__content::after {
		transition: none;
	}

	.lau-site-header__cta-phone .wp-block-button__link:hover {
		transform: none;
	}
}

/*
 * Download CTA only: the label is eased down a notch and the glyph up, so the
 * icon carries a bit more weight. Both moves are small and roughly cancel out,
 * which keeps the button's footprint and position as they were.
 */
.lau-site-header__cta-download .wp-block-button__link {
	font-size: 0.8rem;
}

.lau-site-header__cta-download .wp-block-button__link::before,
.lau-site-header__cta-phone .wp-block-button__link::before {
	content: "";
	flex: 0 0 auto;
	width: 1rem;
	height: 1rem;
	background-color: currentColor;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.lau-site-header__cta-download .wp-block-button__link::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='M7 11l5 5 5-5'/%3E%3Cpath d='M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='M7 11l5 5 5-5'/%3E%3Cpath d='M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2'/%3E%3C/svg%3E");
}

.lau-site-header__cta-phone .wp-block-button__link::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8z'/%3E%3C/svg%3E");
}

/* Declared after the shared sizing above so it actually wins on equal weight. */
.lau-site-header__cta-download .wp-block-button__link::before {
	width: 1.15rem;
	height: 1.15rem;
}

/* ---------- Mobile ---------- */

@media (max-width: 1023.98px) {
	/* The layout support emits `.wp-block-buttons.is-layout-flex{display:flex}`,
	   which outweighs a single class, so hiding needs the same weight. */
	.lau-site-header__actions {
		display: none !important;
	}

	.lau-site-header__brand-tagline {
		white-space: normal;
	}

	/*
	 * Rescaled subtitle for phones and tablets: the descriptor drops to a
	 * near-caption size and is held back further with a dedicated opacity so it
	 * clearly reads as secondary next to the compressed logo lockup. The preset
	 * font-size class and the inline letter-spacing/margin styles are both
	 * emitted by the block with equal or higher weight, so overriding them here
	 * needs !important on each declaration this rule actually changes.
	 */
	.lau-site-header__brand-tagline {
		font-size: 9.5px !important;
		letter-spacing: 0.08em !important;
		opacity: 0.7;
	}

	/*
	 * Brand lockup, compacted for the same phone-and-tablet range as the
	 * tagline above (previously only the logo's own <640px tier and a
	 * separate <639.98px name rule did this, leaving the 640-1023px tablet
	 * band at the full desktop-tier logo/name size and crowding the menu
	 * button). One shared size across the whole range now, instead of a
	 * second tier.
	 */
	.lau-site-header__logo img {
		width: 3.25rem;
		height: 3.25rem;
	}

	.lau-site-header__brand-name {
		font-size: 1.25rem !important;
	}
}

/*
 * Small screens only: the horizontal gutter, and an overflow guard on the
 * tagline. The logo/name/tagline sizes themselves are set once in the shared
 * @media (max-width: 1023.98px) block above and apply unchanged all the way
 * down to the smallest phones.
 *
 * The ellipsis is a guard, not a design: if the descriptor ever grows again
 * it now clips instead of shoving the button out of the header. The 24px
 * minimum gap to that button comes from `.lau-site-header__inner`'s own
 * blockGap (spacing|50) in the markup, not from anything in this file.
 */
@media (max-width: 639.98px) {
	.lau-site-header {
		padding-right: 1.5rem !important;
		padding-left: 1.5rem !important;
	}

	.lau-site-header__brand-tagline {
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

/* ---------- Off-canvas drawer (mobile & tablet) ---------- */

/*
 * The bottom action buttons are real navigation-block children (see
 * markup.php), which keeps them Gutenberg-editable. They stay hidden in the
 * inline header and are only revealed once WordPress's own Interactivity API
 * adds `.is-menu-open` to the responsive container. `.wp-block-buttons`
 * carries its own `.is-layout-flex{display:flex}` support class, hence the
 * matching !important on both the hide and the reveal.
 */
.lau-site-header__nav-search,
.lau-site-header__nav-actions {
	display: none !important;
}

@media (max-width: 1023.98px) {
	/*
	 * The header's scrolled backdrop filter makes fixed descendants use the
	 * header as their containing block in mobile Chrome. That used to compress
	 * WordPress's overlay to the header height. Keep that containment explicit
	 * while the menu is open, then give the drawer the full visible viewport.
	 */
	.lau-site-header:has(.wp-block-navigation__responsive-container.is-menu-open) {
		transform: translateZ(0);
	}

	/*
	 * Background colour and text colour already come from the block's own
	 * overlayBackgroundColor/overlayTextColor attributes (spx-section-dark,
	 * the exact #0C0D10 ink token, and spx-on-dark). The size rules below make
	 * the native core/navigation modal behave like a real mobile drawer.
	 */
	.lau-site-header__nav .wp-block-navigation__responsive-container.is-menu-open {
		box-sizing: border-box;
		top: 0 !important;
		right: 0 !important;
		bottom: auto !important;
		left: 0 !important;
		width: 100vw !important;
		max-width: none !important;
		height: calc(100vh - var(--lau-admin-bar-offset, 0px)) !important;
		height: calc(100dvh - var(--lau-admin-bar-offset, 0px)) !important;
		padding: 1.25rem 5vw calc(1.5rem + env(safe-area-inset-bottom)) !important;
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-backdrop-filter: blur(12px);
		backdrop-filter: blur(12px);
		border-left: 0;
	}

	.lau-site-header__nav .wp-block-navigation__responsive-close,
	.lau-site-header__nav .wp-block-navigation__responsive-dialog {
		width: 100%;
		height: 100%;
	}

	.lau-site-header__nav .wp-block-navigation__responsive-dialog {
		margin-top: 0;
	}

	.lau-site-header__nav .wp-block-navigation__responsive-container-close {
		top: 0;
		right: 0;
		display: grid;
		width: 2.75rem;
		height: 2.75rem;
		place-items: center;
		border: 1px solid color-mix(in srgb, var(--wp--preset--color--spx-paper) 16%, transparent);
		border-radius: 0.5rem;
		color: var(--wp--preset--color--spx-on-dark);
	}

	.lau-site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		display: flex;
		flex-direction: column;
		gap: var(--wp--preset--spacing--40);
		height: 100%;
		padding-top: 4rem;
	}

	/* Links: full-width, touch-friendly rows with a hairline divider between them. */
	.lau-site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		order: 0;
		flex: 0 0 auto;
		width: 100%;
		gap: 0;
	}

	.lau-site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
		width: 100%;
		border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--spx-paper) 10%, transparent) !important;
	}

	/*
	 * The bronze indicator is a left rule rather than the desktop underline,
	 * since a touch row reads better with a full-height edge cue than with a
	 * hairline under the label. Transition matches the desktop hover timing.
	 */
	.lau-site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		display: block;
		width: 100%;
		padding-block: 0.875rem;
		font-size: 1.125rem;
		border-left: 3px solid transparent;
		padding-left: 0.75rem;
		transition:
			border-color 0.2s ease,
			color 0.2s ease;
	}

	.lau-site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
	.lau-site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible,
	.lau-site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content {
		border-left-color: var(--wp--preset--color--spx-primary);
		color: var(--wp--preset--color--spx-primary) !important;
	}

	/* Actions: pinned to the bottom of the panel, each button full-width. */
	.lau-site-header__nav .wp-block-navigation__responsive-container.is-menu-open .lau-site-header__nav-actions {
		display: flex !important;
		order: 999;
		margin-top: auto;
		flex: 0 0 auto;
		width: 100%;
	}

	.lau-site-header__nav-actions .wp-block-button {
		width: 100%;
	}

	.lau-site-header__nav-actions .wp-block-button__link {
		width: 100%;
		justify-content: center;
	}
}

/* ---------- Editor ---------- */

.editor-styles-wrapper .lau-site-header {
	position: static;
}