/* theme-live.css — reskins the booking shell to the LIVE tateesq.com brand.
 *
 * Loaded after the vendored tateesq-web CSS + overrides.css. The vendored
 * .bk-/.es- components consume CSS custom properties; this file re-declares
 * those tokens with the live site's values (extracted from CM_TATEESQ
 * assets/css/_variables.scss + _typography.scss + component recipes) and
 * re-skins the handful of components whose geometry differs (pills, soft
 * ambient shadows, borderless cards, purple page field under white panels).
 *
 * This is a token-declaration layer (like the upstream globals) — literal
 * brand hex values live HERE and only here. Live site is light-only.
 */

/* ── Live-brand fonts (self-hosted) ─────────────────────────────────────
   woff2 first (the foundry-supplied files — Kometa order 31045736 and the
   F37 web kit, both in Drive/Tate-Fonts; identical glyphs to the .woff,
   ~10% smaller), .woff kept as the fallback. Both EULAs prohibit
   converting or subsetting, so these are the foundries' own files — never
   re-encode them. The <link rel=preload> hrefs in _shell.html must match
   the woff2 url() byte-for-byte. */
@font-face {
  font-family: "F37Judge-BoldItalic";
  src: url(/static/booking/fonts/F37Judge-BoldItalic.woff2) format("woff2"),
       url(/static/booking/fonts/F37Judge-BoldItalic.woff) format("woff");
  font-display: swap;
}
@font-face {
  font-family: "LabilGrotesk-Bold";
  src: url(/static/booking/fonts/LabilGrotesk-Bold.woff2) format("woff2"),
       url(/static/booking/fonts/LabilGrotesk-Bold.woff) format("woff");
  font-display: swap;
}
@font-face {
  font-family: "LabilGrotesk-Regular";
  src: url(/static/booking/fonts/LabilGrotesk-Regular.woff2) format("woff2"),
       url(/static/booking/fonts/LabilGrotesk-Regular.woff) format("woff");
  font-display: swap;
}

/* ── Token remap ──────────────────────────────────────────────────────── */
:root {
  /* Type: Judge for hero moments, Labil Grotesk for everything else.
     Weights are family names upstream — no font-weight descriptors. */
  --sans: "LabilGrotesk-Regular", "Helvetica Neue", Arial, sans-serif;
  --serif: "F37Judge-BoldItalic", Georgia, serif;
  --serif-text: "LabilGrotesk-Regular", "Helvetica Neue", Arial, sans-serif;
  --mono: "LabilGrotesk-Bold", "Helvetica Neue", Arial, sans-serif;

  /* Surfaces: white panels; pale grey secondary fill */
  --paper: #ffffff;
  --paper-2: #f6f6f6;
  --paper-3: #ededed;
  --card: #ffffff;

  /* Ink */
  --ink: #1e1e1e;
  --ink-2: #292e46;
  --ink-3: #757575;
  --ink-4: #757575;
  --ink-mute: #9a9a9a;
  --ink-on-accent: #ffffff;
  --ink-on-dark: #ffffff;

  /* Rules (live cards are borderless; rules stay for dividers only) */
  --rule: #e4e4e4;
  --rule-2: #d6d6d6;
  --rule-c: #e4e4e4;

  /* Accent: slate purple (links, focus, em words, tags) */
  --accent: #4f5687;
  --accent-tint: #e7e9f3;
  --accent-tint-2: #ccd0e4;
  --accent-mid: #8b91b7;
  --accent-soft: rgba(79, 86, 135, 0.15);
  --accent-wash: rgba(79, 86, 135, 0.08);

  --fill-strong: #292e46;
  --ink-on-fill-strong: #ffffff;
  --selected-bg: #292e46;
  --selected-fg: #ffffff;

  /* Soft ambient shadows, navy-tinted — never hard drops */
  --shadow-1: 0 0 40px 0 rgba(46, 50, 71, 0.12);
  --shadow-2: 0 0 40px 0 rgba(46, 50, 71, 0.2);
}

/* ── Page field: white panel floating over the purple ground ──────────── */
body { background: #4f5687; }
.bk-shell { background: #4f5687; }
.bk-screen { padding: 44px 20px 72px; }
.bk-body,
.bk-body.bk-recovery-body {
  background: var(--card);
  border-radius: 28px;
  box-shadow: 0 0 40px 0 rgba(41, 46, 70, 0.25);
  padding: 56px 52px 52px;
}

/* ── Topbar: brand mark + wordmark straight on the purple field ───────── */
.bk-topbar {
  background: #4f5687;
  border-bottom: none;
}
.bk-topbar.is-stuck { box-shadow: 0 0 40px 0 rgba(41, 46, 70, 0.45); }
.bk-topbar-mark { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.bk-topbar-mark-svg { width: 34px; height: 34px; display: block; }
.bk-topbar-wordmark {
  font-family: "LabilGrotesk-Bold", "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #ffffff;
}
.bk-progress { background: rgba(255, 255, 255, 0.28); }
.bk-progress-fill { background: #ffd469; }

/* ── Display headings: Judge, uppercase, tight ────────────────────────── */
.bk-h {
  font-family: var(--serif);
  text-transform: uppercase;
  font-size: 54px;
  line-height: 0.98;
  letter-spacing: 0.01em;
}
.bk-h em { font-style: italic; color: var(--accent); }
.es-title { font-family: var(--serif); text-transform: uppercase; }

/* Section headings + labels: bold grotesk, tracked caps */
.bk-pay-section-h,
.bk-receipt-h,
.bk-week-label,
.bk-confirm-eyebrow,
.bk2-meet-eyebrow {
  font-family: "LabilGrotesk-Bold", "Helvetica Neue", Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.75px;
}

/* ── Choice rows: borderless white cards, soft glow, lift on hover ────── */
.bk-choice {
  border: 2px solid transparent;
  border-radius: 24px;
  box-shadow: 0 0 40px 0 rgba(57, 34, 28, 0.125);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.bk-choice:hover:not(:disabled) {
  border-color: transparent;
  transform: translateY(-4px);
  box-shadow: 0 18px 44px rgba(41, 46, 70, 0.16);
}
.bk-choice.is-recommended,
.bk-choice.is-selected { border-color: #4f5687; background: var(--card); }
.bk-choice-primary {
  font-family: "LabilGrotesk-Bold", "Helvetica Neue", Arial, sans-serif;
  font-size: 26px;
  letter-spacing: 0;
}

/* ── CTAs: salmon pill, uppercase bold grotesk, navy ink ──────────────── */
.bk-btn-primary {
  background: #ff987c;
  color: #292e46;
  border-radius: 999px;
  font-family: "LabilGrotesk-Bold", "Helvetica Neue", Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.75px;
  font-size: 18px;
}
.bk-btn-primary:hover:not(:disabled) { filter: brightness(0.97); transform: translateY(-1px); }
.bk-btn-primary:focus-visible,
.bk-btn-secondary:focus-visible,
.bk-receipt-cal-btn:focus-visible,
.es-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 6px #4f5687;
}
.bk-btn-secondary {
  background: #ffffff;
  color: #292e46;
  border: none;
  border-radius: 999px;
  box-shadow: 0 0 40px 0 rgba(46, 50, 71, 0.2);
  font-family: "LabilGrotesk-Bold", "Helvetica Neue", Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.75px;
  font-size: 15px;
}
.bk-btn-secondary:hover { background: #ffffff; transform: translateY(-1px); }
.es-btn { border-radius: 999px; font-family: "LabilGrotesk-Bold", "Helvetica Neue", Arial, sans-serif; text-transform: uppercase; letter-spacing: 0.75px; }
.bk-receipt-cal-btn {
  border: none;
  border-radius: 999px;
  box-shadow: 0 0 40px 0 rgba(46, 50, 71, 0.12);
  font-family: "LabilGrotesk-Bold", "Helvetica Neue", Arial, sans-serif;
}

/* ── Inputs: white pills, borderless, soft glow, purple focus ring ────── */
.bk-pay-input {
  border: 1px solid transparent;
  border-radius: 28px;
  background: #f6f6f6;
  padding: 14px 24px;
}
/* Focus = the ring follows the pill. CSS outline squares off rounded
   corners in Safari, which reads as a startling box around a soft shape;
   box-shadow rings hug the radius in every browser. */
.bk-pay-input:focus {
  border-color: #4f5687;
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-mid);
}
.bk-pay-input.is-error { border-color: #ff0000; }
textarea.bk-pay-input { border-radius: 24px; padding: 16px 24px; }

/* Checklist rows follow the card language; checked = purple ring + tint */
.bk-about-check {
  border: 2px solid transparent;
  border-radius: 20px;
  box-shadow: 0 0 40px 0 rgba(57, 34, 28, 0.08);
}
.bk-about-check:hover { border-color: var(--accent-tint-2); }
.bk-about-check.is-checked { border-color: #4f5687; background: var(--accent-wash); }
.bk-about-check.is-checked .bk-about-check-box { background: #4f5687; border-color: #4f5687; }

/* ── Cards: borderless + ambient shadow ───────────────────────────────── */
.bk-confirm-card,
.bk-trail,
.bk2-meet-card {
  border-color: transparent;
  box-shadow: 0 0 40px 0 rgba(46, 50, 71, 0.12);
  border-radius: 28px;
}
.es-card {
  border-style: solid;
  border-color: transparent;
  box-shadow: 0 0 40px 0 rgba(46, 50, 71, 0.12);
  border-radius: 28px;
}

/* Rounded surfaces get radius-following box-shadow rings (outline squares
   off in Safari). Small inline text controls keep outline — they're
   rectangular anyway. */
.bk-choice:focus-visible {
  outline: none;
  border-color: #292e46; /* navy: never confused with the purple is-recommended border */
  box-shadow: 0 0 40px 0 rgba(57, 34, 28, 0.125), 0 0 0 3px var(--accent-mid);
}
.bk-about-check:focus-within {
  outline: none;
  box-shadow: 0 0 40px 0 rgba(57, 34, 28, 0.08), 0 0 0 3px var(--accent-mid);
}
.bk-trail-change:focus-visible,
.bk-back:focus-visible {
  outline: 3px solid #4f5687;
  outline-offset: 3px;
}

/* globals.css applies `border-radius: inherit` to every focusable control at
   :focus-visible. That selector is (0,1,1), so it outranks our plain `.bk-*`
   radius declarations at (0,1,0) and flattens each rounded control to its
   PARENT's radius — 0 nearly everywhere — the instant it takes keyboard
   focus. The ring (outline or box-shadow) then squares off around a shape
   that is round at rest. Restating each radius at :focus-visible lands at
   (0,2,0) and wins. Values must stay in sync with the base rules above. */
.bk-topbar-mark:focus-visible,
.bk-topbar-exit:focus-visible { border-radius: 50%; }

.bk-btn-primary:focus-visible,
.bk-btn-secondary:focus-visible,
.bk-receipt-cal-btn:focus-visible,
.es-btn:focus-visible { border-radius: 999px; }

.bk-pay-input:focus-visible { border-radius: 28px; }
textarea.bk-pay-input:focus-visible { border-radius: 24px; }
.bk-choice:focus-visible { border-radius: 24px; }

.bk-back:focus-visible,
.bk-banner-retry:focus-visible { border-radius: 10px; }
.bk-banner-dismiss:focus-visible { border-radius: 8px; }

/* ── Mobile (live mobile radii are 24px; keep panel breathing room) ───── */
@media (max-width: 640px) {
  .bk-screen { padding: 16px 10px 48px; }
  .bk-body, .bk-body.bk-recovery-body { border-radius: 24px; padding: 32px 22px 32px; }
  .bk-h { font-size: 38px; }
  .bk-choice,
  .bk-choice:focus-visible { border-radius: 20px; }
  .bk-choice-primary { font-size: 20px; }
  .bk-btn-primary { font-size: 15px; }
}