/* ==========================================================================
   ss-theme - mobile.css
   Phone + tablet layer. Enqueued with media="(max-width: 1023.98px)".
   Nothing in this file is parsed at 1024px and above, so the desktop
   design system cannot be affected by anything written here.

   Band 1  <= 639px   phone     single column, bottom bar, rails
   Band 2  640-1023px tablet    two-up rails, wider measure, bar in portrait
   Band 3  >= 1024px  desktop   this file does not load

   SECTIONS
   1. Tokens
   2. Reset for desktop-baked assumptions
   3. Type scale
   4. Tap-target floor
   5. Rails (kills the vertical box column)
   6. Bottom action bar spacing
   7. Branch strip
   8. Tablet band
   9. THEME MAP  <- the only section that needs ss-theme's real class names
  10. Bottom action bar
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   Sampled from the rendered staging site. If ss-theme already defines these
   custom properties, delete the duplicates here and inherit instead.
   -------------------------------------------------------------------------- */
:root {
  /* Colours INHERIT from the theme — never re-declare a brand colour here.
     Corrected 19 Aug 2026: these were eyedropped from rendered pages and had
     drifted (blue #14549E vs #1B6FA8, ink #22221E vs #0E1418). Phones were
     showing a different brand from desktops. Fallbacks are the theme’s real
     current values, so behaviour is identical if a token ever goes missing. */
  --ssm-paper:    var(--paper, #FFF);
  --ssm-paper-2:  var(--stone, #F1F0EC);
  --ssm-ink:      var(--ink,   #0E1418);
  --ssm-text:     var(--ink2,  #2A343B);
  --ssm-muted:    var(--muted, #4E585F);
  --ssm-line:     var(--line,  #D5D9DC);
  --ssm-blue:     var(--water, #1B6FA8);
  --ssm-shut:     var(--alert, #C6382B);

  /* DELIBERATELY NOT INHERITED. The theme’s --open (#2F9E5E) is a pip colour:
     non-text, 3:1 is its bar. Here the same value colours the "Open now"
     SENTENCE, where the bar is 4.5:1 — and #2F9E5E measures 3.40:1 on white
     and 2.98:1 on stone. This darker green measures 5.94:1 and 5.21:1.
     Do not "tidy" this into var(--open). */
  --ssm-open:     #267146;

  --ssm-mono: ui-monospace, "SF Mono", "IBM Plex Mono", Menlo, Consolas, monospace;
  --ssm-gutter: 20px;
  --ssm-tap:    44px;
  --ssm-bar:    calc(58px + env(safe-area-inset-bottom));
}

/* --------------------------------------------------------------------------
   2. Reset for desktop-baked assumptions
   These are the things that make a desktop layout read as "boxy" once it
   linearises. Each rule undoes a desktop assumption rather than restyling.
   -------------------------------------------------------------------------- */

/* <br> is NOT suppressed.
   Audited 2026-08: 41 <br> site-wide. 33 are structural -- branch addresses,
   hours blocks, phone+note pairs, and the footer on all 57 pages. Killing them
   collapses /contact/, /privacy/, /icbc-autoplan/ and every footer into
   run-on lines. The 8 defects (4 x <br><br> paragraph separators in page
   content, 4 injected by wpautop into the footer disclaimer) are source fixes,
   not CSS fixes. */

img, svg, video, iframe, table, pre { max-width: 100%; }
img, svg, video { height: auto; }
body { overflow-wrap: break-word; }

/* Tables built for 1200px get a scroll container rather than a squeeze. */
.ssm-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* pages.css already sets this unconditionally, so it is a no-op today. Kept
   as a guard in case that rule is ever scoped. style.css L136's
   overflow-x: clip has been dead code all along, overridden by pages.css. */
html, body { overflow-x: hidden; }

/* --------------------------------------------------------------------------
   3. Type scale
   Desktop hierarchy is carried by width. At 390px width is constant, so the
   hierarchy has to move into size and weight. Steps are harder than desktop.
   -------------------------------------------------------------------------- */
body { font-size: 16px; line-height: 1.5; -webkit-text-size-adjust: 100%; }

h1 { font-size: clamp(28px, 8.2vw, 34px); line-height: 1.12; letter-spacing: -0.015em; }
h2 { font-size: 23px; line-height: 1.18; letter-spacing: -0.01em; }
h3 { font-size: 18px; line-height: 1.25; }
h1, h2, h3 { text-wrap: balance; }

.ssm-eyebrow {
  font-family: var(--ssm-mono);
  font-size: 13px;
  letter-spacing: 0.135em;
  text-transform: uppercase;
  color: var(--ssm-muted);
}

/* Measure. Anything wider than ~34ch on a phone reads as a wall. */
p, li { max-width: 34ch; }
.ssm-full-measure p { max-width: none; }   /* legal copy, addresses */

/* --------------------------------------------------------------------------
   4. Tap-target floor
   A blue underlined phone number is not a control. Anything tappable gets
   real area, and links that are actions get a box.

   SCOPED AT SOURCE, 2026-08-21.
   This rule used to set display on EVERY tel: link on the site. That is right
   for a phone number sitting in a line of text, and wrong for a phone number
   a component has already laid out. It beat .calls a { display: block } on
   /claims/ and turned three branch cards into unreadable columns at 390 -
   phone number wrapped onto three lines, address onto three more. That was
   patched with a higher-specificity override in the theme. Rather than let a
   fourth override accumulate, the coercion is scoped here instead:

     - the tap-target FLOOR still applies to every tel: link, always;
     - the DISPLAY coercion applies only to a tel: link with no class of its
       own, which is exactly the bare phone number in running text this rule
       was written for. A component that names its link now owns its layout.

   :where() carries the exclusion so the specificity stays (0,1,1), identical
   to before. Narrowing what a rule MATCHES must never change who wins any
   other contest - and :where() is the only way to narrow without raising.
   No :has() is used: this must not depend on selector support to keep a
   44px target on a phone.

   MEASURED BEFORE WRITING, across all 53 published pages: 558 tel: links in
   17 distinct shapes. Seven pages carrying every one of those shapes were
   measured at 390, 641, 901 and 1440, before and after. NOT ONE tel: link
   falls below 44px. The only boxes that change are the ones a component had
   already laid out, and every one of them gets SHORTER, because it stops
   inheriting a 44px line-height it never asked for.
   -------------------------------------------------------------------------- */
a[href^="tel:"],
button,
input[type="submit"],
.ssm-action {
  min-height: var(--ssm-tap);
}

button,
input[type="submit"],
.ssm-action {
  display: inline-flex;
  align-items: center;
}

a[href^="tel:"]:where(:not([class])) {
  display: inline-flex;
  align-items: center;
}

/* Footer link rows are the worst offender -- 12px mono links, 8px apart. */
.ssm-linkrow { display: flex; flex-wrap: wrap; gap: 10px 18px; margin: 0; padding: 0; list-style: none; }
.ssm-linkrow a { min-height: var(--ssm-tap); display: inline-flex; align-items: center; }

/* Form controls at 16px so iOS does not zoom on focus. */
input, select, textarea { font-size: 16px; min-height: 48px; }

:focus-visible { outline: 2px solid var(--ssm-blue); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   5. Rails
   Where desktop uses a grid, phone uses a horizontal scroller with the next
   card bleeding in at the edge. This is what stops the page reading as a
   column of identical rectangles. Requires only that the cards are siblings.
   -------------------------------------------------------------------------- */
.ssm-rail {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 16px var(--ssm-gutter) 22px;
  margin: 0;
  list-style: none;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.ssm-rail::-webkit-scrollbar { display: none; }
.ssm-rail > * {
  flex: 0 0 79%;                 /* the 21% remainder is the bleed */
  scroll-snap-align: start;
}

/* Alternating surfaces give vertical rhythm without new markup. */
.ssm-band-paper { background: var(--ssm-paper); }
.ssm-band-alt   { background: var(--ssm-paper-2); }
.ssm-band-ink   { background: var(--ssm-ink); color: var(--ssm-paper-2); }
.ssm-band-ink h1, .ssm-band-ink h2, .ssm-band-ink h3 { color: #fff; }

/* Edge-to-edge sections. Breaks the single shared left edge. */
.ssm-bleed { margin-left: calc(var(--ssm-gutter) * -1); margin-right: calc(var(--ssm-gutter) * -1); }

/* --------------------------------------------------------------------------
   6. Bottom action bar spacing
   The bar itself is styled in section 10 so it ships as one component.
   Here we only reserve the space it occupies.
   -------------------------------------------------------------------------- */
body { padding-bottom: var(--ssm-bar); }

/* Anything sticky must sit above the bar, not behind it. */
.ssm-sticky-above-bar { bottom: var(--ssm-bar); }

/* --------------------------------------------------------------------------
   7. Branch strip
   Full-bleed rows, status light, round tap-to-call. Server-rendered by
   ss-mobile-layer.php from the same branch table that drives the bar.
   -------------------------------------------------------------------------- */
.ssm-strip { display: block; border-top: 1px solid var(--ssm-line); }

.ssm-branch {
  display: grid;
  grid-template-columns: 1fr 48px;
  align-items: center;
  gap: 14px;
  padding: 14px var(--ssm-gutter);
  border-bottom: 1px solid var(--ssm-line);
}
.ssm-branch:nth-child(even) { background: var(--ssm-paper-2); }

.ssm-branch__name {
  font-family: var(--ssm-mono);
  font-size: 13px;
  letter-spacing: 0.148em;
  text-transform: uppercase;
  margin: 0 0 3px;
}
.ssm-branch__addr { margin: 0; font-size: 15px; line-height: 1.35; max-width: none; }
.ssm-branch__stat {
  display: flex; align-items: center; gap: 7px; margin: 5px 0 0;
  font-family: var(--ssm-mono); font-size: 13px; max-width: none;
}
.ssm-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--ssm-shut); }
.is-open .ssm-dot { background: var(--ssm-open); }
.is-open .ssm-branch__stat { color: var(--ssm-open); }
.is-shut .ssm-branch__stat { color: var(--ssm-muted); }

.ssm-branch__call {
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--ssm-ink); color: var(--ssm-paper);
  text-decoration: none; flex: none;
}
.ssm-branch__call svg { width: 19px; height: 19px; fill: currentColor; }

/* --------------------------------------------------------------------------
   8. Tablet band (640-1023px)
   A tablet is not a big phone. Two-up rails, longer measure, and the bar
   only in portrait -- in landscape the thumb arc is at the sides, not the
   bottom centre, and a full-width bar wastes vertical space.
   -------------------------------------------------------------------------- */
@media (min-width: 640px) {
  :root { --ssm-gutter: 32px; }
  h1 { font-size: clamp(34px, 5.4vw, 44px); }
  h2 { font-size: 28px; }
  p, li { max-width: 62ch; }
  .ssm-rail > * { flex: 0 0 46%; }
  .ssm-strip { display: grid; grid-template-columns: repeat(2, 1fr); }
  .ssm-branch { border-right: 1px solid var(--ssm-line); }

  /* Three branches in a two-column grid left the bottom-right cell empty,
     so the strip border stopped halfway across the last row and the block
     read as a table with a piece missing. Photographed at 640 on 2026-08-20.
     The third cell takes the full row instead: the box closes, and Surrey -
     the longest address - gets one line rather than three.

     :nth-child(3):last-child, not :last-child, so this is self-limiting. If
     a fourth branch is ever added the rule stops matching by itself and the
     grid becomes a clean 2x2 with nothing to fix. Same shape as the spanning
     last cell already used on .sits on the homepage. */
  .ssm-strip > :nth-child(3):last-child { grid-column: 1 / -1; }
}

@media (min-width: 640px) and (orientation: landscape) {
  body { padding-bottom: 0; }
  /* .ssm-bar{display:none} removed here — it sat before the base rule in
     section 10 and lost on document order. Section 10 (L390) does the hide. */
}

/* RETIRED, NOT DELETED (2026-08-20) - this block used to read:

     @media (min-width: 900px) {
       .ssm-strip { grid-template-columns: repeat(3, 1fr); }
       .ssm-rail > * { flex: 0 0 31%; }
     }

   This stylesheet is enqueued with media="(max-width: 900px)", so a nested
   min-width:900 query could only ever match at exactly 900px - a one-pixel
   band in which the strip jumped from two columns to three. It was live code
   in name only, and it dated from before the enqueue was narrowed from
   1023.98px to 900px; above 900 the theme now supplies its own layout.

   The brief asked for these two declarations to be folded into the 640 block.
   Tested first, and reported: repeat(3, 1fr) across the whole 640-900 band
   gives cells of 185-215px, and with the 48px call button in each one the
   addresses break to four and five lines ("2-8195 / 120th / Street, / Delta").
   That is worse than the empty cell it was meant to cure. The spanning
   third cell added to the 640 block above fixes the actual defect and keeps
   the addresses on one or two lines at every width in the band.

   .ssm-rail is a separate matter: it appears on zero of the 53 published
   pages, so flex: 0 0 31% had no element to style either way. */

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}

/* 9. THEME MAP - pass 1.
   SPECIFICITY NOTE: style.css L506-539 re-asserts 37 collapse selectors each
   prefixed body main .entry-content, specificity (0,3,2). A bare .cov {}
   here is (0,1,0) and LOSES regardless of document order. Selectors in that
   list therefore carry the same prefix below. Containers appearing only in
   pages.css take the bare class, because mobile.css is the last sheet. */

/* 9.1 Card rows become rails. These three are gapped card grids with no
   hairline dividers, so changing column count cannot break border arithmetic.
   All three appear back to back on the homepage, which is where the
   column-of-boxes reading comes from.
   .card was REMOVED from this list. It is not a card grid: it is a single
   two-column component (h3 + ul on /, .cleft + .cright on the branch
   pages), so the rail cut its text off mid-word. pages.css L703 already
   stacks .card to 1fr below 900px. Do not add it back. */
.reads,
.revs,
.branches {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-right: var(--ssm-gutter);
  margin: 0;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  grid-template-columns: none;
}
.reads::-webkit-scrollbar,
.revs::-webkit-scrollbar,
.branches::-webkit-scrollbar { display: none; }
.reads > .read,
.revs > .rev,
.branches > .br {
  flex: 0 0 79%;
  scroll-snap-align: start;
  min-width: 0;
}
@media (min-width: 640px) {
  .reads > .read,
  .revs > .rev,
  .branches > .br { flex: 0 0 46%; }
}

/* 9.2 REMOVED — do not reinstate. It set background on section.start /
   .stuck / .social / .honest / .story / .marine / .who / .faq from class
   names alone. .start and .marine are brand blue #1B6FA8 with white text
   at desktop, so forcing --ssm-paper below 1024px gave 1.02:1 to 1.29:1
   on the homepage form intro and the marine teaser. Surface rhythm cannot
   be assigned without reading each section's own colours. */
/* 9.3 Dark bands go edge to edge, breaking the single shared left edge.
   The inner .wrap keeps the gutter so text alignment is unchanged. */
section.blueband,
section.port,
section.claim,
section.cert,
section.sendbar,
section.endcta { padding-left: 0; padding-right: 0; }
section.blueband > .wrap,
section.port > .wrap,
section.claim > .wrap,
section.cert > .wrap,
section.sendbar > .wrap,
section.endcta > .wrap {
  padding-left: var(--ssm-gutter);
  padding-right: var(--ssm-gutter);
}

/* 9.4 REMOVED. .phero .quick and .phero .pbar were railed here on the
   assumption they held short label chips. They hold label-plus-sentence
   blocks, so flex-wrap gives each its own row and nothing improves. .quick
   is also a hairline-bordered container with odd/last-child border repair,
   which 9.5 says not to re-column. Both are Task 4 measurement targets. */

/* 9.5 NOT DONE THIS PASS: the ~38 hairline-bordered grids stay stacked. Each
   carries nth-child border repair tuned to a column count (.tlist 4n/2n,
   .wlist 3n/2n, .cov odd/last-child). Changing columns without recomputing
   that leaves hairlines dangling. Stacked-but-correct beats railed-but-broken.
   Task 4 of this session measures them so pass 2 can be written. */

/* ==========================================================================
   9.6 Hairline repair — phone only (max-width 639.98px)
   Fixes two pre-existing defects measured at 390px in Session 2 Task 4 and
   re-confirmed before this edit. Every container below already renders at
   exactly 1 column at 390px; nothing here changes a column count.
     A) 30 instances: 1 column, but children still carried border-right, so a
        vertical hairline dangled down the right edge with no column beside it.
     B) 51 instances: the last child carried border-bottom while the container
        also had one — a doubled line. .cov alone is 46 of its 48 instances.
   Specificity: pages.css L928-2646 is 1,605 lines of body.ss-src-* per-page
   overrides. body.ss-src-* .cov div scores (0,2,2) and beats the (0,2,1)
   repair at pages.css L268. The selectors below score (0,4,2) for the two-
   class .g pairs and (0,3,2) for the single-class grids, using html plus the
   always-present wp-theme-ss-theme body class. They win on real specificity;
   no important-flag is used.
   :last-child is deliberate, NOT nth-last-child — the existing nth-last-child
   repairs are tuned for 3 and 4 columns and are what leaves .sgrid reading
   1,1,1,0,1,1 at one column.
   Tablet is untouched: .tlist and .wlist are correct at 2 columns and are not
   named here, and this whole block is above nothing wider than a phone.
   ========================================================================== */

@media (max-width: 639.98px) {

  /* A) remove the dangling vertical hairline at 1 column. */
  html body.wp-theme-ss-theme .blueband .g > :nth-child(n),
  html body.wp-theme-ss-theme .port .g > :nth-child(n),
  html body.wp-theme-ss-theme .ccdc .g > :nth-child(n),
  html body.wp-theme-ss-theme .why .g > :nth-child(n),
  html body.wp-theme-ss-theme .promise .g > :nth-child(n),
  html body.wp-theme-ss-theme .rgrid > :nth-child(n),
  html body.wp-theme-ss-theme .tgrid > :nth-child(n),
  html body.wp-theme-ss-theme .dogrid > :nth-child(n),
  html body.wp-theme-ss-theme .frow > :nth-child(n),
  html body.wp-theme-ss-theme .mgrid > :nth-child(n) {
    border-right: 0;
  }

  /* B) remove the doubled bottom hairline where the container draws its own. */
  html body.wp-theme-ss-theme .cov > :last-child,
  html body.wp-theme-ss-theme .sgrid > :last-child,
  html body.wp-theme-ss-theme .rgrid > :last-child {
    border-bottom: 0;
  }
}

/* ==========================================================================
   10. Bottom action bar
   Moved here from the inline <style> in v0.1.0. That block came later in
   document order and beat the landscape rule at equal specificity, so
   .ssm-bar{display:none} in landscape never fired. This file cannot hide
   the bar on desktop; ssm_enqueue()'s unconditional inline rule does
   that. This file only reveals it below 1024.
   ========================================================================== */
.ssm-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: var(--ssm-ink); border-top: 1px solid #000;
  padding-bottom: env(safe-area-inset-bottom);
}
.ssm-bar a {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; min-height: 58px; color: #DDD9CE; text-decoration: none;
  font-family: var(--ssm-mono); font-size: 13px; letter-spacing: 0.065em;
  text-transform: uppercase; border-right: 1px solid #3B3B34; line-height: 1.2;
}
.ssm-bar a:last-child { border-right: 0; }
.ssm-bar a.ssm-bar__primary { background: var(--ssm-blue); color: #fff; }
.ssm-bar svg { width: 19px; height: 19px; fill: currentColor; }
.ssm-bar a:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }

/* min-width:640px was a proxy for "tablet", but a phone in landscape crosses
   640px of WIDTH while never approaching a tablet's HEIGHT: 844x390 matched and
   lost its only persistent navigation. Height is the property that actually
   separates the two cases. Measured: iPad landscape 1023x768 still hides the
   bar; phone landscape 844x390 now shows it. */
@media (orientation: landscape) and (min-height: 600px) {
  .ssm-bar { display: none; }
}

@media print { .ssm-bar { display: none; } }

/* --------------------------------------------------------------------------
   11. CAROUSEL AFFORDANCE - .reads, .revs and .branches (2026-08-20)

   Section 9 turns all three of these rows into horizontal flex scrollers below
   900px and then hides the scrollbar twice over - scrollbar-width:none at L301
   and ::-webkit-scrollbar display:none at L304. At 390 .reads is 318px wide
   with 1490px of content, so five of its six cards sit off-screen with nothing
   to say so.

   The one cue that survived was that the second card is clipped at the right
   edge, and a card cut off mid-word reads as an overflow BUG at least as
   readily as it reads as "there is more this way". Photographed at 390 before
   the first version of this block: "How mu / coverag / actually".

   The fix restores the scrollbar the section removed rather than inventing a
   new control: a 4px track under the row, which is the affordance a phone user
   already knows. No JavaScript, no generated text, no layout shift for the
   cards - only 12px of padding beneath them for the track to sit in.

   2026-08-20, second pass (Q-5d and Q-5e approved):
     - extended from .reads to .revs and .branches. All three carry the same
       section 9 rules and all three scrolled bare. All three appear on the
       homepage only, and nowhere else - checked across all 53 published pages
       (.reads 6 cards, .revs 3, .branches 3).
     - the max-width: 639.98px wrapper is removed. These rows scroll everywhere
       this stylesheet applies, and the stylesheet is itself enqueued at
       max-width: 900px, so dropping the query covers the 640-900 band exactly
       and cannot leak above 900.

   Q-5c is decided: NO dots and no hint line. The scrollbar plus the visible
   sliver of the next card is the whole affordance. A hint line would be a copy
   element, and that is not a CSS decision to make.

   Declared last in the file so it outranks L301/L304 on document order, both
   being the same specificity. iOS Safari uses overlay scrollbars that appear
   only while scrolling, so on iPhone this restores the cue DURING the swipe
   rather than before it.
   -------------------------------------------------------------------------- */
.reads,
.revs,
.branches {
  scrollbar-width: thin;
  scrollbar-color: rgba(14, 20, 24, .35) rgba(14, 20, 24, .08);
  padding-bottom: 12px;
}
.reads::-webkit-scrollbar,
.revs::-webkit-scrollbar,
.branches::-webkit-scrollbar { display: block; height: 4px; }
.reads::-webkit-scrollbar-track,
.revs::-webkit-scrollbar-track,
.branches::-webkit-scrollbar-track {
  background: rgba(14, 20, 24, .08);
  border-radius: 999px;
}
.reads::-webkit-scrollbar-thumb,
.revs::-webkit-scrollbar-thumb,
.branches::-webkit-scrollbar-thumb {
  background: rgba(14, 20, 24, .35);
  border-radius: 999px;
}