/* AIRIUM — mobile corrections.
   All three problems were measured on a 375x812 viewport.

   NOTE ON SPECIFICITY: this file is linked near the top of <head>, before each
   page's inline <style>, so equal-specificity rules would lose on source order.
   Selectors here are deliberately one step more specific (body-prefixed) so they
   win regardless of where the link sits. */

@media (max-width: 700px) {

  /* 1. Wide tables were unreachable.
        Lesson pages render their spec table as display:block but never gave it a
        scroll axis: at 375px the last column ended at x=480 and no ancestor
        scrolled, so ~140px of every table was clipped with no way to reach it. */
  body table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* 2. iOS Safari zooms the page when a focused field is under 16px.
        The auth form inherited 15.5px, so tapping Email jumped the whole layout
        and the user had to pinch back out. */
  body input, body select, body textarea { font-size: 16px; }

  /* 3. The sticky .nav-actions block is pinned right and painted over the menu:
        at 375px it started at x=168 and covered Tarif and Sekolah completely,
        leaving ~55px of Kursus. Everything simply does not fit on one line
        (logo 94 + links 217 + actions 195 = 506 for 375px of screen).

        Fix: drop the menu onto its own row. The three links total 217px, so they
        fit a 375px row with nothing overlapping and nothing to scroll. Scoped
        with :has() because lesson pages have no .nav-links wrapper — their
        chapter links are direct children of .nav-in and would wrap into a tall
        stack, so those keep the horizontal scroll they were designed around.

        The :not(...nth-child(4)) guard keeps this to short menus. The landing
        page carries seven links: wrapping those produced a three-row, 126px
        sticky header that ate 15% of the screen, so it keeps its scroll strip. */
  body .nav-in:has(.nav-links):not(:has(.nav-links a:nth-child(4))) { flex-wrap: wrap; height: auto; }
  body .nav-in:has(.nav-links):not(:has(.nav-links a:nth-child(4))) .nav-links {
    order: 3;
    width: 100%;
    margin-left: 0;
    padding-right: 0;
    overflow-x: auto;
  }
  body .nav-links a { padding: 6px 8px; }

  /* Two navbar markups exist and both need this: the app templates use .lang-*,
     the 63 static pages use .gs-lang-*. Keep the flag, drop the "ID ⌄" label —
     on lesson pages this is what buys the chapter strip its room back. */
  body .lang-code, body .lang-chev,
  body .gs-lang-code, body .gs-lang-chevron { display: none; }
}
