/* StraightTalk4u: component rules.
   ============================================================================
   Ported from the compiled component bundle inside the approved prototype
   (_ds_bundle.js, which injects one <style> block per component at runtime) and
   from the inline styles in "StraightTalk4u Website.dc.html". The prototype is
   what the client signed off, so where the prototype and the written design
   system disagree, the prototype wins.

   Depends on assets/css/tokens.css. Enqueue tokens first.

   Two notes on naming.

   1. The button variants are deliberately renamed. In the prototype the
      component prop called "primary" is green and the one called "accent" is
      navy, which reads backwards, and every call to action on the site uses
      "accent". That inversion is not carried into the theme or the editor:

        prototype variant   theme class               look
        primary             .st4u-btn--solid-brand    filled sage green
        accent              .st4u-btn--solid          filled navy, the CTA
        secondary           .st4u-btn--outline        transparent, green border
        ghost               .st4u-btn--ghost          transparent, no border

      The registered block styles follow the same names: is-style-st4u-button-
      solid, -outline and -ghost.

   2. Four components carry a short class name in the compiled bundle
      (.st4u-sh, .st4u-quote, .st4u-price, .st4u-acc). The theme uses the
      readable long names, and the short names are kept alongside them as
      aliases so that any markup lifted straight from the prototype still
      renders correctly.

   No rule in this file uses !important.
   British English throughout. No em dashes and no en dashes.
   ========================================================================= */

/* ==========================================================================
   1. Shared utilities
   ====================================================================== */

/* Accessible name for an icon-only control, visible to assistive technology
   only. Every icon button in this theme carries one of these or an aria-label.

   .st4u-vh is the short alias the patterns and the booking template parts
   actually emit. It is not optional and it is not cosmetic: without a rule the
   hidden strings render as ordinary visible text, so every calendar cell would
   read "14Monday 14 September 2026, available" on screen. Keep both names. */
.st4u-visually-hidden,
.st4u-vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Inline icons are sized by their container and inherit the text colour, so a
   single SVG can be reused at any size. st4u_icon() emits this class. */
.st4u-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

/* Tick marks are drawn a little heavier, matching the prototype. */
.st4u-icon--check {
  stroke-width: 2.5;
}

/* ==========================================================================
   2. Buttons
   ====================================================================== */

.st4u-btn {
  --_bg: var(--brand);
  --_fg: var(--text-on-brand);
  --_bd: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  line-height: 1;
  border: 1.5px solid var(--_bd);
  border-radius: var(--radius-pill);
  background: var(--_bg);
  color: var(--_fg);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: var(--shadow-xs);
  transition:
    transform var(--dur-fast) var(--ease-out),
    background var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out),
    color var(--dur) var(--ease-out);
}

/* Kadence lifts a focused button on its own shadow (button:focus, 0,1,1), and
   the shadow stayed on a clicked button for as long as it held focus. The
   resting shadow is restated for focus here, before hover, press, the focus
   ring and the disabled state: those have the same weight and come later, so
   each still wins. A variant with no shadow at rest keeps none. */
.st4u-btn:focus {
  box-shadow: var(--shadow-xs);
}

.st4u-btn--outline:focus,
.st4u-btn--outline-invert:focus,
.st4u-btn--ghost:focus {
  box-shadow: none;
}

.st4u-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.st4u-btn:active {
  transform: translateY(0) scale(0.98);
  box-shadow: none;
}

/* Every .st4u-btn, a real button above all. Kadence styles every button, and
   on hover, focus and press it sets its own blue fill, its own label colour and
   a lift shadow (button:hover and the rest, 0,1,1), which beat the one-class
   rule above. So the fill and the label are restated here at (0,2,0), from the
   same custom properties, and each variant's hover goes on changing those. Read
   on live on 10 October 2026: Submit enquiry went from the accent to #215387
   under the pointer, a blue that is in no design, where the same class on a
   link went to --accent-strong as drawn. K-37, and the same fault as FBL-0078
   and .st4u-terms__open further down.

   The selector names no element on purpose. The same rule holds the label of a
   link drawn as a button, which body a:hover (layout.css) and Kadence's a:focus
   would otherwise recolour: on live, Back to home on the three confirmation
   screens turned --brand on a --brand fill under the pointer, 1 to 1 (K-41).
   Do not narrow it to button.st4u-btn. */
.st4u-btn:hover,
.st4u-btn:focus,
.st4u-btn:active {
  background: var(--_bg);
  color: var(--_fg);
}

/* The focus ring is the only visible focus indicator on a button, so it must
   never be suppressed. WCAG 2.2 AA, 2.4.11 Focus Not Obscured and 2.4.13 Focus
   Appearance both depend on it. */
.st4u-btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.st4u-btn[disabled],
.st4u-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Sizes. */
.st4u-btn--sm {
  font-size: 13px;
  padding: 0.55em 1.1em;
}

.st4u-btn--md {
  font-size: 15px;
  padding: 0.8em 1.6em;
}

.st4u-btn--lg {
  font-size: 17px;
  padding: 1em 2em;
}

/* Variants. Solid is navy and is the call to action used site wide. */
.st4u-btn--solid {
  --_bg: var(--accent);
  --_fg: var(--text-on-accent);
}

/* :hover is not blocked by [disabled], so each variant's hover skips a dead
   button: Continue, before a time is chosen, stays the colour it is. Two
   :not()s rather than one :where(), which browsers before 2021 drop whole, and
   the hover of every link button with it. The heavier selector changes nothing,
   because nothing but .st4u-btn and these variant rules sets --_bg, --_fg and
   --_bd. */
.st4u-btn--solid:not([disabled]):not([aria-disabled="true"]):hover {
  --_bg: var(--accent-strong);
}

/* The green fill, used once on the home page for "See how coaching works". */
.st4u-btn--solid-brand {
  --_bg: var(--brand);
  --_fg: var(--text-on-brand);
}

.st4u-btn--solid-brand:not([disabled]):not([aria-disabled="true"]):hover {
  --_bg: var(--brand-strong);
}

.st4u-btn--outline {
  --_bg: transparent;
  --_fg: var(--brand);
  --_bd: var(--brand);
  box-shadow: none;
}

.st4u-btn--outline:not([disabled]):not([aria-disabled="true"]):hover {
  --_bg: var(--brand);
  --_fg: var(--text-on-brand);
}

/* The outline button drawn on a dark band. The green border of .st4u-btn--
   outline would sit at roughly 1.2:1 against --surface-invert, which fails
   WCAG 2.2 AA for a non-text control, so the invert case gets its own white
   border and label. Used once, beside the call to action on the dark bands. */
.st4u-btn--outline-invert {
  --_bg: transparent;
  --_fg: var(--white);
  --_bd: rgba(255, 255, 255, 0.55); /* 3.5 to 1 on --surface-invert; 0.45 read 2.8 (K-23, 9 October 2026). */
  box-shadow: none;
}

.st4u-btn--outline-invert:not([disabled]):not([aria-disabled="true"]):hover {
  --_bg: rgba(255, 255, 255, 0.12);
  --_bd: var(--white);
}

.st4u-btn--outline-invert:focus-visible {
  outline: 3px solid var(--white);
  outline-offset: 2px;
  box-shadow: none;
}

.st4u-btn--ghost {
  --_bg: transparent;
  --_fg: var(--text-strong);
  --_bd: transparent;
  box-shadow: none;
}

.st4u-btn--ghost:not([disabled]):not([aria-disabled="true"]):hover {
  --_bg: var(--surface-alt);
}

.st4u-btn--block {
  display: flex;
  width: 100%;
}

.st4u-btn__icon {
  display: inline-flex;
  align-items: center;
}

.st4u-btn__icon .st4u-icon {
  width: 1.15em;
  height: 1.15em;
}

/* ==========================================================================
   3. Cards
   ====================================================================== */

.st4u-card {
  background: var(--surface);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition:
    transform var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out);
}

.st4u-card--pad-sm {
  padding: var(--space-4);
}

.st4u-card--pad-md {
  padding: var(--space-5);
}

.st4u-card--pad-lg {
  padding: var(--space-6);
}

.st4u-card--flat {
  box-shadow: none;
}

.st4u-card--ghost {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

/* The accent top rule. Used on the three "why coaching" cards and on both
   sticky rail cards. */
.st4u-card--accent {
  border-top: 4px solid var(--accent);
}

.st4u-card--interactive {
  cursor: pointer;
}

.st4u-card--interactive:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}

.st4u-card--interactive:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* ==========================================================================
   4. Badges
   ====================================================================== */

.st4u-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  line-height: 1;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.st4u-badge--sm {
  font-size: 11px;
  padding: 0.42em 0.8em;
}

.st4u-badge--md {
  font-size: 13px;
  padding: 0.55em 1em;
}

.st4u-badge--solid {
  background: var(--accent);
  color: var(--text-on-accent);
}

.st4u-badge--brand {
  background: var(--brand);
  color: var(--text-on-brand);
}

.st4u-badge--soft {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.st4u-badge--soft-navy {
  background: var(--brand-soft);
  color: var(--brand);
}

/* The tint badge is the hero's "Free 15-minute discovery call" pill. */
.st4u-badge--tint {
  background: var(--green-tint);
  color: var(--green-700);
}

.st4u-badge--outline {
  background: transparent;
  color: var(--text-body);
  border: 1.5px solid var(--border-strong);
}

.st4u-badge__dot {
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: currentColor;
}

/* ==========================================================================
   5. Section heading
   Twelve occurrences across the six pages, so this is the single most reused
   pattern on the site. .st4u-sh is the prototype's own class name, kept as an
   alias.
   ====================================================================== */

.st4u-section-heading,
.st4u-sh {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.st4u-section-heading--center,
.st4u-sh--center {
  align-items: center;
  text-align: center;
}

.st4u-section-heading__eyebrow,
.st4u-sh__eyebrow {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--accent-strong);
}

.st4u-section-heading__title,
.st4u-sh__title {
  font-family: var(--font-heading);
  color: var(--text-strong);
  letter-spacing: var(--heading-spacing);
  text-transform: var(--heading-transform);
  line-height: var(--lh-tight);
  margin: 0;
  font-weight: var(--fw-bold);
}

.st4u-section-heading--sm .st4u-section-heading__title,
.st4u-sh--sm .st4u-sh__title {
  font-size: var(--text-xl);
}

.st4u-section-heading--md .st4u-section-heading__title,
.st4u-sh--md .st4u-sh__title {
  font-size: var(--text-2xl);
}

.st4u-section-heading--lg .st4u-section-heading__title,
.st4u-sh--lg .st4u-sh__title {
  font-size: var(--text-3xl);
  font-weight: var(--fw-semibold);
}

.st4u-section-heading__intro,
.st4u-sh__intro {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--lh-relaxed);
  color: var(--text-body);
  margin: 0;
  max-width: 60ch;
}

.st4u-section-heading--center .st4u-section-heading__intro,
.st4u-sh--center .st4u-sh__intro {
  margin-inline: auto;
}

/* ==========================================================================
   6. Testimonial
   The avatar holds a single initial derived from the author's name. The
   prototype derives it in JavaScript; the pattern generates it in PHP so the
   site owner never has to type it. It is decorative, so the markup carries
   aria-hidden and the name is read from .st4u-testimonial__name instead.
   ====================================================================== */

.st4u-testimonial,
.st4u-quote {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  background: var(--surface);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  font-family: var(--font-sans);
  margin: 0;
  transition:
    transform var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out);
}

.st4u-testimonial--lift:hover,
.st4u-quote--lift:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

/* The oversized opening quotation mark. Decorative, so it is aria-hidden in the
   markup and its half line height pulls the text up under it. */
.st4u-testimonial__mark,
.st4u-quote__mark {
  font-family: var(--font-serif);
  /* Both shipped Lora subsets are the italic face, and theme.json declares
     both as fontStyle italic, so an upright weight would fall through the
     stack to Georgia. layout.css line 549 and editor.css already pair the two;
     this is the third place the pairing has to hold. */
  font-style: italic;
  font-size: 54px;
  line-height: 0.5;
  color: var(--accent);
  height: 24px;
}

.st4u-testimonial__text,
.st4u-quote__text {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  line-height: var(--lh-snug);
  color: var(--text-strong);
  font-style: italic;
  font-weight: var(--fw-medium);
  margin: 0;
  /* The shipped pattern renders the quote as a <blockquote>, and Kadence's
     global.min.css gives every blockquote a 4px left rule and a 1em indent.
     The approved testimonial has neither, so both are cleared here rather
     than left to look like an accidental accent bar. */
  border-left: 0;
  padding-left: 0;
}

.st4u-testimonial__foot,
.st4u-quote__foot {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
}

.st4u-testimonial__avatar,
.st4u-quote__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex: none;
  background: var(--brand-soft);
  color: var(--brand);
  display: grid;
  place-items: center;
  font-weight: var(--fw-extra);
  font-size: 16px;
}

.st4u-testimonial__name,
.st4u-quote__name {
  font-weight: var(--fw-extra);
  color: var(--text-strong);
  font-size: 15px;
}

.st4u-testimonial__role,
.st4u-quote__role {
  display: block;
  font-size: 13px;
  color: var(--text-muted);
}

/* ==========================================================================
   7. Price card
   ====================================================================== */

/* Every card carries the same navy border, at the client's request (FBL-0032).
   The two outer cards used to be --ink-300, a pale grey, against the featured
   card's --accent, and she read that difference as the middle card having been
   selected rather than as a highlight. */
.st4u-price-card,
.st4u-price {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  background: var(--surface);
  border: var(--border-width) solid var(--accent);
  border-radius: var(--radius-card);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  font-family: var(--font-sans);
  transition:
    transform var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out);
}

.st4u-price-card:hover,
.st4u-price:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

/* Since FBL-0032 the border no longer marks the featured card out, because every
   card now has it. What is left is the deeper shadow below and the flag that
   overhangs the top edge. Keep both: take either away and the featured card is
   indistinguishable. The border-color is kept here so that changing --accent on
   one rule and not the other cannot silently reintroduce the difference. */
.st4u-price-card--featured,
.st4u-price--featured {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
}

/* The "Best value" flag overhangs the top edge of the card by 12px. Its parent
   section therefore needs 12px of extra top padding so the flag is not clipped
   by the band above it: see .st4u-section--flag-clearance below, which is what
   the fees section carries. */
.st4u-price-card__flag,
.st4u-price__flag {
  position: absolute;
  top: -12px;
  left: var(--space-6);
  background: var(--accent);
  color: var(--text-on-accent);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.5em 1em;
  border-radius: var(--radius-pill);
}

/* Applied to the fees section, which holds the only overhanging flag on the
   site. Defined here rather than in layout.css so that the 12px and the flag
   offset it compensates for sit next to each other.

   The selector names both classes on purpose. layout.css sets
   .st4u-section { padding-block: var(--section-y) }, it is enqueued after this
   file, and a single class selector at equal specificity loses to a later one,
   so a one class rule here would have its 12px thrown away by the shorthand.
   st4u/fees-three-tier also carries 12px of its own top padding on the grid, so
   this class is not required for the flag to clear; it is the band level
   equivalent for anyone building the section by hand. */
.st4u-section.st4u-section--flag-clearance {
  padding-top: calc(var(--section-y) + 12px);
}

.st4u-price-card__name,
.st4u-price__name {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--text-lg);
  color: var(--text-strong);
  letter-spacing: var(--heading-spacing);
  text-transform: var(--heading-transform);
}

.st4u-price-card__amount,
.st4u-price__amount {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.st4u-price-card__value,
.st4u-price__value {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--text-3xl);
  color: var(--brand);
  line-height: 1;
}

.st4u-price-card__per,
.st4u-price__per {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.st4u-price-card__note,
.st4u-price__note {
  font-size: var(--text-sm);
  color: var(--text-body);
}

/* The savings pill, for example "£55 per session". It moves with the fee tier
   it belongs to, which is why both are stored as one setting. */
.st4u-price-card__save,
.st4u-price__save {
  align-self: flex-start;
  background: var(--green-tint);
  color: var(--green-700);
  font-weight: var(--fw-bold);
  font-size: 12px;
  padding: 0.4em 0.8em;
  border-radius: var(--radius-pill);
}

/* ==========================================================================
   8. Accordion
   Two markup shapes are supported.

   a) core/details, which is what the FAQ pattern uses. The block's own "name"
      attribute gives exclusive open with no bespoke code. What is lost is the
      height animation, because a <details> element cannot animate its own
      disclosure in the browsers we support.

   b) A button plus panel pair carrying data-open, which is the prototype's own
      shape. This one keeps the grid-template-rows 0fr to 1fr animation over
      --dur-slow.
   ====================================================================== */

.st4u-accordion,
.st4u-acc {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  font-family: var(--font-sans);
}

.st4u-accordion__item,
.st4u-acc__item {
  background: var(--surface);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition:
    border-color var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out);
}

.st4u-accordion__item[open],
.st4u-accordion__item[data-open="true"],
.st4u-acc__item[data-open="true"] {
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
}

/* The third selector is the one that actually runs on the site. core/details
   serialises a bare <summary> with no class of its own, so the accordion rows
   the FAQ pattern emits can only be reached through the element. Without it
   every question renders as an unstyled 29px strip with the browser's own
   disclosure triangle. */
.st4u-accordion__btn,
.st4u-acc__btn,
.st4u-accordion__item > summary {
  width: 100%;
  /* A <button> is border-box by default and a <summary> is not, so without this
     the row is 100% wide plus its own 48px of side padding and the plus disc at
     the right hand end is clipped away by the item's overflow: hidden. */
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  padding: var(--space-4) var(--space-5);
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--text-md);
  color: var(--text-strong);
  line-height: var(--lh-snug);
  letter-spacing: var(--heading-spacing);
  text-transform: var(--heading-transform);
}

/* A <summary> shows a disclosure triangle by default, which would sit beside
   our own plus icon. Both selectors are needed: the pseudo element covers
   WebKit, list-style covers everything else. */
summary.st4u-accordion__btn,
.st4u-accordion__item > summary {
  list-style: none;
}

summary.st4u-accordion__btn::-webkit-details-marker,
.st4u-accordion__item > summary::-webkit-details-marker {
  display: none;
}

/* The ring is drawn inside the item so that it is not clipped by the item's own
   overflow: hidden. */
.st4u-accordion__btn:focus-visible,
.st4u-acc__btn:focus-visible,
.st4u-accordion__item > summary:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 3px var(--focus-ring);
}

/* The plus disc at the right hand end of a core/details row. It is drawn as a
   pseudo element rather than as markup, because core/details owns the contents
   of its <summary> and anything added there is reported as unexpected content
   the first time the owner opens the page in the editor. The look is the same
   as .st4u-accordion__icon below. */
.st4u-accordion__item > summary::after {
  content: "+";
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-strong);
  display: grid;
  place-items: center;
  font-size: 18px;
  font-family: var(--font-sans);
  transition:
    transform var(--dur) var(--ease-out),
    background var(--dur) var(--ease-out),
    color var(--dur) var(--ease-out);
}

.st4u-accordion__item[open] > summary::after {
  transform: rotate(45deg);
  background: var(--accent);
  color: var(--text-on-accent);
}

.st4u-accordion__icon,
.st4u-acc__icon {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-strong);
  display: grid;
  place-items: center;
  font-size: 18px;
  font-family: var(--font-sans);
  transition:
    transform var(--dur) var(--ease-out),
    background var(--dur) var(--ease-out),
    color var(--dur) var(--ease-out);
}

/* The plus rotates into a cross when the item opens. */
.st4u-accordion__item[open] .st4u-accordion__icon,
.st4u-accordion__item[data-open="true"] .st4u-accordion__icon,
.st4u-acc__item[data-open="true"] .st4u-acc__icon {
  transform: rotate(45deg);
  background: var(--accent);
  color: var(--text-on-accent);
}

/* The animated panel, for the data-open shape only. */
.st4u-accordion__panel,
.st4u-acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-slow) var(--ease-out);
}

.st4u-accordion__item[data-open="true"] .st4u-accordion__panel,
.st4u-acc__item[data-open="true"] .st4u-acc__panel {
  grid-template-rows: 1fr;
}

/* Inside a <details> the panel is shown or hidden by the element itself, so the
   collapsed row must not apply or the open content would be clipped to zero. */
.st4u-accordion__item[open] .st4u-accordion__panel {
  grid-template-rows: 1fr;
}

.st4u-accordion__inner,
.st4u-acc__inner {
  overflow: hidden;
}

.st4u-accordion__body,
.st4u-acc__body {
  padding: 0 var(--space-5) var(--space-5);
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
  color: var(--text-body);
}

/* ==========================================================================
   9. Form controls
   Ported verbatim from the design system's fieldStyles.js, which is the single
   source for every control on the three forms. Core's own core/form,
   core/form-input and core/form-submit-button blocks are all still marked
   experimental, so the theme renders its own markup against these classes.

   The field names and the endpoint these controls post to are fixed by
   docs/BOOKING-CONTRACT.md. Nothing here changes them.
   ====================================================================== */

.st4u-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font-sans);
}

.st4u-field__label {
  font-size: 14px;
  font-weight: var(--fw-bold);
  color: var(--text-strong);
}

/* The asterisk is decorative and carries aria-hidden. The control itself is
   marked up with the required attribute, which is what assistive technology
   announces. */
.st4u-field__req {
  color: var(--danger);
  margin-left: 2px;
}

.st4u-field__hint {
  font-size: 12px;
  color: var(--text-muted);
}

.st4u-field__error {
  font-size: 12px;
  color: var(--danger);
  font-weight: var(--fw-semibold);
}

/* Every rule in this group names .st4u-control twice: once on its own, and once
   as input[type].st4u-control. Kadence's global.min.css styles its text inputs
   through a list of input[type="text"], input[type="email"] and so on, which is
   (0,1,1) and beats a single class. The attribute branch is (0,2,1) and takes
   the look back without an !important. <select> and <textarea> are bare type
   selectors in that same Kadence rule, so they were never affected; the extra
   branch simply does not match them. */
.st4u-control,
input[type].st4u-control {
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--text-strong);
  background: var(--surface);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 0.7em 0.85em;
  width: 100%;
  box-sizing: border-box;
  transition:
    border-color var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out);
}

.st4u-control::placeholder,
input[type].st4u-control::placeholder {
  color: var(--text-muted);
}

.st4u-control:hover,
input[type].st4u-control:hover {
  border-color: var(--ink-400);
}

.st4u-control:focus,
input[type].st4u-control:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--shadow-focus);
}

.st4u-control[disabled],
input[type].st4u-control[disabled] {
  background: var(--ink-50);
  opacity: 0.7;
  cursor: not-allowed;
}

/* Applied alongside aria-invalid="true" whenever the server rejects a value. */
.st4u-control--error,
input[type].st4u-control--error {
  border-color: var(--danger);
}

.st4u-control--textarea {
  min-height: 120px;
  resize: vertical;
  line-height: 1.6;
}

/* The select chevron is drawn in CSS as a 9px square with two borders, rotated
   45 degrees and pulled 14px in from the right edge. Nothing is fetched for it,
   which is the point: no background image, no icon font, no third party
   request. */
.st4u-select-wrap {
  position: relative;
}

.st4u-select-wrap::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  transform: translateY(-65%) rotate(45deg);
  pointer-events: none;
}

.st4u-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.4em;
  cursor: pointer;
}

/* The honeypot field the plugin's spam check reads. It must be reachable by
   nothing at all: hidden from sight, from the tab order and from assistive
   technology, so that only an automated submitter fills it in. */
.st4u-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ==========================================================================
   10. Booking wizard controls
   The calendar day cells and the time pills. Both are real buttons, so they
   inherit the focus ring rules above, and both carry an accessible name that
   states the full date rather than a bare number.
   ====================================================================== */

.st4u-daygrid,
.st4u-daygrid__head {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.st4u-daygrid__head {
  margin-bottom: 6px;
}

.st4u-daygrid__weekday {
  text-align: center;
  font-size: 12px;
  font-weight: var(--fw-bold);
  color: var(--text-muted);
  padding: 4px 0;
}

.st4u-day {
  aspect-ratio: 1;
  min-height: 40px;
  border-radius: 10px;
  font-family: var(--font-sans);
  font-size: 14.5px;
  font-weight: var(--fw-bold);
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text-strong);
  cursor: pointer;
  transition:
    border-color var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.st4u-day:hover {
  border-color: var(--accent);
}

.st4u-day:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.st4u-day[aria-pressed="true"],
.st4u-day[aria-selected="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text-on-accent);
}

/* Today's date, marked with aria-current="date" in the markup. */
.st4u-day[aria-current="date"] {
  border-color: var(--accent-strong);
}

.st4u-day[disabled] {
  background: transparent;
  border-color: transparent;
  color: var(--text-muted);
  opacity: 0.45;
  cursor: not-allowed;
}

.st4u-times {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.st4u-times__label {
  font-weight: var(--fw-bold);
  font-size: 14px;
  color: var(--text-strong);
  margin: 22px 0 10px;
}

.st4u-time {
  border-radius: var(--radius-pill);
  padding: 10px 18px;
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: 14px;
  border: 1.5px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-body);
  cursor: pointer;
  transition:
    border-color var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.st4u-time:hover {
  border-color: var(--accent);
}

/* A time is a real button, so Kadence filled it blue with a white label on
   hover, focus and press (K-37, the same rule as .st4u-btn above), which made a
   pill under the pointer look like the chosen one. The design changes the
   border alone. Stated before the focus ring and the chosen and taken states
   below, which have the same weight and so still win. */
.st4u-time:hover,
.st4u-time:focus,
.st4u-time:active {
  background: var(--surface);
  color: var(--text-body);
  box-shadow: none;
}

.st4u-time:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.st4u-time[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text-on-accent);
}

/* A slot already taken. The strike through is reinforced by the disabled state
   and by the accessible name, so colour is never the only signal. */
.st4u-time[disabled] {
  text-decoration: line-through;
  border-color: var(--border-strong);
  color: var(--text-muted);
  opacity: 0.55;
  cursor: not-allowed;
}

/* The two-step progress indicator above the wizard. */
.st4u-steps {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
}

.st4u-steps__step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: var(--fw-bold);
  color: var(--text-muted);
}

.st4u-steps__step[aria-current="step"] {
  color: var(--text-strong);
}

.st4u-steps__num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 13px;
  background: var(--ink-100);
  color: var(--text-muted);
}

.st4u-steps__step[aria-current="step"] .st4u-steps__num,
.st4u-steps__step[data-done="true"] .st4u-steps__num {
  background: var(--accent);
  color: var(--text-on-accent);
}

.st4u-steps__rule {
  flex: 1;
  height: 2px;
  background: var(--border);
  border-radius: 2px;
}

/* The summary chip on step two, showing the chosen date and time. */
.st4u-summary-chip {
  display: flex;
  gap: 10px;
  align-items: center;
  background: var(--accent-soft);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  margin-bottom: 22px;
  font-size: 14.5px;
  font-weight: var(--fw-bold);
  color: var(--text-strong);
}

/* The "Change date or time" link back to step one. */
.st4u-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: var(--fw-bold);
  color: var(--accent-strong);
  text-decoration: none;
  margin-bottom: 16px;
}

.st4u-back-link:hover {
  text-decoration: underline;
}

.st4u-back-link:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-xs);
}

/* ==========================================================================
   11. Block style variations
   The bridge between the styles registered with register_block_style() and the
   component rules above. A registered style adds an is-style-* class to the
   block's own wrapper, so each one is mapped onto the matching .st4u-* look
   here rather than the look being written twice.

   The button names follow the rename explained at the top of this file: solid,
   outline and ghost, never primary and accent.
   ====================================================================== */

.wp-block-button.is-style-st4u-button-solid .wp-block-button__link,
.wp-block-button.is-style-st4u-button-solid-brand .wp-block-button__link,
.wp-block-button.is-style-st4u-button-outline .wp-block-button__link,
.wp-block-button.is-style-st4u-button-ghost .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: 15px;
  line-height: 1;
  padding: 0.8em 1.6em;
  border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: var(--shadow-xs);
  transition:
    transform var(--dur-fast) var(--ease-out),
    background var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out),
    color var(--dur) var(--ease-out);
}

.wp-block-button.is-style-st4u-button-solid .wp-block-button__link:hover,
.wp-block-button.is-style-st4u-button-solid-brand .wp-block-button__link:hover,
.wp-block-button.is-style-st4u-button-outline .wp-block-button__link:hover,
.wp-block-button.is-style-st4u-button-ghost .wp-block-button__link:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* The large size. The hand written .st4u-btn--lg above already carries it, but a
   block style variation cannot: WordPress allows one is-style-* class per block,
   so a size cannot be combined with a colour in the editor. The size is
   therefore carried by the button row, which every pattern already names.

   Three rows use it, and the approved design draws all three at 17px with
   1em 2em of padding, about 52px tall: the hero pair, the dark call to action
   band and the women's group rail card. The fees cards and the "Ready to be
   heard?" rail card stay at the default size, as the prototype draws them. */
.st4u-hero__actions .wp-block-button .wp-block-button__link,
.st4u-cta-band__actions .wp-block-button .wp-block-button__link,
.st4u-price-cta__action .wp-block-button .wp-block-button__link {
  font-size: 17px;
  padding: 1em 2em;
}

/* The outline button beside the dark band's call to action is drawn one step
   quieter in the prototype, at 16px with 14px of vertical padding. */
.st4u-cta-band__actions .wp-block-button.is-style-st4u-button-outline .wp-block-button__link {
  font-size: 16px;
  padding: 14px 28px;
}

.wp-block-button.is-style-st4u-button-solid .wp-block-button__link:focus-visible,
.wp-block-button.is-style-st4u-button-solid-brand .wp-block-button__link:focus-visible,
.wp-block-button.is-style-st4u-button-outline .wp-block-button__link:focus-visible,
.wp-block-button.is-style-st4u-button-ghost .wp-block-button__link:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.wp-block-button.is-style-st4u-button-solid .wp-block-button__link {
  background: var(--accent);
  color: var(--text-on-accent);
}

.wp-block-button.is-style-st4u-button-solid .wp-block-button__link:hover {
  background: var(--accent-strong);
}

/* The green fill. Deliberately quieter than the navy solid, so a "read more"
   button never competes with a booking call to action beside it. */
.wp-block-button.is-style-st4u-button-solid-brand .wp-block-button__link {
  background: var(--brand);
  color: var(--text-on-brand);
}

.wp-block-button.is-style-st4u-button-solid-brand .wp-block-button__link:hover {
  background: var(--brand-strong);
}

.wp-block-button.is-style-st4u-button-outline .wp-block-button__link {
  background: transparent;
  color: var(--brand);
  border-color: var(--brand);
  /* Restated rather than left to the shorthand in the shared base rule above,
     so that a future change to that rule cannot quietly drop it. Note that
     getComputedStyle reports 1px for this on a 1x display: Chrome snaps a
     border to whole device pixels, so 1.5px is not a defect to chase. */
  border-width: 1.5px;
  box-shadow: none;
}

/* The outline button drawn on a dark band. The green border and label above sit
   at roughly 1.2:1 against --surface-invert, which fails WCAG 2.2 AA at 1.4.3
   for the text and 1.4.11 for the border, so the invert case is recoloured. The
   .st4u-btn--outline-invert rule above does the same job for a hand written
   anchor; this is the block equivalent, used by st4u/cta-band-dark. */
.st4u-band--invert .is-style-st4u-button-outline .wp-block-button__link,
.st4u-section--invert .is-style-st4u-button-outline .wp-block-button__link {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.55); /* 3.5 to 1 on --surface-invert; 0.45 read 2.8 (K-23, 9 October 2026). */
}

.st4u-band--invert .is-style-st4u-button-outline .wp-block-button__link:hover,
.st4u-section--invert .is-style-st4u-button-outline .wp-block-button__link:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--white);
  color: var(--white);
}

.st4u-band--invert .is-style-st4u-button-outline .wp-block-button__link:focus-visible,
.st4u-section--invert .is-style-st4u-button-outline .wp-block-button__link:focus-visible {
  outline: 3px solid var(--white);
  outline-offset: 2px;
  box-shadow: none;
}

.wp-block-button.is-style-st4u-button-outline .wp-block-button__link:hover {
  background: var(--brand);
  color: var(--text-on-brand);
}

.wp-block-button.is-style-st4u-button-ghost .wp-block-button__link {
  background: transparent;
  color: var(--text-strong);
  box-shadow: none;
}

.wp-block-button.is-style-st4u-button-ghost .wp-block-button__link:hover {
  background: var(--surface-alt);
}

/* Badges, applied to a paragraph or a group. */
.is-style-st4u-badge-tint,
.is-style-st4u-badge-soft,
.is-style-st4u-badge-soft-navy,
.is-style-st4u-badge-outline {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: 13px;
  line-height: 1;
  padding: 0.55em 1em;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  margin: 0;
}

.is-style-st4u-badge-tint {
  background: var(--green-tint);
  color: var(--green-700);
}

.is-style-st4u-badge-soft {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.is-style-st4u-badge-soft-navy {
  background: var(--brand-soft);
  color: var(--brand);
}

.is-style-st4u-badge-outline {
  background: transparent;
  color: var(--text-body);
  border: 1.5px solid var(--border-strong);
}

/* Cards, applied to a group. */
.is-style-st4u-card,
.is-style-st4u-card-accent,
.is-style-st4u-card-interactive {
  background: var(--surface);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
  overflow: hidden;
  transition:
    transform var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out);
}

.is-style-st4u-card-accent {
  border-top: 4px solid var(--accent);
}

.is-style-st4u-card-interactive:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}

/* The sticky rail, applied to the right hand column of a two column group. See
   the warning in layout.css: an overflow rule on any ancestor kills this
   silently. */
.is-style-st4u-sticky-rail {
  position: sticky;
  top: var(--sticky-top);
}

/* The testimonial masonry, applied to a group holding the six quotes. */
.is-style-st4u-masonry {
  columns: 320px 3;
  column-gap: var(--space-5);
}

.is-style-st4u-masonry > * {
  break-inside: avoid;
  margin-bottom: var(--space-5);
}

/* ==========================================================================
   12. Reduced motion
   Every movement above is decorative. Under prefers-reduced-motion the colour
   and shadow changes stay, because they carry meaning, and only the transforms
   and timings are removed.
   ====================================================================== */

@media (prefers-reduced-motion: reduce) {

  .st4u-btn,
  .st4u-card,
  .st4u-testimonial,
  .st4u-quote,
  .st4u-price-card,
  .st4u-price,
  .st4u-accordion__panel,
  .st4u-acc__panel,
  .st4u-accordion__icon,
  .st4u-acc__icon,
  .st4u-control,
  .st4u-day,
  .st4u-time {
    transition-duration: 0.01ms;
  }

  .st4u-btn:hover,
  .st4u-btn:active,
  .st4u-card--interactive:hover,
  .st4u-testimonial--lift:hover,
  .st4u-quote--lift:hover,
  .st4u-price-card:hover,
  .st4u-price:hover,
  .is-style-st4u-card-interactive:hover,
  .wp-block-button.is-style-st4u-button-solid .wp-block-button__link:hover,
  .wp-block-button.is-style-st4u-button-outline .wp-block-button__link:hover,
  .wp-block-button.is-style-st4u-button-ghost .wp-block-button__link:hover {
    transform: none;
  }
}

/* ==========================================================================
   13. Booking and enquiry markup
   Added by the integration pass. Sections 9 and 10 above were written against
   one class vocabulary and the templates in template-parts/ against another, so
   the shipped forms emitted names with no rule behind them. Where a rule already
   existed the template was renamed onto it; the components below are the ones
   that had no equivalent at all, ported from the approved prototype in the same
   way as everything above.

   No rule here uses !important.
   British English throughout. No em dashes and no en dashes.
   ====================================================================== */

/* --- Field sets and the field grid ------------------------------------- */

/* A fieldset is a replaced element in every browser, so its default border,
   margin, padding and min-width all have to be cleared before it can be used as
   a plain grouping element. min-width: 0 is the one that matters: without it a
   fieldset refuses to shrink below its content and the grid inside it overflows. */
.st4u-fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.st4u-fieldset + .st4u-fieldset {
  margin-top: var(--space-4);
}

/* Two columns by default, one on a narrow viewport. The controls are 15px, so
   240px is about as narrow as a labelled field can usefully be. */
.st4u-field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: var(--space-4);
}

.st4u-field-grid--three {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
}

/* The message box, which always takes the full width of the form. */
.st4u-field-grid--single {
  grid-template-columns: 1fr;
}

/* The submit button on both public forms is a direct child of the form, so it takes
   no spacing from the field grids above it. The prototype wraps it in 24px of clear
   space; without this the pill sits welded to the last input. The enquiry form had
   this from the start and the booking form did not, which is why its button sat
   against the email address field.

   The Turnstile widget is a direct child too, printed just above the button, so it
   takes the same gap. When Turnstile is switched off it is not in the document at
   all and the button takes the gap on its own, so the form looks right either way. */
.st4u-enquiry__form > .st4u-btn,
.st4u-booking__form > .st4u-btn,
.st4u-enquiry__form > .cf-turnstile,
.st4u-booking__form > .cf-turnstile {
  margin-top: var(--space-5);
}

/* With the widget present the button sits closer beneath it, because the pair reads
   as one block rather than two separate things. */
.st4u-enquiry__form > .cf-turnstile + .st4u-btn,
.st4u-booking__form > .cf-turnstile + .st4u-btn {
  margin-top: var(--space-4);
}

/* .st4u-field is a paragraph element in the templates, so its inherited margin
   has to go or every row gains a stray gap on top of the grid's own. */
.st4u-field {
  margin: 0;
}

/* The refused control's label, so the eye lands on the row and not only on the
   red border. Colour is never the only signal: the control also carries
   aria-invalid and a message of its own beneath it. */
.st4u-field--error .st4u-field__label {
  color: var(--danger);
}

.st4u-field__error {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.st4u-field__error-icon {
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: 1px;
}

/* The templates put the select class on the control itself rather than on a
   wrapper, so the appearance reset from .st4u-select is repeated here and the
   chevron is drawn on the field that holds it. */
.st4u-control--select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.4em;
  cursor: pointer;
}

.st4u-field:has(> .st4u-control--select) {
  position: relative;
}

.st4u-field:has(> .st4u-control--select)::after {
  content: "";
  position: absolute;
  right: 14px;
  bottom: 18px;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  transform: rotate(45deg);
  pointer-events: none;
}

/* --- The error summary at the top of a refused form --------------------- */

.st4u-alert {
  border-radius: var(--radius-md);
  padding: 16px 18px;
  margin-bottom: var(--space-5);
  border: var(--border-width) solid var(--border);
  background: var(--surface-alt);
}

/* The plugin sends the visitor back to this element, which carries tabindex="-1"
   so it can take focus. Without a visible ring the move is silent for a sighted
   keyboard user, which is WCAG 2.2 AA 2.4.7. */
.st4u-alert:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.st4u-alert--error {
  border-color: var(--danger);
  background: var(--danger-bg);
}

.st4u-alert__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: var(--fw-bold);
  color: var(--danger);
}

.st4u-alert__icon {
  flex: none;
  width: 20px;
  height: 20px;
}

.st4u-alert__notice {
  margin: 10px 0 0;
  font-size: 14.5px;
  line-height: var(--lh-normal);
  color: var(--text-body);
}

.st4u-alert__list {
  margin: 10px 0 0;
  padding-left: 20px;
  font-size: 14.5px;
  line-height: var(--lh-normal);
  color: var(--text-body);
}

.st4u-alert__list a {
  color: var(--danger);
  font-weight: var(--fw-semibold);
}

/* --- Inline notices ----------------------------------------------------- */

/* One row: an icon that never shrinks, then the sentence. Used for the plugin
   unavailable notices, the group session confirmation line and the payment note
   on step two. */
.st4u-notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin: var(--space-4) 0 0;
  font-size: 14.5px;
  line-height: var(--lh-normal);
  border: var(--border-width) solid var(--border);
  background: var(--surface-alt);
  color: var(--text-body);
}

.st4u-notice__icon {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
}

/* The approved confirmation block is a borderless pale blue panel, so the accent
   variant keeps the shared 1px edge for layout but draws it in nothing. */
.st4u-notice--accent {
  border-color: transparent;
  background: var(--accent-soft);
  color: var(--text-strong);
}

/* The chosen date notice sits 22px under the month grid, which is a little more
   than the 16px .st4u-notice carries for the plugin unavailable messages. */
.st4u-booking .st4u-notice--accent {
  margin-top: 22px;
}

.st4u-notice--accent .st4u-notice__icon {
  color: var(--accent-strong);
}

.st4u-notice--brand {
  border-color: var(--brand);
  background: var(--brand-soft);
  color: var(--text-strong);
}

.st4u-notice--brand .st4u-notice__icon {
  color: var(--brand-strong);
}

.st4u-notice--warning {
  border-color: var(--warning);
  background: var(--warning-bg);
  color: var(--text-strong);
}

/* --- The month grid ----------------------------------------------------- */

/* The template lays the month out as rows of cells rather than as one flat
   grid, because every cell carries a grid role and a row needs a real element to
   hang role="row" on. Each row is therefore its own seven column grid.
   .st4u-daygrid in section 10 is the flat equivalent, kept for any markup lifted
   straight from the prototype. */
/* The approved panel reads as one baseline row: the month name at the left, the
   "Wednesdays only" hint beside it, then the two round month buttons at the
   right. The buttons are not in the prototype, which has no month navigation at
   all, but the real availability engine needs them, so they take the right hand
   end rather than flanking the month name. */
.st4u-cal__bar {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}

.st4u-cal__month {
  /* The auto end margin is what gives the row its space-between reading: month
     name hard left, hint and the two month buttons at the right. */
  margin: 0 auto 0 0;
  order: 1;
  font-family: var(--font-heading);
  font-size: 19px;
  font-weight: var(--fw-bold);
  color: var(--text-strong);
}

.st4u-cal__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* The bar aligns on the text baseline, which a 34px circle should not sit on,
     so the two buttons centre themselves in the row instead. Order 3 puts both
     of them after the month name and the hint, at the right hand end. */
  align-self: center;
  order: 3;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text-strong);
  text-decoration: none;
  transition:
    border-color var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out);
}

.st4u-cal__nav:hover {
  border-color: var(--accent);
}

.st4u-cal__nav:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* A month the diary is not open for. It is rendered as a span rather than an
   anchor, so it is already unreachable; this only makes that visible. */
.st4u-cal__nav.is-disabled,
.st4u-cal__nav[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
  border-color: var(--border);
}

.st4u-cal__nav-icon {
  width: 18px;
  height: 18px;
}

/* The hint sits inside .st4u-cal__bar, on the same baseline as the month name
   and at the right hand end of the row, as the approved panel draws it. */
.st4u-cal__hint {
  margin: 0;
  order: 2;
  font-size: 12.5px;
  color: var(--text-muted);
}

/* minmax(0, 1fr) rather than 1fr, because a bare 1fr track will not shrink
   below the intrinsic minimum of the day cell (its min-height plus aspect
   ratio). On a 390px phone that floor made the month grid 375px wide inside a
   302px column and pushed the whole page sideways. Every column is equal
   either way, so this changes nothing on a wide screen. */
.st4u-cal__row {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.st4u-cal__row + .st4u-cal__row {
  margin-top: 6px;
}

.st4u-cal__row--head {
  margin-bottom: 6px;
}

.st4u-cal__dow {
  text-align: center;
  font-size: 12px;
  font-weight: var(--fw-bold);
  color: var(--text-muted);
  padding: 4px 0;
}

/* Every cell, whether it is a button, a blocked span or a padding cell, so the
   grid keeps its square rhythm across the whole month. */
.st4u-cal__cell {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  min-height: 40px;
  border-radius: 10px;
  font-family: var(--font-sans);
  font-size: 14.5px;
  font-weight: var(--fw-bold);
  border: 1.5px solid transparent;
  background: transparent;
  color: var(--text-strong);
}

/* A day that can be chosen. It is a real submit button, so it inherits the
   disabled and focus behaviour of a button. */
.st4u-cal__day.is-available {
  /* --ink-500, not --border-strong. A day cell is a control, so SC 1.4.11 wants
     3:1 on the edge that identifies it. --border-strong is 1.41:1 against the
     white panel, which is why a bookable day and an unbookable one looked alike
     and the client asked for the unavailable ones to be greyed out more. The
     answer was to make the bookable ones visible, not the rest fainter. */
  border-color: var(--ink-500);
  background: var(--surface);
  cursor: pointer;
  transition:
    border-color var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

/* The text colour is stated here rather than left to be inherited, which is
   FBL-0078. A bookable day is a real button, and the parent theme paints every
   button white on a dark background on hover. This rule carries two classes, so
   it wins the background and the panel stays --surface, white. The colour came
   from .st4u-cal__cell, which carries one class and loses, so the number turned
   white on white and disappeared under the pointer. Unbookable days are spans
   rather than buttons, which is why only the bookable ones showed it.

   The selected day is excluded on purpose. It is already white on the accent,
   and forcing dark text onto it would swap one contrast fault for another. It
   keeps its own colour and its own accent border without this rule. */
.st4u-cal__day.is-available:not(.is-selected):hover {
  border-color: var(--accent);
  color: var(--text-strong);
}

/* K-36, the keyboard half of FBL-0078. The rule above put the colour back for
   the pointer only, and Kadence's rule names button:focus and button:active as
   well, so a bookable day's number was still white on white while the day had
   keyboard focus or was being pressed: the focus ring was drawn round an empty
   square. Read on live on 10 October 2026, on both booking pages. */
.st4u-cal__day.is-available:not(.is-selected):focus,
.st4u-cal__day.is-available:not(.is-selected):active {
  color: var(--text-strong);
}

/* Kadence also lifts every button on a soft shadow under the pointer, while it
   is pressed and for as long as it holds focus. A day square is not that kind
   of button. :focus is named with the other two: without it the shadow appeared
   under a day just chosen with the pointer, as the pointer left it. Stated
   before the focus ring, which has the same weight and so still wins when a day
   has keyboard focus. */
.st4u-cal__day:hover,
.st4u-cal__day:focus,
.st4u-cal__day:active {
  box-shadow: none;
}

/* Lifted above its neighbours: on a narrow phone the squares touch, and the
   square to the right painted over that side of the ring. */
.st4u-cal__day:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  z-index: 1;
}

.st4u-cal__day.is-selected,
.st4u-cal__day[aria-selected="true"] {
  background: var(--accent);
  border-color: var(--accent);
  border-width: 2px;
  color: var(--text-on-accent);
}

/* Today. The cell also carries aria-current="date", so the ring is never the
   only signal. */
.st4u-cal__day.is-today,
.st4u-cal__cell[aria-current="date"] {
  border-color: var(--accent-strong);
}

/* A day that is fully booked and a day that was never offered read differently:
   the first keeps its outline and gains the marker below, the second is drawn
   back almost to nothing. */
.st4u-cal__day.is-full {
  border-color: var(--border-strong);
  background: var(--surface);
  color: var(--text-muted);
  cursor: not-allowed;
}

/* No opacity here. The approved grid draws every in-month day at full strength
   in --text-muted and separates the bookable ones by their outline and their
   white fill, not by fading the rest of the month away. Fading also pushed the
   numbers under 4.5:1, which fails WCAG 2.2 AA at 1.4.3. Out of month cells are
   handled by .st4u-cal__cell--pad below. */
.st4u-cal__day.is-unavailable {
  /* An inert surface rather than faded text.

     Fading is the obvious way to grey a day out and it is the wrong one: it
     drops the number below 4.5:1 and fails SC 1.4.3 Contrast. A pale fill says
     "not this one" just as plainly, and darkening the number at the same time
     takes it from 4.65:1 to 6.65:1. Greyer to look at and more legible, which is
     the opposite of the usual trade.

     The client asked for unavailable days to be greyed out more clearly. Most of
     that was actually delivered by giving the AVAILABLE days a border you can
     see, above: they were outlined at 1.41:1, so nothing stood out and the whole
     month read as one flat grid. */
  background: var(--ink-50);
  color: var(--ink-600);
  cursor: not-allowed;
}

.st4u-cal__cell--pad {
  visibility: hidden;
}

/* The dot under a fully booked day. Decorative: the cell's accessible name
   already says "fully booked", and the key below the grid repeats it. */
.st4u-cal__mark {
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--text-muted);
}

.st4u-cal__mark--full {
  background: var(--danger);
}

/* The availability key that used to sit under the grid has been removed. The
   approved panel has nothing between the last calendar row and the time list,
   and nothing accessible is lost: every cell already carries a visually hidden
   accessible name reading "available", "fully booked" or "not available". */

/* --- The time pills ----------------------------------------------------- */

/* .st4u-times in section 10 is the flex row itself. In the template it is the
   wrapper around a heading and a form, so the row moves down onto the list. */
.st4u-times {
  display: block;
  margin-top: 22px;
}

.st4u-times__title {
  margin: 0 0 10px;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: var(--fw-bold);
  color: var(--text-strong);
}

.st4u-times__list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* --- The chosen appointment on step two --------------------------------- */

.st4u-summary {
  display: flex;
  gap: 10px;
  align-items: center;
  background: var(--accent-soft);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  margin: 0 0 22px;
  font-size: 14.5px;
  font-weight: var(--fw-bold);
  color: var(--text-strong);
}

.st4u-summary__icon {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--accent-strong);
}

.st4u-summary__change {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: var(--fw-bold);
  color: var(--accent-strong);
  text-decoration: none;
  margin-bottom: 16px;
}

.st4u-summary__change:hover {
  text-decoration: underline;
}

.st4u-summary__change:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-xs);
}

.st4u-summary__change-icon {
  width: 16px;
  height: 16px;
}

/* --- The two step indicator --------------------------------------------- */

/* .st4u-steps is section 10's flex row and needs no repeat here. The template
   renders an ordered list, so the list defaults have to be cleared, and it names
   each entry __item rather than __step. */
.st4u-steps {
  list-style: none;
  padding: 0;
}

.st4u-steps__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: var(--fw-bold);
  color: var(--text-muted);
}

.st4u-steps__item[aria-current="step"] {
  color: var(--text-strong);
}

.st4u-steps__item[aria-current="step"] .st4u-steps__num {
  background: var(--accent);
  color: var(--text-on-accent);
}

/* The hairline between the two entries, drawn on the gap rather than as an
   element of its own, so the markup stays a plain list of two items. It
   stretches, which is what pushes "2 Your details" out to the right hand edge
   of the form column as the approved panel draws it. */
.st4u-steps__item + .st4u-steps__item {
  flex: 1;
}

.st4u-steps__item + .st4u-steps__item::before {
  content: "";
  flex: 1 1 auto;
  width: auto;
  min-width: 28px;
  height: 2px;
  border-radius: 2px;
  background: var(--border);
  margin-right: 2px;
}

/* On a phone the two labels plus the connector are wider than the form column,
   so the row is allowed to break onto a second line and the connector is
   allowed to give up most of its width first. Neither applies on a viewport
   wide enough to hold the row, where flex-wrap never fires. */
@media (max-width: 599px) {

  .st4u-steps {
    flex-wrap: wrap;
    row-gap: 8px;
  }

  .st4u-steps__item + .st4u-steps__item::before {
    min-width: 8px;
  }
}

/* --- The continue form and the step one prompt -------------------------- */

.st4u-wizard__continue {
  margin-top: 26px;
}

/* The prompt is rendered with .st4u-vh alongside this class, so it is announced
   and never drawn: the approved panel ends at the Continue button. The look is
   kept in case a future screen wants it visible. */
.st4u-wizard__prompt {
  margin: 10px 0 0;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
}

.st4u-booking__form {
  margin: 0;
}

/* --- The two rail cards ------------------------------------------------- */

.st4u-cta-card__icon,
.st4u-price-cta__icon {
  display: block;
  /* --accent, not --accent-strong: the prototype strokes this icon in the same
     navy as the card's top rule and its button, and the three read as one
     family only when they agree. */
  color: var(--accent);
  margin-bottom: 12px;
}

.st4u-cta-card__icon .st4u-icon,
.st4u-price-cta__icon .st4u-icon {
  width: 26px;
  height: 26px;
}

.st4u-cta-card__title,
.st4u-price-cta__title {
  margin: 0;
  font-family: var(--font-heading);
  /* --text-xl, 28px. Both rail cards carry their page's second loudest line and
     the prototype sets them at the same size as a small section heading. */
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  color: var(--text-strong);
}

.st4u-cta-card__text {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: var(--lh-relaxed);
  color: var(--text-body);
}

.st4u-price-cta__text {
  margin: 12px 0 0;
  font-size: 15px;
  line-height: var(--lh-relaxed);
  color: var(--text-body);
}

.st4u-cta-card__action,
.st4u-price-cta__action {
  margin-top: 20px;
}

/* The fees card is a flex column with a flat 16px gap, so its button row takes
   its spacing from that gap and must not add a margin of its own. */
.st4u-price__action {
  margin-top: 0;
}

/* The large price figure, sitting on the same baseline as the words beside it,
   which is why this is a flex row aligned on baseline and not on centre. */
.st4u-price-cta__amount {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 12px 0 0;
}

.st4u-price-cta__figure {
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: var(--fw-extra);
  line-height: 1;
  color: var(--text-strong);
}

.st4u-price-cta__per {
  font-size: 15px;
  font-weight: var(--fw-bold);
  color: var(--text-muted);
}

.st4u-price-cta__note {
  margin: 12px 0 0;
  font-size: 13px;
  text-align: center;
  color: var(--text-muted);
}

/* --- The reassurance note card ------------------------------------------ */

.st4u-note {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.st4u-note__icon {
  flex: none;
  /* Navy, not green. The prototype strokes this shield in --accent so it agrees
     with the "Best value" flag on the cards above it. */
  color: var(--accent);
}

.st4u-note__icon .st4u-icon {
  width: 26px;
  height: 26px;
}

.st4u-note__text {
  margin: 0;
  font-size: 14.5px;
  line-height: var(--lh-relaxed);
  color: var(--text-body);
}

/* --- The two benefit cards on the group page ---------------------------- */

.st4u-benefit__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  color: var(--text-strong);
}

.st4u-benefit__intro {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: var(--lh-relaxed);
  color: var(--text-body);
}

/* The "Benefits" eyebrow above each list. */
.st4u-benefit__label {
  margin: 18px 0 0;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--brand-strong);
}

/* A real list, so the reset is what stops the browser bullet and the 40px
   indent appearing beside the ticks. */
.st4u-benefit__list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.st4u-benefit__item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 14.5px;
  line-height: var(--lh-normal);
  color: var(--text-body);
}

.st4u-benefit__tick {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand-strong);
  display: grid;
  place-items: center;
}

.st4u-benefit__tick .st4u-icon {
  width: 15px;
  height: 15px;
}

/* ----------------------------------------------------------------------
   Outline buttons on an inverted band.

   .st4u-btn--outline-invert already covers the hand written anchor, but a
   core button block rendered with is-style-st4u-button-outline keeps its
   green text and green border, which on --surface-invert lands around
   1.3:1. That fails WCAG 2.2 SC 1.4.3 for the label and SC 1.4.11 for the
   border. The whitening rule in layout.css deliberately excludes
   .wp-block-button__link, so it has to be stated here.
   ---------------------------------------------------------------------- */
.st4u-section--invert .is-style-st4u-button-outline .wp-block-button__link {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.55); /* 3.5 to 1 on --surface-invert; 0.45 read 2.8 (K-23, 9 October 2026). */
  /* Same note as the base outline rule: 1.5px reports as 1px on a 1x display
     because Chrome snaps borders to whole device pixels. */
  border-width: 1.5px;
  background: transparent;
}

.st4u-section--invert .is-style-st4u-button-outline .wp-block-button__link:hover,
.st4u-section--invert .is-style-st4u-button-outline .wp-block-button__link:focus-visible {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.12);
}

/* ----------------------------------------------------------------------
   The site title beside the logo.

   The logo artwork already contains the wordmark and the tagline, so
   Kadence printing the site title next to it says StraightTalk4u twice.
   The logo img carries alt="StraightTalk4u", so nothing is lost to a
   screen reader by removing the duplicate. Scoped to .wp-custom-logo so
   that an install with no logo set still shows its name.
   ---------------------------------------------------------------------- */
.wp-custom-logo .site-branding .site-title {
  display: none;
}

/* ==========================================================================
   14. Legal pages
   The reading UI shared by the privacy notice, the terms and any other legal
   page. This is the .st4u-legal-* vocabulary those patterns are written
   against, so treat the class names below as the contract:

     .st4u-legal                 The page body. Carries the reading measure.
     .st4u-legal__reviewed       The quiet "last reviewed" line at the top.
     .st4u-legal__lead           The one paragraph summary under it.
     .st4u-legal__contents       The on page contents box.
     .st4u-legal__contents-title Its heading.
     .st4u-legal__contents-list  Its list of plain anchors.
     .st4u-legal__section        One section, and the anchor target.
     .st4u-legal__table-wrap     The scroll container a wide table needs.
     .st4u-legal__table          The "what we collect and why" table.
     .st4u-legal__deflist        The same content as a definition list.
     .st4u-legal__term           A term in that list.
     .st4u-legal__def            Its definition.
     .st4u-legal__flag           A gap awaiting legal or client input.
     .st4u-legal__flag-label     The visible words on that flag.
     .st4u-legal__flag-body      The text of the flag.
     .st4u-legal__note           A quiet aside.
     .st4u-legal__back           The "back to contents" link under a section.

   Two rules already live in layout.css: .st4u-legal__updated and
   .st4u-legal__lead, written for the older st4u/legal-page-body pattern.
   layout.css is enqueued after this file, so anything here sharing a name with
   one of those two is scoped under .st4u-legal to raise its specificity rather
   than relying on order. New patterns should use .st4u-legal__reviewed, which
   is this file's own name for that line and has no counterpart to fight.

   Everything reads from the tokens in assets/css/tokens.css. No new colours are
   introduced, and no rule uses !important. Nothing here depends on JavaScript:
   the contents list is a set of ordinary anchors pointing at ids.

   Both bands are supported. On the cream and white bands the page paints itself
   from --text-body and --border; inside .st4u-section--invert every surface is
   redrawn from white at low alpha, because the tokens that give the light bands
   their contrast all fail against --surface-invert.

   British English throughout. No em dashes and no en dashes.
   ====================================================================== */

/* --- The page body ------------------------------------------------------ */

/* The reading measure is the same 760px the FAQ and the enquiry form use, and
   it is set here rather than left to a wrapper, so that a legal pattern is
   readable even when it is dropped straight onto a page with no container
   around it. No padding-inline, so wrapping this in .st4u-container--narrow
   adds the gutter once rather than twice. */
.st4u-legal {
  max-width: var(--container-narrow);
  margin-inline: auto;
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--lh-relaxed);
  color: var(--text-body);
}

.st4u-legal p {
  margin: 0 0 var(--space-4);
}

.st4u-legal ul,
.st4u-legal ol {
  margin: 0 0 var(--space-4);
  padding-inline-start: var(--space-5);
}

.st4u-legal li {
  margin-bottom: var(--space-2);
}

.st4u-legal li:last-child {
  margin-bottom: 0;
}

/* A long email address or a statutory citation must wrap rather than push the
   page sideways on a narrow screen. */
.st4u-legal a {
  overflow-wrap: anywhere;
}

/* --- Heading hierarchy --------------------------------------------------- */

/* Three signals separate the levels, and none of them is colour on its own: a
   size step, a weight step, and a rule above every h2. Someone reading this in
   greyscale, or with a colour vision deficiency, still sees the structure.

   A heading is kept clear of the sticky header, when the contents list jumps
   to it, by scroll-padding-top on html (layout.css, section 7). It was a
   scroll-margin-top here until that rule arrived: the two add up, and the
   heading would land 96px too low. */
.st4u-legal h2,
.st4u-legal h3,
.st4u-legal h4 {
  font-family: var(--font-heading);
  color: var(--text-strong);
  letter-spacing: var(--heading-spacing);
  text-transform: var(--heading-transform);
}

.st4u-legal h2 {
  margin: var(--space-7) 0 var(--space-4);
  padding-top: var(--space-5);
  border-top: var(--border-width) solid var(--border);
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}

/* The first h2 follows the contents box, which already ends in a border, so it
   drops its own rule and its top space. */
.st4u-legal > .st4u-legal__section:first-of-type > h2:first-child,
.st4u-legal > h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.st4u-legal h3 {
  margin: var(--space-6) 0 var(--space-3);
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}

.st4u-legal h4 {
  margin: var(--space-5) 0 var(--space-2);
  font-size: var(--text-md);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}

/* --- The last reviewed line and the lead --------------------------------- */

/* Quiet, but findable: it is the first thing on the page, it is set in the
   heading face so it does not read as body copy, and the label is part of the
   sentence rather than a colour. */
.st4u-legal__reviewed {
  margin: 0 0 var(--space-4);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  line-height: var(--lh-normal);
  color: var(--text-muted);
}

/* Scoped to .st4u-legal so it wins over the same name in layout.css, which is
   enqueued later. */
.st4u-legal .st4u-legal__lead {
  margin: 0 0 var(--space-6);
  font-size: var(--text-lg);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--text-strong);
}

/* --- On page contents ---------------------------------------------------- */

/* Plain anchors into ids further down the page. No JavaScript, no smooth
   scrolling forced on anyone, and it prints as a readable list of the sections
   that follow. */
.st4u-legal__contents {
  margin: 0 0 var(--space-7);
  padding: var(--space-5);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface-alt);
}

.st4u-legal__contents-title {
  margin: 0 0 var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-strong);
}

/* Two columns where there is room. The list is long on a privacy notice, and a
   single column pushes the first section below the fold. */
.st4u-legal__contents-list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: st4u-legal-toc;
  font-size: var(--text-base);
  line-height: var(--lh-normal);
}

@media (min-width: 640px) {

  .st4u-legal__contents-list {
    columns: 2;
    column-gap: var(--space-6);
  }
}

.st4u-legal__contents-list li {
  margin: 0 0 var(--space-2);
  /* break-inside stops a wrapped entry splitting across the two columns. */
  break-inside: avoid;
}

.st4u-legal__contents-list li::before {
  counter-increment: st4u-legal-toc;
  content: counter(st4u-legal-toc) ". ";
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.st4u-legal__contents-list a {
  color: var(--text-link);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.st4u-legal__contents-list a:hover,
.st4u-legal__contents-list a:focus-visible {
  color: var(--brand-strong);
  text-decoration-thickness: 2px;
}

/* --- Sections and the way back ------------------------------------------- */

/* A short link back up, for anyone who reached a section from the contents list
   and wants to carry on reading somewhere else. */
.st4u-legal__back {
  display: inline-block;
  margin: 0 0 var(--space-6);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.st4u-legal__back:hover,
.st4u-legal__back:focus-visible {
  color: var(--text-link);
}

/* --- The "what we collect and why" table --------------------------------- */

/* The table is genuinely wider than the reading measure, so it gets its own
   horizontal scroll container rather than making the whole page scroll
   sideways. tabindex="0" belongs on the wrapper in the markup, so a keyboard
   user can scroll it; the focus ring here is what makes that visible. */
.st4u-legal__table-wrap {
  margin: 0 0 var(--space-6);
  overflow-x: auto;
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
}

.st4u-legal__table-wrap:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  box-shadow: var(--shadow-focus);
}

/* Once there is room on either side of the reading measure, the table takes it.
   A five column table squeezed into 760px turns every cell into a narrow ribbon
   of text and every row into a tall block, which is harder to read across than
   the same table given its natural width. The breakout is symmetrical, so the
   table stays centred on the same axis as the prose, and it only starts at
   1200px, where 8rem each side still leaves a comfortable margin to the window.
   Below that the table stays inside the measure and scrolls if it has to. */
@media (min-width: 1200px) {

  .st4u-legal__table-wrap {
    width: calc(100% + 16rem);
    margin-inline: -8rem;
  }
}

.st4u-legal__table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: var(--text-sm);
  line-height: var(--lh-normal);
  text-align: left;
}

.st4u-legal__table caption {
  padding: var(--space-4) var(--space-4) 0;
  font-size: var(--text-sm);
  color: var(--text-muted);
  text-align: left;
}

.st4u-legal__table th,
.st4u-legal__table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-width) solid var(--border);
  vertical-align: top;
}

.st4u-legal__table thead th {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-strong);
  background: var(--surface-alt);
  border-bottom-width: 2px;
}

/* A row header: the field, or the form, the row is about. */
.st4u-legal__table tbody th {
  font-weight: var(--fw-semibold);
  color: var(--text-strong);
}

.st4u-legal__table tbody tr:last-child th,
.st4u-legal__table tbody tr:last-child td {
  border-bottom: 0;
}

/* --- The same content as a definition list ------------------------------- */

/* Where a table is more structure than the content needs, a definition list
   reads better and needs no scroll container. Both are offered because a
   privacy notice mixes the two shapes: four columns of retention want a table,
   "what this field is for" wants a list. */
.st4u-legal__deflist {
  margin: 0 0 var(--space-6);
  padding: 0;
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
  overflow: hidden;
}

.st4u-legal__term {
  margin: 0;
  padding: var(--space-3) var(--space-4) 0;
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  color: var(--text-strong);
}

.st4u-legal__def {
  margin: 0;
  padding: var(--space-1) var(--space-4) var(--space-3);
  border-bottom: var(--border-width) solid var(--border);
  font-size: var(--text-sm);
  line-height: var(--lh-normal);
  color: var(--text-body);
}

.st4u-legal__def:last-child {
  border-bottom: 0;
}

/* Two columns once there is room for them, which is how this content is read:
   term on the left, answer on the right. */
@media (min-width: 640px) {

  .st4u-legal__deflist {
    display: grid;
    grid-template-columns: minmax(9rem, 12rem) 1fr;
  }

  .st4u-legal__term {
    padding: var(--space-3) var(--space-4);
    border-bottom: var(--border-width) solid var(--border);
  }

  .st4u-legal__def {
    padding: var(--space-3) var(--space-4);
  }

  /* The last pair, whichever way round the grid has laid it out. */
  .st4u-legal__term:nth-last-of-type(1),
  .st4u-legal__term:nth-last-of-type(1) + .st4u-legal__def {
    border-bottom: 0;
  }
}

/* --- The drafting flag --------------------------------------------------- */

/* Every gap awaiting legal or client input carries this. Three things make it
   obvious without relying on colour: a thick left rule, a bordered pill
   carrying real words, and a size and weight step on those words. A screen
   reader gets the label because it is text in the markup, not a colour or an
   icon, and the markup should also put role="note" on the box.

   To find every one before launch, grep the patterns folder for
   st4u-legal__flag. When the last question is answered the class disappears
   with the text it wrapped, so an empty grep is the signal that the page is
   ready to publish. */
.st4u-legal__flag {
  margin: 0 0 var(--space-5);
  padding: var(--space-4) var(--space-5);
  border: var(--border-width) solid var(--warning);
  border-left-width: 5px;
  border-radius: var(--radius-md);
  background: var(--warning-bg);
  color: var(--text-strong);
  font-size: var(--text-sm);
  line-height: var(--lh-normal);
}

.st4u-legal__flag-label {
  display: inline-block;
  margin: 0 0 var(--space-2);
  padding: 2px var(--space-3);
  border: var(--border-width) solid var(--warning);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  /* --warning on --surface is about 4.6:1, which clears WCAG 2.2 AA at 1.4.3
     for text this size. It is not carrying the meaning on its own in any case:
     the words inside the pill say what it is. */
  color: var(--warning);
}

.st4u-legal__flag-body {
  margin: 0;
  color: var(--text-strong);
}

.st4u-legal__flag-body + .st4u-legal__flag-body {
  margin-top: var(--space-3);
}

/* A flag inside a table cell has no room for the padding above, so it collapses
   to the pill and the text. */
.st4u-legal__table .st4u-legal__flag {
  margin: 0;
  padding: var(--space-2) var(--space-3);
}

/* --- A gap marked inside a sentence -------------------------------------- */

/* Some gaps are a missing phrase rather than a missing paragraph, so they are
   marked with <mark> in the running text instead of with a whole flag box. The
   browser default, black on yellow, is already the loudest thing on a line and
   already clears AA, so only the padding is added here, to stop the highlight
   sitting flush against the words on either side of it.

   These have to go before publication as surely as the flags do. Grep the
   patterns folder for "TO CONFIRM" to find them. */
.st4u-legal mark {
  padding: 0 0.15em;
  border-radius: 2px;
}

/* --- The quiet note ------------------------------------------------------ */

/* A plain aside. No border box, no colour fill, just a rule down the side and a
   step down in size, so it reads as commentary rather than as a warning. */
.st4u-legal__note {
  margin: 0 0 var(--space-5);
  padding: 0 0 0 var(--space-4);
  border-left: 3px solid var(--border-strong);
  font-size: var(--text-sm);
  line-height: var(--lh-normal);
  color: var(--text-muted);
}

.st4u-legal__note p {
  margin: 0 0 var(--space-2);
}

.st4u-legal__note p:last-child {
  margin-bottom: 0;
}

/* --- On a dark band ------------------------------------------------------ */

/* --text-body, --border, --surface and --surface-alt are all built for the
   cream and white bands, and every one of them fails against --surface-invert,
   so the page is redrawn from white at low alpha. The flag keeps the --warning
   hue on its rule, which reads clearly on dark sage, but takes white text,
   because --text-strong navy on dark sage is close to invisible. */
.st4u-section--invert .st4u-legal,
.st4u-band--invert .st4u-legal {
  color: rgba(255, 255, 255, 0.88);
}

.st4u-section--invert .st4u-legal .st4u-legal__lead,
.st4u-band--invert .st4u-legal .st4u-legal__lead,
.st4u-section--invert .st4u-legal h4,
.st4u-band--invert .st4u-legal h4 {
  color: var(--white);
}

.st4u-section--invert .st4u-legal__reviewed,
.st4u-band--invert .st4u-legal__reviewed,
.st4u-section--invert .st4u-legal__back,
.st4u-band--invert .st4u-legal__back,
.st4u-section--invert .st4u-legal__note,
.st4u-band--invert .st4u-legal__note {
  color: rgba(255, 255, 255, 0.72);
}

.st4u-section--invert .st4u-legal h2,
.st4u-band--invert .st4u-legal h2 {
  border-top-color: rgba(255, 255, 255, 0.25);
}

.st4u-section--invert .st4u-legal__contents,
.st4u-band--invert .st4u-legal__contents,
.st4u-section--invert .st4u-legal__table-wrap,
.st4u-band--invert .st4u-legal__table-wrap,
.st4u-section--invert .st4u-legal__deflist,
.st4u-band--invert .st4u-legal__deflist {
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.06);
}

.st4u-section--invert .st4u-legal__contents-title,
.st4u-band--invert .st4u-legal__contents-title,
.st4u-section--invert .st4u-legal__term,
.st4u-band--invert .st4u-legal__term,
.st4u-section--invert .st4u-legal__table tbody th,
.st4u-band--invert .st4u-legal__table tbody th {
  color: var(--white);
}

.st4u-section--invert .st4u-legal__contents-list li::before,
.st4u-band--invert .st4u-legal__contents-list li::before,
.st4u-section--invert .st4u-legal__def,
.st4u-band--invert .st4u-legal__def,
.st4u-section--invert .st4u-legal__table caption,
.st4u-band--invert .st4u-legal__table caption {
  color: rgba(255, 255, 255, 0.78);
}

.st4u-section--invert .st4u-legal__table th,
.st4u-band--invert .st4u-legal__table th,
.st4u-section--invert .st4u-legal__table td,
.st4u-band--invert .st4u-legal__table td,
.st4u-section--invert .st4u-legal__term,
.st4u-band--invert .st4u-legal__term,
.st4u-section--invert .st4u-legal__def,
.st4u-band--invert .st4u-legal__def {
  border-color: rgba(255, 255, 255, 0.18);
}

.st4u-section--invert .st4u-legal__table thead th,
.st4u-band--invert .st4u-legal__table thead th {
  color: var(--white);
  background: rgba(255, 255, 255, 0.1);
}

.st4u-section--invert .st4u-legal__note,
.st4u-band--invert .st4u-legal__note {
  border-left-color: rgba(255, 255, 255, 0.35);
}

/* The flag keeps its warning rule, so it is still the loudest thing on the
   page, but the cream fill drops away, because --warning-bg on dark sage reads
   as an ordinary pale card rather than as a warning. */
.st4u-section--invert .st4u-legal__flag,
.st4u-band--invert .st4u-legal__flag {
  background: rgba(255, 255, 255, 0.08);
  color: var(--white);
}

.st4u-section--invert .st4u-legal__flag-body,
.st4u-band--invert .st4u-legal__flag-body {
  color: var(--white);
}

/* --- Print --------------------------------------------------------------- */

/* People print these, and a printed privacy notice is the copy someone keeps.
   The page is set to the paper rather than to the screen: no coloured fills to
   drink the ink, hairline rules that survive a mono printer, and no heading
   left stranded at the foot of a page.

   The flag is deliberately still obvious in print. A draft that goes to the
   solicitor on paper must show its gaps as clearly as the screen does, so the
   pill and the thick rule stay and only the fill is dropped. */
@media print {

  .st4u-legal {
    max-width: none;
    font-size: 11pt;
    line-height: 1.5;
    color: #000;
  }

  .st4u-legal h2,
  .st4u-legal h3,
  .st4u-legal h4 {
    color: #000;
    /* Never end a page on a heading. */
    break-after: avoid;
    break-inside: avoid;
  }

  .st4u-legal h2 {
    margin-top: 18pt;
    padding-top: 8pt;
    font-size: 14pt;
    border-top: 0.5pt solid #000;
  }

  .st4u-legal h3 {
    font-size: 12pt;
  }

  .st4u-legal p,
  .st4u-legal li {
    /* Two lines is the smallest orphan or widow worth printing. */
    orphans: 2;
    widows: 2;
  }

  .st4u-legal__reviewed,
  .st4u-legal__note {
    color: #333;
  }

  .st4u-legal .st4u-legal__lead {
    font-size: 12pt;
    color: #000;
  }

  /* The contents list is a set of page anchors, which mean nothing on paper,
     but the list of sections is still worth having, so it prints as plain text
     in one column with the link styling removed. */
  .st4u-legal__contents {
    padding: 8pt;
    border: 0.5pt solid #000;
    background: none;
  }

  .st4u-legal__contents-list {
    columns: 1;
  }

  .st4u-legal__contents-list a {
    color: #000;
    text-decoration: none;
  }

  /* The way back up is a screen affordance and prints as noise. */
  .st4u-legal__back {
    display: none;
  }

  /* Nothing scrolls on paper, so the wrapper stops being a scroll container and
     the table takes the full width of the sheet. The screen breakout above is
     undone here, because the sheet has no window margin to borrow from. */
  .st4u-legal__table-wrap {
    width: auto;
    margin-inline: 0;
  }

  .st4u-legal__table-wrap,
  .st4u-legal__deflist {
    overflow: visible;
    border: 0.5pt solid #000;
    background: none;
    break-inside: auto;
  }

  .st4u-legal__table {
    min-width: 0;
    font-size: 9.5pt;
  }

  .st4u-legal__table th,
  .st4u-legal__table td {
    border-bottom: 0.5pt solid #666;
    color: #000;
  }

  .st4u-legal__table thead th {
    background: none;
    border-bottom: 1pt solid #000;
  }

  /* Repeat the header on every page a long table runs over. */
  .st4u-legal__table thead {
    display: table-header-group;
  }

  .st4u-legal__table tr {
    break-inside: avoid;
  }

  .st4u-legal__term,
  .st4u-legal__def {
    border-bottom: 0.5pt solid #666;
    color: #000;
  }

  .st4u-legal__flag {
    border: 1pt solid #000;
    border-left-width: 4pt;
    background: none;
    color: #000;
    break-inside: avoid;
  }

  .st4u-legal__flag-label,
  .st4u-legal__flag-body {
    color: #000;
  }

  .st4u-legal__flag-label {
    border: 0.5pt solid #000;
    background: none;
  }

  .st4u-legal__note {
    border-left: 2pt solid #666;
  }

  /* A yellow fill either drinks the ink or prints as nothing on a mono
     printer, so a highlighted gap is boxed instead. It has to be as obvious on
     the solicitor's paper copy as it is on the screen. */
  .st4u-legal mark {
    padding: 0 2pt;
    border: 0.5pt solid #000;
    background: none;
    color: #000;
  }
}

/* --- Women's group terms: the tick box and its window (FBL-0060) --------- */

/* Sits under the fee notice on step two of the group form, above Turnstile and
   the button, so accepting the terms is the last thing done before sending. */
.st4u-terms {
  margin: var(--space-4) 0 0;
}

.st4u-terms__read {
  margin: 0 0 var(--space-2);
}

/* A button drawn as a link. Kadence styles every button, and on hover and focus
   it sets white text on a dark blue fill, which is exactly how FBL-0078 lost the
   calendar dates. So colour and background are stated on the plain rule AND on
   the hover, focus and active rules: (0,2,0) beats Kadence's button:hover at
   (0,1,1), and nothing is left for Kadence to fill in. */
.st4u-terms__open,
.st4u-terms__close {
  display: inline;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-family: inherit;
  font-size: 14.5px;
  line-height: inherit;
  font-weight: var(--fw-semibold);
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.st4u-terms__open:hover,
.st4u-terms__open:focus,
.st4u-terms__open:active,
.st4u-terms__close:hover,
.st4u-terms__close:focus,
.st4u-terms__close:active {
  background: transparent;
  box-shadow: none;
  color: var(--accent-strong);
}

.st4u-terms__open:focus-visible,
.st4u-terms__close:focus-visible,
.st4u-terms__body:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-xs);
}

/* The text fills the window from side to side, and the window clips what is
   outside it, so the ring above showed along the top and bottom only. For the
   text alone it is drawn just inside the box, as the FAQ questions' ring is. */
.st4u-terms__body:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: -3px;
  box-shadow: none;
}

.st4u-terms__accept {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  font-size: 14.5px;
  line-height: var(--lh-normal);
  color: var(--text-strong);
}

.st4u-terms__accept label {
  font-weight: var(--fw-bold);
  cursor: pointer;
}

.st4u-terms__box {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--brand);
  cursor: pointer;
}

.st4u-terms__box:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.st4u-terms.st4u-field--error .st4u-terms__box {
  outline: 2px solid var(--danger);
  outline-offset: 2px;
}

/* The window. The browser centres a popover itself and hides it until opened,
   so display is set ONLY on the open state: an author display rule on the plain
   selector would beat the browser's own display: none and leave the terms open
   on the page permanently. */
.st4u-terms__window {
  width: min(640px, calc(100vw - 32px));
  max-height: min(80vh, 720px);
  padding: 0;
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-card);
  background: var(--surface);
  color: var(--text-body);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.st4u-terms__window:popover-open {
  display: flex;
  flex-direction: column;
}

.st4u-terms__window::backdrop {
  background: rgba(6, 36, 63, 0.45);
}

.st4u-terms__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 16px 20px;
  border-bottom: var(--border-width) solid var(--border);
}

.st4u-terms__title {
  margin: 0;
  font-size: 18px;
  font-weight: var(--fw-bold);
  line-height: 1.3;
  color: var(--text-strong);
}

.st4u-terms__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 20px;
  font-size: 14.5px;
  line-height: var(--lh-normal);
}

.st4u-terms__body > :first-child {
  margin-top: 0;
}

.st4u-terms__body h3 {
  margin: 1.4em 0 0.5em;
  font-size: 15.5px;
  color: var(--text-strong);
}

.st4u-terms__body p,
.st4u-terms__body ul {
  margin: 0 0 0.75em;
}

.st4u-terms__body ul {
  padding-left: 1.25em;
}

.st4u-terms__body li + li {
  margin-top: 0.35em;
}

.st4u-terms__foot {
  display: flex;
  justify-content: flex-end;
  padding: 12px 20px;
  border-top: var(--border-width) solid var(--border);
}

/* The terms printed on the page rather than in a window: when the form comes back
   refused over the terms, or back for another field after the terms were accepted
   from the page, so nobody can be left unable to tick the box; and as the noscript
   copy in details.php when scripting is off. Position is stated because a popover
   carries the browser's fixed positioning, which pinned the terms under the header. */
.st4u-terms--inline .st4u-terms__window,
.st4u-terms__window--page {
  display: block;
  position: static;
  width: auto;
  max-height: 260px;
  margin: 0 0 var(--space-3);
  overflow-y: auto;
  box-shadow: none;
}

/* The box is locked until the terms window has been opened (st4u-booking.js), and
   the note under it says why. Locked, not disabled: it keeps its place in the Tab
   order, and a click on it opens the terms. The note sits under the label. */
.st4u-terms__note {
  margin: 6px 0 0 30px;
}

.st4u-terms__note[hidden] {
  display: none;
}

.st4u-terms.is-locked .st4u-terms__box {
  opacity: 0.55;
}

/* The ring is drawn through the box's own opacity, which left it at 2 to 1 on
   the one control every group booking has to reach. With focus the box is
   shown at full strength, 4.3 to 1; the label beside it stays muted, so the
   box still reads as locked. */
.st4u-terms.is-locked .st4u-terms__box:focus-visible {
  opacity: 1;
}

.st4u-terms.is-locked .st4u-terms__accept label {
  color: var(--text-muted);
}

/* A browser too old for popovers has no rule hiding the window and no way to
   open it, so it would print the whole of the terms in the middle of the form.
   Instead the window becomes the small scrolling panel on the page that Miriam's
   flow chart also allows, and the buttons that would open and close it go. */
@supports not selector(:popover-open) {
  .st4u-terms__window {
    display: block;
    width: auto;
    max-height: 260px;
    margin: 0 0 var(--space-3);
    overflow-y: auto;
    box-shadow: none;
  }

  .st4u-terms__read,
  .st4u-terms__close,
  .st4u-terms__foot {
    display: none;
  }
}