/*
 * 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 — give it room to breathe, shrink top padding */
  .hero { padding: 1.25rem 0 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;
    padding: .75rem var(--container-gutter, 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: 32px; }

  /* 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; }

  /* Make container gutters consistent with the shrunken chrome */
  :root { --gutter: 16px; }
}

/* 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; }
}