/* Wag-On-Inn - Bricks global CSS variables (v1, 2026-11-09, Katia)
 * Source: /workspace/wagoninn/astro-rebuild/design-system/tokens.css (FINAL v1). Contrast proofs: design-system/contrast.md.
 * WHERE: Bricks > Settings > Custom code > Custom CSS (global)  - OR -  Bricks 1.9.8+ Variables manager (paste the :root block).
 * Staging runs Automatic.css (ACSS) + Frames (evidence: audit/staging-2026-11-09/meta/*.json "fr-*", "btn--action").
 *   Section B remaps the ACSS variables staging already uses, so existing Frames components pick up the fixes without rebuilding.
 *   Preferred: set the same values in the ACSS dashboard (Action = #c24a45 etc.); paste B only if the dashboard can't.
 * RULES: #c24a45 = buttons + coral text. #da5e59 = decorative only (paws, blobs, icon fills) - never under text.
 *        Photo overlay 0.60 on EVERY photo with text. Ring = navy-ink on light; ring-inverse = white on blue/navy/photo.
 */

/* ===== A. WOI variables (prefix --woi-) ===== */
:root {
  /* colour: brand */
  --woi-coral-deco: #da5e59;        /* decorative only. FAILS as text bg (3.67:1 white) */
  --woi-coral-tint: #faebea;        /* light tint surface */
  --woi-logo-red: #bd302a;          /* logo mark only */
  --woi-blue: #367395;              /* featured cards, CTA band, menu. White text 5.19:1 */
  --woi-blue-hover: #22495e;        /* MOD: darker hover keeps white text >= 4.5 */
  --woi-blue-tint: #ecf4f8;         /* light bands */
  --woi-blue-light: #c7deeb;
  --woi-sky: #eff7fc;               /* cards */
  --woi-yellow: #f5d951;            /* heading highlight underline/marker */
  --woi-navy: #344f6f;
  --woi-ink: #101923;               /* body text 17.72:1 on white */

  /* colour: neutral */
  --woi-white: #ffffff;
  --woi-n50: #f2f2f2;               /* footer bg, text on photo */
  --woi-n200: #d9d9d9;              /* borders, dividers */
  --woi-n600: #5c6470;              /* muted text 5.98:1 (replaces #808080 3.95:1 FAIL) */
  --woi-n700: #404040;
  --woi-border-input: #767676;      /* 4.54:1 UI */

  /* colour: action (buttons, links) */
  --woi-action: #c24a45;            /* button bg, white text 4.82:1 */
  --woi-action-hover: #a83a35;      /* 6.32:1 */
  --woi-action-active: #8f302c;     /* MOD pressed */
  --woi-link: #b93f3a;              /* inline links; 5.48 white / 5.05 sky / 4.89 n50 */
  --woi-link-hover: #8f302c;        /* MOD */

  /* colour: status */
  --woi-success: #1e7e34;  --woi-success-bg: #e8f5ec;
  --woi-danger:  #b02a37;  --woi-danger-bg:  #fdecee;
  --woi-warning-bg: #ffecb3;

  /* focus */
  --woi-ring: #101923;              /* on white/sky/n50/blue-tint/yellow/coral button */
  --woi-ring-inverse: #ffffff;      /* on blue/navy/ink/photo. NEVER on yellow (1.41:1) */
  --woi-ring-width: 3px;
  --woi-ring-offset: 2px;

  /* overlay */
  --woi-overlay-alpha: 0.60;
  --woi-overlay: rgb(0 0 0 / var(--woi-overlay-alpha));   /* measured worst case needs 0.57 */

  /* type */
  --woi-font: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --woi-fs-xs: 0.875rem;                                   /* 14px floor anywhere */
  --woi-fs-sm: 1rem;                                       /* labels, help, legal */
  --woi-fs-body: clamp(1rem, 0.962rem + 0.191vw, 1.125rem);/* 16→18 */
  --woi-fs-lede: clamp(1.2rem, 1.108rem + 0.458vw, 1.5rem);/* 19.2→24 */
  --woi-fs-h4: clamp(1.0625rem, 0.99rem + 0.36vw, 1.25rem);
  --woi-fs-h3: clamp(1.25rem, 1.03rem + 1.03vw, 1.875rem); /* 20→30 */
  --woi-fs-h2: clamp(1.625rem, 1.2rem + 2.1vw, 2.8125rem); /* 26→45 (MOD: min up from 23) */
  --woi-fs-h1: clamp(2rem, 1.2rem + 3.8vw, 4.21875rem);    /* 32→67.5 (MOD: min up from 27.6) */
  --woi-fs-price: clamp(2.5rem, 1.9rem + 3vw, 4.5rem);
  --woi-lh-body: 1.7;
  --woi-lh-heading: 1.15;
  --woi-fw-regular: 400; --woi-fw-semibold: 600; --woi-fw-bold: 700;
  --woi-ls-button: 0.12em;
  --woi-ls-nav: 0.08em;
  --woi-ls-eyebrow: 0.14em;

  /* space */
  --woi-space-2xs: 0.5rem;
  --woi-space-xs: clamp(0.667rem, 0.616rem + 0.255vw, 0.833rem);
  --woi-space-s:  clamp(1rem, 0.924rem + 0.382vw, 1.25rem);
  --woi-space-m:  clamp(1.5rem, 1.385rem + 0.574vw, 1.875rem);
  --woi-space-l:  clamp(2rem, 1.751rem + 1.244vw, 2.8125rem);
  --woi-space-xl: clamp(2.4rem, 2.1rem + 1.5vw, 3.375rem);
  --woi-section-s: clamp(2rem, 1.465rem + 2.677vw, 3.75rem);
  --woi-section-m: clamp(3rem, 2.197rem + 4.015vw, 5.625rem);
  --woi-section-l: clamp(4rem, 2.641rem + 6.789vw, 8.4375rem);
  --woi-hero-pad: clamp(4rem, 2.6rem + 7vw, 10rem);        /* MOD: live 202px felt empty; capped */
  --woi-gutter: clamp(1rem, 0.159rem + 4.207vw, 3.75rem);

  /* size */
  --woi-container: 85.375rem;       /* 1366px, matches Bricks theme container */
  --woi-prose: 62ch;
  --woi-target-min: 24px;           /* WCAG 2.5.8 floor */
  --woi-target: 44px;               /* project rule: primary controls */
  --woi-btn-h: 48px;
  --woi-input-h: 48px;

  /* radius */
  --woi-r-xs: 0.25rem; --woi-r-input: 6px; --woi-r-s: 0.5rem; --woi-r-m: 0.75rem;
  --woi-r-l: 1.25rem; --woi-r-xl: 1.75rem; --woi-r-pill: 9999px;

  /* border */
  --woi-bw-button: 2px; --woi-bw-card: 1.5px; --woi-bw-input: 1px; --woi-bw-input-focus: 2px;

  /* shadow */
  --woi-shadow-s: 0 1px 2px rgb(16 25 35 / .06), 0 2px 6px rgb(16 25 35 / .06);
  --woi-shadow-m: 0 4px 10px -2px rgb(16 25 35 / .06), 0 16px 32px -12px rgb(16 25 35 / .14);
  --woi-shadow-l: 0 24px 60px -16px rgb(16 25 35 / .22);

  /* motion */
  --woi-dur: 150ms;
  --woi-ease: cubic-bezier(.2,.7,.2,1);
}

@media (prefers-reduced-motion: reduce) {
  :root { --woi-dur: 0.01ms; }
}

/* ===== B. ACSS bridge (only if the ACSS dashboard can't be changed). Fixes existing Frames/ACSS components on staging. ===== */
:root {
  --action: var(--woi-action);              /* was #da5e59 → white/#faebea text failed 3.16–3.67:1 */
  --action-hover: var(--woi-action-hover);  /* was #e3817d (lighter = worse) */
  --btn-text-color: var(--woi-white);       /* was #faebea */
  --shade-medium: var(--woi-n600);          /* was #808080 eyebrow 3.95:1 */
  --focus-color: var(--woi-ring);           /* was coral; ACSS focus var name NOT VERIFIED - check ACSS > Focus */
}
/* DO NOT PASTE BLINDLY: html { font-size: 100%; }  - staging root computes 10px (62.5%): overrides user font prefs. Rescale ACSS "root font size" to 100% in dashboard FIRST, else this breaks rem sizes. */
/* Wag-On-Inn - Bricks global classes CSS (v1, 2026-11-09). Requires bricks-variables.css.
 * Import: Bricks > Settings > Custom code > Custom CSS (global), then create each class name in the Global Classes manager
 * (empty style panel; CSS lives here) - see HANDOFF-mordecai-bricks.md §3. Mockups in mockups/ load this exact file. */

/* ---------- base ---------- */
html { scroll-padding-top: 6rem; }
body { font-family: var(--woi-font); font-size: var(--woi-fs-body); line-height: var(--woi-lh-body); color: var(--woi-ink); background: var(--woi-white); }
h1,h2,h3,h4 { font-family: var(--woi-font); font-weight: var(--woi-fw-bold); line-height: var(--woi-lh-heading); color: inherit; margin: 0 0 .5em; text-wrap: balance; }
h1 { font-size: var(--woi-fs-h1); } h2 { font-size: var(--woi-fs-h2); } h3 { font-size: var(--woi-fs-h3); } h4 { font-size: var(--woi-fs-h4); }
p { margin: 0 0 1em; max-width: var(--woi-prose); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--woi-link); text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--woi-link-hover); text-decoration-thickness: 2px; }
:focus-visible { outline: var(--woi-ring-width) solid var(--woi-ring); outline-offset: var(--woi-ring-offset); border-radius: 2px; }
.on-dark :focus-visible, .on-photo :focus-visible, .bg-blue :focus-visible, .bg-navy :focus-visible { outline-color: var(--woi-ring-inverse); }
@media (forced-colors: active) { :focus-visible { outline-color: Highlight; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- skip link ---------- */
.woi-skip { position: absolute; left: 1rem; top: -100px; z-index: 1000; background: var(--woi-ink); color: var(--woi-white); padding: .75rem 1.25rem; border-radius: var(--woi-r-s); font-weight: 600; text-decoration: none; min-height: var(--woi-target); display: inline-flex; align-items: center; }
.woi-skip:focus-visible { top: 1rem; outline-color: var(--woi-ring-inverse); outline-offset: 2px; box-shadow: 0 0 0 5px var(--woi-ink); }

/* ---------- layout ---------- */
.woi-section { padding-block: var(--woi-section-m); padding-inline: var(--woi-gutter); }
.woi-section--s { padding-block: var(--woi-section-s); }
.woi-section--l { padding-block: var(--woi-section-l); }
.woi-section--tint { background: var(--woi-blue-tint); }
.woi-section--sky { background: var(--woi-sky); }
.woi-section--n50 { background: var(--woi-n50); }
.woi-container { width: 100%; max-width: var(--woi-container); margin-inline: auto; display: flex; flex-direction: column; gap: var(--woi-space-xl); }
.woi-stack { display: flex; flex-direction: column; gap: var(--woi-space-s); }
.woi-stack--m { gap: var(--woi-space-m); }
.woi-split { display: grid; gap: var(--woi-space-xl); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 992px) { .woi-split { grid-template-columns: 1fr 1fr; } .woi-split--reverse > :first-child { order: 2; } }
.woi-grid { display: grid; gap: var(--woi-space-m); grid-template-columns: 1fr; }
@media (min-width: 768px) { .woi-grid--2, .woi-grid--3, .woi-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .woi-grid--3 { grid-template-columns: repeat(3, 1fr); } .woi-grid--4 { grid-template-columns: repeat(4, 1fr); } }
.woi-center { text-align: center; align-items: center; } .woi-center p { margin-inline: auto; }

/* ---------- type helpers ---------- */
.woi-eyebrow { font-size: var(--woi-fs-sm); font-weight: 600; letter-spacing: var(--woi-ls-eyebrow); text-transform: uppercase; color: var(--woi-link); margin: 0; }
.on-dark .woi-eyebrow, .on-photo .woi-eyebrow { color: var(--woi-n50); }
.woi-lede { font-size: var(--woi-fs-lede); line-height: 1.55; color: var(--woi-ink); }
.on-photo .woi-lede, .on-dark .woi-lede { color: var(--woi-n50); }
.woi-muted { color: var(--woi-n600); }
.woi-hl { background-image: linear-gradient(var(--woi-yellow), var(--woi-yellow)); background-size: 100% .28em; background-repeat: no-repeat; background-position: 0 88%; padding-inline: .05em; }  /* decorative; text stays ink */
.woi-price { font-size: var(--woi-fs-price); font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.woi-price__unit { font-size: var(--woi-fs-sm); font-weight: 600; letter-spacing: .04em; color: var(--woi-n600); }

/* ---------- buttons (Bricks Button element; class on the <a>/<button>) ---------- */
.woi-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: var(--woi-btn-h); min-width: var(--woi-target); padding: .75rem 1.75rem; border: var(--woi-bw-button) solid transparent; border-radius: var(--woi-r-pill);
  font: 700 1rem/1 var(--woi-font); letter-spacing: var(--woi-ls-button); text-transform: uppercase; text-decoration: none; cursor: pointer;
  transition: background-color var(--woi-dur) var(--woi-ease), color var(--woi-dur), border-color var(--woi-dur), box-shadow var(--woi-dur); }
.woi-btn--primary { background: var(--woi-action); color: var(--woi-white); border-color: var(--woi-action); }
.woi-btn--primary:hover { background: var(--woi-action-hover); border-color: var(--woi-action-hover); color: var(--woi-white); }
.woi-btn--primary:active { background: var(--woi-action-active); border-color: var(--woi-action-active); }
.woi-btn--secondary { background: var(--woi-blue); color: var(--woi-white); border-color: var(--woi-blue); }
.woi-btn--secondary:hover { background: var(--woi-blue-hover); border-color: var(--woi-blue-hover); color: var(--woi-white); }
.woi-btn--secondary:active { background: var(--woi-ink); border-color: var(--woi-ink); }
.woi-btn--outline { background: transparent; color: var(--woi-link); border-color: currentColor; }      /* #b93f3a works on white/sky/n50/blue-tint */
.woi-btn--outline:hover { background: var(--woi-coral-tint); color: var(--woi-link-hover); }
.woi-btn--outline:active { background: #f1c2c0; }
.woi-btn--light { background: var(--woi-white); color: var(--woi-ink); border-color: var(--woi-white); }  /* on blue/navy/photo */
.woi-btn--light:hover { background: var(--woi-n50); border-color: var(--woi-n50); color: var(--woi-ink); }
.woi-btn--ghost-light { background: transparent; color: var(--woi-white); border-color: var(--woi-white); } /* on photo w/ overlay, blue, navy */
.woi-btn--ghost-light:hover { background: rgb(255 255 255 / .14); color: var(--woi-white); }
.woi-btn:focus-visible { outline: var(--woi-ring-width) solid var(--woi-ring); outline-offset: 3px; }
.on-dark .woi-btn:focus-visible, .on-photo .woi-btn:focus-visible, .bg-blue .woi-btn:focus-visible, .bg-navy .woi-btn:focus-visible { outline-color: var(--woi-ring-inverse); }
.woi-btn[disabled], .woi-btn[aria-disabled="true"] { background: var(--woi-n200); border-color: var(--woi-n200); color: var(--woi-n700); cursor: not-allowed; box-shadow: none; } /* 8.5:1; disabled is exempt but stays readable */
.woi-btn--sm { min-height: var(--woi-target); padding: .5rem 1.25rem; font-size: .9375rem; }
.woi-btn--block { width: 100%; }
.woi-btn__ext::after { content: "↗"; font-size: .9em; letter-spacing: 0; } /* pair with visible "(opens new tab)" sr-only text */

/* ---------- header / nav ---------- */
.woi-header { position: sticky; top: 0; z-index: 50; background: var(--woi-white); border-bottom: 1px solid var(--woi-n200); padding-inline: var(--woi-gutter); }
.woi-header__inner { max-width: var(--woi-container); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--woi-space-m); min-height: 76px; }
.woi-header__logo img { width: 150px; height: auto; }
.woi-nav { display: none; }
@media (min-width: 992px) { .woi-nav { display: flex; align-items: center; gap: .25rem; } }
.woi-nav__link { display: inline-flex; align-items: center; min-height: var(--woi-target); padding: .5rem .875rem; color: var(--woi-ink); font-size: 1rem; font-weight: 600; letter-spacing: var(--woi-ls-nav); text-transform: uppercase; text-decoration: none; border-radius: var(--woi-r-s); }
.woi-nav__link:hover { color: var(--woi-link); background: var(--woi-coral-tint); }
.woi-nav__link[aria-current="page"] { color: var(--woi-link); box-shadow: inset 0 -3px 0 var(--woi-action); }
.woi-nav__sub { min-width: 260px; background: var(--woi-white); border: 1px solid var(--woi-n200); border-radius: var(--woi-r-m); box-shadow: var(--woi-shadow-m); padding: .5rem; }
.woi-nav__sub a { display: flex; min-height: var(--woi-target); align-items: center; padding: .5rem .75rem; color: var(--woi-ink); text-decoration: none; border-radius: var(--woi-r-s); text-transform: none; letter-spacing: 0; }
.woi-nav__sub a:hover { background: var(--woi-sky); color: var(--woi-link); }
.woi-header__toggle { min-width: 48px; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border: 2px solid var(--woi-ink); border-radius: var(--woi-r-pill); background: var(--woi-white); color: var(--woi-ink); font: 600 .9375rem var(--woi-font); padding-inline: 1rem; }
@media (min-width: 992px) { .woi-header__toggle { display: none; } }
.woi-mobile-menu { background: var(--woi-white); padding: var(--woi-space-m); } /* Bricks Offcanvas; light bg so ring = ink */
.woi-mobile-menu a { display: flex; min-height: 48px; align-items: center; color: var(--woi-ink); font-size: 1.125rem; font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--woi-n200); }

/* ---------- hero (photo) ---------- */
.woi-hero { position: relative; isolation: isolate; color: var(--woi-n50); padding: var(--woi-hero-pad) var(--woi-gutter); background-size: cover; background-position: center; }
.woi-hero::before { content: ""; position: absolute; inset: 0; background: var(--woi-overlay); z-index: -1; } /* MANDATORY 0.60 */
.woi-hero__inner { max-width: var(--woi-container); margin-inline: auto; display: flex; flex-direction: column; gap: var(--woi-space-s); align-items: flex-start; }
.woi-hero h1 { color: var(--woi-n50); max-width: 16ch; margin: 0; }
.woi-hero p { color: var(--woi-n50); font-size: var(--woi-fs-lede); line-height: 1.55; max-width: 52ch; }
.woi-hero--page { padding-block: var(--woi-section-l); }          /* inner pages: shorter */
.woi-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
/* .woi-hero also carries .on-photo so focus rings flip to white */

/* ---------- cards ---------- */
.woi-card { background: var(--woi-sky); border: var(--woi-bw-card) solid var(--woi-blue-light); border-radius: var(--woi-r-l); padding: var(--woi-space-m); display: flex; flex-direction: column; gap: var(--woi-space-xs); }
.woi-card--white { background: var(--woi-white); border-color: var(--woi-n200); box-shadow: var(--woi-shadow-s); }
.woi-card--featured { background: var(--woi-blue); border-color: var(--woi-blue); color: var(--woi-white); } /* add .on-dark */
.woi-card--featured .woi-price__unit, .woi-card--featured p { color: var(--woi-white); }
.woi-card__media { border-radius: var(--woi-r-m); overflow: hidden; aspect-ratio: 4/3; margin: calc(var(--woi-space-m) * -1) calc(var(--woi-space-m) * -1) var(--woi-space-xs); border-radius: var(--woi-r-l) var(--woi-r-l) 0 0; }
.woi-card__media img { width: 100%; height: 100%; object-fit: cover; }
.woi-card__title { font-size: var(--woi-fs-h3); margin: 0; }
.woi-card__meta { font-weight: 700; color: var(--woi-ink); }
/* Whole-card link: ONE <a> on the title, stretched. Never wrap card in <a> containing other links (fixes axe nested-interactive). */
.woi-card--link { position: relative; transition: box-shadow var(--woi-dur), transform var(--woi-dur); }
.woi-card--link .woi-card__title a { color: var(--woi-ink); text-decoration: none; }
.woi-card--link .woi-card__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.woi-card--link:hover { box-shadow: var(--woi-shadow-m); }
.woi-card--link:hover .woi-card__title a { color: var(--woi-link); text-decoration: underline; }
.woi-card--link:has(a:focus-visible) { outline: var(--woi-ring-width) solid var(--woi-ring); outline-offset: 3px; }
.woi-card--link a:focus-visible { outline: none; }
@media (prefers-reduced-motion: no-preference) { .woi-card--link:hover { transform: translateY(-2px); } }

/* price card */
.woi-price-card { text-align: left; gap: var(--woi-space-s); }
.woi-price-card .woi-btn { margin-top: auto; align-self: flex-start; }
.woi-price-note { font-size: var(--woi-fs-sm); color: var(--woi-n600); }
.woi-card--featured .woi-price-note { color: var(--woi-white); }

/* service/price list rows (grooming) */
.woi-menu-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.woi-menu-item { display: grid; grid-template-columns: 1fr auto; gap: .25rem 1.5rem; padding-block: var(--woi-space-s); border-bottom: 1px solid var(--woi-n200); }
.woi-menu-item__name { font-weight: 700; font-size: var(--woi-fs-h4); margin: 0; }
.woi-menu-item__price { font-weight: 700; white-space: nowrap; color: var(--woi-ink); }
.woi-menu-item__desc { grid-column: 1 / -1; margin: 0; color: var(--woi-n700); }

/* feature (icon + text) */
.woi-feature { display: grid; grid-template-columns: 3rem 1fr; gap: var(--woi-space-s); align-items: start; }
.woi-feature__icon { width: 3rem; height: 3rem; border-radius: 50%; background: var(--woi-coral-tint); color: var(--woi-coral-deco); display: grid; place-items: center; } /* aria-hidden icon */

/* process steps */
.woi-steps { counter-reset: step; list-style: none; padding: 0; margin: 0; display: grid; gap: var(--woi-space-m); }
@media (min-width: 992px) { .woi-steps { grid-template-columns: repeat(3, 1fr); } }
.woi-step { counter-increment: step; background: var(--woi-white); border: 1px solid var(--woi-n200); border-radius: var(--woi-r-l); padding: var(--woi-space-m); display: flex; flex-direction: column; gap: var(--woi-space-xs); }
.woi-step::before { content: counter(step); width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--woi-blue); color: var(--woi-white); font-weight: 700; display: grid; place-items: center; }
.woi-step__price { font-size: var(--woi-fs-h3); font-weight: 700; margin-top: auto; }

/* testimonial */
.woi-quote { background: var(--woi-white); border-radius: var(--woi-r-l); padding: var(--woi-space-m); box-shadow: var(--woi-shadow-s); display: flex; flex-direction: column; gap: var(--woi-space-s); margin: 0; }
.woi-quote blockquote { margin: 0; } .woi-quote p { margin: 0; }
.woi-quote__title { font-weight: 700; font-size: var(--woi-fs-h4); }
.woi-quote figcaption { font-weight: 600; color: var(--woi-n600); }
.woi-stars { color: #8a6d00; letter-spacing: .1em; } /* MOD: gold that passes 3:1 as graphic (4.92:1 on white); stars aria-hidden + sr text "5 out of 5" */

/* hours table - Katia review round2 */
table.woi-hours {
  width: 100%;
  max-width: 40rem;
  border-collapse: collapse;
  font-family: "Outfit", system-ui, sans-serif;
  font-size: var(--text-base, 1rem);
  line-height: 1.5;
  color: inherit;
}
table.woi-hours caption {
  caption-side: top;
  text-align: left;
  padding-bottom: var(--space-xs, 0.5rem);
  font-size: var(--text-s, 0.875rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.75;
}
table.woi-hours th,
table.woi-hours td {
  padding: var(--space-xs, 0.5rem) var(--space-s, 0.75rem);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  vertical-align: top;
  text-align: left;
}
table.woi-hours th[scope="row"] { font-weight: 600; white-space: nowrap; }
table.woi-hours thead th {
  font-size: var(--text-s, 0.875rem);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
table.woi-hours tr:last-child > * { border-bottom: 0; }
.woi-hours-wrap { width: 100%; }
@media (max-width: 480px) {
  table.woi-hours { max-width: none; font-size: var(--text-s, 0.9375rem); }
  table.woi-hours th,
  table.woi-hours td { padding: var(--space-xs, 0.5rem) var(--space-2xs, 0.25rem); }
  table.woi-hours th[scope="row"] { white-space: normal; }
}

/* callout (external / notice) */
.woi-callout { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--woi-space-s); padding: var(--woi-space-m); border-radius: var(--woi-r-l); background: var(--woi-coral-tint); border-left: 6px solid var(--woi-action); }
.woi-callout p { margin: 0; }
.woi-callout--info { background: var(--woi-blue-tint); border-left-color: var(--woi-blue); }

/* accordion (FAQ) - use Bricks "Accordion (nestable)" so title is a real <button>; or native <details>. */
.woi-accordion { display: flex; flex-direction: column; gap: .75rem; }
.woi-accordion__item { background: var(--woi-white); border: 1px solid var(--woi-n200); border-radius: var(--woi-r-m); }
.woi-accordion__trigger { all: unset; box-sizing: border-box; width: 100%; min-height: var(--woi-target); display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.25rem; font: 700 var(--woi-fs-h4)/1.3 var(--woi-font); color: var(--woi-ink); cursor: pointer; border-radius: var(--woi-r-m); }
.woi-accordion__trigger:hover { color: var(--woi-link); }
.woi-accordion__trigger:focus-visible { outline: var(--woi-ring-width) solid var(--woi-ring); outline-offset: 2px; }
.woi-accordion__trigger::after { content: "+"; font-size: 1.5rem; line-height: 1; transition: transform var(--woi-dur); }
.woi-accordion__trigger[aria-expanded="true"]::after, details[open] > .woi-accordion__trigger::after { transform: rotate(45deg); }
.woi-accordion__panel { padding: 0 1.25rem 1.25rem; }

/* CTA band */
.woi-cta { background: var(--woi-blue); color: var(--woi-white); border-radius: var(--woi-r-xl); padding: var(--woi-space-xl) var(--woi-space-l); text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--woi-space-s); }
.woi-cta h2, .woi-cta p { color: var(--woi-white); margin-inline: auto; }
/* .woi-cta carries .on-dark */

/* contact items */
.woi-contact-item { display: grid; grid-template-columns: 2.75rem 1fr; gap: .75rem; align-items: start; }
.woi-contact-item a { font-weight: 600; }

/* footer */
.woi-footer { background: var(--woi-n50); color: var(--woi-ink); padding: var(--woi-section-m) var(--woi-gutter) var(--woi-space-l); }
.woi-footer__grid { max-width: var(--woi-container); margin-inline: auto; display: grid; gap: var(--woi-space-l); grid-template-columns: 1fr; }
@media (min-width: 768px) { .woi-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.woi-footer h2 { font-size: var(--woi-fs-h4); margin-bottom: .75rem; }
.woi-footer ul { list-style: none; margin: 0; padding: 0; }
.woi-footer li a { display: inline-flex; align-items: center; min-height: var(--woi-target); color: var(--woi-ink); text-decoration: none; } /* fixes 23px footer targets */
.woi-footer li a:hover { color: var(--woi-link); text-decoration: underline; }
.woi-footer__bottom { max-width: var(--woi-container); margin: var(--woi-space-l) auto 0; padding-top: var(--woi-space-s); border-top: 1px solid var(--woi-n200); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; font-size: var(--woi-fs-sm); color: var(--woi-n600); }
.woi-social { display: flex; gap: .5rem; }
.woi-social a { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--woi-white); color: var(--woi-ink); border: 1px solid var(--woi-n200); }
.woi-social a:hover { color: var(--woi-link); border-color: var(--woi-link); }

/* media */
.woi-photo { border-radius: var(--woi-r-xl); overflow: hidden; aspect-ratio: 4/3; box-shadow: var(--woi-shadow-m); }
.woi-photo img { width: 100%; height: 100%; object-fit: cover; }
.woi-map { border-radius: var(--woi-r-l); overflow: hidden; border: 1px solid var(--woi-n200); }

/* ---------- forms (Bricks Form element: add class to the form wrapper) ---------- */
.woi-form { display: grid; gap: var(--woi-space-s); }
.woi-form__row { display: grid; gap: var(--woi-space-s); grid-template-columns: 1fr; }
@media (min-width: 768px) { .woi-form__row--2 { grid-template-columns: 1fr 1fr; } }
.woi-field { display: flex; flex-direction: column; gap: .375rem; }
.woi-label, .woi-form label { font-size: var(--woi-fs-sm); font-weight: 600; color: var(--woi-ink); }
.woi-req { color: var(--woi-danger); font-weight: 700; } /* "*" + sr-only "required" */
.woi-hint { font-size: var(--woi-fs-sm); color: var(--woi-n600); margin: 0; }
.woi-input, .woi-form input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=file]), .woi-form select, .woi-form textarea {
  font: 400 1rem/1.5 var(--woi-font); color: var(--woi-ink); background: var(--woi-white); min-height: var(--woi-input-h); padding: .625rem .875rem;
  border: var(--woi-bw-input) solid var(--woi-border-input); border-radius: var(--woi-r-input); width: 100%; transition: border-color var(--woi-dur), box-shadow var(--woi-dur); }
.woi-form textarea { min-height: 8rem; resize: vertical; }
.woi-form ::placeholder { color: var(--woi-n600); opacity: 1; } /* 5.98:1; use only for format examples */
.woi-form input:hover, .woi-form select:hover, .woi-form textarea:hover { border-color: var(--woi-ink); }
.woi-form input:focus-visible, .woi-form select:focus-visible, .woi-form textarea:focus-visible { outline: var(--woi-ring-width) solid var(--woi-ring); outline-offset: 2px; border-color: var(--woi-ink); }
.woi-form [aria-invalid="true"] { border: var(--woi-bw-input-focus) solid var(--woi-danger); background: var(--woi-white); }
.woi-form :disabled { background: var(--woi-n50); color: var(--woi-n700); border-color: var(--woi-n200); cursor: not-allowed; }
.woi-error { display: flex; gap: .375rem; align-items: flex-start; font-size: var(--woi-fs-sm); font-weight: 600; color: var(--woi-danger); margin: 0; }
.woi-error::before { content: "!"; flex: none; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--woi-danger); color: var(--woi-white); font-size: .8125rem; display: grid; place-items: center; } /* icon + text, not colour alone */
.woi-choice { display: flex; align-items: center; gap: .625rem; min-height: var(--woi-target); }
.woi-choice input { width: 1.25rem; height: 1.25rem; accent-color: var(--woi-action); margin: 0; }
.woi-fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: .25rem; }
.woi-fieldset legend { font-size: var(--woi-fs-sm); font-weight: 600; margin-bottom: .25rem; padding: 0; }
.woi-error-summary { border: 2px solid var(--woi-danger); background: var(--woi-danger-bg); border-radius: var(--woi-r-m); padding: var(--woi-space-s) var(--woi-space-m); }
.woi-error-summary h2 { font-size: var(--woi-fs-h4); color: var(--woi-danger); margin: 0 0 .5rem; }
.woi-error-summary a { color: var(--woi-danger); font-weight: 600; }
.woi-error-summary:focus-visible { outline: var(--woi-ring-width) solid var(--woi-ring); outline-offset: 2px; }
.woi-success { border: 2px solid var(--woi-success); background: var(--woi-success-bg); color: var(--woi-ink); border-radius: var(--woi-r-m); padding: var(--woi-space-m); }
.woi-success h2 { color: var(--woi-success); font-size: var(--woi-fs-h3); }
.woi-steps-progress { display: flex; gap: .5rem; list-style: none; padding: 0; margin: 0 0 var(--woi-space-s); font-size: var(--woi-fs-sm); }
.woi-steps-progress li { flex: 1; padding-top: .5rem; border-top: 4px solid var(--woi-n200); color: var(--woi-n600); }
.woi-steps-progress li[aria-current="step"] { border-top-color: var(--woi-action); color: var(--woi-ink); font-weight: 700; }
.woi-steps-progress li.is-done { border-top-color: var(--woi-blue); color: var(--woi-ink); }
.woi-file { border: 2px dashed var(--woi-border-input); border-radius: var(--woi-r-m); padding: var(--woi-space-s); background: var(--woi-sky); }
.woi-hp { position: absolute !important; left: -9999px !important; } /* honeypot wrapper; aria-hidden + tabindex=-1 on input */

/* ---------- surface modifiers (set ring colour) ---------- */
.bg-blue { background: var(--woi-blue); color: var(--woi-white); }
.bg-navy { background: var(--woi-navy); color: var(--woi-white); }
.on-dark, .on-photo { color: var(--woi-white); }
.on-dark a:not(.woi-btn), .on-photo a:not(.woi-btn) { color: var(--woi-white); }

/* ===== Round 2: hero photo overlay 0.60 (Katia) + form a11y ===== */
.fr-hero-alpha::before,
.ejgpea::before,
[class*="hero"][style*="background"]::before {
  /* applied via on-photo / explicit below */
}
/* Photo hero sections that use Frames ejgpea + background image */
.ejgpea.woi-has-photo-bg,
.ejgpea.on-photo,
section.ejgpea {
  position: relative;
  isolation: isolate;
}
section.ejgpea::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 0.60);
  pointer-events: none;
  z-index: 0;
}
section.ejgpea > * {
  position: relative;
  z-index: 1;
}

/* Hero overflow fix */
.fr-hero-foxtrot__lede {
  max-width: min(682px, 100%);
}

/* Form system */
.woi-form { max-width: 40rem; }
.woi-form label { display: block; color: #101923; font-size: 1rem; font-weight: 600; margin-bottom: 0.25rem; }
.woi-form .woi-hint { color: #5c6470; font-size: 0.875rem; margin: 0 0 0.5rem; }
.woi-form input, .woi-form textarea, .woi-form select {
  width: 100%; min-height: 48px; border: 1px solid #767676; border-radius: 0.5rem;
  padding: 0.75rem 1rem; font: inherit; color: #101923; background: #fff;
}
.woi-form textarea { min-height: 8rem; }
.woi-form .woi-field { margin-bottom: 1.25rem; }
.woi-form .woi-req { color: #c24a45; }
.woi-form .woi-hp {
  position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important;
  overflow: hidden !important;
}
.woi-form .woi-error-summary { border: 2px solid #b02a37; background: #fdecee; padding: 1rem; margin-bottom: 1.5rem; }
.woi-form .woi-error { color: #b02a37; font-size: 0.875rem; margin: 0.25rem 0 0; }
.woi-form [aria-invalid="true"] { border-color: #b02a37; }
.woi-success { border: 2px solid #1e7e34; background: #e8f5ec; padding: 1.5rem; }
.woi-steps-progress { display: flex; gap: 0.75rem; list-style: none; padding: 0; flex-wrap: wrap; }
.woi-steps-progress [aria-current="step"] { font-weight: 700; text-decoration: underline; }
.woi-form fieldset { border: 1px solid #d9d9d9; padding: 1rem; margin: 0 0 1.25rem; border-radius: 0.5rem; }
.woi-form legend { font-weight: 700; padding: 0 0.5rem; }
.woi-file-list { list-style: none; padding: 0; }
.woi-file-list li { display: flex; align-items: center; gap: 0.75rem; min-height: 44px; }
.woi-map-embed { width: 100%; min-height: 360px; border: 0; border-radius: 0.75rem; }

/* a11y: ensure footer link names / contrast helpers */
.fr-footer-alpha__link { color: #101923; }
.fr-social-alpha__icon-wrapper { min-width: 44px; min-height: 44px; }

/* ===== Round2 axe zero ===== */
.bricks-button.btn--action,
.btn--action.bricks-button,
a.bricks-button.btn--action,
button.btn--action {
  color: #ffffff !important;
  background-color: #c24a45 !important;
}
.bricks-button.btn--action:hover,
.btn--action.bricks-button:hover { color: #ffffff !important; }

/* Bricks form labels must meet 4.5:1 */
.brxe-form label,
.brxe-form .form-group > .label,
.brxe-form .form-group > label {
  color: #101923 !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
}

/* Bricks forms (frontend-light mode: Bricks' own form.min.css covers the required asterisk
 * (.required:after) and the options-wrapper bullets/stacking already; this fills the rest. */
.brxe-form .options-wrapper li {
  min-height: 44px;
}
.brxe-form input:not([type="radio"]):not([type="file"]),
.brxe-form textarea {
  border: 1px solid #767676;
}
.brxe-form .file-result svg {
  height: 1em;
}
.brxe-form button[type="submit"].bricks-button {
  color: #ffffff !important;
  background-color: #c24a45 !important;
}
.brxe-form button[type="submit"].bricks-button:hover {
  color: #ffffff !important;
}
.brxe-form .form-group h3 {
  margin-top: var(--woi-space-m);
}

/* Bricks form state contrast fixes (Bricks' own form.min.css defaults fail WCAG):
 * success text #1e7e34 on #e8f5ec (--woi-success on --woi-success-bg): 4.57:1
 * danger text #b02a37 on #fdecee (--woi-danger on --woi-danger-bg): 5.69:1
 * placeholder #767676 (--woi-border-input) on white: 4.54:1
 * required marker #c24a45 (--woi-action) on white: 4.82:1
 */
.brxe-form .message.success,
.brxe-form .message.success .text,
.brxe-form .message.success .close {
  color: var(--woi-success);
  background-color: var(--woi-success-bg);
}
.brxe-form .message.error,
.brxe-form .message.error .text,
.brxe-form .message.error .close,
.brxe-form .form-group-error-message,
.brxe-form .brxe-alert.danger {
  color: var(--woi-danger);
  background-color: var(--woi-danger-bg);
}
.brxe-form .message .close:focus-visible {
  outline: var(--woi-ring-width) solid var(--woi-ring);
  outline-offset: var(--woi-ring-offset);
}
.brxe-form ::placeholder {
  color: var(--woi-border-input);
  opacity: 1;
}
.brxe-form .required::after {
  color: var(--woi-action);
}

/* Get-started cards: ink text on light blue */
.card-get-started .brxe-heading,
.brxe-block.card-get-started .brxe-heading,
#brxe-kiayfm .brxe-heading,
#brxe-kiayfm h3 {
  color: #101923 !important;
}

/* Social icon links: ensure min size */
.fr-social-alpha__icon-wrapper {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Map embed */
.woi-map-embed { width: 100%; min-height: 360px; border: 0; border-radius: 0.75rem; display: block; }
.fr-contact-card-alpha__map { min-height: 360px; }

/* LAUNCH-FIX 2026-11-09: SPEC section 1, photo hero overlay (exact). Supersedes the older .woi-hero::before z-index -1 rule above. */
:root {
  --woi-overlay-alpha: 0.60;
  --woi-overlay: rgb(0 0 0 / var(--woi-overlay-alpha));
}
.fr-hero-foxtrot,
.woi-hero {
  position: relative;
  isolation: isolate;
}
.fr-hero-foxtrot::before,
.woi-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--woi-overlay);
}
.fr-hero-foxtrot > *,
.woi-hero > * {
  position: relative;
  z-index: 1;
}
/* Backup only, on top of the overlay. */
.fr-hero-foxtrot :is(h1, p, .brxe-text-basic),
.woi-hero :is(h1, p, .brxe-text-basic) {
  text-shadow: 0 1px 2px rgb(16 25 35 / 0.45);
}

/* LAUNCH-FIX 2026-11-09: SPEC section 2, Existing Customers card (#367395): white heading, 5.19:1.
 * Doubled id beats ".card-get-started .brxe-heading { color: #101923 !important }" above.
 * New Customers (#brxe-kiayfm, #c7deeb) keeps ink. */
#brxe-ejehra#brxe-ejehra {
  color: #ffffff !important;
}

/* LAUNCH-FIX 2026-11-09: SPEC section 3, neutralize the yellow highlight bar.
 * !important beats any legacy inset highlight rule (.highlight { box-shadow: inset 0 -0.75rem #f5da51; }). */
h1 .highlight,
h2 .highlight,
h3 .highlight,
h4 .highlight,
h5 .highlight,
h6 .highlight,
.highlight {
  box-shadow: none !important;
  background-image: none !important;
  background-color: transparent !important;
}

/* LAUNCH-FIX 2026-11-09: heading-order tag changes (h4 to h2 on Contact, h3 to h2 on Get Started) with no visual change.
 * Specificity is (0,0,2): it beats plain tag rules (automatic.css "h2 { font-size: var(--h2) }", the h1-h4 rules above)
 * and loses to any class rule, so class styling that applies today keeps applying.
 * Values are the current computed ones from AUDIT.md: Contact 18px @1440 / 16.13px @390 = ACSS --h5;
 * Get Started 30px @1440 / 20.5px @390 = --woi-fs-h3. Weight 700. Line-height and margin are what the
 * h1-h4 base rule above gives today (same for h2, h3 and h4). */
html :where(body.page-id-35) h2:where(.fr-contact-info-bravo__heading) {
  font-size: var(--h5);
  line-height: var(--woi-lh-heading);
  font-weight: 700;
  margin: 0 0 .5em;
}
html h2:where(#brxe-ejehra),
html :where(#brxe-kiayfm) > h2:where(.brxe-heading) {
  font-size: var(--woi-fs-h3);
  line-height: var(--woi-lh-heading);
  font-weight: 700;
  margin: 0 0 .5em;
}

/* LAUNCH-FIX 2026-11-09: "Online scheduling" placeholder ([woi_sched_soon], see functions.php).
 * Box matches the ACSS CTAs ([class*="btn--"] in automatic.css): same padding, radius, font size, weight,
 * letter-spacing, line-height, min-width. CTAs have a 2px border, this one 1px dashed, so padding is +1px
 * per side and the outer size is the same.
 * Label #595959 on #f2f2f2 = 6.26:1 (--neutral-medium-dark is not defined in automatic.css, so the fallback is used).
 * Every state is pinned to the same look: no hover, focus, active or shadow change. */
.woi-sched-soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  width: 100%;
  text-align: center;
}
.woi-btn.woi-btn--soon,
.woi-btn.woi-btn--soon:is(:hover, :focus, :focus-visible, :active, :disabled, [aria-disabled="true"]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  min-width: var(--btn-min-width);
  min-inline-size: var(--btn-min-width);
  max-width: 100%;
  padding-block: calc(var(--btn-padding-block) + 1px);
  padding-inline: calc(var(--btn-padding-inline) + 1px);
  border: 1px dashed var(--neutral-light, #d9d9d9);
  border-radius: var(--btn-radius, var(--radius));
  background: var(--neutral-ultra-light, #f2f2f2);
  color: var(--neutral-medium-dark, #595959);
  font-family: inherit;
  font-size: var(--btn-font-size, var(--text-m));
  font-style: var(--btn-font-style);
  font-weight: var(--btn-font-weight);
  line-height: var(--btn-line-height);
  letter-spacing: var(--btn-letter-spacing);
  text-transform: var(--btn-text-transform);
  text-decoration: none;
  opacity: 1;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
  outline: none;
  filter: none;
  transition: none;
}
.woi-btn__note {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: var(--neutral-dark, #404040);
  white-space: normal;
}
:has(> #brxe-ejehra) .woi-btn__note { color: #ffffff; }