/*
 * Sur les gabarits 100% bloc (accueil), WordPress enveloppe le template
 * part "header" dans un <header class="wp-block-template-part"> qui n'a
 * pas d'autre hauteur que celle de son enfant : sans le rendre sticky lui
 * aussi, il n'offre aucune marge de manœuvre pour que .chirripo-header
 * "colle" (son bloc englobant fait exactement sa propre hauteur). Sur les
 * templates PHP classiques (Portfolio, Clients, single-projet), ce wrapper
 * n'existe pas — cette règle est alors simplement sans effet.
 */
header.wp-block-template-part,
.chirripo-header {
    position: sticky;
    top: 0;
    /*
     * Plus haut que le menu mobile plein écran du bloc Navigation
     * (.wp-block-navigation__responsive-container.is-menu-open, z-index
     * 100000 côté cœur WordPress) : sans ça, l'overlay recouvre aussi le
     * logo (cliquable, retour à l'accueil) et le bouton d'ouverture/
     * fermeture du header, qui devraient au contraire rester visibles et
     * actifs par-dessus le menu ouvert (cf. maquette).
     */
    z-index: 100001;
}

.chirripo-header {
    background: var(--chirripo-color-bg, #0D0D0D);
    color: var(--chirripo-color-text, #f5f5f5);
    margin-bottom: -75px;
}

/*
 * z-index sur .chirripo-header (ci-dessus) ne suffit pas seul : la
 * comparaison avec le menu plein écran (z-index 100000 côté cœur
 * WordPress, sur un descendant profondément imbriqué) se fait DANS le
 * contexte d'empilement de .chirripo-header, pas contre lui — sans son
 * propre z-index, le logo y reste comparé au menu ouvert et perd. Il lui
 * faut donc, à lui, un z-index supérieur (et position:relative, sans quoi
 * z-index n'a aucun effet).
 */
.chirripo-header__logo {
    position: relative;
    z-index: 100001;
}

.chirripo-header__logo img {
    display: block;
}

.chirripo-header__logo a {
    align-items: center;
    display: flex;
}

/*
 * Sur les templates PHP classiques (single-projet, Portfolio, Clients), les
 * classes utilitaires "is-content-justification-*" générées dynamiquement
 * par WordPress (styles de support des blocs) ne sont pas imprimées — cela
 * fonctionne seulement sur les gabarits 100% bloc (accueil). On fixe donc
 * explicitement le layout ici plutôt que de dépendre de ces classes.
 */
.chirripo-header .is-content-justification-space-between {
    justify-content: space-between;
}

.chirripo-header .is-content-justification-right {
    justify-content: right;
}

.chirripo-header .wp-block-navigation__container {
    gap: 2.5rem;
}

.chirripo-header .wp-block-navigation-item__content {
    position: relative;
    display: inline-flex;
    align-items: center;
    color: inherit;
    font-family: var(--chirripo-font-body, 'Barlow', sans-serif);
    font-weight: 500;
    font-style: normal;
    font-size: 14px;
    line-height: 1;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
}

.chirripo-header .wp-block-navigation-item__content::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4px;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.8s ease-in-out;
}

.chirripo-header .wp-block-navigation-item__content:hover::after,
.chirripo-header .wp-block-navigation-item__content:focus-visible::after {
    transform: scaleX(1);
}

/*
 * Le bouton d'ouverture du menu mobile généré par le bloc Navigation
 * (core/navigation) n'a que 2 barres dans son SVG natif au lieu de 3 :
 * on masque ce SVG et on redessine un hamburger à 3 barres en CSS pur
 * plutôt que de patcher le core WordPress.
 */
.chirripo-header .wp-block-navigation__responsive-container-open svg {
    display: none;
}

/*
 * Le cœur WordPress masque ce bouton (attribut hidden, potentiellement
 * doublé d'aria-hidden) dès que le menu s'ouvre — on le garde affiché en
 * permanence (les 3 sélecteurs ci-dessous couvrent les variantes) : c'est
 * l'unique bouton d'ouverture ET de fermeture piloté par
 * site-header-nav.js, à la place du bouton "fermer" natif masqué plus bas.
 * Limité au mobile (cf. @media (min-width: 600px) côté cœur WordPress, qui
 * masque ce bouton par défaut au-delà de 600px) : sans ce cadrage, ce
 * !important écrasait aussi ce masquage desktop et affichait le hamburger
 * en permanence, y compris sur grand écran.
 */
@media (max-width: 600px) {

    .chirripo-header .wp-block-navigation__responsive-container-open,
    .chirripo-header .wp-block-navigation__responsive-container-open[hidden],
    .chirripo-header .wp-block-navigation__responsive-container-open[aria-hidden="true"] {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
}

.chirripo-header .wp-block-navigation__responsive-container-open {
    position: relative;
    width: 24px;
    height: 24px;
    z-index: 100001;
}

.chirripo-header .wp-block-navigation__responsive-container-open::before,
.chirripo-header .wp-block-navigation__responsive-container-open::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 4px;
    right: 4px;
    height: 1.5px;
    background: currentColor;
    transition: transform 0.35s ease, box-shadow 0.35s ease-in-out;
}

.chirripo-header .wp-block-navigation__responsive-container-open::before {
    box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor;
    transform: translateY(-50%);
}

.chirripo-header .wp-block-navigation__responsive-container-open::after {
    content: none;
}

/*
 * .is-menu-open sur ce même bouton (posée par site-header-nav.js, qui
 * observe l'état réel du menu) : les 3 barres se transforment en croix.
 */
.chirripo-header .wp-block-navigation__responsive-container-open.is-menu-open::before {
    box-shadow: none;
    transform: translateY(-50%) rotate(45deg);
}

.chirripo-header .wp-block-navigation__responsive-container-open.is-menu-open::after {
    content: '';
    transform: translateY(-50%) rotate(-45deg);
}

/*
 * Bouton "fermer" natif à l'intérieur du panneau plein écran : gardé dans
 * le DOM (site-header-nav.js lui délègue le clic pour fermer le menu, afin
 * de ne pas réimplémenter la logique de fermeture propre à l'Interactivity
 * API) mais masqué visuellement — un seul bouton visible, celui du header.
 */
.chirripo-header .wp-block-navigation__responsive-container-close {
    display: none !important;
}

@media (max-width: 600px) {
    .chirripo-header .wp-block-group.alignwide {
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }

    .chirripo-header__logo img {
        width: auto !important;
        max-width: 100px !important;
        height: auto !important;
    }
}

/*
 * Menu mobile plein écran (bloc core/navigation, ouvert via .is-menu-open).
 * Le bloc utilise overlayBackgroundColor:"base"/overlayTextColor:"contrast"
 * (parts/header.html) : des tokens couleur du thème PARENT (Twenty
 * Twenty-Five) — blanc/noir — jamais redéfinis côté Chirripo, donc à
 * l'opposé du thème sombre du site. On redéfinit ici la valeur de ces deux
 * variables (pas la propriété background/color elle-même, qui utilise
 * `!important` côté cœur WordPress) pour rester cohérent avec le reste du
 * header sans avoir à lutter contre la spécificité du cœur.
 */
.chirripo-header .wp-block-navigation {
    --wp--preset--color--base: #0D0D0D;
    --wp--preset--color--contrast: #f5f5f5;
}

.chirripo-header .wp-block-navigation__responsive-container.is-menu-open {
    align-items: center;
    justify-content: center;
}

.chirripo-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.chirripo-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
}

.chirripo-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
    font-family: var(--chirripo-font-body, sans-serif);
    font-size: 28px;
    font-weight: 400;
    letter-spacing: 0.05em;
}

@media (max-width: 600px) {
    .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content {
        padding: 0;
    }

    .chirripo-header .wp-block-navigation-item__content {
        line-height: 2;
    }

    .chirripo-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
        font-size: 32px;
    }

    #modal-1,
    #modal-1-content,
    .wp-block-navigation__responsive-dialog {
        padding: 0;
        margin-top: 0;
    }

    body>div>header>div>div>div {
        margin: 0;
    }


}