/* ==========================================================================
   Wake family: family.css  (requires tokens.css)
   Shared header, family switcher, language toggle and footer.
   Integration Round 2: per-site footer motto/mark slots + optional grade legend.
   All selectors are prefixed .wf- so they won't collide with site CSS.
   Mobile-first. Integration R1: the family switcher is the always-visible
   banner from Bear Round 6 (names-only row on phones, no dropdown).
   ========================================================================== */

.wf-header, .wf-footer {
  font-family: var(--wake-font-body);
  color: var(--wake-color-text);
  -webkit-font-smoothing: antialiased;
}
.wf-header *, .wf-footer * { box-sizing: border-box; }
.wf-header :focus-visible, .wf-footer :focus-visible {
  outline: var(--wake-focus-ring);
  outline-offset: var(--wake-focus-offset);
  border-radius: var(--wake-radius-sm);
}

/* One language at a time, for the kit's own strings only.
   .wf-skip sits just before the header, so it must be listed here too. */
html:lang(es) .wf-header .wf-en,
html:lang(es) .wf-footer .wf-en,
html:lang(es) .wf-skip .wf-en { display: none; }
html:not(:lang(es)) .wf-header .wf-es,
html:not(:lang(es)) .wf-footer .wf-es,
html:not(:lang(es)) .wf-skip .wf-es { display: none; }

.wf-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;
}

.wf-skip {
  position: absolute; left: var(--wake-space-3); top: -100px; z-index: 1000;
  padding: var(--wake-space-2) var(--wake-space-4);
  background: var(--wake-color-link); color: var(--wake-night);
  font-family: var(--wake-font-display); font-weight: var(--wake-fw-bold);
  border-radius: var(--wake-radius-sm); text-decoration: none;
}
.wf-skip:focus { top: var(--wake-space-2); }

/* ---- Header shell -------------------------------------------------------- */
.wf-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(13,11,9,0.94);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 2px solid var(--wake-accent-fill);
}

/* Family bar (thin strip above the site header) */
.wf-familybar {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: var(--wake-space-3);
  max-width: var(--wake-container); margin: 0 auto;
  padding: var(--wake-space-1) var(--wake-space-4);
  min-height: 40px;
  font-size: var(--wake-fs-caption);
  border-bottom: 1px solid var(--wake-color-border);
}

/* ---- Family banner (Integration R1: Bear Round 6 pattern) ---------------
   All sites visible at once; no dropdown. Nation is a label ("Soon"), not a
   link. "You are here" = [aria-current="page"] (set by the script from
   <html data-current>) with a CSS-only fallback on html[data-current].   */
.wf-fam { display: flex; align-items: center; gap: var(--wake-space-3); flex: 1 1 auto; min-width: 0; }
.wf-fam__eyebrow {
  flex-shrink: 0;
  font-family: var(--wake-font-display); font-weight: var(--wake-fw-bold);
  font-size: var(--wake-fs-micro); text-transform: uppercase; letter-spacing: var(--wake-track-label);
  color: var(--wake-color-text-label);
}
.wf-fam__list {
  display: flex; gap: 6px; list-style: none; margin: 0; padding: 4px; min-width: 0;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
}
.wf-fam__list::-webkit-scrollbar { display: none; }
.wf-fam__item { flex-shrink: 0; scroll-snap-align: start; }
.wf-fam__link {
  display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 4px 12px;
  border-radius: var(--wake-radius-pill); border: 1px solid transparent;
  color: var(--wake-color-text); text-decoration: none; white-space: nowrap;
  font-family: var(--wake-font-display); font-size: var(--wake-fs-micro); font-weight: var(--wake-fw-bold);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.wf-fam__link b { font-weight: var(--wake-fw-strong); }
.wf-header .wf-fam__link:focus-visible { border-radius: var(--wake-radius-pill); outline-offset: 0; } /* list padding (4px) keeps the 3px ring inside the scroller */
.wf-fam__link[href]:hover { background: var(--wake-color-tint); border-color: var(--wake-color-border-strong); }
.wf-fam__pip { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
/* One-line purpose: visible on wide screens, read by screen readers everywhere */
.wf-fam__desc {
  font-family: var(--wake-font-body); font-weight: var(--wake-fw-body); text-transform: none;
  letter-spacing: 0; color: var(--wake-color-text-muted);
}
.wf-fam__soon {
  font-size: 0.85em; font-weight: var(--wake-fw-medium); letter-spacing: 0.04em;
  border: 1px solid currentColor; border-radius: var(--wake-radius-pill); padding: 0 6px;
}
.wf-fam__link[data-wf-soon] { color: var(--wake-color-text-muted); cursor: default; }
.wf-fam__link[aria-disabled="true"] { color: var(--wake-color-text-muted); cursor: default; }

/* Site accents: one per site (pip + bold name) */
.wf-pip--bear   { background: var(--wake-accent-bear); }
.wf-pip--woke   { background: var(--wake-accent-woke); }
.wf-pip--bench  { background: var(--wake-accent-bench); }
.wf-pip--nation { background: var(--wake-accent-nation); }
.wf-pip--candidate { background: var(--wake-accent-candidate, #86D9A6); }
.wf-pip--doc    { background: var(--wake-accent-doc, #CBB2FF); }
.wf-site--bear   b { color: var(--wake-accent-bear); }
.wf-site--woke   b { color: var(--wake-accent-woke); }
.wf-site--bench  b { color: var(--wake-accent-bench); }
.wf-site--nation b { color: var(--wake-accent-nation); }
.wf-site--candidate b { color: var(--wake-accent-candidate, #86D9A6); }
.wf-site--doc    b { color: var(--wake-accent-doc, #CBB2FF); }

/* You are here: accent ring + tint in the CURRENT site's accent */
.wf-fam__link[aria-current="page"],
html[data-current="bear"]   .wf-fam__link[data-wf-site="bear"],
html[data-current="woke"]   .wf-fam__link[data-wf-site="woke"],
html[data-current="bench"]  .wf-fam__link[data-wf-site="bench"],
html[data-current="nation"] .wf-fam__link[data-wf-site="nation"],
html[data-current="candidate"] .wf-fam__link[data-wf-site="candidate"],
html[data-current="doc"]    .wf-fam__link[data-wf-site="doc"] {
  background: rgba(255,255,255,0.08); border-color: var(--wake-accent); color: var(--wake-color-text);
}
.wf-switcher__link[aria-current="page"] { background: rgba(255,255,255,0.06); box-shadow: inset 3px 0 0 var(--wake-accent); }

/* Footer family list (also reused by sites that want a stacked list) */
.wf-switcher__list { list-style: none; margin: 0; padding: 0; }
.wf-switcher__link {
  display: flex; align-items: center; gap: var(--wake-space-2);
  min-height: 44px; padding: var(--wake-space-2) var(--wake-space-3);
  color: var(--wake-color-text); text-decoration: none;
  border-radius: var(--wake-radius-md);
}
a.wf-switcher__link:hover { background: var(--wake-color-tint); }
.wf-switcher__name { font-family: var(--wake-font-display); font-weight: var(--wake-fw-bold); font-size: var(--wake-fs-label); letter-spacing: 0.02em; }
.wf-switcher__name b { font-weight: var(--wake-fw-strong); }
.wf-switcher__desc { display: block; font-size: var(--wake-fs-micro); color: var(--wake-color-text-muted); }
.wf-switcher__pip { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.wf-switcher__link[data-wf-soon], .wf-switcher__link[aria-disabled="true"] { color: var(--wake-color-text-muted); cursor: default; }

/* Language toggle slot */
.wf-lang { display: inline-flex; border: 1px solid var(--wake-color-border); border-radius: var(--wake-radius-pill); padding: 2px; }
.wf-lang button {
  min-height: 32px; min-width: 44px; padding: 0 var(--wake-space-3);
  background: transparent; color: var(--wake-color-text-muted);
  border: 0; border-radius: var(--wake-radius-pill);
  font: inherit; font-family: var(--wake-font-display); font-weight: var(--wake-fw-bold);
  font-size: var(--wake-fs-micro); letter-spacing: 0.06em; cursor: pointer;
}
.wf-lang button[aria-pressed="true"] { background: var(--wake-accent-fill); color: var(--wake-accent-ink); }

/* Site header row */
.wf-siterow {
  display: flex; align-items: center; justify-content: space-between; gap: var(--wake-space-4);
  max-width: var(--wake-container); margin: 0 auto;
  min-height: var(--wake-header-h); padding: var(--wake-space-2) var(--wake-space-4);
}
.wf-brand { display: inline-flex; align-items: center; gap: var(--wake-space-3); color: var(--wake-color-text); text-decoration: none; min-width: 0; }
.wf-brand__mark-slot { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.wf-brand__mark-slot:empty { display: none; }
.wf-brand__mark { width: 40px; height: 40px; flex-shrink: 0; }
.wf-wordmark {
  font-family: var(--wake-font-display); font-weight: var(--wake-fw-strong);
  font-size: 1.3rem; letter-spacing: -0.02em; line-height: 1; white-space: nowrap;
  text-transform: uppercase;
}
.wf-wordmark__the { text-transform: lowercase; color: var(--wake-color-text-label); font-size: 0.75em; }
.wf-wordmark__dot, .wf-wordmark__word { color: var(--wake-accent); }
.wf-nav-slot { display: flex; align-items: center; gap: var(--wake-space-4); }

/* Mark colours (inline SVG uses classes so the star follows the sub-brand) */
.wf-mark__star { fill: var(--wake-accent); }
.wf-mark__bear { fill: var(--wake-maple); }
.wf-mark__far  { fill: #7A5530; }
.wf-mark__bar  { fill: var(--wake-flag-red); }

/* ---- Responsive banner (measured with tools/render.py; no overflow 360–1600px) ----
   The one-line purpose (.wf-fam__desc) is part of every item's accessible
   name at all widths; it is shown visibly in the footer family list. It does
   not fit visibly in the top bar (4 items + purposes ≈ 1450px > 1200px). */
.wf-fam__desc { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wf-fam__link[data-wf-soon] { border: 1px dashed var(--wake-color-border); }

/* Phones (<768px): names only on one row (BEAR · WOKE · BENCH · NATION).
   "Wake the" and "Soon" stay for screen readers. Fits at ≥360px; narrower,
   the row scrolls sideways, starting at the current site. */
@media (max-width: 767px) {
  .wf-familybar { padding-left: 10px; padding-right: 10px; gap: 8px; }
  .wf-fam__eyebrow { display: none; }
  .wf-fam__list { gap: 2px; padding: 4px; }
  .wf-fam__link { padding: 4px 5px; gap: 0; letter-spacing: 0.02em; min-height: 36px; }
  .wf-fam__link[data-wf-soon] b { color: var(--wake-color-text-muted); }
  .wf-fam__pip { display: none; }
  .wf-fam__pre, .wf-fam__soon {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .wf-lang button { min-width: 36px; padding: 0 var(--wake-space-2); }
}
/* Tablet (768–1119px): pips + short names; "Wake the" and the eyebrow hide */
@media (min-width: 768px) and (max-width: 1119px) {
  .wf-fam__eyebrow { display: none; }
  .wf-fam__pre { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (min-width: 768px) {
  .wf-wordmark { font-size: 1.6rem; }
  .wf-brand__mark { width: 48px; height: 48px; }
}
/* ---- Footer -------------------------------------------------------------- */
.wf-footer {
  background: var(--wake-color-bg);
  border-top: 2px solid var(--wake-accent-fill);
  padding: var(--wake-space-7) var(--wake-space-4) var(--wake-space-6);
  font-size: var(--wake-fs-small);
}
.wf-footer__inner { max-width: var(--wake-container); margin: 0 auto; display: grid; gap: var(--wake-space-6); }
.wf-footer__brand { display: flex; align-items: center; gap: var(--wake-space-3); }
.wf-footer__brand svg,
.wf-footer__mark-slot { width: 44px; height: 44px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }
.wf-footer__mark-slot:empty { display: none; }
.wf-footer__tagline { margin: 0; font-family: var(--wake-font-display); font-weight: var(--wake-fw-bold); letter-spacing: 0.02em; }
.wf-footer__motto { margin: 2px 0 0; color: var(--wake-color-text-label); font-size: var(--wake-fs-caption); }
.wf-footer__heading {
  margin: 0 0 var(--wake-space-2);
  font-family: var(--wake-font-display); font-weight: var(--wake-fw-bold);
  font-size: var(--wake-fs-micro); text-transform: uppercase; letter-spacing: var(--wake-track-label);
  color: var(--wake-color-text-label);
}
.wf-footer .wf-switcher__list { display: grid; gap: 2px; }
.wf-footer a { color: var(--wake-color-link); }
.wf-footer a:hover { color: var(--wake-color-link-hover); }
.wf-footer .wf-switcher__link { color: var(--wake-color-text); padding-left: var(--wake-space-2); margin-left: calc(-1 * var(--wake-space-2)); }
.wf-footer__note { margin: 0; color: var(--wake-color-text-muted); font-size: var(--wake-fs-caption); max-width: var(--wake-measure); }
.wf-footer__legal { border-top: 1px solid var(--wake-color-border); padding-top: var(--wake-space-4); display: grid; gap: var(--wake-space-2); }

/* ---- Footer brand + grade-legend slots (Integration Round 2) -------------
   Defaults = California grizzly mark + "Not left, not right. Local." motto +
   "Familia. Libertad. Comunidad." tagline + "—" thin-record grade note.
   Nation must not inherit California copy/mark. Sites that do not use "—"
   for thin records (Bench uses "C") set data-wf-grade-legend="off" or
   customize .wf-footer__note. */
.wf-footer__motto-reserved,
.wf-footer__tagline-reserved { display: none; }
/* Nation: hide California grizzly entirely (slot empty — no invented SVG).
   Header site-row mark (Round 3) mirrors the footer slot. */
html[data-wake-brand="nation"] .wf-footer__mark-slot,
html[data-wake-brand="nation"] .wf-brand__mark-slot { display: none; }
html[data-wake-brand="nation"] .wf-footer__motto-default,
html[data-wake-brand="nation"] .wf-footer__tagline-default { display: none; }
html[data-wake-brand="nation"] .wf-footer__motto-reserved { display: inline; }
html[data-wake-brand="nation"] .wf-footer__tagline-reserved:not(:empty) { display: block; }
/* Grade "—" legend: off for Nation; sites that use another thin-record
   letter (Bench → "C") set data-wf-grade-legend="off" on <html>. */
html[data-wake-brand="nation"] .wf-footer__standard,
html[data-wf-grade-legend="off"] .wf-footer__standard { display: none; }

/* Paid-for-by disclosure: inherits full body size + contrast on purpose.
   Do NOT shrink or mute it; many disclosure rules set minimum legibility. */
.wf-paid-for-by {
  margin: 0; padding: var(--wake-space-3) var(--wake-space-4);
  border: 1px solid var(--wake-color-text); border-radius: var(--wake-radius-sm);
  color: var(--wake-color-text); font-size: var(--wake-fs-small); font-weight: var(--wake-fw-medium);
}
.wf-paid-for-by:empty { display: none; } /* stays invisible until filled */

@media (min-width: 768px) {
  .wf-footer__inner { grid-template-columns: 1.4fr 1fr 1fr; align-items: start; }
  .wf-footer__legal { grid-column: 1 / -1; }
}

/* ---- Forced colors / Windows High Contrast (Integration Round 7, v1.7) ----
   In forced-colors mode the browser replaces every border, background and
   text colour with system colours and drops box-shadow. That erased all three
   state markers: every banner pill got the same border (no "you are here"),
   the footer list lost its inset accent bar, and the pressed EN/ES button
   looked like the other one. Use the system Highlight pair for state (the
   pattern Windows itself uses for "selected"), and clear the other pills'
   borders so the current one stands out by shape as well as colour. */
@media (forced-colors: active) {
  .wf-fam__link { border-color: Canvas; }
  .wf-fam__link[data-wf-soon] { border-color: GrayText; }
  .wf-fam__link[aria-current="page"],
  html[data-current="bear"]   .wf-fam__link[data-wf-site="bear"],
  html[data-current="woke"]   .wf-fam__link[data-wf-site="woke"],
  html[data-current="bench"]  .wf-fam__link[data-wf-site="bench"],
  html[data-current="nation"] .wf-fam__link[data-wf-site="nation"],
  .wf-switcher__link[aria-current="page"],
  .wf-lang button[aria-pressed="true"] {
    forced-color-adjust: none; /* else the text backplate paints Canvas behind HighlightText */
    background: Highlight; color: HighlightText; border: 2px solid Highlight;
  }
  .wf-fam__link[aria-current="page"] *,
  html[data-current="bear"]   .wf-fam__link[data-wf-site="bear"] *,
  html[data-current="woke"]   .wf-fam__link[data-wf-site="woke"] *,
  html[data-current="bench"]  .wf-fam__link[data-wf-site="bench"] *,
  html[data-current="nation"] .wf-fam__link[data-wf-site="nation"] *,
  .wf-switcher__link[aria-current="page"] *,
  .wf-lang button[aria-pressed="true"] * { color: HighlightText; }
  .wf-switcher__link { border: 2px solid Canvas; }
  .wf-header :focus-visible, .wf-footer :focus-visible { outline-color: CanvasText; }
  .wf-fam__pip, .wf-switcher__pip { forced-color-adjust: none; } /* keep each site's accent dot */
}