/* ============================================
   Halo bleu de marque — Fabien M. Photography
   Fichier : assets/header-halo.css
   ============================================ */

/* --- Variables : dimensions du halo par contexte --- */

:root {
    --halo-w: 42vw;
    --halo-h: 34vh;
    --halo-height: 44vh;
    --halo-x: 12%;
}

body.home {
    --halo-w: 46vw;
    --halo-h: 40vh;
    --halo-height: 52vh;
    --halo-x: 10%;
}

/* Mobile : le halo doit rester plus large que le logo, sinon il l'étrangle.
   Seule la largeur change, les hauteurs restent celles du bureau. */
@media (max-width: 768px) {
    :root {
        --halo-w: 85vw;
        --halo-x: 22%;
    }

    body.home {
        --halo-w: 105vw;
        --halo-x: 25%;
    }
}

body.page-portfolio,
body.single-post {
    --halo-w: 34vw;
    --halo-h: 26vh;
    --halo-height: 34vh;
}

/* --- Le halo : pseudo-élément hors flux, non coupé par les conteneurs --- */

.wp-site-blocks {
    position: relative;
}

.wp-site-blocks::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--halo-height);
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(ellipse var(--halo-w) var(--halo-h) at var(--halo-x) -5%,
            #2E9BC8 0%,
            #2585BB 22%,
            #1B5FA8 40%,
            rgba(27, 95, 168, 0.55) 58%,
            rgba(27, 95, 168, 0.22) 72%,
            rgba(27, 95, 168, 0) 88%);
}

.wp-site-blocks>* {
    position: relative;
    z-index: 1;
}

/* L'en-tête doit dominer ses frères.

   La règle ci-dessus fait de chaque enfant direct un contexte d'empilement.
   Le menu mobile a beau porter un z-index de 100000, celui-ci ne vaut QU'À
   L'INTÉRIEUR du contexte de l'en-tête : face à <main>, frère de même niveau
   z-index 1 mais placé après dans le document, l'en-tête perdait — et le menu
   déroulé passait derrière le contenu. On sort l'en-tête du match nul. */
.wp-site-blocks>header.wp-block-template-part {
    z-index: 10;
}

/* --- Neutralisation des fonds opaques qui masqueraient le halo --- */

header.wp-block-template-part,
header.wp-block-template-part .wp-block-group,
.wp-site-blocks>main,
.wp-site-blocks>.wp-block-group,
.wp-block-post-content {
    background: transparent !important;
    background-color: transparent !important;
    border: 0;
}

/* --- Lisibilité du menu par-dessus le halo ---
   Le halo passe derrière le logo uniquement : le menu reste
   en bleu nuit sur le fond sable, comme sur les maquettes. --- */

header.wp-block-template-part a {
    color: var(--wp--preset--color--main);
}

header.wp-block-template-part a:hover {
    color: var(--wp--preset--color--primary);
}

/* Le bouton « Contact » du menu garde son texte clair */
header.wp-block-template-part .nav-cta a.wp-block-navigation-item__content,
header.wp-block-template-part .nav-cta a.wp-block-navigation-item__content:hover {
    color: var(--wp--preset--color--tertiary);
}