/*
 * Schoolio — application stylesheet (served by Propshaft).
 *
 * Propshaft does NOT resolve @import at build time, so tokens.css and
 * components.css are linked separately in app/views/layouts/application.html.erb
 * (and admin.html.erb) via stylesheet_link_tag. This file is left as a
 * seam for truly-application-scoped overrides that should load last.
 *
 * The rules below handle mobile/narrow-viewport overrides. Because this
 * file loads AFTER tokens.css and components.css, these rules win without
 * needing !important (except where overriding inline style attributes).
 */

/* =========================================================================
   Mobile: fluid type, stacked header, stacked footer (<= 720px)
   Laid out mobile-last so we don't bloat the desktop cascade.
   ========================================================================= */
@media (max-width: 720px) {
  /* Base body size — 20px is too shouty on a phone */
  body { font-size: 1.0625rem; line-height: 1.55; } /* 17px */

  /* Responsive heading scale. Using clamp() means these also look sane
     at tablet widths between this breakpoint and desktop. */
  h1, .h1 { font-size: clamp(2rem, 8vw, 2.75rem); line-height: 1.08; }
  h2, .h2 { font-size: clamp(1.625rem, 6.5vw, 2.25rem); line-height: 1.15; }
  h3, .h3 { font-size: clamp(1.375rem, 5.5vw, 1.75rem); line-height: 1.2; }
  h4, .h4 { font-size: clamp(1.25rem, 5vw, 1.5rem); line-height: 1.25; }
  h5, .h5 { font-size: 1.125rem; }

  /* Hero — shrink vertical padding only; leave horizontal alone so the
     .container class's --gutter can still apply on the inline axis. */
  .hero { padding-block: 1.25rem 2.5rem !important; }

  /* The seed data puts style="white-space:nowrap" on a <span> inside the
     headline to keep "A new school system" on one line at desktop widths.
     On a phone that forces horizontal scrolling. !important is required
     because we're beating an inline style attribute. */
  .hero-headline span[style*="nowrap"] { white-space: normal !important; }
  .hero-headline {
    font-size: clamp(2rem, 9vw, 3rem) !important;
    max-width: none !important;
    line-height: 1.08 !important;
  }
  .hero .lede,
  .hero p.lede {
    font-size: 1.125rem !important;
    line-height: 1.5 !important;
    margin-top: 1rem !important;
  }

  /* Header: stack logo above nav, left-align nav, let links wrap */
  .site-header__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: .75rem;
    /* 1rem literal — --container-gutter never existed, so this always used the
       fallback. Deliberately NOT --gutter, which is 24px here and would widen
       the mobile header. */
    padding: .75rem 1rem;
  }
  /* components.css pins the brand row to 16px only below 640px, so between
     641px and 720px the wordmark sat flush while the nav was already inset.
     Match them across the whole ≤720px band. */
  .site-header__brand {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .site-header__inner .nav {
    width: 100%;
    justify-content: flex-start;
    gap: 1rem .9rem;
    row-gap: .25rem;
  }
  .site-header__inner .nav a { font-size: 1rem; padding: .35rem 0; }
  .site-header__logo img { height: 42px; }

  /* Footer: stack vertically, one block per line */
  .site-footer { padding: 2rem 1rem; margin-top: 3rem; }
  .site-footer__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  /* CTA row: buttons should be full width on phones */
  .cta-row .btn { width: 100%; justify-content: center; }
  .cta-row { flex-direction: column; align-items: stretch !important; }

  /* Admin grid collapses to a single column; sidebar becomes a top strip */
  .admin-shell { grid-template-columns: 1fr; }
  .admin-sidebar {
    position: static; height: auto;
    padding: .75rem 1rem;
  }
  .admin-sidebar ul {
    grid-auto-flow: column;
    grid-auto-columns: min-content;
    overflow-x: auto;
    white-space: nowrap;
  }
  .admin-main { padding: 1rem; }

  /* Container gutter on mobile. 24px matches the desktop minimum and
     gives the hero headline (which has max-width:none on mobile) enough
     breathing room from the screen edge. */
  :root { --gutter: 24px; }
}

/* Extra-tight phones: iPhone SE, etc. */
@media (max-width: 380px) {
  body { font-size: 1rem; }
  .hero-headline { font-size: clamp(1.75rem, 10vw, 2.25rem) !important; }
  .site-header__logo .wordmark { font-size: 1.125rem; }
}

/* =========================================================================
   Very small phones (≤352px) — shrink the wordmark so the hamburger fits.

   MEASURED, identical on every page: the brand row wants 16 (gutter)
   + 202.9 (logo) + 24 (gap) + 92.8 (About + burger) + 16 (gutter) = 351.7px.
   At 320px the actions cluster therefore ended at x=335.7 — the right ~40%
   of the hamburger was off-screen, with the document stuck at scrollWidth
   336. Nothing was hidden and no ancestor clipped it, so the button really
   was half-unreachable, on every page. The row first fails below 336px; the
   breakpoint is 352 for headroom, and it clears the sizes actually in use —
   360px and 375px phones keep the full-size logo, untouched.

   Shrinking the logo is the lever because the other two candidates are not
   available. The actions cluster cannot give anything up: "About" is NOT
   duplicated inside the hamburger panel (checked the rendered panel — it
   carries only the three topic menus and their children), so hiding it on
   small screens would make /about unreachable from the header entirely.
   And the 16px side gutters are already the trimmed mobile value from the
   ≤640px block in components.css.

   42px → 34px of logo height frees 38.7px, covering the 31.7px shortfall
   with ~19px to spare — deliberately generous, so a different SVG
   rasterisation on a real device cannot quietly put the overflow back.
   The 1.5rem → .75rem brand gap is the same argument: cheap, invisible at
   this size, and it buys another 12px of margin against that risk.

   This block belongs in THIS file, not with the other header rules in
   components.css: the logo-height ladder (52px, 42px at ≤720px) is owned
   here, and this file loads last. The same rule written in components.css
   is the same specificity as the ≤720px one here and silently loses on
   source order — which is exactly what happened on the first attempt.
   ========================================================================= */
@media (max-width: 22rem) {
  .site-header__logo img { height: 34px; }
  .site-header__brand { gap: .75rem; }
}