/**
 * hgmc-skin.css — Halifax Gay Men's Chorus design layer.
 * Goes in the theme's /skins/ directory; set as "Client skin file" in
 * Appearance → Theme Settings. Loaded after the brand tokens, so it relies
 * on var(--brand-*) being defined (dark mode for HGMC).
 *
 * Consumes only the theme's stable class hooks. Touches no markup.
 *
 * SECTIONS
 *   1. Fonts
 *   2. Hero            <-- built
 *   3. Events (embed)  TODO
 *   4. Feature/About   TODO
 *   5. CTA (cream card) TODO
 *   6. Newsletter      TODO
 */

/* 1. Fonts ------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Chivo:wght@700;800;900&family=Manrope:wght@400;500;600&display=swap');

/* 2. Hero -------------------------------------------------------------- */
/* Robust against: the theme's global img{max-width:100%;height:auto},
   scrollbars (no 100vw math), and the dispatcher's wrapper chain
   .boom12-block > .boom12-block__inner > .boom12-hero. */

.boom12-block--hero{
  --b12-container: 1280px;
  --b12-gutter: clamp(1.25rem, 4vw, 3.5rem);
  background: var(--brand-bg);
}
.boom12-block--hero .boom12-block__inner{
  /* Centered max-width band; the grid lives inside it. The image bleeds
     right by spanning a grid track that extends past the band edge. */
  width: 100%;
}

.boom12-block--hero .boom12-hero{
  display: grid;
  /* Left spacer pins content to the centered band's left edge (no 100vw:
     uses the grid's own 100% width via the fr/minmax interplay). Content
     column is capped; image track bleeds to the right screen edge. */
  grid-template-columns:
    minmax(var(--b12-gutter), 1fr)
    minmax(0, calc(var(--b12-container) * 0.40))
    minmax(0, calc(var(--b12-container) * 0.55))
    1fr;
  align-items: stretch;
  gap: 0;
  min-height: min(82vh, 760px);
}

/* Content in track 2 (after the left spacer), vertically centered. */
.boom12-hero__content{
  grid-column: 2;
  align-self: center;
  padding: clamp(3rem, 7vw, 6rem) clamp(2rem, 4vw, 4rem) clamp(3rem, 7vw, 6rem) 0;
  box-sizing: border-box;
}

/* Image spans track 3 AND the trailing 1fr, so it runs to the screen edge. */
.boom12-hero__media{
  grid-column: 3 / 5;
  position: relative;
  overflow: hidden;
  min-height: min(82vh, 760px);
}
.boom12-hero__image{
  width: 100%;
  height: 100%;
  /* Beat the global img{height:auto} with higher specificity (this selector
     is already more specific than bare img, but we set it explicitly). */
  min-height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}
/* Soft left-edge fade so the photo melts into the page. */
.boom12-hero__media::before{
  content:"";
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg,
            var(--brand-bg) 0%,
            color-mix(in srgb, var(--brand-bg) 35%, transparent) 18%,
            transparent 42%);
}

.boom12-hero__eyebrow{
  font-family:'Manrope',sans-serif; font-weight:600; font-size:.95rem;
  letter-spacing:.01em; color:var(--brand-secondary); margin:0 0 1.25rem;
}
.boom12-hero__title,
.boom12-block--hero .boom12-block__title{
  font-family:'Chivo',sans-serif; font-weight:900;
  font-size:clamp(2.75rem, 6vw, 4.75rem); line-height:1.02;
  letter-spacing:-0.02em; margin:0 0 1.5rem; color:var(--brand-text);
}
.boom12-hero__subtitle{
  font-family:'Chivo',sans-serif; font-weight:700;
  font-size:clamp(1.1rem,2vw,1.4rem); color:var(--brand-text); margin:0 0 1rem;
}
.boom12-hero__body{
  font-size:1.0625rem; line-height:1.65;
  color:color-mix(in srgb, var(--brand-text) 78%, var(--brand-bg));
  margin:0 0 2.25rem; max-width:30rem;
}
.boom12-hero__actions{ display:flex; flex-wrap:wrap; gap:1rem; }
.boom12-hero__actions .boom12-button{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:'Manrope',sans-serif; font-weight:600; font-size:1rem;
  padding:.95rem 1.9rem; border-radius:999px; text-decoration:none;
  transition:transform .18s ease, background .18s ease, border-color .18s ease;
}
.boom12-hero__actions .boom12-button:first-child{ background:var(--brand-primary); color:#fff; }
.boom12-hero__actions .boom12-button:first-child:hover{
  transform:translateY(-2px); background:color-mix(in srgb, var(--brand-primary) 88%, #fff);
}
.boom12-hero__actions .boom12-button:first-child::after{ content:"\2192"; font-size:1.05em; }
.boom12-hero__actions .boom12-button:not(:first-child){
  background:transparent; color:var(--brand-text);
  border:1.5px solid color-mix(in srgb, var(--brand-text) 35%, transparent);
}
.boom12-hero__actions .boom12-button:not(:first-child):hover{
  border-color:var(--brand-text); transform:translateY(-2px);
}

@media (max-width: 860px){
  .boom12-block--hero .boom12-hero{
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 0;
  }
  .boom12-hero__content{
    grid-column: 1; order: 2; align-self: auto;
    padding: 3rem clamp(1.25rem,5vw,2rem) 2rem;
  }
  .boom12-hero__media{ grid-column: 1; order: 1; min-height: 52vh; }
  .boom12-hero__media::before{
    background:linear-gradient(0deg, var(--brand-bg) 0%, transparent 40%);
  }
}
@media (prefers-reduced-motion: reduce){
  .boom12-hero__actions .boom12-button{ transition:none; }
}

/* ============================================================
   SHARED — block rhythm + container
   The new block wrappers ship with NO base CSS, so the skin owns
   section padding and the centered container for every block
   EXCEPT the hero (which bleeds full-width and resets this).
   ============================================================ */
.boom12-block{ --b12-container:1280px; --b12-gutter:clamp(1.25rem,4vw,3.5rem); }
.boom12-block:not(.boom12-block--hero){
  padding-block: clamp(3.5rem, 8vw, 7rem);
}
.boom12-block:not(.boom12-block--hero) .boom12-block__inner{
  width:100%; max-width:var(--b12-container); margin-inline:auto;
  padding-inline:var(--b12-gutter); box-sizing:border-box;
}

/* Shared button system (all blocks use .boom12-button) ------------------- */
.boom12-button{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:'Manrope',sans-serif; font-weight:600; font-size:1rem;
  padding:.95rem 1.9rem; border-radius:999px; text-decoration:none;
  background:var(--brand-primary); color:#fff;
  transition:transform .18s ease, background .18s ease, border-color .18s ease;
}
.boom12-button:hover{ transform:translateY(-2px);
  background:color-mix(in srgb, var(--brand-primary) 88%, #fff); color:#fff; }

/* Shared eyebrow + title type ------------------------------------------- */
.boom12-embed-section__eyebrow,
.boom12-feature__eyebrow{
  font-family:'Manrope',sans-serif; font-weight:600; font-size:.95rem;
  letter-spacing:.04em; color:var(--brand-secondary); margin:0 0 .75rem;
  text-transform:none;
}
.boom12-embed-section__title,
.boom12-feature__title,
.boom12-cta__title,
.boom12-newsletter__title{
  font-family:'Chivo',sans-serif; font-weight:900; letter-spacing:-0.02em;
  line-height:1.05; color:var(--brand-text); margin:0 0 1rem;
}

/* ============================================================
   3. EVENTS  (embed-section)  — centered head, framed card below
   ============================================================ */
.boom12-block--embed-section .boom12-embed-section{ text-align:center; }
.boom12-embed-section__head{ margin-bottom:clamp(2rem,4vw,3rem); }
.boom12-embed-section__eyebrow{ margin-bottom:.25rem; }
.boom12-embed-section__title{
  font-size:clamp(2.25rem,5vw,3.5rem); margin:0;
}
.boom12-embed-section__body{
  max-width:42rem; margin:1rem auto 0;
  color:color-mix(in srgb, var(--brand-text) 80%, var(--brand-bg));
  font-size:1.0625rem; line-height:1.7;
}
.boom12-embed-section__body a{ color:var(--brand-secondary); text-decoration:underline; }
.boom12-embed-section__body a:hover{ color:color-mix(in srgb, var(--brand-secondary) 88%, #fff); }

/* First <p> is the intro line, stays full-width. Every <p> after that
   (links or plain text — wpautop wraps each line in its own <p>, which
   is block-level by default) sits inline with the next, so the parent's
   text-align:center groups them on one centered row regardless of which
   ones happen to be links. */
.boom12-embed-section__body p ~ p{
  display:inline-block;
  margin:1rem .75rem 0;
}
/* The Event Espresso output gets a dark elevated card frame. EE markup
   varies, so we frame the wrapper and gently normalize what's inside. */
.boom12-embed-section__embed{
  background:var(--brand-surface-elevated);
  border:1px solid color-mix(in srgb, var(--brand-text) 10%, transparent);
  border-radius:20px;
  padding:clamp(1.25rem,3vw,2rem);
  text-align:left;
  overflow:hidden;
}
.boom12-embed-section__embed img{ border-radius:14px; }
.boom12-embed-section__embed a{ color:var(--brand-secondary); }
.boom12-embed-section__actions{ margin-top:2rem; }

/* ------------------------------------------------------------
   Split layout — eyebrow/title/body on one side, the embed
   (e.g. the Contact form) on the other. .boom12-embed-section__head
   already wraps eyebrow+title+body as one box, and the embed/actions
   are its siblings, so this is a straightforward 2-column grid —
   no flat-sibling trick needed here. ------------------------------------------------------------ */
.boom12-block--embed-section.boom12-block--layout-split-left .boom12-embed-section,
.boom12-block--embed-section.boom12-block--layout-split-right .boom12-embed-section{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:start;
  gap:clamp(2rem,5vw,4.5rem);
  text-align:left;
}
.boom12-block--embed-section.boom12-block--layout-split-left .boom12-embed-section__head,
.boom12-block--embed-section.boom12-block--layout-split-right .boom12-embed-section__head{
  margin-bottom:0;
}
.boom12-block--embed-section.boom12-block--layout-split-left .boom12-embed-section__body,
.boom12-block--embed-section.boom12-block--layout-split-right .boom12-embed-section__body{
  margin:1rem 0 0; max-width:none;
}

/* split-right: copy on the left, embed on the right. */
.boom12-block--embed-section.boom12-block--layout-split-right .boom12-embed-section__head   { grid-column:1; grid-row:1; }
.boom12-block--embed-section.boom12-block--layout-split-right .boom12-embed-section__actions{ grid-column:1; grid-row:2; }
.boom12-block--embed-section.boom12-block--layout-split-right .boom12-embed-section__embed  { grid-column:2; grid-row:1/3; }

/* split-left mirrors it: embed on the left, copy on the right. */
.boom12-block--embed-section.boom12-block--layout-split-left .boom12-embed-section__head   { grid-column:2; grid-row:1; }
.boom12-block--embed-section.boom12-block--layout-split-left .boom12-embed-section__actions{ grid-column:2; grid-row:2; }
.boom12-block--embed-section.boom12-block--layout-split-left .boom12-embed-section__embed  { grid-column:1; grid-row:1/3; }

@media (max-width:860px){
  .boom12-block--embed-section.boom12-block--layout-split-left .boom12-embed-section,
  .boom12-block--embed-section.boom12-block--layout-split-right .boom12-embed-section{
    grid-template-columns:1fr;
  }
  /* Copy first, form below, regardless of split direction. */
  .boom12-block--embed-section.boom12-block--layout-split-left .boom12-embed-section__head,
  .boom12-block--embed-section.boom12-block--layout-split-right .boom12-embed-section__head   { grid-column:1; grid-row:1; }
  .boom12-block--embed-section.boom12-block--layout-split-left .boom12-embed-section__actions,
  .boom12-block--embed-section.boom12-block--layout-split-right .boom12-embed-section__actions{ grid-column:1; grid-row:2; }
  .boom12-block--embed-section.boom12-block--layout-split-left .boom12-embed-section__embed,
  .boom12-block--embed-section.boom12-block--layout-split-right .boom12-embed-section__embed  { grid-column:1; grid-row:3; margin-top:1.5rem; }
}

/* ============================================================
   4. ABOUT  (feature-text, split)  — image + text side by side
   ============================================================ */
.boom12-block--feature-text .boom12-feature{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:clamp(2rem,5vw,4.5rem);
}
/* split-right layout => media on the LEFT, content on the RIGHT */
.boom12-block--layout-split-right .boom12-feature__media{ order:1; }
.boom12-block--layout-split-right .boom12-feature__content{ order:2; }
/* split-left layout => media on the RIGHT */
.boom12-block--layout-split-left .boom12-feature__media{ order:2; }
.boom12-block--layout-split-left .boom12-feature__content{ order:1; }

.boom12-feature__media{ border-radius:18px; overflow:hidden; }
.boom12-feature__image{
  width:100%; height:100%; min-height:clamp(20rem,40vw,34rem);
  object-fit:cover; display:block;
}
.boom12-feature__eyebrow{ margin-bottom:.5rem; }
.boom12-feature__title{ font-size:clamp(2rem,4vw,3rem); }
.boom12-feature__body{
  font-size:1.0625rem; line-height:1.7;
  color:color-mix(in srgb, var(--brand-text) 80%, var(--brand-bg));
  margin:0 0 2rem;
}
.boom12-feature__actions{ display:flex; flex-wrap:wrap; gap:1rem; }

/* ============================================================
   5. SUPPORT  (cta-band)  — the cream card, the one bright moment
   ============================================================ */
.boom12-block--cta-band{ --b12-cream:#FFF5D9; }
.boom12-block--cta-band .boom12-cta{
  background:var(--b12-cream);
  color:#0F0B0C;
  border-radius:24px;
  padding:clamp(2.5rem,6vw,4.5rem) clamp(1.5rem,5vw,3rem);
  text-align:center;
  max-width:64rem; margin-inline:auto;
}
.boom12-block--cta-band .boom12-cta__title{
  color:#0F0B0C; font-size:clamp(2rem,4.5vw,3.25rem); margin:0 0 .75rem;
}
.boom12-block--cta-band .boom12-cta__body{
  color:color-mix(in srgb, #0F0B0C 75%, #FFF5D9);
  font-size:1.0625rem; max-width:38rem; margin:0 auto 2rem;
}
.boom12-block--cta-band .boom12-cta__actions{
  display:flex; justify-content:center; gap:1rem; flex-wrap:wrap;
}

/* ============================================================
   6. NEWSLETTER  (newsletter)  — centered, inline email + submit
   ============================================================ */
.boom12-block--newsletter .boom12-newsletter{ text-align:center; max-width:44rem; margin-inline:auto; }
.boom12-newsletter__title{ font-size:clamp(2rem,4.5vw,3rem); margin:0 0 .75rem; }
.boom12-newsletter__body{
  color:color-mix(in srgb, var(--brand-text) 75%, var(--brand-bg));
  font-size:1.0625rem; margin:0 0 2rem;
}
.boom12-newsletter__form{
  display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap;
  max-width:30rem; margin-inline:auto;
}
.boom12-newsletter__form input[type=email]{
  flex:1 1 16rem; min-width:0;
  background:transparent; color:var(--brand-text);
  border:1.5px solid color-mix(in srgb, var(--brand-text) 30%, transparent);
  border-radius:999px; padding:.95rem 1.4rem; font-size:1rem;
  font-family:'Manrope',sans-serif;
}
.boom12-newsletter__form input[type=email]::placeholder{
  color:color-mix(in srgb, var(--brand-text) 45%, var(--brand-bg));
}
.boom12-newsletter__form input[type=email]:focus{
  outline:none; border-color:var(--brand-primary);
}
.screen-reader-text{
  position:absolute!important; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:860px){
  .boom12-block--feature-text .boom12-feature{
    grid-template-columns:1fr; gap:1.75rem;
  }
  /* On mobile, always image-first regardless of split direction. */
  .boom12-block--layout-split-right .boom12-feature__media,
  .boom12-block--layout-split-left  .boom12-feature__media{ order:1; }
  .boom12-block--layout-split-right .boom12-feature__content,
  .boom12-block--layout-split-left  .boom12-feature__content{ order:2; }
  .boom12-feature__image{ min-height:14rem; }
}

/* ============================================================
   HEADER
   The base .site-header is background:var(--color-white) and is NOT
   remapped by dark mode (only --color-cream/navy/teal-wash are), so it
   stays white unless we override it here. Nav links are uppercase with a
   teal underline in base; we restyle to the dark/violet treatment.
   ============================================================ */
.site-header{
  background:var(--brand-bg);
  border-bottom:1px solid color-mix(in srgb, var(--brand-text) 10%, transparent);
  box-shadow:none;
}
.site-header__inner{
  max-width:1280px;
  min-height:84px;
  padding-block:.75rem;
}

/* Nav links: white, sentence case, violet hover + underline. */
.main-nav__list{ gap:clamp(1.25rem,2.5vw,2.25rem); }
.main-nav__list a{
  font-family:'Manrope',sans-serif;
  font-size:1rem;
  font-weight:500;
  letter-spacing:0;
  text-transform:none;
  color:var(--brand-text);
}
.main-nav__list a::after{ background:var(--brand-secondary); height:2px; }
.main-nav__list a:hover,
.main-nav__list .current-menu-item > a{ color:var(--brand-secondary); }

/* CTA pill in the header actions — same violet pill as the rest of the site.
   Base gives it .btn.btn--primary; we ensure it reads as our button. */
.site-header__actions .btn,
.main-nav__cta{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:'Manrope',sans-serif; font-weight:600; font-size:.95rem;
  padding:.7rem 1.4rem; border-radius:999px;
  background:var(--brand-primary); color:#fff; border:none;
  transition:transform .18s ease, background .18s ease;
}
.site-header__actions .btn:hover,
.main-nav__cta:hover{
  transform:translateY(-1px);
  background:color-mix(in srgb, var(--brand-primary) 88%, #fff);
  color:#fff;
}

/* Desktop/tablet: lay the nav list + CTA out inline together. */
.main-nav{
  display:flex;
  align-items:center;
  gap:clamp(1.5rem,3vw,2.5rem);
}
.main-nav__cta{ margin-left:0; }   /* the flex gap above replaces base's margin-left */

/* .site-header__actions only holds the mobile toggle now (Get Tickets
   moved into <nav>). On desktop it's an empty flex item still eating a
   justify-content:space-between gap from .site-header__inner, which is
   what was pushing nav+CTA off the right edge. Drop it out of flow above
   mobile; the @media(max-width:640px) rules below bring it back. */
@media (min-width:641px){
  .site-header__actions{ display:none; }
}

/* Mobile toggle bars -> white so they show on the dark bar. */
.mobile-menu-toggle span{ background:var(--brand-text); }

/* ============================================================
   MOBILE MENU PANEL — requires the Get Tickets link to live
   inside <nav> (see header.php). The toggle JS only ever flips
   .main-nav__list.is-open + aria-expanded — everything below
   just reacts to that existing class, no JS touched.
   ============================================================ */
@media (max-width:640px){
  .main-nav__cta{ display:none; }   /* hidden inline; reappears inside the open panel */

  /* .site-header is position:sticky, which IS a valid containing block
     for an absolutely-positioned descendant — top:100% always lands at
     the header's real bottom edge, whatever height it renders at. */
  .main-nav:has(.main-nav__list.is-open){
    position:absolute;
    top:100%; left:0; right:0;
    z-index:99;
    display:flex;
    flex-direction:column;
    background:var(--brand-bg);
    border-top:1px solid color-mix(in srgb, var(--brand-text) 10%, transparent);
    box-shadow:0 12px 24px rgba(0,0,0,.35);
    padding:1.5rem clamp(1.25rem,5vw,2rem) 2rem;
  }
  /* Base gives the <ul> its OWN fixed-panel styling — cancel that here,
     since .main-nav now owns the panel chrome and the list just flows
     inside it normally. */
  .main-nav:has(.main-nav__list.is-open) .main-nav__list{
    position:static; top:auto; left:auto; right:auto; z-index:auto;
    display:flex;
    flex-direction:column;
    background:none;
    border:none;
    box-shadow:none;
    padding:0;
  }
  .main-nav__list.is-open a{ color:var(--brand-text); }

  .main-nav:has(.main-nav__list.is-open) .main-nav__cta{
    display:inline-flex;
    justify-content:center;
    margin:1.5rem 0 0;
  }
}

/* ============================================================
   NEWSLETTER — Gravity Forms (form id 2)  [real DOM, GF 2.10]
   Verified against actual markup:
     form#gform_2
       .gform-body .gform_body > .gform_fields > .gfield--type-email
         label.gfield_label (we visually hide; placeholder carries it)
         .ginput_container_email > input#input_2_1.large[type=email]
       .gform-footer .gform_footer
         .cf-turnstile.boom12-turnstile-wrapper   <- pull onto own row
         input#gform_submit_button_2.gform_button.button[type=submit]
   GF 2.10 ships .gform-theme--framework :where() resets + orbital vars.
   We re-point orbital vars AND hard-override the button by its real class.
   ============================================================ */

/* Re-point orbital control variables to brand tokens (dark-aware). */
body.gform-theme--orbital{
  --gf-ctrl-bg-color:        transparent;
  --gf-ctrl-color:           var(--brand-text);
  --gf-ctrl-border-color:    color-mix(in srgb, var(--brand-text) 30%, transparent);
  --gf-ctrl-radius:          999px;
  --gf-ctrl-focus-color:     var(--brand-primary);
  --gf-ctrl-btn-bg-color-primary:       var(--brand-primary);
  --gf-ctrl-btn-color-primary:          #ffffff;
  --gf-ctrl-btn-hover-bg-color-primary: color-mix(in srgb, var(--brand-primary) 88%, #fff);
  --gf-ctrl-btn-border-color-primary:   var(--brand-primary);
  --gf-ctrl-btn-radius:      999px;
  --gf-ctrl-btn-padding-x:   2.2rem;
  --gf-ctrl-btn-padding-y:   0.95rem;
}

/* Constrain + center the form inside the newsletter block. */
.boom12-block--newsletter .boom12-newsletter__embed{ max-width:34rem; margin-inline:auto; }
.boom12-block--newsletter #gform_2{ display:block; }

/* Email field -> dark pill. */
.boom12-block--newsletter #input_2_1,
.boom12-block--newsletter .ginput_container_email input[type=email]{
  width:100% !important;
  background:transparent !important;
  color:var(--brand-text) !important;
  border:1.5px solid color-mix(in srgb, var(--brand-text) 30%, transparent) !important;
  border-radius:999px !important;
  padding:.95rem 1.4rem !important;
  font-family:'Manrope',sans-serif !important;
  font-size:1rem !important;
}
.boom12-block--newsletter #input_2_1::placeholder{
  color:color-mix(in srgb, var(--brand-text) 45%, var(--brand-bg)) !important;
}
.boom12-block--newsletter #input_2_1:focus{
  border-color:var(--brand-primary) !important; outline:none !important;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--brand-primary) 25%, transparent) !important;
}

/* Email label -> screen-reader only (placeholder + required text remain). */
.boom12-block--newsletter #field_2_1 .gfield_label{
  position:absolute !important; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}

/* FOOTER: stack its children so Turnstile is on its OWN row, button below,
   both centered. This is what pulls Cloudflare out of the inline row. */
.boom12-block--newsletter #gform_2 .gform_footer{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  gap:1.25rem !important;
  margin:1.5rem 0 0 !important;
  padding:0 !important;
}
/* Turnstile widget: own row, centered, untouched visually. */
.boom12-block--newsletter .boom12-turnstile-wrapper,
.boom12-block--newsletter .cf-turnstile{
  margin:0 !important;            /* kill GF's inline 1em top/bottom */
  display:flex !important; justify-content:center !important;
}

/* Submit button -> violet pill. Target by REAL class .gform_button, and
   defeat the framework reset that was rounding it into a circle by fixing
   width to content (not full/forced) and a sane line-height. */
.boom12-block--newsletter input.gform_button,
.boom12-block--newsletter #gform_submit_button_2,
.boom12-block--newsletter .gform_footer input[type=submit]{
  display:inline-flex !important;
  align-items:center !important; justify-content:center !important;
  width:auto !important; min-width:0 !important; max-width:none !important;
  min-height:0 !important; max-height:none !important;
  background-color:var(--brand-primary) !important;
  color:#fff !important;
  border:none !important;
  border-radius:999px !important;
  font-family:'Manrope',sans-serif !important;
  font-weight:600 !important;
  font-size:1rem !important;
  line-height:1 !important;
  padding:.95rem 2.4rem !important;
  height:auto !important;
  cursor:pointer !important;
  transition:transform .18s ease, background-color .18s ease !important;
}
.boom12-block--newsletter input.gform_button:hover,
.boom12-block--newsletter #gform_submit_button_2:hover,
.boom12-block--newsletter .gform_footer input[type=submit]:hover{
  transform:translateY(-2px);
  background-color:color-mix(in srgb, var(--brand-primary) 88%, #fff) !important;
}

/* Required asterisk + messages legible on dark. */
.boom12-block--newsletter .gfield_required{ color:var(--brand-secondary); }
.boom12-block--newsletter .gform_confirmation_message{ color:var(--brand-text); text-align:center; }
.boom12-block--newsletter .validation_message,
.boom12-block--newsletter .gfield_description{
  color:color-mix(in srgb, var(--brand-text) 70%, var(--brand-bg)); font-size:.85rem;
}

/* ============================================================
   EVENTS — Event Espresso [ESPRESSO_EVENTS] inside embed-section
   Verified against EE 5.0.56 real markup:
     .boom12-embed-section__embed
       header.page-header > h1.page-title        <- EE's own title (dupe) HIDE
       article.espresso_events
         .espresso-event-header-dv
            .ee-event-img-dv > a.ee-event-img-lnk > img.ee-event-img  <- featured image (sibling of title, NOT a wrapper around it)
            header.event-header > h2.entry-title
               > a.ee-event-header-lnk            <- event title link
         .espresso-event-list-wrapper-dv > .event-content
            form > input.view-details-btn         <- View Details button
            .event-datetimes ul li
               .ee-event-datetimes-li-daterange   <- date (has dashicon)
               .ee-event-datetimes-li-timerange   <- time (has dashicon)
               form.download-iCal-frm             <- stray iCal button HIDE
   EE injects its own H1 and uses dashicons (not loaded on front end here),
   so we hide the dupe title and replace the tofu glyphs.
   ============================================================ */

/* Hide EE's injected page-header H1 — the block already prints the section
   title, and a second H1 is an SEO problem. */
.boom12-embed-section__embed .page-header{ display:none !important; }

/* The event article = the card. (The embed wrapper already provides the dark
   elevated frame from the embed-section rules; here we lay out the article.) */
.boom12-embed-section__embed .espresso_events{
  display:grid;
  grid-template-columns:1fr;   /* one column until an image exists; see note */
  gap:1rem;
  margin:0;
  text-align:left;
}

/* Event title link -> Chivo, white, violet on hover. */
.boom12-embed-section__embed .event-header{ margin:0; }
.boom12-embed-section__embed h2.entry-title{ margin:0 0 .75rem; }
.boom12-embed-section__embed a.ee-event-header-lnk{
  font-family:'Chivo',sans-serif; font-weight:800;
  font-size:clamp(1.5rem,3vw,2rem); line-height:1.1;
  color:var(--brand-text); text-decoration:none;
}
.boom12-embed-section__embed a.ee-event-header-lnk:hover{ color:var(--brand-secondary); }

/* Date / time rows. Replace the broken dashicons with our own glyphs and
   hide the dashicon font spans (they render as tofu). */
.boom12-embed-section__embed .event-datetimes{ margin:.5rem 0 1.25rem; }
.boom12-embed-section__embed .ee-event-datetimes-ul{ margin:0; padding:0; list-style:none; }
.boom12-embed-section__embed .ee-event-datetimes-li{
  color:color-mix(in srgb, var(--brand-text) 80%, var(--brand-bg));
  font-size:1rem; line-height:1.8;
}
.boom12-embed-section__embed .ee-event-datetimes-li .dashicons{
  display:none !important;   /* kill tofu glyphs */
}
.boom12-embed-section__embed .ee-event-datetimes-li-daterange::before{
  content:"\1F4C5"; margin-right:.5rem;   /* calendar emoji as fallback */
}
.boom12-embed-section__embed .ee-event-datetimes-li-timerange::before{
  content:"\1F551"; margin-right:.5rem;   /* clock emoji as fallback */
}

/* Hide the stray iCal submit (empty box) — keep the section clean. */
.boom12-embed-section__embed .download-iCal-frm{ display:none !important; }

/* "View Details" -> violet pill, ordered AFTER the date in the visual flow. */
.boom12-embed-section__embed .event-content{ display:flex; flex-direction:column; }
.boom12-embed-section__embed form[method="GET"]{ order:3; margin:0; }
.boom12-embed-section__embed .event-datetimes{ order:2; }
.boom12-embed-section__embed .view-details-btn,
.boom12-embed-section__embed input.ticket-selector-submit-btn{
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--brand-primary) !important; color:#fff !important;
  border:none !important; border-radius:999px !important;
  font-family:'Manrope',sans-serif !important; font-weight:600 !important;
  font-size:1rem !important; padding:.85rem 1.8rem !important;
  cursor:pointer !important; width:auto !important;
  transition:transform .18s ease, background .18s ease !important;
}
.boom12-embed-section__embed .view-details-btn:hover{
  transform:translateY(-2px);
  background:color-mix(in srgb, var(--brand-primary) 88%, #fff) !important;
}
.boom12-embed-section__embed .clear{ display:none; }

/* WHEN a featured image exists, EE adds #ee-event-img-dv-{id}.ee-event-img-dv as
   a SIBLING of header.event-header -- both live inside .espresso-event-header-dv,
   which is itself a sibling of .espresso-event-list-wrapper-dv (the date/CTA
   block). So "image left, everything else right" needs image + title pulled
   apart even though they share a parent: dissolve that shared wrapper with
   display:contents so its two children become direct grid items themselves,
   placeable independently alongside .espresso-event-list-wrapper-dv.
   (Corrected from an earlier guessed class, .ee-event-list-img-wrap, that
   didn't match anything real.) */
.boom12-embed-section__embed .espresso_events:has(.ee-event-img-dv){
  grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr);
  grid-template-rows:auto 1fr;
  gap:clamp(1.5rem,3vw,2.5rem);
}
.boom12-embed-section__embed .espresso_events:has(.ee-event-img-dv) > .espresso-event-header-dv{
  display:contents;
}
.boom12-embed-section__embed .ee-event-img-dv{ grid-column:1; grid-row:1/3; align-self:start; }
.boom12-embed-section__embed .espresso_events:has(.ee-event-img-dv) .event-header{
  grid-column:2; grid-row:1;
}
.boom12-embed-section__embed .espresso_events:has(.ee-event-img-dv) .espresso-event-list-wrapper-dv{
  grid-column:2; grid-row:2;
}
/* Square crop: aspect-ratio sizes off the link's WIDTH (the column track),
   not its height -- height:100% was circular with no defined row height to
   measure against, which is what made the image balloon to its native
   (wide) ratio instead of cropping. overflow:hidden on the wrapper does
   the actual clipping so there's no double-rounding with the <img> itself. */
.boom12-embed-section__embed .ee-event-img-lnk{
  display:block; aspect-ratio:1/1; overflow:hidden; border-radius:14px;
}
.boom12-embed-section__embed .ee-event-img{
  width:100%; height:100%; object-fit:cover; display:block;
}
@media (max-width:700px){
  .boom12-embed-section__embed .espresso_events:has(.ee-event-img-dv){
    grid-template-columns:1fr;
    grid-template-rows:auto;
  }
  .boom12-embed-section__embed .ee-event-img-dv,
  .boom12-embed-section__embed .espresso_events:has(.ee-event-img-dv) .event-header,
  .boom12-embed-section__embed .espresso_events:has(.ee-event-img-dv) .espresso-event-list-wrapper-dv{
    grid-column:1; grid-row:auto;
  }
}

/* ============================================================
   ABOUT PAGE block types (not on homepage)
   Verified against real markup:
     hero (layout-stacked, no media)
     .boom12-process  -> timeline (ol.boom12-process__steps > li.step)
     .boom12-grid-block -> .boom12-grid > .boom12-grid__item
     .boom12-people-block -> .boom12-carousel > .boom12-carousel__slide
        > .boom12-person (__media/__name/__role/__social/__link)
   ============================================================ */

/* --- Stacked hero (About "Our Mission"): single column, left aligned,
   no forced 2-col grid, no min-height stage. --------------------------- */
.boom12-block--hero.boom12-block--layout-stacked{
  padding-block:0;     /* padding handled inside, varies by with/without media */
  position:relative;
}
.boom12-block--hero.boom12-block--layout-stacked .boom12-block__inner{
  max-width:1280px; margin-inline:auto;
  padding-inline:clamp(1.25rem,4vw,3.5rem);
}
.boom12-block--hero.boom12-block--layout-stacked .boom12-hero{
  display:block;
  min-height:0;
  grid-template-columns:none;
}

/* Plain version: stacked hero with NO media (e.g. a future text-only page).
   Keeps simple top/bottom section padding, left-aligned, no bg trick. */
.boom12-block--hero.boom12-block--layout-stacked .boom12-hero:not(:has(.boom12-hero__media)){
  padding-block:clamp(4rem,9vw,8rem);
}

/* Background-image version: ONLY when this stacked hero actually has media.
   Image becomes a full-bleed background; content centers on top. Scoped
   with :has() so a future stacked hero with no image never gets an empty
   bg box. */
.boom12-block--hero.boom12-block--layout-stacked .boom12-hero:has(.boom12-hero__media){
  position:relative;
  min-height:min(48vh, 440px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding-block:clamp(2rem,5vw,3.5rem);
  overflow:hidden;
}
.boom12-block--hero.boom12-block--layout-stacked .boom12-hero__media{
  position:absolute; inset:0; z-index:0;
  min-height:0;   /* cancel the split-hero rule's min(82vh,760px) — without
                      this, the media box stayed taller than the now-shorter
                      stacked section, got clipped by overflow:hidden, and
                      the gradient's bottom fade landed below the visible
                      area instead of at the section's actual bottom edge. */
}
.boom12-block--hero.boom12-block--layout-stacked .boom12-hero__image{
  width:100%; height:100%; object-fit:cover; display:block;
}
/* Vignette: clear/visible at center, falling to brand-black at the edges.
   A pure radial ellipse stretches mostly sideways on a wide/short box like
   this hero, so it never fully darkens the top/bottom before the image
   just stops — that was the hard seam at the bottom. Layering a vertical
   linear fade UNDERNEATH guarantees the top and bottom edges always reach
   solid black regardless of aspect ratio, while the radial still handles
   the open "frame" look at the sides/corners. */
.boom12-block--hero.boom12-block--layout-stacked .boom12-hero__media::after{
  content:"";
  position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(ellipse at center,
              transparent 0%,
              transparent 5%,
              var(--brand-bg) 100%),
    linear-gradient(to bottom,
              var(--brand-bg) 0%,
              transparent 10%,
              transparent 20%,
              var(--brand-bg) 100%);
}
.boom12-block--hero.boom12-block--layout-stacked .boom12-hero:has(.boom12-hero__media) .boom12-hero__content{
  position:relative; z-index:2;
  text-align:center;
  margin-inline:auto;
}
.boom12-block--hero.boom12-block--layout-stacked .boom12-hero:has(.boom12-hero__media) .boom12-hero__title,
.boom12-block--hero.boom12-block--layout-stacked .boom12-hero:has(.boom12-hero__media) .boom12-hero__body{
  text-shadow:0 2px 24px rgba(0,0,0,.65), 0 1px 3px rgba(0,0,0,.5);
}
.boom12-block--hero.boom12-block--layout-stacked .boom12-hero:has(.boom12-hero__media) .boom12-hero__body{
  margin-inline:auto;
}
.boom12-block--hero.boom12-block--layout-stacked .boom12-hero__content{
  grid-column:auto; max-width:46rem; padding:0; align-self:auto;
}
.boom12-block--hero.boom12-block--layout-stacked .boom12-hero__title{
  font-size:clamp(2.5rem,6vw,4.5rem);
}
.boom12-block--hero.boom12-block--layout-stacked .boom12-hero__body{ max-width:38rem; }

/* --- PROCESS / TIMELINE -------------------------------------------------
   Layout: left intro column + right timeline rail. Each step is a node on a
   vertical line with the number in the node, title + body to the right.
   On narrow screens it collapses to a single rail. --------------------- */
.boom12-block--process .boom12-process{
  display:grid;
  grid-template-columns: minmax(0,0.8fr) minmax(0,1.2fr);
  grid-template-rows: auto 1fr;   /* row1 = title's natural height only;
                                      row2 is flexible and absorbs whatever
                                      extra height the spanning steps column
                                      needs, so it can't push row1 (and
                                      therefore intro) downward. */
  column-gap:clamp(2rem,5vw,4.5rem);
  row-gap:.75rem;                 /* was a shared `gap`, which put the same
                                      large value BETWEEN title and intro —
                                      that was the actual cause of the gap. */
  align-items:start;
}
/* Explicit placement: title + intro stack in the LEFT column; steps occupy
   the RIGHT column spanning both rows. (The three are flat siblings in the
   markup, so auto-placement would otherwise put title/intro side-by-side —
   this pins them correctly without needing a markup change.) */
.boom12-process__title{
  grid-column:1; grid-row:1;
  font-family:'Chivo',sans-serif; font-weight:900; letter-spacing:-0.02em;
  font-size:clamp(2rem,4vw,3rem); line-height:1.05; color:var(--brand-text);
  margin:0;
}
.boom12-process__intro{
  grid-column:1; grid-row:2;
  align-self:start;
  color:color-mix(in srgb, var(--brand-text) 78%, var(--brand-bg));
  font-size:1.0625rem; line-height:1.7;
}
.boom12-process__steps{
  grid-column:2; grid-row:1 / span 2;
  list-style:none; margin:0; padding:0; position:relative;
}

.boom12-process__step{
  position:relative;
  padding-left:4rem;
  padding-bottom:clamp(2rem,4vw,3rem);
}
.boom12-process__step:last-child{ padding-bottom:0; }
/* Line segment per step, connecting THIS node to the NEXT one only — never
   drawn on the last step, so the line can't overshoot past the final node. */
.boom12-process__step:not(:last-child)::after{
  content:"";
  position:absolute;
  left:calc(1.25rem - 1px); top:2.5rem; bottom:0;
  width:2px;
  background:color-mix(in srgb, var(--brand-text) 18%, transparent);
}
.boom12-process__num{
  position:absolute; left:0; top:0;
  width:2.5rem; height:2.5rem; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--brand-primary); color:transparent;
  font-family:'Chivo',sans-serif; font-weight:800; font-size:1rem;
  z-index:1;   /* sits above the line segment */
}
.boom12-process__step-title{
  font-family:'Chivo',sans-serif; font-weight:800;
  font-size:1.25rem; color:var(--brand-text); margin:.25rem 0 .5rem;
}
.boom12-process__step-body{
  color:color-mix(in srgb, var(--brand-text) 75%, var(--brand-bg));
  font-size:1rem; line-height:1.7; margin:0;
}
@media (max-width:860px){
  .boom12-block--process .boom12-process{ grid-template-columns:1fr; gap:2rem; }
  .boom12-process__title,.boom12-process__intro,.boom12-process__steps{
    grid-column:1; grid-row:auto;
  }
}

/* --- FEATURE GRID (grid-4 offerings) ------------------------------------ */
.boom12-block--feature-grid .boom12-grid-block__title,
.boom12-grid-block__title{
  font-family:'Chivo',sans-serif; font-weight:900; letter-spacing:-0.02em;
  font-size:clamp(2rem,4vw,3rem); color:var(--brand-text); margin:0 0 .75rem;
}
.boom12-grid-block__intro{
  color:color-mix(in srgb, var(--brand-text) 78%, var(--brand-bg));
  font-size:1.0625rem; margin:0 0 clamp(2rem,4vw,3rem); max-width:42rem;
}
.boom12-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap:clamp(1rem,2.5vw,1.75rem);
}
.boom12-grid__item{
  background:var(--brand-surface-elevated);
  border:1px solid color-mix(in srgb, var(--brand-text) 8%, transparent);
  border-radius:16px; padding:1.75rem;
  transition:transform .18s ease, border-color .18s ease;
}
.boom12-grid__item:hover{
  transform:translateY(-3px);
  border-color:color-mix(in srgb, var(--brand-primary) 50%, transparent);
}
/* Icon presentation: small, square, fully visible (contain, not cover) — no
   cropping, no full-bleed coloured block. Sits inline above the title. */
.boom12-grid__media{
  margin:0 0 1.25rem;
  width:3rem; height:3rem;
  border-radius:0; overflow:visible;
}
.boom12-grid__media img{
  width:100%; height:100%;
  object-fit:contain; object-position:left center;
  display:block;
}
.boom12-grid__item-title{ font-family:'Chivo',sans-serif; font-weight:800; font-size:1.2rem; margin:0 0 .5rem; }
/* Titles read as plain text, not links: pointer-events:none makes the click
   genuinely inert (not just visually styled), since the underlying anchor
   still points at the offering's single page. */
.boom12-grid__item-title a{
  color:var(--brand-text); text-decoration:none;
  cursor:default; pointer-events:none;
}
.boom12-grid__item-body{
  color:color-mix(in srgb, var(--brand-text) 72%, var(--brand-bg));
  font-size:.95rem; line-height:1.6; margin:0;
}
.boom12-grid__item-price{ color:var(--brand-secondary); font-weight:600; margin:.75rem 0 0; }

/* --- PEOPLE CAROUSEL ---------------------------------------------------- */
.boom12-people-block__title{
  font-family:'Chivo',sans-serif; font-weight:900; letter-spacing:-0.02em;
  font-size:clamp(2rem,4vw,3rem); color:var(--brand-text); margin:0 0 .75rem;
}
.boom12-people-block__intro{
  color:color-mix(in srgb, var(--brand-text) 78%, var(--brand-bg));
  font-size:1.0625rem; margin:0 0 clamp(1.5rem,3vw,2.5rem); max-width:42rem;
}
/* build on the base .boom12-carousel flex/scroll-snap; restate the essentials
   so it works even if base order changes, then theme + size. */
.boom12-people-block .boom12-carousel{
  display:flex; flex-wrap:nowrap;
  overflow-x:auto; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  gap:1.25rem; padding-bottom:1rem;
  scrollbar-width:thin;
  scrollbar-color:var(--brand-primary) transparent;
}
.boom12-people-block .boom12-carousel__slide{
  flex:0 0 auto; width:min(72%, 240px); scroll-snap-align:start;
}
.boom12-person{
  background:var(--brand-surface-elevated);
  border:1px solid color-mix(in srgb, var(--brand-text) 8%, transparent);
  border-radius:16px; padding:.6rem; height:100%;
}
.boom12-person__media{ border-radius:10px; overflow:hidden; margin-bottom:.85rem; aspect-ratio:1/1; }
.boom12-person__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.boom12-person__name{ font-family:'Chivo',sans-serif; font-weight:800; font-size:1.1rem; margin:0 .4rem .25rem; }
/* Board members shouldn't navigate to a single-person page: pointer-events
   makes the click genuinely inert, not just visually de-emphasized. */
.boom12-person__name a{
  color:var(--brand-text); text-decoration:none;
  cursor:default; pointer-events:none;
}
.boom12-person__role{
  color:color-mix(in srgb, var(--brand-text) 65%, var(--brand-bg));
  font-size:.9rem; margin:0 .4rem .75rem;
}
.boom12-person__social{ display:flex; gap:.75rem; list-style:none; margin:0 .4rem .4rem; padding:0; }
.boom12-person__social-link{ color:var(--brand-secondary); font-size:.85rem; text-decoration:none; }
.boom12-person__social-link:hover{ text-decoration:underline; }
/* ============================================================
   Gravity Forms — generic treatment for any form OUTSIDE the
   newsletter block (e.g. the Contact page). Uses GF's standard
   classes (not form-specific IDs), so it applies to this form and
   any future GF form on the site without extra scoping.
   ============================================================ */

/* Text inputs -> dark pill (matches the newsletter field). */
.gform_wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]),
.gform_wrapper select{
  width:100% !important;
  background:transparent !important;
  color:var(--brand-text) !important;
  border:1.5px solid color-mix(in srgb, var(--brand-text) 30%, transparent) !important;
  border-radius:999px !important;
  padding:.85rem 1.25rem !important;
  font-family:'Manrope',sans-serif !important;
  font-size:1rem !important;
}

/* Textarea -> dark field too, but a modest radius rather than a full pill
   (999px on a tall box just rounds the whole thing into an odd capsule). */
.gform_wrapper textarea{
  width:100% !important;
  background:transparent !important;
  color:var(--brand-text) !important;
  border:1.5px solid color-mix(in srgb, var(--brand-text) 30%, transparent) !important;
  border-radius:16px !important;
  padding:1rem 1.25rem !important;
  font-family:'Manrope',sans-serif !important;
  font-size:1rem !important;
  min-height:9rem !important;
  resize:vertical !important;
}

.gform_wrapper input::placeholder,
.gform_wrapper textarea::placeholder{
  color:color-mix(in srgb, var(--brand-text) 45%, var(--brand-bg)) !important;
}
.gform_wrapper input:focus,
.gform_wrapper textarea:focus,
.gform_wrapper select:focus{
  border-color:var(--brand-primary) !important;
  outline:none !important;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--brand-primary) 25%, transparent) !important;
}

/* Field labels: screen-reader only (placeholder carries it visually). */
.gform_wrapper .gfield_label{
  position:absolute !important; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}

/* Submit -> violet pill sized to its own content, not GF's forced box. */
.gform_wrapper input[type=submit],
.gform_wrapper button[type=submit],
.gform_wrapper .gform_button{
  display:inline-flex !important;
  align-items:center !important; justify-content:center !important;
  width:auto !important; min-width:0 !important; max-width:none !important;
  min-height:0 !important; max-height:none !important;
  background-color:var(--brand-primary) !important;
  color:#fff !important;
  border:none !important;
  border-radius:999px !important;
  font-family:'Manrope',sans-serif !important;
  font-weight:600 !important;
  font-size:1rem !important;
  line-height:1 !important;
  padding:.95rem 2.4rem !important;
  height:auto !important;
  cursor:pointer !important;
  transition:transform .18s ease, background-color .18s ease !important;
}
.gform_wrapper input[type=submit]:hover,
.gform_wrapper button[type=submit]:hover,
.gform_wrapper .gform_button:hover{
  transform:translateY(-2px);
  background-color:color-mix(in srgb, var(--brand-primary) 88%, #fff) !important;
}

/* Footer row: Turnstile + Send sit side by side, vertically aligned. */
.gform_wrapper .gform_footer,
.gform_wrapper .gform-footer{
  display:flex !important;
  align-items:center !important;
  gap:1.25rem !important;
  flex-wrap:wrap !important;
  margin-top:1.5rem !important;
}

.gform_wrapper .validation_message,
.gform_wrapper .gfield_description{
  color:color-mix(in srgb, var(--brand-text) 70%, var(--brand-bg));
  font-size:.85rem;
}
.gform_wrapper .gform_confirmation_message{ color:var(--brand-text); }
/* ============================================================
   Single Event page (Event Espresso default template — NOT the
   block-stack system; this is the theme's generic .section/.container
   wrapper with EE's own markup inside). Scoped via WordPress's
   standard `single-{post_type}` body class so it only narrows THIS
   template, not every page using .container.
   ============================================================ */

/* 1. Width: 768px reading column, still centered (base .container
      already centers via margin auto).
      Scoped to .section > .container specifically -- body.single-espresso_events
      .container alone was too broad: .site-footer also uses .container for its
      own layout, and since the footer is a sibling of <main> (both live under
      the same <body>), that body-class selector matched the footer's container
      too, squeezing it down to the same 768px reading column as the article.
      main > .section > .container targets only the actual page content. */
body.single-espresso_events main .section > .container{
  max-width:768px;
}

/* 2. Ticket selector table -> dark card, on-brand. */
.tkt-slctr-tbl-wrap-dv{
  background:var(--brand-surface-elevated);
  border:1px solid color-mix(in srgb, var(--brand-text) 8%, transparent);
  border-radius:16px;
  padding:1.5rem;
  margin:2rem 0;
  overflow-x:auto;
}
.tkt-slctr-tbl{
  width:100%;
  border-collapse:collapse;
}
.tkt-slctr-tbl thead th{
  text-align:left;
  font-family:'Manrope',sans-serif;
  font-weight:700;
  font-size:.85rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:color-mix(in srgb, var(--brand-text) 65%, var(--brand-bg));
  padding:0 0 .85rem;
  border-bottom:1px solid color-mix(in srgb, var(--brand-text) 12%, transparent);
}
.tkt-slctr-tbl thead th.cntr{ text-align:right; }
.tkt-slctr-tbl tbody td{
  padding:1.1rem 0;
  color:var(--brand-text);
  border-bottom:1px solid color-mix(in srgb, var(--brand-text) 8%, transparent);
  vertical-align:middle;
}
.tckt-slctr-tbl-td-name strong{ font-family:'Chivo',sans-serif; font-weight:800; }
.tckt-slctr-tbl-td-price{ text-align:right; font-weight:600; }
.tckt-slctr-tbl-td-qty{ text-align:right; }

/* "show details +" / "hide details -" toggle links */
.tkt-slctr-tbl .display-tckt-slctr-tkt-details,
.tkt-slctr-tbl .hide-tckt-slctr-tkt-details{
  color:color-mix(in srgb, var(--brand-text) 55%, var(--brand-bg)) !important;
  text-decoration:underline;
  text-decoration-color:color-mix(in srgb, var(--brand-text) 25%, transparent);
  margin-left:.5rem;
}
.tkt-slctr-tbl .display-tckt-slctr-tkt-details:hover,
.tkt-slctr-tbl .hide-tckt-slctr-tkt-details:hover{
  color:var(--brand-secondary) !important;
}

/* Mobile: the 3-column table (Details/Price/Qty) has no room to breathe on
   narrow phones, which is exactly why Qty was getting clipped/hidden off
   the right edge. Below 640px, drop the table grid entirely and reflow
   each ticket row as its own block: name on its own line, then price and
   qty side by side underneath, both always fully visible and tappable. */
@media (max-width:640px){
  .tkt-slctr-tbl thead{ display:none; }
  .tkt-slctr-tbl, .tkt-slctr-tbl tbody{ display:block; width:100%; }
  .tckt-slctr-tbl-tr{
    display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1rem;
    padding-bottom:1.25rem; margin-bottom:1.25rem;
    border-bottom:1px solid color-mix(in srgb, var(--brand-text) 10%, transparent);
  }
  .tkt-slctr-tbl tbody td{ display:block; border-bottom:none; padding:0; }
  .tckt-slctr-tbl-td-name{ flex:1 1 100%; }
  .tckt-slctr-tbl-td-price{ flex:1 1 auto; text-align:left; }
  .tckt-slctr-tbl-td-qty{
    flex:0 0 auto; text-align:right;
    display:flex; align-items:center; gap:.5rem;
  }
  .tckt-slctr-tbl-td-qty::before{
    content:"Qty";
    font-family:'Manrope',sans-serif; font-weight:700; font-size:.75rem;
    letter-spacing:.04em; text-transform:uppercase;
    color:color-mix(in srgb, var(--brand-text) 55%, var(--brand-bg));
  }
  .ticket-selector-tbl-qty-slct{
    padding:.55rem .7rem !important;
    font-size:1rem !important;
  }
}

/* Qty dropdown -> small dark field (a compact inline control suits a
   numeric table cell better than the full pill style). */
.ticket-selector-tbl-qty-slct{
  background:var(--brand-bg) !important;
  color:var(--brand-text) !important;
  border:1.5px solid color-mix(in srgb, var(--brand-text) 30%, transparent) !important;
  border-radius:8px !important;
  padding:.4rem .6rem !important;
  font-family:'Manrope',sans-serif !important;
}

/* Expandable ticket-details panel (price breakdown + access dates table) —
   legible dark treatment in case a visitor clicks "show details". */
.tckt-slctr-tkt-details-dv{ color:var(--brand-text); }
.tckt-slctr-tkt-details-dv h4,
.tckt-slctr-tkt-details-dv h5{
  font-family:'Chivo',sans-serif; font-weight:800; color:var(--brand-text);
  margin:1rem 0 .5rem;
}
.tckt-slctr-tkt-details-tbl{ width:100%; border-collapse:collapse; }
.tckt-slctr-tkt-details-tbl th,
.tckt-slctr-tkt-details-tbl td{
  padding:.5rem .25rem;
  border-bottom:1px solid color-mix(in srgb, var(--brand-text) 10%, transparent);
  color:color-mix(in srgb, var(--brand-text) 80%, var(--brand-bg));
}
.tckt-slctr-tkt-details-dv .drk-grey-text{
  color:color-mix(in srgb, var(--brand-text) 55%, var(--brand-bg)) !important;
}

/* 3. Register Now -> violet pill (the main CTA on this page). */
.ticket-selector-submit-btn{
  display:inline-flex !important;
  align-items:center !important; justify-content:center !important;
  width:auto !important; min-width:0 !important;
  background-color:var(--brand-primary) !important;
  color:#fff !important;
  border:none !important;
  border-radius:999px !important;
  font-family:'Manrope',sans-serif !important;
  font-weight:600 !important;
  font-size:1.05rem !important;
  padding:1rem 2.6rem !important;
  cursor:pointer !important;
  transition:transform .18s ease, background-color .18s ease !important;
}
.ticket-selector-submit-btn:hover{
  transform:translateY(-2px);
  background-color:color-mix(in srgb, var(--brand-primary) 88%, #fff) !important;
}
.ticket-selector-disabled-submit-btn-msg{
  display:block; margin-bottom:.75rem;
  color:color-mix(in srgb, var(--brand-secondary) 70%, var(--brand-text));
  font-size:.9rem;
}

/* 4. Date / time / venue block — same dashicons-tofu fix as the homepage
   events card (these render for an admin because the logged-in toolbar
   happens to load that font; a public visitor likely sees broken squares
   without this). */
.ee-event-datetimes-ul{ list-style:none; margin:1.5rem 0; padding:0; }
.ee-event-datetimes-li{
  color:color-mix(in srgb, var(--brand-text) 85%, var(--brand-bg));
  line-height:1.9;
}
.ee-event-datetimes-li-date-name{
  font-family:'Chivo',sans-serif; font-weight:800; color:var(--brand-text);
  font-size:1.1rem;
}
.ee-event-datetimes-li .dashicons{ display:none !important; }
.ee-event-datetimes-li-daterange::before{ content:"\1F4C5"; margin-right:.5rem; }
.ee-event-datetimes-li-timerange::before{ content:"\1F551"; margin-right:.5rem; }
.ee-event-datetimes-li-venue::before{ content:"\1F3E0"; margin-right:.5rem; }
.ee-event-datetimes-li-venue a{ color:var(--brand-secondary); }
.ee-event-datetimes-li-date-desc{
  display:block; margin-top:.5rem;
  color:color-mix(in srgb, var(--brand-text) 78%, var(--brand-bg));
}
/* iCal "add to calendar" button: value="" means no text label, and
   <input> elements can't render ::after generated content (a hard CSS
   limit for replaced elements) — uses a background-image SVG instead. */
.download-iCal-frm{ margin:.75rem 0 0; }
.download-iCal-frm .ee-ical-sbmt{
  background-color:color-mix(in srgb, var(--brand-text) 10%, transparent) !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cline x1='3' y1='9' x2='21' y2='9'/%3E%3Cline x1='8' y1='3' x2='8' y2='7'/%3E%3Cline x1='16' y1='3' x2='16' y2='7'/%3E%3Cline x1='12' y1='13' x2='12' y2='18'/%3E%3Cline x1='9.5' y1='15.5' x2='14.5' y2='15.5'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:1rem 1rem !important;
  border:1px solid color-mix(in srgb, var(--brand-text) 25%, transparent) !important;
  border-radius:6px !important;
  width:2rem; height:2rem;
  cursor:pointer;
  color:transparent;
}

/* 5. Venue block */
.espresso-venue-dv{ margin-top:2.5rem; }
.espresso-venue-dv h4{
  font-family:'Chivo',sans-serif; font-weight:800; color:var(--brand-text);
  margin-bottom:.75rem;
}
.espresso-venue-dv h4 a{ color:var(--brand-secondary); }
.espresso-venue-dv p{
  color:color-mix(in srgb, var(--brand-text) 80%, var(--brand-bg));
}
.espresso-venue-dv a{ color:var(--brand-secondary); }
.espresso-venue-dv .dashicons{ display:none !important; }
/* Only the Address label originally had the location-alt icon; scope to
   it specifically so the pin doesn't appear on Venue:/Phone:/Website: too. */
.espresso-venue-dv strong:has(.dashicons-location-alt)::before{
  content:"\1F4CD"; margin-right:.4rem;
}

/* Map: frame as a contained card, capped to the column width.
   NOTE: Google Maps sets explicit pixel width/height via inline style at
   load time, then paints its tiles at that size. This override (with
   !important, which DOES beat a plain inline style) makes the wrapper
   responsive, but the map tiles were rendered for the OLD fixed size and
   may not perfectly re-fill the new box without a JS resize trigger —
   that needs a small script from Scott (google.maps.event.trigger(map,
   'resize')) if it looks stretched/off after this. Also: the map's own
   light-grey tile colour can't be recolored from CSS — that needs a
   custom map style passed at the JS init level, not a skin change. */
.ee-gmap-wrapper{
  margin-top:1.5rem;
  border-radius:16px;
  overflow:hidden;
  border:1px solid color-mix(in srgb, var(--brand-text) 12%, transparent);
}
.ee-gmap{
  width:100% !important;
  max-width:100% !important;
}
/* ============================================================
   Registration Checkout (Event Espresso's auto-generated system
   page). Root cause of the washed-out look: this page is wrapped in
   .section--off-white / .container--narrow — LEGACY classes that
   predate the dark-mode token system. Every other legacy color
   (--color-cream, --color-navy, etc.) was re-pointed to follow dark
   mode in brand.php; --color-off-white was the one left out, so the
   page rendered with a near-white background while text colors
   (already correctly remapped) assumed a dark one — white-on-white.

   Fixing the ONE token below resolves the background everywhere
   .section--off-white is used site-wide. Everything after that is
   styling the Event Espresso checkout markup itself, which (like
   the ticket page) isn't covered by the new block system at all.
   ============================================================ */

:root{
  --color-off-white: var(--brand-surface-elevated);
}

/* EE's own "dark grey text" utility class was written for a LIGHT
   page. Now that the section background is dark, that same dark-grey
   would become low-contrast in the other direction — override it to
   a light muted tone instead. */
.drk-grey-text{
  color:color-mix(in srgb, var(--brand-text) 60%, var(--brand-bg)) !important;
}

/* ---- Steps indicator ---- */
#spco-steps-display-dv{
  display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap;
  margin:1.5rem 0 2rem;
}
.spco-steps-big-hdr{
  font-family:'Manrope',sans-serif; font-weight:700; font-size:1rem;
  text-transform:uppercase; letter-spacing:.04em;
  color:color-mix(in srgb, var(--brand-text) 60%, var(--brand-bg));
  margin:0 0 .5rem;
}
.spco-steps-display-hdr{ display:flex; align-items:baseline; gap:.4rem; margin:0; }
.spco-step-big-nmbr{
  font-family:'Chivo',sans-serif; font-weight:900; font-size:1.5rem;
}
.spco-step-name{ font-family:'Manrope',sans-serif; font-weight:600; font-size:1.05rem; }
.spco-step-arrow-dv{ color:color-mix(in srgb, var(--brand-text) 35%, transparent); }
.spco-step-display-dv.active-step .spco-step-big-nmbr,
.spco-step-display-dv.active-step .spco-step-name{ color:var(--brand-secondary); }
.spco-step-display-dv.inactive-step .spco-step-big-nmbr,
.spco-step-display-dv.inactive-step .spco-step-name{
  color:color-mix(in srgb, var(--brand-text) 40%, var(--brand-bg));
}

/* ---- Ticket summary table ---- */
.spco-ticket-info-dv{ margin:2rem 0; }
.spco-ticket-details{
  width:100%; border-collapse:collapse;
  background:var(--brand-surface-elevated);
  border:1px solid color-mix(in srgb, var(--brand-text) 8%, transparent);
  border-radius:16px;
  overflow:hidden;
}
.spco-ticket-details thead th{
  text-align:left;
  font-family:'Manrope',sans-serif; font-weight:700; font-size:.8rem;
  letter-spacing:.04em; text-transform:uppercase;
  color:color-mix(in srgb, var(--brand-text) 65%, var(--brand-bg));
  padding:1rem 1.25rem .75rem;
  border-bottom:1px solid color-mix(in srgb, var(--brand-text) 12%, transparent);
}
.spco-ticket-details thead th.jst-rght{ text-align:right; }
.spco-ticket-details tbody td{
  padding:1.1rem 1.25rem;
  color:var(--brand-text);
  vertical-align:top;
}
.spco-ticket-details .jst-rght{ text-align:right; }
/* EE's own table CSS was crowding the rightmost (TOTAL) column right up
   against the card edge -- give that column extra breathing room and
   !important it, since EE's plugin stylesheet loads its own padding on
   these exact cells. */
.spco-ticket-details thead th:last-child,
.spco-ticket-details tbody td:last-child{
  padding-right:1.75rem !important;
}
.ee-ticket-details-name{ font-family:'Chivo',sans-serif; font-weight:700; }
.line-item-desc-spn{
  display:block; margin-top:.4rem;
  font-family:'Manrope',sans-serif; font-weight:400; font-size:.85rem;
  color:color-mix(in srgb, var(--brand-text) 55%, var(--brand-bg));
}
.line-item-desc-spn p{ margin:0; display:inline; }
/* EE prints a literal ": " text node before the description's <p> --
   not something typed into any admin field, so it can't be deleted at
   the source. The description text sits inside a nested span with its
   OWN explicit inline font-size, and inline styles always win over an
   inherited one -- so zeroing the wrapper's font-size hides only that
   bare ": ", while the real description stays fully visible. */
.line-item-desc-spn.smaller-text{ font-size:0; }

/* ---- Attendee form ---- */
.big-event-title-hdr{
  font-family:'Chivo',sans-serif; font-weight:800;
  font-size:1.5rem; color:var(--brand-text); margin:2rem 0 1rem;
}
/* Neutralize the browser's default <fieldset>/<legend> box styling
   explicitly — don't assume the theme already resets it. */
.ee-reg-form-attendee-dv{
  border:none !important; padding:0 !important; margin:0 !important;
}
.spco-attendee-lgnd{
  font-family:'Manrope',sans-serif; font-weight:600; font-size:1rem;
  color:color-mix(in srgb, var(--brand-text) 75%, var(--brand-bg));
  padding:0 !important; margin:0 0 1.25rem; border:none !important;
  width:100%; float:none;
}
.ee-reg-form-qstn-grp-title.section-title{
  font-family:'Chivo',sans-serif; font-weight:800; font-size:1.15rem;
  color:var(--brand-text); margin:0 0 1.25rem;
}
.ee-reg-qstn-input-dv{ margin-bottom:1.25rem; }
.ee-reg-qstn-input-dv label{
  display:block; margin-bottom:.4rem;
  font-family:'Manrope',sans-serif; font-weight:600; font-size:.9rem;
  color:color-mix(in srgb, var(--brand-text) 80%, var(--brand-bg));
}
.ee-asterisk{ color:#ff6b6b; margin-left:.2rem; }
.ee-reg-qstn-input-dv input[type=text],
.ee-reg-qstn-input-dv input[type=email]{
  width:100%;
  background:var(--brand-bg) !important;
  color:var(--brand-text) !important;
  border:1.5px solid color-mix(in srgb, var(--brand-text) 30%, transparent) !important;
  border-radius:10px !important;
  padding:.85rem 1.1rem !important;
  font-family:'Manrope',sans-serif !important;
  font-size:1rem !important;
}
.ee-reg-qstn-input-dv input:focus{
  border-color:var(--brand-primary) !important;
  outline:none !important;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--brand-primary) 25%, transparent) !important;
}
#spco-display-event-questions-lnk{
  color:var(--brand-secondary); cursor:pointer; text-decoration:underline;
}

/* ---- Primary CTA: Proceed to Payment Options ---- */
.spco-whats-next-buttons{ margin-top:2rem; text-align:right; }
.spco-next-step-btn.button--primary{
  display:inline-flex !important;
  align-items:center !important; justify-content:center !important;
  width:auto !important;
  background-color:var(--brand-primary) !important;
  color:#fff !important;
  border:none !important;
  border-radius:999px !important;
  font-family:'Manrope',sans-serif !important;
  font-weight:600 !important;
  font-size:1.05rem !important;
  padding:1rem 2.6rem !important;
  cursor:pointer !important;
  transition:transform .18s ease, background-color .18s ease !important;
}
.spco-next-step-btn.button--primary:hover{
  transform:translateY(-2px);
  background-color:color-mix(in srgb, var(--brand-primary) 88%, #fff) !important;
}
/* This button is rendered disabled (HTML disabled attribute + EE's own
   .disabled/.spco-disabled-submit-btn/.ee-button-disabled classes) whenever
   it isn't actually the live next step -- e.g. once Stripe's own "Pay Now"
   becomes the real submit action. Our rule above forces full active
   styling with !important regardless of state, which is exactly why a
   non-functional button was rendering as a vibrant, clickable-looking
   purple pill instead of EE's intended greyed-out look. Simplest, most
   robust fix: hide it outright whenever it's actually disabled. */
.spco-next-step-btn:disabled,
.spco-next-step-btn.disabled{
  display:none !important;
}

/* Stripe's "Pay Now" button (#stripe-card-button) ships with zero styling
   of its own -- default browser button. Match it to the same pill
   language as the step buttons above so it reads as part of the same
   design system, since it's now the actual functional submit action. */
#stripe-card-button{
  display:inline-flex !important;
  align-items:center !important; justify-content:center !important;
  width:auto !important;
  background-color:var(--brand-primary) !important;
  color:#fff !important;
  border:none !important;
  border-radius:999px !important;
  font-family:'Manrope',sans-serif !important;
  font-weight:600 !important;
  font-size:1.05rem !important;
  padding:1rem 2.6rem !important;
  margin-top:1.25rem !important;
  cursor:pointer !important;
  transition:transform .18s ease, background-color .18s ease !important;
}
#stripe-card-button:hover{
  transform:translateY(-2px);
  background-color:color-mix(in srgb, var(--brand-primary) 88%, #fff) !important;
}
/* ============================================================
   Registration Checkout (Event Espresso's auto-generated system
   page). Root cause of the washed-out look: this page is wrapped in
   .section--off-white / .container--narrow — LEGACY classes that
   predate the dark-mode token system. Every other legacy color
   (--color-cream, --color-navy, etc.) was re-pointed to follow dark
   mode in brand.php; --color-off-white was the one left out, so the
   page rendered with a near-white background while text colors
   (already correctly remapped) assumed a dark one — white-on-white.

   Fixing the ONE token below resolves the background everywhere
   .section--off-white is used site-wide. Everything after that is
   styling the Event Espresso checkout markup itself, which (like
   the ticket page) isn't covered by the new block system at all.
   ============================================================ */

:root{
  --color-off-white: var(--brand-surface-elevated);
}

/* EE's own "dark grey text" utility class was written for a LIGHT
   page. Now that the section background is dark, that same dark-grey
   would become low-contrast in the other direction — override it to
   a light muted tone instead. */
.drk-grey-text{
  color:color-mix(in srgb, var(--brand-text) 60%, var(--brand-bg)) !important;
}

/* ---- Steps indicator ---- */
#spco-steps-display-dv{
  display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap;
  margin:1.5rem 0 2rem;
}
.spco-steps-big-hdr{
  font-family:'Manrope',sans-serif; font-weight:700; font-size:1rem;
  text-transform:uppercase; letter-spacing:.04em;
  color:color-mix(in srgb, var(--brand-text) 60%, var(--brand-bg));
  margin:0 0 .5rem;
}
.spco-steps-display-hdr{ display:flex; align-items:baseline; gap:.4rem; margin:0; }
.spco-step-big-nmbr{
  font-family:'Chivo',sans-serif; font-weight:900; font-size:1.5rem;
}
.spco-step-name{ font-family:'Manrope',sans-serif; font-weight:600; font-size:1.05rem; }
.spco-step-arrow-dv{ color:color-mix(in srgb, var(--brand-text) 35%, transparent); }
.spco-step-display-dv.active-step .spco-step-big-nmbr,
.spco-step-display-dv.active-step .spco-step-name{ color:var(--brand-secondary); }
.spco-step-display-dv.inactive-step .spco-step-big-nmbr,
.spco-step-display-dv.inactive-step .spco-step-name{
  color:color-mix(in srgb, var(--brand-text) 40%, var(--brand-bg));
}

/* ---- Ticket summary table ---- */
.spco-ticket-info-dv{ margin:2rem 0; }
.spco-ticket-details{
  width:100%; border-collapse:collapse;
  background:var(--brand-surface-elevated);
  border:1px solid color-mix(in srgb, var(--brand-text) 8%, transparent);
  border-radius:16px;
  overflow:hidden;
}
.spco-ticket-details thead th{
  text-align:left;
  font-family:'Manrope',sans-serif; font-weight:700; font-size:.8rem;
  letter-spacing:.04em; text-transform:uppercase;
  color:color-mix(in srgb, var(--brand-text) 65%, var(--brand-bg));
  padding:1rem 1.25rem .75rem;
  border-bottom:1px solid color-mix(in srgb, var(--brand-text) 12%, transparent);
}
.spco-ticket-details thead th.jst-rght{ text-align:right; }
.spco-ticket-details tbody td{
  padding:1.1rem 1.25rem;
  color:var(--brand-text);
  vertical-align:top;
}
.spco-ticket-details .jst-rght{ text-align:right; }
/* EE's own table CSS was crowding the rightmost (TOTAL) column right up
   against the card edge -- give that column extra breathing room and
   !important it, since EE's plugin stylesheet loads its own padding on
   these exact cells. */
.spco-ticket-details thead th:last-child,
.spco-ticket-details tbody td:last-child{
  padding-right:1.75rem !important;
}
.ee-ticket-details-name{ font-family:'Chivo',sans-serif; font-weight:700; }
.line-item-desc-spn{
  display:block; margin-top:.4rem;
  font-family:'Manrope',sans-serif; font-weight:400; font-size:.85rem;
  color:color-mix(in srgb, var(--brand-text) 55%, var(--brand-bg));
}
.line-item-desc-spn p{ margin:0; display:inline; }
/* EE prints a literal ": " text node before the description's <p> --
   not something typed into any admin field, so it can't be deleted at
   the source. The description text sits inside a nested span with its
   OWN explicit inline font-size, and inline styles always win over an
   inherited one -- so zeroing the wrapper's font-size hides only that
   bare ": ", while the real description stays fully visible. */
.line-item-desc-spn.smaller-text{ font-size:0; }

/* ---- Attendee form ---- */
.big-event-title-hdr{
  font-family:'Chivo',sans-serif; font-weight:800;
  font-size:1.5rem; color:var(--brand-text); margin:2rem 0 1rem;
}
/* Neutralize the browser's default <fieldset>/<legend> box styling
   explicitly — don't assume the theme already resets it. */
.ee-reg-form-attendee-dv{
  border:none !important; padding:0 !important; margin:0 !important;
}
.spco-attendee-lgnd{
  font-family:'Manrope',sans-serif; font-weight:600; font-size:1rem;
  color:color-mix(in srgb, var(--brand-text) 75%, var(--brand-bg));
  padding:0 !important; margin:0 0 1.25rem; border:none !important;
  width:100%; float:none;
}
.ee-reg-form-qstn-grp-title.section-title{
  font-family:'Chivo',sans-serif; font-weight:800; font-size:1.15rem;
  color:var(--brand-text); margin:0 0 1.25rem;
}
.ee-reg-qstn-input-dv{ margin-bottom:1.25rem; }
.ee-reg-qstn-input-dv label{
  display:block; margin-bottom:.4rem;
  font-family:'Manrope',sans-serif; font-weight:600; font-size:.9rem;
  color:color-mix(in srgb, var(--brand-text) 80%, var(--brand-bg));
}
.ee-asterisk{ color:#ff6b6b; margin-left:.2rem; }
.ee-reg-qstn-input-dv input[type=text],
.ee-reg-qstn-input-dv input[type=email]{
  width:100%;
  background:var(--brand-bg) !important;
  color:var(--brand-text) !important;
  border:1.5px solid color-mix(in srgb, var(--brand-text) 30%, transparent) !important;
  border-radius:10px !important;
  padding:.85rem 1.1rem !important;
  font-family:'Manrope',sans-serif !important;
  font-size:1rem !important;
}
.ee-reg-qstn-input-dv input:focus{
  border-color:var(--brand-primary) !important;
  outline:none !important;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--brand-primary) 25%, transparent) !important;
}
#spco-display-event-questions-lnk{
  color:var(--brand-secondary); cursor:pointer; text-decoration:underline;
}

/* ---- Primary CTA: Proceed to Payment Options ---- */
.spco-whats-next-buttons{ margin-top:2rem; text-align:right; }
.spco-next-step-btn.button--primary{
  display:inline-flex !important;
  align-items:center !important; justify-content:center !important;
  width:auto !important;
  background-color:var(--brand-primary) !important;
  color:#fff !important;
  border:none !important;
  border-radius:999px !important;
  font-family:'Manrope',sans-serif !important;
  font-weight:600 !important;
  font-size:1.05rem !important;
  padding:1rem 2.6rem !important;
  cursor:pointer !important;
  transition:transform .18s ease, background-color .18s ease !important;
}
.spco-next-step-btn.button--primary:hover{
  transform:translateY(-2px);
  background-color:color-mix(in srgb, var(--brand-primary) 88%, #fff) !important;
}
/* This button is rendered disabled (HTML disabled attribute + EE's own
   .disabled/.spco-disabled-submit-btn/.ee-button-disabled classes) whenever
   it isn't actually the live next step -- e.g. once Stripe's own "Pay Now"
   becomes the real submit action. Our rule above forces full active
   styling with !important regardless of state, which is exactly why a
   non-functional button was rendering as a vibrant, clickable-looking
   purple pill instead of EE's intended greyed-out look. Simplest, most
   robust fix: hide it outright whenever it's actually disabled. */
.spco-next-step-btn:disabled,
.spco-next-step-btn.disabled{
  display:none !important;
}

/* Stripe's "Pay Now" button (#stripe-card-button) ships with zero styling
   of its own -- default browser button. Match it to the same pill
   language as the step buttons above so it reads as part of the same
   design system, since it's now the actual functional submit action. */
#stripe-card-button{
  display:inline-flex !important;
  align-items:center !important; justify-content:center !important;
  width:auto !important;
  background-color:var(--brand-primary) !important;
  color:#fff !important;
  border:none !important;
  border-radius:999px !important;
  font-family:'Manrope',sans-serif !important;
  font-weight:600 !important;
  font-size:1.05rem !important;
  padding:1rem 2.6rem !important;
  margin-top:1.25rem !important;
  cursor:pointer !important;
  transition:transform .18s ease, background-color .18s ease !important;
}
#stripe-card-button:hover{
  transform:translateY(-2px);
  background-color:color-mix(in srgb, var(--brand-primary) 88%, #fff) !important;
}
/* ============================================================
   Events listing page. h1 + .event-content boxed as one seamless
   card (top half / bottom half), held together by relationship
   so it works for any number of events without a markup change.
   !important added because the border-radius/margin seam wasn't
   winning the cascade — see note in chat if a hairline gap remains.
   ============================================================ */

.container > h1:has(+ .event-content){
  background:var(--brand-surface-elevated) !important;
  border:1px solid color-mix(in srgb, var(--brand-text) 8%, transparent) !important;
  border-bottom:none !important;
  border-radius:20px 20px 0 0 !important;
  padding:2rem 2rem 1rem !important;
  margin:0 !important;
}
.container > h1:has(+ .event-content) + .event-content{
  display:flex !important;
  flex-direction:column !important;
  background:var(--brand-surface-elevated) !important;
  border:1px solid color-mix(in srgb, var(--brand-text) 8%, transparent) !important;
  border-top:none !important;
  border-radius:0 0 20px 20px !important;
  padding:0 2rem 2rem !important;
  margin:0 0 2.5rem !important;
}

/* Reorder: date/time/venue/description first, CTA dropped to the bottom. */
.event-content > .event-datetimes{ order:1; }
.event-content > form{
  order:2;
  margin:1.5rem 0 0 !important;   /* space above only — it's now the last element, parent's bottom padding handles the rest */
}
.event-content .clear{ display:none; }

/* Tidy the internal layout: title/CTA row, then date/venue block below. */
.event-content > form{
  display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap;
  margin:1.5rem 0 1.5rem;
}
.event-content .clear{ display:none; }

/* ============================================================
   ABOUT: BOARD LIST (people-grid, grid-2 layout)
   The board renders as a plain two-column list of name + role:
   no headshot, no card chrome. The section markup has no id/anchor
   and no group/term class, so this is scoped to the people-grid
   archetype + grid-2 layout. Convention: grid-2 people-grid = plain
   list (the staff people-grid uses grid-3 and keeps its cards).

   SCOTT: person names still link to /people/<slug>/, which has no
   single template yet. Neutralized below with pointer-events, but
   the <a> is still in the markup and still keyboard-focusable. Real
   fix is in _people-card.php (no link) or a single-people.php.
   ============================================================ */
.boom12-block--people-grid.boom12-block--layout-grid-2 .boom12-people-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  column-gap:clamp(1.5rem, 4vw, 3rem);
  row-gap:0;
}
/* Strip the card: no background, border, radius, padding or fixed height.
   Thin divider above every row except the first (2 items per row here). */
.boom12-block--people-grid.boom12-block--layout-grid-2 .boom12-person{
  background:none; border:0; border-radius:0; height:auto;
  padding:.9rem 0;
  border-top:1px solid color-mix(in srgb, var(--brand-text) 12%, transparent);
}
.boom12-block--people-grid.boom12-block--layout-grid-2 .boom12-person:nth-child(-n+2){
  border-top:0;
}
/* Name + role only. */
.boom12-block--people-grid.boom12-block--layout-grid-2 .boom12-person__media,
.boom12-block--people-grid.boom12-block--layout-grid-2 .boom12-person__social,
.boom12-block--people-grid.boom12-block--layout-grid-2 .boom12-person__link{
  display:none;
}
/* Name keeps its Chivo 800 / 1.1rem from the card rules; only the card's
   side margins are dropped so it lines up with the divider. */
.boom12-block--people-grid.boom12-block--layout-grid-2 .boom12-person__name{
  margin:0 0 .2rem;
}
.boom12-block--people-grid.boom12-block--layout-grid-2 .boom12-person__name a,
.boom12-block--people-grid.boom12-block--layout-grid-2 .boom12-person__name a:hover,
.boom12-block--people-grid.boom12-block--layout-grid-2 .boom12-person__name a:focus{
  color:var(--brand-text); text-decoration:none;
  cursor:default; pointer-events:none;
}
/* Role keeps its muted colour and size from the card rules. */
.boom12-block--people-grid.boom12-block--layout-grid-2 .boom12-person__role{
  margin:0;
}
/* One column on small screens: only the very first row loses its divider. */
@media (max-width:640px){
  .boom12-block--people-grid.boom12-block--layout-grid-2 .boom12-people-grid{
    grid-template-columns:1fr;
  }
  .boom12-block--people-grid.boom12-block--layout-grid-2 .boom12-person:nth-child(2){
    border-top:1px solid color-mix(in srgb, var(--brand-text) 12%, transparent);
  }
}

/* ============================================================
   STATEMENT (statement block, first used on Join Us)
   Had no styling anywhere: base h2 + a paragraph running the full
   1280px container. Centered, with the same title type and muted
   body colour as the embed-section blocks it sits between.
   ============================================================ */
.boom12-block--statement .boom12-statement{
  text-align:center; max-width:48rem; margin-inline:auto;
}
.boom12-statement__title{
  font-family:'Chivo',sans-serif; font-weight:900; letter-spacing:-0.02em;
  line-height:1.05; color:var(--brand-text);
  font-size:clamp(2rem,4vw,3rem); margin:0 0 1rem;
}
.boom12-statement__body{
  color:color-mix(in srgb, var(--brand-text) 80%, var(--brand-bg));
  font-size:1.0625rem; line-height:1.7;
}
.boom12-statement__body p{ margin:0 0 1rem; }
.boom12-statement__body p:last-child{ margin-bottom:0; }

/* ============================================================
   JOIN US FORM (Gravity Form 3): show the Voice Part question
   Every .gfield_label is visually hidden site-wide (placeholders carry
   the label), but radio buttons have no placeholder, so the choices
   would show with no question. Undo the hide for radio fields on
   form 3 only. Other fields keep their placeholders, and the
   Newsletter checkbox's choice text already says what it is.
   ============================================================ */
#gform_wrapper_3 .gfield--type-radio .gfield_label{
  position:static !important; width:auto; height:auto; overflow:visible;
  clip:auto; white-space:normal;
  display:block; margin:0 0 .6rem;
  font-family:'Manrope',sans-serif; font-weight:600; font-size:1rem;
  color:var(--brand-text);
}

/* ============================================================
   JOIN US FORM (Gravity Form 3): radio + checkbox choice text
   Choice labels (.gform-field-label--type-inline) aren't hidden:
   GF colours them with --gf-ctrl-label-color-secondary, which its
   per-form inline <style> sets to #112337 (navy), i.e. invisible
   on --brand-bg. Set the colour explicitly (the inline <style>
   outranks a variable override) and lay each choice out as
   input + text in a row. Scoped to form 3; forms 1 and 2 have no
   radio/checkbox fields.
   ============================================================ */
#gform_wrapper_3 .gfield--type-radio .gchoice,
#gform_wrapper_3 .gfield--type-checkbox .gchoice{
  display:flex; align-items:flex-start; gap:.6rem;
  margin:0 0 .5rem;
}
#gform_wrapper_3 .gfield--type-radio .gfield-choice-input,
#gform_wrapper_3 .gfield--type-checkbox .gfield-choice-input{
  flex:none; margin:.2rem 0 0;
}
#gform_wrapper_3 .gfield--type-radio .gform-field-label--type-inline,
#gform_wrapper_3 .gfield--type-checkbox .gform-field-label--type-inline{
  color:var(--brand-text);
  font-family:'Manrope',sans-serif; font-weight:400; font-size:1rem; line-height:1.5;
  margin:0;
}

/* ============================================================
   EMBED SECTION, stacked layout: paragraphs as normal blocks
   The shared rule (".boom12-embed-section__body p ~ p", section 3)
   makes every paragraph after the first inline-block, which puts
   all link paragraphs on one centred row. In stacked layouts the
   body is plain prose (Join Us), so restore normal block
   paragraphs with even spacing. Home Events (full-width) and
   Contact (split-right) don't use the stacked layout.
   ============================================================ */
.boom12-block--embed-section.boom12-block--layout-stacked .boom12-embed-section__body p{
  display:block; margin:0 0 1rem;
}
.boom12-block--embed-section.boom12-block--layout-stacked .boom12-embed-section__body p:last-child{
  margin-bottom:0;
}

/* ============================================================
   FEATURE GRID, grid-2 layout: centred heading (Join Us "What to
   Expect"), to match the centred sections around it. Cards keep
   left-aligned text. About's offerings grid is grid-4 and stays
   left-aligned.
   ============================================================ */
.boom12-block--feature-grid.boom12-block--layout-grid-2 .boom12-grid-block__title{
  text-align:center;
}
.boom12-block--feature-grid.boom12-block--layout-grid-2 .boom12-grid-block__intro{
  text-align:center; margin-inline:auto;
}

/* ============================================================
   HEADER: secondary "Join Us" CTA + hamburger up to 960px
   header.php prints Join Us (.main-nav__cta--secondary) before
   Get Tickets, only while the Join Us page is published. It keeps
   .main-nav__cta, so it inherits the pill shape, size and font from
   the HEADER section and appears in the mobile panel automatically.

   Breakpoint: logo (~188px) + 4 links + 2 pills needs ~800px, so a
   768px tablet would overflow. The hamburger panel now applies up to
   960px (the base theme and the MOBILE MENU PANEL section stop at
   640px); the rules below repeat that panel for 641-960px.
   ============================================================ */
.main-nav__cta.main-nav__cta--secondary{
  background:color-mix(in srgb, var(--brand-bg) 55%, transparent);
  color:var(--brand-text);
  border:1px solid color-mix(in srgb, var(--brand-text) 28%, transparent);
  padding:calc(.7rem - 1px) calc(1.4rem - 1px);   /* same outer size as Get Tickets despite the border */
}
.main-nav__cta.main-nav__cta--secondary:hover,
.main-nav__cta.main-nav__cta--secondary:focus-visible{
  background:color-mix(in srgb, var(--brand-text) 8%, transparent);
  border-color:color-mix(in srgb, var(--brand-text) 50%, transparent);
  color:var(--brand-text);
}

@media (max-width:960px){
  .site-header__actions{ display:flex; }
  .mobile-menu-toggle{ display:flex; }
  .mobile-menu-open .mobile-menu-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .mobile-menu-open .mobile-menu-toggle span:nth-child(2){ opacity:0; }
  .mobile-menu-open .mobile-menu-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  .main-nav__list{ display:none; }
  .main-nav__cta{ display:none; }

  .main-nav:has(.main-nav__list.is-open){
    position:absolute;
    top:100%; left:0; right:0;
    z-index:99;
    display:flex;
    flex-direction:column;
    background:var(--brand-bg);
    border-top:1px solid color-mix(in srgb, var(--brand-text) 10%, transparent);
    box-shadow:0 12px 24px rgba(0,0,0,.35);
    padding:1.5rem clamp(1.25rem,5vw,2rem) 2rem;
  }
  .main-nav:has(.main-nav__list.is-open) .main-nav__list{
    position:static; top:auto; left:auto; right:auto; z-index:auto;
    display:flex;
    flex-direction:column;
    background:none; border:none; box-shadow:none; padding:0;
  }
  .main-nav__list.is-open a{ color:var(--brand-text); }

  /* Both CTAs full-width in the panel, Join Us above Get Tickets. */
  .main-nav:has(.main-nav__list.is-open) .main-nav__cta{
    display:inline-flex;
    justify-content:center;
    margin:1.5rem 0 0;
  }
  .main-nav:has(.main-nav__list.is-open) .main-nav__cta + .main-nav__cta{
    margin-top:.75rem;
  }
}

/* ============================================================
   SUPPORT: overview grid (page-templates/template-support.php)
   Scoped with the template's body class. Centres the eyebrow,
   title and intro like Join Us "What to Expect", and shows card
   images as photos across the top of the card instead of the
   3rem icon treatment the shared FEATURE GRID rules give About's
   offerings.
   ============================================================ */
.page-template-template-support .boom12-block--feature-grid .boom12-grid-block__eyebrow,
.page-template-template-support .boom12-block--feature-grid .boom12-grid-block__title{
  text-align:center;
}
.page-template-template-support .boom12-block--feature-grid .boom12-grid-block__intro{
  text-align:center; margin-inline:auto;
}
/* Card photo: full card width at 3:2, bleeding to the card edges
   (cards have 1.75rem padding, a 1px border and a 16px radius). */
.page-template-template-support .boom12-block--feature-grid .boom12-grid__media{
  width:auto; height:auto; aspect-ratio:3/2;
  margin:-1.75rem -1.75rem 1.25rem;
  border-radius:15px 15px 0 0; overflow:hidden;
}
.page-template-template-support .boom12-block--feature-grid .boom12-grid__media img{
  width:100%; height:100%; object-fit:cover; object-position:center;
}

/* ============================================================
   STAFF GRID (staff-grid block, About "Our Staff")
   Cards reuse the .boom12-person card from PEOPLE CAROUSEL (surface,
   border, radius, square cover-cropped headshot, name, muted role).
   Columns: 3 above 960px, 2 at 641-960px, 1 at 640px and below (the
   same breakpoints as the header menu). The section hides itself when
   no person is published with public consent, so it never leaves an
   empty padded band. Bios open in a native <dialog>.
   ============================================================ */
.boom12-block--staff-grid:not(:has(.boom12-staff-block, .boom12-block__missing)){
  display:none;
}
.boom12-staff-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:clamp(1rem, 2.5vw, 1.75rem);
}
@media (max-width:960px){
  .boom12-staff-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width:640px){
  .boom12-staff-grid{ grid-template-columns:1fr; }
}
/* Button sits at the bottom of the card so rows line up. */
.boom12-staff-card{ display:flex; flex-direction:column; }
.boom12-staff-card .boom12-person__role{ margin-bottom:1rem; }
.boom12-staff-card__bio-btn{
  align-self:flex-start;
  margin:auto .4rem .4rem;
  border:0; cursor:pointer;
  font-size:.9rem; padding:.6rem 1.25rem;
}

/* Bio dialog */
.boom12-staff-dialog{
  width:min(42rem, calc(100% - 2rem));
  max-height:calc(100dvh - 2rem);
  padding:0; overflow:auto;
  background:var(--brand-surface-elevated);
  color:var(--brand-text);
  border:1px solid color-mix(in srgb, var(--brand-text) 12%, transparent);
  border-radius:20px;
}
.boom12-staff-dialog::backdrop{
  background:color-mix(in srgb, var(--brand-bg) 78%, transparent);
}
.boom12-staff-dialog__inner{
  position:relative;
  display:grid;
  grid-template-columns:7.5rem 1fr;
  align-items:center;
  gap:1.25rem 1.5rem;
  padding:clamp(1.5rem, 4vw, 2.5rem);
}
.boom12-staff-dialog__media{ aspect-ratio:1/1; border-radius:12px; overflow:hidden; }
.boom12-staff-dialog__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.boom12-staff-dialog__head{ padding-right:2.5rem; }   /* clear the close button */
.boom12-staff-dialog__name{
  font-family:'Chivo',sans-serif; font-weight:800; letter-spacing:-0.01em;
  font-size:clamp(1.4rem, 3vw, 1.75rem); line-height:1.15;
  color:var(--brand-text); margin:0 0 .3rem;
}
.boom12-staff-dialog__role{
  color:color-mix(in srgb, var(--brand-text) 65%, var(--brand-bg));
  margin:0;
}
.boom12-staff-dialog__bio{
  grid-column:1 / -1;
  color:color-mix(in srgb, var(--brand-text) 85%, var(--brand-bg));
  font-size:1rem; line-height:1.7;
}
.boom12-staff-dialog__bio p{ margin:0 0 1rem; }
.boom12-staff-dialog__bio p:last-child{ margin-bottom:0; }
.boom12-staff-dialog__close-form{ position:absolute; top:.85rem; right:.85rem; margin:0; }
.boom12-staff-dialog__close{
  width:2.5rem; height:2.5rem; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; color:var(--brand-text); cursor:pointer;
  border:1px solid color-mix(in srgb, var(--brand-text) 25%, transparent);
  font-size:1.4rem; line-height:1;
}
.boom12-staff-dialog__close:hover,
.boom12-staff-dialog__close:focus-visible{
  background:color-mix(in srgb, var(--brand-text) 10%, transparent);
  border-color:color-mix(in srgb, var(--brand-text) 50%, transparent);
}
@media (max-width:640px){
  .boom12-staff-dialog__inner{ grid-template-columns:5rem 1fr; gap:1rem; }
}

/* ============================================================
   SMOOTH SCROLL to in-page anchors (Get Tickets -> /#tickets)
   Off for visitors who ask for reduced motion. Any block section
   with an anchor id (#tickets on Home; #donate, #volunteer,
   #sponsor on Support) stops below the sticky header, which is
   about 133px tall (96px logo + padding), so it can't cover the
   section title.
   ============================================================ */
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
}
.boom12-block[id]{ scroll-margin-top:8.5rem; }

/* ============================================================
   JOIN US FORM (3) + CONTACT FORM (1): accessibility pass
   Scoped to #gform_wrapper_1 and #gform_wrapper_3 via :is() (same
   specificity as the ID); the newsletter form (2) is unchanged.
   The 40rem card width is Join Us only. Brand tokens only.

   - Visible labels: undoes the site-wide sr-only label hide (the
     "Gravity Forms generic treatment" section) for form 3. The
     honeypot field stays hidden by GF.
   - Contrast on the elevated card (--brand-surface-elevated,
     #221F1F): --brand-primary is only 2.70:1 there, so focus rings
     and the checked state use --brand-secondary (7.21:1). Field
     borders use text 55% (5.49:1, was 2.58:1).
   - Focus ring: 2px --brand-secondary outline, 2px offset, on every
     input, radio, checkbox and the Send button.
   - Radios + checkbox: drawn here instead of GF's white controls
     with a blue (#204ce5) dot. Checked = filled dot / tick mark plus
     bold label text, so it never relies on colour alone.
   - Errors: GF paints them #c02b0a (2.80:1 on the card) and its
     stylesheet loads after this skin, so these rules use the form
     ID to win. Text is --brand-text with a --brand-secondary bar.
   - The ID selectors are needed: GF prints a per-form inline
     <style> and loads its own CSS after the skin.
   ============================================================ */

/* Card width: about 40rem, centred, only where form 3 is embedded (Join Us). */
.boom12-embed-section__embed:has(#gform_wrapper_3){
  max-width:40rem;
  margin-inline:auto;
}

/* Tighter rhythm between fields (GF default gap is 40px). */
:is(#gform_wrapper_1, #gform_wrapper_3) .gform_fields{ row-gap:1.25rem !important; }

/* Labels and legends visible above each field. */
:is(#gform_wrapper_1, #gform_wrapper_3) .gfield:not(.gform_validation_container) .gfield_label{
  position:static !important;
  width:auto; height:auto; overflow:visible;
  clip:auto; white-space:normal;
  display:block;
  margin:0 0 .35rem; padding:0;
  font-family:'Manrope',sans-serif; font-weight:500; font-size:.95rem; line-height:1.4;
  color:var(--brand-text);
}
/* Required asterisk readable on the card (GF red was 2.80:1). */
:is(#gform_wrapper_1, #gform_wrapper_3) .gfield_required{
  color:var(--brand-secondary);
  font-weight:400;
  margin-left:.25rem;
}

/* Field borders and placeholder text at readable contrast. */
:is(#gform_wrapper_1, #gform_wrapper_3) input:not([type=radio]):not([type=checkbox]):not([type=submit]),
:is(#gform_wrapper_1, #gform_wrapper_3) textarea{
  border-color:color-mix(in srgb, var(--brand-text) 55%, var(--brand-surface-elevated)) !important;
}
:is(#gform_wrapper_1, #gform_wrapper_3) textarea{ min-height:7rem !important; }
:is(#gform_wrapper_1, #gform_wrapper_3) input::placeholder,
:is(#gform_wrapper_1, #gform_wrapper_3) textarea::placeholder{
  color:color-mix(in srgb, var(--brand-text) 62%, var(--brand-surface-elevated)) !important;
}

/* Focus ring: inputs, choices, button. */
:is(#gform_wrapper_1, #gform_wrapper_3) input:not([type=radio]):not([type=checkbox]):focus,
:is(#gform_wrapper_1, #gform_wrapper_3) textarea:focus,
:is(#gform_wrapper_1, #gform_wrapper_3) .gfield-choice-input:focus-visible,
:is(#gform_wrapper_1, #gform_wrapper_3) .gform_button:focus-visible{
  outline:2px solid var(--brand-secondary) !important;
  outline-offset:2px !important;
  box-shadow:none !important;
}
:is(#gform_wrapper_1, #gform_wrapper_3) input:not([type=radio]):not([type=checkbox]):focus,
:is(#gform_wrapper_1, #gform_wrapper_3) textarea:focus{
  border-color:var(--brand-secondary) !important;
}

/* Radios + checkbox. */
:is(#gform_wrapper_1, #gform_wrapper_3) .gfield-choice-input{
  -webkit-appearance:none; appearance:none;
  position:relative;
  flex:none;
  width:1.25rem; height:1.25rem;
  margin:.15rem 0 0;
  background:transparent;
  border:2px solid color-mix(in srgb, var(--brand-text) 55%, var(--brand-surface-elevated));
  cursor:pointer;
}
:is(#gform_wrapper_1, #gform_wrapper_3) input[type=radio].gfield-choice-input{ border-radius:50%; }
:is(#gform_wrapper_1, #gform_wrapper_3) input[type=checkbox].gfield-choice-input{ border-radius:4px; }
:is(#gform_wrapper_1, #gform_wrapper_3) .gfield-choice-input::before{
  content:"" !important;
  position:absolute; inset:0; margin:auto;
  opacity:0;
  background:none;
  -webkit-mask:none; mask:none;
  font-size:0;
}
:is(#gform_wrapper_1, #gform_wrapper_3) .gfield-choice-input:checked{ border-color:var(--brand-secondary); }
/* Radio: filled dot. */
:is(#gform_wrapper_1, #gform_wrapper_3) input[type=radio].gfield-choice-input:checked::before{
  opacity:1;
  width:.6rem; height:.6rem; border-radius:50%;
  background:var(--brand-secondary);
}
/* Checkbox: solid box with a tick in the card colour. */
:is(#gform_wrapper_1, #gform_wrapper_3) input[type=checkbox].gfield-choice-input:checked{
  background:var(--brand-secondary);
}
:is(#gform_wrapper_1, #gform_wrapper_3) input[type=checkbox].gfield-choice-input:checked::before{
  opacity:1;
  width:.35rem; height:.65rem;
  border:solid var(--brand-surface-elevated);
  border-width:0 2.5px 2.5px 0;
  transform:translateY(-1px) rotate(45deg);
}
/* Non-colour cue on the chosen option. */
:is(#gform_wrapper_1, #gform_wrapper_3) .gchoice:has(.gfield-choice-input:checked) .gform-field-label--type-inline{
  font-weight:600;
}

/* Errors: inline message, invalid border, and the top banner. */
:is(#gform_wrapper_1, #gform_wrapper_3) .gfield_validation_message{
  color:var(--brand-text) !important;
  background:none !important;
  border:0 !important;
  border-left:3px solid var(--brand-secondary) !important;
  padding:.1rem 0 .1rem .6rem !important;
  margin:0 0 .4rem !important;
  font-size:.9rem;
}
:is(#gform_wrapper_1, #gform_wrapper_3) .gfield_error input:not([type=radio]):not([type=checkbox]),
:is(#gform_wrapper_1, #gform_wrapper_3) .gfield_error textarea{
  border-color:var(--brand-secondary) !important;
  border-width:2px !important;
}
:is(#gform_wrapper_1, #gform_wrapper_3) .gform_validation_errors{
  background:transparent !important;
  border:2px solid var(--brand-secondary) !important;
  border-radius:12px;
  box-shadow:none !important;
}
:is(#gform_wrapper_1, #gform_wrapper_3) .gform_validation_errors .gform_submission_error,
:is(#gform_wrapper_1, #gform_wrapper_3) .gform_validation_errors li,
:is(#gform_wrapper_1, #gform_wrapper_3) .gform_validation_errors a{
  color:var(--brand-text) !important;
}
:is(#gform_wrapper_1, #gform_wrapper_3) .gform_validation_errors .gform-icon{ color:var(--brand-secondary) !important; }

/* ============================================================
   HOME "UPCOMING EVENTS" PLACEHOLDER (temporary, #tickets as
   feature-text while no event is on sale). Shows the square
   poster whole: no crop, no stretch. Inert when #tickets is the
   events embed again.
   ============================================================ */
#tickets .boom12-feature__media{ max-width:32rem; width:100%; justify-self:center; }
#tickets .boom12-feature__image{ height:auto; min-height:0; aspect-ratio:1 / 1; object-fit:contain; }
#tickets .boom12-feature__body h3{
  font-family:'Chivo',sans-serif; font-weight:800; font-size:1.5rem;
  color:var(--brand-text); margin:0 0 .75rem;
}

/* ============================================================
   HEADER, desktop (>960px): grouped CTAs + centred menu
   Markup: .site-header__inner > .site-logo + nav.main-nav
   (ul.main-nav__list, Join Us, Get Tickets). The CTAs live in
   <nav> for the mobile panel, so this stays CSS-only and keeps
   the <nav> landmark intact (no display:contents).
   - 961px+: Join Us and Get Tickets sit together (0.75rem apart)
     at the right edge; the menu sits just left of them.
   - 1080px+: the menu is centred on the header itself. Logo
     (~188px) + pills (~240px) + menu (~300px) leave ~100px of
     clearance at 1080px, so it can't overlap; below that it falls
     back to menu-left-of-buttons.
   The mobile panel (max-width:960px) is untouched.
   ============================================================ */
@media (min-width:961px){
  .main-nav{ gap:.75rem; }
  .main-nav__list{ margin-right:clamp(1.5rem,3vw,2.5rem); }
}
@media (min-width:1080px){
  .site-header__inner{ position:relative; }
  .main-nav__list{
    position:absolute;
    left:50%; top:50%;
    transform:translate(-50%,-50%);
    margin-right:0;
  }
}

/* ============================================================
   TURNSTILE in Gravity Forms footers: quieter on the dark site
   Boom12 Connect prints the widget as
   div.cf-turnstile.boom12-turnstile-wrapper[data-theme=light]
   with inline style "margin:1em 0; min-height:65px; width:300px"
   (hence the !importants). CSS only; the plugin is untouched.
   - Dark: invert(.88) + hue-rotate(180deg) turns the light widget
     (#fafafa / #232323) into ~#222 with ~#c6c6c6 text; the hue
     rotation brings the green tick and orange logo back to their
     own hues. Applied to the wrapper, not the iframe: Turnstile
     can render its iframe inside a shadow root these selectors
     can't reach, and a filter on an ancestor still applies.
   - Softer: 85% opacity, full on hover / keyboard focus. Corners
     16px (the textarea radius; a full pill would clip the
     checkbox and logo). The widget's own 1px light border is
     drawn inside its iframe, so it is trimmed with a 1px clip.
   - Smaller: the widget is scaled to .85 from its top-left corner,
     and negative margins pull its layout box in to the scaled
     size (255 x 55px), so there's no leftover gap.
   - Never hidden: no display/visibility changes, no pointer-events
     changes, so it stays usable when Cloudflare asks for a click.
   ============================================================ */
.gform_wrapper .boom12-turnstile-wrapper{
  width:fit-content !important;      /* inline 300px -> the scaled widget */
  min-height:0 !important;           /* inline 65px */
  border-radius:16px;
  overflow:hidden;
  filter:invert(.88) hue-rotate(180deg);
  opacity:.85;
  transition:opacity .18s ease;
}
.gform_wrapper .boom12-turnstile-wrapper:hover,
.gform_wrapper .boom12-turnstile-wrapper:focus-within{ opacity:1; }
.gform_wrapper .boom12-turnstile-wrapper > *{
  transform:scale(.85);
  transform-origin:top left;
  margin:0 -45px -10px 0 !important;   /* 300x65 -> 255x55 layout box */
  clip-path:inset(1px round 19px);     /* trims the light border; 19 x .85 = 16px */
}

/* Contact (1) and Join Us (3): widget on its own row above Send,
   left-aligned (the generic footer rule puts them side by side). */
#gform_wrapper_1 .gform_footer,
#gform_wrapper_3 .gform_footer{
  flex-direction:column !important;
  align-items:flex-start !important;
  gap:.75rem !important;
}
#gform_wrapper_1 .boom12-turnstile-wrapper,
#gform_wrapper_3 .boom12-turnstile-wrapper{ margin:.25rem 0 0 !important; }

/* ============================================================
   CONTACT (page 18 + Gravity Form 1)
   - Name sub-labels ("First name" / "Last name") are visible on
     forms 1 and 3; GF colours them navy via its inline <style>,
     so set brand colours here. Labels are .95rem / 500.
   - Contact lines get small line icons (Feather mail + map-pin,
     the theme's icon style) as CSS masks on an empty ::before:
     decorative, not read by screen readers, coloured with
     --brand-secondary (8.62:1 on --brand-bg). The body runs
     through wp_kses_post, which strips inline <svg>.
   ============================================================ */
:is(#gform_wrapper_1, #gform_wrapper_3) .gform-field-label--type-sub{
  display:block; margin:0 0 .35rem;
  font-family:'Manrope',sans-serif; font-weight:500; font-size:.95rem; line-height:1.4;
  color:var(--brand-text);
}
/* Name (form 1): the "Name" legend stays for screen readers but is
   hidden visually; the asterisk moves onto the First name / Last name
   sub-labels. GF never puts the required marker in sub-labels, so it
   is CSS content with empty alt text ("/ ''"): seen, not read aloud
   (aria-required on both inputs already announces it). Browsers
   without the alt-text syntax fall back to the first declaration. */
#gform_wrapper_1 #field_1_1 > .gfield_label{
  position:absolute !important;
  width:1px !important; height:1px !important; overflow:hidden !important;
  clip:rect(0 0 0 0) !important; clip-path:inset(50%) !important;
  white-space:nowrap !important; margin:0 !important; padding:0 !important;
}
#gform_wrapper_1 #field_1_1.gfield_contains_required .gform-field-label--type-sub::after{
  content:" *";
  content:" *" / "";
  color:var(--brand-secondary);
  font-weight:400;
}
.hgmc-contact-line{
  display:flex; align-items:flex-start; gap:.6rem;
  margin:0 0 .5rem;
}
.hgmc-contact-line:last-child{ margin-bottom:0; }
.hgmc-contact-line::before{
  content:""; flex:none;
  width:1.15em; height:1.15em; margin-top:.2em;
  background:var(--brand-secondary);
  -webkit-mask:var(--hgmc-icon) center / contain no-repeat;
          mask:var(--hgmc-icon) center / contain no-repeat;
}
.hgmc-contact-line--email{
  --hgmc-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E");
}
.hgmc-contact-line--mail{
  --hgmc-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13S3 17 3 10a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}