/* =========================================================================
 * sb-base.css — reset, layout primitives, header/nav/footer, buttons.
 * Scoped under `.sb-*`; safe to load alongside Elementor without collisions.
 * Mobile-first (NFR-001). WCAG 2.2 AA focus visibility throughout.
 * ========================================================================= */

/* ---- Reset-ish (light touch; Hello Elementor ships a minimal reset) ------ */
.sb-app *,
.sb-header *,
.sb-footer * { box-sizing: border-box; }

.sb-main { display: block; }

/* The `hidden` attribute must actually hide, everywhere.
 *
 * `[hidden]` is a *user-agent* rule, so ANY author rule that sets `display`
 * silently defeats it — and this codebase sets `display` on almost every
 * component. `.sb-authform { display: grid }` did exactly that: the account
 * template correctly emits `hidden` on the two inactive panels, and the login
 * page still rendered the sign-in, register AND forgot-password forms stacked on
 * top of each other, with the tablist claiming one was selected.
 *
 * This was previously patched per component (`.sb-alert[hidden]`,
 * `.sb-state[hidden]`, `.sb-search-map[hidden]`), which fixes whichever case
 * someone noticed and leaves the rest — every `hidden` in the templates and in
 * the JS is a latent instance. One global rule closes the class.
 *
 * `!important` is deliberate and is the standard remedy: `hidden` is a semantic
 * statement, not a style suggestion, and nothing should be able to override it
 * short of removing the attribute (which is what the JS does when it shows an
 * element). */
[hidden] { display: none !important; }

body.sb-app {
  color: var(--sb-text);
  font-family: var(--sb-font-sans);
  font-size: var(--sb-fs-base);
  line-height: var(--sb-lh-base);
  background: var(--sb-bg);
  -webkit-font-smoothing: antialiased;
}

/* ---- Accessibility utilities ---- */
.sb-screen-reader,
.sb-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* Element-qualified so the generic link colour cannot repaint it: the skip link
 * sets a claret background, and `.sb-app a` set claret text on top of it —
 * invisible, and it is the first thing a keyboard user reaches. */
a.sb-skip-link {
  position: absolute;
  left: -999px; top: 0;
  z-index: 1000;
  background: var(--sb-primary);
  color: #fff;
  padding: var(--sb-sp-3) var(--sb-sp-4);
  border-radius: 0 0 var(--sb-radius) 0;
  text-decoration: none;
}
.sb-skip-link:focus { left: 0; }

/* Global visible focus (WCAG 2.2 — focus not obscured, clearly visible) */
.sb-app a:focus-visible,
.sb-app button:focus-visible,
.sb-app input:focus-visible,
.sb-app select:focus-visible,
.sb-app textarea:focus-visible,
.sb-app [tabindex]:focus-visible,
.sb-header a:focus-visible,
.sb-header button:focus-visible,
.sb-footer a:focus-visible {
  outline: none;
  box-shadow: var(--sb-focus);
  border-radius: var(--sb-radius-sm);
}

/* ---- Layout ---- */
.sb-container {
  width: 100%;
  max-width: var(--sb-container);
  margin-inline: auto;
  padding-inline: var(--sb-sp-4);
}
.sb-container--narrow { max-width: var(--sb-container-narrow); }

.sb-section { padding-block: var(--sb-sp-7); }
.sb-section--tight { padding-block: var(--sb-sp-6); }
.sb-section--alt { background: var(--sb-bg-alt); }

/* ---- Typography ---- */
.sb-app h1, .sb-app h2, .sb-app h3, .sb-app h4 {
  font-family: var(--sb-font-head);
  color: var(--sb-ink-900);
  line-height: var(--sb-lh-tight);
  letter-spacing: -.012em;
  margin: 0 0 var(--sb-sp-3);
  font-weight: var(--sb-fw-semibold);
  text-wrap: balance;
}
.sb-app h1 { font-size: var(--sb-fs-2xl); }
.sb-app h2 { font-size: var(--sb-fs-xl); }
.sb-app h3 { font-size: var(--sb-fs-lg); }
.sb-app p { margin: 0 0 var(--sb-sp-4); }

/* Link colour is scoped AWAY from anything wearing .sb-btn.
 *
 * Plain `.sb-app a` is (0,1,1) and `.sb-btn--primary` is (0,1,0), so the link
 * rule used to win on every anchor styled as a button — which rendered the
 * header CTA claret-on-claret (contrast 1.0:1, literally invisible) in both the
 * signed-in and signed-out states, on every page.
 *
 * The exclusion is wrapped in `:where()` because `:where()` contributes ZERO
 * specificity, so this rule stays at (0,1,1). A bare `:not(.sb-btn)` would have
 * raised it to (0,2,1) and then outranked every component link rule in the
 * theme — it repainted the language switcher's active chip and the footer links
 * claret the moment it was tried. Excluding buttons must not cost specificity.
 *
 * Chrome link rules (`a.sb-nav__link`, `a.sb-footer__link`,
 * `a.sb-langswitch__item`, `a.sb-row__link`) are element-qualified to (0,1,1)
 * and declared later, so they win on source order. Keep that qualifier when
 * adding one — and if the rule must live ABOVE this one, add its class to the
 * `:where()` list instead, which is why `.sb-skip-link` is there. */
.sb-app a:not(:where(.sb-btn, .sb-skip-link)) { color: var(--sb-claret-700); text-decoration-thickness: 1px; text-underline-offset: 2px; }
.sb-app a:not(:where(.sb-btn, .sb-skip-link)):hover { color: var(--sb-claret-600); }

.sb-lead { font-size: var(--sb-fs-md); color: var(--sb-text-muted); }
.sb-eyebrow {
  text-transform: uppercase; letter-spacing: var(--sb-track-label);
  font-size: var(--sb-fs-xxs); font-weight: var(--sb-fw-semibold);
  color: var(--sb-claret-700);
}

/* ---- Icons ---- */
.sb-icon { display: inline-block; vertical-align: middle; flex: none; }

/* =========================================================================
 * Header + navigation
 * ========================================================================= */
.sb-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--sb-surface);
  border-bottom: 1px solid var(--sb-border);
}
.sb-header__inner {
  display: flex; align-items: center; gap: var(--sb-sp-6);
  min-height: var(--sb-header-h);
}

.sb-brand {
  display: inline-flex; align-items: center; gap: var(--sb-sp-3);
  color: var(--sb-ink-900); text-decoration: none;
  flex: none;
}
.sb-brand__name {
  font-family: var(--sb-font-head);
  font-size: var(--sb-fs-lg);
  font-weight: var(--sb-fw-bold);
  letter-spacing: -.008em;
  line-height: 1;
  color: var(--sb-ink-900);
  white-space: nowrap; /* the brand used to break onto two lines too */
}
.sb-logo { color: var(--sb-claret-700); }

.sb-nav {
  margin-left: auto;
  display: flex; align-items: center; gap: var(--sb-sp-5);
}
.sb-nav__list {
  display: flex; align-items: center;
  gap: clamp(var(--sb-sp-4), 2.4vw, var(--sb-sp-6));
  list-style: none; margin: 0; padding: 0;
}

/* THE WRAP FIX.
 * Nav items had no `nowrap` and the row had no width budget, so "Find a stable"
 * broke after "Find a" and every item sat at a different height. Pinning each
 * link to one line and letting the row collapse to the menu button below 900px
 * is the whole remedy — the items never wrap, the nav disappears instead. */
a.sb-nav__link {
  color: var(--sb-ink-500); text-decoration: none; font-weight: var(--sb-fw-medium);
  font-size: var(--sb-fs-sm);
  white-space: nowrap;
  padding-block: var(--sb-sp-2);
  border-bottom: 1.5px solid transparent;
  transition: color var(--sb-transition), border-color var(--sb-transition);
}
a.sb-nav__link:hover { color: var(--sb-ink-900); border-bottom-color: var(--sb-brass-500); }
a.sb-nav__link[aria-current], .current-menu-item > a.sb-nav__link {
  color: var(--sb-ink-900); border-bottom-color: var(--sb-claret-700);
}

/* Utilities sit behind a rule so the nav has somewhere to end. */
.sb-nav__actions {
  display: flex; align-items: center; gap: var(--sb-sp-3);
  padding-left: var(--sb-sp-5);
  border-left: 1px solid var(--sb-border);
  align-self: stretch;
  margin-block: var(--sb-sp-4);
}

/* Nav toggle (mobile) */
button.sb-nav-toggle {
  display: none;
  margin-left: auto;
  width: 44px; height: 44px;
  border: 1px solid var(--sb-border); border-radius: var(--sb-radius-sm);
  background: #fff; cursor: pointer;
  position: relative;
}
button.sb-nav-toggle:hover, button.sb-nav-toggle:focus {
  background: var(--sb-surface-3);
  border-color: var(--sb-line-strong);
  color: var(--sb-ink-900);
}

.sb-nav-toggle__bar,
.sb-nav-toggle__bar::before,
.sb-nav-toggle__bar::after {
  position: absolute; left: 50%; top: 50%;
  width: 20px; height: 2px; background: var(--sb-ink-700);
  transform: translate(-50%, -50%);
  transition: var(--sb-transition);
}
.sb-nav-toggle__bar::before { content: ""; transform: translate(-50%, -8px); }
.sb-nav-toggle__bar::after  { content: ""; transform: translate(-50%, 6px); }
.sb-nav-toggle[aria-expanded="true"] .sb-nav-toggle__bar { background: transparent; }
.sb-nav-toggle[aria-expanded="true"] .sb-nav-toggle__bar::before { transform: translate(-50%, -50%) rotate(45deg); }
.sb-nav-toggle[aria-expanded="true"] .sb-nav-toggle__bar::after  { transform: translate(-50%, -50%) rotate(-45deg); }

/* Language switcher */
.sb-langswitch { display: inline-flex; gap: 2px; }
a.sb-langswitch__item {
  font-size: var(--sb-fs-xs); font-weight: var(--sb-fw-semibold);
  letter-spacing: .05em;
  padding: 4px 7px; border-radius: var(--sb-radius-sm);
  color: var(--sb-ink-400); text-decoration: none; line-height: 1.4;
  white-space: nowrap;
}
a.sb-langswitch__item:hover { color: var(--sb-ink-900); }
a.sb-langswitch__item.is-current { background: var(--sb-claret-700); color: #fff; }

/* =========================================================================
 * Buttons
 * ========================================================================= */
/* Every variant is declared on `a.sb-btn` AND `button.sb-btn` together.
 *
 * Two live defects came from single-class button rules losing the cascade:
 *   1. `.sb-app a` (0,1,1) beat `.sb-btn--primary` (0,1,0)  → invisible CTA.
 *   2. Hello Elementor's reset ships
 *      `button:hover, [type=submit]:focus { background-color:#c36 }` (0,1,1),
 *      which beat `.sb-btn--primary:hover` → every button in the app turned
 *      Elementor pink on hover and on focus.
 * Qualifying with the element name makes these rules (0,1,1) as well, so a link
 * rule and a parent-theme reset can no longer outrank them. Neither defect is
 * visible to any test in this repo: both lanes assert on markup and HTTP, never
 * on computed style. Keep the element qualifiers when adding a variant. */
.sb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sb-sp-2);
  font-family: var(--sb-font-sans); font-size: var(--sb-fs-sm); font-weight: var(--sb-fw-semibold);
  letter-spacing: .005em;
  line-height: 1; text-decoration: none; cursor: pointer;
  padding: var(--sb-sp-3) var(--sb-sp-5);
  border-radius: var(--sb-radius); border: 1.5px solid transparent;
  min-height: 44px; /* touch target (NFR-001) */
  white-space: nowrap;
  transition: background-color var(--sb-transition), color var(--sb-transition), border-color var(--sb-transition);
}

a.sb-btn--primary, button.sb-btn--primary {
  background: var(--sb-primary); color: var(--sb-primary-contrast); border-color: var(--sb-primary);
}
a.sb-btn--primary:hover, button.sb-btn--primary:hover,
a.sb-btn--primary:focus, button.sb-btn--primary:focus {
  background: var(--sb-primary-hover); color: var(--sb-primary-contrast); border-color: var(--sb-primary-hover);
}

/* Secondary is the outline, not a second filled colour: two filled buttons side
 * by side compete, and brass fails 4.5:1 as a text ground anyway. */
a.sb-btn--secondary, button.sb-btn--secondary {
  background: transparent; color: var(--sb-ink-900); border-color: var(--sb-line-strong);
}
a.sb-btn--secondary:hover, button.sb-btn--secondary:hover,
a.sb-btn--secondary:focus, button.sb-btn--secondary:focus {
  background: transparent; color: var(--sb-ink-900); border-color: var(--sb-ink-900);
}

a.sb-btn--ghost, button.sb-btn--ghost {
  background: transparent; color: var(--sb-ink-700); border-color: var(--sb-border);
}
a.sb-btn--ghost:hover, button.sb-btn--ghost:hover,
a.sb-btn--ghost:focus, button.sb-btn--ghost:focus {
  background: var(--sb-surface-3); color: var(--sb-ink-900); border-color: var(--sb-line-strong);
}

/* Quiet: a text action that is still a real 44px target. */
a.sb-btn--quiet, button.sb-btn--quiet {
  background: transparent; color: var(--sb-ink-500); border-color: transparent;
  padding-inline: var(--sb-sp-3);
}
a.sb-btn--quiet:hover, button.sb-btn--quiet:hover,
a.sb-btn--quiet:focus, button.sb-btn--quiet:focus {
  background: var(--sb-surface-3); color: var(--sb-ink-900); border-color: transparent;
}

.sb-btn--block { width: 100%; }
.sb-btn--lg { font-size: var(--sb-fs-base); padding: var(--sb-sp-4) var(--sb-sp-6); }
.sb-btn[disabled], .sb-btn.is-loading { opacity: .55; cursor: not-allowed; pointer-events: none; }
.sb-nav__search .sb-icon { margin-right: 2px; }

/* =========================================================================
 * Footer
 * ========================================================================= */
.sb-footer { background: var(--sb-ink-900); color: #EFE9EB; margin-top: var(--sb-sp-8); }
.sb-footer__inner {
  display: grid; gap: var(--sb-sp-6);
  grid-template-columns: 1fr;
  padding-block: var(--sb-sp-7);
}
.sb-brand--footer { color: #fff; }
.sb-brand--footer .sb-brand__name { color: #fff; }
.sb-brand--footer .sb-logo { color: var(--sb-brass-500); }
.sb-footer__tagline { color: #B8ACB0; margin-top: var(--sb-sp-3); font-size: var(--sb-fs-sm); max-width: 30ch; }

/* Link groups. Each column is a titled set — the legal items get their own
 * heading rather than being buried in a flat list of five. */
.sb-footer__nav { display: grid; gap: var(--sb-sp-6); grid-template-columns: 1fr; }
/* Element-qualified: these are <h2>, and `.sb-app h2` (0,1,1) sets ink-900 —
 * near-black headings on the near-black footer, i.e. invisible. Same collision
 * as the buttons and the footer links. */
h2.sb-footer__group-title {
  font-family: var(--sb-font-sans);
  font-size: var(--sb-fs-xxs); font-weight: var(--sb-fw-semibold);
  letter-spacing: var(--sb-track-label); text-transform: uppercase;
  color: #A2969A; margin: 0 0 var(--sb-sp-4);
}
.sb-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sb-sp-3); }
a.sb-footer__link { color: #E4DCDF; text-decoration: none; font-size: var(--sb-fs-sm); }
a.sb-footer__link:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.sb-footer__bar { border-top: 1px solid rgba(255,255,255,.14); }
.sb-footer__bar-inner {
  padding-block: var(--sb-sp-4);
  display: flex; flex-wrap: wrap; gap: var(--sb-sp-3);
  justify-content: space-between; align-items: baseline;
}
.sb-copyright { margin: 0; font-size: var(--sb-fs-xs); color: #B8ACB0; }
/* The organic-rating promise belongs in the chrome, not only the small print. */
.sb-footer__pledge { margin: 0; font-size: var(--sb-fs-xs); color: #B8ACB0; }

/* =========================================================================
 * Responsive: nav collapses under 900px
 * ========================================================================= */
@media (max-width: 900px) {
  /* Element-qualified to match the base rule: a media query adds no
   * specificity, so a bare `.sb-nav-toggle` here loses to `button.sb-nav-toggle
   * { display: none }` above and the menu button never appears. */
  button.sb-nav-toggle { display: block; }
  .sb-nav {
    position: fixed; inset: var(--sb-header-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: var(--sb-sp-3);
    background: #fff; border-bottom: 1px solid var(--sb-border);
    padding: var(--sb-sp-4); margin-left: 0;
    box-shadow: var(--sb-shadow);
    transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: opacity var(--sb-transition), transform var(--sb-transition), visibility var(--sb-transition);
    max-height: calc(100vh - var(--sb-header-h)); overflow-y: auto;
  }
  .sb-nav.is-open { transform: none; opacity: 1; visibility: visible; }
  .sb-nav__list { flex-direction: column; align-items: stretch; gap: var(--sb-sp-1); }
  .sb-nav__link { padding: var(--sb-sp-3) 0; border-bottom: 1px solid var(--sb-surface-3); font-size: var(--sb-fs-base); }
  /* The vertical rule is a horizontal-row device; in the stacked panel it
   * becomes a top rule instead. */
  .sb-nav__actions {
    flex-wrap: wrap;
    padding-left: 0; margin-block: 0;
    border-left: 0; border-top: 1px solid var(--sb-border);
    padding-top: var(--sb-sp-4);
  }
  .sb-nav__actions .sb-btn { flex: 1 1 auto; }
}

@media (min-width: 640px) {
  .sb-footer__nav { grid-template-columns: repeat(3, 1fr); }
  .sb-app h1 { font-size: var(--sb-fs-3xl); }
}
@media (min-width: 900px) {
  .sb-footer__inner { grid-template-columns: 1.4fr 3fr; gap: var(--sb-sp-8); }
}