/* ===================================
   VSVSV - Responsive Styles
   =================================== */

/* ===== Tablet (768px - 1024px) ===== */
@media screen and (max-width: 1024px) {
    .container {
        padding: 0 1.5rem;
    }
    
    .hero-title {
        font-size: 2.5rem;
    }
    
    .hero-subtitle {
        font-size: 1.1rem;
    }
    
    .features-grid,
    .courses-grid,
    .updates-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* ── Navigation drawer (raised from 768→1024 to kill the overflow dead
          zone the UX review found between ~820px and ~1250px) ── */
    .hamburger {
        display: flex;
        z-index: 1001;
    }
    .hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
    .hamburger.active span:nth-child(2) { opacity: 0; }
    .hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(7px, -6px); }

    .nav-container > .nav-menu,
    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%;
        height: 100vh;
        width: 80%;
        max-width: 300px;
        background-color: var(--brand-navy);
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        padding: 5rem 2rem 2rem;
        gap: 1.25rem;
        transition: right 0.3s ease;
        box-shadow: -5px 0 20px rgba(0, 0, 0, 0.3);
        overflow-y: auto;
        flex-wrap: nowrap;
    }
    .nav-menu.active { right: 0; }
    .nav-menu > .nav-item { width: 100%; }
    .nav-menu a {
        width: 100%;
        padding: 0.6rem 0;
    }

    /* Courses dropdown renders as an inline, always-open sublist in the drawer */
    .nav-menu .nav-dropdown { flex-direction: column; align-items: flex-start; width: 100%; }
    .nav-menu .nav-dropdown-caret { display: none; }
    .nav-menu .nav-dropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        background: transparent;
        min-width: 0;
        padding: 0.25rem 0 0.5rem 1rem;
    }
    .nav-menu .nav-dropdown-menu a { color: rgba(255,255,255,0.85); padding: 0.45rem 0; font-size: 0.92rem; }
    .nav-menu .nav-dropdown-menu a:hover { background: transparent; color: var(--white); }
    .nav-menu .nav-dropdown-menu i { color: rgba(255,255,255,0.6); }
}

/* ===== Mobile (< 768px) ===== */
@media screen and (max-width: 768px) {
    /* Typography */
    h1 { font-size: 2rem; }
    h2 { font-size: 1.75rem; }
    h3 { font-size: 1.25rem; }
    
    .section-header h2 {
        font-size: 2rem;
    }
    
    /* Container */
    .container {
        padding: 0 1rem;
    }
    
    /* Navigation: the hamburger + drawer now engage at ≤1024px (in the tablet
       block above) so the mid-width overflow dead zone is closed. Only the
       full-width auth buttons stay mobile-only. */
    .btn-login,
    .btn-register {
        width: 100%;
        text-align: center;
    }

    /* ── Content tables scroll inside their own box, not the page ─────────
       privacy.html's cookie/retention tables measure ~352px against a 313px
       content box on a 360px screen, so the PAGE scrolled sideways instead of
       the table. Only privacy.html (4 tables) and pay.html (1) have tables,
       and neither the admin panel nor the classroom loads this stylesheet, so
       the blast radius is those two pages.
       display:block is what makes a <table> an independently scrollable box;
       the rows still lay out as a table inside it. */
    main table,
    .container table {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Hero Section */
    .hero {
        min-height: 500px;
        padding: 2rem 0;
    }
    
    .hero-title {
        font-size: 1.75rem;
    }
    
    .hero-subtitle {
        font-size: 1rem;
    }
    
    .hero-buttons {
        flex-direction: column;
        align-items: stretch;
    }
    
    .hero-buttons .btn {
        width: 100%;
    }
    
    /* Sections */
    section {
        padding: 3rem 0;
    }
    
    /* Grids */
    .features-grid,
    .courses-grid,
    .updates-grid,
    .stats-grid,
    .footer-grid {
        grid-template-columns: 1fr;
    }
    
    /* Feature Cards */
    .feature-card {
        padding: 1.5rem;
    }
    
    /* Course Cards */
    .course-actions {
        flex-direction: column;
    }
    
    /* Statistics */
    .stat-number {
        font-size: 2.5rem;
    }
    
    /* CTA */
    .cta-content h2 {
        font-size: 1.75rem;
    }
    
    .cta-content p {
        font-size: 1rem;
    }
    
    /* Footer */
    .footer-bottom-content {
        flex-direction: column;
        text-align: center;
    }
    
    .footer-bottom-links {
        flex-direction: column;
        gap: 0.5rem;
    }
}

/* ===== Small Mobile (< 480px) ===== */
@media screen and (max-width: 480px) {
    /* ── Navbar CTAs: fit the phone instead of running off it ──────────────
       The three CTAs sit in a nowrap flex row at 1.15rem side padding, which
       measures ~342px against a 313px content box on a 360px screen. The
       document therefore overflowed its viewport by 13px, and because
       `body { overflow-x: hidden }` clips rather than scrolls, the "Register"
       button was simply CUT OFF at the right edge -- unreadable and partly
       untappable -- on EVERY page, since this is the shared navbar.
       Screenshot-verified on about.html; measured on all 24 public pages.

       Two parts, both needed:
         * tighter padding/label so all three fit one row in English;
         * flex-wrap as the safety net -- Hindi and the other 17 languages
           set wider labels than English, and a nowrap row has no way to
           recover from that. Wrapping degrades to a second line; the old
           rule degraded to horizontal scroll. */
    .nav-buttons {
        flex-wrap: wrap;
        justify-content: flex-end;
        row-gap: 0.5rem;
        min-width: 0;
        /* flex-wrap alone could never fire: style.css sets `flex: 0 0 auto`, so the row kept its
           content width, never shrank, and pushed the PAGE wider instead — horizontal scroll on the
           whole site. Measured 2026-09-21 at 390px: Tamil 399px, Telugu 411px (Telugu already
           overflowed at 403px before the "For Schools & Colleges" rename; the rename took Tamil's
           remaining 16px of headroom). Shrinking is what lets the row wrap to a second line.
           A locale whose three button labels are wider than the phone cannot have them on one row;
           two rows is the honest outcome, and English wraps the same way at this width. */
        flex: 0 1 auto;
    }
    .nav-buttons .btn {
        padding: 0.5rem 0.75rem;
        font-size: 0.85rem;
    }
    /* The ≤768 block sets .btn-login/.btn-register to width:100% -- correct
       for a VERTICAL DRAWER, but these two live in the horizontal top bar,
       not in .nav-menu. Under the old nowrap row flex-shrink hid the mistake;
       once the row is allowed to wrap, width:100% puts every button on its
       own line. In the top bar they size to their label. */
    .nav-buttons .btn-login,
    .nav-buttons .btn-register {
        width: auto;
    }

    /* A single label wider than the screen (Tamil hero CTA measured 331px at 320px) cannot be
       absorbed by wrapping the ROW — the button itself must be allowed to break. */
    .btn {
        white-space: normal;
    }

    .hero-title {
        font-size: 1.5rem;
    }
    
    .hero-subtitle {
        font-size: 0.9rem;
    }
    
    .btn {
        padding: 0.6rem 1.2rem;
        font-size: 0.9rem;
    }
    
    .feature-icon {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }
    
    .stat-icon {
        font-size: 2rem;
    }
    
    .stat-number {
        font-size: 2rem;
    }
    
    .course-card {
        font-size: 0.9rem;
    }
    
    .update-icon {
        width: 50px;
        height: 50px;
        font-size: 1.25rem;
    }
}

/* ===== Landscape Orientation (Mobile) ===== */
@media screen and (max-width: 768px) and (orientation: landscape) {
    .hero {
        min-height: 400px;
    }
    
    .hero-title {
        font-size: 1.5rem;
    }
    
    .hero-subtitle {
        font-size: 0.9rem;
    }
}

/* ===== Print Styles ===== */
@media print {
    .header,
    .hero,
    .cta,
    .footer {
        display: none;
    }
    
    body {
        font-size: 12pt;
    }
    
    a {
        text-decoration: underline;
    }
}