/* =========================================================
   MHPSS ProCare Firm
   Menu burger (tablette et telephone, jusqu a 1099px)

   Une seule presentation pour toutes les largeurs : une carte
   en verre sous le bandeau, sur un calque de fond flou. Le
   burger se change en croix et sert aussi a fermer.

   Le comportement (fermeture au clic sur le fond ou sur un
   lien, calque de fond, lien du compte deplace dans le menu)
   est dans horizons-extension.js.
   ========================================================= */

@media (max-width: 1099px) {

    /* ---------------------------------------------------------
       1. Bouton burger
       --------------------------------------------------------- */

    .wp-block-navigation__responsive-container-open:not(.always-shown) {
        display: flex !important;
        justify-content: center;
    }

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

    .wp-block-navigation__responsive-container-open {
        display: inline-grid;
        width: 2.5rem;
        height: 2.5rem;
        place-items: center;
        border: 0;
        border-radius: 0.375rem;
        background: transparent;
        color: color-mix(in srgb, var(--hz-foreground) 72%, transparent);
        box-shadow: none;
    }

    .wp-block-navigation__responsive-container-open:hover,
    .wp-block-navigation__responsive-container-open:focus-visible {
        color: var(--hz-foreground);
    }

    .wp-block-navigation__responsive-container-open svg {
        width: 1.35rem;
        height: 1.35rem;
    }

    /* ---------------------------------------------------------
       2. Menu ouvert : le bandeau reste visible au-dessus du
       calque de fond (meme z-index que la carte du menu), a sa
       place habituelle. backdrop-filter cree un cadre de
       reference pour les descendants en position fixed : on le
       retire ici pour que le calque de fond et la carte du menu
       restent bien positionnes par rapport a l ecran, pas au
       bandeau.
       --------------------------------------------------------- */

    header.wp-block-template-part:has(.wp-block-navigation__responsive-container.is-menu-open) {
        position: fixed !important;
        top: calc(0.75rem + var(--hz-safe-top)) !important;
        left: max(1rem, env(safe-area-inset-left, 0px)) !important;
        right: max(1rem, env(safe-area-inset-right, 0px)) !important;
        margin-inline: 0 !important;
        z-index: 100001 !important;
        overflow: visible !important;
        border-color: rgba(7, 71, 107, 0.08) !important;
        border-radius: 1.5rem !important;
        background-color: rgba(250, 250, 250, 0.95) !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    /* Le conteneur couvre l ecran mais reste transparent : il ne
       sert qu a placer la carte ; un clic dessus (en dehors de la
       carte) ferme le menu. Le calque gris flou est un <div> a
       part (#hz-mobile-menu-backdrop, cree par le script juste
       avant </body>), jamais imbrique dans le bandeau. */

    .wp-block-navigation__responsive-container.is-menu-open {
        display: flex !important;
        flex-direction: column !important;
        position: fixed !important;
        inset: 0 !important;
        z-index: 100001 !important;
        width: 100vw !important;
        max-width: none !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-height: none !important;
        margin: 0 !important;
        padding: calc(var(--hz-bandeau) + var(--hz-safe-top) + 0.5rem) max(1rem, env(safe-area-inset-right, 0px)) 1rem max(1rem, env(safe-area-inset-left, 0px)) !important;
        box-sizing: border-box !important;
        border: 0 !important;
        border-radius: 0 !important;
        overflow-y: auto !important;
        background-color: transparent !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        box-shadow: none !important;
        color: var(--hz-foreground) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    #hz-mobile-menu-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 100000;
        background-color: rgba(15, 23, 42, 0.45);
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
    }

    #hz-mobile-menu-backdrop.is-open {
        display: block;
    }

    /* La carte prend sa hauteur de contenu ; si le menu est trop
       long, c est le conteneur ci-dessus qui defile. */

    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close {
        width: 100%;
    }

    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
        position: relative !important;
        display: block !important;
        flex: 0 0 auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 1.5rem 1.25rem !important;
        border: 1px solid rgba(7, 71, 107, 0.08) !important;
        border-radius: 1.5rem !important;
        background-color: rgba(250, 250, 250, 0.92) !important;
        -webkit-backdrop-filter: blur(20px) saturate(200%) !important;
        backdrop-filter: blur(20px) saturate(200%) !important;
        box-shadow: 0 18px 40px rgba(7, 71, 107, 0.18) !important;
    }

    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        padding-top: 0 !important;
    }

    /* Le burger sert de bouton de fermeture : la croix de la
       carte est retiree. */

    .wp-block-navigation__responsive-container-close {
        display: none !important;
    }

    /* ---------------------------------------------------------
       3. Burger change en croix pendant que le menu est ouvert
       --------------------------------------------------------- */

    header.wp-block-template-part:has(.wp-block-navigation__responsive-container.is-menu-open) .wp-block-navigation__responsive-container-open svg {
        display: none !important;
    }

    header.wp-block-template-part:has(.wp-block-navigation__responsive-container.is-menu-open) .wp-block-navigation__responsive-container-open {
        position: relative !important;
        color: var(--hz-foreground);
    }

    header.wp-block-template-part:has(.wp-block-navigation__responsive-container.is-menu-open) .wp-block-navigation__responsive-container-open::before,
    header.wp-block-template-part:has(.wp-block-navigation__responsive-container.is-menu-open) .wp-block-navigation__responsive-container-open::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 1.1rem;
        height: 2px;
        background: currentColor;
        border-radius: 999px;
    }

    header.wp-block-template-part:has(.wp-block-navigation__responsive-container.is-menu-open) .wp-block-navigation__responsive-container-open::before {
        transform: translate(-50%, -50%) rotate(45deg);
    }

    header.wp-block-template-part:has(.wp-block-navigation__responsive-container.is-menu-open) .wp-block-navigation__responsive-container-open::after {
        transform: translate(-50%, -50%) rotate(-45deg);
    }

    /* ---------------------------------------------------------
       4. Entrees du menu
       --------------------------------------------------------- */

    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-page-list {
        display: flex !important;
        flex-direction: column;
        align-items: stretch !important;
        gap: 0;
        width: 100%;
    }

    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
        display: block;
        position: relative;
        width: 100%;
        border-top: 1px solid var(--hz-border);
    }

    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:first-child {
        border-top: 0;
    }

    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
        display: block;
        box-sizing: border-box;
        width: 100%;
        border-radius: 0;
        background: transparent;
        padding: 0.75rem 0.25rem !important;
        color: color-mix(in srgb, var(--hz-foreground) 78%, transparent);
        font-size: 1rem;
        font-weight: 500;
        line-height: 1.5;
        white-space: normal;
    }

    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible {
        background: transparent;
        color: var(--hz-accent);
    }

    .wp-block-navigation__responsive-container.is-menu-open a:focus:not(:focus-visible),
    .wp-block-navigation__responsive-container.is-menu-open button:focus:not(:focus-visible) {
        outline: none !important;
    }

    /* Entree active. Le script marque deja l entree de la page
       courante ; ces regles couvrent les liens qui passent par une
       redirection (/a-propos, /services). */

    .wp-block-navigation__responsive-container.is-menu-open .current-menu-item>.wp-block-navigation-item__content,
    .wp-block-navigation__responsive-container.is-menu-open .current-menu-item>a,
    body.home header .wp-block-navigation__responsive-container.is-menu-open a[href='/'],
    body.page-id-319 header .wp-block-navigation__responsive-container.is-menu-open a[href*='/services'],
    body.page-id-328 header .wp-block-navigation__responsive-container.is-menu-open a[href*='/a-propos'],
    body.page-id-150 header .wp-block-navigation__responsive-container.is-menu-open a[href*='/nos-ressources'],
    body.page-id-44 header .wp-block-navigation__responsive-container.is-menu-open a[href*='/rendez-vous'],
    body.page-id-57 header .wp-block-navigation__responsive-container.is-menu-open a[href*='/contact'] {
        background-color: transparent !important;
        color: var(--hz-accent) !important;
        font-weight: 700 !important;
        outline: none;
    }

    /* ---------------------------------------------------------
       5. Lien du compte, deplace dans le menu par le script : une
       ligne comme les autres, avec son intitule (« Se connecter »
       ou « Mon compte ») a cote de l icone.
       --------------------------------------------------------- */

    .hz-nav-mobile-extra {
        margin-top: 0.25rem;
        padding-top: 0.25rem;
        border-top: 1px solid var(--hz-border);
    }

    .hz-nav-mobile-extra [data-block-name='woocommerce/customer-account'] {
        display: block;
        font-size: 1rem !important;
        transform: none;
    }

    .hz-nav-mobile-extra .wc-block-customer-account__link {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        padding: 0.75rem 0.25rem;
        color: color-mix(in srgb, var(--hz-foreground) 78%, transparent);
        font-size: 1rem;
        font-weight: 500;
        line-height: 1.5;
        text-decoration: none;
    }

    .hz-nav-mobile-extra .wc-block-customer-account__link::after {
        content: attr(aria-label);
    }

    .hz-nav-mobile-extra .wc-block-customer-account__link:hover,
    .hz-nav-mobile-extra .wc-block-customer-account__link:focus-visible {
        color: var(--hz-accent);
    }

    .hz-nav-mobile-extra .wc-block-customer-account__account-icon {
        width: 1.5rem;
        height: 1.5rem;
        border: 0;
        background: transparent;
    }
}

/* ---------------------------------------------------------
   6. Tablette : carte plus etroite, sous le burger
   --------------------------------------------------------- */

@media (min-width: 641px) and (max-width: 1099px) {
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
        width: min(100%, 22rem) !important;
        margin: 0 0 0 auto !important;
    }
}