/*
Theme Name: Twenty Twenty-Four (enfant)
Description: Thème enfant pour Twenty Twenty-Four
Author: Jonathan BESSON
Author URI: https://www.jonathan-besson.fr/
Template: twentytwentyfour
Version: 1.1.0
Text Domain: twentytwentyfourchild
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
*/

/* DEBUT DU CODE CSS : */

/* ========================================================
   1. LE HEADER GLOBAL (Ajustements Hauteur & Marges PC)
   ======================================================== */
header.wp-block-template-part {
    padding: 10px 20px !important; 
    background-color: #ffffff !important;
}

@media (min-width: 992px) {
    header.wp-block-template-part {
        padding: 10px 40px !important; 
        max-width: 1400px !important;  
        margin: 0 auto !important;     
    }
}

/* ========================================================
   2. LE MENU DESKTOP (Ordinateur - Centrage Réel & Rapprochement)
   ======================================================== */
/* On force le conteneur du menu à se recentrer et à ne pas pousser la loupe */
header.wp-block-template-part .wp-block-navigation.ma-nav-custom {
    margin-left: auto !important;
    margin-right: auto !important;
    justify-content: center !important;
}

/* Les liens du menu : espaces internes très serrés */
.ma-nav-custom .wp-block-navigation-item a {
    padding: 6px 12px !important;     /* Resserre l'espace à l'intérieur du bouton */
    border-radius: 10px !important;   
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    color: #333 !important;
    font-weight: 500 !important;
}

/* On force un espacement fixe et serré entre chaque mot pour annuler le vide */
.ma-nav-custom .wp-block-navigation-item {
    margin-left: 8px !important;      
    margin-right: 8px !important;
}

/* L'effet Hover Rose */
.ma-nav-custom .wp-block-navigation-item a:hover {
    background-color: #D7A4B5 !important; 
    color: #3B2A25 !important;           
}

/* Sous-menu PC (Ajustement bords) */
.ma-nav-custom .wp-block-navigation__submenu-container {
    border-radius: 10px !important;
    border: none !important;
    box-shadow: 0px 8px 20px rgba(59, 42, 37, 0.08) !important;
}

/* ========================================================
   3. LA BARRE DE RECHERCHE (Général)
   ======================================================== */
.wp-block-search__button {
    background-color: transparent !important;
    border: none !important;
    padding: 0 15px !important;
    cursor: pointer !important;
    display: flex;
    align-items: center;
}

.wp-block-search__button svg {
    fill: #3B2A25 !important; /* Ta couleur marron foncé */
    width: 22px !important;
    height: 22px !important;
}

/* ========================================================
/* ========================================================
/* ========================================================
/* ========================================================
/* ========================================================
/* ========================================================
  /* ========================================================
 4. LE MENU MOBILE (Version Finale Stabilisée 100% Largeur)
   ======================================================== */
@media (max-width: 991px) {

    /* 1. FORCE le conteneur global du menu mobile à occuper toute la largeur */
    .wp-block-navigation__responsive-container-content,
    .wp-block-navigation__responsive-container-content .wp-block-navigation-container {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important; /* Force chaque ligne à s'étirer au max */
        box-sizing: border-box !important;
    }

    /* 2. L'élément de liste (LI) : stable, fixe, et toujours à 100% de large */
    .wp-block-navigation-item.has-child {
        position: relative !important;
        display: block !important; /* Mode block pour verrouiller la largeur */
        width: 100% !important;
        box-sizing: border-box !important;
        margin-bottom: 10px !important;
    }

    /* 3. Le bouton de texte : il fait toute la ligne pour que TOUT soit cliquable */
    .wp-block-navigation-submenu__toggle {
        display: block !important;
        width: 100% !important;
        text-align: left !important;
        padding: 10px 50px 10px 0 !important; /* 50px de sécurité à droite pour ne pas toucher le carré */
        background: transparent !important;
        border: none !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }

/* 4. LA FLÈCHE (Style camarade) : Bloquée tout au bout à droite et centrée */
    .wp-block-navigation__submenu-icon {
        position: absolute !important;
        right: 0 !important;             
        top: 22px !important;            
        transform: translateY(-50%) !important; 
        border: 1.5px solid #3B2A25 !important; 
        width: 26px !important;          /* FORCE la largeur du carré parent */
        height: 26px !important;         /* FORCE la hauteur du carré parent */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        pointer-events: none !important; 
        z-index: 10 !important;
        box-sizing: border-box !important;
        padding: 0 !important;           
    }

    .wp-block-navigation__submenu-icon svg {
        fill: #3B2A25 !important;        
        width: 16px !important;          /* FORCE la taille du dessin */
        height: 16px !important;
        display: block !important;
    }

    /* 5. Le bloc des sous-liens (Le UL déroulant) */
    .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container {
        width: 100% !important;
        padding-left: 20px !important;   /* Décalage élégant vers la droite */
        margin-top: 5px !important;
        box-sizing: border-box !important;
    }

    /* 6. Gestion propre de l'ouverture / fermeture */
    .wp-block-navigation-submenu__toggle[aria-expanded="false"] ~ .wp-block-navigation__submenu-container {
        display: none !important;
        visibility: hidden !important;
    }
    
    .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
        display: block !important;
        visibility: visible !important;
    }