/*
Theme Name: S&S Insurance
Theme URI: https://sandsinsurance.ca
Author: S&S Insurance Services Ltd.
Description: Block theme for S&S Insurance Services Ltd. Carries the locked v1.0 design system — Libre Franklin, Literata, IBM Plex Mono, and the six brand tokens. Fonts are self-hosted; no external CDN request is made on any page load.
Version: 1.5.85
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ss-insurance
Tags: block-theme, full-site-editing, business
*/

/* Operational facts are set in mono so they read as facts, not prose. */
.ss-fact, .ss-hours, .ss-phone, .ss-eyebrow {
  font-family: var(--wp--preset--font-family--mono);
  /* Phase 6: the utility preset moved from 0.6875rem (11px) to 13px. Tracking is
     reduced from .1em to .085em so the absolute letter-spacing stays at ~1.1px
     and these labels do not sprawl at the larger size. */
  font-size: var(--wp--preset--font-size--utility);
  letter-spacing: .085em;
  text-transform: uppercase;
  font-weight: 600;
}
.ss-eyebrow { color: var(--wp--preset--color--muted); }

/* Front-desk strip */
.ss-desk { border-bottom: 1px solid var(--wp--preset--color--line); background: var(--wp--preset--color--stone); }
.ss-desk a { text-decoration: none; }
.ss-pip { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 7px; vertical-align: middle; background: var(--wp--preset--color--muted); }
.ss-pip[data-open="1"] { background: #1B8A4B; }
.ss-pip[data-open="0"] { background: var(--wp--preset--color--muted); }

/* Sky is a field and a rule colour — never body text on white. */
.ss-rule { border: 0; border-top: 3px solid var(--wp--preset--color--sky); width: 54px; margin: 0 0 var(--wp--preset--spacing--30) 0; }

.ss-card { border: 1px solid var(--wp--preset--color--line); padding: var(--wp--preset--spacing--30); background: var(--wp--preset--color--paper); }
.ss-card h3 { margin-top: 0; }

/* FAQ */
.ss-faq details { border-bottom: 1px solid var(--wp--preset--color--line); padding: var(--wp--preset--spacing--20) 0; }
.ss-faq summary { cursor: pointer; font-weight: 600; list-style: none; padding-right: 28px; position: relative; }
.ss-faq summary::-webkit-details-marker { display: none; }
.ss-faq summary::after { content: "+"; position: absolute; right: 4px; top: 0; font-weight: 400; color: var(--wp--preset--color--muted); }
.ss-faq details[open] summary::after { content: "\2013"; }
.ss-faq details > *:not(summary) { font-family: var(--wp--preset--font-family--serif); }

/* Held banner — internal, must be impossible to miss */
.ss-held { background: #FBEAE8; border-bottom: 2px solid var(--wp--preset--color--alert); padding: 13px 0; text-align: center; }
.ss-held span { font-family: var(--wp--preset--font-family--mono); font-size: 13px; letter-spacing: 0.085em; text-transform: uppercase; color: #8E2B21; font-weight: 700; }

/* Accessibility floor */
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 8px; top: 8px; z-index: 999; background: var(--wp--preset--color--ink); color: #fff; padding: 10px 16px; }
:focus-visible { outline: 3px solid var(--wp--preset--color--water); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } }

@media print {
  .ss-desk, .ss-held, nav, footer .ss-nav { display: none !important; }
  body { font-size: 11pt; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}

/* Primary bar: logo + the six approved destinations. */
.ss-bar { display:flex; align-items:center; gap:var(--wp--preset--spacing--30); max-width:1200px; margin:0 auto; padding:0 var(--wp--preset--spacing--30); }
.ss-brand img { display:block; width:262px; height:auto; }
.ss-nav { display:flex; align-items:center; gap:22px; margin-left:auto; flex-wrap:wrap; }
.ss-nav a { font-size:15px; font-weight:600; text-decoration:none; color:var(--wp--preset--color--ink); border-bottom:2px solid transparent; padding-bottom:2px; }
.ss-nav a:hover, .ss-nav a[aria-current="page"] { border-bottom-color:var(--wp--preset--color--sky); }
.ss-nav a.ss-quote { background:var(--wp--preset--color--water); color:#fff; padding:11px 20px; border-bottom:0; }
.ss-nav a.ss-quote:hover { background:var(--wp--preset--color--ink); }
.ss-menu-t, .ss-menu-b { display:none; }
@media (max-width:900px) {
  .ss-brand img { width:196px; }
  .ss-menu-b { display:block; margin-left:auto; font-family:var(--wp--preset--font-family--mono); font-size:13px; letter-spacing:0.092em; text-transform:uppercase; border:1px solid var(--wp--preset--color--line); padding:9px 14px; cursor:pointer; }
  .ss-nav { display:none; width:100%; flex-direction:column; align-items:flex-start; gap:0; }
  .ss-menu-t:checked ~ .ss-nav { display:flex; }
  .ss-nav a { width:100%; padding:13px 0; border-bottom:1px solid var(--wp--preset--color--line); }
  .ss-nav a.ss-quote { text-align:center; margin-top:13px; padding:14px; }
}

/* =============================================================================
   S&S Insurance — responsive, accessibility and layout fixes
   (Re-appended 18 Aug 2026 after the v1.5.0 theme upload replaced style.css.
   Includes the adaptations made during apply: header fix mapped to the real
   .ss-bar markup, consent banner in S&S theme colours, restyled [ss_sitemap],
   footer-legal links row without the overlapping negative margin.)
   ============================================================================= */

@media (min-width: 1024px) {
  .site-header__inner,
  .site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: clamp(1rem, 2vw, 2.5rem);
  }
  .site-header .site-branding,
  .site-header__logo { flex: 0 0 auto; margin-inline: 0; }
  .site-header .site-branding img,
  .site-header__logo img { width: clamp(180px, 17vw, 264px); height: auto; }
  .main-navigation ul,
  .site-header nav > ul { display: flex; flex-wrap: nowrap; align-items: center; gap: clamp(0.75rem, 1.4vw, 1.75rem); }
  .main-navigation a,
  .site-header nav > ul > li > a { font-size: clamp(0.9375rem, 1.05vw, 1.0625rem); white-space: nowrap; letter-spacing: 0; }
  .site-header .btn--quote,
  .site-header .wp-block-button__link { white-space: nowrap; flex: 0 0 auto; }
}

/* --- 1b. HEADER FIX MAPPED TO ACTUAL THEME MARKUP -----------------------------
   Block theme: header.wp-block-group > .ss-bar with a.ss-brand + nav.ss-nav.
   On subpages the constrained layout caps .ss-bar at the 760px content width,
   so the 262px logo + nav cannot fit: the nav wraps and the bar re-centres.
   Fix: full 1200px design width everywhere, one nav row above the breakpoint. */
@media (min-width: 901px) {
  header.wp-block-group .ss-bar,
  header .ss-bar {
    max-width: 1200px;
    width: 100%;
    flex-wrap: nowrap;
    justify-content: space-between;
  }
  header .ss-brand { flex: 0 1 auto; margin-inline: 0; min-width: 0; }
  header .ss-brand img { width: clamp(180px, 17vw, 262px); height: auto; }
  header .ss-nav {
    flex-wrap: nowrap;
    margin-left: auto;
    align-items: center;
    gap: clamp(0.7rem, 1.45vw, 1.375rem);
  }
  header .ss-nav a { white-space: nowrap; font-size: clamp(0.8125rem, 0.98vw, 0.9375rem); }
  header .ss-nav a.ss-quote { flex: 0 0 auto; }
}

/* --- 2. HORIZONTAL OVERFLOW (WCAG 1.4.10, must hold at 320px) --- */
html, body { overflow-x: clip; }
*, *::before, *::after { box-sizing: border-box; }
/* --- BODY COPY MUST NOT AUTO-HYPHENATE (2026-08-20) ----------------------
   Decided by Harpreet: a broken word looks like a defect, a ragged edge looks
   like typography. hyphens:auto broke 189 words across 50 of the 53 published
   pages, including "straight an-swer", "in-dependent insurance brokerage",
   "arrange in-surance" and "can inval-idate".
   Headings already opted out in pages.css on 17 August; that override is now
   redundant but harmless and is left in place. dd/td/th are included because
   they sit in this same rule and narrow table cells are exactly where
   auto-hyphenation would reappear. overflow-wrap:break-word is KEPT, so a long
   unbreakable string still cannot cause horizontal overflow (WCAG 1.4.10). */
p, li, dd, td, th, h1, h2, h3, h4, .ss-form label {
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: manual;
}
/* (2026-08-17) removed: .full-bleed, .alignfull { width:100%; max-width:100% }
   It overrode the block theme’s own alignfull/full-bleed breakout. Media caps are
   handled by the img/svg/video/iframe/table rule immediately below. */
img, svg, video, iframe, table { max-width: 100%; height: auto; }
.entry-content table { display: block; overflow-x: auto; }

/* --- 3. FORMS --- */
.ss-form input,
.ss-form select,
.ss-form textarea,
input[type="text"], input[type="email"], input[type="tel"],
input[type="number"], input[type="search"], select, textarea {
  font-size: max(16px, 1rem);
  line-height: 1.4;
  min-height: 44px;
  padding: 0.6em 0.75em;
}
textarea { min-height: 7rem; }
.ss-form input[type="checkbox"],
.ss-form input[type="radio"] {
  min-width: 24px; min-height: 24px; width: 24px; height: 24px;
  flex: 0 0 auto; margin-top: 0.15em; accent-color: #1a6fb5;
}
/* 2026-08-18: ".ss-form .consent," removed from the selector below. .consent is
   the block WRAPPER holding the checkbox label plus the .fine legal text, so
   display:flex laid the mono legal text out as a second column (at 390px:
   label 123px, .fine 173px; at 1362px: 263px / 371px). forms.css L46 already
   flexes ".consent label", which is what this rule was reaching for. */
.ss-form label:has(input[type="checkbox"]) {
  display: flex; align-items: flex-start; gap: 0.75rem; cursor: pointer; padding: 0.5rem 0;
}

/* --- 3b. CARD-STYLE RADIO OPTIONS: selected ≡ brand blue, not red --- */
.ss-form .option-card,
.ss-form label:has(input[type="radio"]) {
  display: flex; align-items: flex-start; gap: .85rem;
  padding: 1rem 1.15rem;
  border: 1px solid rgba(16,36,54,.18);
  border-radius: 6px;
  margin-bottom: .6rem;
  background: #fff;
  cursor: pointer;
  transition: border-color .12s, background-color .12s, box-shadow .12s;
}
.ss-form .option-card:hover,
.ss-form label:has(input[type="radio"]):hover {
  border-color: rgba(26,111,181,.55);
  background: #fbfdff;
}
.ss-form .option-card:has(input:checked),
.ss-form label:has(input[type="radio"]:checked) {
  border-color: #1a6fb5;
  background: #f2f8fd;
  box-shadow: inset 0 0 0 1px #1a6fb5;
}
.ss-form .option-card input[type="radio"],
.ss-form label:has(input[type="radio"]) input[type="radio"] {
  accent-color: #1a6fb5;
  margin-top: .15rem;
}
.ss-form .option-card:has(input:focus-visible),
.ss-form label:has(input[type="radio"]:focus-visible) {
  outline: 3px solid #1a6fb5;
  outline-offset: 2px;
}
@media (forced-colors: active) {
  .ss-form .option-card:has(input:checked),
  .ss-form label:has(input[type="radio"]:checked) { border: 2px solid Highlight; }
}
.ss-form [aria-invalid="true"] { border-color: #b3261e; border-width: 2px; }
.ss-form .field-error::before { content: "⚠ "; font-weight: 700; }
.ss-form .field-error { color: #8c1d18; font-weight: 600; }

/* --- 4. TAP TARGETS (44px, audience skews older) ---
   SCOPED 2026-08-21, same reasoning as ss-mobile-layer/assets/mobile.css 4.
   a[href^="tel:"] used to sit in this list, so it forced display:inline-block
   AND line-height:44px on every phone link on the site, at every width. That
   is what .ss-panel__tel lost to - the panel s phone button rendered 158px
   wide inside a 360px panel until the override was scoped to (0,2,0).

   The 44px FLOOR still applies to every tel: link. The DISPLAY coercion now
   applies only where the link carries no class of its own, so a component
   that names its phone link owns its own layout. :where() carries the
   exclusion, so the specificity stays (0,1,1) - unchanged.

   Measured across all 53 pages before writing: 558 tel: links, 17 shapes,
   seven pages at 390 / 641 / 901 / 1440. Nothing falls below 44px. --- */
.site-footer a,
.branch-strip a,
.breadcrumb a,
nav a {
  display: inline-block;
  min-height: 44px;
  line-height: 44px;
}
a[href^="tel:"] { min-height: 44px; }
a[href^="tel:"]:where(:not([class])) { display: inline-block; line-height: 44px; }
.site-footer li + li { margin-top: 0.25rem; }

/* --- 5. FOCUS VISIBILITY (WCAG 2.4.7) --- */
:focus-visible { outline: 3px solid #1a6fb5; outline-offset: 2px; border-radius: 2px; }
.section--dark :focus-visible,
.site-footer--dark :focus-visible,
[class*="bg-dark"] :focus-visible { outline-color: #ffffff; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 1000; }
.skip-link:focus {
  left: 0; padding: 0.75rem 1.25rem;
  background: #ffffff; color: #10314f; font-weight: 700;
  outline: 3px solid #1a6fb5;
}
#main:focus { outline: none; }
:target, [id] { scroll-margin-top: 6rem; }

/* --- 6. MOBILE VIEWPORT UNITS AND NOTCHED PHONES --- */
.hero--full, .is-full-height { min-height: 100svh; }
@supports (height: 100dvh) { .hero--full, .is-full-height { min-height: 100dvh; } }
.site-header, .sticky-cta, .site-footer {
  padding-left: max(1rem, env(safe-area-inset-left));
  padding-right: max(1rem, env(safe-area-inset-right));
}
.sticky-cta { padding-bottom: max(0.75rem, env(safe-area-inset-bottom)); }

/* --- 7. USER PREFERENCES --- */
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
@media (forced-colors: active) {
  .btn, .wp-block-button__link, .ss-form button { border: 2px solid ButtonText; }
  :focus-visible { outline: 3px solid Highlight; }
  .icon--bg { forced-color-adjust: none; }
}
:root { color-scheme: light; }

/* --- 8. TEXT SPACING RESILIENCE (WCAG 1.4.12) --- */
.card, .stat, .facts > div, .grid > * { height: auto; min-height: 0; }
h1, h2, h3 { line-height: 1.2; padding-bottom: 0.05em; }

/* -----------------------------------------------------------------------------
   9. HTML SITEMAP  [ss_sitemap] — styled to match the S&S theme
      (ink #0E1418 · water #1B6FA8 · sky #2FA2DC · stone #F1F0EC · line #DDDCD7)
----------------------------------------------------------------------------- */
.ss-sitemap {
  width: min(1100px, calc(100vw - 3rem));
  max-width: none;
  margin-left: calc((100% - min(1100px, calc(100vw - 3rem))) / 2) !important;
  margin-right: 0 !important;
  padding: 1.5rem 0 3rem;
}
.ss-sitemap__title {
  font-family: var(--mono, monospace);
  font-size: 0.8125rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #1B6FA8;
  margin: 0 0 1.75rem;
  font-weight: 700;
}
.ss-sitemap__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  align-items: start;
}
.ss-sitemap__col {
  background: #F1F0EC;
  border: 1px solid #DDDCD7;
  border-radius: 10px;
  padding: 1.5rem 1.5rem 1.25rem;
}
.ss-sitemap__heading {
  font-size: 1rem;
  margin: 0 0 .75rem;
  font-weight: 700;
  color: #0E1418;
  padding-left: .75rem;
  border-left: 3px solid #1B6FA8;
  line-height: 1.3;
}
.ss-sitemap__heading a { color: inherit; text-decoration: none; }
.ss-sitemap__heading a:hover,
.ss-sitemap__heading a:focus-visible { color: #1B6FA8; text-decoration: underline; }
.ss-sitemap__heading + .ss-sitemap__list { margin-bottom: 1.5rem; }
.ss-sitemap__list:last-child { margin-bottom: 0; }
.ss-sitemap__list { list-style: none; margin: 0; padding: 0; }
.ss-sitemap__list li + li { border-top: 1px solid rgba(221,220,215,.7); }
.ss-sitemap__list a {
  display: block;
  min-height: 0;
  line-height: 1.45;
  padding: .5rem .25rem .5rem 0;
  font-size: .9375rem;
  color: #0E1418;
  opacity: .85;
  text-decoration: none;
  transition: color .12s, opacity .12s, padding-left .12s;
}
.ss-sitemap__list a:hover,
.ss-sitemap__list a:focus-visible {
  opacity: 1;
  color: #1B6FA8;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding-left: .25rem;
}
@media (max-width: 599px) {
  .ss-sitemap { width: auto; margin-left: 0 !important; margin-right: 0 !important; }
  .ss-sitemap__grid { grid-template-columns: 1fr; gap: 1rem; }
  .ss-sitemap__list a { padding: .65rem .25rem .65rem 0; }
}

/* -----------------------------------------------------------------------------
   10. COOKIE CONSENT BANNER — S&S theme colours.
   Accept and Decline are deliberately the SAME SIZE and SAME SHAPE (BC PIPA:
   consent must be a real choice). Do not restyle Decline to be less prominent.
----------------------------------------------------------------------------- */
.ss-consent {
  position: fixed;
  z-index: 9999;
  left: 1rem;
  right: 1rem;
  bottom: max(1rem, env(safe-area-inset-bottom));
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.ss-consent[hidden] { display: none; }
.ss-consent__box {
  pointer-events: auto;
  position: relative;
  max-width: 34rem;
  width: 100%;
  background: #0E1418;            /* theme ink */
  color: #F1F0EC;                 /* theme stone */
  border-radius: 10px;
  padding: 1.5rem 1.5rem 1.25rem;
  box-shadow: 0 10px 40px rgba(0,0,0,.35);
  font-size: .9375rem;
  line-height: 1.55;
}
.ss-consent__close {
  position: absolute;
  top: .5rem;
  right: .5rem;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 2px solid transparent;
  color: #F1F0EC;
  font-size: 1rem;
  cursor: pointer;
  border-radius: 6px;
}
.ss-consent__close:hover { background: rgba(255,255,255,.1); }
.ss-consent__title { margin: 0 0 .6rem; font-size: 1.0625rem; font-weight: 700; color: #fff; }
.ss-consent__text { margin: 0 0 1.15rem; color: #C9CFD3; }
.ss-consent__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.ss-consent__btn {
  flex: 0 0 auto;
  min-width: 7.5rem;
  min-height: 44px;
  padding: .65rem 1.5rem;
  border-radius: 6px;
  border: 2px solid transparent;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.ss-consent__btn--accept  { background: #1B6FA8; color: #ffffff; }   /* theme water */
.ss-consent__btn--decline { background: #FFFFFF; color: #0E1418; }   /* same geometry */
.ss-consent__btn:hover    { filter: brightness(1.08); }
.ss-consent__link {
  margin-left: auto;
  min-height: 44px;
  padding: .5rem .25rem;
  background: none;
  border: 0;
  color: #F1F0EC;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.ss-consent__settings {
  margin-top: 1.15rem;
  padding-top: 1.15rem;
  border-top: 1px solid rgba(255,255,255,.18);
  display: grid;
  gap: .9rem;
}
.ss-consent__settings[hidden] { display: none; }
.ss-consent__setting {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  margin: 0;
  color: #C9CFD3;
  font-size: .875rem;
}
.ss-consent__setting input[type="checkbox"] {
  width: 24px; height: 24px;
  min-width: 24px; min-height: 24px;
  margin-top: .1rem;
  accent-color: #2FA2DC;          /* theme sky */
}
.ss-consent__policy { margin: 1rem 0 0; }
.ss-consent__policy a { color: #2FA2DC; }   /* theme sky */
.ss-consent :focus-visible { outline: 3px solid #ffffff; outline-offset: 2px; }
@media (max-width: 480px) {
  .ss-consent__box { padding: 1.25rem 1.1rem 1rem; }
  .ss-consent__btn { flex: 1 1 auto; }
  .ss-consent__link { margin-left: 0; width: 100%; text-align: left; }
}

/* --- 11. FOOTER LEGAL BAR  [ss_footer_legal] --- */
.ss-footer-legal {
  padding: 1.75rem 0 2.25rem;
  border-top: 1px solid rgba(0,0,0,.1);
  font-size: .875rem;
  line-height: 1.65;
}
.ss-footer-legal__copy { margin: 0 0 .85rem; font-weight: 600; }
.ss-footer-legal__disclaimer { margin: 0 0 1.25rem; max-width: 68ch; opacity: .78; }
.ss-footer-legal__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem .75rem;
  margin-top: 1rem;
  padding-top: .25rem;
}
.ss-footer-legal__links a { min-height: 44px; line-height: 44px; text-decoration: none; opacity: .85; }
.ss-footer-legal__links a:hover,
.ss-footer-legal__links a:focus-visible { opacity: 1; text-decoration: underline; }
.ss-footer-legal__links span { opacity: .4; }
@media (max-width: 767px) {
  .ss-footer-legal__links { gap: 0 .75rem; }
}

/* --- 12. PRINT --- */
@media print {
  .site-header, .site-footer, .ss-sitemap, .sticky-cta, .ss-form, nav { display: none !important; }
  body { font-size: 12pt; color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10pt; }
}


/* --- 13. FULL-WIDTH PAGE BANDS — alignment fix (2026-08-17) ---------------------
   The page templates render post content in a constrained layout, so theme.json
   contentSize (760px) was capping every hand-authored band on the bespoke pages:
   the stone/blue bands stopped at 760px and the design’s inner .wrap (1180px)
   could never reach its intended width, which left the reading column narrow and
   visually offset against the 1200px header bar.
   Release ONLY the post-content container and the band wrappers that contain a
   .wrap (the design’s own centring device). Anything else inside post content
   keeps the 760px reading measure. No global resets touched. */
main > .wp-block-post-content.is-layout-constrained { max-width: none; }
main > .wp-block-post-content.is-layout-constrained > :is(section, div, aside, article):has(.wrap) { max-width: none; }


/* --- 14. MOBILE GRID COLLAPSE — re-assert the theme’s own breakpoints (2026-08-17) ---
   assets/pages.css ships responsive grid rules (unscoped, e.g. "@media (max-width:860px)
   .steps { grid-template-columns: 1fr }") but it also ships per-page copies of the DESKTOP
   rules namespaced "body.ss-src-*". The namespaced copies are more specific, so on every
   bespoke page the desktop column count survived below the breakpoint: 3- and 4-column
   bands stayed side by side at 390px, giving one-word-per-line text and columns clipped
   off the right edge (html/body use overflow-x:clip, so it was cut off, not scrollable).
   The rules below are the theme’s OWN values at the theme’s OWN breakpoints, re-asserted
   one level more specific (body main .entry-content ...) so they win — note the
   namespaced copies score body+2 classes, so the extra type selector is what breaks the tie. No new design decisions,
   no !important, desktop unaffected. */
@media (max-width:980px) {
  body main .entry-content .sits,
  body main .entry-content .grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width:900px) {
  body main .entry-content .start .wrap,
  body main .entry-content .cov,
  body main .entry-content .blueband .g,
  body main .entry-content .darkband .g,
  body main .entry-content .steps4,
  body main .entry-content .rgrid,
  body main .entry-content .gap .g,
  body main .entry-content .hsteps,
  body main .entry-content .cgrid,
  body main .entry-content .ccdc .g,
  body main .entry-content .pgrid,
  body main .entry-content .split,
  body main .entry-content .port .g,
  body main .entry-content .steps,
  body main .entry-content .tgrid,
  body main .entry-content .why .g,
  body main .entry-content .card,
  body main .entry-content .sgrid,
  body main .entry-content .wgrid,
  body main .entry-content .ogrid,
  body main .entry-content .calls,
  body main .entry-content .dogrid,
  body main .entry-content .lgrid,
  body main .entry-content .promise .g,
  body main .entry-content .vgrid,
  body main .entry-content .bgrid,
  body main .entry-content .three,
  body main .entry-content .rflow,
  body main .entry-content .screens,
  body main .entry-content .life .g { grid-template-columns: 1fr; }
  body main .entry-content .tlist,
  body main .entry-content .wlist { grid-template-columns: 1fr 1fr; }
}
@media (max-width:860px) {
  body main .entry-content .steps,
  body main .entry-content .stuck .wrap,
  body main .entry-content .reads,
  body main .entry-content .revs,
  body main .entry-content .branches { grid-template-columns: 1fr; }
}
@media (max-width:820px) {
  body main .entry-content .quick { grid-template-columns: 1fr; }
}
@media (max-width:760px) {
  body main .entry-content .doors { grid-template-columns: 1fr; }
}
@media (max-width:640px) {
  body main .entry-content .opts,
  body main .entry-content .row2 { grid-template-columns: 1fr; }
}
@media (max-width:600px) {
  body main .entry-content .sits { grid-template-columns: 1fr; }
}
@media (max-width:560px) {
  body main .entry-content .grid { grid-template-columns: 1fr; }
}
@media (max-width:520px) {
  body main .entry-content .form .row { grid-template-columns: 1fr; }
}

/* .risk and .frow are the only multi-column components in pages.css with no responsive
   rule of their own; collapse them with the same intent. */
@media (max-width:600px) {
  body main .entry-content .risk,
  body main .entry-content .frow { grid-template-columns: 1fr; }
}


/* --- 15. HAND-AUTHORED INLINE GRIDS ON MOBILE (2026-08-17) ---------------------
   18 of the bespoke pages carry a div whose grid is declared in an inline style
   attribute in the page HTML (display:grid;grid-template-columns:repeat(3,1fr)),
   which no stylesheet selector can outrank. Below 600px those columns measured
   99-116px — one word per line, and on some pages the third column was clipped by
   the overflow-x:clip in section 2. An inline style can only be beaten by
   !important, so it is confined to a mobile-only query and scoped to post content. */
@media (max-width: 600px) {
  body main .entry-content [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
}


/* --- 16. MOBILE MENU KEYBOARD OPERABILITY (WCAG 2.1.1) (2026-08-17) -------------
   Below 1000px the nav is a checkbox hack: input#ss-menu (display:none) + a
   label.ss-menu-b carrying role="button" tabindex="0". The label takes focus but a
   label cannot be activated from the keyboard, and the checkbox was unfocusable
   because display:none removes it from the tab order — so the mobile menu could not
   be opened without a pointer. Keeping the checkbox in the accessibility tree
   (visually hidden instead of display:none) restores Space activation and gives the
   label a visible focus ring. Pointer events stay with the label, so mouse and touch
   behaviour is unchanged. */
@media (max-width: 1000px) {
  header .ss-bar input.ss-menu-t,
  .ss-bar input.ss-menu-t {
    display: block;
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    opacity: 0;
    pointer-events: none;
  }
  .ss-bar input.ss-menu-t:focus + label.ss-menu-b,
  .ss-bar input.ss-menu-t:focus-visible + label.ss-menu-b {
    outline: 3px solid var(--sky, #2FA2DC);
    outline-offset: 2px;
  }
}

/* --- SITEMAP GRID - MASONRY (2026-08-20, PAGE ENDINGS run, Phase 3b) ------
   Replaces two earlier patches: the Q-6c "span 3" rule that lived here, and
   the Q-6f "span 2" rule for the one-link card that lived in pages.css 5b.
   Both widened a card to fill a cell. Neither fixed the real fault, which is
   that a CSS grid makes every card in a row share one row height, so the
   shortest card in a row leaves a hole the height of the tallest.

   MEASURED BEFORE, on the rendered page - grid height, and the dead space
   inside it:
     1440  grid 1103   "Declined & hard-to-place" 141px tall in a 537px row
                       = a 538 x 396 hole, plus 142px under "Personal
                       insurance" in row 1
     1024  grid 1393   237px hole under "Declined", and the whole third
                       column of the last row empty (309 x 493)
      901  grid 1475   141px card beside cards of 378 and 515
      900  grid 2001   "Business insurance" 1462px tall beside cards of 378
                       and 141 - two dead columns over 1000px tall
      390  grid 2738   single column, no holes, nothing wrong with it

   FIXED BY: dropping the grid on this one component and flowing the cards
   down CSS columns instead. Columns do not align rows, so a short card is
   followed by the next card in the same column and the only leftover space
   is at the FOOT of the shorter columns, which reads as the end of a list
   rather than as a hole in the middle of the page. Honest masonry.

   The oversized "Business insurance" card keeps the treatment it already
   had - it spans the full width and flows its own 26 links into sub-columns
   - because column-span:all is the multi-column equivalent of the grid span
   it replaces. The selector is unchanged and still content-driven:
   :has(li:nth-child(13)) means "a card whose list runs past twelve links",
   so it follows the content if sections are added, renamed or reordered,
   and stops applying by itself if Business insurance is ever split.

   columns:260px sets a MINIMUM column width and lets the browser pick the
   count, so there is no per-breakpoint column arithmetic to get wrong:
   3 columns from 901 up, 2 from 600 to 900. The existing single-column
   rule below 600 is untouched, and so is 390.

   MEASURED AFTER, same method, same page - grid height, then the height of
   each flowed column:
     1440  1103 ->  995   columns 521 / 450 / 427, no hole
     1024  1393 -> 1040   columns 543 / 493 / 471, no hole
      901  1475 -> 1100   columns 543 / 515 / 493, no hole
      900  2001 -> 1172
      800  1974 -> 1488
      700  2300 -> 1666
      600  2518 -> 1815
      599  2716 -> 2716   unchanged - the fence holds
      390  2738 -> 2738   unchanged

   .ss-sitemap__col exists on /sitemap/ and nowhere else - verified across
   all 53 published pages. :has() support confirmed in the rendering browser;
   without it the two :has() rules are dropped, the cards still flow down the
   columns, and the page degrades to a plain multi-column list rather than to
   the fault this replaces.
   --------------------------------------------------------------------------- */
@media (min-width: 600px) {
  .ss-sitemap__grid { display: block; columns: 260px; column-gap: 1.5rem; }
  .ss-sitemap__col { break-inside: avoid; margin: 0 0 1.5rem; }
  .ss-sitemap__col:has(li:nth-child(13)) { column-span: all; }
  .ss-sitemap__col:has(li:nth-child(13)) .ss-sitemap__list { columns: 2; column-gap: 1.5rem; }
  .ss-sitemap__list li { break-inside: avoid; }
}
@media (min-width: 901px) {
  .ss-sitemap__col:has(li:nth-child(13)) .ss-sitemap__list { columns: 3; }
}