/* SITE ADDITIONS (TASK B0, PHASE 2): the only place a site rule lives beside the vendored board (public/styles/board/, never
   edited: check-vendored-board.mjs). Every rule here says which ruling or invariant it serves. Loaded last on every page. */

/* Invariant (tech-builder skill, "Required global CSS"): the three root custom properties. The header island measures
   about 70 px tall at its widest (chrome.css .li-nav-in: .55rem padding + a 44 px control); --brand-accent is the ONE
   accent (DESIGN-SPEC section 6, bronze #B78B5B); --color-primary-rgb is navy #1D385B for the navy-tinted shadows. */
:root {
  --header-height: 70px;
  --brand-accent: #B78B5B;
  --color-primary-rgb: 29, 56, 91;
}
/* body { overflow-x: clip } is already the board's (chrome.css base), never hidden. */

/* Mobile header (TASK B0 step 5; tech-builder skill "Mobile header = minimal"): below 768 px the island shows the
   wordmark and the menu button only; the fixed mobile Call / Book bar (R-09) carries both actions. While the visitor
   scrolls down it tucks away and comes back on the way up (public/scripts/site/chrome.js toggles .header-hidden; never
   within 80 px of the top, never while the menu is open). Gated to mobile, so the desktop header never moves. */
@media (max-width: 767.98px) {
  .li-nav .li-nav-phone, .li-nav .li-nav-book { display: none; }
  .li-nav.header-hidden { transform: translateY(calc(-100% - var(--li-announce-h, 38px) - 24px)); }
}
@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
  .li-nav { transition: none; }
}

/* The live GoHighLevel host (R-08), used only once GHL_FORM_ID is set (src/data/booking.ts): the iframe fills the
   approved host; the box keeps the approved min-height (560, --booking-min-h). */
.li-booking-host--live { padding: 0; border-style: solid; overflow: hidden; }
.li-booking-host--live iframe { width: 100%; min-height: var(--booking-min-h); border: 0; border-radius: inherit; }

/* Home proof wall while named reviews wait on the attorney (Checkpoint C, IRV-14; src/data/reviews.ts namedCleared
   false): the approved band keeps its eyebrow and heading, and the rating constant (deep-linked to the GBP, the
   contract's proofFallback) becomes the panel's single statement. Set B tokens only (the navy band, gold stars,
   --cod text on navy, the team's radii and curves). */
[data-variant="B"] .li2-proof-fallback { margin-top: clamp(2rem, 4vw, 3.2rem); padding: clamp(1.6rem, 3vw, 2.6rem); border-radius: var(--r-xl);
  border: 1px solid var(--line-dark); background: rgba(239,227,206,.04); display: flex; flex-wrap: wrap; align-items: center;
  gap: 1rem 1.6rem; color: var(--cod); transition: border-color .35s var(--ease), background-color .35s var(--ease); }
[data-variant="B"] .li2-proof-fallback:hover { border-color: rgba(239,227,206,.36); background: rgba(239,227,206,.07); }
[data-variant="B"] .li2-proof-fallback-t { font-family: var(--f-d); font-size: var(--s-3); line-height: 1.1; flex: 1 1 16ch; }
[data-variant="B"] .li2-proof-fallback .li-stars svg { width: 22px; height: 22px; }
[data-variant="B"] .li2-proof-fallback-go { width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center;
  background: rgba(239,227,206,.12); color: var(--bronze); flex: none; transition: transform .45s var(--eout); }
[data-variant="B"] .li2-proof-fallback-go svg { width: 1.1rem; height: 1.1rem; }
[data-variant="B"] .li2-proof-fallback:hover .li2-proof-fallback-go { transform: translate(3px, -3px); }

/* Authority links ([R14]; ui/AuthorityLinks.astro): the writer's lead sentence with the cited source as an in-paragraph link
   that reads as a link at rest (tech-builder skill, interaction states). Body tokens of the board. */
.li-auth { margin-top: 1.1rem; font-size: .92rem; line-height: 1.7; color: var(--ink-72); max-width: 62ch; }
.li-auth a { color: var(--bronze-dk); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.li-auth a:hover { color: var(--ink); }
/* TASK-B5 (2026-10-17, a render probe of every authority slot with a test link): two slots sit on the navy bands, the hub's
   mission panel (hub-apart) and the home locations band (home-locations), where the ink-72 lead measured 1.0:1 (invisible).
   There the line takes the board's on-dark tokens: the lead in the dark-band prose colour (--mist, as .p1-prose--dark p), the
   link in bronze as the board's links on navy (.li-link--on-dark; DESIGN-SPEC "bronze on navy"), cream on hover. */
[data-variant="A"] .p1-mission .li-auth, [data-variant="B"].li2-loc .li-auth { color: var(--mist); }
[data-variant="A"] .p1-mission .li-auth a, [data-variant="B"].li2-loc .li-auth a { color: var(--bronze); }
[data-variant="A"] .p1-mission .li-auth a:hover, [data-variant="B"].li2-loc .li-auth a:hover { color: var(--cream); }
/* Five slots draw the line as a direct child of a two-column head | copy grid (from 1024px): the home why-us intro
   (.li1-intro), the home routing head (.r2a-top), the home condition-router head (.r2c-head), the hub / conditions-hub intro
   (.p1-hintro-grid) and the hub mission panel (.p1-mission). Auto-placed, the line fell into the HEAD column under the H2
   (measured 243px wide on the hub intro at 1440), away from the copy it cites. It sits under the copy, in the copy's column;
   where the grid has a row gap, the gap stands in for the line's top margin. One column below 1024px: unchanged. */
@media (min-width: 1024px) {
  [data-variant="A"] .li1-intro > .li-auth, [data-variant="A2"] .r2a-top > .li-auth, [data-variant="C2"] .r2c-head > .li-auth { grid-column: -2 / -1; }
  [data-variant="A"] .p1-hintro-grid > .li-auth, [data-variant="A"] .p1-mission > .li-auth { grid-column: -2 / -1; margin-top: 0; }
}
/* Client Resources: under the six bezel cells the line needs the card grid's own breathing room, not a paragraph margin. */
[data-variant="A"] .p2-res-bento + .li-auth { margin-top: clamp(1.6rem, 2.4vw, 2.4rem); }

/* [R15] Prose re-scope (scaffold README section 10): the board styles the condition-router intro as `.r2c-head > p`;
   <Prose> renders that paragraph inside its wrapper, so the same declarations are restated one level down (C2.css values). */
[data-variant="C2"] .r2c-head > .li-prose > p { color: var(--ink-72); line-height: 1.75; max-width: 60ch; }
@media (max-width: 1023.98px) { [data-variant="C2"] .r2c-head > .li-prose { margin-top: 1.2rem; } }

/* [R15] PlanSteps (ui/PlanSteps.astro, shared): <Prose> wraps a step body in its own element, so the board's
   `.p1-plan-b { grid-column: 2 }` on the paragraph cannot reach the grid; the wrapper takes the second column instead
   (the same fix TASK-B1 made in b1.css for the care pages, applied here so every page type that uses PlanSteps gets it;
   TASK-B3 2026-10-17). */
[data-variant="A"] .li-plan-step > div { grid-column: 2; }

/* Template census D1 (TASK-B4, 2026-10-17): an in-paragraph link must read as a link at rest, never as body text and never by
   colour alone (tech-builder skill, interaction states). The home why-us intro is a <Prose> slot whose link (to /services/)
   inherited the paragraph's ink-72 with no underline; it takes the approved body-link cue, the board's .p1-inlink treatment
   (ink text, a bronze underline at rest, bronze-dk on hover; about / hub / service / condition p1.css). */
[data-variant="A"] .li1-intro-body a:not([class]) { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(183,139,91,.7);
  text-decoration-thickness: 1px; text-underline-offset: .22em; transition: color .3s var(--ease), text-decoration-color .3s var(--ease); }
[data-variant="A"] .li1-intro-body a:not([class]):hover { color: var(--bronze-dk); text-decoration-color: var(--bronze-dk); }
/* The same cue as a floor for every other writer link in a paragraph of <main> (a <Prose> [label](/path/) has no class): the
   underline at rest, colour left to the slot. Specificity (0,0,2) on purpose, so it only beats the board's reset
   `a { text-decoration: none }`; any slot with its own link rule (a class) keeps its approved treatment. */
main :where(p) a:where([href]:not([class])) { text-decoration-line: underline; text-decoration-color: rgba(183,139,91,.7);
  text-decoration-thickness: 1px; text-underline-offset: .22em; }
/* Template census D7 (TASK-B5, 2026-10-17): a display link keeps its own approved cue and never takes the floor's underline on
   top of it. The Contact page's big phone number is drawn with the board's pale rule (contact.css `.p2-ct-big a` border-bottom,
   bronze on hover); the floor added a bronze text underline just above that rule, so the number sat on two lines. */
[data-variant="A"] .p2-ct-big a { text-decoration: none; }