/* ═══════════════════════════════════════════════════════════
   MMIS School — Mobile Responsive Overrides
   Fixes all pages for phones & tablets (max-width: 768px / 480px)
═══════════════════════════════════════════════════════════ */

/* ── Hamburger → X animation ── */
.mobile-toggle.is-open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.mobile-toggle.is-open span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}
.mobile-toggle.is-open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}
.mobile-toggle span {
    transition: transform 0.28s ease, opacity 0.2s ease;
    display: block;
}

/* ── Utility: Table horizontal scroll ── */
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
}
.table-scroll table { min-width: 560px; }

/* ── Utility: Responsive 2-column grid → 1-column on mobile ── */
.resp-grid-2col,
.resp-grid-main,
.resp-grid-contact {
    display: grid;
}
.resp-grid-2col    { grid-template-columns: 1fr 1fr; gap: 30px; }
.resp-grid-main    { grid-template-columns: 2fr 1fr; gap: 50px; align-items: start; }
.resp-grid-contact { grid-template-columns: 1fr 1.5fr; gap: 50px; align-items: start; }

/* ── Utility: 2-column form grid ── */
.resp-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 15px;
}

/* ── Page hero font size ── */
.page-hero-h1 {
    font-size: clamp(1.6rem, 6vw, 3rem);
    margin-bottom: 10px;
}

/* ── CTA button row (stacks on mobile) ── */
.cta-row {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: center;
}

/* ══════════════════════════════════
   TABLET  ≤ 992px
══════════════════════════════════ */
@media (max-width: 992px) {
    .resp-grid-main    { grid-template-columns: 1fr !important; }
    .resp-grid-contact { grid-template-columns: 1fr !important; }
    .resp-grid-2col    { grid-template-columns: 1fr !important; }
}

/* ══════════════════════════════════
   MOBILE  ≤ 768px
══════════════════════════════════ */
@media (max-width: 768px) {

    /* ── General container padding ── */
    .container { padding: 0 16px; }

    /* ── Page hero sections ── */
    .page-hero-h1 { font-size: clamp(1.4rem, 5vw, 2.2rem) !important; }
    section[style*="padding:60px"] { padding: 40px 0 !important; }
    section[style*="padding:70px"] { padding: 40px 0 !important; }

    /* ── Header: shrink logo, show toggle ── */
    .header-logo   { height: 48px !important; }
    .header-short-name { font-size: 1.1rem !important; }
    .header-full-name  { display: none !important; }
    .header-actions .hbtn-careers { display: none; }
    .header-actions .hbtn-alumni  { display: none; }
    .mobile-toggle { display: flex !important; }
    .header-inner  { padding: 10px 0 !important; }

    /* ── Mobile nav: scrollable panel ── */
    .main-nav {
        position: relative !important;
        top: auto !important;
    }
    .nav-list {
        display: none !important;
        flex-direction: column !important;
        background: #003366;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 9999 !important;
        box-shadow: 0 8px 30px rgba(0,0,0,0.4) !important;
        max-height: 80vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        padding: 0 !important;
        margin: 0 !important;
    }
    .nav-list.nav-open { display: flex !important; }

    /* ── Each top-level nav item ── */
    .nav-item { position: relative; width: 100%; border-bottom: 1px solid rgba(255,255,255,0.1); }
    .nav-item > a,
    .nav-item > .nav-link {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 15px 20px !important;
        color: white !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        width: 100% !important;
        box-sizing: border-box !important;
        background: transparent !important;
        cursor: pointer !important;
        -webkit-tap-highlight-color: rgba(255,255,255,0.1);
    }
    .nav-item > a:active,
    .nav-item > .nav-link:active {
        background: rgba(255,255,255,0.08) !important;
    }

    /* ── Dropdown: static block inside panel ── */
    .dropdown-menu {
        position: static !important;
        display: none !important;
        flex-direction: column !important;
        background: rgba(0,0,0,0.25) !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        pointer-events: auto !important;
    }
    /* Override any hover-based desktop display */
    .nav-item:hover .dropdown-menu,
    .has-dropdown:hover .dropdown-menu { display: none !important; }
    /* Only open class shows it */
    .has-dropdown.open > .dropdown-menu { display: flex !important; }

    .dropdown-menu li { width: 100%; }
    .dropdown-menu li a {
        display: block !important;
        padding: 12px 20px 12px 40px !important;
        font-size: 13px !important;
        color: rgba(255,255,255,0.85) !important;
        border-bottom: 1px solid rgba(255,255,255,0.06) !important;
        background: transparent !important;
    }
    .dropdown-menu li a:active {
        background: rgba(255,255,255,0.1) !important;
    }
    [dir="rtl"] .dropdown-menu li a { padding: 12px 40px 12px 20px !important; }

    /* ── Nav arrow ── */
    .nav-arrow {
        display: inline-block !important;
        transition: transform 0.25s ease !important;
        pointer-events: none;
        flex-shrink: 0;
    }
    .has-dropdown.open .nav-arrow { transform: rotate(-180deg) !important; }

    /* ── Grids → single column ── */
    .resp-grid-2col,
    .resp-grid-main,
    .resp-grid-contact    { grid-template-columns: 1fr !important; gap: 24px !important; }
    .resp-form-grid       { grid-template-columns: 1fr !important; }

    /* ── Stats strip: 2 cols ── */
    .stats-inner { grid-template-columns: repeat(2,1fr) !important; }

    /* ── Footer grid: 2 cols ── */
    .footer-grid { grid-template-columns: 1fr 1fr !important; }

    /* ── CTA row: stacked ── */
    .cta-row { flex-direction: column; align-items: center; }
    .cta-row a { width: 100%; text-align: center; }

    /* ── Section padding ── */
    .section { padding: 50px 0 !important; }

    /* ── Division cards ── */
    .divisions-grid { grid-template-columns: 1fr !important; }
    .division-card-top { padding: 30px 24px !important; }
    .division-card-bottom { padding: 18px 24px !important; flex-wrap: wrap; }

    /* ── Gallery: 1 col ── */
    .gallery-grid {
        grid-template-columns: 1fr !important;
        grid-auto-rows: 200px !important;
    }
    .gallery-grid .gallery-item:nth-child(1) {
        grid-column: span 1 !important;
        grid-row: span 1 !important;
    }

    /* ── Hero section ── */
    .hero-section   { min-height: 60vh !important; }
    .hero-content   { padding: 50px 0 !important; }
    .hero-title     { font-size: clamp(1.8rem, 8vw, 3rem) !important; }
    .hero-subtitle  { font-size: 1rem !important; }
    .hero-school-name { font-size: clamp(1rem, 4vw, 1.4rem) !important; }

    /* ── Videos grid ── */
    .video-grid { grid-template-columns: 1fr !important; }

    /* ── News & Events ── */
    .news-events-grid { grid-template-columns: 1fr !important; gap: 30px !important; }

    /* ── Features grid ── */
    .features-grid { grid-template-columns: 1fr 1fr !important; gap: 16px !important; }
    .feature-card  { padding: 24px 18px !important; }

    /* ── Tables ── */
    .table-scroll { margin-bottom: 24px; }
    table th, table td { font-size: 13px !important; padding: 12px 14px !important; }

    /* ── Timeline — stack single column ── */
    .timeline-wrapper { padding-left: 0 !important; }
    .timeline-center-line { display: none !important; }
    .timeline-item {
        justify-content: flex-start !important;
        margin-bottom: 24px !important;
    }
    .timeline-card {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        border-left: 4px solid #003366 !important;
        border-right: none !important;
    }

    /* ── Admission form sidebar stacks below form ── */
    .apply-sidebar { margin-top: 0; }

    /* ── Fees page: stacked payment options ── */
    .resp-grid-2col.payment-grid { grid-template-columns: 1fr !important; }

    /* ── Contact page ── */
    .contact-info-col { order: 2; }
    .contact-form-col { order: 1; }

    /* ── Top accent bar ── */
    .top-accent-inner { flex-direction: column; gap: 6px; text-align: center; font-size: 11px; }

    /* ── Section header ── */
    .section-header h2  { font-size: clamp(1.4rem, 5vw, 2rem) !important; }
    .section-header { margin-bottom: 36px !important; }

    /* ── Block title ── */
    .block-title { font-size: 1.3rem !important; }

    /* ── Stat numbers ── */
    .stat-number { font-size: 1.8rem !important; }

    /* ── RTL mobile nav ── */
    [dir="rtl"] .dropdown-menu li a { padding: 11px 36px 11px 20px !important; }
    [dir="rtl"] .dropdown-menu li a:hover { padding-right: 36px !important; padding-left: 20px !important; }
}

/* ══════════════════════════════════
   SMALL PHONES  ≤ 480px
══════════════════════════════════ */
@media (max-width: 480px) {
    .header-logo   { height: 40px !important; }
    .header-short-name { font-size: 1rem !important; }
    .header-actions .hbtn-login { display: none; }
    .header-actions { gap: 6px !important; }
    .hbtn { padding: 8px 14px !important; font-size: 11px !important; }

    .stats-inner   { grid-template-columns: 1fr 1fr !important; }
    .footer-grid   { grid-template-columns: 1fr !important; }
    .features-grid { grid-template-columns: 1fr !important; }

    .hero-cta { flex-direction: column; align-items: center; }
    .btn-primary, .btn-outline { width: 100%; max-width: 320px; padding: 14px 24px; text-align: center; }

    .section { padding: 36px 0 !important; }

    /* ── Fees buttons ── */
    .cta-row a { display: block; width: 100%; text-align: center; margin: 0 !important; }
}