/* ============================================================
 * R&K Kelas Inggris — Mobile-Responsive Optimization
 * Comprehensive touch + small-screen polish.
 * Loaded LAST so its rules override earlier breakpoints.
 * ============================================================ */

/* =============================================
 * 1. GLOBAL — prevent horizontal scroll & smooth zoom
 * ============================================= */
html, body {
  max-width: 100vw;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(30, 58, 138, 0.15);
}
* { -webkit-overflow-scrolling: touch; }
img, video, iframe { max-width: 100%; height: auto; }
table { max-width: 100%; }

/* iPhone notch safe area */
@supports (padding: env(safe-area-inset-top)) {
  .topbar { padding-top: max(12px, env(safe-area-inset-top)); }
  footer { padding-bottom: max(24px, env(safe-area-inset-bottom)); }
  .container { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
}

/* =============================================
 * 2. TOUCH TARGETS — minimum 44x44px (WCAG AAA)
 * ============================================= */
button, .btn, a.btn, .nav-btn, .quiz-option, .level-tab, .cat-tab,
.kid-card, .speak-btn, .dialog-card, .story-card, .song-card,
.profile-chips button, .a11y-segments button, .wiz-card,
.section-tabs button, .level-filter button {
  min-height: 44px;
  touch-action: manipulation; /* prevent double-tap zoom delay */
}
.speak-btn { min-width: 44px; }

/* =============================================
 * 3. TABLET (≤1024px)
 * ============================================= */
@media (max-width: 1024px) {
  .container { padding: 0 14px; }
  section { padding: 40px 0; }
  .hero { padding: 44px 14px 32px; }
  .grid { gap: 16px; }
  .footer-grid { gap: 22px; }
}

/* =============================================
 * 4. PHONE LARGE (≤768px)
 * ============================================= */
@media (max-width: 768px) {
  .container { padding: 0 12px; }
  section { padding: 32px 0; }
  section h2 { font-size: clamp(1.3rem, 5vw, 1.8rem); }
  section .sub { font-size: 0.92rem; margin-bottom: 22px; }

  /* Hero adjustments */
  .hero { padding: 36px 14px 28px; }
  .hero h1 { font-size: clamp(1.6rem, 7vw, 2.2rem); }
  .hero p.tagline { font-size: 0.95rem; }
  .hero-stats { gap: 10px; margin-top: 22px; }
  .hero-stat { min-width: 100px; padding: 10px 14px; }
  .hero-stat .num { font-size: 1.3rem; }
  .hero-stat .lbl { font-size: 0.7rem; }

  /* CTA group stacks on phone */
  .cta-group { flex-direction: column; align-items: center; gap: 10px; }
  .cta-group .btn { width: 100%; max-width: 320px; justify-content: center; }

  /* Cards grid → 1 column on phone */
  .grid { grid-template-columns: 1fr; gap: 14px; }
  .card { padding: 18px; }

  /* Buttons */
  .btn { padding: 12px 20px; font-size: 0.95rem; }

  /* Brand sub hide on very narrow */
  .brand-name { font-size: 0.98rem; }
  .brand-sub { font-size: 0.68rem; }
  .brand-logo { width: 38px; height: 38px; }

  /* Footer stacks */
  .footer-grid { grid-template-columns: 1fr; text-align: center; gap: 24px; }
  .footer-grid a { padding: 6px 0; }

  /* FAQ smaller padding */
  .faq-q { padding: 14px 16px; font-size: 0.95rem; }
  .faq-a { padding: 0 16px; }
  .faq-item.open .faq-a { padding: 0 16px 14px; }

  /* Quiz box */
  .quiz-box { padding: 20px 18px; }
  .quiz-question { font-size: 1.1rem; }
  .quiz-option { padding: 12px 14px; font-size: 0.95rem; }

  /* Vocab card */
  .vocab-card { padding: 14px; gap: 10px; }
  .vocab-eng { font-size: 1.1rem; }
  .vocab-eng .phon { font-size: 0.78rem; }

  /* Grammar box */
  .grammar-box { padding: 18px 16px; }
  .grammar-box h3 { font-size: 1.1rem; }
  .formula { font-size: 0.9rem; padding: 12px 14px; }
  .example { padding: 10px 12px; }
  .example .en { font-size: 0.95rem; }
  .example .id { font-size: 0.85rem; }

  /* Forms */
  input[type="text"], input[type="email"], input[type="password"],
  input[type="tel"], input[type="search"], select, textarea {
    font-size: 16px !important; /* prevent iOS zoom on focus */
    padding: 12px 14px;
  }
}

/* =============================================
 * 5. PHONE MEDIUM (≤480px)
 * ============================================= */
@media (max-width: 480px) {
  .container { padding: 0 10px; }

  /* Hero */
  .hero { padding: 28px 12px 24px; }
  .hero h1 { font-size: clamp(1.45rem, 8vw, 1.9rem); line-height: 1.2; }
  .hero p.tagline { font-size: 0.9rem; line-height: 1.5; }

  /* Brand — hide subtitle on tiny screens */
  .brand-sub { display: none; }
  .brand-name { font-size: 0.95rem; }
  .brand-logo { width: 36px; height: 36px; }
  .topbar { padding: 10px 0; }

  /* Hero stats — 2x2 grid */
  .hero-stats { grid-template-columns: repeat(2, 1fr); display: grid; gap: 8px; }
  .hero-stat { min-width: 0; padding: 8px 10px; }
  .hero-stat .num { font-size: 1.15rem; }

  /* Section padding */
  section { padding: 26px 0; }
  section h2 { font-size: 1.3rem; }

  /* Cards */
  .card { padding: 16px; border-radius: 14px; }
  .card-icon { font-size: 2rem; margin-bottom: 8px; }
  .card h3 { font-size: 1.05rem; }
  .card p { font-size: 0.88rem; }

  /* Page head */
  .page-head { padding: 28px 12px 18px; }
  .page-head h1 { font-size: 1.5rem; }
  .page-head p { font-size: 0.92rem; }

  /* Level tabs */
  .level-tabs { gap: 6px; }
  .level-tab { padding: 8px 14px; font-size: 0.82rem; }

  /* Vocab card grid for kamus 2-col → 1-col on tiny */
  .vocab-card { flex-wrap: wrap; }
  .vocab-card .vocab-eng { flex: 1 1 100%; }
  .vocab-card .vocab-id { flex: 1; }

  /* Speak button */
  .speak-btn { width: 38px; height: 38px; font-size: 1rem; }

  /* Form max width */
  .quiz-box, .speak-card, .article-reader, .player-box,
  .song-player, .auth-card, .cetak-control {
    padding: 18px 14px;
    border-radius: 14px;
  }

  /* Tables — scroll horizontally */
  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }

  /* Buttons stack */
  .controls-row, .reader-controls, .play-controls, .song-controls {
    flex-direction: column;
  }
  .controls-row > *, .reader-controls > *, .song-controls > * { width: 100%; }

  /* Footer copyright */
  .copyright { font-size: 0.78rem; padding: 16px 12px; }

  /* CTA bawah — smaller heading */
  section[style*="linear-gradient"] h2 { font-size: 1.3rem; }
}

/* =============================================
 * 6. PHONE TINY (≤360px) — iPhone SE, old Android
 * ============================================= */
@media (max-width: 360px) {
  .container { padding: 0 8px; }
  .hero h1 { font-size: 1.35rem; }
  .hero p.tagline { font-size: 0.85rem; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
  .hero-stat .num { font-size: 1rem; }
  .hero-stat .lbl { font-size: 0.65rem; }
  .brand-logo { width: 32px; height: 32px; }
  .brand-name { font-size: 0.88rem; }
  .topbar-inner { gap: 8px; }
  .nav-toggle { width: 38px; height: 38px; font-size: 1.2rem; }

  .card-icon { font-size: 1.7rem; }
  .card h3 { font-size: 1rem; }
  .btn { padding: 11px 16px; font-size: 0.9rem; }
}

/* =============================================
 * 7. WIZARD MODAL — full-screen on mobile
 * ============================================= */
@media (max-width: 480px) {
  .wiz-overlay { padding: 0; align-items: stretch; }
  .wiz-box {
    border-radius: 0;
    max-height: 100vh;
    height: 100vh;
    padding: 22px 18px;
    padding-top: max(22px, env(safe-area-inset-top, 22px));
    padding-bottom: max(22px, env(safe-area-inset-bottom, 22px));
    overflow-y: auto;
  }
  .wiz-title { font-size: 1.3rem; }
  .wiz-card { padding: 14px 10px; }
  .wiz-card .ico { font-size: 2rem; }
  .wiz-card .lbl { font-size: 0.92rem; }
  .wiz-card .desc { font-size: 0.72rem; }
  .wiz-actions { flex-direction: column-reverse; gap: 8px; }
  .wiz-actions button { width: 100%; }
}

/* =============================================
 * 8. A11Y PANEL — mobile-friendly
 * ============================================= */
@media (max-width: 480px) {
  .a11y-toggle {
    bottom: max(16px, env(safe-area-inset-bottom, 16px));
    right: 16px;
    width: 52px;
    height: 52px;
    font-size: 1.3rem;
  }
  .a11y-panel {
    bottom: 80px;
    right: 12px;
    left: 12px;
    max-width: none;
    min-width: 0;
  }
}

/* =============================================
 * 9. PROFILE BANNER — mobile stack
 * ============================================= */
@media (max-width: 480px) {
  .profile-banner {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    gap: 8px;
    padding: 12px 14px;
  }
  .profile-banner button {
    width: 100%;
  }
  .profile-chips { gap: 6px; }
  .profile-chips button { padding: 8px 12px; font-size: 0.85rem; }
}

/* =============================================
 * 10. KIDS GALLERY — mobile responsive
 * ============================================= */
@media (max-width: 480px) {
  .kids-gallery {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 0 12px 24px;
  }
  .kid-emoji { font-size: 3rem; }
  .kid-eng { font-size: 1.1rem; }
  .kid-id { font-size: 0.82rem; }
  .kids-category { padding: 0 12px 16px; gap: 6px; }
  .kids-cat-btn { padding: 10px 14px; font-size: 0.88rem; }
  .kids-cat-btn .e { font-size: 1.2rem; }
  .kid-quiz-opts { grid-template-columns: 1fr; }
}

/* =============================================
 * 11. EXAM PAGES (TOEFL/IELTS) — mobile
 * ============================================= */
@media (max-width: 768px) {
  .exam-banner { padding: 20px 16px; }
  .exam-banner h2 { font-size: 1.3rem; }
  .exam-banner .info-row { gap: 8px; }
  .exam-banner .info-row > div { font-size: 0.78rem; padding: 6px 10px; }
  .section-tabs { gap: 6px; }
  .section-tabs button { padding: 9px 14px; font-size: 0.84rem; }
  .section-content { padding: 18px 14px; }
  .passage { padding: 16px 14px; font-size: 0.95rem; line-height: 1.7; }
  .writing-area { min-height: 180px; padding: 12px; font-size: 0.95rem; }
  .q-box { padding: 14px; }
}

/* =============================================
 * 12. SPEAKING PAGE — mobile
 * ============================================= */
@media (max-width: 480px) {
  .speak-card { padding: 20px 14px; }
  .target-sentence .sentence { font-size: 1.2rem; }
  .target-sentence .phon { font-size: 0.85rem; }
  .mic-btn { width: 90px; height: 90px; font-size: 2.8rem; }
  .mic-area { padding: 24px 16px; }
  .stats-row { gap: 8px; }
  .stat-mini { min-width: 0; padding: 8px 12px; flex: 1; }
  .stat-mini .num { font-size: 1.2rem; }
  .diff-vis { font-size: 0.9rem; padding: 12px; line-height: 1.8; }
  .diff-vis .word { padding: 1px 6px; font-size: 0.85rem; }
}

/* =============================================
 * 13. READING/LISTENING PAGES — mobile
 * ============================================= */
@media (max-width: 480px) {
  .story-grid, .dialog-grid, .songs-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .article-reader { padding: 20px 16px; }
  .article-reader h2 { font-size: 1.3rem; }
  .article-text { font-size: 0.98rem; line-height: 1.8; }
  .comp-quiz { padding: 16px 14px; }
  .player-box { padding: 20px 16px; }
  .player-header .big-ico { font-size: 2.8rem; }
  .player-header h2 { font-size: 1.2rem; }
  .audio-player { padding: 18px 14px; }
  .play-btn { width: 70px; height: 70px; font-size: 1.7rem; }
  .transcript .line { padding: 8px 12px; }
  .lyrics { font-size: 1rem; line-height: 2; padding: 18px 14px; }
}

/* =============================================
 * 14. DASHBOARD — mobile
 * ============================================= */
@media (max-width: 480px) {
  .stat-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .stat-box { padding: 14px 10px; }
  .stat-box .num { font-size: 1.4rem; }
  .stat-box .lbl { font-size: 0.7rem; }
  .badge-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .badge-card { padding: 14px 10px; }
  .badge-card .ico { font-size: 2rem; }
  .badge-card .name { font-size: 0.85rem; }
  .badge-card .desc { font-size: 0.72rem; }
}

/* =============================================
 * 15. KAMUS — mobile
 * ============================================= */
@media (max-width: 480px) {
  .cat-tabs { gap: 5px; justify-content: center; }
  .cat-tab { padding: 7px 12px; font-size: 0.78rem; }
  .search-box input { padding: 12px 44px 12px 16px; font-size: 0.95rem; }
}

/* =============================================
 * 16. CETAK / WORKSHEET — mobile preview
 * ============================================= */
@media (max-width: 768px) {
  .worksheet {
    padding: 24px 16px;
    min-height: 0;
  }
  .ws-title { font-size: 1.2rem; }
  .ws-sub { font-size: 0.85rem; }
  .ws-head { flex-direction: column; gap: 8px; }
  .ws-head .info { text-align: left; }
  .ws-section h4 { font-size: 0.9rem; padding: 7px 12px; }
  .ws-section li { font-size: 0.9rem; line-height: 1.7; }
}

/* =============================================
 * 17. AUTH FORMS — mobile
 * ============================================= */
@media (max-width: 480px) {
  .auth-wrap { padding: 20px 12px; min-height: auto; }
  .auth-card { padding: 24px 18px; border-radius: 16px; }
  .auth-card h1 { font-size: 1.4rem; }
  .auth-card .sub { font-size: 0.88rem; margin-bottom: 18px; }
  .auth-card input, .auth-card select { padding: 12px 14px !important; }
}

/* =============================================
 * 18. FOCUS — visible for keyboard nav
 * ============================================= */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
.btn:focus-visible,
button:focus-visible {
  outline-color: var(--accent);
}

/* =============================================
 * 19. MOTION SAFETY
 * ============================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =============================================
 * 20. LANDSCAPE PHONE (height <500px)
 * ============================================= */
@media (max-height: 500px) and (orientation: landscape) {
  .hero { padding: 20px 14px; }
  .hero h1 { font-size: 1.5rem; }
  .hero p.tagline { margin-bottom: 14px; font-size: 0.88rem; }
  .hero-stats { margin-top: 10px; }
  section { padding: 20px 0; }
  .wiz-box { max-height: 92vh; overflow-y: auto; }
}

/* =============================================
 * 21. HIGH-DENSITY DISPLAYS — sharper edges
 * ============================================= */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .brand-logo img,
  img.logo-img {
    image-rendering: -webkit-optimize-contrast;
  }
}

/* =============================================
 * 22. DARK MODE READY (future)
 * ============================================= */
@media (prefers-color-scheme: dark) {
  /* Keep light theme for now — uncomment to enable
  :root {
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-card: #1e293b;
    --text: #f1f5f9;
    --text-secondary: #cbd5e1;
  }
  */
}

/* =============================================
 * 23. PRINT — hide UI elements
 * ============================================= */
@media print {
  .topbar, .nav-toggle, .a11y-toggle, .a11y-panel,
  .wiz-overlay, .profile-banner, footer, .speak-btn,
  .play-btn, .mic-btn, .compat-notice {
    display: none !important;
  }
  body { background: white !important; color: black !important; }
  .grammar-box, .card, .vocab-card, .quiz-box {
    box-shadow: none !important;
    border: 1px solid #ccc !important;
    page-break-inside: avoid;
  }
}