/* --- 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;
}

.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;
    color: var(--site-color-text);
    transition: all 0.3s ease;
}

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

.main-navigation a:hover {
    background-color: var(--accent-main);
    color: var(--accent-contrast);
}

/* 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: var(--accent-soft);
    color: var(--accent-text);
}


/* ==========================================================================

   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;
    border-radius: var(--site-image-border-radius) var(--site-image-border-radius) 0 0;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* If the header has an explicit bottom spacing */
.header-has-bottom-spacing .main-navigation ul li.menu-item-has-children {
    border-radius: var(--site-image-border-radius);
}

.main-navigation ul li.menu-item-has-children:hover,
.main-navigation ul li.menu-item-has-children:focus-within {
    background-color: var(--accent-main);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* When the parent is hovered (desktop) or focused, remove bottom corner */
.main-navigation ul li.menu-item-has-children:hover,
.main-navigation ul li.menu-item-has-children:focus-within,
.main-navigation ul li.menu-item-has-children:hover > a,
.main-navigation ul li.menu-item-has-children:focus-within > a {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* Ensure the inner anchor updates color on parent hover/focus */
.main-navigation ul li.menu-item-has-children:hover > a,
.main-navigation ul li.menu-item-has-children:focus-within > a {
    color: var(--accent-contrast);
}

/* 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: var(--accent-soft);
    color: var(--accent-text);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Current menu item that is also a parent: keep the LI background but ensure the anchor text color matches the active state. */
.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(--accent-text);
    /* 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;
}

/* --- 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 */
    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);
}

/* When a submenu is open, remove the bottom corner radii from the parent */
.main-navigation li.submenu-open > a,
#primary-menu li.submenu-open > a {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* If a parent menu item is "current" but its submenu is NOT open, restore the bottom corner radius */
.header-has-bottom-spacing .main-navigation ul li.menu-item-has-children.current-menu-item:not(.submenu-open) > a,
.header-has-bottom-spacing .main-navigation ul li.menu-item-has-children.current-menu-ancestor:not(.submenu-open) > a,
.header-has-bottom-spacing #primary-menu li.menu-item-has-children.current-menu-item:not(.submenu-open) > a,
.header-has-bottom-spacing #primary-menu li.menu-item-has-children.current-menu-ancestor:not(.submenu-open) > a {
    border-bottom-left-radius: var(--site-image-border-radius) !important;
    border-bottom-right-radius: var(--site-image-border-radius) !important;
}

/* 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(--site-color-text);
    white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease;
    border-radius: 0; /* ensure submenu links have no rounding */
    /* Ensure submenu link weight matches main nav items (use the navigation token) */
    font-weight: var(--font-navigation-weight, 500);
}

/* 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(--accent-hover, var(--navigation-hover-bg-color));
    color: var(--navigation-active-text-color, var(--accent-contrast));
    border-radius: 0 !important; /* remove any accidental rounding on hover */
}

/* 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 {
    /* background-color: var(--accent-soft, var(--navigation-active-bg-color)); */
    background-color: var(--accent-soft, rgba(var(--navigation-active-bg-color-rgb), var(--navigation-active-bg-opacity, 0.85)));
    color: var(--accent-text, var(--accent-contrast));
    border-radius: 0 !important; /* active submenu item must be square */
}

/* 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;
    color: var(--site-color-text);
    transition: color 0.25s ease;
}

/* Chevron contrast on parent hover */
.main-navigation li.menu-item-has-children:hover > a::after,
.main-navigation li.menu-item-has-children:focus-within > a::after {
    color: var(--accent-contrast);
}

.main-navigation li.current-menu-item > a::after,
.main-navigation li.current-menu-ancestor > a::after,
.main-navigation li.current_page_item > a::after {
    color: var(--accent-text);
}

/* ==========================================================================
   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: var(--accent-hover, rgba(var(--accent-main-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);
}

/* When a parent has its submenu open, remove the bottom corner radii on the LI */
.main-navigation ul li.menu-item-has-children.submenu-open {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* Align sub-menus to the right on desktop */
@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;
    }

    /* Add a space */
    .site-header {
        padding-top: 0.8rem;
    }

    /* Mobile header display variants */
    .site-header.mobile-header-display-title-only .site-branding .custom-logo-link,
    .site-header.mobile-header-display-title-and-signature .site-branding .custom-logo-link {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Ensure title wrapper visible when requested */
    .site-header.mobile-header-display-title-only .site-branding .custom-logo-link ~ .site-title-description-wrapper,
    .site-header.mobile-header-display-title-and-signature .site-branding .custom-logo-link ~ .site-title-description-wrapper,
    .site-header.mobile-header-display-logo-and-title .site-branding .custom-logo-link ~ .site-title-description-wrapper {
        display: block !important;
        visibility: visible !important;
        height: auto !important;
        overflow: visible !important;
        margin: 0.25em 0 !important;
        padding: 0 !important;
    }

    /* Logo + title: ensure both are inline-friendly */
    .site-header.mobile-header-display-logo-and-title .site-branding .custom-logo-link {
        display: inline-block !important;
        margin: 0 0.5em 0 0 !important;
    }

    .site-header.mobile-header-display-logo-and-title .site-branding .site-title {
        display: inline-block;
        font-size: 1rem;
        line-height: 1.2;
        vertical-align: middle;
    }

    /* Title + signature tweaks */
    .site-header.mobile-header-display-title-and-signature .site-branding .site-title {
        display: inline-block;
        font-size: 1.3rem;
        line-height: 1.2;
        /* margin-right: 0.5em; */
    }

    .site-header.mobile-header-display-title-and-signature .signature-image-wrapper img {
        max-height: 28px;
        width: auto;
        /* display: inline-block; */
        vertical-align: middle;
    }

    /* Ensure signature alignment set in Customizer is respected on mobile for the header display variants.  */
    .site-header.mobile-header-display-title-and-signature .site-title-description-wrapper.signature-align-left .signature-image-wrapper img,
    .site-header.mobile-header-display-logo-and-title .site-title-description-wrapper.signature-align-left .signature-image-wrapper img,
    .site-header.mobile-header-display-title-only .site-title-description-wrapper.signature-align-left .signature-image-wrapper img {
        margin-left: 0 !important;
        margin-right: auto !important;
    }

    .site-header.mobile-header-display-title-and-signature .site-title-description-wrapper.signature-align-center .signature-image-wrapper img,
    .site-header.mobile-header-display-logo-and-title .site-title-description-wrapper.signature-align-center .signature-image-wrapper img,
    .site-header.mobile-header-display-title-only .site-title-description-wrapper.signature-align-center .signature-image-wrapper img {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .site-header.mobile-header-display-title-and-signature .site-title-description-wrapper.signature-align-right .signature-image-wrapper img,
    .site-header.mobile-header-display-logo-and-title .site-title-description-wrapper.signature-align-right .signature-image-wrapper img,
    .site-header.mobile-header-display-title-only .site-title-description-wrapper.signature-align-right .signature-image-wrapper img {
        margin-left: auto !important;
        margin-right: 0 !important;
    }
}

/* 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;
    }
}

@media screen and (max-width: 900px) {
    /* Menu Mobile */
    .main-navigation {
        padding-top: 0;
    }
    .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: none;
        position: absolute;
        left: 0;
        right: 0;
        z-index: 1000;
        box-shadow: var(--navigation-shadow, none);
        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;
    }
}

/* ==========================================================================
   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;
        /* 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 260ms ease;
    }
}

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