/* =====================================================================
 * FFVélo Kitcom — Super Navbar (modern CSS)
 *
 * Stack utilisé :
 * - CSS Nesting natif (Chrome 112+, Safari 16.5+, FF 117+)
 * - :is() / :where() pour gérer les deux systèmes de classes WP
 *   (.wp-block-navigation-item__content + .wp-block-pages-list__item__link)
 * - Custom properties scopées comme tokens de design
 * - Logical properties (padding-inline, margin-block-end, etc.)
 * - color-mix() pour les variantes de couleur
 * - IntersectionObserver côté JS (assets/js/header.js) pour data-elevated
 *
 * Inspiration : navbar officielle ffvelo.fr (height 6.625rem, breakpoint
 * desktop 1280px, underline primary 3px scaleY, burger rouge 56×56, etc.)
 * ===================================================================== */

.ffv-site-header {
    /* === Design tokens === */
    --ffv-h: 5rem;                          /* hauteur mobile */
    --ffv-h-desktop: 5.5rem;                /* hauteur desktop ≥1280px */
    --ffv-breakpoint: 1280px;
    --ffv-radius: 0.5rem;
    --ffv-radius-card: 0.75rem;
    --ffv-shadow-elevated:
        0 1px 0 rgb(41 38 117 / 0.04),
        0 8px 24px -12px rgb(41 38 117 / 0.22);
    --ffv-shadow-card:
        0 1px 2px rgb(27 25 90 / 0.04),
        0 12px 28px -8px rgb(27 25 90 / 0.18),
        0 4px 12px -6px rgb(27 25 90 / 0.10);
    --ffv-ease: cubic-bezier(0.215, 0.6, 0.27, 0.995);
    --ffv-ease-2: cubic-bezier(0.85, 0, 0.15, 1);
    --ffv-color-primary: var(--wp--preset--color--primary, #292675);
    --ffv-color-primary-dark: var(--wp--preset--color--primary-dark, #1B195A);
    --ffv-color-primary-pale: var(--wp--preset--color--primary-pale, #EDF0F9);
    --ffv-color-accent: var(--wp--preset--color--accent, #FB2726);
    --ffv-color-accent-dark: var(--wp--preset--color--accent-dark, #C81E1D);
    --ffv-color-surface: var(--wp--preset--color--surface, #fff);
    --ffv-color-border: var(--wp--preset--color--border, #E4E7EF);

    position: sticky;
    inset-block-start: 0;
    z-index: 1000;
    background: var(--ffv-color-surface);
    border-block-end: 1px solid transparent;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;

    /* État élevé : appliqué par JS dès que la page est scrollée */
    &[data-elevated="true"] {
        border-block-end-color: var(--ffv-color-border);
        box-shadow: var(--ffv-shadow-elevated);
    }

    /* === Conteneur intérieur === */
    & .ffv-site-header__inner {
        max-inline-size: 100rem;
        margin-inline: auto;
        inline-size: 100%;
        min-block-size: var(--ffv-h);
        align-items: center;
        padding-block: 0;
        padding-inline: clamp(1rem, 3vw, 2rem);

        @media (min-width: 1280px) {
            min-block-size: var(--ffv-h-desktop);
        }
    }

    /* ================================================================
     *  BRAND : badge rond + titre
     * ================================================================ */

    & .ffv-site-header__brand {
        flex: 0 0 auto;
        min-inline-size: 0;
        align-items: center;
        gap: 0.85rem;

        /* Badge rond avec roue de vélo en SVG inline (transparence supportée) */
        & .wp-block-site-title::before {
            content: '';
            display: inline-block;
            vertical-align: middle;
            inline-size: 48px;
            block-size: 48px;
            margin-inline-end: 0.85rem;
            border-radius: 50%;
            background-color: var(--ffv-color-primary);
            background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><g fill='none' stroke='%23ffffff' stroke-linecap='round'><circle cx='24' cy='24' r='16' stroke-width='2.2'/><circle cx='24' cy='24' r='3' fill='%23ffffff' stroke='none'/><path d='M24 8v32M8 24h32M12.7 12.7l22.6 22.6M35.3 12.7l-22.6 22.6' stroke-width='1.3'/></g></svg>");
            background-size: 100% 100%;
            background-repeat: no-repeat;
            box-shadow: 0 2px 8px -2px rgb(41 38 117 / 0.35);
            transition:
                transform 0.6s var(--ffv-ease-2),
                box-shadow 0.3s ease;
            flex-shrink: 0;

            @media (min-width: 1280px) {
                inline-size: 58px;
                block-size: 58px;
            }
        }

        /* Si un vrai logo est uploadé, on cache le badge CSS */
        &:has(.wp-block-site-logo img) .wp-block-site-title::before {
            display: none;
        }

        &:hover .wp-block-site-title::before {
            transform: rotate(180deg);
            box-shadow: 0 4px 14px -3px rgb(41 38 117 / 0.5);
        }

        & .wp-block-site-title {
            margin: 0;
            line-height: 1.15;
            font-size: 1rem;
            font-weight: 700;
            letter-spacing: -0.01em;

            @media (min-width: 1280px) {
                font-size: 1.125rem;
            }

            & a {
                color: var(--ffv-color-primary);
                text-decoration: none;
                white-space: nowrap;
                transition: color 0.25s ease;

                &:hover {
                    color: var(--ffv-color-accent);
                }
            }
        }

        & .wp-block-site-logo img {
            border-radius: 0;
            object-fit: contain;
            max-block-size: 4rem;
            inline-size: auto;
        }
    }

    /* ================================================================
     *  NAV — wrappers communs (desktop + overlay)
     * ================================================================ */

    & .ffv-site-header__nav {
        flex: 0 1 auto;
        min-inline-size: 0;
        margin-inline-start: auto;

        &.wp-block-navigation,
        & .wp-block-navigation__container {
            flex-wrap: nowrap;
            align-items: center;
        }

        /* ============================================================
         *  DESKTOP (≥1280px) — items inline, underline primary scaleY
         * ============================================================ */

        @media (min-width: 1280px) {
            & .wp-block-navigation__container {
                gap: 0;
            }

            & .wp-block-navigation-item {
                margin-inline: 1.0625rem;
                flex-shrink: 0;
            }

            & :is(.wp-block-navigation-item__content, .wp-block-pages-list__item__link) {
                position: relative;
                display: inline-flex;
                align-items: center;
                gap: 0.3rem;
                font-size: 1.125rem;
                font-weight: 500;
                line-height: 1.2;
                color: var(--ffv-color-primary);
                text-decoration: none;
                padding-block: 1.25rem 1.125rem;
                padding-inline: 0;
                white-space: nowrap;
                background: none;
                border-radius: 0;
                transition: color 0.25s ease;

                &::after {
                    content: '';
                    position: absolute;
                    inset-block-end: 0;
                    inset-inline: 0;
                    block-size: 0.1875rem;
                    background: var(--ffv-color-primary);
                    transform: scaleY(0);
                    transform-origin: bottom;
                    transition: transform 0.3s var(--ffv-ease);
                }
            }

            /* Underline déployé : hover, focus, page courante */
            & .wp-block-navigation-item:hover > :is(.wp-block-navigation-item__content, .wp-block-pages-list__item__link)::after,
            & :is(.wp-block-navigation-item__content, .wp-block-pages-list__item__link):focus-visible::after,
            & :is(.current-menu-item, .current_page_item, .current-menu-ancestor, .current-menu-parent) > :is(.wp-block-navigation-item__content, .wp-block-pages-list__item__link)::after {
                transform: scaleY(1);
            }

            /* Chevron submenu : centré avec le label, rotation au déploiement */
            & .wp-block-navigation__submenu-icon {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                margin: 0;
                line-height: 0;
                transition: transform 0.25s ease;

                & svg {
                    display: block;
                    inline-size: 0.75rem;
                    block-size: 0.75rem;
                }
            }

            & .has-child:hover .wp-block-navigation__submenu-icon,
            & .wp-block-navigation-submenu__toggle[aria-expanded="true"] .wp-block-navigation__submenu-icon {
                transform: rotate(180deg);
            }
        }

        /* ============================================================
         *  SOUS-MENU DESKTOP — carte blanche aérée
         *
         *  WP applique .has-primary-background-color sur les <li> enfants
         *  via le bloc parent. On override agressivement ici pour garantir
         *  un dropdown blanc lisible.
         * ============================================================ */

        & .wp-block-navigation__submenu-container {
            background: var(--ffv-color-surface);
            color: var(--ffv-color-primary);
            border: 1px solid var(--ffv-color-border);
            border-radius: var(--ffv-radius-card);
            box-shadow: var(--ffv-shadow-card);
            padding: 0.5rem;
            min-inline-size: 240px;
            margin-block-start: 0.5rem;
            opacity: 0;
            transform: translateY(-6px);
            transition:
                opacity 0.2s ease,
                transform 0.2s ease,
                visibility 0.2s ease;
            pointer-events: none;
            visibility: hidden;

            /* Reset des cascades WP sur les enfants */
            & :is(.wp-block-navigation-item, .wp-block-pages-list__item, .has-primary-background-color, .has-background) {
                margin: 0;
                padding: 0;
                background: transparent;
                color: var(--ffv-color-primary);
                list-style: none;
            }

            /* Lien : couvre les 2 systèmes WP en un :is() */
            & :is(.wp-block-navigation-item__content, .wp-block-pages-list__item__link, a) {
                display: block;
                inline-size: 100%;
                padding-block: 0.6rem;
                padding-inline: 0.85rem;
                font-size: 0.95rem;
                font-weight: 500;
                line-height: 1.3;
                color: var(--ffv-color-primary);
                text-align: start;
                text-decoration: none;
                background: transparent;
                border-radius: var(--ffv-radius);
                transition:
                    background-color 0.18s ease,
                    color 0.18s ease,
                    padding-inline-start 0.18s ease;

                &::after { display: none; }

                &:hover,
                &:focus-visible {
                    background: var(--ffv-color-primary-pale);
                    color: var(--ffv-color-primary-dark);
                    padding-inline-start: 1.1rem;
                }
            }

            /* Page courante dans le dropdown */
            & :is(.current-menu-item, .current_page_item) > :is(.wp-block-navigation-item__content, .wp-block-pages-list__item__link) {
                background: var(--ffv-color-primary-pale);
                color: var(--ffv-color-primary-dark);
                font-weight: 600;
            }
        }

        & .has-child:hover > .wp-block-navigation__submenu-container,
        & .has-child:focus-within > .wp-block-navigation__submenu-container {
            opacity: 1;
            transform: translateY(0);
            pointer-events: auto;
            visibility: visible;
        }

        /* ============================================================
         *  BURGER MOBILE — 3.5rem × 3.5rem fond rouge accent
         *  Calque sur .header-burger de ffvelo.fr
         * ============================================================ */

        & .wp-block-navigation__responsive-container-open {
            display: none;
            inline-size: 3.5rem;
            block-size: 3.5rem;
            padding: 0;
            background: var(--ffv-color-accent);
            color: var(--ffv-color-surface);
            border: none;
            border-radius: var(--ffv-radius);
            align-items: center;
            justify-content: center;
            transition: background 0.3s ease;

            &:hover {
                background: var(--ffv-color-accent-dark);
                color: var(--ffv-color-surface);
            }

            & svg {
                inline-size: 1.75rem;
                block-size: 1.75rem;
                fill: currentColor;
            }
        }

        /* Croix de fermeture dans l'overlay : carrée transparente blanche */
        & .wp-block-navigation__responsive-container-close {
            color: var(--ffv-color-surface);
            background: rgb(255 255 255 / 0.12);
            border-radius: var(--ffv-radius);
            padding: 0.5rem;
            transition: background 0.3s ease;

            &:hover {
                background: rgb(255 255 255 / 0.22);
                color: var(--ffv-color-surface);
            }

            & svg {
                inline-size: 1.75rem;
                block-size: 1.75rem;
            }
        }

        /* ============================================================
         *  OVERLAY MOBILE — fullscreen fond primary, items left-aligned
         *
         *  Le bug racine du right-alignment venait du fait que les <ul>
         *  internes (submenus) n'avaient pas align-items:stretch — donc
         *  les <li> enfants prenaient leur largeur naturelle puis étaient
         *  alignés flex-end par le parent flex. La règle "tout en stretch
         *  + width:100%" résout définitivement le problème.
         * ============================================================ */

        & .wp-block-navigation__responsive-container.is-menu-open {
            background: var(--ffv-color-primary);
            color: var(--ffv-color-surface);
            padding-block: clamp(5rem, 12vw, 6.5rem) clamp(2rem, 6vw, 3rem);
            padding-inline: clamp(1.5rem, 5vw, 3rem);

            /* Containers : tous en column flex + stretch (root du fix) */
            & :is(
                .wp-block-navigation__container,
                .wp-block-navigation__responsive-container-content,
                .wp-block-navigation__submenu-container
            ) {
                display: flex;
                flex-direction: column;
                align-items: stretch;
                justify-content: flex-start;
                flex-wrap: nowrap;
                gap: 0;
                margin: 0;
                padding: 0;
                text-align: start;
            }

            /* Items : width 100%, alignement gauche, neutralisation WP */
            & :is(.wp-block-navigation-item, .wp-block-pages-list__item, .has-primary-background-color, .has-background) {
                inline-size: 100%;
                align-self: stretch;
                margin: 0;
                padding: 0;
                background: transparent;
                color: var(--ffv-color-surface);
                list-style: none;
            }

            & > .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > .wp-block-navigation-item {
                border-block-end: 1px solid rgb(255 255 255 / 0.10);

                &:last-child { border-block-end: none; }
            }

            /* Label des items principaux : grand, gras, blanc */
            & :is(.wp-block-navigation-item__content, .wp-block-pages-list__item__link) {
                display: flex;
                align-items: center;
                justify-content: flex-start;
                gap: 0.75rem;
                inline-size: 100%;
                padding-block: 1rem;
                padding-inline: 0;
                font-size: 1.25rem;
                font-weight: 600;
                line-height: 1.3;
                color: var(--ffv-color-surface);
                text-align: start;
                text-decoration: none;
                background: transparent;
                border-radius: 0;
                white-space: normal;

                &::after { display: none; }

                &:hover,
                &:focus-visible {
                    color: color-mix(in srgb, var(--ffv-color-surface) 85%, transparent);
                    background: transparent;
                }
            }

            /* Page courante : rouge accent */
            & :is(.current-menu-item, .current_page_item) > :is(.wp-block-navigation-item__content, .wp-block-pages-list__item__link) {
                color: var(--ffv-color-accent);
            }

            /* Chevron sous-menu : à droite, rotation au déploiement */
            & .wp-block-navigation-submenu__toggle {
                justify-content: space-between;

                & .wp-block-navigation__submenu-icon {
                    margin-inline-start: auto;
                    color: rgb(255 255 255 / 0.7);
                    transition: transform 0.25s ease;
                }

                &[aria-expanded="true"] .wp-block-navigation__submenu-icon {
                    transform: rotate(180deg);
                }
            }

            /* Sous-menu en overlay : indent gauche + bordure subtile */
            & .wp-block-navigation__submenu-container {
                background: transparent;
                border: none;
                border-inline-start: 2px solid rgb(255 255 255 / 0.15);
                box-shadow: none;
                margin-block-end: 0.5rem;
                margin-inline-start: 0.25rem;
                padding-block-end: 0.5rem;
                padding-inline-start: 1rem;
                min-inline-size: 0;
                inline-size: auto;
                position: static;
                opacity: 1;
                transform: none;
                pointer-events: auto;
                visibility: visible;
                border-radius: 0;

                & :is(.wp-block-navigation-item__content, .wp-block-pages-list__item__link) {
                    font-size: 1rem;
                    font-weight: 400;
                    padding-block: 0.5rem;
                    padding-inline: 0;
                    color: color-mix(in srgb, var(--ffv-color-surface) 82%, transparent);

                    &:hover,
                    &:focus-visible {
                        color: var(--ffv-color-surface);
                        padding-inline-start: 0.5rem;
                        background: transparent;
                    }
                }
            }
        }
    }
}

/* ========================================================================
 *  Bascule en mode burger jusqu'à 1280px (override de la media query WP)
 *  WP par défaut switche à 600px → on étend pour matcher ffvelo.fr
 * ======================================================================== */

@media (max-width: 1279.98px) {
    .ffv-site-header__nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
        display: flex;
    }

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

/* ========================================================================
 *  Polish responsive sur très petits écrans
 * ======================================================================== */

@media (max-width: 600px) {
    .ffv-site-header__brand {
        gap: 0.5rem;

        & .wp-block-site-title { font-size: 0.9rem; }

        & .wp-block-site-title::before {
            inline-size: 40px;
            block-size: 40px;
            margin-inline-end: 0.65rem;
        }
    }
}

/* ========================================================================
 *  Compense le sticky pour les ancres internes
 * ======================================================================== */

:where(:target) {
    scroll-margin-block-start: calc(var(--ffv-h-desktop, 5.5rem) + 1rem);
}