/* ============================================================
   TCE EIACP — Responsive + Mobile Menu Drawer
   ============================================================ */

/* ── Mobile overlay backdrop ──────────────────────────────── */
.mobile-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 99998;
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.mobile-overlay.active {
    display: block;
    opacity: 1;
}

/* ============================================================
   DESKTOP (≥992px) — Hover-based dropdowns
   ============================================================ */
@media (min-width: 992px) {
    .main-nav {
        display: flex !important; /* Always visible on desktop */
    }

    /* Desktop: hide mobile-only elements */
    #mobileMenuBtn { display: none !important; }

    /* Ensure header is never clipped so dropdowns can overflow */
    .header {
        overflow: visible !important;
    }

    /* Dropdowns appear on hover */
    .has-dropdown:hover > .dropdown-menu {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
        pointer-events: auto !important;
    }
    .has-subdropdown:hover > .sub-dropdown-menu {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateX(0) !important;
        pointer-events: auto !important;
    }
}

/* ============================================================
   MOBILE DRAWER (≤991px)
   ============================================================ */
@media (max-width: 991px) {

    /* ── Hamburger button always white ── */
    #mobileMenuBtn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        color: #fff !important;
        background: none;
        border: none;
        padding: 6px;
        cursor: pointer;
    }

    /* ── Off-canvas drawer ── */
    .main-nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: min(85vw, 320px);
        height: 100vh;
        background: #0f172a;
        z-index: 99999;
        overflow-y: auto;
        padding: 80px 0 40px;
        transition: right 0.35s cubic-bezier(0.16, 1, 0.3, 1);
        box-shadow: -8px 0 32px rgba(0,0,0,0.4);
        display: block !important; /* always in DOM, slides in/out */
    }
    .main-nav.active {
        right: 0;
    }

    /* ── Nav list vertical ── */
    .nav-list {
        flex-direction: column;
        gap: 0;
        padding: 0;
        list-style: none;
        margin: 0;
    }
    .nav-list > li > a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #f1f5f9 !important;
        font-size: 1rem;
        font-weight: 500;
        padding: 14px 24px;
        border-bottom: 1px solid rgba(255,255,255,0.07);
        transition: background 0.15s, color 0.15s;
    }
    .nav-list > li > a:hover,
    .nav-list > li > a.active {
        background: rgba(255,255,255,0.06);
        color: #22c55e !important;
    }

    /* ── Accordion dropdown (mobile) ── */
    /* Hide desktop hover mechanism */
    .has-dropdown .dropdown-menu,
    .has-subdropdown .sub-dropdown-menu {
        position: static !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        box-shadow: none !important;
        border: none !important;
        border-radius: 0 !important;
        background: rgba(0,0,0,0.25) !important;
        padding: 0 !important;
        min-width: 0 !important;
        width: 100%;
        /* hidden until parent is .open */
        display: none;
    }
    .has-dropdown.open > .dropdown-menu,
    .has-subdropdown.open > .sub-dropdown-menu {
        display: block;
    }

    /* Dropdown items inside mobile drawer */
    .dropdown-menu a,
    .sub-dropdown-menu a {
        color: #cbd5e1 !important;
        padding: 11px 32px !important;
        font-size: 0.9rem !important;
        border-radius: 0 !important;
        margin: 0 !important;
        border-bottom: 1px solid rgba(255,255,255,0.05);
    }
    .dropdown-menu a:hover,
    .sub-dropdown-menu a:hover {
        background: rgba(255,255,255,0.06) !important;
        color: #22c55e !important;
    }
    .dropdown-header {
        color: #64748b !important;
        padding: 10px 24px 5px !important;
        font-size: 0.7rem !important;
    }
    .dropdown-divider {
        background: rgba(255,255,255,0.08) !important;
        margin: 4px 24px !important;
    }

    /* ── Sub-dropdown inside mobile ── */
    .has-subdropdown.open > .sub-dropdown-menu a {
        padding-left: 48px !important;
    }

    /* ── Disable active underline on mobile ── */
    .nav-list > li > a::after { display: none; }

    /* ── Header stays dark on mobile ── */
    .header,
    .header.menu-open {
        background: #0f172a !important;
    }
    .header .brand-text,
    .header.menu-open .brand-text {
        color: #ffffff !important;
    }
    .header .btn-search,
    .header.menu-open .btn-search {
        color: #ffffff !important;
    }

    /* ── Hero compact on mobile ── */
    .hero {
        padding-top: 40px;
        padding-bottom: 60px;
        min-height: auto;
        height: auto;
    }
    .hero-title { font-size: 2rem; }
    .hero-actions { flex-direction: column; gap: 12px; }
    .hero-actions a { width: 100%; justify-content: center; }
    .hero-info-card { margin-top: 30px; margin-bottom: 30px; }

    /* ── Stats ── */
    .stats-ribbon-wrapper { margin-top: 0; }
    .stat-col { margin-bottom: 20px; }
    .stat-col::after { display: none; }

    /* ── Newsletter ── */
    .newsletter-form {
        flex-direction: column;
        background: transparent;
        border: none;
        padding: 0;
        gap: 10px;
    }
    .newsletter-form input {
        background: rgba(255,255,255,0.1);
        border: 1px solid rgba(255,255,255,0.2);
        padding: 14px 20px;
        border-radius: 999px;
        width: 100%;
    }
    .btn-subscribe { width: 100%; justify-content: center; }

    /* ── Gov strip ── */
    .gov-strip { font-size: 0.75rem; }
    .gov-links { display: none !important; }
}

/* ── Tablet only ─────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 991px) {
    .hero-title { font-size: 2.6rem; }
    .gallery-masonry { grid-template-columns: repeat(2, 1fr); }
}

/* ── Small phones ────────────────────────────────────────── */
@media (max-width: 575px) {
    .section { padding: 50px 0; }
    .section-title { font-size: 1.7rem; }
    .card-logos { flex-wrap: wrap; }
    .gallery-masonry { grid-template-columns: 1fr; }
    .gallery-item.large,
    .gallery-item.large-wide { grid-column: span 1; height: 200px; }
    .gallery-item.small { height: 200px; }
    .activity-item { flex-direction: column; align-items: flex-start; }
    .activity-thumb { width: 100%; height: 150px; }
}