/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Bricks child theme for KS Custom Business Services LLC. Adds KSCBS brand-specific type tokens and utility classes that extend ACSS.
 Author:       Michael Parks Design
 Author URI:   https://michaelparksdesign.com/
 Template:     bricks
 Version:      1.17
 Text Domain:  bricks
*/

/* ============================================
   KSCBS Brand Type System
   ============================================
   Extends ACSS with brand-specific type tokens and utility classes
   per `assets/kscbs-brand-identity-v2.html`.

   ACSS provides fluid clamp() typography by default (tied to its
   Typography Scale setting). This file overrides the upper clamp
   bounds for --h1 and --h2 to match KSCBS brand desktop sizes
   (40px, 30px) while preserving ACSS's fluid scaling behavior at
   smaller viewports.

   It also adds:
   - --display / .display       (52px hero headline, not in ACSS scale)
   - .display em                 (gold accent emphasis — dark surfaces only)
   - .eyebrow                    (Epilogue 600 / 11px / uppercase / 0.12em)
   - .italic-accent / .pull-quote (Instrument Serif Italic / 22px / LH 1.6)
   - .ks-lede                    (Epilogue 400 / 1.2rem / LH 1.7 — lead paragraph)
   - .skip-link                  (WCAG 2.4.1 — visually hidden until keyboard-focused)
   - Button vertical centering   (Epilogue metric correction)
   - Link underline policy       (none by default; underline on hover; body-copy inverse)
   - Dark-section outline button override (white, not primary green)
   - Dark-section solid button override (base bg + charcoal text)
   - .bg--primary section system   (KSCBS Green sections — text + buttons)

   Component-scoped layout styles (e.g., .home-cta__inner) live in their
   Bricks Global Class typed settings per memory feedback_bricks_styling_layers.md.
   This file is reserved for brand tokens, utility classes, and site-wide
   contextual systems (dark-section + green-section button overrides).

   Body weight stays at ACSS default 400 — deliberate KSCBS production
   choice (brand guide v2 type-scale shows 300 as the design ideal,
   400 chosen for screen readability).
   ============================================ */

:root {
  /* --------------------------------------------
     Display / Hero — brand-spec hero size
     Not in the ACSS heading scale.
     Fluid: 36.4px @ 320px viewport → 52px @ 1280px+ viewport.
     -------------------------------------------- */
  --display: clamp(2.275rem, calc(1.625vw + 1.95rem), 3.25rem);
  --display-line-height: 1.1;

  /* --------------------------------------------
     H1 size override — brand-spec 40px desktop max
     ACSS default upper clamp: ~35px (2.197rem).
     Brand spec: 40px (2.5rem). Slope retuned to interpolate cleanly
     between 320px and 1280px viewports while keeping the same
     mobile minimum.
     -------------------------------------------- */
  --h1: clamp(1.728rem, calc(1.287vw + 1.471rem), 2.5rem);

  /* --------------------------------------------
     H2 size override — brand-spec 30px desktop max
     ACSS default upper clamp: ~28px (1.758rem).
     Brand spec: 30px (1.875rem).
     -------------------------------------------- */
  --h2: clamp(1.44rem, calc(0.725vw + 1.295rem), 1.875rem);
}

/* ============================================
   .display — Hero headline utility
   Brand: Instrument Serif Regular, 52px @ desktop, line-height 1.1
   Use on: site hero headline, oversized intro statements
   ============================================ */
.display {
  font-family: var(--heading-font-family);
  font-size: var(--display);
  font-weight: var(--heading-font-weight);
  line-height: var(--display-line-height);
  color: var(--heading-color);
  text-wrap: pretty;
  margin: 0;
}

/* Gold accent emphasis inside .display — DARK SURFACES ONLY.
   Why: Gold (#C4A44A) on light surfaces fails WCAG AA (2.40:1 on white).
   Gold on Charcoal = 7.12:1 (AAA). Default to inherited color so misuse on
   a light .display degrades to safe Charcoal instead of unreadable gold.
   Italic — Instrument Serif Italic carries the brand "Italic Accent" treatment. */
.display em {
  font-style: italic;
  color: inherit;
}

.bg--dark .display em,
.bg--ultra-dark .display em,
.color-scheme--dark .display em {
  color: var(--accent);
}

/* ============================================
   .eyebrow — Section label / accent label
   Brand: Epilogue 600, 11px, uppercase, 0.12em letter-spacing
   Use on: small label above a headline, CTA eyebrows, section labels
   ============================================ */
.eyebrow {
  font-family: var(--text-font-family);
  font-size: 0.875rem;             /* 14px @ 16px root */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  line-height: 1.4;
  color: var(--primary);
  margin: 0;
}

/* Dark-section rule: KSCBS Green fails contrast on Charcoal (2.38:1).
   On dark surfaces, eyebrow text becomes White per brand spec. */
.bg--dark .eyebrow,
.bg--ultra-dark .eyebrow,
.color-scheme--dark .eyebrow {
  color: var(--white);
}

/* ============================================
   .italic-accent / .pull-quote — Pull quote / accent text
   Brand: Instrument Serif Italic, 22px, line-height 1.6
   Use on: testimonial intros, pull quotes, section opening lines,
   any place the brand guide calls "Italic Accent"
   ============================================ */
.italic-accent,
blockquote.pull-quote,
.pull-quote {
  font-family: var(--heading-font-family);
  font-style: italic;
  font-size: 1.375rem;             /* 22px @ 16px root */
  font-weight: var(--heading-font-weight);
  line-height: 1.6;
  color: var(--neutral);
  margin: 0;
}

/* ============================================
   .ks-lede — Lead paragraph utility
   Slightly larger, regular-weight body for opening paragraphs.
   Use on: lead paragraph of an article body, section intro prose,
   first paragraph of editorial content where added emphasis is wanted.
   Works inside post_content — Kim can mark a paragraph in the WP editor
   with class="ks-lede" and the styling lands site-wide.
   ============================================ */
.ks-lede {
  font-family: var(--text-font-family);
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.7;
  color: var(--neutral);
  margin: 0;
}

/* Dark-section rule: charcoal-on-charcoal would fail contrast.
   --neutral-light (#DADAD7) = ~10.6:1 AAA on Charcoal. */
.bg--dark .ks-lede,
.bg--ultra-dark .ks-lede,
.color-scheme--dark .ks-lede {
  color: var(--neutral-light);
}

/* ============================================
   Button vertical centering — Epilogue metric correction
   ============================================
   Why: Bricks core (`.bricks-button { padding: .5em 1em }`) and ACSS
   (`padding-block: 0.5em; line-height: 1; text-transform: uppercase`)
   are both geometrically symmetric. But with line-height 1 + uppercase,
   visible glyphs only occupy the cap-height-to-baseline region of the
   em-box. Epilogue's OS/2 typo metrics put the baseline asymmetrically
   above the em-box midline, so the ink clusters in the upper portion
   of the line-box and the empty descender area appears as a 2-4px gap
   below the visible text. `align-items: center` on the inline-flex
   anchor centers the line-box, not the ink — so it doesn't help.

   Fix: override ACSS's --btn-padding-block token with an asymmetric
   two-value shorthand. ACSS's existing rule
       padding-block: var(--btn-padding-block);
   then resolves to `padding-block: 0.6em 0.4em`. Total button height
   unchanged. Visible text recenters by ~2.9px at --text-m
   (1.8rem ≈ 28.8px → 0.1em ≈ 2.88px shift down).

   Why the variable, not a selector override: automatic-bricks.css
   loads AFTER bricks-child/style.css (ACSS enqueues its Bricks
   layer late so it can override Bricks frontend defaults). Equal-
   specificity rules in the child theme lose on source order. ACSS's
   own --btn-padding-block lives in `:root` inside automatic.css
   (which loads BEFORE the child theme), so this :root override wins
   and ACSS's rule does the work for us.
   ============================================ */
:root {
  --btn-padding-block: 0.6em 0.4em;
}

/* ============================================
   Link underline policy
   ============================================
   Why: browser default is `text-decoration: underline` on every `<a>`,
   which reads as noise on standalone UI links (nav, footer, CTA arrow-links,
   inline call/email links in card components). Inline links inside body copy
   (`.brxe-text` rich-text content) still need the underline as an affordance
   so the reader can spot them mid-paragraph.

   ACSS defines `--link-decoration` tokens but doesn't apply them at the
   generic `a` level (only on `.link--*` utility classes), so the variable
   isn't a viable override point — selector rules are.

   Rule:
   - `a`        — default no decoration; underline appears on hover
   - `.brxe-text a` — inline body-copy convention; default underlined,
                     decoration removed on hover (matches ACSS body-link
                     default direction)

   `.brxe-text-basic` follows the universal `a` rule (no underline / hover
   underline) — appropriate for short labels, CTA-style arrow links, and
   one-liner inline references where the link target is the whole element.
   Bricks buttons (`.bricks-button`) set their own `text-decoration` and are
   unaffected by these rules.
   ============================================ */
/* Selector uses `a:any-link` (not bare `a`) to match the UA stylesheet's
   `a:link { text-decoration: underline }` specificity of (0,1,1). A plain
   `a` selector at (0,0,1) loses the cascade to the UA rule and the override
   has no visible effect. `:any-link` = `:link, :visited` combined. */
a:any-link {
  text-decoration: none;
}
a:any-link:hover {
  text-decoration: underline;
}

.brxe-text a:any-link {
  text-decoration: underline;
}
.brxe-text a:any-link:hover {
  text-decoration: none;
}

/* Header phone CTA — strip hover underline on the wrapping anchor.
   Underline appears on the inner .header-top__btn-info text because it
   inherits text-decoration from the parent <a>. Selector specificity
   (0,3,0) beats the generic a:any-link:hover (0,2,1) above. */
.header-top__btn:any-link:hover {
  text-decoration: none;
}

/* ============================================
   Dark-section button overrides (solid + outline)
   ============================================
   ACSS's bg-context wrappers — .bg--dark [class*="btn--"] (solid) and
   .bg--dark [class*="btn--"].btn--outline (outline) — force all buttons inside
   dark sections to use --primary regardless of which btn-- variant the element
   carries. Two problems with the stock ACSS behavior on KSCBS:

   1. KSCBS Green (#006629) on Charcoal (#1C1C1A) = 2.38:1 — fails WCAG 2.1 AA
      for both text (4.5:1 min) and UI components (3:1 min). Per CLAUDE.md
      "Dark section rule," all green elements in dark sections become White.

   2. ACSS's stock .btn--base variant pairs --base background with
      --base-ultra-light text (both off-white) — illegible on any surface.
      The wrapper hides this by overriding to primary, but the variant itself
      is broken; encoding the brand spec directly is more honest.

   These rules sit at equal+ specificity to the ACSS wrappers and load after
   automatic.css, so they win. Variant class (btn--base, btn--base-dark,
   btn--accent, etc.) becomes informational inside dark sections — color is
   dictated by the section context per brand spec.

   Solid:    base bg + charcoal text;  hover → gold bg + charcoal text
             (Gold #C4A44A + Charcoal #1C1C1A = 7.18:1 AAA — the only
             WCAG-compliant text color on gold; base/white on gold = 2.21:1 fails.)
   Outline:  transparent + white text + white border
   ============================================ */
.bg--dark [class*="btn--"]:not(.btn--outline),
.bg--ultra-dark [class*="btn--"]:not(.btn--outline) {
  --btn-background: var(--base);
  --btn-background-hover: var(--accent);
  --btn-text-color: var(--neutral);
  --btn-text-color-hover: var(--neutral);
  --btn-border-color: var(--base);
  --btn-border-color-hover: var(--accent);
  --focus-color: var(--white);
}

.bg--dark [class*="btn--"].btn--outline,
.bg--ultra-dark [class*="btn--"].btn--outline {
  --btn-background: transparent;
  --btn-background-hover: var(--white);
  --btn-text-color: var(--white);
  --btn-text-color-hover: var(--neutral);
  --btn-border-color: var(--white);
  --btn-border-color-hover: var(--white);
  --focus-color: var(--white);
}

/* ============================================
   Green-section system — .bg--primary
   ============================================
   ACSS does NOT ship a .bg--primary wrapper (only base/neutral variants:
   .bg--ultra-light / .bg--light / .bg--dark / .bg--ultra-dark). This is
   our project-defined wrapper for KSCBS Green hero/CTA sections, mirroring
   the dark-section system above.

   Contrast on KSCBS Green (#006629):
   - White on green = 7.16:1 AAA ✅
   - Charcoal on green ≈ 2.59:1 ❌ FAILS AA
   - Gold on green = 2.99:1 ❌ FAILS AA
   So all text/UI on green sections is white. Buttons follow the same
   "context dictates color" pattern as dark sections.

   Solid button on green:  white bg + charcoal text;  hover → gold + charcoal
   Outline button on green: transparent + white text + white border;
                            hover → white fill + charcoal text
   ============================================ */
.bg--primary {
  background-color: var(--primary);
  color: var(--white);
}

.bg--primary h1,
.bg--primary h2,
.bg--primary h3,
.bg--primary h4,
.bg--primary h5,
.bg--primary h6,
.bg--primary .h1,
.bg--primary .h2,
.bg--primary .h3 {
  color: var(--white);
}

.bg--primary .eyebrow {
  color: var(--white);
}

.bg--primary [class*="btn--"]:not(.btn--outline) {
  --btn-background: var(--white);
  --btn-background-hover: var(--accent);
  --btn-text-color: var(--neutral);
  --btn-text-color-hover: var(--neutral);
  --btn-border-color: var(--white);
  --btn-border-color-hover: var(--accent);
  --focus-color: var(--white);
}

.bg--primary [class*="btn--"].btn--outline {
  --btn-background: transparent;
  --btn-background-hover: var(--white);
  --btn-text-color: var(--white);
  --btn-text-color-hover: var(--neutral);
  --btn-border-color: var(--white);
  --btn-border-color-hover: var(--white);
  --focus-color: var(--white);
}

/* ============================================
   .skip-link — Skip to main content (WCAG 2.4.1)
   ============================================
   First focusable element in the page. Visually hidden until it
   receives keyboard focus; then slides into view at top-left so a
   sighted keyboard user can confirm it before activating.
   Targets the Bricks main content wrapper #brx-content.
   ============================================ */
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  background: var(--white);
  color: var(--neutral);
  padding: 0.75rem 1.25rem;
  font-family: var(--text-font-family);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-150%);
  transition: transform 0.2s ease;
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  text-decoration: none;
}

/* ============================================
   WS Forms — Visual styling
   ============================================
   WS Forms Pro emits a 57KB visual stylesheet (`css_public_style_*`)
   via the `ws_form_css` option's `css_style` flag, declared with
   `!important` throughout. We disable that output (Settings → WS Form →
   Advanced → CSS, or `wp option update ws_form_css` — `css_style: false`)
   and provide brand-aligned visual styling here. `css_layout: true`
   stays on — that's the grid/tile system that powers WS Forms' column
   layout (`.wsf-grid`, `.wsf-tile`, `.wsf-extra-small-N`, etc.).

   Targets the bare class vocabulary WS Forms emits:
   .wsf-form, .wsf-section, .wsf-field-wrapper, .wsf-label, .wsf-field,
   .wsf-required, .wsf-help, .wsf-invalid-feedback, .wsf-button,
   .wsf-actions.
   ============================================ */

.wsf-form {
  font-family: var(--text-font-family);
  color: var(--neutral);
}

/* Default: NO border on any WS Forms wrapper — period.
   Bricks lite layer applies `* { border-color: var(--bricks-border-color) }`
   inside `@layer bricks {...}`, plus `input/select/textarea` get a default
   `border-style:solid; border-width:1px`. Per stack-gotchas.md the
   layered-vs-unlayered cascade doesn't behave per spec — unlayered author
   rules at equal specificity lose to layered framework rules. `!important`
   is used here intentionally to win unambiguously.
   To bring a border back on a specific form/input, set it explicitly
   from the project — don't rely on Bricks defaults. */
.wsf-form,
.wsf-form-canvas,
.wsf-form *,
.wsf-form .wsf-field,
.wsf-form .wsf-tabs,
.wsf-form .wsf-section,
.wsf-form .wsf-fieldset,
.wsf-form input,
.wsf-form select,
.wsf-form textarea {
  border: 0 !important;
}

.wsf-form .wsf-section + .wsf-section {
  margin-block-start: var(--space-s);
}

/* Horizontal gutter between columns.
   WS Forms layout sets `.wsf-tile { box-sizing: border-box }` and applies
   `flex: 0 0 N% !important` for each breakpoint width. A `gap` on .wsf-grid
   would overflow against those fixed flex-bases. Instead: padding on every
   tile + negative margin on the grid pulls outer edges back to alignment.
   Net result: 1rem gap between adjacent columns, 0 at outer edges. */
.wsf-form .wsf-grid {
  margin-inline: -0.5rem;
}

.wsf-form .wsf-tile {
  padding-inline: 0.5rem;
}

.wsf-form .wsf-field-wrapper {
  margin-block-end: 1.25rem;
}

.wsf-form .wsf-label {
  display: block;
  margin-block-end: 0.375rem;
  font-family: var(--text-font-family);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.4;
  color: var(--neutral);
}

/* Required marker — class is .wsf-required-wrapper (created at runtime
   by WS Forms' public JS: ws-form-public.js:1763). The asterisk lives
   inside the wrapper span. */
.wsf-form .wsf-required-wrapper {
  margin-inline-start: 0.125rem;
  color: var(--primary);
}

.wsf-form .wsf-field {
  width: 100%;
  padding: 0.625rem 0.875rem;
  font-family: var(--text-font-family);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--neutral);
  background-color: var(--base);
  border-radius: var(--radius);
  box-sizing: border-box;
  transition: background-color 0.2s ease, outline-color 0.2s ease;
}

.wsf-form textarea.wsf-field {
  min-height: 6rem;
  resize: vertical;
}

/* Focus — matches site-wide indicator (WCAG 2.1 SC 2.4.7 + 2.2 SC 2.4.13,
   7.16:1 on white). Selector doubled per stack-gotchas.md → layered-cascade
   trick so this beats any equal-specificity framework rule. */
.wsf-form .wsf-field.wsf-field:focus,
.wsf-form .wsf-field.wsf-field:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  background-color: var(--white);
}

.wsf-form ::placeholder {
  color: var(--neutral-semi-dark);
  opacity: 0.7;
}

.wsf-form .wsf-help {
  margin-block-start: 0.375rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--neutral-semi-dark);
}

/* Invalid state — #B91C1C = 5.86:1 on white (AA). */
.wsf-form .wsf-field.wsf-invalid,
.wsf-form .wsf-validated .wsf-field:invalid {
  border-color: #B91C1C;
}

.wsf-form .wsf-invalid-feedback {
  margin-block-start: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.5;
  color: #B91C1C;
}

/* Native checkbox / radio — brand the accent, give breathing room */
.wsf-form input[type="checkbox"],
.wsf-form input[type="radio"] {
  margin-inline-end: 0.5rem;
  accent-color: var(--primary);
}

/* Submit button — mirrors KSCBS primary button on light surfaces.
   Doubled selector beats WS Forms' own button rules at equal specificity. */
.wsf-form .wsf-button.wsf-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--btn-padding-block) var(--btn-padding-inline);
  min-width: var(--btn-min-width);
  font-family: var(--text-font-family);
  font-size: 1rem;
  font-weight: var(--btn-font-weight);
  letter-spacing: var(--btn-letter-spacing);
  line-height: var(--btn-line-height);
  text-transform: var(--btn-text-transform);
  text-decoration: none;
  color: var(--white);
  background-color: var(--primary);
  border: var(--btn-border-width) solid var(--primary);
  border-radius: var(--btn-border-radius);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.wsf-form .wsf-button.wsf-button:hover {
  background-color: var(--primary-hover);
  border-color: var(--primary-hover);
  color: var(--white);
}

.wsf-form .wsf-button.wsf-button:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

.wsf-form .wsf-actions {
  margin-block-start: var(--space-s);
}

/* Dark-section context — labels + help shift to off-white;
   button flips to off-white-on-charcoal with gold hover (mirrors the
   `.bg--dark [class*="btn--"]` system above). Inputs themselves stay
   on a white surface even in dark sections — form fields are always
   light-card surfaces, never on charcoal directly. */
.bg--dark .wsf-form .wsf-label,
.bg--ultra-dark .wsf-form .wsf-label {
  color: var(--base);
}

.bg--dark .wsf-form .wsf-help,
.bg--ultra-dark .wsf-form .wsf-help {
  color: var(--neutral-light);
}

.bg--dark .wsf-form .wsf-button.wsf-button,
.bg--ultra-dark .wsf-form .wsf-button.wsf-button {
  background-color: var(--base);
  color: var(--neutral);
  border-color: var(--base);
}

.bg--dark .wsf-form .wsf-button.wsf-button:hover,
.bg--ultra-dark .wsf-form .wsf-button.wsf-button:hover {
  background-color: var(--accent);
  color: var(--neutral);
  border-color: var(--accent);
}

.bg--dark .wsf-form .wsf-button.wsf-button:focus-visible,
.bg--ultra-dark .wsf-form .wsf-button.wsf-button:focus-visible {
  outline-color: var(--white);
}