/* ---------------------------------------------------------------------------
   99-mobile-a-chrome.css — mobile QA sweep, 19 Sep 2026, lane A
   (site chrome + information pages).

   Loads last in the overhaul folder, so at equal specificity these rules win.
   Nothing here changes desktop: every block is inside a phone/tablet media
   query. Each rule records the page, the viewport and the defect it fixes.
   --------------------------------------------------------------------------- */


/* ---------------------------------------------------------------------------
   1. HOME — "Special events" strip: the ← and → arrows were stretched to half
      the strip's width (170px at 390, 190px at 430) and read as two big empty
      boxes under the cards.

      Cause: style.css, @media (max-width:599px),
        main#riverhouse-public-main :where(input…, select, textarea, button)
          { inline-size: 100% }
      That blanket rule has specificity (1,0,1) and beats
        .rhx-ev-strip__btn { width:46px }   (0,1,0)   in 30-events.css.
      The two arrows then flex-shrink to (strip − gap) / 2.

      Measured: 390x844 before 170x46 → after 46x46 (matches the ≥600px look).
      Same defect at 375 (163px) and 430 (190px). Tablet 768 was never affected.
      NOTE for the coordinator: that style.css rule stretches EVERY button in
      main below 600px site-wide. Other lanes should check their own pages.
   --------------------------------------------------------------------------- */
@media (max-width: 599px) {
  main#riverhouse-public-main .rhx-ev-strip__nav .rhx-ev-strip__btn {
    inline-size: 46px;
    max-inline-size: 46px;
    flex: 0 0 46px;
  }
}


/* ---------------------------------------------------------------------------
   2. FOOTER (every page) — the four link columns were 21px-tall taps 6px apart:
      fifteen targets in a stack, all well under the 40px a thumb needs.
      10-shell.css sets .rh-shell-footer-col ul { gap:6px } and gives the
      anchors no padding.

      Measured on /faq/: before 21px tall, 28px pitch → after 33px tall, 45px
      pitch, at 375, 390, 430 and 768. Phone and tablet only; desktop untouched.
   --------------------------------------------------------------------------- */
@media (max-width: 899px) {
  .rh-shell-footer-col ul {
    gap: 12px;
  }

  .rh-shell-footer-col a,
  .rh-shell-footer address a {
    display: inline-block;
    padding-block: 5px;
  }
}


/* ---------------------------------------------------------------------------
   3. /field-trips/ — the eight grey hint lines under the form labels rendered
      at 13.1px (phase1.css `.hint { font-size:.82rem }`). These are not decorative
      captions: they carry the instructions a teacher has to read to fill the
      form in ("Type the dates or date range you are considering", "up to 24
      children in two sessions"). Lifted to the 14px floor on phones only, and
      scoped to this form so no other lane's `.hint` moves.

      Measured at 375/390/430/768: before 13.12px → after 14px. No reflow past
      the column; the form is still 350px wide inside a 390px viewport.
   --------------------------------------------------------------------------- */
@media (max-width: 899px) {
  main#riverhouse-public-main .rh-fieldtrip-form .hint {
    font-size: 14px;
  }
}


/* ---------------------------------------------------------------------------
   4. HOME, /about-visit/, /field-trips/, /privacy/, /terms-of-service/ —
      breadcrumbs, hero buttons and the "related pages" list were CENTERED on
      phones while the headline and body text beside them stayed flush left, so
      those pages read as ragged and off-center. (Flagged by lane B; confirmed
      here on my own pages.)

      Cause: style.css lines 925-930, @media (max-width:599px),
        main#riverhouse-public-main :where(h1…h6, p, ul, ol, li, form, label, …)
          { inline-size:auto; margin-left:auto; margin-right:auto }
      On a flex or grid child that shrinks the element to its text and the two
      auto margins then center it. Specificity (1,0,1), so the block's own rules
      lose; these selectors are (1,1,1) or better and load later.

      Proof, measured at 599px vs 601px on the live pages (nothing else changes
      across that one pixel):
        /            .rhcx-hero__act  margin-inline 192px @599  → 0px @601
        /about-visit .rhav-crumb      margin-inline 235px @599  → 0px @601
                     .rhav-hero__act  margin-inline 191px @599  → 0px @601
        /field-trips .rhft-crumb      margin-inline 225px @599  → 0px @601
                     .rhft-act        margin-inline 190px @599  → 0px @601
        /privacy     .rhc-legal-link-list li  left 139px @390 → 49px (flush) @601
      Only the elements proven above are touched; no blanket counter-rule.
   --------------------------------------------------------------------------- */
@media (max-width: 599px) {
  main#riverhouse-public-main .rhcx-hero__act,
  main#riverhouse-public-main .rhav-crumb,
  main#riverhouse-public-main .rhav-hero__act,
  main#riverhouse-public-main .rhft-crumb,
  main#riverhouse-public-main .rhft-act,
  main#riverhouse-public-main .rhc-legal-link-list li {
    margin-inline: 0;
  }
}