/* =========================================================================
   IELTSNexa — shared responsive layer
   Loaded AFTER each page's inline <style>, so equal-specificity rules here win.
   Linked only into the marketing + auth pages (not the test-taking pages, which
   carry their own layout and are handled separately).
   ========================================================================= */

/* ── Global safety net (applies to every page that links this file) ─────── */

/* Media never forces the page wider than the viewport. */
img, svg, video, iframe, canvas { max-width: 100%; }
img, video { height: auto; }

/* Wide tables / code scroll inside themselves instead of widening the page. */
table { max-width: 100%; }
pre   { max-width: 100%; overflow-x: auto; }

@media (max-width: 640px) {
  /* iOS Safari auto-zooms when focusing a field smaller than 16px. Pin to 16px
     on phones to stop the jarring zoom; desktop keeps the designed sizes. */
  input, select, textarea { font-size: 16px; }

  /* Plain <nav> bars (login, signup, checkout, account …) — trim side padding. */
  nav { padding-left: 16px; padding-right: 16px; }
}

/* ── Mobile header menu (shared .nav / .nav-links / .nav-right pattern) ───
   Used by index.html (nav--light) and home.html (nav--dark). Desktop is
   untouched; the hamburger + dropdown only appear once the inline CSS has
   already hidden .nav-links at ≤960px. */

.nav-toggle { display: none; }            /* hidden on desktop */
.nav-links .mobile-only { display: none; } /* menu-only links hidden on desktop */

@media (max-width: 960px) {
  .nav-inner { gap: 16px; position: relative; }

  /* Hamburger button (animates to an X when open) */
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; margin-left: 16px; flex-shrink: 0;
    background: transparent; border: none; padding: 0; cursor: pointer;
  }
  .nav-toggle .bar { position: relative; width: 20px; height: 2px; border-radius: 2px; background: currentColor; transition: background .15s ease; }
  .nav-toggle .bar::before,
  .nav-toggle .bar::after { content: ""; position: absolute; left: 0; width: 20px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .15s ease; }
  .nav-toggle .bar::before { top: -6px; }
  .nav-toggle .bar::after  { top: 6px; }
  .nav-toggle[aria-expanded="true"] .bar { background: transparent; }
  .nav-toggle[aria-expanded="true"] .bar::before { transform: translateY(6px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .bar::after  { transform: translateY(-6px) rotate(-45deg); }

  /* Links collapse into a dropdown panel below the bar */
  .nav-links {
    display: none;
    position: absolute; top: calc(100% + 1px); left: 0; right: 0;
    flex-direction: column; gap: 0;
    margin: 0; padding: 8px 0;
    border-top: 1px solid var(--rule, #E5E2E2);
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    z-index: 60;
  }
  .nav-links.open { display: flex; }
  .nav-links li { width: 100%; list-style: none; }
  .nav-links a  { display: block; padding: 14px 24px; font-size: 15px; }
  .nav-links .mobile-only { display: block; }

  /* Panel colour follows the header theme */
  .nav--light .nav-links  { background: var(--paper, #FBF9F4); }
  .nav--light .nav-toggle { color: var(--charcoal, #2B2D42); }
  .nav--dark  .nav-links  { background: var(--charcoal, #2B2D42); }
  .nav--dark  .nav-toggle { color: #fff; }

  /* Declutter the bar on small screens (these only exist on index.html) */
  .nav-meta { display: none; }
}

@media (max-width: 560px) {
  .nav-right .btn-ghost { display: none; } /* "Sign in" lives in the menu on phones */
}

/* ── Page-specific stacking (unique class names — no cross-page collisions) ─ */

@media (max-width: 960px) {
  /* index.html catalog stacks to one column here; its sticky intro would
     otherwise stay pinned and the card list scrolls over it. */
  .catalog-blurb { position: static; top: auto; }

  /* home.html dash stats stack vertically; the adjacent-sibling rule
     (.ds-item + .ds-item) outweighs the page's padding reset, leaving items
     2-3 indented. Match its specificity to clear the left padding. */
  .ds-item + .ds-item { padding-left: 0; }
}

@media (max-width: 600px) {
  /* index.html landing — rows that stayed multi-column below the 960 breakpoint */
  .cat-row   { grid-template-columns: 1fr; gap: 8px; }
  .sb-row    { grid-template-columns: 1fr; gap: 8px; }
  .method    { grid-template-columns: 1fr; }
  .hero-meta { grid-template-columns: 1fr; gap: 16px; }
  .hero-meta > div { padding-right: 0; }
  .hero-meta > div + div { padding-left: 0; border-left: none; border-top: 1px solid var(--rule); padding-top: 16px; }

  /* account.html — name fields side-by-side → stacked */
  .field-row { grid-template-columns: 1fr; }
}