/* Custom Navigation Styles for AudeActif */
/* Left-aligned navigation with visible dropdown arrows */

/* System font stack that resembles Open Sans - no webfonts */
.cm-primary-nav,
.cm-primary-nav .menu,
.cm-primary-nav .menu a,
.cm-footer .menu,
.cm-footer .menu a {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Force left alignment - override centered default */
.cm-primary-nav {
    text-align: left !important;
}

/* Keep container standard padding to align with logo/content, but not centered */

/* Target the actual flex container - the UL element with class="menu" */
.cm-primary-nav ul,
.cm-primary-nav .menu {
    justify-content: flex-start !important;
}

/* Also ensure the row container doesn't center */
#cm-primary-nav .cm-row {
    justify-content: flex-start !important;
}

/* Remove margin-left auto from header-actions that pushes menu to right */
#cm-primary-nav .cm-header-actions {
    margin-left: 0 !important;
    justify-content: flex-start !important;
}

/* Dropdown Arrow for items with submenus */
.cm-primary-nav .menu > li.menu-item-has-children > a::after {
    content: " ▼";
    font-size: 10px;
    margin-left: 5px;
    opacity: 0.8;
}

/* Footer Navigation - Remove arrows, borders, and reduce spacing */
.cm-footer .menu-item-has-children > a::after {
    content: none !important;
}

.cm-footer .menu li,
.cm-footer .widget ul li {
    margin: 0 !important;
    padding: 2px 0 !important;
    border-bottom: none !important;
}

.cm-footer .menu li a {
    padding: 2px 0;
    display: block;
}

.cm-footer ul.sub-menu {
    position: static;
    display: block;
    box-shadow: none;
    border: none;
    padding-left: 15px;
    margin-top: 5px;
}

.cm-footer ul.sub-menu li {
    border: none;
}

.cm-footer ul.sub-menu li a {
    padding: 5px 0;
    color: #777;
    font-size: 14px;
}

.cm-footer ul.sub-menu li a:hover {
    color: #257BC1;
    background: none;
    padding-left: 0;
}

/* --- Mobile hamburger toggle ------------------------------------------
 *
 * The static rebuild's primary-nav originally only handled desktop;
 * at <=768px viewport the menu items disappeared with no fallback.
 * Restore a hamburger toggle that flips an aria-expanded flag, with
 * pure-CSS reveal of the menu via a sibling selector. JS lives in
 * assets/js/menu-toggle.js (~10 lines, no deps).
 */
.cm-menu-toggle {
    display: none;        /* hidden on desktop */
    background: transparent !important;
    border: 0 !important;
    color: #fff !important;
    cursor: pointer;
    padding: 12px 16px;
    align-items: center;
    justify-content: center;
    box-shadow: none !important;   /* override theme's inset shadows on buttons */
    appearance: none;              /* drop default button chrome */
}

.cm-menu-toggle:hover,
.cm-menu-toggle:focus,
.cm-menu-toggle:active {
    background: rgba(255, 255, 255, 0.08) !important;
    outline: none;
    color: #fff !important;
}

.cm-menu-toggle svg {
    width: 24px;
    height: 24px;
    fill: #ffffff;        /* explicit, not currentColor — defeats inherited fills */
    display: inline-block;
    vertical-align: middle;
}

.cm-menu-toggle .cm-icon-x { display: none; }
.cm-menu-toggle[aria-expanded="true"] .cm-icon-bars { display: none; }
.cm-menu-toggle[aria-expanded="true"] .cm-icon-x { display: inline-block; }

@media screen and (max-width: 768px) {
    /* Show toggle, hide menu by default on mobile */
    .cm-menu-toggle { display: flex !important; }
    #site-navigation > ul#primary-menu { display: none; }

    /* Reveal menu when toggle is expanded */
    .cm-menu-toggle[aria-expanded="true"] ~ ul#primary-menu {
        display: block !important;
        width: 100%;
    }

    /* Stack vertically — items + sub-menus inline */
    #primary-menu, #primary-menu li {
        flex-direction: column !important;
        width: 100% !important;
    }
    #primary-menu .sub-menu {
        position: static !important;
        display: block !important;
        box-shadow: none !important;
        background: transparent !important;
        padding-left: 16px;
        width: 100%;
    }
    #primary-menu li {
        padding: 8px 16px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }
}