/* =============================================
   MEGA MENU - NAIA Archive Theme
   Styled to match NAIA WordPress design
   ============================================= */

/* Hamburger toggle */
.site-header .btn.hamburger { --bs-btn-border-width:0; padding:.75rem; font-size:1.375rem; color:var(--bs-primary) }
.site-header .btn.hamburger .fa-xmark { display:none }
.site-header .btn.hamburger[aria-expanded="true"] { --bs-btn-color:var(--bs-primary) }
.site-header .btn.hamburger[aria-expanded="true"] .fa-bars { display:none }
.site-header .btn.hamburger[aria-expanded="true"] .fa-xmark { display:block }

body:has(.site-header .btn.hamburger[aria-expanded="true"]) { overflow:hidden }

@media (max-width:991px) {
    #site-menu { display:flex; align-items:center; justify-content:flex-end }
}

@media (min-width:992px) {
    .site-header .btn.hamburger { display:none }
}

/* Base styles */
.mega-menu .nav-list { margin:0; padding:0; list-style:none; display:flex; flex-direction:column }
.mega-menu .nav-link { display:flex; align-items:center; white-space:nowrap; color:var(--bs-primary) }
.mega-menu .nav-link .dropdown-toggle::after { content:"\f078"; font-family:var(--fa-family-classic); font-size:.75rem; margin-left:.5rem; border:none; transition:transform .25s }
.mega-menu .nav-link.show .dropdown-toggle::after { transform:rotate(-180deg) }
.mega-menu .extras { display:none }

/* =============================================
   MOBILE (< 992px)
   ============================================= */
@media (max-width:991px) {
    .mega-menu { display:none; position:absolute; top:100%; left:0; right:0; z-index:9999; max-height:calc(100dvh - 4.5rem); overflow-y:auto; background:#fff; --bs-link-color:var(--bs-primary) }
    .mega-menu.show { display:block }
    .mega-menu .container { padding:0 }
    .mega-menu .nav-item { border-bottom:1px solid rgba(0,0,0,.08) }
    .mega-menu .nav-link { --bs-nav-link-padding-y:1.125rem; --bs-nav-link-padding-x:1.25rem; --bs-nav-link-color:var(--bs-primary); --bs-nav-link-hover-color:var(--bs-primary); justify-content:space-between }
    .mega-menu .nav-link.show { background:var(--bs-primary); color:#fff }
    .mega-menu .nav-title { display:block; padding:1rem 1.25rem; font-weight:700; text-transform:uppercase; color:var(--bs-primary); border-bottom:none }
    .mega-menu .dropdown-menu { position:static !important; padding:0 !important; transform:none !important; border:none !important; border-radius:0 !important; box-shadow:none !important }
    .mega-menu .dropdown-menu .content { background:rgba(var(--bs-light-rgb), .37) }
    .mega-menu .dropdown-menu .sponsor { padding:.5rem 1rem; text-align:center }
    .mega-menu .dropdown-menu .sponsor img { max-height:3rem }
    .mega-menu .dropdown-menu .thumbnail img { width:100% }

    .mega-menu .nav-list.level3 { --mw-btn-w:2.5rem; --mw-gap:.5rem; display:flex; flex-direction:row; align-items:center; flex-wrap:wrap; padding:.25rem .5rem; gap:var(--mw-gap) }
    .mega-menu .nav-item.level3 { border-bottom:none; display:flex; align-items:center }
    .mega-menu .nav-item.level3:not(.icon) + .icon { margin-left:auto }

    .mega-menu .nav-link.level1 { --bs-nav-link-font-weight:700; text-transform:uppercase; font-size:1.125rem; letter-spacing:.025em }
    .mega-menu .nav-link.level2 { --bs-nav-link-font-weight:400 }
    .mega-menu .nav-link.level3 { font-size:.8125rem; --bs-nav-link-padding-x:.5rem; --bs-nav-link-padding-y:.25rem }
    .mega-menu .nav-item.level3:not(.icon) .nav-link.level3 { border:1px solid var(--bs-primary); border-radius:4px; padding:.25rem .625rem; width:var(--mw-btn-w); justify-content:center }
    .mega-menu .nav-item.level3.coed .nav-link.level3 { width:calc(2 * var(--mw-btn-w) + var(--mw-gap)) }

    .mega-menu .nav-item.level2.has-submenu { display:flex; align-items:center; gap:.75rem; padding:.75rem 1.25rem }
    .mega-menu .nav-item.level2.has-submenu .nav-link.level2 { flex:1; --bs-nav-link-padding-x:0; --bs-nav-link-padding-y:0 }
    .mega-menu .nav-item.level2.has-submenu > .column { display:contents }
    .mega-menu .nav-item.level2.has-submenu .nav-list.level3 { padding:0 }

    .mega-menu .extras { display:flex; flex-direction:column; gap:1rem; padding:1.5rem; max-width:400px; margin:0 auto }
    .mega-menu .extras .btn { --bs-btn-color:var(--bs-primary) }
    .mega-menu .extras .social-icons { padding-top:.5rem; border-top:1px solid var(--bs-light) }
    .mega-menu .extras .social-icons .nav { justify-content:center }
}

/* =============================================
   DESKTOP (>= 992px)
   ============================================= */
@media (min-width:992px) {
    .site-header .main-nav > .container { position:relative }
    #site-menu { align-self:stretch; display:flex; align-items:stretch }
    .mega-menu { flex:1; display:flex; align-items:stretch; justify-content:flex-end; position:static }
    .mega-menu .main { display:flex; align-items:stretch }
    .mega-menu .nav-list.level1 { align-items:stretch }
    .mega-menu .nav-item.level1 { display:flex; align-items:center }
    .mega-menu > .container { padding:0 }
    .mega-menu > .sponsor img { max-height:3rem }
    .mega-menu .nav-list.level1 { flex-direction:row }
    .mega-menu .nav-item:not(.has-columns) { position:relative }
    .mega-menu .nav-link.show { color:var(--bs-secondary, #d52130) }

    /* Dropdown panel */
    .mega-menu .dropdown-menu {
        --bs-dropdown-padding-y:1.875rem;
        --bs-dropdown-padding-x:1.875rem;
        --bs-dropdown-bg:#fff;
        --bs-dropdown-min-width:320px;
        --bs-nav-link-color:var(--bs-primary);
        --bs-dropdown-border-width:0;
        --bs-dropdown-border-radius:.5rem;
        box-shadow:0 50px 100px -20px rgba(50,50,93,.25), 0 30px 60px -30px rgba(0,0,0,.3);
        top:calc(100% + 2px) !important;
        transform:none !important;
    }
    .mega-menu .nav-item.level1 > .dropdown-menu::before {
        content:'';
        position:absolute;
        top:-2px;
        left:0;
        right:0;
        height:2px;
    }
    /* Arrow caret */
    .mega-menu .nav-item.level1 > .dropdown-menu::after {
        content:'';
        position:absolute;
        top:-.375rem;
        left:2rem;
        width:.75rem;
        height:.75rem;
        background:var(--bs-dropdown-bg, #fff);
        transform:rotate(45deg);
        z-index:1;
    }
    .mega-menu .nav-item.has-columns > .dropdown-menu::after { display:none }
    .mega-menu .dropdown-menu.show { display:block }
    .mega-menu .dropdown-menu .container { display:flex; flex-direction:column; gap:1.875rem; padding:0 }
    .mega-menu .dropdown-menu .sponsor { text-align:center }
    .mega-menu .dropdown-menu .sponsor img { max-width:120px; max-height:60px }
    .mega-menu .dropdown-menu .thumbnail { order:1 }
    .mega-menu .dropdown-menu .column-cta-btn { order:2 }
    .mega-menu .dropdown-menu .thumbnail img { width:100%; max-height:none; aspect-ratio:1/1; object-fit:cover; border-radius:.75rem }

    /* Multi-column dropdowns */
    .mega-menu .nav-item.has-columns .dropdown-menu { left:0 !important; right:0 !important; max-height:80vh; overflow:visible }
    .mega-menu .nav-item.has-columns:has(.nav-list.level3) > .dropdown-menu { left:0 !important; right:0 !important }
    .mega-menu .nav-item.has-columns .dropdown-menu > .container { max-height:calc(80vh - 3.75rem); overflow-y:auto }
    .mega-menu .nav-item.has-columns .columns { display:flex; column-gap:3.75rem; justify-content:space-between; row-gap:2rem; flex-wrap:wrap }
    .mega-menu .nav-item.has-columns .column { flex:1; min-width:0 }

    /* Dropdown content */
    .mega-menu .dropdown-menu .nav-link { --bs-nav-link-color:var(--bs-body-color); --bs-nav-link-hover-color:var(--bs-secondary, #d52130); white-space:normal }
    .mega-menu .dropdown-menu .nav-list.level3 .nav-item.level3:not(.icon) .nav-link { --bs-nav-link-hover-color:#fff }
    .mega-menu .dropdown-menu .nav-item { display:flex }

    /* Column headers */
    .mega-menu .nav-title {
        padding-bottom:0;
        margin-bottom:.25rem;
        line-height:1;
        font-family:'Bebas Neue', sans-serif;
        font-size:1.375rem;
        color:var(--bs-primary);
        font-weight:400;
        text-transform:uppercase;
        letter-spacing:.05em;
    }

    /* Level 3 links row */
    .mega-menu .nav-list.level3 { --mw-btn-w:4rem; --mw-gap:.5rem; flex:1; display:flex; flex-direction:row; justify-content:flex-end; gap:var(--mw-gap) }

    /* Level 2 sport rows */
    .mega-menu .nav-item.level2 { align-items:center; gap:2rem; padding:.5rem 0 }
    .mega-menu .nav-item.level2:last-child { border-bottom:none }
    .mega-menu .nav-item.level3.icon:nth-child(4) { margin-left:.25rem }

    /* Level 1 top nav links */
    .mega-menu .nav-link.level1 {
        --bs-nav-link-padding-x:1.25rem;
        --bs-nav-link-padding-y:1.25rem;
        font-weight:500;
        text-transform:uppercase;
        font-size:1.1875rem;
        letter-spacing:.025em;
        position:relative;
    }

    /* Level 2 sport name links */
    .mega-menu .nav-link.level2 { flex:1; font-weight:400; font-size:1.0625rem }

    /* Level 3 links (base) */
    .mega-menu .nav-link.level3 {
        font-size:1rem;
        font-weight:600;
        text-transform:uppercase;
        letter-spacing:.025em;
        --bs-nav-link-padding-x:.875rem;
        --bs-nav-link-padding-y:.5rem;
    }
    /* Level 3 M/W button links (non-icon) */
    .mega-menu .nav-item.level3:not(.icon) .nav-link.level3 {
        border:2px solid var(--bs-primary);
        border-radius:5px;
        width:var(--mw-btn-w);
        justify-content:center;
        transition:background-color .2s, color .2s;
        font-family:'Roboto', sans-serif;
        font-size:17px;
        font-weight:500;
        line-height:24px;
        letter-spacing:3.6px;
        text-transform:uppercase;
        --bs-nav-link-padding-x:1rem;
        --bs-nav-link-padding-y:.875rem;
    }
    .mega-menu .nav-item.level3:not(.icon) .nav-link.level3:hover {
        background-color:var(--bs-primary);
        color:#fff;
    }
    .mega-menu .nav-item.level3.coed .nav-link.level3 { width:calc(2 * var(--mw-btn-w) + var(--mw-gap)) }


    /* ---- Non-sport dropdown columns (no M/W buttons) ---- */
    .mega-menu .nav-item.has-columns:not(:has(.nav-list.level3)) > .dropdown-menu { left:auto !important; right:0 !important; width:960px; max-width:960px; --bs-dropdown-padding-y:0; --bs-dropdown-padding-x:0; top:calc(100% + 2px) !important; transform:none !important }
    .mega-menu .nav-item.has-columns:not(:has(.nav-list.level3)) > .dropdown-menu > .container { gap:0 }
    .mega-menu .nav-item.has-columns:not(:has(.nav-list.level3)) .columns { column-gap:0; flex-wrap:nowrap }
    .mega-menu .nav-item.has-columns:not(:has(.nav-list.level3)) .column { padding:1.5rem; flex:1 }
    .mega-menu .nav-item.has-columns:not(:has(.nav-list.level3)) .column:nth-child(even) { background-color:#f5f5f7; border-radius:0 .5rem .5rem 0 }

    .mega-menu .nav-item.has-columns:not(:has(.nav-list.level3)) .nav-item.level2 { padding:.25rem 0 }
    .mega-menu .nav-item.has-columns:not(:has(.nav-list.level3)) .nav-link.level2 { font-size:1rem; font-weight:400 }
    .mega-menu .nav-item.has-columns:not(:has(.nav-list.level3)) .nav-link.level2:hover { color:var(--bs-secondary, #d52130) }

    /* Split columns with many items (9+) into two sub-columns */
    .mega-menu .nav-item.has-columns:not(:has(.nav-list.level3)) .column:has(.nav-list.level2 li:nth-child(10)) { flex:2; max-width:none }
    .mega-menu .nav-item.has-columns:not(:has(.nav-list.level3)) .column:has(.nav-list.level2 li:nth-child(10)) .nav-list.level2 { display:block; columns:2; column-gap:3rem }
    .mega-menu .nav-item.has-columns:not(:has(.nav-list.level3)) .column:has(.nav-list.level2 li:nth-child(10)) .nav-title { column-span:all }
    .mega-menu .nav-item.has-columns:not(:has(.nav-list.level3)) .column:has(.nav-list.level2 li:nth-child(10)) .nav-item.level2 { break-inside:avoid }

    /* Hover functionality */
    .mega-menu .nav-item.level1:hover > .dropdown-menu { display:block }
    .mega-menu .nav-item.level1:hover > .nav-link { color:var(--bs-secondary, #d52130) }
    .mega-menu .nav-item.level1:hover > .nav-link > .dropdown-toggle::after { transform:rotate(-180deg) }
}

@media (min-width:1200px) {
    .mega-menu .nav-link.level1 { --bs-nav-link-padding-x:1.75rem; font-size:1.375rem }
}

/* =============================================
   COLUMN CTA BUTTONS
   ============================================= */
.mega-menu .column-cta-btn {
    display:flex; align-items:center; justify-content:center;
    padding:.5rem 1rem;
    color:#fff; text-decoration:none;
    font-family:'Bebas Neue', sans-serif;
    font-size:1.125rem; letter-spacing:.05em; text-transform:uppercase;
    background-color:var(--bs-primary, #1d1d4a);
    transition:all .4s;
}
.mega-menu .column:nth-child(odd) .column-cta-btn { background-color:#184990 }
.mega-menu .column:nth-child(even) .column-cta-btn { background-color:#d52130 }
.mega-menu .column:nth-child(odd) .column-cta-btn:hover,
.mega-menu .column:nth-child(even) .column-cta-btn:hover { color:#fff; background-color:var(--bs-primary, #1d1d4a) }

@media (min-width:992px) {
    .mega-menu .column-cta-btn { padding:.625rem 1.25rem; font-size:1.25rem; margin:0 -1.5rem -1.5rem; border-radius:0 }
    .mega-menu .column:first-child .column-cta-btn { border-radius:0 0 0 .5rem }
    .mega-menu .column:last-child .column-cta-btn { border-radius:0 0 .5rem 0 }
}
