/* ============================================================================
   mobile.css — shared responsive layer for the Merit marketing site
   ----------------------------------------------------------------------------
   merit-website is ten standalone static HTML pages, each with its own inline
   <style> block and NO shared stylesheet. Rather than duplicate the same
   breakpoints ten times (and let them drift), all responsive rules live here.

   MUST be linked AFTER each page's inline <style> block so it wins on cascade
   order at equal specificity. Styling on this site is class-based (index.html
   has 205 class attributes and only 8 inline style="" attributes), which is why
   this works without !important.

   The nav markup is IDENTICAL on all ten pages — same .nav-inner, .nav-right,
   .nav-link, one #about-wrap dropdown, .nav-divider — so one hamburger
   implementation covers the whole site. See mobile-nav.js.

   Variables referenced here (--nav-h, --border, --white, --navy, --sky, --text,
   --muted, --section-pad) are defined in each page's own :root, so this file
   inherits the existing design tokens rather than restating them.
   ========================================================================== */

/* ── Universal guards ───────────────────────────────────────────────────────
   Applied at every width. Nothing here changes desktop layout; these only stop
   content from forcing horizontal scroll, which is the single most common
   mobile failure on a site built desktop-first. */
img, svg, video, canvas { max-width: 100%; height: auto; }

/* Long unbroken strings (URLs, emails, SIS ids) are the other overflow cause. */
p, li, td, th, h1, h2, h3, h4, dd, dt { overflow-wrap: break-word; }

/* The hamburger is injected by mobile-nav.js and hidden until the breakpoint. */
.nav-toggle { display: none; }

/* ============================================================================
   ≤ 900px — TABLET AND BELOW: nav collapses, multi-column grids halve
   ========================================================================== */
@media (max-width: 900px) {

  /* ── Nav → hamburger ────────────────────────────────────────────────────*/
  .nav-inner { padding: 0 20px; }
  .nav-spacer { flex: 1; }

  .nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;              /* 44px minimum touch target */
    height: 44px;
    padding: 0 10px;
    margin-left: 8px;
    background: none;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
  }
  .nav-toggle span {
    display: block;
    height: 2px;
    width: 100%;
    border-radius: 2px;
    background: var(--navy, #013a54);
    transition: transform 0.2s ease, opacity 0.2s ease;
  }
  /* Bars morph into an X while the panel is open. */
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* The links become a drop-down panel under the fixed bar. Fixed rather than
     absolute so it is not clipped by the nav's own height. */
  .nav-right {
    position: fixed;
    top: var(--nav-h, 64px);
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 12px 20px 20px;
    background: var(--white, #fff);
    border-bottom: 1px solid var(--border, #e2e8f0);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.09);
    max-height: calc(100vh - var(--nav-h, 64px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Grid, not flex, when open: it lets the two CTAs share one row without
     needing a wrapper element added to all ten pages' markup. Everything else
     spans both columns. Desktop is untouched because this only applies inside
     the media query and only when .nav-open is present. */
  .nav-right.nav-open {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 8px;
    row-gap: 2px;
  }
  .nav-right.nav-open > * { grid-column: 1 / -1; }
  .nav-right.nav-open > .btn-nav-getmerit { grid-column: 1; }
  .nav-right.nav-open > .btn-nav-login    { grid-column: 2; }

  .nav-link {
    padding: 13px 12px;       /* taller rows for thumbs */
    font-size: 15px;
    text-align: left;
    width: 100%;
  }

  /* The About dropdown flattens into an indented list and is ALWAYS expanded.
     Deliberate: only #about-wrap has JS wired to it, so relying on the toggle
     would risk links being unreachable if that script ever changes. The
     existing .open class becomes a visual no-op here. */
  .nav-dropdown-wrap { position: static; }
  .nav-dropdown,
  .nav-dropdown.open {
    position: static;
    opacity: 1;
    pointer-events: all;
    transform: none;
    min-width: 0;
    padding: 0 0 6px 12px;
    border: none;
    box-shadow: none;
    background: none;
  }
  /* The little caret pointing at the desktop dropdown makes no sense inline. */
  .nav-dropdown::before,
  .nav-dropdown::after { display: none; }
  .dropdown-item { padding: 11px 12px; }
  /* The "About ▾" button is now just a section heading. */
  #about-btn { font-weight: 700; color: var(--muted, #64748b); font-size: 12px;
               letter-spacing: 1px; text-transform: uppercase; padding-bottom: 4px; }

  .nav-divider { display: none; }

  /* Calls to action go full width and sit at the bottom of the panel. */
  .btn-nav-getmerit,
  .btn-nav-login {
    width: 100%;
    text-align: center;
    padding: 13px 14px;
    font-size: 14.5px;
    margin-top: 10px;
  }

  /* ── Layout ─────────────────────────────────────────────────────────────*/
  .container { padding: 0 20px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-brand p { max-width: none; }
}

/* ============================================================================
   ≤ 640px — PHONES: everything single column, type scaled down
   ========================================================================== */
@media (max-width: 640px) {

  .container { padding: 0 16px; }
  .nav-inner { padding: 0 16px; }
  .nav-right { padding: 12px 16px 20px; }

  /* Sections are generously padded for desktop; that reads as dead space on a
     phone and pushes content below the fold. */
  .section { padding: 48px 0; }

  /* Hero and page type. Desktop sizes are set in each page's inline style, so
     these override rather than define. */
  .page-hero { padding-top: 32px; padding-bottom: 24px; }
  .page-hero h1 { font-size: 30px; line-height: 1.2; }
  .page-body { font-size: 15.5px; line-height: 1.7; }
  .eyebrow { font-size: 11px; letter-spacing: 1.2px; }

  h1 { font-size: 30px; line-height: 1.2; }
  h2 { font-size: 24px; line-height: 1.25; }
  h3 { font-size: 19px; }

  /* Any remaining multi-column grid collapses. Broad on purpose: six of the ten
     pages had NO media queries at all, so unknown grids are the norm. Anything
     that needs to stay two-up gets an explicit rule in the page-specific
     section below. */
  /* 2x2 rather than a single column: four footer blocks stacked one-per-row
     made the footer very long on a phone. */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 26px 20px; }
  .footer-brand { grid-column: 1 / -1; }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    text-align: left;
  }

  /* Wide tables scroll horizontally inside their own box instead of stretching
     the page. */
  table { display: block; width: 100%; overflow-x: auto; }
}

/* ============================================================================
   GRID COLLAPSE — the actual cause of horizontal scrolling on every page
   ----------------------------------------------------------------------------
   A `1fr` grid column has an implicit minimum of `auto`, i.e. it will NOT shrink
   below its content's min-content width. So a 3- or 4-column grid on a 412px
   phone stays 3 or 4 columns and forces the document wider than the viewport —
   which on mobile also drags position:fixed elements (the nav, the hamburger,
   the open menu panel) out of view when you scroll right. One bug, four
   symptoms.

   The first version of this file claimed in a comment that "any remaining
   multi-column grid collapses" and then only collapsed .footer-grid. These are
   every grid on the site, found by grepping grid-template-columns across all ten
   pages. Kept as explicit class names rather than a wildcard so it is obvious
   what is affected and a new grid is a deliberate addition here.
   ========================================================================== */

/* Sidebar layouts: a fixed 220–224px column beside content. Stack earlier than
   the rest, since 224px of a 412px screen leaves nothing usable. */
@media (max-width: 900px) {
  .help-layout,
  .legal-layout,
  .story-layout,
  .hero-layout,
  .contact-layout,
  .get-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  /* 3- and 4-up card grids go 2-up at tablet width before stacking. */
  .features-grid,
  .roles-grid,
  .role-cards,
  .screens-grid,
  .results-grid,
  .two-col,
  .how-steps {
    grid-template-columns: 1fr 1fr;
  }

  /* Belt and braces: any grid or flex child that still refuses to shrink. This
     is what stops an unknown future grid from reintroducing the overflow. */
  [class*="-grid"] > *,
  [class*="-layout"] > *,
  [class*="-row"] > *,
  [class*="-cards"] > *,
  [class*="-steps"] > * { min-width: 0; }
}

@media (max-width: 640px) {
  /* Everything single column on a phone. */
  .features-grid,
  .roles-grid,
  .role-cards,
  .screens-grid,
  .results-grid,
  .two-col,
  .how-steps,
  .key-term-grid,
  .meta-grid,
  .quote-meta,
  .field-row,
  .inputs-row,
  .form-grid {
    grid-template-columns: 1fr;
  }

  /* .hiw-step is `80px 1fr` — an icon beside text. That fits fine at 412px and
     stacking it would orphan the icon, so it is deliberately left alone. */
}

/* ============================================================================
   help.html
   ========================================================================== */
@media (max-width: 900px) {

  /* The sidebar is `position: sticky` with max-height 100vh and overflow-y auto.
     Once .help-layout collapses to one column it still sticks, so it rides OVER
     the articles as you scroll. Static on mobile: it becomes a normal block of
     links above the content. */
  .help-sidebar {
    position: static;
    top: auto;
    max-height: none;
    overflow-y: visible;
    padding-bottom: 8px;
  }
}

/* The five role tabs are ~700px of content in a centred flex row, so at phone
   width they overflowed BOTH edges and "All Articles" ended up off-screen left
   where nothing could scroll to it.
   A swipeable row was the first attempt and was wrong: horizontal scrolling
   hides filter options behind a gesture with no affordance, so users never
   discover the roles. WRAPPING keeps all five visible with no gesture at all —
   the labels are short enough to fit two rows at 360px and up. */
@media (max-width: 760px) {
  .role-strip {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 0;
  }
  .role-tab {
    padding: 11px 14px;
    font-size: 12.5px;
    white-space: nowrap;            /* never break "District Admin" mid-word */
    flex: 0 0 auto;
  }
}

/* ── Sidebar → collapsible "Browse topics" ─────────────────────────────────
   help.html has a lot of categories, and stacked above the articles the list was
   a long scroll before reaching any content. Collapsed behind a toggle instead,
   same pattern as the nav hamburger.
   The button is injected as a SIBLING of #sidebar, not a child: the page rebuilds
   `sidebar.innerHTML` on every search keystroke and role filter change, so a
   child button would be destroyed on first interaction. */
.sb-toggle { display: none; }

@media (max-width: 900px) {
  .sb-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 13px 16px;
    background: var(--white, #fff);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 10px;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--navy, #015175);
    cursor: pointer;
  }
  .sb-toggle::after {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform 0.18s ease;
  }
  .sb-toggle[aria-expanded="true"]::after {
    transform: rotate(225deg) translateY(-2px);
  }

  .help-sidebar { display: none; }
  .help-sidebar.sb-open {
    display: block;
    margin-top: 10px;
    padding: 4px 0 8px;
    border-bottom: 1px solid var(--border, #e2e8f0);
  }
  /* Bigger tap targets for the generated .sb-link rows. */
  .help-sidebar.sb-open .sb-link { display: block; padding: 11px 4px; }
}

/* ============================================================================
   PAGE-SPECIFIC — added as each page is audited.
   Nothing here yet: this first pass covers the nav and footer, which are shared
   by all ten pages. Per-page grids (pricing tiers, help article layout, contact
   form, get-merit steps) come next and will be appended below, scoped by the
   page's own unique class names since <body> carries no page identifier.
   ========================================================================== */