/**
 * Mobile Submenu Navigation Styles v2.0 - LINK + CHEVRON SPLIT
 * - Le lien navigue, le chevron ouvre le sous-menu
 * - Suppression du pointer-events: none sur les liens parents
 * - Support du .mobile-nav-item-wrapper (JS v1.5)
 */

/* ============================================
   MASQUAGE IMMÉDIAT - AVANT TOUT
   ============================================ */
@media (min-width: 1281px) {
    .wp-block-navigation__submenu-container {
        display: none !important;
    }
    
    .wp-block-navigation-item:hover > .wp-block-navigation__submenu-container {
        display: block !important;
    }
    
    .wp-block-navigation__submenu-container:hover {
        display: block !important;
    }
}

/* ============================================
   PROTECTION DESKTOP
   ============================================ */
@media (min-width: 1281px) {
    .mobile-menu-chevron,
    .mobile-nav-item-wrapper,
    .mobile-submenu-screen,
    .mobile-nav-overlay {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        position: absolute !important;
        left: -9999px !important;
        width: 0 !important;
        height: 0 !important;
    }



    /* Sous-menus desktop au hover */
    .wp-block-navigation__submenu-container {
        display: none !important;
    }
    
    .wp-block-navigation-item:hover > .wp-block-navigation__submenu-container {
        display: block !important;
    }

    /* Liens toujours cliquables sur desktop */
    .wp-block-navigation-item > a,
    .wp-block-navigation-item.has-child > a {
        pointer-events: auto !important;
    }
    
    .wp-block-navigation__submenu-container a {
        pointer-events: auto !important;
    }
}

/* ============================================
   STYLES MOBILE
   ============================================ */
@media (max-width: 1280px) {

    .wp-block-navigation__responsive-container.is-menu-open {
        padding-left: 0;
        padding-right: 0;
    }

  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
        background: white!important;
    }

    .wp-block-navigation > .wp-block-navigation-item {
        height: auto;
    }

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

    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-content
    .wp-block-navigation__container {
        gap: 0;
    }

    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
        width: 100%;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }

    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:last-child {
        border-bottom: none;
    }

    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child {
        position: relative;
    }

    /* Masquer sous-menus natifs Gutenberg */
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
        display: none !important;
    }

    /* Masquer le chevron natif WordPress */
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon {
        display: none !important;
    }

    /* ============================================
       WRAPPER LIEN + CHEVRON
       ============================================ */

    .wp-block-navigation__responsive-container.is-menu-open .mobile-nav-item-wrapper {
        display: flex;
        align-items: stretch;
        width: 100%;
    }

    /* Lien principal : navigue, prend tout l'espace */
    .wp-block-navigation__responsive-container.is-menu-open .mobile-nav-item-wrapper > a,
    .wp-block-navigation__responsive-container.is-menu-open .mobile-nav-item-wrapper > button:not(.mobile-menu-chevron) {
        flex: 1;
        min-width: 0;
        padding: .5rem 1rem !important;
        min-height: 40px;
        display: flex;
        align-items: center;
        text-decoration: none;
        color: inherit;
        /* CRITIQUE : le lien est cliquable */
        pointer-events: auto !important;
    }

    .wp-block-navigation__responsive-container.is-menu-open .mobile-nav-item-wrapper > a:hover,
    .wp-block-navigation__responsive-container.is-menu-open .mobile-nav-item-wrapper > button:not(.mobile-menu-chevron):hover {
        background-color: var(--wp--preset--color--accent) !important;
        color: var(--wp--preset--color--white, #ffffff) !important;
        text-decoration: none;
    }

.wp-block-navigation__responsive-container.is-menu-open .mobile-nav-item-wrapper > a:hover .wp-block-navigation-item__label,
.wp-block-navigation__responsive-container.is-menu-open .mobile-nav-item-wrapper > button:not(.mobile-menu-chevron):hover .wp-block-navigation-item__label {
    color: var(--wp--preset--color--white, #ffffff) !important;
}


    /* Items sans sous-menu (pas de wrapper) */
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item > a {
        padding: .5rem 1rem !important;
        min-height: 40px;
        display: flex;
        align-items: center;
        width: calc(100% - 2rem);
    }

    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item > a:hover {
        background-color: var(--wp--preset--color--accent) !important;
        color: var(--wp--preset--color--white, #ffffff) !important;
        text-decoration: none;
    }
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item > a:hover  .wp-block-navigation-item__label {
             color: var(--wp--preset--color--white, #ffffff) !important;
    }

    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item > a .wp-block-navigation-item__label {
        color: var(--wp--preset--color--accent) !important;
    }

    /* ============================================
       CHEVRON — bouton séparé
       ============================================ */
    .wp-block-navigation__responsive-container.is-menu-open .mobile-menu-chevron {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        min-height: 40px;
        background: none;
        border: none;
        border-left: 1px solid rgba(0, 0, 0, 0.1);
        cursor: pointer;
        padding: 0;
        transition: background-color 0.2s ease;
        /* CRITIQUE : le chevron est cliquable */
        pointer-events: auto !important;
    }

    .wp-block-navigation__responsive-container.is-menu-open .mobile-menu-chevron:hover {
        background-color: rgba(0, 0, 0, 0.05);
    }

    .wp-block-navigation__responsive-container.is-menu-open .mobile-menu-chevron svg {
        width: 20px;
        height: 20px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    /* ============================================
       ÉCRAN DE SOUS-MENU
       ============================================ */
    .logged-in .mobile-submenu-screen {
        top: 45px;
    }

    .mobile-submenu-screen {
        display: block !important;
        position: fixed !important;
        top: 0;
        left: 100%;
        width: 100%;
        height: 100%;
        background: var(--wp--preset--color--accent) !important;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 999999;
        overflow-y: auto;
        padding-top: 60px;
    }

    .mobile-submenu-screen.active {
        display: block !important;
        transform: translateX(-100%);
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Header */
    .mobile-submenu-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 60px;
        background: white!important;
        display: flex;
        gap: 1rem;
        align-items: center;
        padding: 0 20px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        z-index: 1000000;
    }

    /* Bouton retour */
    .mobile-submenu-back {
        display: flex;
        align-items: start;
        background: none;
        border: none;
        padding: 8px;
        cursor: pointer;
        font-size: 16px;
        font-weight: 500;
        color: var(--wp--preset--color--charcoal-black, #333);
        transition: background-color 0.2s ease;
        border-radius: 25px;
    }

    .mobile-submenu-back:hover {
        background-color: rgba(0, 0, 0, 0.05);
    }

    .mobile-submenu-back svg {
        width: 20px;
        height: 20px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    /* Titre */
    .mobile-submenu-title {
        flex: 1;
        text-align: left;
        font-size: 18px;
        font-weight: 600;
        color: var(--wp--preset--color--charcoal-black, #333);
        margin: 0;
        padding-right: 40px;
    }

    /* Contenu */
    .mobile-submenu-content {
        animation: fadeIn 0.3s ease;
    }

    .mobile-submenu-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .mobile-submenu-list li {
        margin: 0;
        border-top: 1px solid rgba(0, 0, 0, 0.1);
    }

    .mobile-submenu-list a {
        display: block;
        padding: 12px 20px;
        color: var(--wp--preset--color--accent) !important;
        font-family: var(--wp--preset--font-family--antonio);
        text-decoration: none;
        font-size: 1rem;
        font-weight: 500;
        background: var(--wp--preset--color--white, #ffffff);
        transition: all 0.2s ease;
        /* CRITIQUE : liens sous-menu cliquables */
        pointer-events: auto !important;
    }

    .mobile-submenu-list a:hover {
        background-color: var(--wp--preset--color--accent) !important;
        color: var(--wp--preset--color--white, #ffffff)!important;
    }

    /* ============================================
       OVERLAY
       ============================================ */
    .mobile-nav-overlay {
        display: block !important;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.95);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
        z-index: 999998;
        pointer-events: none;
    }

    .mobile-nav-overlay.active {
        display: block !important;
        opacity: 1;
        visibility: visible;
        pointer-events: all;
    }

    @keyframes fadeIn {
        from { opacity: 0; }
        to   { opacity: 1; }
    }
}

/* ============================================
   MASQUAGE PAR DÉFAUT — HORS MEDIA QUERY
   ============================================ */
.mobile-menu-chevron {
    display: none;
}