/* ================================================================
   Cassiopeia — Logo + Menu, Professional Light Theme
   FRESH / CONSOLIDATED VERSION — replaces all previous patches
   Paste this into: templates/cassiopeia/css/user.css
   ================================================================ */

/* ---------- Base grid setup (mobile-first) ---------- */
.container-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "top below"
                          "logo logo"
                          "nav nav";
    background: #ffffff !important;
    box-shadow: 0 2px 6px rgba(30, 16, 51, 0.08);
    align-items: center;
    padding: 0 10px;
    position: relative; /* needed for hamburger + dropdown positioning */
}
.container-header .container-topbar {
    grid-area: top;
    padding: .5em;
}
.container-header .container-below-top {
    grid-area: below;
    justify-content: flex-end;
}
.container-header .grid-child:has(.navbar-brand) {
    grid-area: logo;
    display: flex;
    align-items: center;
}
.container-header .container-nav {
    grid-area: nav;
    display: flex;
    align-items: center;
    background: #ffffff;
}

/* ---------- Menu item colors: black text, teal hover ---------- */
.container-header .navbar-nav .nav-link,
.container-header .mod-menu .nav-link,
.container-header .nav-item > a {
    color: #1a1a1a !important;
    font-weight: 600;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    transition: color .2s ease;
}
.container-header .navbar-nav .nav-link:hover,
.container-header .mod-menu .nav-link:hover,
.container-header .nav-item > a:hover,
.container-header .navbar-nav .nav-link.active {
    color: #0fae9a !important;
}
.container-header .navbar-brand,
.container-header #mod-menu1 {
    margin: 0;
}

/* ---------- Chevron toggle (submenu indicator) ----------
   Tightened footprint applied UNIVERSALLY (both mobile and
   desktop) so it never adds extra width after parent items
   like "Offerings" / "Presentations" — this was the cause of
   the uneven gap, and it needs to be fixed at both breakpoints,
   not just inside one media query. */
.container-header .mod-menu__toggle-sub{
    padding: 0 !important;
    margin: 0 0 0 4px !important;
    width: 16px !important;
    min-width: 16px !important;
    height: 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    background: transparent !important;
    border: none !important;
    color: #1a1a1a !important;
}
.container-header .mod-menu__toggle-sub .icon-chevron-down{
    width: 12px !important;
    height: 12px !important;
    font-size: 12px !important;
    transition: transform .2s ease;
}

/* ---------- Hamburger icon (mobile only, styled here / shown via media query) ---------- */
.bbb-mobile-toggle{
    display:none;
    position:absolute;
    top:14px;
    right:20px;
    width:40px;
    height:40px;
    border:none;
    background:transparent;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:5px;
    cursor:pointer;
    z-index:50;
}
.bbb-mobile-toggle span{
    display:block;
    width:26px;
    height:3px;
    border-radius:2px;
    background:#0fae9a;
    transition:transform .25s ease, opacity .25s ease;
}
.container-header.bbb-menu-open .bbb-mobile-toggle span:nth-child(1){
    transform:translateY(8px) rotate(45deg);
}
.container-header.bbb-menu-open .bbb-mobile-toggle span:nth-child(2){
    opacity:0;
}
.container-header.bbb-menu-open .bbb-mobile-toggle span:nth-child(3){
    transform:translateY(-8px) rotate(-45deg);
}

/* ================================================================
   MOBILE (< 991.98px)
   ================================================================ */
@media (width < 991.98px){
    .container-header {
        grid-template-columns: 1fr;
        grid-template-areas: "top"
                              "below"
                              "logo"
                              "nav";
        height: auto;
        min-height: 0;
        padding: 12px 20px;
    }

    .bbb-mobile-toggle{ display:flex; }

    /* container-nav itself stays visible so the hamburger inside it
       (before JS moves it) and the wrapper layout don't break —
       but its CONTENTS (menu + search/social) are hidden by default */
    .container-header .container-nav{
        display:flex;
        flex-wrap:wrap;
        width:100%;
    }
    .container-header .mod-menu,
    .container-header .container-search{
        display:none;
        width:100%;
    }

    /* Shown only when JS adds .bbb-menu-open to .container-header */
    .container-header.bbb-menu-open .mod-menu{
        display:flex;
        flex-direction:column;
        align-items:flex-start;
        width:100%;
        gap: 1.5rem; /* same value as desktop, for a consistent feel */
        background:#ffffff;
        border-top:1px solid #eee7f7;
        margin-top:8px;
        padding:10px 4px 16px;
    }
    .container-header.bbb-menu-open .container-search{
        display:block;
        width:100%;
        margin-top:12px;
        padding-left:6px;
    }

    .container-header .nav-item{ width:100%; margin:0 !important; }
    .container-header .mod-menu .nav-item > a{
        width:100%;
        padding:0 6px !important;
        display:flex !important;
        justify-content:space-between;
    }

    /* ---------- Submenu (accordion), controlled via aria-hidden
       set by OUR OWN JS in the custom module (not Joomla's core JS) ---------- */
    .container-header .mod-menu__sub{
        display: none;
        width: 100%;
        padding-left: 14px;
        margin-top: 4px;
        margin-bottom: 8px;
    }
    .container-header .mod-menu__sub[aria-hidden="false"]{
        display: flex;
        flex-direction: column;
    }
    .container-header .mod-menu__sub .nav-item > a{
        padding: 8px 6px !important;
        font-weight: 500;
        font-size: .92rem;
    }
}

/* ================================================================
   DESKTOP (>= 991.98px)
   ================================================================ */
@media (width >= 991.98px){
    .container-header {
        grid-template-columns:
            [full-start] minmax(0,1fr)
            [main-start] repeat(4, minmax(0, 19.875rem))
            [main-end] minmax(0,1fr) [full-end];
        grid-template-areas: ". logo nav nav nav .";
        gap: 0 1rem;
        min-height: 84px;
    }
    .container-header:has(.container-below-top, .container-topbar) {
        grid-template-areas: ". top top below below ."
                              ". logo nav nav nav .";
    }
    .container-header .container-nav {
        justify-content: flex-end;
    }

    /* ---------- Uniform gap between ALL top-level menu items ----------
       Targets the REAL menu list class (.mod-menu) — Cassiopeia does
       NOT use Bootstrap's .navbar-nav class here. Every property is
       !important and multiple fallback selectors are included so this
       wins over any core Joomla/Bootstrap specificity that was
       overriding the previous attempt. Adjust the gap value to taste. */
    .container-header .container-nav .mod-menu,
    .container-header .container-nav .navbar-nav,
    .container-header .container-nav > ul,
    .container-header .container-nav nav > ul {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 1rem !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }
    .container-header .navbar-nav .nav-item,
    .container-header .mod-menu .nav-item,
    .container-header .container-nav li.nav-item {
        margin: 0 !important;
        padding: 0 !important;
    }
    .container-header .navbar-nav .nav-link,
    .container-header .mod-menu .nav-link,
    .container-header .nav-item > a,
    .container-header .container-nav li.nav-item > a {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin: 0 !important;
    }

    /* ---------- Submenu opens on HOVER ---------- */
    .container-header .nav-item.parent{
        position: relative;
    }
    .container-header .nav-item.parent .mod-menu__sub{
        display: none;
    }
    .container-header .nav-item.parent:hover > .mod-menu__sub{
        display: flex !important;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 200px;
        background: #ffffff;
        box-shadow: 0 10px 30px rgba(30,16,51,0.15);
        border-radius: 8px;
        padding: 8px 0;
        z-index: 200;
    }
    .container-header .nav-item.parent .mod-menu__sub .nav-item{
        width: 100%;
    }
    .container-header .nav-item.parent .mod-menu__sub .nav-item > a{
        padding: 10px 18px !important;
        white-space: nowrap;
        width: 100%;
    }
    .container-header .nav-item.parent:hover .mod-menu__toggle-sub .icon-chevron-down{
        transform: rotate(180deg);
    }

    /* Chevron button is purely decorative on desktop since hover
       controls opening — stops a stray click from fighting it.
       (Sizing itself is defined once, above, outside any media query.) */
    .container-header .mod-menu__toggle-sub{
        pointer-events: none;
    }
}