/* ===== DTES — Amelia event landing page (wpa-events single) =====
 * Amelia renders this page itself; the body is a live Vue app, so we style rather than
 * replace it. Palette comes from Amelia's own customize settings (--am-c-* on .amelia-wpa),
 * set to the DTES brand; this sheet handles the typography, rhythm and shapes those
 * variables can't reach. Loaded only on single wpa-events, after Amelia's own stylesheet.
 *
 * Accessibility is a requirement here, not a preference: body copy >= 18px,
 * touch targets >= 44px, no pure white or pure black.
 */

/* Brand tokens, plus overrides for Amelia's own --am-c-* palette.
 *
 * These are set HERE and not in Amelia's "customize" settings on purpose. Writing a partial
 * customizedData object to the database makes Amelia's form components prefer it over their
 * built-in defaults (`n.formKey in E.customizedData ? E.customizedData[...] : defaults`), and a
 * partial object has no per-key `translations` — which throws and leaves the booking dialog
 * empty. Overriding the emitted variables from CSS gets the same palette with no such risk.
 * Amelia's --wpa-* tokens alias onto --am-c-*, so they follow automatically.
 *
 * Two classes here beats Amelia's single-class inline rule on specificity. */
.amelia-wpa.wpa-events__shell,
.am-dialog-popup.amelia-v2-booking,
.am-dialog-popup .el-dialog{   /* the dialog re-declares the palette on .el-dialog itself */
  --dtes-ink:#26355F; --dtes-ink-deep:#1C2747; --dtes-ink-soft:#41527D;
  --dtes-cream:#F7F4EC; --dtes-cream-deep:#EFE8D9; --dtes-card:#FBF9F4;
  --dtes-sage:#8CA57C; --dtes-sage-light:#DCE4D0; --dtes-sage-deep:#5C7154;
  --dtes-pink:#D65C93; --dtes-pink-deep:#A8386E; --dtes-gold:#E4A93C;

  --am-c-primary:#A8386E;
  --am-c-success:#5C7154;
  --am-c-warning:#E4A93C;
  --am-c-main-bgr:#FBF9F4;
  --am-c-main-heading-text:#26355F;
  --am-c-main-text:#41527D;
  --am-c-card-bgr:#FFFFFF;
  --am-c-card-border:#EFE8D9;
  --am-c-card-text:#26355F;
  --am-c-btn-prim:#A8386E;
  --am-c-btn-prim-text:#FFFFFF;
  --am-c-btn-sec:#26355F;
  --am-c-btn-sec-text:#FFFFFF;
  --am-c-inp-border:#D8D0BF;
  --am-c-inp-text:#26355F;
  --am-c-inp-placeholder:#8A93A8;
  --am-font-family:"Nunito Sans",sans-serif;
}

.amelia-wpa.wpa-events__shell{
  background:var(--dtes-cream);
  font-family:"Nunito Sans",sans-serif;
  padding:2.5rem 1.25rem 3.5rem;
}

/* The booking modal is a separate surface: Amelia writes its palette as INLINE custom
 * properties on .el-dialog / .am-ecf and on each button (which reads --am-c-btn-first,
 * not --am-c-btn-prim). Inline declarations outrank any stylesheet rule, so these need
 * !important — the one place on this page where it is unavoidable rather than lazy. */
.am-dialog-popup .el-dialog,
.am-dialog-popup .am-ecf{
  --am-c-primary:#A8386E !important;
  --am-c-btn-prim:#A8386E !important;
  --am-c-success:#5C7154 !important;
  --am-c-main-heading-text:#26355F !important;
  --am-c-main-text:#41527D !important;
  --am-font-family:"Nunito Sans",sans-serif !important;
}
.am-dialog-popup .am-button--primary{
  --am-c-btn-first:#A8386E !important;
  --am-c-btn-first-op80:rgba(168,56,110,.8) !important;
  --am-c-btn-first-op30:rgba(168,56,110,.3) !important;
  --am-c-btn-first-op20:rgba(168,56,110,.12) !important;
  border-radius:999px !important;
  min-height:46px;
  font-family:"Nunito Sans",sans-serif !important;
  font-weight:800 !important;
}

.wpa-events__inner{ max-width:1080px; margin-inline:auto; }

/* The event body sits on a warm card, matching the rounded language of the site. */
.wpa-events__col--event{
  background:#fff;
  border:1px solid var(--dtes-cream-deep);
  border-radius:28px;
  padding:2.25rem 2.25rem 2rem;
  box-shadow:0 18px 44px rgba(38,53,95,.07);
}

/* ---- header row: date tile | title | price ---- */
.wpa-events__meta-row{ gap:1.5rem; align-items:flex-start; }

.wpa-events__begin{
  background:var(--dtes-sage-light);
  border-radius:20px;
  padding:.85rem 1.1rem;
  text-align:center;
  min-width:104px;
}
.wpa-events__begin-label{
  font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.14em;
  color:var(--dtes-sage-deep);
}
/* Deliberately smaller than the event title so the name leads, not the date. */
.wpa-events__begin-day{
  font-family:"Fraunces",Georgia,serif;
  font-size:1.85rem; line-height:1; color:var(--dtes-ink); margin-top:.15rem;
}
.wpa-events__begin-mon{ font-size:.95rem; font-weight:700; color:var(--dtes-ink-soft); }
.wpa-events__begin-time{
  display:inline-block; margin-top:.4rem; font-weight:800; color:var(--dtes-sage-deep); font-size:.95rem;
}

.wpa-events__event-title{
  font-family:"Fraunces",Georgia,serif !important;
  font-size:2.35rem !important; line-height:1.12; letter-spacing:-.012em;
  color:var(--dtes-ink) !important; margin:0 0 .7rem !important;
}
.wpa-events__event-status-row{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }

.wpa-events__pill{
  border-radius:999px; padding:.3rem .85rem; font-weight:800; font-size:.82rem;
  text-transform:uppercase; letter-spacing:.08em;
}
.wpa-events__pill--open{ background:var(--dtes-sage-deep); color:#fff; }
.wpa-events__slots{ color:var(--dtes-ink-soft); font-size:1rem; }
.wpa-events__slots strong{ color:var(--dtes-ink); }

/* Date tile + title fill the row, so the price takes its own line by design rather than
   wrapping awkwardly into the gap. Left-aligned with the card edge. */
.wpa-events__price-block{ flex-basis:100%; text-align:left; margin-top:.35rem; }
.wpa-events__price-value{
  font-family:"Fraunces",Georgia,serif; font-size:1.9rem; line-height:1;
  color:var(--dtes-pink-deep); font-weight:600;
}
.wpa-events__vat-pill{
  display:inline-block; margin-top:.4rem; background:var(--dtes-cream-deep);
  color:var(--dtes-ink-soft); border-radius:999px; padding:.2rem .7rem;
  font-size:.78rem; font-weight:700;
}
/* A free class (Men's Circle, Market Day) renders no price value, but Amelia still emits
   the tax pill — leaving a stranded "Incl. GST" with nothing to qualify. When the pill is
   all that's left in the block, drop it. :only-child rather than :has() so this holds on
   older browsers too. */
.wpa-events__price-block > .wpa-events__vat-pill:only-child{ display:none; }

/* ---- section blocks ---- */
.wpa-events__block{ margin-top:1.9rem; }
.wpa-events__block-label{
  font-family:"Nunito Sans",sans-serif !important;
  font-size:.8rem !important; font-weight:800 !important;
  text-transform:uppercase; letter-spacing:.14em;
  color:var(--dtes-sage-deep) !important;
  margin:0 0 .55rem !important;
}
.wpa-events__timetable-line{
  font-size:1.1rem; font-weight:700; color:var(--dtes-ink);
}
/* Body copy: 18px floor, generous leading — this space runs an over-50s programme. */
.wpa-events__desc-wrap,
.wpa-events__desc-wrap p{
  font-size:1.125rem; line-height:1.75; color:var(--dtes-ink-soft);
}
.wpa-events__desc-wrap p:last-child{ margin-bottom:0; }

.wpa-events__divider{
  border:0; border-top:1px solid var(--dtes-cream-deep);
  height:1px; background:none; margin:1.9rem 0 1.4rem;
}

/* ---- room ("host") ---- */
.wpa-events__host{
  display:flex; align-items:center; gap:.85rem;
  background:var(--dtes-card); border:1px solid var(--dtes-cream-deep);
  border-radius:18px; padding:.75rem 1rem;
}
.wpa-events__host-avatar{
  width:44px; height:44px; border-radius:50%; overflow:hidden; flex:0 0 44px;
  background:var(--dtes-sage-light);
}
.wpa-events__host-avatar img{ width:100%; height:100%; object-fit:cover; }
.wpa-events__host-name{
  display:block; font-family:"Fraunces",Georgia,serif; font-size:1.1rem; color:var(--dtes-ink);
}
.wpa-events__host-role{
  display:block; font-size:.78rem; font-weight:800; text-transform:uppercase;
  letter-spacing:.12em; color:var(--dtes-sage-deep);
}

/* ---- ticket / people column ---- */
.wpa-events__col--tickets .wpa-events__tickets-am-shell{
  background:var(--dtes-card);
  border:1px solid var(--dtes-cream-deep);
  border-radius:24px;
  padding:1.5rem;
}
.wpa-events__tickets-title{
  font-family:"Fraunces",Georgia,serif !important;
  font-size:1.25rem !important; color:var(--dtes-ink) !important; margin:0 0 .3rem !important;
}
.wpa-events__tickets-sub{ font-size:1rem; color:var(--dtes-ink-soft); margin:0 0 1rem; }

/* ---- book button: brand pill, comfortable target ---- */
.wpa-events__book-button-btn.am-button{
  border-radius:999px !important;
  min-height:52px; padding:.7em 2.2em !important;
  font-family:"Nunito Sans",sans-serif !important;
  font-weight:800 !important; font-size:1.02rem !important; letter-spacing:.01em;
  background:var(--dtes-pink-deep) !important; border-color:var(--dtes-pink-deep) !important;
  color:#fff !important;
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.wpa-events__book-button-btn.am-button:hover{
  background:var(--dtes-pink) !important; border-color:var(--dtes-pink) !important;
  transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(168,56,110,.26);
}
.wpa-events__book-button-btn.am-button:focus-visible{
  outline:3px solid var(--dtes-gold); outline-offset:2px;
}

/* ---- mobile: stack, keep everything thumb-friendly ---- */
@media (max-width:860px){
  .amelia-wpa.wpa-events__shell{ padding:1.5rem .9rem 2.5rem; }
  .wpa-events__col--event{ padding:1.5rem 1.25rem 1.4rem; border-radius:22px; }
  .wpa-events__meta-row{ gap:1rem; }
  .wpa-events__event-title{ font-size:1.75rem !important; }

  .wpa-events__begin{ min-width:88px; padding:.7rem .9rem; }
  .wpa-events__begin-day{ font-size:2rem; }
  .wpa-events__book-button-btn.am-button{ width:100%; }
}