/* 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: .7rem 0;
}
.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;
  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; }
  .brand img { height: 48px; }
}