/* ═══════════════════════════════════════════════════════════════════════════
   SMALL-PHONE LAYER
   Loads after the theme so it wins whichever theme is live — theme files set
   their own small-screen type, and this layer is the floor underneath them.

   Target floor: iPhone SE (2020) — 375 x 667 CSS px, no safe-area insets.
   Everything here is measured against that screen.
   ═════════════════════════════════════════════════════════════════════════ */

/* iOS inflates text in landscape unless told not to */
html{ -webkit-text-size-adjust:100%; }

@media (max-width:620px){

  /* ── Legible micro type ───────────────────────────────────────────────────
     The label styles run 9.3–11.5px, which is fine at arm's length on a big
     screen and unreadable held in one hand. Floor them around 11–12px. */
  .eyebrow{ font-size:.7rem; letter-spacing:.16em; }
  .pill{ font-size:.68rem; letter-spacing:.09em; padding:7px 11px; }
  .hero-tag{ font-size:.68rem; }
  .hero-note{ font-size:.78rem; }
  .post-meta{ font-size:.74rem; }
  .post-meta .tag{ font-size:.68rem; }
  figcaption,.plate figcaption{ font-size:.75rem; }
  .card-link{ font-size:.72rem; }
  .field label{ font-size:.72rem; }
  .hint{ font-size:.8rem; }
  .portal-tabs a{ font-size:.74rem; }
  .foot-credit,.foot-credit a{ font-size:.75rem; }
  .btn,.btn-lg{ font-size:.78rem; }
  /* The dock labels are two fixed columns; if one wraps, the bar grows a line
     and the buttons stop matching. Keep them on one line and let the type come
     down instead. "Text a Photo" is the long one at 320px, which is what an
     SE gives you with Display Zoom on. */
  .dock a{ font-size:.76rem; white-space:nowrap; letter-spacing:.05em; }
  .area{ font-size:.75rem; }
  .rushbar{ font-size:.7rem; }
  .stat span{ font-size:.74rem; }
  .foot-bar{ font-size:.75rem; }
  .tile figcaption{ font-size:.75rem; }

  /* ── Bottom dock ──────────────────────────────────────────────────────────
     Clear the home indicator on phones that have one. On an SE the inset
     resolves to 0 and nothing moves. */
  .dock{ padding-bottom:calc(8px + env(safe-area-inset-bottom,0px)); }
}

/* Narrow phones, and any phone with Display Zoom or larger text turned on —
   an SE 3rd gen reports 320px wide in that mode, not 375. */
@media (max-width:380px){
  .dock{ gap:6px; padding-left:6px; padding-right:6px; }
  .dock a{ font-size:.7rem; letter-spacing:.03em; gap:6px; padding:14px 6px; }
  .dock svg{ width:15px; height:15px; }
  body{ padding-bottom:calc(74px + env(safe-area-inset-bottom,0px)); }
}

/* ── Very small phones (SE 1st gen, 320px) ──────────────────────────────────
   Not the target, but it should not break. Tighten the gutter so the display
   headings and cards keep their proportions instead of squeezing. */
@media (max-width:400px){
  /* A long label like "Ask about rush availability" set a min-content width
     the grid column could not go under, pushing the page 28px wide at 320.
     Letting it wrap fixed that but produced a two-line, bloated button, which
     is worse. Keep buttons on one line and bring the type and padding down so
     the longest label fits instead. */
  .btn{ white-space:nowrap; }
  .btn,.btn-lg{ letter-spacing:.03em; }
  .btn-lg{ padding:15px 14px; font-size:.7rem; }
  .btn-lg svg{ width:14px; height:14px; }
  .split > *,.grid > *,.hero-grid > *{ min-width:0; }
  /* Deliberately NOT forcing width:100% here — the buttons sit left, hugging
     their labels, which is how they were drawn. Letting the label wrap is
     what fixes the overflow; stretching them was never needed for it. */
}
@media (max-width:360px){
  .shell{ padding-left:18px; padding-right:18px; }
}

/* ── Touch layer ────────────────────────────────────────────────────────────
   Applies to phones AND touch tablets — a finger is the same size on an iPad.
   The pointer query catches touch devices wider than the breakpoint. */
@media (max-width:900px), (pointer:coarse){
  /* ── iOS zoom guard ───────────────────────────────────────────────────────
     Safari zooms the whole page in whenever a focused field is under 16px,
     and does not zoom back out. The quote form was at 15.36px, so tapping the
     first field threw the layout sideways. 16px exactly — nothing smaller. */
  .field input,.field select,.field textarea,
  input,select,textarea{ font-size:16px; }

  /* ── Tap targets ──────────────────────────────────────────────────────────
     44px is the Apple and WCAG 2.2 floor. The burger was 37x39, footer links
     23px tall, blog filter chips 34px, and the post back-link 17px. */
  /* 44px box for the finger. Flex, not grid: a grid stretches its rows to fill
     the box, which spread the three bars over the full 44px and made the icon
     taller than it is wide. Flex packs them and centres the block. */
  .burger{ width:44px; height:44px; padding:0; display:flex; flex-direction:column;
           justify-content:center; align-items:center; gap:5px; }
  .burger span{ width:22px; margin:0; }
  .foot-col a{ min-height:44px; display:flex; align-items:center;
               padding:4px 0; margin-bottom:0; }
  #blogFilter .area{ min-height:42px; padding:0 15px;
                     display:inline-flex; align-items:center; }
  .post-head .eyebrow{ display:inline-block; padding:12px 0; margin-bottom:2px; }
  .portal-tabs a{ min-height:44px; display:inline-flex; align-items:center; }
  .navlinks a{ padding-top:15px; padding-bottom:15px; }
  .foot-credit a{ display:inline-block; padding:13px 0; }

}