/* ============================================================
   SiteBuilder — the PUBLIC contact block.

   ONE stylesheet for ONE renderer: the #contact section on a business
   landing page and the dedicated "Contact page" template are the same
   `contact-form` block, so they are pixel-identical by construction.
   BlockRenderer emits the <link> for this sheet once per render
   (contactPrefsCss()); the public shell has no per-block CSS hook.

   Contents
     .sbc-form      the COMPACT two-column grid (collapses to one column
                    under 720px; `layout: stacked` forces one column).
     .sbc-field     one labelled control + its inline error paragraph.
     .sbc-pref      preferred CHANNELS — a segmented MULTI-select of real
                    checkbox inputs (the input overlays its chip so clicking
                    and keyboard navigation stay 100% native; only the paint
                    is custom). Renders built-in AND trainer-defined channels
                    identically. The selected state is carried by a tick BOX
                    (a shape) as well as by colour.
     .sbc-wa        the "you can also reach me on WhatsApp" opt-in that rides
                    on the Phone channel: WhatsApp's own #25D366, its glyph,
                    a filled tick and a spelled-out On/Off state. Faded in
                    and out by the JS; a :has() rule covers the no-JS case.
     .sbc-hours     preferred HOURS — an "any time" checkbox, a from/to
                    pair that collapses while it is checked, and the
                    trainer's editable "we will do our best" disclaimer.
     .sbc-done      the success panel that CROSS-FADES into the fields'
                    place inside a height-locked wrapper, so confirming a
                    message never jumps the page.

   Everything styles to the shared Aurora tokens, so light + dark and
   RTL + LTR are handled automatically (logical properties only, no
   left/right anywhere). Reduced motion disables every transition.
   ============================================================ */

/* ---------- Card + grid ---------------------------------------------------- */

/* Slightly wider than the old single-column card so two columns breathe. */
.sbc-card{max-inline-size:760px}

/* Beats `.sb-contact__form{display:flex}` from sitebuilder.css on specificity
   alone, so load order between the two sheets is irrelevant. */
.sb-contact__form.sbc-form{display:block}

.sbc-form__body{display:flex;flex-direction:column;gap:var(--s-5)}

.sbc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--s-4) var(--s-5);align-items:start}

/* Message and hours always run the full width; name/email and phone/method pair
   up two-per-row above them. */
.sbc-grid > .sbc-field--message,
.sbc-grid > .sbc-hours{grid-column:1 / -1}
/* When the trainer switched the method chooser OFF, phone has no partner on its
   row — let it run full width rather than leaving a hole. */
.sbc-grid:not(:has(.sbc-pref)) > .sbc-field--phone{grid-column:1 / -1}

/* Stacked layout: the trainer opted out of the two-column rhythm. */
.sbc-form--stacked .sbc-grid{grid-template-columns:1fr}
.sbc-form--stacked .sbc-grid > *{grid-column:1 / -1}

.sbc-field{margin:0;min-inline-size:0}
.sbc-field .label{display:block;margin-block-end:var(--s-2)}
.sbc-textarea{min-block-size:120px;resize:vertical}

/* Required marker — decorative (the input carries `required`, which is what an
   assistive tech announces), so it is aria-hidden in the markup. */
.sbc-req{margin-inline-start:3px;color:var(--danger-fg);font-weight:700}

/* The "(optional)" / "(required)" swap on the phone label. */
.sbc-hint{font-size:var(--fz-xs);font-weight:500}
.sbc-hint[hidden]{display:none}

/* ---------- Inline validation ---------------------------------------------- */

/* Tied to its control with aria-describedby, so it is announced the moment the
   JS fills it. Hidden = no reserved space; it only ever pushes ONE field down. */
.sbc-err{margin-block-start:6px;color:var(--danger-fg);
  font-size:var(--fz-xs);font-weight:600;line-height:1.4}
.sbc-err[hidden]{display:none}
/* Only fields the JS actually marked invalid get the red border — never the
   browser's :invalid, which would paint every empty required field on load. */
.sbc-field [aria-invalid="true"]{border-color:var(--danger-fg)}
.sbc-field [aria-invalid="true"]:focus-visible{outline-color:var(--danger-fg)}

/* ---------- Footer: submit + note + required legend ------------------------ */

.sbc-foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3);
  margin-block-start:var(--s-5)}
/* Beats `.sb-contact__form .btn{align-self:flex-start}`. */
.sb-contact__form.sbc-form .sbc-submit{align-self:center;flex:none}
/* The note shares the footer ROW with the button, so showing it reflows inside
   that row instead of pushing the whole card down. */
.sbc-note{flex:1 1 240px;min-inline-size:0}
.sbc-note[hidden]{display:none}
.sbc-reqnote{flex:0 0 auto;margin:0;font-size:var(--fz-xs)}

/* ---------- Preferred contact methods — segmented checkboxes ---------------- */

/* Fieldsets carry the grouping semantics, not the browser's default chrome. */
.sbc-pref,
.sbc-hours{border:0;padding:0;margin:0;min-inline-size:0}
.sbc-pref__legend,
.sbc-hours__legend{display:block;padding:0;margin-block-end:var(--s-2)}

/* "Pick as many as you like" — tied to the group with aria-describedby. */
.sbc-pref__multi{margin:0 0 var(--s-2);font-size:var(--fz-xs)}

.sbc-pref__seg{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.sbc-pref__opt{position:relative;display:inline-flex;max-inline-size:100%}

/* The real checkbox sits invisibly ON TOP of its chip: native hit area, native
   focus, native toggling — only the paint is ours. `.sbc-pref__radio` is kept in
   the selector list so a page CACHED before the multi-select pass still styles. */
.sbc-pref__input,
.sbc-pref__radio{position:absolute;inset:0;inline-size:100%;block-size:100%;
  margin:0;opacity:0;cursor:pointer}

.sbc-pref__chip{display:inline-flex;align-items:center;gap:8px;
  padding:9px 14px;border-radius:var(--r-full);border:1px solid var(--line);
  background:var(--bg-2);color:var(--text-2);
  font-size:var(--fz-sm);font-weight:600;
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease),
    background var(--dur) var(--ease)}
.sbc-pref__ico{display:inline-flex;line-height:0;flex:none}
.sbc-pref__txt{display:inline-flex;flex-direction:column;min-inline-size:0}
/* A trainer-defined channel may carry a detail line (an office number, a handle). */
.sbc-pref__val{font-size:var(--fz-xs);font-weight:500;opacity:.72;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* The tick box. It is what makes the control read as MULTI-select and — crucially
   for a11y — it states the selected/unselected state as a SHAPE, so the chips are
   never distinguished by colour alone. Its size never changes, so ticking one
   cannot reflow the row (no pop). */
.sbc-pref__box{flex:none;display:inline-flex;align-items:center;justify-content:center;
  inline-size:16px;block-size:16px;border-radius:5px;
  border:1.5px solid var(--line);background:var(--bg);color:transparent;
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease),
    background var(--dur) var(--ease)}

.sbc-pref__input:hover + .sbc-pref__chip,
.sbc-pref__radio:hover + .sbc-pref__chip{color:var(--text);border-color:var(--line-brand);background:var(--tint)}
.sbc-pref__input:checked + .sbc-pref__chip,
.sbc-pref__radio:checked + .sbc-pref__chip{color:var(--brand-fg);border-color:var(--line-brand);background:var(--tint)}
.sbc-pref__input:checked + .sbc-pref__chip .sbc-pref__box{
  color:#fff;border-color:var(--brand-fill);background:var(--brand-fill)}
/* Keyboard focus must be visible even though the input itself is transparent. */
.sbc-pref__input:focus-visible + .sbc-pref__chip,
.sbc-pref__radio:focus-visible + .sbc-pref__chip{outline:2px solid var(--focus-line);outline-offset:2px}

/* WhatsApp keeps its recognisable green in both themes and both states.
   The GLYPH and the filled tick box are the brand pigment --wa (a fill / a logo
   colour — correct unchanged on dark). The chip's wash and border are mixed from
   the already theme-resolved --success-fg, so light resolves to exactly the
   rgba(14,159,110,.45)/.10 written here before, and dark picks up the brighter
   #4ADE9A automatically instead of a washed-out dark green. */
.sbc-pref__opt--whatsapp .sbc-pref__ico{color:var(--wa)}
.sbc-pref__opt--whatsapp .sbc-pref__input:checked + .sbc-pref__chip,
.sbc-pref__opt--whatsapp .sbc-pref__radio:checked + .sbc-pref__chip{
  color:var(--success-fg);
  border-color:color-mix(in srgb,var(--success-fg) 45%,transparent);
  background:color-mix(in srgb,var(--success-fg) 10%,transparent)}
.sbc-pref__opt--whatsapp .sbc-pref__input:checked + .sbc-pref__chip .sbc-pref__box{
  border-color:var(--wa-ink);background:var(--wa);color:#fff}

.sbc-pref__hint{margin-block-start:var(--s-2);font-size:var(--fz-sm)}
.sbc-pref__hint[hidden]{display:none}

/* ---------- "You can also reach me on WhatsApp" ---------------------------- */

/* Shown while Phone is picked and WhatsApp is not. The JS owns that (it adds
   `.sbc-js` to the form and fades this in/out via core/fade-swap.js); the rule
   below is the NO-JS path — a :has() browser gets the same behaviour for free,
   and one without :has() simply never shows it, which is the safe default since
   the paired hidden field then posts a definite 0. */
.sbc-wa{margin-block-start:var(--s-3)}
.sbc-wa[hidden]{display:none}
.sbc-form:not(.sbc-js) .sbc-wa{display:none}
.sbc-form:not(.sbc-js) .sbc-pref:has([data-sbc-method="phone"]:checked):not(:has([data-sbc-method="whatsapp"]:checked)) .sbc-wa{display:block}

.sbc-wa__box{position:relative;display:flex;align-items:flex-start;gap:12px;
  padding:12px 14px;border-radius:var(--r-lg,14px);cursor:pointer;
  border:1px solid var(--line);background:var(--bg-2);
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease)}

/* Visually hidden, NOT display:none — it must stay focusable and announced. */
.sbc-wa__cb{position:absolute;inline-size:1px;block-size:1px;margin:0;padding:0;
  border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* The tick itself: a real, chunky, WhatsApp-green filled box when it is on —
   not a subtle checkmark. Fixed size in both states, so nothing reflows. */
.sbc-wa__mark{flex:none;display:inline-flex;align-items:center;justify-content:center;
  inline-size:24px;block-size:24px;border-radius:8px;margin-block-start:1px;
  border:2px solid var(--line);background:var(--bg);color:transparent;
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease),
    background var(--dur) var(--ease)}
.sbc-wa__cb:checked + .sbc-wa__mark{background:var(--wa);border-color:var(--wa-ink);color:#fff}
/* Focus lands on the mark, since the input itself is clipped away. */
.sbc-wa__cb:focus-visible + .sbc-wa__mark{outline:2px solid var(--focus-line);outline-offset:2px}

.sbc-wa__txt{display:flex;flex-direction:column;gap:3px;min-inline-size:0;flex:1 1 auto}
.sbc-wa__title{display:inline-flex;align-items:center;gap:7px;flex-wrap:wrap;
  font-size:var(--fz-sm);font-weight:700;color:var(--text-2);
  transition:color var(--dur) var(--ease)}
.sbc-wa__logo{display:inline-flex;line-height:0;flex:none;color:var(--wa)}
.sbc-wa__note{font-size:var(--fz-xs);line-height:1.5;max-inline-size:52ch}

/* The state is SPELLED OUT, never implied by the green alone. Both words live in
   one grid cell and cross-fade — no display swap, no layout shift, no pop. */
.sbc-wa__state{flex:none;display:grid;align-self:center;
  padding:3px 10px;border-radius:var(--r-full);
  border:1px solid var(--line);background:var(--bg);
  font-size:var(--fz-xs);font-weight:800;letter-spacing:.02em;
  text-transform:uppercase;color:var(--text-2);
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease),
    background var(--dur) var(--ease)}
.sbc-wa__on,
.sbc-wa__off{grid-area:1 / 1;transition:opacity var(--dur) var(--ease)}
.sbc-wa__on{opacity:0}
.sbc-wa__off{opacity:1}
.sbc-wa__cb:checked ~ .sbc-wa__state .sbc-wa__on{opacity:1}
.sbc-wa__cb:checked ~ .sbc-wa__state .sbc-wa__off{opacity:0}

/* ON = impossible to miss: WhatsApp green on the state pill and the title.
   ONE rule, both themes. This used to be FOUR blocks saying the same thing — the
   light rule, a @media (prefers-color-scheme:dark) copy, a
   :root[data-theme="dark"] copy and a :root[data-theme="light"] copy — each with
   the greens written out as raw hex/rgba. The only value that genuinely has to
   differ per theme is the TEXT colour, because WhatsApp's #25D366 measures just
   1.76:1 as type on its own light wash; that fork now lives once, in
   --wa-fg (light #0b7a3c 4.82:1 / dark #7ef0ab 8.43:1).
   The wash and the border stay theme-independent: they are mixed from the --wa
   pigment, which is a third-party BRAND colour and must not be theme-forked. */
.sbc-wa__cb:checked ~ .sbc-wa__state{color:var(--wa-fg);
  border-color:color-mix(in srgb,var(--wa) 55%,transparent);
  background:color-mix(in srgb,var(--wa) 16%,transparent)}
.sbc-wa__cb:checked ~ .sbc-wa__txt .sbc-wa__title{color:var(--text)}
/* …and the whole panel lights up. Progressive: without :has() the mark, the title
   and the state pill still carry the state, so nothing is lost. */
.sbc-wa__box:has(.sbc-wa__cb:checked){border-color:color-mix(in srgb,var(--wa) 55%,transparent);
  background:color-mix(in srgb,var(--wa) 9%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--wa) 18%,transparent)}
.sbc-wa__box:hover{border-color:var(--line-brand)}

/* Exactly ONE channel offered: no chooser at all, just a line telling the visitor
   what will happen (the value is recorded by a hidden input). */
.sbc-pref__single{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0;
  font-size:var(--fz-sm)}
.sbc-pref--single .sbc-pref__val{opacity:.8}

/* ---------- Preferred hours ------------------------------------------------ */

.sbc-hours__row{display:flex;flex-wrap:wrap;align-items:flex-end;
  gap:var(--s-3) var(--s-5)}
.sbc-hours__any{display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  font-size:var(--fz-sm);font-weight:600;color:var(--text-2);
  padding-block-end:9px}
.sbc-hours__any:hover{color:var(--text)}
.sbc-hours__cb{inline-size:18px;block-size:18px;flex:none;margin:0;
  accent-color:var(--brand-fill);cursor:pointer}

.sbc-hours__range{display:flex;flex-wrap:wrap;gap:var(--s-3)}
/* The JS toggles [hidden]; the attribute must beat `display:flex`. */
.sbc-hours__range[hidden]{display:none}
/* No-JS fallback for browsers with :has() — the checkbox alone collapses it.
   (Without :has() the range simply stays visible; the server ignores the
   window whenever "any time" is on, so the submission is still correct.) */
.sbc-hours:has(.sbc-hours__cb:checked) .sbc-hours__range{display:none}
.sbc-hours__range .field{margin:0}
.sbc-time{inline-size:clamp(120px,20vw,150px)}
.sbc-time .label{margin-block-end:4px;font-size:var(--fz-xs)}

/* The trainer-editable "we will do our best" disclaimer. */
.sbc-hours__note{margin-block-start:var(--s-3);margin-block-end:0;
  font-size:var(--fz-xs);line-height:1.5;max-inline-size:62ch}

/* ---------- Success panel -------------------------------------------------- */

/* Cross-faded into the body's place inside a wrapper whose height the JS locks
   first, so the confirmation never shifts the page below it. */
.sbc-done{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--s-3);text-align:center;padding:var(--s-6) var(--s-4)}
.sbc-done[hidden]{display:none}
.sbc-done__ico{display:inline-flex;align-items:center;justify-content:center;
  inline-size:52px;block-size:52px;border-radius:var(--r-full);
  color:var(--success-fg);background:rgba(14,159,110,.12);
  border:1px solid rgba(14,159,110,.32)}
.sbc-done__msg{margin:0;font-size:var(--fz-md);font-weight:600;color:var(--text);
  max-inline-size:46ch}

/* The fade the JS drives (and what the shared fade helper degrades to when it is
   unavailable). Opacity + a 6px rise only — no scale, no "pop". */
.sbc-fade{transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.sbc-fade-out{opacity:0;transform:translateY(6px)}
.sbc-fade-in{opacity:0;transform:translateY(6px)}

/* ---------- Responsive ----------------------------------------------------- */

@media (max-width:720px){
  .sbc-grid{grid-template-columns:1fr;gap:var(--s-4)}
  .sbc-grid > *{grid-column:1 / -1}
  .sbc-pref__chip{padding:8px 12px}
  .sbc-pref__seg{gap:8px}
  /* The state pill drops under the copy rather than squeezing it. */
  .sbc-wa__box{flex-wrap:wrap}
  .sbc-wa__state{align-self:flex-start;margin-inline-start:36px}
  .sbc-hours__row{align-items:flex-start}
  .sbc-hours__any{padding-block-end:0}
  .sbc-time{inline-size:calc(50% - (var(--s-3) / 2))}
  .sbc-foot{gap:var(--s-2)}
  .sbc-submit{inline-size:100%}
  .sbc-note{flex-basis:100%}
}

/* ---------- Reduced motion ------------------------------------------------- */

@media (prefers-reduced-motion:reduce){
  .sbc-pref__chip,
  .sbc-pref__box,
  .sbc-wa__box,
  .sbc-wa__mark,
  .sbc-wa__title,
  .sbc-wa__state,
  .sbc-wa__on,
  .sbc-wa__off,
  .sbc-fade{transition:none}
  .sbc-fade-out,
  .sbc-fade-in{transform:none}
}

/* ==========================================================================
   CONTACT METHOD CHIPS — LEGIBILITY PASS
   --------------------------------------------------------------------------
   The multi-select read as a mess: on the dark theme the UNCHECKED tick box
   used `background: var(--bg)`, which is near-black, so every unselected chip
   carried a hard BLACK SQUARE next to its icon. Selected chips meanwhile were
   brand-filled boxes, so the row mixed two unrelated shapes at two visual
   weights, and the free-flowing flex wrap regularly stranded one chip alone on
   a second line.

   Fix: the chip itself carries the state. The tick box is a quiet OUTLINE when
   unselected (no fill at all) and becomes a brand-filled check when selected —
   so selection is still a SHAPE, never colour alone, but nothing reads as a
   black hole. Chips are laid out on an auto-fit grid so they share a baseline
   and fill the row evenly instead of orphaning.
   ========================================================================== */

/* Even, self-balancing rows — no stranded single chip. */
.sbc-pref__seg {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--s-2);
  align-items: stretch;
}
.sbc-pref__opt { display: flex; max-inline-size: 100%; }

/* Chips fill their grid cell and share one height. */
.sbc-pref__chip {
  inline-size: 100%;
  min-block-size: 46px;
  justify-content: flex-start;
  gap: 10px;
}

/* THE FIX: no filled box at rest — a soft outline only. */
.sbc-pref__box {
  background: transparent;
  border-color: color-mix(in srgb, var(--text-2) 38%, transparent);
  border-radius: 6px;
}
.sbc-pref__input:hover + .sbc-pref__chip .sbc-pref__box {
  border-color: color-mix(in srgb, var(--brand-2) 55%, transparent);
}

/* Selected: the chip lifts to a clear brand state and the box fills. */
.sbc-pref__input:checked + .sbc-pref__chip,
.sbc-pref__radio:checked + .sbc-pref__chip {
  background: color-mix(in srgb, var(--brand-2) 12%, var(--surface));
  border-color: color-mix(in srgb, var(--brand-2) 55%, transparent);
  box-shadow: 0 2px 10px -6px color-mix(in srgb, var(--brand-2) 60%, transparent);
}

/* WhatsApp keeps its own green identity rather than borrowing brand blue. */
.sbc-pref__opt--whatsapp .sbc-pref__input:checked + .sbc-pref__chip {
  background: color-mix(in srgb, var(--wa) 12%, var(--surface));
  border-color: color-mix(in srgb, var(--wa) 55%, transparent);
  box-shadow: 0 2px 10px -6px color-mix(in srgb, var(--wa) 60%, transparent);
}

/* The opt-in panel: keep the ON/OFF pill on its own line-end edge, vertically
   centred against the whole block rather than floating beside the first line. */
.sbc-wa__box { align-items: center; gap: var(--s-4); }
.sbc-wa__state { align-self: center; margin-inline-start: auto; }

@media (max-width: 560px) {
  .sbc-pref__seg { grid-template-columns: 1fr; }
  .sbc-pref__chip { min-block-size: 44px; }
}