/* --- Main Navigation --- */
.main-navigation {
    margin-top: 0;
    padding-top: 0.5rem;
}

.main-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
}

.main-navigation li {
    display: inline-block;
    margin: 0 10px;
    /* Do not set a color on the LI itself — color should be applied to the anchor
       so that background on the LI doesn't inherit link colors unexpectedly. */
}

.main-navigation a {
    font-family: var(--font-navigation, var(--font-primary));
    font-weight: var(--font-navigation-weight, 500);
    letter-spacing: var(--font-navigation-letter-spacing, normal);
    background-color: transparent;
    text-decoration: none;
    text-transform: uppercase;
    padding: 5px 12px;
    display: inline-block;
    border-radius: var(--site-image-border-radius) var(--site-image-border-radius) 0 0;
    /* background-color: var(--navigation-hover-bg-color); */
    color: var(--site-branding-text-color, var(--site-color-text));
    transition: all 0.3s ease;
}

/* --- ÉTATS HOVER & ACTIF (Desktop) --- */

.main-navigation a:hover {
    background-color: rgba(var(--navigation-active-bg-color-rgb), 1);
    color: var(--navigation-active-text-color);
}

/* Item Actif (Lien direct ou parent d'un sous-menu) */
.main-navigation li.current-menu-item > a,
.main-navigation li.current-menu-ancestor > a {
    background-color: rgba(var(--navigation-active-bg-color-rgb), 0.85);
    color: var(--navigation-active-text-color);
}

/* ==========================================================================
   SOUS-MENUS ET BOUTONS TOGGLE (Desktop & Global)
   ========================================================================== */
.main-navigation ul li.menu-item-has-children {
    position: relative; /* Parent for absolute positioning of sub-menu */
    display: inline-flex; /* To flow with other main menu items */
    align-items: center;
    /* background-color: transparent;  */
    border-radius: var(--site-image-border-radius) var(--site-image-border-radius) 0 0;
    transition: background-color 0.3s ease;
}

.main-navigation ul li.menu-item-has-children:hover,
.main-navigation ul li.menu-item-has-children:focus-within {
    /* prevent LI from drawing the hover background so anchor's rounded
       corners remain visible; background will be applied to the <a> */
    background-color: transparent;
}

/* When the LI is active or has a focused child (general) */
.main-navigation ul li.current-menu-item.menu-item-has-children,
.main-navigation ul li.current-menu-ancestor.menu-item-has-children {
    background-color: rgba(var(--navigation-active-bg-color-rgb), 0.85);
}

/* Uniformiser le rendu "current" pour les items qui ont des enfants
   : appliquer le fond sur le <li> (comme c'est le cas ici), et s'assurer
   que le <a> reste transparent pour ne pas créer un double-fond ou un
   décalage visuel par rapport aux items sans sous-menu. */
.main-navigation ul li.current-menu-item.menu-item-has-children > a,
.main-navigation ul li.current-menu-ancestor.menu-item-has-children > a {
    background-color: transparent;
    color: var(--navigation-active-text-color);
    /* Conserver les mêmes arrondis pour l'anchor afin d'éviter un
       décalage visuel lorsque les anchors reçoivent des backgrounds ailleurs. */
    border-radius: var(--site-image-border-radius) var(--site-image-border-radius) 0 0;
}

/* Si tu préfères une intensité identique à celle utilisée pour les anchors
   `li.current-menu-item > a` (ex. alpha 0.92), ajuste l'alpha ci-dessous. */
/* .main-navigation ul li.current-menu-item.menu-item-has-children,
.main-navigation ul li.current-menu-ancestor.menu-item-has-children {
    background-color: rgba(var(--navigation-active-bg-color-rgb), 0.5);
} */

/* --- Sub-menu Styling --- */
.main-navigation ul ul.sub-menu {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    background-color: var(--site-color-background);
    box-shadow: var(--shadow-sm);
    border-radius: 0 0 var(--site-image-border-radius) var(--site-image-border-radius);
    padding: 0.5em 0;
    /* Ensure the submenu is at least as wide as its parent (and at least 200px).
       Allow wrapping of long labels and cap width to viewport to avoid
       horizontal overflow on very wide items (Option 2). */
    min-width: max(100%, 100px);
    width: auto;
    max-width: 90vw; /* Prevent the submenu from exceeding viewport width */
    white-space: normal; /* Allow labels to wrap onto multiple lines */
    box-sizing: border-box;
    overflow: visible; /* Ensure wrapped content is visible */
    list-style: none;

    /* Hide by default on desktop */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

/* Show on hover/focus */
.main-navigation ul li.menu-item-has-children:hover > ul.sub-menu,
.main-navigation ul li.menu-item-has-children:focus-within > ul.sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Sub-menu item styling */
.main-navigation ul ul.sub-menu li {
    margin: 0;
    display: block;
    width: 100%;
}

.main-navigation ul ul.sub-menu li a {
    display: block;
    padding: 0.75em 1.5em;
    color: var(--navigation-text-color, var(--site-branding-text-color, var(--site-color-text)));
    white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease;
    border-radius: 0;
}

/* Style for hover on non-active sub-menu items: white background, pink text */
.main-navigation ul ul.sub-menu li a:hover {
    background-color: var(--navigation-hover-bg-color);
    color: var(--navigation-active-text-color);
}

/* Style for the active sub-menu item (and its hover state): pink background, white text */
.main-navigation ul ul.sub-menu li.current-menu-item > a
/* .main-navigation ul ul.sub-menu li.current-menu-item > a:hover, */
/* .main-navigation ul ul.sub-menu li a:focus  */
{
    background-color: var(--navigation-active-bg-color);
    background-color: rgba(var(--navigation-active-bg-color-rgb), 0.85);
    color: var(--navigation-active-text-color, #000000);
}

/* Dropdown Arrow (Desktop only - on the main link) */
.main-navigation li.menu-item-has-children > a::after {
    content: '▼';
    font-size: 0.6em;
    margin-left: 1em;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    top: -0.1em;
}


/* ==========================================================================
   3. TOGGLES ET BOUTONS (Mobile & JS)
   ========================================================================== */

.menu-toggle, .submenu-toggle {
    display: none;
    background-color: transparent;
    color: var(--navigation-text-color, var(--site-branding-text-color, var(--site-color-text)));
    border: none;
    cursor: pointer;
}

/* --- Clickable Sub-menu Toggle (JS-created button) --- */
/* This button should only be visible on mobile */
.menu-toggle {
    padding: 5px;
    border-radius: var(--site-image-border-radius);
}

.submenu-toggle {
    padding: 10px;
    line-height: 1;
}

.menu-toggle:hover,
.menu-toggle:focus {
    background-color: rgba(var(--site-color-accent-primary-rgb), 0.92);
}

.menu-toggle .icon {
    width: 24px;
    height: 24px;
    vertical-align: middle;
}



/* ==========================================================================
  RESPONSIVE - TABLETTE (900px - 1200px)
   ========================================================================== */

@media screen and (min-width: 900px) and (max-width: 1200px) {
    /* Desktop: Text visible, icons hidden */
    .main-navigation li a .menu-text {
        display: none;
        /* display: inline-block; */
    }

    .main-navigation li a .fas {
        /* display: none; */
        display: inline-block; 
        margin: 0 auto;
        font-size: 1.5em; 
        vertical-align: bottom;
    }
}

@media screen and (min-width: 1201px) {
    .main-navigation li a .menu-text { display: inline-block; }
    .main-navigation li a .fas { display: none; }
}



/* Show submenu when parent has .submenu-open class (mainly for JS control) */
.main-navigation li.submenu-open > .sub-menu {
    /* A click on desktop using the JS toggle would apply these styles */
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Align sub-menus to the right on desktop: anchor the submenu's right edge
   to the parent so dropdowns open aligned to the right. Also right-align
   submenu item text for visual consistency. This only applies on wider
   viewports to avoid interfering with the mobile stacked menu layout. */
@media screen and (min-width: 900px) {
    .main-navigation ul ul.sub-menu {
        left: 0;
        right: auto;
    }
    .main-navigation ul ul.sub-menu li a {
        text-align: left;
    }
}


/* ==========================================================================
   RESPONSIVE - MOBILE (Max 900px)
   ========================================================================== */
@media screen and (max-width: 900px) {
    .menu-toggle {
        display: block;
        margin: 0.5em auto;
    }

    /* Logo et Branding Mobile */
    .site-branding .custom-logo-link ~ .site-title-description-wrapper {
        display: none;
        visibility: hidden;
        height: 0;
        overflow: hidden;
        margin: 0;
        padding: 0;
    }
    .site-branding .custom-logo-link {
        display: block;
        margin: 0 auto;
    }
    .site-branding .custom-logo-link img {
        max-width: 120px;
        height: auto;
        display: block;
    }

    /* Menu Mobile */
    .main-navigation ul {
        display: block;
        max-height: 0;
        overflow: hidden;
        width: 100%;
        text-align: center;
        /* Force a solid/semi-opaque background on mobile so the hero doesn't show through */
        background-color: var(--site-branding-bg-color, rgba(255,255,255,0.95));
        border-top: 1px solid rgba(var(--site-color-accent-secondary-rgb), 0.2);
        position: absolute;
        left: 0;
        right: 0;
        z-index: 1000;
        box-shadow: var(--shadow-sm);
        transition: max-height 0.3s ease-in-out;
    }
    .main-navigation.toggled ul {
        max-height: 500px;
    }
    .main-navigation li {
        display: block;
        margin: 0;
        width: 100%;
    }    
    
    .main-navigation ul a {
        color: var(--navigation-text-color);
        display: block;
        width: 100%;
        padding: 10px 20px;
        box-sizing: border-box;
        /* Use rgba with the stored RGB variable for a subtle separator */
        border-bottom: 1px solid rgba(var(--site-color-accent-secondary-rgb), 0.06);
        border-radius: 0;
        transition: background-color 0.2s ease, color 0.2s ease; 
    }

    /* Submenu Toggles Mobile */
    .submenu-toggle {
        display: block; /* Make the submenu-toggle button visible */
        /* Position the toggle button on the right side of the link */
        background: transparent;
        border: none;
        color: inherit; /* IMPORTANT */
        cursor: pointer;
        padding: 12px 15px; /* Match link padding vertically */
        line-height: 1;
        border-radius: 0;
        transition: color 0.3s ease;
    }

    /* Style the arrow for the submenu-toggle button on mobile */
    .submenu-toggle::after {
        content: '▼'; 
        font-size: 0.8em;
        display: inline-block;
        transition: transform 0.2s ease;
    }

    /* Rotate arrow when submenu is open */
    .main-navigation li.submenu-open > .submenu-toggle::after {
        transform: rotate(180deg);
    }

    /* Structure Mobile Flex pour les parents */
    .main-navigation li.menu-item-has-children {
        display: flex; 
        align-items: center;
        justify-content: space-between; 
        border-bottom: 1px solid rgba(var(--site-color-accent-secondary-rgb), 0.1);
        padding: 0;
    }

    /* Ensure the link inside a flex parent takes its space and keeps the separator */
    .main-navigation li.menu-item-has-children > a {
        flex-grow: 1; 
        border-bottom: 1px solid rgba(var(--site-color-accent-secondary-rgb), 0.06);
    }

    /* Hide the desktop dropdown arrow on mobile */
    .main-navigation li.menu-item-has-children > a::after {
        content: none; /* Remove the default arrow on the link */
        display: none;
    }
    

   /* --- Sub-menu Styling (Mobile specific) --- */
    .main-navigation ul ul.sub-menu {
        /* position: static;  */
        width: 100%; 
        margin-left: 0; 
        margin-right: 0;
        background-color: var(--site-color-background-light); 
        box-shadow: none; /* No shadow for nested mobile menus */
        border-top: 1px solid rgba(var(--site-color-accent-secondary-rgb), 0.1);
        padding: 0; /* No top/bottom padding initially */

        /* Crucial for vertical slide effect controlled by JS's submenu-open class */
        max-height: 0; 
        overflow: hidden; 
        opacity: 0; 
        visibility: hidden; 
        transform: none; 
        transition: max-height 0.3s ease-in-out;
    }

    /* Hide sub-menus entirely on mobile to avoid empty gaps/lines
       when they are not used in the mobile UX. This also removes
       borders/shadows that created a visible white line. */
    .main-navigation ul ul.sub-menu {
        display: none !important;
        visibility: hidden !important;
        max-height: 0 !important;
        padding: 0 !important;
        border-top: none !important;
        box-shadow: none !important;
    }

    /* If you never want toggles on mobile, hide the toggle buttons too */
    .submenu-toggle {
        display: none !important;
    }

    /* Remove separators on parents that were visually indicating a submenu
       location so no stray lines remain */
    .main-navigation li.menu-item-has-children {
        border-bottom: none !important;
    }
    .main-navigation li.menu-item-has-children > a {
        border-bottom: none !important;
    }

    /* Show submenu when parent has .submenu-open class on mobile */
    .main-navigation li.submenu-open > .sub-menu {
        max-height: 500px; 
        padding: 0.5em 0; 
    }

    /* Mobile: Text visible, icons hidden */
    .main-navigation li a .menu-text {
        display: inline-block; /* Or block, depending on desired layout */
    }
    .main-navigation li a .fas {
        display: none;
    }
}

/* Very small screens: progressively shrink the logo to preserve layout */
@media screen and (max-width: 420px) {
    .site-branding .custom-logo-link img {
        max-width: 100px;
    }
}

@media screen and (max-width: 360px) {
    .site-branding .custom-logo-link img {
        max-width: 80px;
    }
}

@media screen and (max-width: 320px) {
    .site-branding .custom-logo-link img {
        max-width: 60px;
    }
}

/* ==========================================================================
   6. HEADER COMPACT (STICKY SCROLL)
   ========================================================================== */

/* --- Header compact behavior on desktop --- */
@media screen and (min-width: 900px) {
    /* When the header is compacted it hides the branding to free vertical space */
    #masthead.header--compact .site-branding {
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transform: translateY(-8px);
        transition: all 250ms ease;
        padding-top: 0;
        padding-bottom: 0;
    }

    /* Fix the navigation to the top when compacted */
    .main-navigation.nav-fixed {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 10010;
        background: var(--site-branding-bg-color, #fff);
        box-shadow: none;
        transform: translateY(0);
        transition: box-shadow 200ms ease, background-color 200ms ease;
    }

    /* Ensure the nav items stay visually consistent when fixed */
    .main-navigation.nav-fixed > ul {
        display: flex; justify-content: center; align-items: center;
        padding: 0.5rem 1rem;
        /* display: block; */
        /* will-change: transform, top; */
    }

    /* Ensure individual items remain inline and visible when nav is fixed */
    .main-navigation.nav-fixed li {
        display: inline-block;
        /* margin: 0 10px; */
    }

    /* When header is compacted, slightly reduce nav paddings to save space */
    #masthead.header--compact .main-navigation a {
        padding-top: 8px;
        padding-bottom: 8px;
    }

    /* Prevent the fixed nav from covering content: JS will set padding-top on #content, this keeps fallback safe */
    .site-content {
        transition: padding-top 180ms ease;
    }
}