/**
 * Chrome header — fixed + auto-hide (Story 8.1 / FR-15).
 * Tokens via presets theme.json (background, secondary).
 * Fichier source thème (pas de pipeline @wordpress/scripts).
 */

/* Compensation du flux : hauteur injectée en JS (--techniconcept-header-offset). */
.wp-site-blocks:has( > header .techniconcept-site-header ) {
	padding-top: var( --techniconcept-header-offset, 5rem );
}

.wp-site-blocks > header:has( .techniconcept-site-header ) {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	/* Empêche le chrome de suivre un document élargi (overflow-x). */
	overflow-x: clip;
	z-index: 200;
	background-color: var( --wp--preset--color--background, #fff );
	transition: transform 0.25s ease;
	will-change: transform;
}

/* Barre d’admin WP : ne pas coller le chrome sous la toolbar. */
body.admin-bar .wp-site-blocks > header:has( .techniconcept-site-header ) {
	top: 32px;
}

@media screen and ( max-width: 782px ) {
	body.admin-bar .wp-site-blocks > header:has( .techniconcept-site-header ) {
		top: 46px;
	}
}

.wp-site-blocks > header:has( .techniconcept-site-header ).is-header-hidden {
	transform: translateY( -100% );
}

/* Mobile produit : logos restent dans le chrome (pas d’auto-hide translateY). */
@media ( max-width: 781px ) {
	body.is-cheval-product-nav
		.wp-site-blocks
		> header:has( .techniconcept-site-header ).is-header-hidden {
		transform: none;
	}
}

.techniconcept-site-header {
	background-color: var( --wp--preset--color--background, #fff );
	/* Gouttières = contenu : --cheval-chrome-pad-x (= margin 24/12) via cheval-shell.css. */
	box-sizing: border-box;
	/* Figma HEADER : pas de padding vertical supplémentaire (logos 150 à y=24 via shell). */
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	border-bottom-width: 0 !important;
	/* Clip logos dans le chrome — la nav mobile produit est hors header (#hero). */
	overflow: hidden;
	max-width: 100%;
}

.techniconcept-site-header.wp-block-group {
	/* Hauteur chrome ≈ logos Figma ; le shell gère déjà la marge 24. */
	min-height: 0;
}

/*
 * Intro FR-16 (simplifiée) :
 * - Lockup : header TRANSPARENT (jamais noir chrome) sous le voile.
 * - Morph : header BLANC + wordmarks/nav noirs.
 */
body.is-cheval-arrival-pending .wp-site-blocks > header:has( .techniconcept-site-header ),
html.is-cheval-intro-locked:not( .is-cheval-arrival-wordmarks-visible )
	.wp-site-blocks
	> header:has( .techniconcept-site-header ) {
	background-color: transparent;
	transition:
		background-color 1.8s ease,
		transform 0.25s ease;
}

body.is-cheval-arrival-pending .techniconcept-site-header,
html.is-cheval-intro-locked:not( .is-cheval-arrival-wordmarks-visible )
	.techniconcept-site-header {
	background-color: transparent !important;
	border-bottom-color: transparent !important;
}

/* Nav avant morph : pas affichée ; filet couleur si flash. */
html.is-cheval-intro-locked:not( .is-cheval-arrival-wordmarks-visible )
	.techniconcept-site-primary-nav__list
	a {
	color: var( --wp--preset--color--background, #fff );
}

html.is-cheval-intro-locked:not( .is-cheval-arrival-nav-visible )
	.techniconcept-site-primary-nav {
	opacity: 0;
	pointer-events: none;
}

html.is-cheval-intro-locked:not( .is-cheval-arrival-wordmarks-visible )
	.techniconcept-site-header__wordmark {
	opacity: 0;
}

html.is-cheval-arrival-wordmarks-visible .techniconcept-site-header__wordmark,
html.is-cheval-arrival-nav-visible .techniconcept-site-primary-nav {
	opacity: 1;
	pointer-events: auto;
	/* Pose logos / nav au morph : meme rythme que le vol des wordmarks intro. */
	transition: opacity 1.8s ease;
}

/* Morph logos → chrome blanc définitif (pas attendre unlock). */
html.is-cheval-arrival-wordmarks-visible .wp-site-blocks > header:has( .techniconcept-site-header ),
html.is-cheval-arrival-complete .wp-site-blocks > header:has( .techniconcept-site-header ),
body.is-cheval-arrival-complete .wp-site-blocks > header:has( .techniconcept-site-header ) {
	background-color: var( --wp--preset--color--background, #fff );
	color: var( --wp--preset--color--primary, #000 );
}

html.is-cheval-arrival-wordmarks-visible .techniconcept-site-header,
html.is-cheval-arrival-complete .techniconcept-site-header,
body.is-cheval-arrival-complete .techniconcept-site-header {
	background-color: var( --wp--preset--color--background, #fff ) !important;
	color: var( --wp--preset--color--primary, #000 );
}

html.is-cheval-arrival-wordmarks-visible .techniconcept-site-header__wordmark img {
	filter: none;
}

html.is-cheval-arrival-wordmarks-visible .techniconcept-site-primary-nav__list a,
html.is-cheval-arrival-complete .techniconcept-site-primary-nav__list a,
body.is-cheval-arrival-complete .techniconcept-site-primary-nav__list a {
	color: inherit;
}

html.is-cheval-intro-locked .wp-site-blocks > header:has( .techniconcept-site-header ).is-header-hidden {
	/* Pendant lock : jamais cacher le header (filet CSS si JS rate). */
	transform: none;
}

@media ( prefers-reduced-motion: reduce ) {
	.wp-site-blocks > header:has( .techniconcept-site-header ) {
		transition: none;
	}

	body.is-cheval-arrival-pending .wp-site-blocks > header:has( .techniconcept-site-header ),
	html.is-cheval-intro-locked:not( .is-cheval-arrival-wordmarks-visible )
		.wp-site-blocks
		> header:has( .techniconcept-site-header ) {
		transition: none;
	}

	html.is-cheval-arrival-wordmarks-visible .techniconcept-site-header__wordmark,
	html.is-cheval-arrival-nav-visible .techniconcept-site-primary-nav {
		transition: none;
	}
}