/* Single-file stylesheet for every organiser's site.
   Colours + fonts come from the organiser's CSS custom properties injected in
   base.html, so white-labelling is a data change, never a template edit.

   Default palette (the first organiser's brief):
     background          #F3EDF2  (soft lilac-white)
     maroon              #603649  (nav band, buttons, footer, headings)
     gold                #E9A924  (nav links, headings on maroon)
     blue                #102375  (body text, button hover)
     orange              #BF4813  (card kicker / top-text — brand #E85F24 darkened so 13px text passes WCAG AA)
     chip                #FBF9FB  (inactive filter buttons)

   Default fonts (loaded by the organiser's font_css_url):
     H1     Sorts Mill Goudy (normal)     -> --font-display
     H2     Ancizar Serif (extra-bold italic) -> --font-h2
     Quote  Sorts Mill Goudy (italic)     -> --font-quote
     Body   Figtree (medium)              -> --font-family                        */

:root {
  --colour-primary: #603649;   /* maroon */
  --colour-accent:  #E9A924;   /* gold   */
  --colour-bg:      #F3EDF2;   /* soft lilac-white background */
  --colour-text:    #102375;   /* blue body text */
  --colour-orange:  #BF4813;   /* card kicker / top-text (brand #E85F24 fails AA contrast at kicker size) */
  --colour-cream:   #FBF9FB;   /* chip / inactive filter buttons */
  --colour-maroon-rgb: 96, 54, 73;
  --font-family: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Sorts Mill Goudy', Georgia, 'Times New Roman', serif;
  --font-h2: 'Ancizar Serif', Georgia, 'Times New Roman', serif;
  --font-quote: 'Sorts Mill Goudy', Georgia, serif;

  --maxw: 64rem;
  --radius: 14px;
  --card-shadow: 0 1px 2px rgba(16, 20, 30, .06), 0 10px 28px rgba(16, 20, 30, .10);
  --line: #e4dde0;
  --surface: #ffffff;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* Staging copy only: an unmissable stripe so nobody mistakes it for live. */
.staging-banner { background: #b00; color: #fff; text-align: center; font-weight: 700; padding: .4rem 1rem; }

/* ---- Accessibility helpers --------------------------------------------- */
/* Visually hidden but read by screen readers. */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
/* "Skip to content": invisible until a keyboard user tabs onto it. */
.skip-link {
  position: absolute; left: 1rem; top: -4rem;
  background: var(--colour-accent); color: var(--colour-primary);
  padding: .6rem 1rem; border-radius: 0 0 10px 10px;
  font-weight: 700; text-decoration: none; z-index: 100;
  transition: top .1s ease;
}
.skip-link:focus { top: 0; }
main:focus { outline: none; }
/* One clear keyboard focus ring everywhere (mouse clicks don't show it). */
a:focus-visible, button:focus-visible, summary:focus-visible,
[tabindex]:focus-visible, input[type=checkbox]:focus-visible, input[type=radio]:focus-visible {
  outline: 3px solid var(--colour-text);
  outline-offset: 3px;
  border-radius: 4px;
}
.on-maroon a:focus-visible, .btn:focus-visible, .filter-btn:focus-visible {
  outline-color: var(--colour-accent);
}
.btn:focus-visible, .filter-btn:focus-visible, .skip-link:focus-visible { border-radius: 999px; }
/* Respect "reduce motion": no smooth scroll, hover lifts or fades. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .card:hover, .btn:hover { transform: none; }
}

body {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 500;               /* Figtree Medium */
  color: var(--colour-text);
  background: var(--colour-bg);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 1.25rem; }

a { color: var(--colour-primary); text-underline-offset: 3px; }
a:hover { color: var(--colour-text); }

/* ---- Header (maroon band, gold links, blurred fade at bottom) ----------- */
.site-header {
  background: var(--colour-primary);
  position: sticky;
  top: 0;
  z-index: 20;
}
.site-header::after {
  /* Soft blurred fade beneath the band, so content scrolls under a frosted edge. */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -18px;
  height: 18px;
  background: linear-gradient(
    to bottom,
    rgba(var(--colour-maroon-rgb), .55),
    rgba(var(--colour-maroon-rgb), 0)
  );
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  pointer-events: none;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: .7rem;   /* top/bottom only: keep .wrap's side gutter */
}
.brand { text-decoration: none; display: inline-flex; align-items: center; gap: .75rem; }
.brand img { height: 64px; display: block; width: auto; }
.brand-text { font-family: var(--font-display); font-size: 1.6rem; color: var(--colour-accent); line-height: 1.1; }
.brand-name {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: #fff;
  opacity: .85;
}
.site-nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .4rem 1.6rem; }
.brand { flex-shrink: 1; min-width: 0; }
.brand img { max-width: 100%; }
.site-nav a {
  padding: .35rem 0;             /* comfortable tap height */
  text-decoration: none;
  font-weight: 600;
  font-size: .98rem;
  color: var(--colour-accent);
}
.site-nav a:hover { color: #fff; }

/* ---- Footer (maroon band, gold headings/links) -------------------------- */
.site-footer {
  margin-top: 4rem;
  padding: 2.5rem 0;
  background: var(--colour-primary);
  color: #f3e9ec;
  font-size: .92rem;
}
.site-footer a { color: var(--colour-accent); }
.site-footer a:hover { color: #fff; }

/* ---- Headings ----------------------------------------------------------- */
.page-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 4vw, 2.8rem);
  color: var(--colour-primary);
  margin: 1.5rem 0 .5rem;
}
.section-title {
  font-family: var(--font-h2);
  font-weight: 800;               /* Ancizar Serif Extra-bold */
  font-style: italic;
  font-size: 1.8rem;
  color: var(--colour-primary);
  margin: 1.75rem 0 1rem;
  display: flex;
  align-items: center;
  gap: .8rem;
}

/* Pull-quotes / the hero tagline — Sorts Mill Goudy italic. */
.quote {
  font-family: var(--font-quote);
  font-style: italic;
  font-size: 1.4rem;
  line-height: 1.4;
  color: var(--colour-primary);
}
.section-title::after { content: ""; flex: 1; height: 1px; background: rgba(var(--colour-maroon-rgb), .35); }

/* Headings sitting on a maroon background turn gold. */
.on-maroon h1, .on-maroon h2, .on-maroon h3,
.on-maroon .page-title, .on-maroon .section-title { color: var(--colour-accent); }
.on-maroon .section-title::after { background: rgba(233, 169, 36, .4); }

/* ---- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-block;
  background: var(--colour-primary);
  color: #fff;
  text-decoration: none;
  padding: .8rem 1.5rem;
  border-radius: 999px;
  border: 0;
  font-size: 1rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background .12s ease, transform .08s ease;
}
.btn:hover { background: var(--colour-text); color: #fff; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-accent { background: var(--colour-accent); color: var(--colour-primary); }
.btn-accent:hover { background: var(--colour-text); color: #fff; }
.btn-ghost { background: transparent; color: var(--colour-primary); border: 1.5px solid var(--colour-primary); }
.btn-ghost:hover { background: var(--colour-primary); color: #fff; }
.btn[disabled], .btn.is-disabled { opacity: .5; pointer-events: none; }

/* ---- Filter buttons (All / Classes / Workshops) ------------------------- */
.filters { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.5rem 0 1rem; }
.filter-btn {
  background: var(--colour-cream);
  color: var(--colour-primary);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: .55rem 1.3rem;
  font-family: inherit;
  font-size: .98rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.filter-btn:hover { border-color: var(--colour-primary); }
.filter-btn.is-active { background: var(--colour-primary); color: #fff; }
/* Drop-in / Single Dates toggle: always navy, whether active or not. */
.filter-btn-navy,
.filter-btn-navy.is-active { background: var(--colour-text); color: #fff; }
.filter-btn-navy:hover { background: var(--colour-primary); }

/* ---- Event grid + cards ------------------------------------------------- */
.event-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 1.25rem;
  margin: 1rem 0;
}
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--card-shadow);
  transition: transform .1s ease, box-shadow .15s ease;
}
.card:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(16,20,30,.08), 0 16px 36px rgba(16,20,30,.16); }
/* Filter JS toggles the [hidden] attribute; this beats .card{display:flex}
   so hidden cards actually disappear. */
.event-grid .card[hidden] { display: none; }
/* Promo images (event cards + detail hero) show whole — never cropped.
   Organisers reuse banner-style images, so a single default keeps them consistent. */
.card-img {
  display: block;
  width: 100%;
  height: auto;              /* natural aspect ratio — image fits fully inside */
  object-fit: contain;
  background: var(--colour-cream);
}
.card-body { padding: 1.3rem 1.4rem; display: flex; flex-direction: column; flex: 1; }
.card .kicker {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--colour-orange);
  margin: 0 0 .35rem;
}
.card h2,
.card h3,
.panel-title,
h3 {
  margin: 0 0 .5rem;
  font-family: var(--font-h2);     /* Ancizar Serif Extra-bold Italic */
  font-weight: 800;
  font-style: italic;
  font-size: 1.4rem;
  line-height: 1.2;
  color: var(--colour-primary);
}
.card .meta { color: #5a5560; font-size: .92rem; margin: .12rem 0; }
.card .session-dates {
  list-style: none;
  margin: .35rem 0 .5rem;
  padding: 0;
  font-size: .9rem;
  color: #5a5560;
}
.card .session-dates li { padding: .1rem 0; }
.card .card-cta { margin-top: auto; padding-top: 1rem; }

.badge {
  display: inline-block;
  font-size: .75rem;
  font-weight: 700;
  padding: .25rem .7rem;
  border-radius: 999px;
  background: var(--colour-cream);
  color: var(--colour-primary);
}
.badge-soldout { background: #f7e4d8; color: #8f4517; }

/* ---- Panels ------------------------------------------------------------- */
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.4rem 1.5rem;
  margin: 1.25rem 0;
  box-shadow: var(--card-shadow);
}
/* Inset block inside a .panel — e.g. the instalment plan summary on My Bookings. */
.panel-inset {
  background: var(--colour-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.9rem 1.1rem;
  margin: 1rem 0;
}
.panel-inset p:first-child { margin-top: 0; }
.panel-inset p:last-child { margin-bottom: 0; }
.lede { font-size: 1.1rem; color: #f0eaec; }
main .lede { color: var(--colour-text); }

/* ---- Detail meta line --------------------------------------------------- */
.detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  color: #26224a;
  margin: .5rem 0 1.5rem;
  font-size: 1rem;
}
.detail-meta strong { color: var(--colour-text); font-weight: 700; }
/* Detail image sized to fit the image itself (not cropped, not upscaled). */
.detail-hero {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  /* A tall poster-shaped picture stays within one screen; wide ones are unaffected. */
  max-height: 70vh;
  object-fit: contain;
  border-radius: var(--radius);
  background: var(--colour-cream);
  margin: .5rem 0 1.25rem;
}

/* ---- Prices list -------------------------------------------------------- */
.prices { list-style: none; padding: 0; margin: .5rem 0; display: grid; gap: .5rem; }
.prices li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: .8rem 1.1rem;
}
.price-tag { font-weight: 700; color: var(--colour-primary); white-space: nowrap; }

/* ---- Forms -------------------------------------------------------------- */
.form-row { margin: 1.15rem 0; }
.form-row label, .form-row legend, .form-row .label-text { display: block; font-weight: 600; margin-bottom: .4rem; }
.form-row .label-text { margin-top: 0; }
/* A fieldset that groups radios/tick-boxes without the browser's box. */
.fieldset-plain { border: 0; padding: 0; margin: 0; min-width: 0; }
.fieldset-plain legend { padding: 0; }
input[type=text], input[type=email], input[type=number],
select, textarea {
  width: 100%;
  padding: .7rem .8rem;
  border: 1px solid #c9c2c5;
  border-radius: 10px;
  font-size: 1rem;
  font-family: inherit;
  background: #fff;
  color: var(--colour-text);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--colour-primary);
  box-shadow: 0 0 0 3px rgba(var(--colour-maroon-rgb), .18);
}
.price-options { display: grid; gap: .55rem; }
.price-options label {
  display: flex;
  align-items: center;
  gap: .7rem;
  font-weight: 500;
  background: #fff;
  border: 1px solid #c9c2c5;
  border-radius: 10px;
  padding: .8rem 1rem;
  margin: 0;
  cursor: pointer;
}
.price-options label:hover { border-color: var(--colour-primary); }
.checkbox-row { display: flex; gap: .6rem; align-items: flex-start; }
.checkbox-row input { margin-top: .35rem; width: auto; }
.checkbox-row label { font-weight: 500; margin: 0; }
.errorlist { color: #b0246a; margin: .3rem 0; padding-left: 1.1rem; font-size: .9rem; }
.help { color: #5a5560; font-size: .88rem; }

/* Required / Optional flag next to each booking question. */
.req-flag {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: .15rem .5rem;
  border-radius: 999px;
  margin-left: .4rem;
  vertical-align: middle;
}
.req-flag-required { background: var(--colour-primary); color: #fff; }
.req-flag-optional { background: var(--colour-cream); color: #5a5560; border: 1px solid #c9c2c5; }

/* Solidarity donation amount: whole pounds, up to 4 digits — a narrow box
   rather than the full-width input every other field gets. */
input[type=number].amount-narrow { width: 6rem; max-width: 30%; }

/* ---- Booking questions -------------------------------------------------- */
/* Small grey help text is hard to read for many people, so inside the
   questionnaire the notes, info boxes and links all sit at normal body size
   and colour. The link colours are stated rather than inherited so the rule
   still holds inside an info panel, which sits on a different background. */
/* `inherit`, not 1rem: nothing sets a size on <html>, so 1rem would be the
   browser's 16px while the body runs at 17px — close enough to look like a
   mistake rather than a match. */
.intake-questions .help,
.intake-questions .panel {
  color: var(--colour-text);
  font-size: inherit;
}
.intake-questions .panel p:first-child { margin-top: 0; }
.intake-questions .panel p:last-child { margin-bottom: 0; }
.intake-questions a {
  color: var(--colour-primary);
  font-family: inherit;
  font-size: inherit;
}
.intake-questions a:hover,
.intake-questions a:focus { color: var(--colour-text); }

/* ---- Flash messages ----------------------------------------------------- */
.flash { padding: .8rem 1.1rem; border-radius: 10px; margin: 1rem 0; border: 1px solid; background:#fff; }
.flash-success { border-color: #bfe0c9; }
.flash-error { border-color: #f0bdc8; }
.flash-info { border-color: #cdd6f0; }

.muted { color: #4b4763; }

/* Section icon (optional dancer motif between sections). */
.section-icon { display: block; height: 56px; margin: 2rem auto 1rem; opacity: .9; }

@media (max-width: 640px) {
  body { font-size: 16px; }
  .site-nav { gap: .3rem 1rem; }
  /* Four or more menu links: put them on their own line under the name. */
  .header-inner { flex-wrap: wrap; }
  .site-nav { justify-content: flex-start; }
  .brand img { height: 48px; }
}

/* ---- Front page (site_mode = full_site) --------------------------------- */
.front-hero { padding: 1.5rem 0 1rem; max-width: 46rem; }
.front-links { display: flex; flex-wrap: wrap; gap: .5rem; }

/* ---- Schedule strip: the next seven days (events/home.html) ----------- */
.schedule-strip { margin: 1.25rem 0 .5rem; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.strip-days { list-style: none; margin: 0; padding: 0 0 .4rem; display: grid; grid-template-columns: repeat(7, minmax(8.5rem, 1fr)); gap: .5rem; }
.strip-day { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: .6rem .7rem; min-width: 0; }
.strip-day.is-today { border-color: var(--colour-primary); box-shadow: inset 0 3px 0 var(--colour-primary); }
.strip-day.is-empty { background: transparent; }
.strip-date { margin: 0 0 .35rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--colour-orange); font-weight: 700; }
.strip-dom { color: #5a5560; font-weight: 600; }
.strip-day ul { list-style: none; margin: 0; padding: 0; }
.strip-day li + li { margin-top: .35rem; }
.strip-day a { display: block; font-size: .88rem; line-height: 1.3; color: var(--colour-text); text-decoration: none; }
.strip-day a:hover, .strip-day a:focus-visible { text-decoration: underline; }
.strip-time { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--colour-primary); }
.strip-none { margin: 0; font-size: .85rem; color: #8a838c; }

/* "This week" as one card: only the days with something on (Tenant.week_strip = busy). */
.week-card { margin: 1.25rem 0 .5rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.2rem; box-shadow: var(--card-shadow); }
.week-card-title { margin: 0 0 .6rem; font-size: 1rem; text-transform: uppercase; letter-spacing: .06em; color: var(--colour-orange); }
.week-days { margin: 0; display: grid; gap: .55rem; }
.week-day { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: .25rem 1rem; align-items: baseline; padding-top: .55rem; border-top: 1px solid var(--line); }
.week-day:first-child { border-top: 0; padding-top: 0; }
.week-day dt { font-size: .85rem; font-weight: 700; }
.week-day dt .strip-dow { color: var(--colour-text); }
.week-day.is-today dt .strip-dow { color: var(--colour-primary); }
.week-day dd { margin: 0; }
.week-day ul { list-style: none; margin: 0; padding: 0; }
.week-day li + li { margin-top: .3rem; }
.week-day a { color: var(--colour-text); text-decoration: none; }
.week-day a:hover, .week-day a:focus-visible { text-decoration: underline; }
@media (max-width: 34rem) { .week-day { grid-template-columns: 1fr; } }

/* ---- Weekly classes: one row per class, dates as chips ---------------- */
.timetable { display: grid; gap: .75rem; }
.timetable-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: .5rem 1.25rem; align-items: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.2rem; box-shadow: var(--card-shadow); }
.timetable-what h3 { margin: 0; font-family: var(--font-h2); font-weight: 800; font-style: italic; font-size: 1.25rem; }
.timetable-what h3 a { color: var(--colour-primary); text-decoration: none; }
.timetable-what h3 a:hover { text-decoration: underline; }
.timetable-what .meta { color: #5a5560; font-size: .92rem; margin: .2rem 0 .3rem; }
.badge-pass { background: #ece7f6; color: #4b3a7a; }
.date-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.date-chip { display: inline-block; padding: .45rem .85rem; border-radius: 999px; border: 1.5px solid var(--colour-primary);
  color: var(--colour-primary); background: var(--colour-cream); text-decoration: none; font-weight: 600; font-size: .9rem; white-space: nowrap; }
.date-chip:hover, .date-chip:focus-visible { background: var(--colour-primary); color: #fff; }
.date-chip.is-full { border-style: dashed; border-color: #b9a7a0; color: #8f4517; background: #fbf3ee; }
.date-chip .chip-note { font-weight: 500; font-size: .78rem; }
.date-chip-more { border-color: var(--line); background: transparent; }

/* ---- Event page: "How would you like to book?" ------------------------ */
.book-chooser { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .9rem; margin-top: .75rem; }
.chooser-option { border: 1px solid var(--line); border-radius: 12px; padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.chooser-option h3 { margin: 0; font-size: 1.05rem; color: var(--colour-primary); }
.chooser-option p { margin: 0; }
.chooser-option .btn { align-self: flex-start; margin-top: auto; }
.chooser-pass { background: #f7f4fb; border-color: #d8cfe8; }
.pass-offers { list-style: none; margin: 0; padding: 0; font-size: .92rem; }
.pass-offers li + li { margin-top: .25rem; }
.inline-field { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: auto; }
.inline-field input { flex: 1; min-width: 9rem; }
.waitlist-form { max-width: 26rem; }

/* ---- My bookings ------------------------------------------------------- */
.account-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem 1rem; }
.account-bar p { margin: 0; }
.account-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.account-actions form { margin: 0; }
.account-passes { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0 1rem; }
.pass-card.is-usable { border-color: #d8cfe8; background: #f7f4fb; }
.past-bookings summary { cursor: pointer; }

@media (max-width: 640px) {
  .timetable-row { grid-template-columns: 1fr; }
}

/* ---- Booking form in steps (bookings/book.html) ------------------------ */
.step-nav { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.25rem; padding: 0; counter-reset: none; }
.step-nav button { border: 1.5px solid var(--line); background: var(--colour-cream); color: #5a5560; border-radius: 999px;
  padding: .4rem .9rem .4rem .45rem; font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: .45rem; }
.step-num { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--line); color: var(--colour-primary); font-size: .8rem; }
.step-nav .is-current button { border-color: var(--colour-primary); color: var(--colour-primary); background: var(--surface); }
.step-nav .is-current .step-num, .step-nav .is-done .step-num { background: var(--colour-primary); color: #fff; }
.step-buttons { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: space-between; margin-top: 1.25rem; }
.step-buttons .btn-accent:only-child { margin-left: auto; }
.step-total { margin: 1rem 0 0; padding-top: .8rem; border-top: 1px solid var(--line); font-weight: 700; color: var(--colour-primary); }
.book-review { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1rem; margin: 0 0 1rem; padding: .9rem 1.1rem;
  background: var(--colour-bg); border-radius: 10px; }
.book-review dt { font-weight: 700; color: var(--colour-primary); }
.book-review dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* Refund bands on the Policies page */
.bands { border-collapse: collapse; margin: .25rem 0 .75rem; }
.bands th, .bands td { text-align: left; padding: .35rem 1.25rem .35rem 0; border-bottom: 1px solid var(--line); }

/* ---- How to book (guest help page) -------------------------------------- */
.how-to { max-width: 46rem; }
.how-to-toc { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 1.5rem; }
.how-to-toc a { border: 1px solid rgba(var(--colour-maroon-rgb), .35); border-radius: 999px; padding: .35rem .8rem; text-decoration: none; background: var(--colour-cream); font-size: .95rem; }
.how-to-section { scroll-margin-top: 1rem; }
.how-to-steps li, .how-to ul li { margin: .55rem 0; }
.how-to-tip { margin-top: 1rem; }
.how-to-faq dt { font-weight: 700; margin-top: 1rem; }
.how-to-faq dd { margin: .25rem 0 0; }

/* --- 1-to-1 bookings (apps/scheduling) ------------------------------------ */
.s-types li { flex-wrap: wrap; }
.s-types .price-tag { display: flex; align-items: center; gap: .8rem; }
.s-cal { max-width: 32rem; }
.s-cal-head { display: flex; align-items: center; justify-content: space-between; margin: .5rem 0; }
.s-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: .25rem; }
.s-cal-dow { text-align: center; font-size: .8rem; color: var(--colour-text); opacity: .7; padding: .2rem 0; }
.s-day { border: 1px solid transparent; background: transparent; color: var(--colour-text); padding: .55rem 0; border-radius: .5rem; font: inherit; cursor: default; opacity: .4; }
.s-day-out { visibility: hidden; }
.s-day-free { opacity: 1; cursor: pointer; background: color-mix(in srgb, var(--colour-accent) 25%, transparent); border-color: var(--colour-accent); font-weight: 600; }
.s-day-free:hover, .s-day-free:focus-visible { background: var(--colour-accent); color: var(--colour-primary); }
.s-day.is-picked { background: var(--colour-primary); color: #fff; border-color: var(--colour-primary); }
.s-time-list { display: flex; flex-wrap: wrap; gap: .5rem; }
.s-time.is-picked { background: var(--colour-primary); color: #fff; }
.s-chosen { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.s-book .form-row input, .s-book .form-row textarea { width: 100%; max-width: 28rem; }

/* ---- Demo organisers (Tenant.is_demo) ---------------------------------- */
.demo-banner { background: #f6c343; color: #221a00; text-align: center; font-weight: 700; padding: .45rem 1rem; font-size: .95rem; }
.demo-banner a { color: inherit; text-decoration: underline; }
.demo-note { background: #fff6d6; border: 1px solid #e9c25a; border-left: 6px solid #f6c343; border-radius: 8px; padding: .7rem .9rem; margin: 0 0 1rem; color: #332a00; font-size: .95rem; }
.demo-note-tag { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: #f6c343; color: #221a00; border-radius: 4px; padding: .05rem .4rem; margin-right: .4rem; vertical-align: middle; }
.demo-checkout .demo-card { background: #f7f7f9; border: 1px solid #ddd; border-radius: 10px; padding: .8rem; margin: .8rem 0; }
.demo-checkout .demo-card label { display: block; font-size: .85rem; color: #555; margin-bottom: .5rem; }
.demo-checkout .demo-card input { display: block; width: 100%; font: inherit; padding: .5rem .6rem; border: 1px solid #ccc; border-radius: 6px; background: #fff; color: #333; margin-top: .2rem; }
.demo-checkout .demo-card-row { display: flex; gap: .8rem; }
.demo-checkout .demo-card-row label { flex: 1; }
.demo-checkout .demo-total { font-size: 1.1rem; }

/* ---- Demo floating cards + guide (demo organisers only) ----------------- */
.demo-pin-wrap { position: relative; display: inline-block; vertical-align: middle; margin: 0 .35rem; }
.demo-pin { width: 1.7rem; height: 1.7rem; border-radius: 50%; border: 2px solid #221a00; background: #f6c343; color: #221a00; font: 700 .85rem/1 var(--font-family); cursor: pointer; display: inline-grid; place-items: center; box-shadow: 0 2px 6px rgba(0,0,0,.25); padding: 0; animation: demo-pulse 2.4s ease-in-out infinite; }
.demo-pin:hover, .demo-pin:focus-visible { animation: none; transform: scale(1.1); outline: 3px solid rgba(246,195,67,.5); }
.demo-pin-wrap.open .demo-pin { animation: none; background: #221a00; color: #f6c343; }
@keyframes demo-pulse { 0%, 100% { box-shadow: 0 2px 6px rgba(0,0,0,.25), 0 0 0 0 rgba(246,195,67,.7); } 60% { box-shadow: 0 2px 6px rgba(0,0,0,.25), 0 0 0 9px rgba(246,195,67,0); } }
.demo-card { position: absolute; z-index: 60; top: calc(100% + .5rem); left: 0; width: min(22rem, calc(100vw - 2.5rem)); background: #fff8dd; color: #26200a; border: 1px solid #e9c25a; border-top: 6px solid #f6c343; border-radius: 10px; padding: .9rem 1rem 1rem; box-shadow: 0 12px 32px rgba(0,0,0,.22); text-align: left; font-size: .92rem; line-height: 1.45; font-family: var(--font-family); font-weight: 400; white-space: normal; }
.demo-pin-wrap.open .demo-card { display: block; }
.demo-card.demo-card-left { left: auto; right: 0; }
.demo-card p { margin: 0 0 .5rem; }
.demo-card-tag { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #7a5a00; }
.demo-card-title { font: 700 1.05rem/1.25 var(--font-family); margin: 0 0 .5rem; color: #26200a; }
.demo-card-title:focus { outline: none; }
.demo-card-not { margin-bottom: .2rem; }
.demo-card-list { margin: 0 0 .6rem; padding-left: 1.1rem; }
.demo-card-list li { margin: .15rem 0; }
.demo-card-foot { display: flex; justify-content: space-between; align-items: center; gap: .6rem; margin: .4rem 0 0; }
.demo-card-foot a { font-weight: 700; color: #7a5a00; }
.demo-card-close { font: 600 .85rem var(--font-family); background: #221a00; color: #f6c343; border: 0; border-radius: 999px; padding: .3rem .8rem; cursor: pointer; }
h1 .demo-pin-wrap, h2 .demo-pin-wrap, .page-title .demo-pin-wrap, .section-title .demo-pin-wrap { font-size: 1rem; }
body.demo-pins-hidden .demo-pin-wrap { display: none; }
@media (max-width: 640px) {
  .demo-card { position: fixed; left: 1rem; right: 1rem; top: auto; bottom: 4.5rem; width: auto; max-height: 70vh; overflow: auto; }
}
.demo-guide { position: fixed; right: 1rem; bottom: 1rem; z-index: 70; font-family: var(--font-family); }
.demo-guide-btn { background: #221a00; color: #f6c343; border: 2px solid #f6c343; border-radius: 999px; padding: .6rem 1.1rem; font: 700 .95rem var(--font-family); cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,.3); }
.demo-guide-btn::before { content: "☰ "; }
.demo-guide-panel { position: absolute; right: 0; bottom: calc(100% + .6rem); width: min(22rem, calc(100vw - 2rem)); background: #fff8dd; color: #26200a; border: 1px solid #e9c25a; border-top: 6px solid #f6c343; border-radius: 10px; padding: .9rem 1rem; box-shadow: 0 12px 32px rgba(0,0,0,.25); font-size: .92rem; line-height: 1.4; max-height: 75vh; overflow: auto; }
.demo-guide-intro { margin: 0 0 .5rem; }
.demo-guide-stops { margin: 0 0 .6rem; padding-left: 1.3rem; }
.demo-guide-stops li { margin: .2rem 0; }
.demo-guide-stops li.seen a { color: #6b6b6b; }
.demo-guide-stops li.seen::marker { content: "✓ "; color: #2e7d32; }
.demo-guide-stops li.here a { font-weight: 700; }
.demo-guide-stops a { color: #26200a; }
.demo-guide-links { margin: .4rem 0; font-weight: 600; }
.demo-guide-links a { color: #7a5a00; }
.demo-guide-foot { margin: .4rem 0 0; font-size: .85rem; }
@media print { .demo-pin-wrap, .demo-guide, .demo-banner { display: none !important; } }
.detail-hero-wrap { margin: 0 0 1rem; }
.detail-hero-wrap .demo-pin-wrap { display: block; margin: 0 0 .4rem; }
.demo-inline { margin: 1rem 0 .2rem; font-size: .9rem; }

/* ---- Event picture gallery (EventImage) --------------------------------- */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: .8rem; margin: 0 0 1.5rem; }
.gallery-item { margin: 0; }
.gallery-item a { display: block; border-radius: var(--radius); overflow: hidden; background: #f3f1ee; }
.gallery-item img { display: block; width: 100%; height: 11rem; object-fit: cover; transition: transform .2s ease; }
.gallery-item a:hover img { transform: scale(1.03); }
.gallery-item figcaption { font-size: .85rem; color: #5a5560; margin: .3rem .1rem 0; }