/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.2
 Text Domain:  bricks
*/

/* ============================================================
   Clemente Worcester — Brand CSS

   Loads via the standard Bricks child theme stylesheet, so it
   lands AFTER `bricks-frontend-css` but BEFORE the per-post
   Bricks CSS files. ACSS's `automatic-bricks.css` enqueues last
   in the chain — for any token override that needs to beat
   ACSS-consumed rules, override the TOKEN at `:root` (ACSS's
   own rules will resolve to the new value) rather than fighting
   the selector cascade. See `docs/stack-gotchas.md` →
   "ACSS — automatic-bricks.css enqueues AFTER child theme."

   Brand source of truth: assets/brand-guide.html
   Fonts: handled by Bricks Custom Fonts (Fraunces + Inter
   self-hosted, bound into the "MPD" Bricks theme style).
   ============================================================ */

:root {
  /* --- Custom tokens not in the ACSS palette -------------------- */
  /* Ink web accent: single token, brand spec FORBIDS expanding into a scale. */
  --ink:           #1C2331;
  --ink-deep:      #0F1520;  /* Rare — hover on ink-outlined elements only */

  /* Red Soft alias for clarity — maps to ACSS --primary-ultra-light. */
  --red-soft:      var(--primary-ultra-light);

  /* Brand-name aliases for the configured ACSS scale (readable in source).
     Canonical values live in ACSS; these are convenience pointers. */
  --paper:         var(--base);              /* #FAF7F2 */
  --paper-2:       var(--base-light);        /* #F2EEE6 */
  --rule:          var(--base-semi-light);   /* #D9D2C3 */
  --ink-body:      var(--neutral);           /* #1A1A1A */
  --ink-2:         var(--neutral-semi-dark); /* #3D3D3D */
  --ink-3:         var(--neutral-semi-light);/* #6B6B6B */
  --ink-4:         var(--neutral-light);     /* #9A9A9A */

  /* --- Variable font axis tokens (Fraunces SOFT + WONK) --------- */
  --soft-display:  60;
  --soft-heading:  40;
  --soft-italic:   100;
  --soft-lede:     80;
  --wonk-italic:   1;

  /* --- Brand type scale ---------------------------------------- */
  /* ACSS emits clamp() values inside @supports that override the
     rem fallbacks in :root (per stack-gotchas: clamp-in-@supports).
     We override the tokens here; ACSS's own consuming rules will
     resolve to the new clamp() values. Brand spec:
       Display 44–88px, H1 32–52px, H2 32–52px, H3 20–26px.
     Slopes calibrated for viewport 320–1280px. */
  --display: clamp(2.75rem, 7vw,    5.5rem);     /* 44px → 88px */
  --h1:      clamp(2rem,    4.5vw,  3.25rem);    /* 32px → 52px */
  --h2:      clamp(2rem,    4.5vw,  3.25rem);    /* 32px → 52px */
  --h3:      clamp(1.25rem, 2.2vw,  1.625rem);   /* 20px → 26px */

  /* --- Focus indicator (override only on dark surfaces below) --- */
  --focus-color: var(--primary);

  /* --- Sticky-header clearance for in-page anchor links ---------
     Sized to cover header template (post 23) — utility bar +
     main header on desktop, main header only ≤991px (utility bar
     is hidden at tablet_portrait). Applied via section[id] rule
     below. Override at the min-width: 992px breakpoint adds the
     utility-bar's footprint back when it's visible. Tune by
     measuring rendered header height in DevTools at each bp. */
  --header-h: 96px;
}
@media (min-width: 992px) {
  :root { --header-h: 128px; }
}

/* ============================================================
   Body baseline
   Paper background, Ink Body text, Inter 17px 1.65 line-height.
   ============================================================ */
body {
  background: var(--base);
  color: var(--neutral);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ============================================================
   Headings — variable font axis settings
   ACSS sets family + weight + size; this layer adds the SOFT
   (and WONK on italics) axes that ACSS does not emit.
   Requires the uploaded Fraunces .woff2 to be the VARIABLE
   build with SOFT + WONK axes registered (Google Fonts' Fraunces
   variable build has both as of 2022+).
   ============================================================ */
h1, h2, h3, h4, h5, h6,
.brxe-heading {
  font-variation-settings: "SOFT" var(--soft-heading), "WONK" 0;
  text-wrap: balance;
}

/* Italic emphasis inside any heading: bumps SOFT + flips WONK glyph variant.
   Matches the brand-guide's hero treatment ("...changes <em>everything.</em>"). */
h1 em, h2 em, h3 em, h4 em, h5 em, h6 em,
.display em,
.italic-accent,
.pull-quote {
  font-style: italic;
  font-variation-settings: "SOFT" var(--soft-italic), "WONK" var(--wonk-italic);
  color: var(--primary);

}

/* ============================================================
   .display — hero display heading (88px max)
   Used as: <h1 class="display">Six credits that change <em>everything.</em></h1>
   ============================================================ */
/* Typed on the Bricks Global Class `display` (id bisnna): font-family,
   weight, size, line-height, letter-spacing, colour, margin. Edit there.
   Only the two properties Bricks has no control for remain here. */
.display {
  font-variation-settings: "SOFT" var(--soft-display), "WONK" 0;
  text-wrap: balance;
}

/* ============================================================
   .eyebrow — small uppercase label
   Inter 600 / 12px / 0.18em letterspace / red, with leading rule.
   ============================================================ */
/* The base .eyebrow rule now lives as TYPED settings on the Bricks Global
   Class `eyebrow` (id vtuiml) — font/size/weight/letter-spacing/transform/
   colour/line-height via _typography, plus _display, _alignItems, _gap and
   _margin. Edit it in the builder's Class panel, NOT here. Migrated
   2026-07-25. Only the rules below remain, because no typed control can
   express them: a pseudo-element, and the dark-surface context overrides
   further down this file. */
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 1.75rem;
  height: 1px;
  background: currentColor;
}
/* Hide leading rule when not wanted: <span class="eyebrow eyebrow--bare">…</span> */
.eyebrow--bare::before {
  display: none;
}

/* ============================================================
   .lede — lead paragraph after a section heading
   Fraunces 300 / 20–26px / Ink 2 / SOFT 80
   ============================================================ */
/* Typed on the Bricks Global Class `lede` (id wzqdly): font-family, weight,
   size, line-height, colour, max-width. Edit there. Only the untypeable
   properties remain here, plus the `.lede em` descendant rule below. */
.lede {
  font-variation-settings: "SOFT" var(--soft-lede), "WONK" 0;
  text-wrap: pretty;
}
.lede em {
  font-style: italic;
  font-variation-settings: "SOFT" var(--soft-italic), "WONK" var(--wonk-italic);
}

/* A .lede bound to RICH content (wpautop'd dynamic data — {post_content},
   {archive_description}) renders <div class="lede"><p>…</p></div>, because the
   element must use tag:div or the wrapped <p> nests inside a <p> and browsers
   auto-close it, leaving an empty .lede and an unstyled sibling paragraph.
   Family, size and colour inherit across that hop; LINE-HEIGHT does not — a
   framework `p` rule overrides the inherited value, so the paragraph renders at
   ~1.19 instead of the lede's 1.45 and reads visibly tighter on any lede that
   wraps. Affects Donate (post 186) and the News term archive (108) today.
   Not typeable on the Global Class: it targets a rendered descendant. */
.lede > p {
  line-height: inherit;
}

/* ============================================================
   DEFAULT TEXT LINK  (Mike, 2026-08-23 — REVISED same day)
   ------------------------------------------------------------
   Ink text with a quiet 1px Rule-coloured underline at a 6px
   offset; on hover both text and underline go Ink Deep.

   REVISION (Mike): this replaces the earlier same-day treatment
   (body-coloured text, 2px Clemente Red underline, red hover).
   The new default is the treatment built for the Home Partners
   list — promoted to the site default so every page/post copy
   link reads the same. Red is no longer the link cue.

   Scope is unchanged: page and post copy links only. Header,
   footer and offcanvas remain permanently out of scope (Mike).

   ⚠️⚠️ ACCESSIBILITY — A KNOWN, ACCEPTED EXCEPTION. READ THIS.
   This treatment does NOT meet WCAG 1.4.1 (Use of Color), and the
   numbers are not close:
   - Link text (--ink #1C2331) vs body text (--neutral #1A1A1A) is
     1.11:1. Colour does NO identifying work — same as the previous
     treatment, and fine on its own.
   - But the underline is therefore the SOLE cue, and
     --base-semi-light #D9D2C4 on Paper #FAF7F2 is 1.41:1
     (1.29:1 on Paper 2, 1.50:1 on White). 1.4.11 wants 3:1 for a
     cue carrying meaning. The previous red underline was 5.91:1.
   - Net effect: in body copy a link is very close to
     indistinguishable from surrounding text.
   This was raised with Mike with these figures before the change
   and the treatment was chosen anyway — it is a deliberate design
   call, not an oversight. If it is ever revisited, the whole fix
   is ONE token on the two `text-decoration-color` declarations
   below: --neutral-semi-light (#6B6B6B) is 4.99:1 on Paper and
   keeps the quiet neutral character; --primary returns to 5.91:1.
   ⚠️ The site publishes an Accessibility statement page. Keep that
   page honest about this if it makes specific WCAG claims.

   Link text vs background is unaffected and excellent: Ink on
   Paper 14.73:1, Ink Deep hover 17.11:1. Focus is ACSS's own ring.

   SPECIFICITY — deliberate and load-bearing:
   Bricks ships `:where(a){color:currentcolor;text-decoration:none}`
   at (0,0,0). These rules sit at (0,0,1): high enough to beat that
   baseline, low enough that ANY Bricks Global Class (0,1,0) still
   overrides them. Hence `:where()` around every class/id part —
   never raise these, or per-element link styling stops working.

   SCOPE — deliberately NARROW, and the narrowness was earned:
   (a) links inside a PROSE CONTAINER — `.post-content-text` (the
       canonical prose class: News single, Story single, all four
       legal pages) and `.lede`; and
   (b) the Bricks text-link element itself, which is what you place
       when you mean "a text link".
   All inside #brx-content, so header, footer and offcanvas are
   excluded (Mike: special cases).

   ⚠️ Do NOT widen this to bare `p`/`li` in content. It was written
   that way first and it over-reached immediately: a news card's
   category label is `<p class="blog-archive__cat"><a>` — a bare
   anchor in a paragraph — and every card sprouted a red underline
   on a meta label. Card TITLE links happened to be safe only
   because they set `text-decoration:none` themselves. Meta labels,
   chips, breadcrumbs and pagination all live in `p`/`li` too.
   If a copy link somewhere is missed, give it the text-link element
   or a class — that failure is visible and local; the other one is
   silent and sitewide.
   ============================================================ */
/* --- 1. Colour + decoration: override the TOKENS ACSS consumes ---
   ACSS ships `body a:where(:not([class*="btn--"]))` at (0,0,2),
   consuming --link-color / --link-color-hover / --link-decoration /
   --link-decoration-hover. Fighting that selector is the wrong move
   (01: "override what a rule consumes, not the rule"). Setting the
   tokens on the CONTAINER lets ACSS's own rule paint our values, and
   because custom properties inherit, descendant links pick them up.
   A first attempt DID fight the selector at (0,0,1) and lost silently:
   links rendered ACSS red with no underline while the CSS looked
   correct on disk and in the delivered file. */
:where(#brx-content) :where(.post-content-text, .lede),
:where(#brx-content) a:where(.brxe-text-link) {
  --link-color: var(--ink);
  --link-color-hover: var(--ink-deep);
  --link-decoration: underline;
  --link-decoration-hover: underline;   /* underline STAYS on hover */
}

/* --- 2. The three properties ACSS does NOT tokenise ---
   ACSS emits `text-decoration` as a SHORTHAND, which resets
   decoration-color to currentcolor — so these longhands must beat its
   (0,0,2). `body main a` is (0,0,3): one step above ACSS, still below
   any Global Class (0,1,0), so per-element link styling keeps working.
   Never raise this further. */
body main :where(.post-content-text, .lede) a,
body main a:where(.brxe-text-link) {
  text-decoration-color: var(--base-semi-light);
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  transition: text-decoration-color .15s ease;
}

body main :where(.post-content-text, .lede) a:hover,
body main a:where(.brxe-text-link):hover {
  text-decoration-color: var(--ink-deep);
}

/* --- 3. Dark surfaces ---
   Ink text on an Ink field is invisible, so text AND rule flip to Paper;
   hover shifts to Paper 2, a tone step rather than a hue. Thickness and
   offset inherit from part 2 (1px / 6px) — only the colours change here.
   NOTE: dark surfaces are the accessible case. A Paper underline on Ink
   is ~15:1, so the 1.4.1 exception documented above applies to LIGHT
   surfaces only. Do not "fix" this block to match the light one. */
:where(.bg--dark, .bg--ultra-dark, .color-scheme--dark),
:where(.bg--dark, .bg--ultra-dark, .color-scheme--dark) a:where(.brxe-text-link) {
  --link-color: var(--base);
  --link-color-hover: var(--base-light);
}

body main :where(.bg--dark, .bg--ultra-dark, .color-scheme--dark) :where(.post-content-text, .lede) a,
body main :where(.bg--dark, .bg--ultra-dark, .color-scheme--dark) a:where(.brxe-text-link) {
  text-decoration-color: var(--base);
}

body main :where(.bg--dark, .bg--ultra-dark, .color-scheme--dark) :where(.post-content-text, .lede) a:hover,
body main :where(.bg--dark, .bg--ultra-dark, .color-scheme--dark) a:where(.brxe-text-link):hover {
  text-decoration-color: var(--base-light);
}

/* ============================================================
   Dark-surface adaptations
   ACSS ships .bg--dark / .bg--ultra-dark / .color-scheme--dark
   wrappers; brand contrast rules require flipping eyebrow,
   lede, link, and focus colors to remain WCAG AA on dark.
   ============================================================ */
.bg--dark .eyebrow,
.bg--ultra-dark .eyebrow,
.color-scheme--dark .eyebrow {
  color: var(--base);                /* Paper on dark — passes AA */
}

.bg--dark .lede,
.bg--ultra-dark .lede,
.color-scheme--dark .lede {
  color: var(--base-light);          /* Paper 2 — softer on dark */
}

.bg--dark *:focus-visible,
.bg--ultra-dark *:focus-visible,
.color-scheme--dark *:focus-visible {
  outline-color: var(--base);        /* red focus ring fails on dark */
}

/* ============================================================
   .skip-link — styling for Bricks-emitted skip-link anchors
   Bricks core outputs <a class="skip-link"> via bricks_body
   action; we provide visually-hidden-until-focused CSS.
   ============================================================ */
.skip-link {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 9999;
  transform: translateY(-150%);
  background: var(--white);
  color: var(--neutral);
  padding: 0.75rem 1.5rem;
  font-family: var(--text-font-family);
  font-weight: 600;
  font-size: 0.875rem;
  text-decoration: none;
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition: transform 0.2s ease, outline-color 0.2s ease;
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  outline-color: var(--primary);
}

/* ============================================================
   <hr> — Rule color, brand sections use 1px tan separators
   ============================================================ */
hr {
  border: 0;
  border-top: 1px solid var(--base-semi-light);
  margin-block: var(--space-l, 2.7rem);
}

/* ============================================================
   .logo--on-dark — recolor the text portion of the Worcester
   lockup SVGs when placed on a dark surface. The SVG files use
   var(--logo-text, #1A1A1A) and var(--logo-text-muted, #6B6B6B)
   for the Worcester typography paths; this utility overrides
   them with Paper-tone equivalents that read on dark.

   Red graphic (#BD1827) and white-inside-red ("C" + slogan) are
   hard-coded in the SVG and stay untouched.

   Requires the SVG to be INLINE (Bricks `svg` element with
   source=dynamicData, NOT <img src=...>). CSS custom properties
   do not cross the <img> boundary.

   Apply as a raw class to the svg element or any ancestor:
     <svg class="logo--on-dark">…</svg>
   ============================================================ */
/* Moved to the Bricks Global Class `logo--on-dark` (id oujmkc) as class
   _cssCustom — Bricks has no typed control for a CSS custom property, so
   this is layer 2 of the styling order, not layer 1. Kept in the class
   system so it is visible in the builder rather than only in this file. */

/* ============================================================
   Selection — Clemente Red wash with white text
   ============================================================ */
::selection {
  background: var(--primary);
  color: var(--white);
}

/* ============================================================
   WS Form — site-wide brand skin
   WS Form's Styler defines its variables on
   :where([data-wsf-style-id="N"]) — which has ZERO specificity —
   so this single .wsf-form block wins over every skin without
   !important, and applies no matter which Styler style a form is
   assigned. Field-level vars (input bg, borders, buttons, focus,
   labels) all resolve UP to the --wsf-form-color-* roots below;
   their hover/light/dark variants are live
   color-mix(… var(--wsf-form-color-*) …), so overriding a root
   recomputes its shades automatically.

   Tokens reference the live ACSS/brand palette (not literal hex)
   so forms track future palette changes — the reason this lives
   here and not in WS Form's Styler (which stores hex in the DB,
   un-versioned and decoupled from the token system).
   ============================================================ */
.wsf-form {
  /* Palette roots — every field/button/state colour derives from these */
  --wsf-form-color-base:          var(--ink-body);  /* field + label text */
  --wsf-form-color-base-contrast: var(--white);     /* field bg, primary-button text */
  --wsf-form-color-primary:       var(--primary);   /* submit button + focus ring (matches site --focus-color) */
  --wsf-form-color-secondary:     var(--ink);       /* secondary buttons — brand Ink */
  --wsf-form-color-accent:        var(--ink);       /* in-form links + native control accent-color */
  --wsf-form-color-neutral:       var(--ink-3);     /* placeholders, muted text, default-button grey */
  --wsf-form-color-danger:        var(--primary);   /* validation error border + feedback */

  /* Pin primary-button hover to the locked Red Deep token
     (WS Form's default is color-mix(red, #000 20%) — close, not exact). */
  --wsf-form-color-primary-dark-20: var(--primary-hover);

  /* Resting input border = brand Rule (tan); focus border stays
     --primary (red) via WS Form's own default, matching --focus-color. */
  --wsf-field-border-color:       var(--rule);
  --wsf-field-border-color-hover: var(--ink-3);

  /* Structure: brand radius is 0 (WS Form field default is 4px). */
  --wsf-form-border-radius:  0;
  --wsf-field-border-radius: 0;

  /* ---- Type ---------------------------------------------------
     Field, label, help and button type all resolve UP to these
     --wsf-form-* roots (same cascade as the colour roots above),
     so setting the roots is enough. WS Form defaults: family
     `inherit`, size 16px, small 14px, line-height 1.4. */
  --wsf-form-font-family:        var(--text-font-family); /* Inter — pinned so the form is brand-correct wherever it's embedded */
  --wsf-form-font-size:          1.0625rem;               /* 17px — matches the site body */
  --wsf-form-font-size-small:    0.9375rem;               /* 15px — help text + validation feedback */
  --wsf-form-line-height:        1.5;                     /* UI: looser than WS 1.4 for the wrapping consent label, tighter than body's 1.65 */
  --wsf-field-label-font-weight: 500;                     /* Inter UI weight */
  --wsf-field-label-font-size:   var(--text-s);           /* labels drop below the 17px field text */
  --wsf-field-label-color:       var(--neutral-semi-dark);/* Ink 2 — secondary text (default derives from field text) */
  /* font-weight + letter-spacing stay at WS Form's `inherit` (Inter 400, no tracking). */

  /* ---- Spacing ------------------------------------------------
     Grid gap (between fields) rides the ACSS scale. Field interior
     padding is a deliberate fixed value — the ACSS --space-* scale
     floors at ~30px (--space-xs), too coarse for input padding —
     sized to the 17px text (~50px tall inputs). */
  --wsf-form-grid-gap:            var(--space-m, 1.25rem); /* ~38px between fields */
  --wsf-field-padding-vertical:   0.7rem;                  /* ~12px */
  --wsf-field-padding-horizontal: 1rem;                    /* ~16px */
  --wsf-field-label-gap:          0.5rem;                  /* label → input (WS default 5px) */
  --wsf-field-help-gap:           0.5rem;                  /* input → help text */
  /* --wsf-form-padding-* stay 0 — the Bricks section/card owns outer spacing. */
}

/* ============================================================
   WS Form — Application form (id 2) numbered section headers
   Reproduces the numbered serif section headings from
   application-form-mockup-v1.html (.section-head .n + .t, and the
   .form-section + .form-section divider). WS Form renders each
   section as <fieldset class="wsf-section"><legend> and the legend
   is fully token-driven (ws-form-public-base.css), so the type and
   colour are root-var overrides; the variable-font axis, the red
   counter numeral, and the inter-section rule each need a real rule
   because WS Form exposes no variable for them.

   Scoped to [data-id="2"] so the global .wsf-form skin above still
   governs all forms, but only the application form gets the numbered
   sections (the Contact form, id 1, keeps plain sections).
   Requires "Render Section Labels" left on in the form's layout
   settings (WS Form default) so the <legend>s are emitted.
   ============================================================ */
.wsf-form[data-id="2"] {
  --wsf-section-legend-font-family:      var(--heading-font-family); /* Fraunces */
  --wsf-section-legend-font-size:        clamp(1.25rem, 2.2vw, 1.625rem); /* 20→26px = mockup .t / brand --h3 */
  --wsf-section-legend-font-weight:      400;
  --wsf-section-legend-font-style:       normal;
  --wsf-section-legend-color:            var(--neutral);   /* Ink body */
  --wsf-section-legend-line-height:      1.1;
  --wsf-section-legend-letter-spacing:   normal;
  --wsf-section-legend-text-transform:   none;
  --wsf-section-legend-text-decoration:  none;
  --wsf-section-legend-gap:              1.5rem;           /* 24px below the heading (mockup legend margin) */
  --wsf-section-color-background:        transparent;
  --wsf-section-legend-color-background: transparent;
  counter-reset: clemente-section;
}

/* Numeral + title share one baseline, like mockup .section-head (flex, 14px gap). */
.wsf-form[data-id="2"] .wsf-section > legend {
  display: flex;
  align-items: baseline;
  gap: 0.875rem;
  width: 100%;
  font-variation-settings: "SOFT" 40, "WONK" 0;
}

/* Red numbered marker — mockup .section-head .n (Fraunces 300, 24px, red). */
.wsf-form[data-id="2"] .wsf-section > legend::before {
  counter-increment: clemente-section;
  content: counter(clemente-section);
  color: var(--primary);
  font-weight: 300;
  font-size: 1.5rem;
  line-height: 1;
  font-variation-settings: "SOFT" 40;
}

/* Divider + spacing between sections — mockup .form-section + .form-section.
   First section has no top rule; the trailing submit section inherits one,
   which matches the mockup's .form-foot rule above the submit button. */
.wsf-form[data-id="2"] .wsf-section + .wsf-section {
  margin-top: 2.5rem;   /* 40px */
}

/* Hide the auto-added trailing submit section's legend ("Section") so it is
   neither shown nor numbered. It is always the last .wsf-section, and a
   display:none legend does not increment the counter, so numbering stays 1–8. */
.wsf-form[data-id="2"] .wsf-section:last-of-type > legend {
  display: none;
}

/* Sub-section labels inside a section — mockup .subhead (Technology access /
   Transportation / Childcare). Applied via the "form-subhead" field class on
   those text-editor fields. WS Form puts the class on the field wrapper, so the
   rule + type sit on .form-subhead and the inner reset strips any <p>/<div>
   margin and lets the type inherit. Outer top spacing comes from WS Form's
   grid row-gap (--wsf-form-grid-gap). */
.wsf-form[data-id="2"] .form-subhead {
  font-family: var(--text-font-family);  /* Inter */
  font-size: 0.6875rem;                  /* 11px */
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--ink-3);
  padding-bottom: 0.625rem;              /* 10px */
}
.wsf-form[data-id="2"] .form-subhead :is(p, div, span) {
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
}

/* ============================================================
   Anchor-link sticky-header clearance
   Site has a sticky header (post 23) that obscures the top of
   any in-page anchor target. Applying scroll-margin-top to every
   section with an id offsets the scroll position by the header's
   rendered height (--header-h, set in :root above).
   Applies site-wide — affects any future anchor target too.
   ============================================================ */
section[id] {
  scroll-margin-top: var(--header-h);
}

/* ============================================================
   .btn--ink-outline — Ink secondary button (transparent fill,
   Ink text + border, fills to Ink on hover with Paper text).

   Layered on TOP of an ACSS button foundation
   (style="btn--neutral" + outline=true is the closest variant):
   the Bricks Button element keeps ACSS's padding / radius / font /
   transitions, this class overrides only the colour tokens.
   ACSS's button rules read --btn-background / --btn-text-color /
   --btn-border-color (and the -hover variants) — redefining those
   tokens at this class scope flows through cleanly.

   Brand Ink (#1C2331) is the non-ACSS web accent that lives in
   bricks-child-theme/style.css (--ink) — this utility is how
   buttons reach the real Ink colour without an ACSS palette slot.

   Apply via Bricks _cssClasses on the Button element:
     style: 'btn--neutral', outline: true, _cssClasses: 'btn--ink-outline'
   ============================================================ */
/* Moved to the Bricks Global Class `btn--ink-outline` (id inkbtn) as class
   _cssCustom — same reason as .logo--on-dark: custom properties have no
   typed control. Attach it via the Class panel; it is no longer a raw
   class name pointing at this file. */

/* ============================================================
   Contact page — Leaflet locations map
   Vendor leaflet.css ships from clemente-functionality
   (assets/vendor/leaflet/1.9.4/) — a deliberate exception to
   "no CSS in the plugin": that file is vendor CSS, not brand CSS.
   Everything brand-facing lives here.
   ============================================================ */
/* Structural sizing for the map mount.
   Moved off the elements 2026-08-02 (class audit): both `cmwrap` and `cmapel`
   carried typed `_width`/`_height`, which emitted as `#clemente-map-wrap` /
   `#clemente-map` — element-bound CSS at (1,0,0), and invisible to a `#brxe-`
   audit because a custom `_cssId` replaces the `brxe-` id in the HTML.
   The ids must STAY: `clemente-locations-map.js` mounts Leaflet on
   `#clemente-map`. Only the styling moved. Declarations are byte-for-byte what
   the elements emitted; specificity drops (1,0,0) → (0,1,0), which is safe
   because nothing else targets these classes. */
.clemente-map-wrap {
  width: 100%;
  height: 100%;
}

.clemente-map {
  height: 100%;
  aspect-ratio: 1 / 1;
  min-height: 320px;
  width: 100%;
  background: var(--paper-2, #F2EEE6);
  border: 1px solid var(--rule, #D9D2C3);
  border-radius: 0;
  z-index: 0; /* keep Leaflet panes under the sticky header */
}

.clemente-map__fallback {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Pins */
.clemente-pin-wrap { background: none; border: 0; }
.clemente-pin { color: var(--ink, #1C2331); display: block; line-height: 0; }
.clemente-pin--primary { color: var(--primary, #BD1827); }

/* Focus ring on markers.
   ACSS owns focus site-wide via `body.bricks-is-frontend.bricks-is-frontend
   :focus-visible { outline: var(--focus-width) solid var(--focus-color) }` —
   (0,3,1), and it enqueues after the child theme, so a selector fight would
   need four classes to win. Override the tokens it consumes instead: the
   default red ring is invisible against a map full of red pins. */
.clemente-map {
  --focus-width: 3px;
  --focus-color: var(--ink, #1C2331);
  --focus-offset: 2px;
}

/* Permanent name labels */
.clemente-map__tip.leaflet-tooltip {
  background: var(--paper, #FAF7F2);
  border: 1px solid var(--rule, #D9D2C3);
  border-radius: 0;
  box-shadow: none;
  color: var(--ink-2, #3D3D3D);
  font-family: var(--text-font-family, Inter), sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 0.25rem 0.5rem;
}
.clemente-map__tip.is-primary {
  color: var(--primary, #BD1827);
  font-weight: 600;
}
.clemente-map__tip.leaflet-tooltip::before { display: none; }

/* Popups */
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
  background: var(--paper, #FAF7F2);
  border-radius: 0;
  box-shadow: 0 2px 12px rgb(28 35 49 / 0.14);
  color: var(--ink-body, #1A1A1A);
}
.leaflet-popup-content { margin: 0.9rem 1rem; font-family: var(--text-font-family, Inter), sans-serif; }
.leaflet-popup-content p { margin: 0 0 0.35rem; }

.clemente-map__name {
  font-family: var(--heading-font-family, Fraunces), serif;
  font-variation-settings: "SOFT" 40;
  font-weight: 500;
  font-size: 1.0625rem;
  line-height: 1.25;
}
.clemente-map__detail { color: var(--ink-3, #6B6B6B); font-size: 0.8125rem; }
.clemente-map__addr   { color: var(--ink-2, #3D3D3D); font-size: 0.875rem; }
/* Leaflet ships `.leaflet-container a { color: #0078A8 }` — (0,1,1), which
   beats a bare .clemente-map__link. Qualify to (0,2,0) so the popup link
   follows brand link policy (Ink, Ink Deep on hover) instead of Leaflet blue. */
.leaflet-popup-content .clemente-map__link {
  color: var(--ink, #1C2331);
  font-size: 0.8125rem;
  font-weight: 600;
  text-underline-offset: 0.2em;
}
.leaflet-popup-content .clemente-map__link:hover { color: var(--ink-deep, #0F1520); }

/* Controls + attribution */
.leaflet-bar,
.leaflet-bar a {
  border-radius: 0 !important;
  border-color: var(--rule, #D9D2C3);
  color: var(--ink, #1C2331);
}
.leaflet-bar a:hover { background: var(--paper-2, #F2EEE6); }

.leaflet-control-attribution {
  background: rgb(250 247 242 / 0.86);
  color: var(--ink-3, #6B6B6B);
  font-family: var(--text-font-family, Inter), sans-serif;
  font-size: 0.6875rem;
}
.leaflet-control-attribution a { color: var(--ink, #1C2331); }

@media (max-width: 767px) {
  .clemente-map { aspect-ratio: 4 / 5; }
  .clemente-map__tip.leaflet-tooltip { font-size: 0.6875rem; }
}

/* ============================================================
   Wrapper-block-as-figure — cancel the UA-mimic margin
   Added 2026-08-02 (Home build, .home-stories__feature).

   Bricks' frontend.min.css ships `figure { margin: 1em 40px }`
   to mimic the UA sheet, and zeros it back out ONLY for the
   image-as-figure case (`figure.brxe-image { margin: 0 }`).
   A Bricks *block* with tag=figure renders `<figure
   class="brxe-block …">`, so the zeroing selector misses and
   the 1em/40px margin survives — an unexplained indent with
   nothing in the class settings to account for it.

   Documented in docs/stack-gotchas.md. Applies to any
   wrapper-block-as-figure; today that is the Home stories
   feature blockquote only.
   ============================================================ */
figure.brxe-block {
  margin: 0;
}

/* ============================================================
   ⚠️ CLIENT REVIEW EXPERIMENT — 2026-07-25 — NOT BRAND-SPEC
   Heading weights for client review only: h1/h2 → 300,
   h3–h6 → 400. Brand guide specifies Fraunces 500 for headings
   (300 is the display tier), so this DEVIATES deliberately and
   pending a final decision.

   Mechanism: ACSS sets every heading from one rule —
   `h1,h2,…{ font-weight: var(--heading-font-weight) }` in
   automatic-bricks.css — and there are no per-level weight
   tokens, so the token-override route can't express a split.
   automatic-bricks.css also enqueues after this file, so a bare
   `h1,h2` rule at (0,0,1) would lose. `body h1` is (0,0,2) and
   wins without !important.

   TO REVERT: delete this whole block. Nothing else references it.
   TO ADOPT: fold into the ACSS heading config + update the brand
   guide, and delete this block.
   ============================================================ */
body h1,
body h2 {
  font-weight: 300;
}

body h3,
body h4,
body h5,
body h6 {
  font-weight: 400;
}

/* ============================================================
   Auth pages — password visibility toggle
   Login / Lost Password / Reset Password (Bricks auth pages).

   The button is injected by clemente-auth.js into the Bricks
   field wrapper, so it has no Bricks Global Class to carry
   typed settings — and absolute centring inside the wrapper
   isn't expressible as a typed control anyway. Behaviour lives
   in the core plugin (inc/auth-pages.php); this is the styling.
   ============================================================ */
.auth__password-wrapper {
  position: relative;
  display: block;
}

/* Keep typed text clear of the button. */
.auth__password-wrapper input[type="password"],
.auth__password-wrapper input[type="text"] {
  padding-right: 3rem;
}

.auth__password-toggle {
  position: absolute;
  top: 50%;
  right: 0.75rem;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--neutral-semi-light);
  cursor: pointer;
  transition: color 0.15s ease;
}

.auth__password-toggle:hover,
.auth__password-toggle[aria-pressed="true"] {
  color: var(--neutral);
}

.auth__password-toggle svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* Recovery links — inherit the site's Ink link policy. */
.auth__forgot {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.auth__forgot:hover {
  color: var(--ink-deep);
}

/* ============================================================
   Footer newsletter (WS Form 4 — compact variant)
   The footer column is narrow, so the submit label wraps to two
   lines. WS Form exposes no control for this, and the rule has to
   sit outside the form to reach its markup.
   ============================================================ */
#brx-footer .wsf-form input[type="submit"],
#brx-footer .wsf-form button[type="submit"] {
  white-space: nowrap;
  width: 100%;
}

/* WS Form sizes the email input to content inside its grid cell, leaving it
   visibly clipped in a narrow footer column. Fill the cell instead. */
#brx-footer .wsf-form input[type="email"],
#brx-footer .wsf-form input[type="text"] {
  width: 100%;
  min-width: 0;
}

/* ---- Compact (2026-08-02) -----------------------------------
   `--wsf-form-grid-gap` drives BOTH axes in ws-form-public-base.css:
   `.wsf-field-wrapper { margin-bottom }` (the row rhythm) and
   `.wsf-tile { padding-inline: gap/2 }` (the column gutter). The
   site-wide value is --space-m (~38px), correct for a full-width
   form and far too loose for a footer column. One override
   tightens the whole block. */
#brx-footer .wsf-form {
  --wsf-form-grid-gap: 0.75rem;             /* 12px rows + 12px gutter (was ~38px) */

  /* Field interior. WS Form composes `--wsf-field-padding` from these two, and
     the SUBMIT button's own `--wsf-field-button-padding-vertical/horizontal`
     default to these same two vars — so the button tracks the inputs and the
     email/Sign-up heights stay matched without a second rule. */
  --wsf-field-padding-vertical:   0.35rem;  /* ~6px — site-wide is 0.7rem */
  --wsf-field-padding-horizontal: 0.75rem;  /* ~12px — site-wide is 1rem */
}

/* ---- Flush left (2026-08-02) --------------------------------
   The form used to sit ~19px right of the column's text because
   `.wsf-tile`'s `padding-inline` IS the gutter mechanism, and
   `.wsf-grid`'s negative margins — which normally cancel it at the
   outer edges — were zeroed below to stop mobile overflow. That
   killed the compensation but left the padding, indenting every
   field. Zero the padding at source instead, then re-create only
   the one gutter that is actually needed: between the two name
   fields. Tiles are `flex: 0 0 50%` + `box-sizing: border-box`, so
   padding on the first field eats into its own 50% and cannot
   overflow the row.

   The gutter goes on the LEFT-HAND item of each row — first name
   (paired with last name) and email (paired with the Sign up
   button). Targeted via the field classes rather than :nth-child so
   the rules survive a field being added or reordered. */
#brx-footer .wsf-form .wsf-tile {
  padding-left: 0;
  padding-right: 0;
}

#brx-footer .wsf-form .wsf-tile:has(.clemente-newsletter-first),
#brx-footer .wsf-form .wsf-tile:has(.clemente-newsletter-email) {
  padding-right: var(--wsf-form-grid-gap);
}

/* WS Form's .wsf-grid carries negative gutter margins that assume a padded
   parent. In a footer column there is none, so the grid renders wider than
   its container and pushes horizontal page overflow on mobile. */
#brx-footer .wsf-form .wsf-grid {
  margin-left: 0;
  margin-right: 0;
}

/* Email / Sign-up vertical alignment.
   Align row items to their top edge instead of letting the row resolve it.
   `.wsf-field-wrapper` carries `margin-bottom: var(--wsf-form-grid-gap)`, so
   the email's box extends 12px below its visible input; whatever the row's
   default alignment resolves to, that trailing margin is what put the input
   and the button on different baselines.

   Doing this with `align-items` rather than by zeroing margins is deliberate:
   the margins ARE the row rhythm, and removing them collapsed the gap between
   the name row and the email row (tried 2026-08-02, reverted). This touches
   alignment only and cannot affect spacing. */
#brx-footer .wsf-form .wsf-grid {
  align-items: flex-start;
}

/* ============================================================
   DONATE — the gift-amount chips (form 5)
   Built 2026-08-25 with the Option B donate mockup.
   State model corrected 2026-08-25 (Mike): static = faint
   outline, hover = solid outline, checked = red field.

   The chips are WS Form's own `button-full` radio style, not a
   hand-built control. The value is carried by a real
   <input type="radio">, so it submits, validates and announces
   itself with no help from us, and the row degrades to plain
   radios if this CSS never loads.

   ⚠️ TWO TRAPS, both live here:

   1. WS Form welds the border colour to the FILL token:
        border: var(--wsf-field-border-width)
                var(--wsf-field-border-style)
                var(--wsf-field-radio-button-color-background);
      So a white chip gets a white border and the "faint outline"
      resting state renders as nothing at all. The outline has to
      be a real `border-color` declaration; tokens alone cannot
      express fill ≠ border.

   2. That declaration has to WIN. WS Form's rule
        .wsf-form input[type=radio].wsf-field.wsf-button + label.wsf-label
      is (0,5,2), and the obvious override
        .wsf-form[data-id="5"] input[type=radio].clemente-donate-amount + label.wsf-label
      is ALSO (0,5,2) — an exact tie, decided by source order, and
      ws-form-public-radio.css enqueues after the child theme. So
      the correct-looking rule loses silently. Hence the doubled
      class below (`.clemente-donate-amount.clemente-donate-amount`),
      the cheapest legal climb to (0,6,2). See knowledgebase 01 §
      Specificity cheat sheet.
   ============================================================ */

/* Fills. The CHECKED state needs no rule of its own: fill and border
   both resolve from this one token, and red-on-red is exactly right. */
.wsf-form[data-id="5"] {
  --wsf-field-radio-button-color:                        var(--neutral);
  --wsf-field-radio-button-color-background:             var(--white);
  --wsf-field-radio-button-color-background-alt:         var(--white);

  --wsf-field-radio-checked-button-color:                var(--white);
  --wsf-field-radio-checked-button-color-background:     var(--primary);
  --wsf-field-radio-checked-button-color-background-alt: var(--primary);

  --wsf-field-radio-gap-horizontal: 0.625rem;
}

/* Chip face. Fraunces with tabular figures so $50 / $250 / $500 share a
   column width and the row does not jitter as the board edits amounts in
   Site Options. `tnum` has no Bricks or WS Form control, which is why it
   is a real declaration and not a token. */
.wsf-form[data-id="5"] input[type="radio"].clemente-donate-amount.clemente-donate-amount + label.wsf-label {
  font-family: var(--heading-font-family);
  font-size: 1.25rem;
  font-variation-settings: "SOFT" 40;
  font-feature-settings: "tnum";
  padding: 0.875rem 0.5rem;
}

/* STATIC — faint outline on a paper-white face. */
.wsf-form[data-id="5"] input[type="radio"].clemente-donate-amount.clemente-donate-amount:not(:checked) + label.wsf-label {
  border-color: var(--base-semi-light);
}

/* HOVER — the same outline, solid. Bound to the LABEL's own :hover, not
   the input's: for button-style radios the input is visually hidden and
   the label is the whole hit area, so `input:hover` would rarely fire. */
.wsf-form[data-id="5"] input[type="radio"].clemente-donate-amount.clemente-donate-amount:not(:checked) + label.wsf-label:hover {
  border-color: var(--ink);
}

/* "Other" is a word, not a numeral — set it in the UI face so it does
   not read as a missing amount.

   Matched on the input's VALUE rather than its position: the value is
   ours (inc/donate-amount.php writes the literal `other`), so this holds
   however many tiers the board adds in Site Options, and it needs no
   assumption about the surrounding markup. */
.wsf-form[data-id="5"] input[type="radio"].clemente-donate-amount.clemente-donate-amount[value="other"] + label.wsf-label {
  font-family: var(--text-font-family);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* The impact line under the chips. */
.wsf-form[data-id="5"] .clemente-chip-impact {
  min-height: 2.5rem;
  display: flex;
  align-items: center;
  gap: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ink-2);
  border-left: 2px solid var(--primary);
  padding-left: 0.875rem;
}

/* Before a chip is picked the rule is muted, so the red bar reads as a
   response to the donor rather than as decoration that was always there. */
.wsf-form[data-id="5"] .clemente-chip-impact[data-empty="true"] {
  border-left-color: var(--base-semi-light);
  color: var(--ink-3);
}