/**
 * Header Helebor — styles du template part « header » (header natif FSE).
 *
 * Source unique de la mise en forme du header. Remplace :
 *  - les snippets WPCodeBox « Header - Bouton - Perso » (CSS) et « JS mobile » (scroll) ;
 *  - assets/header/header_style.css, assets/css/header-frontend.css, assets/header/header.js (plugin ≤ 1.17).
 *
 * Fonctionnement : le header est TOUJOURS transparent et se superpose au hero. La couleur d'écriture / du logo
 * dépend de la variante posée sur <body> (header-variant-clair | fonce | noir, voir HeaderManager), puis
 * bascule en fond blanc / écriture noire / logo couleur après 50 px de scroll (classe .scrolled, voir helebor-header.js).
 *
 * Tout passe par des variables CSS (--hh-*) redéfinies par variante : aucune règle par couleur à dupliquer.
 *
 * Contrat de classes du template part (voir docs/HEADER.md) :
 *   .header-site (racine, 1 seul) > .header-inner > .logo-container (.logo-white|.logo-color|.logo-black),
 *   nav.nav-link (core/navigation, overlayMenu « always »), .button-menu (.btn-bordure, .btn-plein),
 *   .btn-mobile (item de menu visible uniquement dans l'overlay).
 */

/* ============================================================
   1. Variables (variante « clair » = valeurs par défaut)
   ------------------------------------------------------------
   clair : écriture noire, logo couleur   (fond de hero clair)
   fonce : écriture blanche, logo blanc   (fond de hero foncé / coloré — ce que le client appelle « clair »)
   noir  : écriture noire, logo noir
   ============================================================ */
.header-site {
	--hh-bg: transparent;
	--hh-fg: #000;
	--hh-border: rgba(0, 0, 0, 0.07);

	--hh-plein-bg: #000;
	--hh-plein-fg: #fff;

	--hh-bord-bg: transparent;
	--hh-bord-fg: #000;
	--hh-bord-border: #000;
	--hh-bord-hover: rgba(0, 0, 0, 0.07);

	/* Logo affiché : un seul des trois est en « block ». */
	--hh-show-color: block;
	--hh-show-white: none;
	--hh-show-black: none;
}

body.header-variant-fonce .header-site {
	--hh-fg: #fff;
	--hh-plein-bg: #fff;
	--hh-plein-fg: #000;
	--hh-bord-fg: #fff;
	--hh-bord-border: #fff;
	--hh-bord-hover: rgba(255, 255, 255, 0.15);
	--hh-show-color: none;
	--hh-show-white: block;
}

body.header-variant-noir .header-site {
	--hh-show-color: none;
	--hh-show-black: block;
}

/* Après scroll : fond blanc, écriture noire, logo couleur — identique pour les 3 variantes. */
body.header-transparent .header-site.scrolled {
	--hh-bg: #fff;
	--hh-fg: #000;
	--hh-plein-bg: #000;
	--hh-plein-fg: #fff;
	--hh-bord-bg: #fff;
	--hh-bord-fg: #000;
	--hh-bord-border: #000;
	--hh-bord-hover: rgba(0, 0, 0, 0.07);
	--hh-show-color: block;
	--hh-show-white: none;
	--hh-show-black: none;
}

/* Menu mobile ouvert : fond blanc fourni par le core, on force l'écriture noire quelle que soit la variante. */
.header-site .wp-block-navigation__responsive-container.is-menu-open {
	--hh-fg: #000;
	--hh-bord-fg: #000;
	--hh-bord-border: #000;
	--hh-bord-hover: rgba(0, 0, 0, 0.07);
}

/* ============================================================
   2. Conteneur : fixe, transparent, au-dessus du hero
   ============================================================ */
.header-site {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 100;
	box-sizing: border-box;
	margin: 0;
	padding: 20px 2%;
	background-color: var(--hh-bg);
	color: var(--hh-fg);
	border-bottom: 1px solid var(--hh-border);
	transition: background-color 0.25s ease, color 0.25s ease;
}

/* Barre d'administration WordPress. */
body.admin-bar .header-site {
	top: 32px;
}

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

.header-site .header-inner {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

/* ============================================================
   3. Logos (taille + variante)
   ============================================================ */
.header-site .logo-container {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	margin: 0;
}

.header-site .logo-container figure {
	margin: 0;
}

.header-site .logo-container img {
	display: block;
	width: 200px;
	max-width: 100%;
	height: auto;
}

.header-site .logo-white {
	display: var(--hh-show-white);
}

.header-site .logo-color {
	display: var(--hh-show-color);
}

.header-site .logo-black {
	display: var(--hh-show-black);
}

/* !important : le markup du template pose width:200px en style inline sur les <img>. */
@media (max-width: 575.98px) {
	.header-site .logo-container img {
		width: 150px !important;
	}
}

@media (max-width: 359.98px) {
	.header-site .logo-container img {
		width: 125px !important;
	}
}

/* ============================================================
   4. Navigation (liens, chevrons, burger) — couleur via --hh-fg
   ============================================================ */
.header-site .wp-block-navigation-item__content,
.header-site .wp-block-navigation__submenu-icon,
.header-site .wp-block-navigation__responsive-container-open,
.header-site .wp-block-navigation__responsive-container-close {
	color: var(--hh-fg);
	transition: color 0.25s ease;
}

/* Sous-menus déroulants desktop : fond blanc / texte noir quelle que soit la variante.
   Hors overlay uniquement : dans le menu mobile ouvert, le style est défini au §9. */
.header-site .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container {
	min-width: 220px;
	background-color: #fff;
	border-radius: 4px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.header-site .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: #000;
}

/* ============================================================
   5. Boutons (« Près de chez moi » = bordure, « Faire un don » = plein)
   ============================================================ */
.header-site .button-menu {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 16px;
	margin: 0;
}

/* Neutralise le style visuel du wrapper : tout se joue sur le lien réel. */
.header-site .btn-bordure,
.header-site .btn-plein {
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
}

.header-site .btn-bordure .wp-block-button__link,
.header-site .btn-plein .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--wp--preset--font-family--noto-sans, 'Noto Sans', sans-serif);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	padding: 12px 24px;
	border-radius: 10px;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, opacity 0.25s ease;
}

.header-site .btn-bordure .wp-block-button__link {
	background-color: var(--hh-bord-bg);
	color: var(--hh-bord-fg);
	border: 2px solid var(--hh-bord-border);
}

.header-site .btn-bordure .wp-block-button__link:hover {
	background-color: var(--hh-bord-hover);
	color: var(--hh-bord-fg);
}

.header-site .btn-plein .wp-block-button__link {
	background-color: var(--hh-plein-bg);
	color: var(--hh-plein-fg);
	border: 0;
}

.header-site .btn-plein .wp-block-button__link:hover {
	background-color: var(--hh-plein-bg);
	color: var(--hh-plein-fg);
	opacity: 0.85;
}

/* Item de menu « btn-mobile » : bouton affiché seulement dans le menu mobile ouvert (voir §6). */
/* Sélecteur renforcé : le core impose « padding: 0 » sur les liens du menu ouvert (spécificité 0,4,0). */
.header-site .wp-block-navigation__responsive-container.is-menu-open .btn-mobile .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 600;
	padding: 12px 24px;
	border: 2px solid var(--hh-bord-border);
	border-radius: 10px;
	color: var(--hh-bord-fg);
}

/* ============================================================
   6. Mobile (< 1024 px) : logo · burger · « Faire un don », espacés à égalité
   ------------------------------------------------------------
   Flex « space-between » : les trois éléments ont le même écart entre eux (le burger n'est donc pas
   centré sur l'écran, il est centré entre le logo et le bouton).
   Le core Navigation bascule en overlay à 600 px (valeur codée en dur). Avec overlayMenu « always »,
   l'overlay est permanent et on réaffiche le menu en ligne au-dessus du seuil ci-dessous (§7).
   ============================================================ */
@media (max-width: 1023.98px) {
	.header-site .header-inner {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
	}

	.header-site .header-inner > .logo-container,
	.header-site .header-inner > .wp-block-navigation,
	.header-site .header-inner > .button-menu {
		flex: 0 1 auto;
		margin: 0;
	}

	/* Burger sobre : pas de cadre, icône agrandie, zone tactile de 44 px. */
	.header-site .wp-block-navigation__responsive-container-open.always-shown {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 0;
		background: transparent;
		cursor: pointer;
		transition: color 0.25s ease, transform 0.15s ease;
	}

	.header-site .wp-block-navigation__responsive-container-open.always-shown:active {
		transform: scale(0.92);
	}

	.header-site .wp-block-navigation__responsive-container-open.always-shown svg {
		width: 32px;
		height: 32px;
	}

	/* Le bouton « Près de chez moi » passe dans le menu (item .btn-mobile). */
	.header-site .btn-bordure {
		display: none;
	}
}

/* ============================================================
   7. Desktop (≥ 1024 px) : menu en ligne, « btn-mobile » masqué
   ------------------------------------------------------------
   Reprend les règles natives du core Navigation (≥ 600 px) mais pour un overlay « always »
   (classe .hidden-by-default), avec notre propre seuil.
   ============================================================ */
@media (min-width: 1024px) {
	.header-site .wp-block-navigation__responsive-container-open.always-shown {
		display: none;
	}

	.header-site .wp-block-navigation__responsive-container.hidden-by-default:not(.is-menu-open) {
		display: block;
		position: relative;
		width: 100%;
		z-index: auto;
		background-color: inherit;
	}

	.header-site .wp-block-navigation__responsive-container.hidden-by-default:not(.is-menu-open) .wp-block-navigation__responsive-container-close {
		display: none;
	}

	.header-site .btn-mobile {
		display: none;
	}
}

/* ============================================================
   8. Décalage (templates sans hero : home, taxonomy-categorie_projet, 404, category, search)
   ------------------------------------------------------------
   Reprend à l'identique la compensation que posait l'ancien bloc plugin `wp-dashboard/header`
   (body.has-wp-dashboard-header-block) afin que ces 5 templates ne bougent pas.
   Classe posée par HeaderManager. À supprimer ici le jour où ces templates auront un hero sous le header.
   ============================================================ */
body.header-offset {
	padding-top: 80px;
}

@media (max-width: 768px) {
	body.header-offset {
		padding-top: 70px;
	}
}

@media (max-width: 480px) {
	body.header-offset {
		padding-top: 60px;
	}
}

/* ============================================================
   9. Menu mobile ouvert (overlay) : liste à plat, sous-menus repliés (accordéon)
   ------------------------------------------------------------
   Le chevron (bouton .wp-block-navigation-submenu__toggle) déplie / replie le sous-menu : le core bascule
   aria-expanded, on s'en sert pour l'affichage. Le lien parent reste cliquable (il navigue vers sa page).
   Préfixe « body .header-site.header-site » : spécificité volontairement élevée, le core et le thème posent
   des espacements (gap, padding-top) et des affichages sur ces mêmes éléments.
   ============================================================ */
body .header-site.header-site .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 56px;
	align-items: stretch;
}

body .header-site.header-site .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	width: 100%;
	align-items: stretch;
	gap: 0;
}

body .header-site.header-site .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 0;
	width: 100%;
	margin: 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

body .header-site.header-site .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	flex: 1 1 0;
	padding: 14px 0;
	font-size: 17px;
	line-height: 1.3;
	text-align: left;
}

/* Chevron : zone tactile 44 px, sans fond. */
body .header-site.header-site .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	margin: 0;
	background: transparent !important;
	color: #000;
}

body .header-site.header-site .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon svg {
	width: 14px;
	height: 14px;
	transition: transform 0.2s ease;
}

/* Tout l'item à sous-menu est cliquable (libellé + chevron) : il déplie, il ne navigue pas. */
body .header-site.header-site .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child > .wp-block-navigation-item__content {
	cursor: pointer;
}

body .header-site.header-site .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.hh-open > .wp-block-navigation__submenu-icon svg {
	transform: rotate(180deg);
}

/* Sous-menu : replié par défaut, sans carte ni ombre, compact, indenté. */
body .header-site.header-site .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container {
	display: none !important;
	flex: 0 0 100%;
	position: static;
	width: 100%;
	min-width: 0;
	gap: 0 !important;
	margin: 0;
	padding: 0 0 10px 14px !important;
	background: transparent !important;
	border: 0;
	box-shadow: none !important;
}

body .header-site.header-site .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child:has(> [aria-expanded="true"]) > .wp-block-navigation__submenu-container {
	display: flex !important;
	flex-direction: column;
}

body .header-site.header-site .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
	border-bottom: 0;
}

body .header-site.header-site .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 8px 0;
	font-size: 15px;
	line-height: 1.35;
}

/* Bouton « près de chez moi » : pleine largeur, en bas de liste. */
body .header-site.header-site .wp-block-navigation__responsive-container.is-menu-open .btn-mobile {
	margin-top: 20px;
	border-bottom: 0;
}

body .header-site.header-site .wp-block-navigation__responsive-container.is-menu-open .btn-mobile .wp-block-navigation-item__content {
	flex: 1 1 100%;
	justify-content: center;
	text-align: center;
	padding: 14px 24px;
	font-size: 13px;
	font-weight: 600;
}