/* =============================================
   Modern Header - Shared Styles
   Used across all inner pages of Star Events
   ============================================= */

/* ── Inner-page header (solid white, fixed) ── */
#header.modern-header:not(.index-header-transparent) {
    position: fixed !important;
    top: 0 !important; left: 0 !important; right: 0 !important;
    z-index: 1000 !important;
    background: rgba(255, 255, 255, 0.97) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
    transition: background 0.3s ease !important;
}

/* ── Homepage header (transparent → white on scroll) ── */
#header.index-header-transparent {
    position: fixed !important;
    top: 0 !important; left: 0 !important; right: 0 !important;
    z-index: 1000 !important;
    background: transparent !important;
    box-shadow: none !important;
    transition: background 0.3s ease, box-shadow 0.3s ease !important;
}
#header.index-header-transparent.scrolled {
    background: rgba(255, 255, 255, 0.97) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
}

/* Menu bar section — transparent by default, coloured per-header above */
#header .mega-menu .menu-list-items {
    background: transparent !important;
    backdrop-filter: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Page banner offset for fixed header */
body { padding-top: 0 !important; }
.inner-intro { padding-top: 120px !important; margin-top: 0 !important; }


/* ─────────────────────────────────────────────
   DESKTOP ONLY (≥ 992px)
   ───────────────────────────────────────────── */
@media (min-width: 992px) {

    /* Vertically center the row */
    #header.modern-header .mega-menu .menu-list-items .row {
        display: flex !important;
        align-items: center !important;
    }

    /* Logo */
    #header.modern-header .mega-menu .menu-logo {
        padding: 0 !important;
        margin: 0 !important;
    }

    #header.modern-header .mega-menu .menu-logo img {
        height: auto !important;
        max-height: 50px !important;
        width: auto !important;
    }

    /* Nav links row */
    #header.modern-header .mega-menu .menu-links {
        display: flex !important;
        align-items: center !important;
        height: 100% !important;
        gap: 25px !important;
    }

    #header.modern-header .mega-menu .menu-links > li {
        display: flex !important;
        align-items: center !important;
        position: relative !important;
    }

    /* Individual nav link — teal by default on all desktop headers */
    #header.modern-header .mega-menu .menu-links > li > a {
        color: #04b1ad !important;
        font-weight: 600 !important;
        font-size: 15px !important;
        padding: 10px 0 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.3px !important;
        line-height: normal !important;
        height: auto !important;
        min-height: auto !important;
        display: flex !important;
        align-items: center !important;
    }

    /* White links on homepage hero (transparent, before scroll) */
    #header.index-header-transparent:not(.scrolled) .mega-menu .menu-links > li > a {
        color: #fff !important;
    }

    /* Teal underline animation on hover */
    #header.modern-header .mega-menu .menu-links > li > a::after {
        content: '' !important;
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 0 !important;
        height: 3px !important;
        background: linear-gradient(135deg, #04b1ad 0%, #02a5a1 100%) !important;
        transition: width 0.3s ease !important;
    }

    #header.modern-header .mega-menu .menu-links > li > a:hover::after,
    #header.modern-header .mega-menu .menu-links > li.active > a::after {
        width: 100% !important;
    }

    #header.modern-header .mega-menu .menu-links > li > a:hover,
    #header.modern-header .mega-menu .menu-links > li.active > a {
        color: #04b1ad !important;
    }

    /* White hover on transparent hero */
    #header.index-header-transparent:not(.scrolled) .mega-menu .menu-links > li > a:hover,
    #header.index-header-transparent:not(.scrolled) .mega-menu .menu-links > li.active > a {
        color: rgba(255,255,255,0.8) !important;
    }

    /* Dropdown menu */
    #header.modern-header .mega-menu .drop-down-multilevel {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        margin-top: 5px !important;
        z-index: 1000 !important;
        min-width: 220px !important;
        background: rgba(255, 255, 255, 0.98) !important;
        backdrop-filter: blur(20px) !important;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15) !important;
        border-radius: 8px !important;
        padding: 8px 0 !important;
        border: 1px solid rgba(4, 177, 173, 0.1) !important;
    }

    #header.modern-header .mega-menu .drop-down-multilevel li {
        margin: 0 !important;
        padding: 0 !important;
        border-bottom: 1px solid rgba(4, 177, 173, 0.1) !important;
    }

    #header.modern-header .mega-menu .drop-down-multilevel li:last-child {
        border-bottom: none !important;
    }

    #header.modern-header .mega-menu .drop-down-multilevel li a {
        display: block !important;
        padding: 12px 20px !important;
        color: #2c3e50 !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        text-decoration: none !important;
        transition: all 0.3s ease !important;
        line-height: 1.5 !important;
    }

    #header.modern-header .mega-menu .drop-down-multilevel li a:hover {
        background: rgba(4, 177, 173, 0.1) !important;
        color: #04b1ad !important;
        padding-left: 25px !important;
    }
}


/* ─────────────────────────────────────────────
   MOBILE (≤ 991px)  —  COMPLETE REWRITE
   Strategy: menu panel uses position:fixed so it
   is ALWAYS full-width directly below the header,
   bypassing every ancestor positioning context.
   JS stamps the exact top value at runtime.
   ───────────────────────────────────────────── */
@media (max-width: 991px) {

    /* ── 1. FIXED HEADER ──────────────────────── */
    #header,
    #header.modern-header,
    #header.index-header-transparent {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 9999 !important;
        background: #fff !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.12) !important;
        backdrop-filter: none !important;
        transition: background 0.3s, box-shadow 0.3s !important;
    }

    /* Transparent on homepage before scroll / menu-open */
    #header.index-header-transparent:not(.scrolled):not(.menu-open) {
        background: transparent !important;
        box-shadow: none !important;
    }

    /* Go solid-white the moment the menu is opened */
    #header.menu-open {
        background: #fff !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.12) !important;
    }

    /* Hide topbar on mobile */
    .modern-topbar { display: none !important; }

    /* ── 2. INNER WRAPPERS — all static, transparent ── */
    #header .menu,
    #header .mega-menu,
    #header .mega-menu > section.menu-list-items {
        position: static !important;
        display: block !important;
        width: 100% !important;
        float: none !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    /* Row = the visible header bar */
    #header .mega-menu .menu-list-items .row {
        display: flex !important;
        align-items: center !important;
        position: relative !important;
        min-height: 62px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #header .mega-menu .menu-list-items .col-lg-12,
    #header .mega-menu .menu-list-items [class*="col-"] {
        display: flex !important;
        align-items: center !important;
        position: relative !important;
        padding: 0 10px !important;
        width: 100% !important;
    }

    /* ── 3. LOGO ──────────────────────────────── */
    #header .mega-menu .menu-logo {
        display: flex !important;
        align-items: center !important;
        flex: 1 !important;
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
        min-height: 0 !important;
    }

    #header .mega-menu .menu-logo > li {
        display: flex !important;
        align-items: center !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    #header .mega-menu .menu-logo img,
    #header #logo_img {
        max-height: 40px !important;
        width: auto !important;
        display: block !important;
    }

    /* ── 4. HAMBURGER — always pinned to the right ── */
    #header .mega-menu .menu-mobile-collapse-trigger {
        position: absolute !important;
        top: 50% !important;
        right: 10px !important;
        transform: translateY(-50%) !important;
        width: 44px !important;
        height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important;
        border: none !important;
        cursor: pointer !important;
        z-index: 10 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Three lines */
    #header .mega-menu .menu-mobile-collapse-trigger:before,
    #header .mega-menu .menu-mobile-collapse-trigger span,
    #header .mega-menu .menu-mobile-collapse-trigger:after {
        content: '' !important;
        display: block !important;
        position: absolute !important;
        left: 50% !important;
        margin-left: -11px !important;
        width: 22px !important;
        height: 2px !important;
        border-radius: 2px !important;
        background: #2c3e50 !important;
        transition: top 0.25s, transform 0.25s, opacity 0.25s !important;
    }
    #header .mega-menu .menu-mobile-collapse-trigger:before { top: 13px !important; }
    #header .mega-menu .menu-mobile-collapse-trigger span   { top: 21px !important; }
    #header .mega-menu .menu-mobile-collapse-trigger:after  { top: 29px !important; }

    /* White lines when header is transparent (homepage hero) */
    #header.index-header-transparent:not(.scrolled):not(.menu-open)
        .mega-menu .menu-mobile-collapse-trigger:before,
    #header.index-header-transparent:not(.scrolled):not(.menu-open)
        .mega-menu .menu-mobile-collapse-trigger span,
    #header.index-header-transparent:not(.scrolled):not(.menu-open)
        .mega-menu .menu-mobile-collapse-trigger:after {
        background: #fff !important;
    }

    /* Animate → X when open */
    #header.menu-open .mega-menu .menu-mobile-collapse-trigger span {
        opacity: 0 !important;
    }
    #header.menu-open .mega-menu .menu-mobile-collapse-trigger:before {
        top: 21px !important;
        transform: rotate(45deg) !important;
    }
    #header.menu-open .mega-menu .menu-mobile-collapse-trigger:after {
        top: 21px !important;
        transform: rotate(-45deg) !important;
    }

    /* ── 5. NAV PANEL — position:fixed, JS sets top ── */
    /* Hidden by default; JS calls setProperty('display','block','important') */
    #header .mega-menu .menu-links,
    #header.modern-header .mega-menu .menu-links {
        display: none !important;
        position: fixed !important;        /* KEY: bypasses all ancestor contexts */
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        /* top is stamped by JS (= header.offsetHeight) */
        background: #fff !important;
        border-top: 2px solid rgba(4,177,173,0.2) !important;
        box-shadow: 0 6px 24px rgba(0,0,0,0.12) !important;
        max-height: 75vh !important;
        overflow-y: auto !important;
        z-index: 9998 !important;
        transform: none !important;
        float: none !important;
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
    }

    /* ── 6. NAV ITEMS ─────────────────────────── */
    #header .mega-menu .menu-links > li,
    #header.modern-header .mega-menu .menu-links > li {
        display: block !important;
        width: 100% !important;
        float: none !important;
        border-bottom: 1px solid #f0f0f0 !important;
        position: relative !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 1 !important;
    }

    /* When a sub-menu is open, lift that li above all siblings so its
       dropdown items are the topmost click target */
    #header .mega-menu .menu-links > li.sub-open {
        z-index: 9999 !important;
    }

    /* Dropdown items must always be tappable */
    #header .mega-menu .menu-links > li.sub-open .drop-down-multilevel li {
        position: relative !important;
        z-index: 9999 !important;
        pointer-events: auto !important;
    }

    #header .mega-menu .menu-links > li.sub-open .drop-down-multilevel li a {
        position: relative !important;
        z-index: 9999 !important;
        pointer-events: auto !important;
        display: block !important;
    }

    #header .mega-menu .menu-links > li > a,
    #header.modern-header .mega-menu .menu-links > li > a {
        display: block !important;
        padding: 16px 56px 16px 20px !important;
        color: #2c3e50 !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        text-decoration: none !important;
        line-height: 1.4 !important;
        height: auto !important;
        min-height: auto !important;
        border-left: 3px solid transparent !important;
        transition: background 0.2s, color 0.2s !important;
    }

    #header .mega-menu .menu-links > li.active > a,
    #header .mega-menu .menu-links > li > a:hover {
        color: #04b1ad !important;
        border-left-color: #04b1ad !important;
        background: rgba(4,177,173,0.05) !important;
    }

    /* No desktop underline animation on mobile */
    #header .mega-menu .menu-links > li > a::after { display: none !important; }

    /* ── 7. SUB-MENU TOGGLE (injected by JS) ──── */
    .mobile-sub-toggle {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        width: 52px !important;
        height: 52px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 22px !important;
        font-weight: 300 !important;
        line-height: 1 !important;
        color: #04b1ad !important;
        background: transparent !important;
        border: none !important;
        border-left: 1px solid #f0f0f0 !important;
        cursor: pointer !important;
        padding: 0 !important;
    }

    /* ── 8. SUB-MENU ──────────────────────────── */
    #header .mega-menu .drop-down-multilevel {
        display: none !important;          /* JS toggles */
        position: static !important;
        width: 100% !important;
        min-width: 100% !important;
        background: #f8f9fa !important;
        border-top: 1px solid #eee !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
        backdrop-filter: none !important;
    }

    #header .mega-menu .drop-down-multilevel li {
        display: block !important;
        border-bottom: 1px solid #ececec !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #header .mega-menu .drop-down-multilevel li a {
        display: block !important;
        padding: 13px 20px 13px 35px !important;
        font-size: 13px !important;
        color: #555 !important;
        font-weight: 500 !important;
        text-decoration: none !important;
        border-left: 3px solid transparent !important;
    }

    #header .mega-menu .drop-down-multilevel li a:hover {
        color: #04b1ad !important;
        border-left-color: #04b1ad !important;
        background: rgba(4,177,173,0.06) !important;
    }

    /* ── 9. FORCE DARK TEXT IN MENU PANEL ────────
       The desktop transparent-header rule sets link colour to #fff.
       On mobile the panel is always white, so text must always be dark
       regardless of scroll state or header class.                      */
    #header .mega-menu .menu-links > li > a,
    #header.index-header-transparent .mega-menu .menu-links > li > a,
    #header.index-header-transparent:not(.scrolled) .mega-menu .menu-links > li > a,
    #header.index-header-transparent.scrolled .mega-menu .menu-links > li > a {
        color: #2c3e50 !important;
    }
    #header .mega-menu .menu-links > li.active > a,
    #header.index-header-transparent .mega-menu .menu-links > li.active > a,
    #header.index-header-transparent.scrolled .mega-menu .menu-links > li.active > a {
        color: #04b1ad !important;
    }

    /* ── 10. HIDE DUPLICATE DROPDOWN ARROW ───────
       The nav link already has a "+" toggle button injected by JS.
       Hide the fa-angle-down icon that lives inside the <a> text.    */
    #header .mega-menu .menu-links > li > a .fa-indicator,
    #header .mega-menu .menu-links > li > a .fa-angle-down {
        display: none !important;
    }

    /* ── 11. NEUTRALISE DESKTOP SCROLLED RULES ───
       style.css sets display:flex on .menu-links and li elements in
       the .scrolled state WITHOUT a media query, so they apply on
       mobile and break the fixed panel after the user scrolls.
       modern-header.css loads AFTER style.css, so same-specificity
       rules here win and restore correct mobile layout.               */
    #header.index-header-transparent.scrolled .mega-menu,
    #header.index-header-transparent.scrolled .mega-menu > section.menu-list-items {
        padding: 0 !important;
        background: transparent !important;
        backdrop-filter: none !important;
    }
    #header.index-header-transparent.scrolled .mega-menu .menu-list-items .col-lg-12 {
        justify-content: flex-start !important;
        padding: 0 10px !important;
        align-items: center !important;
    }
    /* menu-links: JS controls display via inline !important;
       these just reset the flex-layout properties */
    #header.index-header-transparent.scrolled .mega-menu .menu-links {
        flex-direction: column !important;
        gap: 0 !important;
        align-items: stretch !important;
    }
    /* li items: override the desktop display:flex with block */
    #header.index-header-transparent.scrolled .mega-menu .menu-links > li {
        display: block !important;
        float: none !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }


}

/* ─────────────────────────────────────────────
   HOMEPAGE scroll transition (all widths)
   ───────────────────────────────────────────── */
#header.index-header-transparent.scrolled {
    background: rgba(255,255,255,0.97) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
}