/* =============================================================
   MOBILE RESPONSIVE FIX — Mampong Municipal Education Office
   Loads LAST to override all cascade conflicts.
   Root causes fixed:
     1. .main-nav had max-height:none — grew to full screen height
     2. overflow:visible on .main-nav — nav-menu bled through
     3. overflow-x:hidden on html+body — broke position:sticky
     4. Legacy nav-menu: position:fixed; height:100vh conflicting
     5. Duplicate @media blocks in redesign.css causing conflicts
   ============================================================= */

/* ── 1. Fix position:sticky breaking because of overflow-x:hidden ── */
/* Using "clip" instead of "hidden" — clip does NOT create a new
   stacking/scroll context, so sticky still works.               */
html,
body {
    overflow-x: clip !important;
}

/* ── 2. Mobile layout resets (≤ 992 px) ────────────────────────── */
@media (max-width: 992px) {

    /* Hide the top bar on mobile — saves vertical space */
    .top-bar {
        display: none !important;
        height: 0 !important;
    }

    /* Reset CSS variables so the nav stacks correctly.
       No !important here — JS syncStickyOffsets() must be
       able to override these with the real rendered heights. */
    :root {
        --topbar-h: 0px;
        --main-header-h: 56px;
        --main-nav-h: 0px;
    }

    /* ── HEADER ─────────────────────────────────────────────── */
    .main-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 2000 !important;
        width: 100% !important;
        height: auto !important;
    }

    .header-content {
        padding: 8px 16px !important;
        gap: 8px !important;
    }

    /* Hide desktop action buttons */
    .header-actions {
        display: none !important;
    }

    /* Hide tagline on mobile */
    .logo-text p {
        display: none !important;
    }

    /* ── NAVIGATION BAR ─────────────────────────────────────── */
    /* The nav bar itself: only TOGGLE-BAR height; the dropdown
       floats above content via position:absolute on .nav-menu  */
    .main-nav,
    body .main-nav,
    body .main-nav.open {
        position: sticky !important;
        top: var(--main-header-h, 56px) !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        /* Lock the bar to exactly 48px so it never fills the screen */
        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;
        overflow: visible !important;   /* dropdown floats outside — OK */
        padding: 0 !important;
        z-index: 1800 !important;
        transform: none !important;
    }

    /* Nav shell: flex row holding only the toggle button */
    .nav-shell,
    .main-nav .container,
    .main-nav .nav-shell,
    body .main-nav .container,
    body .main-nav .nav-shell {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;
        overflow: visible !important;
        padding: 0 16px !important;
        position: relative !important;
    }

    /* Toggle button — always visible */
    .mobile-menu-toggle,
    #mobileToggle,
    body #mobileToggle,
    body .mobile-menu-toggle {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 40px !important;
        height: 40px !important;
        position: static !important;
        transform: none !important;
        margin-left: auto !important;
        flex-shrink: 0 !important;
        cursor: pointer !important;
        color: #fff !important;
        font-size: 1.2rem !important;
        background: transparent !important;
        border: none !important;
    }

    /* ── NAV MENU DROPDOWN ──────────────────────────────────── */
    /* Hidden state: zero-height panel below the 48px toggle bar */
    .nav-menu,
    body .main-nav .nav-menu {
        position: absolute !important;
        top: 48px !important;   /* sits flush below the 48px bar */
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        /* max-height:0 + overflow:hidden = perfectly hidden */
        max-height: 0 !important;
        overflow: hidden !important;
        /* Don't use visibility:hidden alone — it keeps height */
        visibility: visible !important;
        pointer-events: none !important;
        opacity: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        background: #0f1f33 !important;
        padding: 0 !important;
        margin: 0 !important;
        z-index: 1700 !important;
        transition: max-height 0.32s ease, padding 0.32s ease !important;
        /* Remove any side-panel transforms from legacy CSS */
        transform: none !important;
        border-radius: 0 !important;
        box-shadow: 0 10px 24px rgba(0,0,0,0.35) !important;
    }

    /* Opened state */
    .nav-menu.open,
    .nav-menu.active,
    body .main-nav .nav-menu.open,
    body .main-nav .nav-menu.active {
        max-height: 75vh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        pointer-events: auto !important;
        padding: 10px 14px 18px !important;
    }

    /* Nav items in the mobile panel */
    .nav-menu > li {
        width: 100% !important;
        border-bottom: 1px solid rgba(255,255,255,0.07) !important;
        position: static !important;
    }

    .nav-menu > li > a {
        display: block !important;
        padding: 12px 10px !important;
        color: #e9f7f2 !important;
        font-size: 0.9rem !important;
        border-radius: 8px !important;
    }

    /* Sub-dropdown: static inside the panel */
    .dropdown-menu {
        position: static !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        display: none !important;
        background: transparent !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        padding: 0 0 6px 12px !important;
        min-width: 0 !important;
    }

    .nav-menu > li.open > .dropdown-menu {
        display: block !important;
    }

    .dropdown-menu a {
        color: rgba(233, 247, 242, 0.85) !important;
        padding: 8px 12px !important;
    }

    /* Spacer: not needed since nav is not fixed */
    .main-nav-spacer {
        display: none !important;
        height: 0 !important;
    }
}

/* ── 3. Small phone fixes (≤ 640 px) ───────────────────────────── */
@media (max-width: 640px) {

    /* Prevent media elements from overflowing the screen */
    img, video, iframe, embed, object {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Body / html */
    html, body {
        width: 100% !important;
    }

    /* Logo area */
    .logo-section {
        gap: 8px !important;
        max-width: calc(100% - 56px) !important;
    }

    .logo-img {
        width: 32px !important;
        height: 32px !important;
        flex-shrink: 0 !important;
    }

    .logo-text h1 {
        font-size: 0.85rem !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100% !important;
    }

    /* Hero slider */
    .hero-slider,
    .home-hero-slider {
        height: clamp(180px, 42vw, 240px) !important;
        width: 100% !important;
        border-radius: 0 !important;
        margin: 0 !important;
    }

    .slide-content h2 {
        font-size: 1.15rem !important;
        line-height: 1.25 !important;
    }

    .slide-content p {
        font-size: 0.82rem !important;
    }

    .slide-content .btn {
        padding: 8px 18px !important;
        font-size: 0.82rem !important;
    }

    /* Stats bar: 2 column on small phones */
    .stats-inner,
    .home-stats-bar .stats-inner {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .home-stats-bar .stat-cell {
        padding: 12px 8px !important;
    }

    /* Sections */
    .section {
        padding: 32px 0 !important;
    }

    /* Container padding */
    .container {
        padding: 0 14px !important;
        width: 100% !important;
    }

    /* Cards: single column */
    .card-grid,
    .cards-grid,
    .news-events-grid,
    .contact-layout,
    .about-overview-grid,
    .about-values-grid,
    .events-list-grid,
    .resources-list-grid,
    .schools-card-grid,
    .staff-units-grid,
    .staff-circuit-grid,
    .videos-grid,
    .contact-main-grid,
    .contact-two-col {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* Page banner */
    .page-banner,
    .inner-banner {
        padding: 30px 0 20px !important;
    }

    .page-banner h1,
    .inner-banner h1 {
        font-size: clamp(1.3rem, 5.5vw, 1.7rem) !important;
    }

    /* Section title */
    .section-title h2 {
        font-size: 1.35rem !important;
    }

    /* Tables: allow horizontal scroll */
    table {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Staff director card */
    .staff-director-card {
        flex-direction: column !important;
    }

    /* Slider arrows: smaller on phone */
    .slider-arrow,
    #slidePrev,
    #slideNext {
        width: 34px !important;
        height: 34px !important;
        font-size: 0.85rem !important;
    }
}

/* ── 4. Extra small phones (≤ 380 px) ──────────────────────────── */
@media (max-width: 380px) {
    .logo-text h1 {
        font-size: 0.76rem !important;
    }

    .hero-slider,
    .home-hero-slider {
        height: 160px !important;
    }

    .slide-content h2 {
        font-size: 1rem !important;
    }

    .stats-inner,
    .home-stats-bar .stats-inner {
        grid-template-columns: 1fr !important;
    }
}

/* ── 5. Overlay ─────────────────────────────────────────────────── */
#mobileOverlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1600 !important;
    background: rgba(0, 0, 0, 0.45) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.28s ease !important;
    pointer-events: none !important;
}

#mobileOverlay.open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}