/*
  event-public.css — Public-facing event landing page
  =====================================================
  This stylesheet is completely independent of site.css.
  It is designed for a light-only, no-chrome, marketing-
  style page whose only purpose is to attract attendees
  and volunteers.

  ── MULTI-ORGANIZATION THEMING ──────────────────────────────
  To brand this page for a specific organization, override
  the variables below — either by injecting a <style> block
  from the server, or by setting them inline on :root.

  Minimum required overrides:
    --org-accent           primary brand hex colour
    --org-accent-light     very light tint of accent (for bg chips)
    --org-accent-mid       semi-transparent accent (for fills/overlays)
    --org-accent-contrast  text colour readable ON the accent bg
    --org-accent-2         secondary gradient stop; can equal --org-accent

  Optional:
    --org-name             organization name string (unused in CSS,
                           but documents the intended pairing)

  Example overrides for a red-branded org:
    :root {
      --org-accent:          #B91C1C;
      --org-accent-light:    #FEF2F2;
      --org-accent-mid:      rgba(185, 28, 28, 0.12);
      --org-accent-contrast: #FFFFFF;
      --org-accent-2:        #DC2626;
    }
  ──────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,600&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap');

/* ── DEFAULT PALETTE (Forest Green org) ──────────────────── */
:root {
  /* Commenting out the following values because they're set by the
     back-end directly in the HTML instead.
  --org-accent:          #1B6E4F;
  --org-accent-light:    #EBF7F2;
  --org-accent-mid:      rgba(27, 110, 79, 0.13);
  --org-accent-contrast: #FFFFFF;
  --org-accent-2:        #28A372;
   */

  /* Page palette — do not override these unless necessary */
  --page-bg:      #FFFFFF;
  --section-bg:   #F7F8FB;
  --border:       #E4E8F0;
  --border-strong:#CDD3E0;
  --text:         #111318;
  --text-2:       #44495E;
  --text-3:       #8A91A8;
  --shadow-sm:    0 1px 4px rgba(17,19,24,0.06), 0 2px 8px rgba(17,19,24,0.04);
  --shadow-md:    0 4px 16px rgba(17,19,24,0.08), 0 8px 24px rgba(17,19,24,0.05);
  --shadow-lg:    0 12px 40px rgba(17,19,24,0.11), 0 4px 16px rgba(17,19,24,0.06);
  --radius-sm:    10px;
  --radius-md:    16px;
  --radius-lg:    22px;
  --radius-xl:    28px;
  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
}


/* ── RESET ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--page-bg);
  color: var(--text);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a   { color: inherit; text-decoration: none; }
button { font-family: var(--font-body); cursor: pointer; border: none; }
::-webkit-scrollbar       { width: 6px; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }


/* ═══════════════════════════════════════════════════════════
   PAGE ENTER ANIMATIONS
═══════════════════════════════════════════════════════════ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes progressFill {
  from { width: 0; }
}
@keyframes floatUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pulse-ring {
  0%   { transform: scale(1);    opacity: 0.6; }
  100% { transform: scale(1.55); opacity: 0; }
}

.anim-fade-up   { animation: fadeUp   0.5s cubic-bezier(.22,.61,.36,1) both; }
.anim-fade-in   { animation: fadeIn   0.4s ease both; }
.anim-scale-in  { animation: scaleIn  0.45s cubic-bezier(.22,.61,.36,1) both; }

/* Stagger delays */
.delay-1 { animation-delay: 0.08s; }
.delay-2 { animation-delay: 0.16s; }
.delay-3 { animation-delay: 0.24s; }
.delay-4 { animation-delay: 0.32s; }
.delay-5 { animation-delay: 0.40s; }
.delay-6 { animation-delay: 0.48s; }


/* ═══════════════════════════════════════════════════════════
   TOP NAV
═══════════════════════════════════════════════════════════ */
.ep-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  transition: box-shadow 0.2s;
  animation: slideDown 0.4s ease both;
}

.ep-nav.scrolled { box-shadow: var(--shadow-sm); }

.ep-nav-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}

.ep-nav-logo {
  width: 34px; height: 34px;
  border-radius: 9px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--org-accent);
  display: flex; align-items: center; justify-content: center;
}

.ep-nav-logo img {
  width: 100%; height: 100%;
  object-fit: contain;
}

.ep-nav-org {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* The separator and hub label are retained in markup for servers
   that want to show them, but hidden by default — they add clutter
   without adding meaning for most visitors. */
.ep-nav-sep {
  display: none;
}

.ep-nav-hub {
  display: none;
}

.ep-nav-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.ep-nav-signin {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  padding: 7px 14px;
  border-radius: 22px;
  transition: background 0.15s, color 0.15s;
}
.ep-nav-signin:hover { background: var(--section-bg); color: var(--text); }

.ep-nav-cta {
  font-size: 13px;
  font-weight: 700;
  color: var(--org-accent-contrast);
  background: var(--org-accent);
  padding: 8px 18px;
  border-radius: 22px;
  transition: opacity 0.15s, transform 0.15s;
  white-space: nowrap;
}
.ep-nav-cta:hover { opacity: 0.88; transform: translateY(-1px); }


/* ═══════════════════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════════════════ */
.ep-hero {
  position: relative;
  /* Taller hero gives the image real presence above the text block.
     68vh ensures it fills most of the screen on landscape desktops
     without scrolling, while the 640px floor keeps it usable on
     compact laptops. */
  min-height: max(640px, 68vh);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  margin-top: 60px; /* nav height */
}

/* Photo layer */
.ep-hero-image {
  position: absolute;
  inset: 0;
  object-fit: cover;
  width: 100%; height: 100%;
  /* Transition from purely CSS gradient placeholder to real image —
     set src to your event image URL. The gradient acts as a fallback. */
}

/* Two-layer overlay scrim — designed to work with any photo.
   Layer 1 (to right): darkens the left side where title/tagline sit.
     Starts at 0.72 opacity so even a bright white sky behind the text
     is reduced to a dark background. Fades out by 65% across the hero
     so the right side of the image remains visible and attractive.
   Layer 2 (to top): darkens the bottom-to-centre for band legibility,
     matching the original intent but without the near-zero middle stop. */
.ep-hero-overlay {
  position: absolute;
  inset: 0;
  background:
          linear-gradient(
                  to right,
                  rgba(0,0,0,0.72) 0%,
                  rgba(0,0,0,0.55) 30%,
                  rgba(0,0,0,0.20) 65%,
                  rgba(0,0,0,0.05) 100%
          ),
          linear-gradient(
                  to top,
                  rgba(0,0,0,0.65) 0%,
                  rgba(0,0,0,0.25) 35%,
                  rgba(0,0,0,0.00) 65%
          );
  pointer-events: none;
}

/* Diagonal accent band — org color, angles across the lower hero */
.ep-hero-band {
  position: absolute;
  bottom: -2px; left: -60px; right: -60px;
  height: 90px;
  background: var(--org-accent);
  transform: skewY(-2.5deg);
  transform-origin: bottom left;
  pointer-events: none;
  opacity: 0.97;
}

/* Content sits above the band.
   padding-bottom only needs to clear the band's tallest point, which is
   its left edge: at skewY(-2.5deg) and height 90px the left edge rises
   ~93px from the hero bottom. 112px gives ~20px of comfortable air above it.
   The pills live INSIDE this box (not absolutely positioned) so they are
   naturally above the band and cannot overflow the page. */
.ep-hero-content {
  position: relative;
  z-index: 2;
  padding: 72px 64px 112px;
  max-width: 860px;
}

.ep-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.25);
  padding: 5px 12px;
  border-radius: 20px;
  margin-bottom: 18px;
  backdrop-filter: blur(8px);
}

.ep-hero-eyebrow-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--org-accent-contrast);
  opacity: 0.9;
}

/* Live pulsing ring */
.ep-hero-eyebrow-dot.live {
  background: #FF4D6D;
  position: relative;
}
.ep-hero-eyebrow-dot.live::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid #FF4D6D;
  animation: pulse-ring 1.8s ease-out infinite;
}

.ep-hero-title {
  font-family: var(--font-display);
  font-size: clamp(36px, 5.5vw, 72px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -1px;
  color: #FFFFFF;
  margin-bottom: 14px;
  text-shadow:
          0 1px 2px  rgba(0,0,0,0.55),
          0 4px 16px rgba(0,0,0,0.45),
          0 8px 32px rgba(0,0,0,0.30);
}

.ep-hero-title em {
  font-style: italic;
  font-weight: 400;
}

.ep-hero-tagline {
  font-size: 17px;
  font-weight: 400;
  color: rgba(255,255,255,0.93);
  max-width: 520px;
  line-height: 1.55;
  text-shadow:
          0 1px 3px  rgba(0,0,0,0.50),
          0 4px 16px rgba(0,0,0,0.35);
}

/* Pills live inside .ep-hero-content as a plain in-flow flex row.
   No absolute positioning, no overflow tricks.
   flex-wrap: wrap means they reflow to a second row on narrow screens
   rather than ever escaping the content box. */
.ep-hero-pills {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 22px;
}

.ep-hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.30);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  color: #FFFFFF;
  backdrop-filter: blur(8px);
  white-space: nowrap;
  flex-shrink: 0;
}

.ep-hero-pill svg {
  width: 13px; height: 13px;
  stroke: currentColor; fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  opacity: 0.85;
  flex-shrink: 0;
}

/* Status pill within hero band */
.ep-status-open {
  background: rgba(255,255,255,0.95);
  color: var(--org-accent);
  border-color: transparent;
  font-weight: 700;
}

.ep-status-live {
  background: #FF4D6D;
  color: #FFFFFF;
  border-color: transparent;
  font-weight: 700;
}

.ep-status-full {
  background: rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.85);
  border-color: rgba(255,255,255,0.3);
}


/* ═══════════════════════════════════════════════════════════
   LAYOUT HELPERS
═══════════════════════════════════════════════════════════ */
.ep-container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 40px;
}

.ep-section {
  padding: 72px 0;
}

.ep-section-alt {
  background: var(--section-bg);
}

.ep-section-heading {
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 600;
  letter-spacing: -0.5px;
  color: var(--text);
  margin-bottom: 8px;
  line-height: 1.15;
}

.ep-section-heading em {
  font-style: italic;
  color: var(--org-accent);
}

.ep-section-sub {
  font-size: 15px;
  color: var(--text-2);
  max-width: 520px;
  line-height: 1.6;
  margin-bottom: 40px;
}

.ep-section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.ep-count-badge {
  font-size: 12px;
  font-weight: 700;
  color: var(--org-accent);
  background: var(--org-accent-light);
  border: 1px solid var(--org-accent-mid);
  padding: 4px 12px;
  border-radius: 20px;
  white-space: nowrap;
}

.ep-divider {
  width: 48px;
  height: 3px;
  background: var(--org-accent);
  border-radius: 2px;
  margin-bottom: 28px;
}


/* ═══════════════════════════════════════════════════════════
   QUICK FACTS STRIP
   Sits just below the hero, white card with shadow
═══════════════════════════════════════════════════════════ */
.ep-facts {
  position: relative;
  z-index: 10;
  margin-top: -2px;
  background: var(--page-bg);
  border-bottom: 1px solid var(--border);
  overflow: hidden;   /* prevent grid blowout from reaching page layout */
  animation: fadeUp 0.5s 0.1s cubic-bezier(.22,.61,.36,1) both;
}

.ep-facts-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

.ep-fact {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 24px 28px;
  border-right: 1px solid var(--border);
  min-width: 0;   /* grid item: allow shrinking below intrinsic content width */
}

.ep-fact:last-child { border-right: none; }

.ep-fact-icon {
  width: 42px; height: 42px;
  border-radius: 12px;
  background: var(--org-accent-light);
  border: 1px solid var(--org-accent-mid);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.ep-fact-icon svg {
  width: 18px; height: 18px;
  stroke: var(--org-accent); fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

.ep-fact-body { min-width: 0; }

.ep-fact-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 3px;
}

.ep-fact-value {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;   /* honour the parent's clamped width */
}

.ep-fact-meta {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 1px;
}


/* ═══════════════════════════════════════════════════════════
   ABOUT SECTION
═══════════════════════════════════════════════════════════ */
.ep-about-grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 48px;
  align-items: start;
}

.ep-about-body {
  font-size: 16px;
  color: var(--text-2);
  line-height: 1.75;
}

.ep-about-body p + p { margin-top: 18px; }

/* Highlight callout block */
.ep-callout {
  margin-top: 28px;
  padding: 20px 22px;
  border-radius: var(--radius-md);
  background: var(--org-accent-light);
  border-left: 3px solid var(--org-accent);
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.ep-callout-icon {
  width: 34px; height: 34px;
  border-radius: 10px;
  background: var(--org-accent-mid);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.ep-callout-icon svg {
  width: 16px; height: 16px;
  stroke: var(--org-accent); fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

.ep-callout-text {
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.6;
}

.ep-callout-text strong { color: var(--text); font-weight: 600; }

/* Organizer card */
.ep-org-card {
  background: var(--page-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.ep-org-card-header {
  background: var(--org-accent);
  padding: 20px 22px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.ep-org-logo {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: rgba(255,255,255,0.2);
  border: 1.5px solid rgba(255,255,255,0.35);
  overflow: hidden;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}

.ep-org-logo img {
  width: 100%; height: 100%;
  object-fit: contain;
}

.ep-org-logo-placeholder {
  font-size: 20px;
  font-weight: 800;
  color: rgba(255,255,255,0.9);
  font-family: var(--font-display);
}

.ep-org-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--org-accent-contrast);
  line-height: 1.2;
}

.ep-org-sub {
  font-size: 12px;
  color: rgba(255,255,255,0.72);
  margin-top: 2px;
}

.ep-org-card-body {
  padding: 18px 22px;
}

.ep-org-detail {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}

.ep-org-detail:last-child { border-bottom: none; }

.ep-org-detail svg {
  width: 15px; height: 15px;
  stroke: var(--text-3); fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
  margin-top: 2px;
}

.ep-org-detail-body { min-width: 0; }
.ep-org-detail-label { font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-3); margin-bottom: 1px; }
.ep-org-detail-value { color: var(--text-2); font-size: 14px; }
.ep-org-detail-value a { color: var(--org-accent); text-decoration: underline; text-underline-offset: 3px; }


/* ═══════════════════════════════════════════════════════════
   OVERALL VOLUNTEER FILL BAR (hero transition)
═══════════════════════════════════════════════════════════ */
.ep-fill-banner {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 22px 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 44px;
  flex-wrap: wrap;
}

.ep-fill-text {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}

.ep-fill-bar-wrap {
  flex: 1;
  min-width: 120px;
  height: 8px;
  background: var(--border);
  border-radius: 4px;
  overflow: hidden;
}

.ep-fill-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--org-accent), var(--org-accent-2));
  border-radius: 4px;
  animation: progressFill 0.8s 0.3s cubic-bezier(.22,.61,.36,1) both;
  transition: width 0.4s;
}

.ep-fill-label {
  font-size: 13px;
  color: var(--text-3);
  white-space: nowrap;
}

.ep-fill-num {
  font-weight: 700;
  color: var(--org-accent);
}


/* ═══════════════════════════════════════════════════════════
   VOLUNTEER TASK CARDS
═══════════════════════════════════════════════════════════ */
.ep-tasks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 18px;
}

/* ── BASE CARD ──────────────────────────────────────────── */
.ep-task-card {
  position: relative;
  background: var(--page-bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: border-color 0.22s, box-shadow 0.22s, transform 0.22s;
}

.ep-task-card:hover {
  border-color: var(--org-accent);
  box-shadow: var(--shadow-md), 0 0 0 3px var(--org-accent-mid);
  transform: translateY(-3px);
}

/* Coloured top strip */
.ep-task-strip {
  height: 4px;
  background: linear-gradient(90deg, var(--org-accent), var(--org-accent-2));
  flex-shrink: 0;
}

.ep-task-body {
  padding: 20px 22px 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.ep-task-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.ep-task-name {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.2px;
  line-height: 1.2;
}

/* Shift badge top-right */
.ep-task-shift-badge {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--org-accent);
  background: var(--org-accent-light);
  border: 1px solid var(--org-accent-mid);
  padding: 4px 9px;
  border-radius: 20px;
  white-space: nowrap;
  margin-top: 2px;
}

.ep-task-desc {
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.65;
  margin-bottom: 16px;
  flex: 1;
}

.ep-task-reqs {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 16px;
}

.ep-task-req-pill {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
  background: var(--section-bg);
  border: 1px solid var(--border);
  padding: 3px 9px;
  border-radius: 20px;
}

/* Footer: fill bar + CTA */
.ep-task-footer {
  padding: 14px 22px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ep-task-fill-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ep-task-fill-bar-wrap {
  flex: 1;
  height: 5px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}

.ep-task-fill-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--org-accent), var(--org-accent-2));
  border-radius: 3px;
  animation: progressFill 0.8s cubic-bezier(.22,.61,.36,1) both;
}

.ep-task-fill-label {
  font-size: 12px;
  color: var(--text-3);
  white-space: nowrap;
}

.ep-task-fill-label strong {
  font-weight: 700;
  color: var(--org-accent);
}

/* ── CTA BUTTON ─────────────────────────────────────────── */
.ep-btn-signup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  background: var(--org-accent);
  color: var(--org-accent-contrast);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.2px;
  border: none;
  cursor: pointer;
  transition: opacity 0.16s, transform 0.16s;
  text-decoration: none;
}

.ep-btn-signup svg {
  width: 15px; height: 15px;
  stroke: currentColor; fill: none; stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round;
}

.ep-btn-signup:hover { opacity: 0.88; transform: translateY(-1px); }

/* ── ENROLLED VARIANT ───────────────────────────────────── */
.ep-task-card.enrolled {
  border-color: var(--org-accent);
  background: var(--org-accent-light);
}

.ep-task-card.enrolled:hover {
  box-shadow: var(--shadow-md), 0 0 0 3px var(--org-accent-mid);
}

.ep-task-enrolled-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--org-accent);
  background: rgba(255,255,255,0.8);
  border: 1px solid var(--org-accent-mid);
  padding: 4px 10px;
  border-radius: 20px;
  width: fit-content;
  margin-bottom: 10px;
}

.ep-task-enrolled-badge svg {
  width: 11px; height: 11px;
  stroke: currentColor; fill: none; stroke-width: 3;
  stroke-linecap: round; stroke-linejoin: round;
}

.ep-btn-enrolled {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px 20px;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--org-accent);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  border: 2px solid var(--org-accent);
  cursor: default;
  pointer-events: none;
}

.ep-btn-enrolled svg {
  width: 15px; height: 15px;
  stroke: currentColor; fill: none; stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ── FULL VARIANT ───────────────────────────────────────── */
.ep-task-card.full {
  opacity: 0.72;
}

.ep-task-card.full:hover {
  transform: none;
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}

.ep-task-fill-bar.full-bar {
  background: var(--border-strong);
}

.ep-btn-full {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px 20px;
  border-radius: var(--radius-sm);
  background: var(--section-bg);
  color: var(--text-3);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  border: 1.5px solid var(--border);
  cursor: not-allowed;
}

.ep-btn-full svg {
  width: 14px; height: 14px;
  stroke: currentColor; fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Full status text label */
.ep-task-full-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-3);
  background: var(--section-bg);
  border: 1px solid var(--border);
  padding: 4px 10px;
  border-radius: 20px;
  width: fit-content;
  margin-bottom: 10px;
}


/* ═══════════════════════════════════════════════════════════
   SPREAD THE WORD SECTION
═══════════════════════════════════════════════════════════ */
.ep-share-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.ep-share-card {
  background: var(--page-bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 22px 20px 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
  text-decoration: none;
  color: var(--text);
}

.ep-share-card:hover {
  border-color: var(--org-accent);
  box-shadow: var(--shadow-md), 0 0 0 3px var(--org-accent-mid);
  transform: translateY(-2px);
}

.ep-share-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--org-accent-light);
  border: 1px solid var(--org-accent-mid);
  display: flex; align-items: center; justify-content: center;
}

.ep-share-icon svg {
  width: 20px; height: 20px;
  stroke: var(--org-accent); fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

.ep-share-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.ep-share-desc {
  font-size: 13px;
  color: var(--text-3);
  line-height: 1.5;
}


/* ═══════════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════════ */
.ep-footer {
  background: var(--text);
  color: rgba(255,255,255,0.55);
  padding: 40px 0;
}

.ep-footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.ep-footer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ep-footer-logo {
  width: 32px; height: 32px;
  border-radius: 9px;
  background: var(--org-accent);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.ep-footer-logo svg {
  width: 16px; height: 16px;
  stroke: white; fill: none; stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round;
}

.ep-footer-org-name {
  font-size: 14px;
  font-weight: 700;
  color: rgba(255,255,255,0.9);
}

.ep-footer-hub {
  font-size: 12px;
  color: rgba(255,255,255,0.4);
  margin-top: 1px;
}

.ep-footer-links {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.ep-footer-link {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  transition: color 0.15s;
}

.ep-footer-link:hover { color: rgba(255,255,255,0.9); }

.ep-footer-copy {
  font-size: 12px;
  text-align: right;
  line-height: 1.5;
}


/* ═══════════════════════════════════════════════════════════
   STICKY CTA FLOAT BAR
   Appears after hero is scrolled out of view
═══════════════════════════════════════════════════════════ */
.ep-float-bar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  z-index: 300;
  background: var(--text);
  color: #FFFFFF;
  border-radius: 50px;
  padding: 14px 22px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: var(--shadow-lg);
  transition: transform 0.35s cubic-bezier(.22,.61,.36,1), opacity 0.3s;
  opacity: 0;
  white-space: nowrap;
  max-width: calc(100vw - 32px);
}

.ep-float-bar.visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

.ep-float-bar-text {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.75);
  overflow: hidden;
  text-overflow: ellipsis;
}

.ep-float-bar-text strong { color: #FFFFFF; font-weight: 700; }

.ep-float-cta {
  background: var(--org-accent);
  color: var(--org-accent-contrast);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  padding: 9px 20px;
  border-radius: 30px;
  border: none;
  cursor: pointer;
  transition: opacity 0.15s;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
}

.ep-float-cta:hover { opacity: 0.88; }

.ep-float-cta svg {
  width: 14px; height: 14px;
  stroke: currentColor; fill: none; stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round;
}

.ep-float-dismiss {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.5);
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}

.ep-float-dismiss:hover { background: rgba(255,255,255,0.18); color: #fff; }

.ep-float-dismiss svg {
  width: 13px; height: 13px;
  stroke: currentColor; fill: none; stroke-width: 2.5;
  stroke-linecap: round;
}


/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .ep-facts-inner        { grid-template-columns: repeat(2, 1fr); }
  .ep-fact:nth-child(2)  { border-right: none; }
  .ep-fact:nth-child(3)  { border-top: 1px solid var(--border); }
  .ep-about-grid         { grid-template-columns: 1fr; gap: 32px; }
  .ep-container          { padding: 0 28px; }
  /* Tablet: tighten hero horizontal padding; bottom stays at 112px since
     band geometry doesn't change until 768px. */
  .ep-hero-content       { padding: 56px 40px 112px; }
}

@media (max-width: 768px) {
  .ep-nav                { padding: 0 20px; }
  /* Band shrinks to 70px on mobile. Left-edge high point: ~70 + skew ≈ 73px.
     84px padding-bottom keeps a comfortable ~11px air gap above the band. */
  .ep-hero-content       { padding: 44px 24px 84px; }
  .ep-hero-band          { height: 70px; }
  .ep-container          { padding: 0 20px; }
  .ep-section            { padding: 52px 0; }
  .ep-tasks-grid         { grid-template-columns: 1fr; }
  .ep-share-grid         { grid-template-columns: 1fr; gap: 10px; }
  .ep-footer-inner       { flex-direction: column; align-items: flex-start; gap: 20px; }
  .ep-footer-copy        { text-align: left; }
  .ep-float-bar-text     { display: none; }
  .ep-float-bar          { padding: 12px 16px; gap: 10px; }
}

/* Hide sign-in on small phones where nav space is genuinely tight. */
@media (max-width: 520px) {
  .ep-nav-signin         { display: none; }
  /* Compact the CTA so it doesn't crowd the org name on very small screens. */
  .ep-nav-cta            { font-size: 12px; padding: 7px 13px; }
}

@media (max-width: 540px) {
  .ep-facts-inner        { grid-template-columns: 1fr 1fr; }
  /* Tighter cell padding so text has more room inside each 1fr column. */
  .ep-fact               { padding: 16px 14px; gap: 10px; }
  /* Hide the icon entirely on very small screens — the label + value alone
     is sufficient and reclaims ~52px of column width per cell. */
  .ep-fact-icon          { display: none; }
  /* Slightly smaller value text so it is less likely to need ellipsis. */
  .ep-fact-value         { font-size: 15px; }
  .ep-hero-title         { letter-spacing: -0.5px; }
  .ep-hero-pills         { gap: 6px; margin-top: 16px; }
  .ep-hero-pill          { font-size: 11px; padding: 5px 10px; }
}


/* ── SHARE CARD TOGGLE BUTTON STATE ──────────────────────── */

/* On desktop the grid shows 3 buttons on row 1, with any open panel
   spanning all 3 columns on row 2.
   On mobile (single column) the panels flow naturally after their
   button in document order — no reordering needed. */
@media (min-width: 541px) {
  #ep-cal-btn   { order: 1; }
  #ep-share-btn { order: 2; }
  /* Donate link — always last button */
  .ep-share-grid > a.ep-share-card { order: 3; }
  /* Panels span full width and sit below all buttons */
  #ep-cal-panel   { order: 10; grid-column: 1 / -1; }
  #ep-share-panel { order: 11; grid-column: 1 / -1; }
}

/* ep-share-card is used both as <a> and as <button> — reset button styles */
button.ep-share-card {
  width: 100%;
  text-align: left;
  cursor: pointer;
  background: var(--page-bg);
  color: var(--text);
  position: relative;  /* for chevron absolute positioning */
}

button.ep-share-card:focus-visible {
  outline: 2.5px solid var(--org-accent);
  outline-offset: 2px;
}

/* Chevron indicator bottom-right of toggle cards */
.ep-share-chevron {
  position: absolute;
  bottom: 14px; right: 14px;
  width: 18px; height: 18px;
  color: var(--text-3);
  transition: transform 0.25s cubic-bezier(.22,.61,.36,1), color 0.18s;
}

.ep-share-chevron svg {
  width: 100%; height: 100%;
}

/* Active (open) state */
button.ep-share-card.active {
  border-color: var(--org-accent);
  box-shadow: var(--shadow-md), 0 0 0 3px var(--org-accent-mid);
  background: var(--org-accent-light);
}

button.ep-share-card.active .ep-share-chevron {
  transform: rotate(180deg);
  color: var(--org-accent);
}

button.ep-share-card.active .ep-share-icon {
  background: rgba(255,255,255,0.8);
}


/* ── FOLDOUT PANELS ──────────────────────────────────────── */
.ep-action-panel {
  /* max-height animation — hidden at 0, expands to content height */
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.38s cubic-bezier(.22,.61,.36,1);
  /* margin-top creates a small gap between the grid and the panel
     only when the panel is visible */
  margin-top: 0;
  transition:
          max-height 0.38s cubic-bezier(.22,.61,.36,1),
          margin-top  0.20s ease;
}

.ep-action-panel.open {
  max-height: 700px;   /* generous ceiling for multi-row social grid */
  margin-top: 0;
}

.ep-action-panel-inner {
  background: var(--page-bg);
  border: 1.5px solid var(--org-accent-mid);
  border-radius: var(--radius-lg);
  padding: 24px 28px 28px;
  box-shadow: var(--shadow-sm), 0 0 0 3px var(--org-accent-mid);
}

.ep-action-panel-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 20px;
}


/* ── CALENDAR BUTTONS ─────────────────────────────────────── */
.ep-cal-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.ep-cal-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 13px 20px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border);
  background: var(--section-bg);
  color: var(--text);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.15s, background 0.18s;
  flex: 1;
  min-width: 160px;
}

.ep-cal-btn:hover {
  border-color: var(--org-accent);
  background: var(--org-accent-light);
  box-shadow: 0 0 0 3px var(--org-accent-mid);
  transform: translateY(-1px);
}

.ep-cal-btn-icon {
  width: 32px; height: 32px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}

.ep-cal-btn-icon svg {
  width: 32px; height: 32px;
}

.ep-cal-btn-label {
  white-space: nowrap;
}

@media (max-width: 540px) {
  .ep-cal-btn { min-width: 0; flex: 1 1 100%; }
}


/* ── SOCIAL ICON GRID ─────────────────────────────────────── */
.ep-social-grid {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.ep-social-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 72px;
  padding: 14px 8px 12px;
  border-radius: var(--radius-md);
  background: var(--social-bg, var(--section-bg));
  color: var(--social-fg, var(--text));
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  transition: transform 0.15s, box-shadow 0.18s, opacity 0.18s;
  flex-shrink: 0;
}

.ep-social-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  opacity: 0.90;
}

.ep-social-btn svg {
  width: 22px; height: 22px;
  flex-shrink: 0;
}


/* ── COPY LINK ROW ────────────────────────────────────────── */
.ep-copy-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--section-bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px 4px 4px 14px;
  overflow: hidden;
}

.ep-copy-url {
  flex: 1;
  font-size: 13px;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  font-family: monospace;
  letter-spacing: -0.2px;
}

.ep-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: calc(var(--radius-sm) - 4px);
  border: 1.5px solid var(--border);
  background: var(--page-bg);
  color: var(--text-2);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}

.ep-copy-btn:hover {
  border-color: var(--org-accent);
  color: var(--org-accent);
}

.ep-copy-btn svg {
  width: 14px; height: 14px;
  stroke: currentColor; fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ── PAGE MASTHEAD ───────────────────────────────────────── */
/* Compact accent-band header used on inner pages that don't
   have a full photo hero.                                    */
.ep-masthead {
  background: var(--org-accent);
  margin-top: 60px;
  padding: 52px 0 0;
  position: relative;
  overflow: hidden;
}

/* Subtle dot-grid texture */
.ep-masthead::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.09) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}

/* Diagonal white slash at the bottom of the masthead */
.ep-masthead-slash {
  display: block;
  height: 44px;
  background: var(--page-bg);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
  margin-top: 44px;
}

.ep-masthead-inner {
  position: relative;
  z-index: 1;
  padding: 0 40px;
  max-width: 1080px;
  margin: 0 auto;
}

.ep-masthead-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  margin-bottom: 10px;
}

.ep-masthead-title {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 600;
  letter-spacing: -0.5px;
  line-height: 1.08;
  color: #FFFFFF;
  margin-bottom: 10px;
}

.ep-masthead-title em {
  font-style: italic;
  font-weight: 400;
}

.ep-masthead-sub {
  font-size: 15px;
  color: rgba(255,255,255,0.72);
  line-height: 1.5;
  margin-bottom: 32px;
  max-width: 480px;
}

/* Pill strip inside masthead (enrolled count, upcoming count) */
.ep-masthead-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.ep-masthead-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.25);
  padding: 5px 12px;
  border-radius: 20px;
  backdrop-filter: blur(6px);
  white-space: nowrap;
}

.ep-masthead-pill svg {
  width: 12px; height: 12px;
  stroke: currentColor; fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  opacity: 0.8;
}

/* Enrolled pill — white bg with accent text */
.ep-masthead-pill.enrolled-pill {
  background: rgba(255,255,255,0.95);
  color: var(--org-accent);
  border-color: transparent;
  font-weight: 700;
}

@media (max-width: 768px) {
  .ep-masthead-inner { padding: 0 20px; }
  .ep-masthead { padding: 40px 0 0; }
}


/* ── ENROLLED SUMMARY BANNER ─────────────────────────────── */
.ep-enrolled-banner {
  background: var(--org-accent-light);
  border: 1.5px solid var(--org-accent-mid);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 32px;
  animation: fadeUp 0.4s ease both;
}

.ep-enrolled-banner-icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--org-accent-mid);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.ep-enrolled-banner-icon svg {
  width: 16px; height: 16px;
  stroke: var(--org-accent); fill: none; stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round;
}

.ep-enrolled-banner-text {
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.5;
}

.ep-enrolled-banner-text strong { color: var(--text); }
.ep-enrolled-banner-text em {
  font-style: normal;
  font-weight: 700;
  color: var(--org-accent);
}


/* ── FILTER / SEARCH BAR ─────────────────────────────────── */
.ep-filter-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.ep-search-wrap {
  position: relative;
  flex: 1;
  min-width: 180px;
  max-width: 320px;
}

.ep-search-wrap svg {
  position: absolute;
  left: 12px; top: 50%;
  transform: translateY(-50%);
  width: 15px; height: 15px;
  stroke: var(--text-3); fill: none; stroke-width: 2;
  pointer-events: none;
}

.ep-search-input {
  width: 100%;
  padding: 10px 14px 10px 38px;
  background: var(--page-bg);
  border: 1.5px solid var(--border);
  border-radius: 24px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text);
  outline: none;
  transition: border-color 0.18s;
  -webkit-appearance: none;
}

.ep-search-input::placeholder { color: var(--text-3); }
.ep-search-input:focus { border-color: var(--org-accent); }

.ep-filter-tabs {
  display: flex;
  gap: 4px;
  background: var(--section-bg);
  border: 1.5px solid var(--border);
  border-radius: 24px;
  padding: 4px;
}

.ep-filter-tab {
  padding: 7px 16px;
  border-radius: 20px;
  border: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-3);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}

.ep-filter-tab:hover { color: var(--text); }

.ep-filter-tab.active {
  background: var(--page-bg);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

@media (max-width: 680px) {
  .ep-search-wrap { max-width: none; flex: 1 1 100%; order: -1; }
}


/* ── MONTH GROUPS ────────────────────────────────────────── */
.ep-month-group { margin-bottom: 40px; }

.ep-month-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-3);
  padding-bottom: 12px;
  margin-bottom: 4px;
  border-bottom: 1.5px solid var(--border);
}

/* Pulsing live dot for "Live Now" group */
.ep-live-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #FF4D6D;
  display: inline-block;
  flex-shrink: 0;
  position: relative;
}
.ep-live-dot::after {
  content: '';
  position: absolute; inset: -3px;
  border-radius: 50%;
  border: 2px solid #FF4D6D;
  animation: pulse-ring 1.8s ease-out infinite;
}


/* ── EVENT LIST + ROWS ───────────────────────────────────── */
.ep-event-list {
  background: var(--page-bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.ep-event-row {
  display: flex;
  align-items: stretch;
  gap: 0;
  text-decoration: none;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}

.ep-event-row:last-child { border-bottom: none; }

.ep-event-row:hover { background: var(--section-bg); }

/* Enrolled: left accent stripe + tinted bg */
.ep-event-row.enrolled {
  border-left: 4px solid var(--org-accent);
  background: var(--org-accent-light);
}
.ep-event-row.enrolled:hover {
  background: color-mix(in srgb, var(--org-accent-light) 90%, var(--section-bg));
}

/* Live: pink left stripe */
.ep-event-row.live {
  border-left: 4px solid #FF4D6D;
}

/* Date badge column */
.ep-sched-date {
  width: 68px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 10px;
  border-right: 1px solid var(--border);
  background: var(--section-bg);
}

.ep-event-row.enrolled .ep-sched-date { background: var(--org-accent-mid); }
.ep-event-row.live     .ep-sched-date { background: rgba(255,77,109,0.06); }

.ep-sched-date-month {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-3);
  line-height: 1;
}

.ep-sched-date-day {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--text);
}

.ep-event-row.enrolled .ep-sched-date-day { color: var(--org-accent); }
.ep-event-row.live     .ep-sched-date-day { color: #FF4D6D; }

/* Middle body */
.ep-sched-body {
  flex: 1;
  min-width: 0;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ep-sched-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 5px;
}

.ep-sched-name {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Enrolled badge on event row */
.ep-sched-enrolled-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--org-accent);
  background: rgba(255,255,255,0.85);
  border: 1px solid var(--org-accent-mid);
  padding: 3px 8px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
}

.ep-sched-enrolled-badge svg {
  width: 9px; height: 9px;
  stroke: currentColor; fill: none; stroke-width: 3;
  stroke-linecap: round; stroke-linejoin: round;
}

.ep-sched-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.ep-sched-time { font-size: 13px; color: var(--text-2); font-weight: 400; }

.ep-sched-sep {
  color: var(--text-3);
  font-size: 11px;
  opacity: 0.5;
}

.ep-sched-location {
  font-size: 13px;
  color: var(--text-3);
  display: flex; align-items: center; gap: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.ep-sched-location svg {
  width: 11px; height: 11px;
  stroke: currentColor; fill: none; stroke-width: 2;
  flex-shrink: 0; opacity: 0.7;
}

/* Slot fill mini-bar below meta */
.ep-sched-fill {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.ep-sched-fill-bar-wrap {
  width: 80px;
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
  flex-shrink: 0;
}

.ep-sched-fill-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--org-accent), var(--org-accent-2));
  border-radius: 2px;
}

.ep-event-row.live .ep-sched-fill-bar { background: #FF4D6D; }

.ep-sched-fill-label {
  font-size: 12px;
  color: var(--text-3);
  white-space: nowrap;
}

/* Right: status + arrow */
.ep-sched-right {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 18px 0 14px;
  flex-shrink: 0;
}

.ep-sched-status-open {
  display: inline-block;
  font-size: 10px; font-weight: 700; letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 3px 10px; border-radius: 20px;
  color: var(--org-accent);
  background: var(--org-accent-light);
  border: 1px solid var(--org-accent-mid);
  white-space: nowrap;
}

.ep-sched-status-full {
  display: inline-block;
  font-size: 10px; font-weight: 700; letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 3px 10px; border-radius: 20px;
  color: var(--text-3);
  background: var(--section-bg);
  border: 1px solid var(--border);
  white-space: nowrap;
}

.ep-sched-status-live {
  display: inline-block;
  font-size: 10px; font-weight: 700; letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 3px 10px; border-radius: 20px;
  color: #FF4D6D;
  background: rgba(255,77,109,0.08);
  border: 1px solid rgba(255,77,109,0.25);
  white-space: nowrap;
}

.ep-sched-arrow {
  font-size: 16px;
  color: var(--text-3);
  opacity: 0.5;
  transition: opacity 0.15s, transform 0.15s;
  line-height: 1;
}

.ep-event-row:hover .ep-sched-arrow { opacity: 1; transform: translateX(3px); }


/* ── EMPTY STATE ─────────────────────────────────────────── */
.ep-empty-state {
  text-align: center;
  padding: 64px 24px;
  color: var(--text-3);
}

.ep-empty-state svg {
  width: 44px; height: 44px;
  stroke: var(--text-3); fill: none; stroke-width: 1.5;
  margin: 0 auto 16px;
  opacity: 0.5;
}

.ep-empty-title {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--text-2);
  margin-bottom: 6px;
}

.ep-empty-sub { font-size: 14px; }


/* ── SCHEDULE RESPONSIVE ─────────────────────────────────── */
@media (max-width: 680px) {
  .ep-sched-date { width: 56px; }
  .ep-sched-date-day { font-size: 22px; }
  .ep-sched-right .ep-sched-status-open,
  .ep-sched-right .ep-sched-status-full,
  .ep-sched-right .ep-sched-status-live { display: none; }
  .ep-sched-fill-bar-wrap { display: none; }
  .ep-sched-location { display: none; }
}


/* ═══════════════════════════════════════════════════════════
   CONFIRMATION PAGES — ep-confirm-*
═══════════════════════════════════════════════════════════ */

/* ── CENTERED PAGE LAYOUT ────────────────────────────────── */
.ep-confirm-page {
  min-height: calc(100vh - 60px); /* minus nav */
  margin-top: 60px;
  background: var(--section-bg);
  padding: 52px 40px 80px;
}

.ep-confirm-inner {
  max-width: 640px;
  margin: 0 auto;
}

/* ── SUCCESS HERO ─────────────────────────────────────────── */
.ep-confirm-hero {
  text-align: center;
  background: var(--page-bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 48px 36px 40px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
  animation: scaleIn 0.45s cubic-bezier(.22,.61,.36,1) both;
}

/* Soft radial glow behind the icon */
.ep-confirm-hero::before {
  content: '';
  position: absolute;
  top: -40px; left: 50%;
  transform: translateX(-50%);
  width: 300px; height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--org-accent-mid) 0%, transparent 65%);
  pointer-events: none;
}

/* Thin accent top rule */
.ep-confirm-hero::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--org-accent), var(--org-accent-2));
}

.ep-confirm-icon-wrap {
  position: relative;
  z-index: 1;
  width: 68px; height: 68px;
  border-radius: 50%;
  background: var(--org-accent-light);
  border: 2px solid var(--org-accent-mid);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 22px;
}

.ep-confirm-icon-wrap svg {
  width: 30px; height: 30px;
  stroke: var(--org-accent); fill: none; stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Pending-state icon (used on anon form page before submission) */
.ep-confirm-icon-wrap.pending {
  background: color-mix(in srgb, #3B82F6 10%, transparent);
  border-color: rgba(59,130,246,0.2);
}
.ep-confirm-icon-wrap.pending svg { stroke: #3B82F6; }

.ep-confirm-hero-title {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.5vw, 34px);
  font-weight: 600;
  letter-spacing: -0.4px;
  color: var(--text);
  margin-bottom: 12px;
  position: relative; z-index: 1;
}

.ep-confirm-hero-sub {
  font-size: 15px;
  color: var(--text-2);
  line-height: 1.65;
  max-width: 420px;
  margin: 0 auto;
  position: relative; z-index: 1;
}


/* ── DETAIL CARD ─────────────────────────────────────────── */
.ep-confirm-card {
  background: var(--page-bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin-bottom: 16px;
  animation: fadeUp 0.4s 0.1s ease both;
}

.ep-confirm-card-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 14px 22px 10px;
  border-bottom: 1px solid var(--border);
  background: var(--section-bg);
}

.ep-confirm-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--border);
}

.ep-confirm-row:last-child { border-bottom: none; }

.ep-confirm-row-icon {
  width: 36px; height: 36px;
  border-radius: var(--radius-sm);
  background: var(--org-accent-light);
  border: 1px solid var(--org-accent-mid);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.ep-confirm-row-icon svg {
  width: 16px; height: 16px;
  stroke: var(--org-accent); fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

.ep-confirm-row-body { flex: 1; min-width: 0; }

.ep-confirm-row-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 3px;
}

.ep-confirm-row-value {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}

.ep-confirm-row-meta {
  font-size: 13px;
  color: var(--text-2);
  margin-top: 2px;
  line-height: 1.45;
}


/* ── NEXT STEPS ──────────────────────────────────────────── */
.ep-next-steps {
  padding: 18px 22px 20px;
}

.ep-next-steps-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 16px;
}

.ep-next-step-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ep-next-step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.55;
}

.ep-step-num {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--org-accent-light);
  border: 1.5px solid var(--org-accent-mid);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--org-accent);
  flex-shrink: 0;
  margin-top: 1px;
}

.ep-next-step strong { color: var(--text); }


/* ── ACTION BUTTONS ──────────────────────────────────────── */
.ep-confirm-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 0;
  animation: fadeUp 0.4s 0.2s ease both;
}

.ep-btn-confirm-primary {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 14px 20px;
  border-radius: var(--radius-sm);
  background: var(--org-accent);
  color: var(--org-accent-contrast);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  border: none;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.14s;
}

.ep-btn-confirm-primary:hover { opacity: 0.88; transform: translateY(-1px); }

.ep-btn-confirm-primary svg {
  width: 16px; height: 16px;
  stroke: currentColor; fill: none; stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round;
}

.ep-btn-confirm-ghost {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 13px 20px;
  border-radius: var(--radius-sm);
  background: var(--page-bg);
  color: var(--text-2);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  border: 1.5px solid var(--border);
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.ep-btn-confirm-ghost:hover { border-color: var(--text-2); color: var(--text); }

@media (max-width: 480px) {
  .ep-confirm-actions { flex-direction: column; }
  .ep-confirm-hero { padding: 36px 24px 32px; }
  .ep-confirm-page { padding: 32px 20px 64px; }
}


/* ── FORM (anonymous page) ───────────────────────────────── */
.ep-form-fields {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 18px 22px 22px;
}

.ep-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.ep-form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ep-form-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-2);
}

.ep-form-label .optional {
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  font-size: 11px;
  color: var(--text-3);
}

.ep-form-label abbr.required {
  text-decoration: none;
  color: #E53A55;
  margin-left: 3px;
  font-weight: 700;
}

.ep-form-input {
  width: 100%;
  padding: 11px 14px;
  background: var(--section-bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--text);
  outline: none;
  transition: border-color 0.18s, background 0.18s;
  -webkit-appearance: none;
}

.ep-form-input::placeholder { color: var(--text-3); }

.ep-form-input:focus {
  border-color: var(--org-accent);
  background: var(--page-bg);
}

textarea.ep-form-input { resize: vertical; min-height: 88px; }

.ep-form-hint {
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.4;
}

.ep-form-error {
  font-size: 12px;
  color: #E53A55;
  line-height: 1.4;
}

.ep-form-input.error { border-color: rgba(229,58,85,0.6); }

.ep-form-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin: 4px 0;
}

.ep-form-divider::before,
.ep-form-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.ep-form-submit {
  width: 100%;
  padding: 14px;
  background: var(--org-accent);
  color: var(--org-accent-contrast);
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.14s;
  margin-top: 4px;
}

.ep-form-submit:hover { opacity: 0.88; transform: translateY(-1px); }
.ep-form-submit:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }


/* ── SIGN-IN NUDGE ───────────────────────────────────────── */
.ep-signin-nudge {
  background: var(--org-accent-light);
  border: 1.5px solid var(--org-accent-mid);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  animation: fadeUp 0.4s 0.08s ease both;
}

.ep-signin-nudge-text {
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.5;
}

.ep-signin-nudge-text strong { color: var(--text); }

.ep-signin-nudge-link {
  font-size: 13px;
  font-weight: 700;
  color: var(--org-accent-contrast);
  background: var(--org-accent);
  padding: 8px 18px;
  border-radius: 22px;
  white-space: nowrap;
  transition: opacity 0.15s;
  flex-shrink: 0;
}

.ep-signin-nudge-link:hover { opacity: 0.88; }


/* ── PROFILE INFO CARD (logged-in page) ──────────────────── */
.ep-profile-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
}

.ep-profile-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--org-accent), var(--org-accent-2));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--org-accent-contrast);
  flex-shrink: 0;
}

.ep-profile-info { flex: 1; min-width: 0; }

.ep-profile-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.ep-profile-email {
  font-size: 13px;
  color: var(--text-3);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ep-profile-update-link {
  font-size: 12px;
  color: var(--text-3);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.15s;
}

.ep-profile-update-link:hover { color: var(--org-accent); }


/* ═══════════════════════════════════════════════════════════
   HERO CTA BUTTONS
═══════════════════════════════════════════════════════════ */

/* Container — sits below the info pills in ep-hero-content */
.ep-hero-ctas {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 28px;
}

/* Primary: solid org-accent pill */
.ep-btn-hero-vol {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: var(--radius-sm);
  background: var(--org-accent);
  color: var(--org-accent-contrast);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: opacity 0.16s, transform 0.14s;
  white-space: nowrap;
}

.ep-btn-hero-vol:hover {
  opacity: 0.88;
  transform: translateY(-1px);
}

.ep-btn-hero-vol svg {
  width: 16px; height: 16px;
  flex-shrink: 0;
}

/* Secondary: white ghost — readable on the dark hero overlay */
.ep-btn-hero-attend {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 26px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.12);
  border: 1.5px solid rgba(255,255,255,0.55);
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 0.18s, border-color 0.18s;
  white-space: nowrap;
}

.ep-btn-hero-attend:hover {
  background: rgba(255,255,255,0.22);
  border-color: rgba(255,255,255,0.80);
}

.ep-btn-hero-attend svg {
  width: 16px; height: 16px;
  flex-shrink: 0;
}

@media (max-width: 540px) {
  .ep-hero-ctas           { margin-top: 20px; gap: 8px; }
  .ep-btn-hero-vol,
  .ep-btn-hero-attend     { font-size: 14px; padding: 11px 20px; flex: 1; justify-content: center; }
}


/* ── NAV "ATTENDING?" LINK ────────────────────────────────── */
/* Sits between Sign in and Volunteer Now — quieter than either */
.ep-nav-attending {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  padding: 7px 14px;
  border-radius: 22px;
  border: 1px solid var(--border);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
  text-decoration: none;
}

.ep-nav-attending:hover {
  background: var(--section-bg);
  color: var(--text);
  border-color: var(--border-strong);
}

/* Hide on very small screens — still reachable via hero and attend section */
@media (max-width: 520px) {
  .ep-nav-attending { display: none; }
}


/* ── FLOAT BAR "ATTENDING?" LINK ─────────────────────────── */
.ep-float-attend {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.65);
  padding: 8px 14px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.18);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 0.15s, border-color 0.15s;
}

.ep-float-attend:hover {
  color: rgba(255,255,255,0.90);
  border-color: rgba(255,255,255,0.40);
}

@media (max-width: 768px) {
  .ep-float-attend { display: none; }
}


/* ═══════════════════════════════════════════════════════════
   ATTEND SECTION
═══════════════════════════════════════════════════════════ */

.ep-attend-section {
  background: color-mix(in srgb, var(--org-accent-light) 60%, var(--page-bg));
  border-top:    1px solid color-mix(in srgb, var(--org-accent) 12%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--org-accent) 12%, transparent);
}

/* Two-column: copy left, card right */
.ep-attend-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 56px;
  align-items: start;
}

/* ── COPY COLUMN ─────────────────────────────────────────── */
.ep-attend-body {
  font-size: 16px;
  color: var(--text-2);
  line-height: 1.72;
  margin-bottom: 28px;
}

.ep-attend-perks {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ep-attend-perks li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  color: var(--text-2);
  line-height: 1.45;
}

.ep-attend-perk-icon {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--org-accent);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.ep-attend-perk-icon svg {
  width: 11px; height: 11px;
  stroke: var(--org-accent-contrast);
}

/* ── REGISTRATION CARD ───────────────────────────────────── */
.ep-attend-card {
  background: var(--page-bg);
  border: 1.5px solid color-mix(in srgb, var(--org-accent) 25%, transparent);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.ep-attend-card-header {
  background: var(--org-accent);
  padding: 24px 26px 20px;
}

.ep-attend-card-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  margin-bottom: 6px;
}

.ep-attend-card-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--org-accent-contrast);
  line-height: 1.2;
  margin-bottom: 4px;
}

.ep-attend-card-meta {
  font-size: 13px;
  color: rgba(255,255,255,0.72);
}

.ep-attend-card-body {
  padding: 24px 26px 26px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ── CAPACITY METER ──────────────────────────────────────── */
.ep-attend-capacity { display: flex; flex-direction: column; gap: 8px; }

.ep-attend-capacity-labels {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.ep-attend-capacity-count {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  color: var(--text);
  line-height: 1;
}

.ep-attend-capacity-count span {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-3);
  margin-left: 4px;
}

.ep-attend-capacity-limit {
  font-size: 12px;
  color: var(--text-3);
  font-weight: 600;
}

.ep-attend-capacity-bar-wrap {
  width: 100%;
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}

.ep-attend-capacity-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--org-accent), var(--org-accent-2));
  border-radius: 3px;
  animation: progressFill 0.8s 0.2s cubic-bezier(.22,.61,.36,1) both;
}

.ep-attend-capacity-note {
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.4;
}

/* ── ATTEND REGISTER BUTTON ──────────────────────────────── */
.ep-btn-attend-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 20px;
  border-radius: var(--radius-sm);
  /* Outlined in org-accent rather than filled — clearly secondary to
     the filled "Volunteer Now" buttons elsewhere on the page */
  background: transparent;
  border: 2px solid var(--org-accent);
  color: var(--org-accent);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.18s, color 0.18s, transform 0.14s;
}

.ep-btn-attend-primary:hover {
  background: var(--org-accent);
  color: var(--org-accent-contrast);
  transform: translateY(-1px);
}

.ep-btn-attend-primary svg {
  width: 16px; height: 16px;
  stroke: currentColor; fill: none; stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
}

.ep-attend-card-footnote {
  font-size: 12px;
  color: var(--text-3);
  text-align: center;
  line-height: 1.5;
}

.ep-attend-card-footnote a {
  color: var(--org-accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── ATTEND SECTION RESPONSIVE ───────────────────────────── */
@media (max-width: 1024px) {
  .ep-attend-grid { grid-template-columns: 1fr 300px; gap: 40px; }
}

@media (max-width: 768px) {
  .ep-attend-grid { grid-template-columns: 1fr; gap: 32px; }
}

.left-overlay-fade
{
  background: #000;
  background: linear-gradient(90deg,rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%);
}

/* ═══════════════════════════════════════════════════════════
   REQUEST SUBMIT PAGE  (RequestSubmit.cshtml)
   All new selectors are prefixed ep-request-* to avoid
   collisions with the rest of the stylesheet.
═══════════════════════════════════════════════════════════ */

/* ── PAGE WRAPPER ────────────────────────────────────────── */
/* Reuses ep-confirm-page geometry; gives the section-bg
   full-bleed behind the centered card column.              */
.ep-request-page {
  min-height: calc(100vh - 60px);
  background: var(--section-bg);
  padding: 52px 40px 80px;
}

@media (max-width: 480px) {
  .ep-request-page { padding: 32px 20px 64px; }
}


/* ── REQUIRED-FIELD LEGEND ───────────────────────────────── */
/* The * abbr used in the intro card sub-text */
abbr.ep-required-legend {
  text-decoration: none;
  font-weight: 700;
  color: #E53A55;
  font-size: 15px;
}

/* The * abbr used inline next to each label */
abbr.ep-required-star {
  text-decoration: none;
  color: #E53A55;
  margin-left: 3px;
  font-weight: 700;
}


/* ── SELECT ELEMENT ──────────────────────────────────────── */
/* .ep-form-input already applies box model, typography, and
   focus ring.  We layer on the custom arrow here and add
   a wrapper div to position it without z-index hacks.      */

.ep-form-select-wrap {
  position: relative;
}

/* Strip native arrow; padding-right reserves space for ours */
select.ep-form-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: none; /* never put background-image on <select> —
                             it bleeds into the native option list on
                             Windows Chrome/Edge                      */
  padding-right: 42px;
  cursor: pointer;
}

/* Chevron lives on the wrapper so it never touches the option list */
.ep-form-select-wrap::after {
  content: '';
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  pointer-events: none; /* let clicks pass through to the <select> */

  /* SVG chevron as a CSS mask — colour is driven by background-color,
     so it automatically picks up the themed variable on focus.       */
  background-color: var(--text-3);
  -webkit-mask-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.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  mask-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.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  transition: background-color 0.18s;
}

/* Swap to accent colour when the <select> inside is focused */
.ep-form-select-wrap:focus-within::after {
  background-color: var(--org-accent);
}


/* ── FORM FIELD FOOTER ───────────────────────────────────── */
/* Sits below a textarea: error message on the left,
   character counter on the right.                          */
.ep-form-field-footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}


/* ── CHARACTER COUNTER ───────────────────────────────────── */
.ep-form-char-count {
  font-size: 12px;
  color: var(--text-3);
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 0.18s;
}

.ep-form-char-count--warn {
  color: #D97706; /* amber — approaching limit */
}

.ep-form-char-count--over {
  color: #E53A55; /* red — at limit */
  font-weight: 700;
}


/* ── FORM ROW — RESPONSIVE COLLAPSE ─────────────────────── */
/* ep-form-row already uses a two-column grid.
   Collapse to a single column on narrower screens so the
   name/email pair stacks rather than squishing.            */
@media (max-width: 540px) {
  .ep-form-row {
    grid-template-columns: 1fr;
  }
}


/* ── REQUEST PAGE FOOTNOTE ───────────────────────────────── */
.ep-request-footnote {
  margin-top: 16px;
  font-size: 12px;
  color: var(--text-3);
  text-align: center;
  line-height: 1.55;
}

.ep-request-footnote-link {
  color: var(--org-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
}

.ep-request-footnote-link:hover {
  opacity: 0.8;
}


/* ── MASTHEAD PHOTO VARIANT ──────────────────────────────── */
/* Used in PublicList.cshtml via class="ep-masthead ep-masthead--photo".
   Overrides the solid accent background to let a background-image
   show through, then applies the two-layer scrim from the hero.   */
.ep-masthead--photo {
  background-color: var(--org-accent); /* fallback if image fails */
}

.ep-masthead--photo .ep-masthead-overlay {
  position: absolute;
  inset: 0;
  background:
          linear-gradient(
                  to right,
                  rgba(0,0,0,0.60) 0%,
                  rgba(0,0,0,0.30) 60%,
                  rgba(0,0,0,0.05) 100%
          ),
          linear-gradient(
                  to top,
                  rgba(0,0,0,0.55) 0%,
                  rgba(0,0,0,0.20) 50%,
                  rgba(0,0,0,0.00) 100%
          );
  pointer-events: none;
  z-index: 0;
}

/* Suppress the dot-grid texture on photo mastheads — it
   competes with the photograph underneath.               */
.ep-masthead--photo::before {
  display: none;
}

/* ═══════════════════════════════════════════════════════════
   NEWSLETTER PAGES
   All selectors prefixed ep-nl-* to avoid collisions.
   Builds entirely on existing variables and base components.
═══════════════════════════════════════════════════════════ */

/* ── NEWSLETTER GRID (list page) ─────────────────────────── */
.ep-nl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px;
  margin-top: 4px;
}

/* ── NEWSLETTER CARD ─────────────────────────────────────── */
.ep-nl-card {
  background: var(--page-bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: border-color 0.22s, box-shadow 0.22s, transform 0.22s;
}

/* display:flex above would beat the browser's [hidden]{display:none} rule,
   so we re-assert it with higher specificity here. */
.ep-nl-card[hidden] { display: none; }

.ep-nl-card:hover {
  border-color: var(--org-accent);
  box-shadow: var(--shadow-md), 0 0 0 3px var(--org-accent-mid);
  transform: translateY(-3px);
}

/* Coloured top strip — mirrors ep-task-strip */
.ep-nl-card-strip {
  height: 4px;
  background: linear-gradient(90deg, var(--org-accent), var(--org-accent-2));
  flex-shrink: 0;
}

.ep-nl-card-body {
  padding: 20px 22px 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.ep-nl-card-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

/* Envelope icon box */
.ep-nl-icon {
  width: 42px; height: 42px;
  border-radius: 12px;
  background: var(--org-accent-light);
  border: 1px solid var(--org-accent-mid);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.ep-nl-icon svg {
  width: 18px; height: 18px;
  stroke: var(--org-accent); fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

.ep-nl-name-group {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ep-nl-name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.2px;
  line-height: 1.2;
}

/* Frequency badge — top-right, mirrors ep-task-shift-badge */
.ep-nl-freq-badge {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--org-accent);
  background: var(--org-accent-light);
  border: 1px solid var(--org-accent-mid);
  padding: 4px 9px;
  border-radius: 20px;
  white-space: nowrap;
  margin-top: 2px;
}

.ep-nl-desc {
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.65;
  flex: 1;
  margin-bottom: 14px;
}

/* Topic pills */
.ep-nl-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 4px;
}

.ep-nl-topic-pill {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
  background: var(--section-bg);
  border: 1px solid var(--border);
  padding: 3px 9px;
  border-radius: 20px;
  white-space: nowrap;
}

/* ── SUBSCRIBED BADGE (inside card header, above name) ────── */
.ep-nl-subscribed-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--org-accent);
  background: rgba(255,255,255,0.85);
  border: 1px solid var(--org-accent-mid);
  padding: 3px 8px;
  border-radius: 20px;
  width: fit-content;
}

.ep-nl-subscribed-badge svg {
  width: 10px; height: 10px;
  stroke: currentColor; fill: none; stroke-width: 3;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ── CARD FOOTER ─────────────────────────────────────────── */
.ep-nl-card-footer {
  padding: 14px 22px 18px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ep-nl-sub-count {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-3);
  white-space: nowrap;
}

.ep-nl-sub-count svg {
  width: 13px; height: 13px;
  stroke: currentColor; fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  opacity: 0.7;
  flex-shrink: 0;
}

/* Subscribe CTA — mirrors ep-btn-signup */
.ep-nl-btn-subscribe {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: var(--radius-sm);
  background: var(--org-accent);
  color: var(--org-accent-contrast);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: opacity 0.16s, transform 0.14s;
}

.ep-nl-btn-subscribe:hover { opacity: 0.88; transform: translateY(-1px); }

.ep-nl-btn-subscribe svg {
  width: 13px; height: 13px;
  stroke: currentColor; fill: none; stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Manage (subscribed) CTA — ghost variant */
.ep-nl-btn-manage {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--org-accent);
  border: 1.5px solid var(--org-accent);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.16s, color 0.16s;
}

.ep-nl-btn-manage:hover {
  background: var(--org-accent);
  color: var(--org-accent-contrast);
}

/* Subscribed card state — tinted like ep-task-card.enrolled */
.ep-nl-card:has(.ep-nl-subscribed-badge) {
  border-color: var(--org-accent);
  background: var(--org-accent-light);
}

.ep-nl-card:has(.ep-nl-subscribed-badge):hover {
  box-shadow: var(--shadow-md), 0 0 0 3px var(--org-accent-mid);
}

/* ── NEWSLETTER GRID RESPONSIVE ──────────────────────────── */
@media (max-width: 768px) {
  .ep-nl-grid { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════════════════════
   SUBSCRIBE PAGE — additional components
═══════════════════════════════════════════════════════════ */

/* Privacy / consent note */
.ep-nl-consent-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  background: var(--section-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.55;
}

.ep-nl-consent-note svg {
  width: 16px; height: 16px;
  stroke: var(--text-3); fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
  margin-top: 1px;
}

.ep-nl-consent-note strong { color: var(--text); }


/* ═══════════════════════════════════════════════════════════
   UNSUBSCRIBE PAGE — reason picker & warning
═══════════════════════════════════════════════════════════ */

/* Muted amber icon wrap for the unsubscribe hero state */
.ep-nl-unsub-icon-wrap {
  background: color-mix(in srgb, #D97706 12%, transparent);
  border-color: rgba(217, 119, 6, 0.22);
}

.ep-nl-unsub-icon-wrap svg {
  stroke: #D97706;
}

/* ── REASON FIELDSET ─────────────────────────────────────── */
.ep-nl-reason-fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

.ep-nl-reason-legend {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-3);
  margin-bottom: 12px;
  display: block;
}

.ep-nl-reason-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Each radio "row" looks like a selectable list item */
.ep-nl-reason-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  background: var(--section-bg);
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
  position: relative;
}

.ep-nl-reason-option:hover {
  border-color: var(--org-accent);
  background: var(--org-accent-light);
}

/* Visually hide the native radio but keep it accessible */
.ep-nl-reason-radio {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

/* Checked state */
.ep-nl-reason-radio:checked ~ * { /* affects siblings — can't use :has in some older browsers */
}

.ep-nl-reason-option:has(.ep-nl-reason-radio:checked) {
  border-color: var(--org-accent);
  background: var(--org-accent-light);
  box-shadow: 0 0 0 3px var(--org-accent-mid);
}

/* Focus ring on keyboard navigation */
.ep-nl-reason-option:has(.ep-nl-reason-radio:focus-visible) {
  outline: 2.5px solid var(--org-accent);
  outline-offset: 2px;
}

/* Small icon */
.ep-nl-reason-icon {
  width: 34px; height: 34px;
  border-radius: 10px;
  background: var(--page-bg);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background 0.18s, border-color 0.18s;
}

.ep-nl-reason-icon svg {
  width: 15px; height: 15px;
  stroke: var(--text-3); fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

.ep-nl-reason-option:has(.ep-nl-reason-radio:checked) .ep-nl-reason-icon {
  background: rgba(255,255,255,0.8);
  border-color: var(--org-accent-mid);
}

.ep-nl-reason-option:has(.ep-nl-reason-radio:checked) .ep-nl-reason-icon svg {
  stroke: var(--org-accent);
}

/* Label text */
.ep-nl-reason-label {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-2);
  line-height: 1.3;
}

.ep-nl-reason-option:has(.ep-nl-reason-radio:checked) .ep-nl-reason-label {
  color: var(--text);
  font-weight: 600;
}

/* Checkmark — hidden until selected */
.ep-nl-reason-check {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background 0.18s, border-color 0.18s;
}

.ep-nl-reason-check svg {
  width: 10px; height: 10px;
  stroke: transparent; fill: none; stroke-width: 3;
  stroke-linecap: round; stroke-linejoin: round;
  transition: stroke 0.15s;
}

.ep-nl-reason-option:has(.ep-nl-reason-radio:checked) .ep-nl-reason-check {
  background: var(--org-accent);
  border-color: var(--org-accent);
}

.ep-nl-reason-option:has(.ep-nl-reason-radio:checked) .ep-nl-reason-check svg {
  stroke: var(--org-accent-contrast);
}

/* ── UNSUBSCRIBE WARNING BOX ─────────────────────────────── */
.ep-nl-unsub-warning {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  background: color-mix(in srgb, #D97706 8%, transparent);
  border: 1px solid rgba(217, 119, 6, 0.28);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.55;
}

.ep-nl-unsub-warning svg {
  width: 16px; height: 16px;
  stroke: #D97706; fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
  margin-top: 1px;
}

.ep-nl-unsub-warning strong { color: var(--text); }

/* ── UNSUBSCRIBE ACTION ROW ───────────────────────────────── */
/* Footer-style bar: cancel text-link left, confirm button right.
   Mirrors the task-card footer pattern rather than the full-bleed
   ep-confirm-actions layout. */
.ep-nl-unsub-action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 4px;
  flex-wrap: wrap;
}

.ep-nl-unsub-cancel {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-3);
  text-decoration: none;
  transition: color 0.15s;
  white-space: nowrap;
}

.ep-nl-unsub-cancel:hover { color: var(--text-2); }

/* Compact destructive confirm button — sized like ep-btn-signup,
   amber-700 tone to signal irreversibility without full-alarm red. */
.ep-nl-btn-unsub-confirm {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  background: #B45309;
  color: #FFFFFF;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.14s;
  white-space: nowrap;
}

.ep-nl-btn-unsub-confirm:hover  { opacity: 0.88; transform: translateY(-1px); }
.ep-nl-btn-unsub-confirm:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

@media (max-width: 480px) {
  .ep-nl-unsub-action-row   { flex-direction: column-reverse; align-items: stretch; }
  .ep-nl-btn-unsub-confirm  { justify-content: center; }
  .ep-nl-unsub-cancel       { text-align: center; }
}

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 540px) {
  .ep-nl-reason-option { gap: 10px; padding: 10px 12px; }
  .ep-nl-reason-icon   { width: 30px; height: 30px; }
}

/* ═══════════════════════════════════════════════════════════
   JOIN / REGISTER PAGE  (JoinEvent.cshtml)
   All selectors prefixed ep-join-* to avoid collisions.
═══════════════════════════════════════════════════════════ */

/* ── EVENT SUMMARY BAR ──────────────────────────────────── */
/* Compact card that appears at the top of the registration
   page, above the state-specific hero and form content.
   Shows event name, date / time / location pills, and a
   role indicator strip at the bottom.                      */
.ep-join-event-bar {
  background: var(--page-bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin-bottom: 20px;
}

/* Thin gradient accent rule at the very top — mirrors
   ep-task-strip and ep-nl-card-strip.                      */
.ep-join-event-bar-accent {
  height: 4px;
  background: linear-gradient(90deg, var(--org-accent), var(--org-accent-2));
}

.ep-join-event-bar-content {
  padding: 18px 22px 14px;
}

.ep-join-event-bar-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.2px;
  line-height: 1.2;
  margin-bottom: 10px;
}

.ep-join-event-bar-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Reusable info pills inside the bar */
.ep-join-event-bar-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-2);
  background: var(--section-bg);
  border: 1px solid var(--border);
  padding: 4px 10px;
  border-radius: 20px;
  white-space: nowrap;
}

.ep-join-event-bar-pill svg {
  width: 11px; height: 11px;
  stroke: var(--text-3); fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
}

/* Role strip — accent-tinted footer inside the card */
.ep-join-event-bar-role {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 22px;
  border-top: 1px solid var(--border);
  background: var(--org-accent-light);
  font-size: 13px;
  font-weight: 600;
  color: var(--org-accent);
}

.ep-join-event-bar-role svg {
  width: 14px; height: 14px;
  stroke: currentColor; fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
}

/* ── CONTACT PREFERENCE FIELDSET ────────────────────────── */
/* Shown via JS when both email AND phone are filled in.    */
.ep-join-pref-fieldset {
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  background: var(--section-bg);
}

.ep-join-pref-fieldset legend {
  padding: 0 6px;
}

.ep-join-pref-options {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.ep-join-pref-option {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  background: var(--page-bg);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-2);
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s, color 0.18s;
  user-select: none;
}

.ep-join-pref-option:hover {
  border-color: var(--org-accent);
  background: var(--org-accent-light);
  color: var(--org-accent);
}

/* Hide the native radio; style the label instead */
.ep-join-pref-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
}

.ep-join-pref-option:has(input[type="radio"]:checked) {
  border-color: var(--org-accent);
  background: var(--org-accent-light);
  color: var(--org-accent);
  font-weight: 700;
  box-shadow: 0 0 0 3px var(--org-accent-mid);
}

.ep-join-pref-option:has(input[type="radio"]:focus-visible) {
  outline: 2.5px solid var(--org-accent);
  outline-offset: 2px;
}

.ep-join-pref-option svg {
  width: 15px; height: 15px;
  stroke: currentColor; fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
}

/* ── OPT-IN CHECKBOX ────────────────────────────────────── */
.ep-join-optin {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  padding: 2px 0;
}

.ep-join-optin-check {
  width: 18px; height: 18px;
  accent-color: var(--org-accent);
  flex-shrink: 0;
  margin-top: 1px;
  cursor: pointer;
}

.ep-join-optin-label {
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.4;
  user-select: none;
}

/* ── FEE NOTICE ─────────────────────────────────────────── */
/* Amber-tinted info box acknowledging an entrance fee.
   Sits between the form card and the action buttons.       */
.ep-join-fee-notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  margin-bottom: 14px;
  background: rgba(217, 119, 6, 0.07);
  border: 1.5px solid rgba(217, 119, 6, 0.25);
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.5;
}

.ep-join-fee-notice svg {
  width: 18px; height: 18px;
  stroke: #D97706; fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
  margin-top: 1px;
}

.ep-join-fee-notice strong { color: var(--text); }

@media (max-width: 480px) {
  .ep-join-pref-options { flex-direction: column; }
  .ep-join-pref-option  { flex: 1; justify-content: center; }
}


/* ═══════════════════════════════════════════════════════════
   MY REGISTRATIONS PAGE  (MyRegistrations.cshtml)
   All selectors prefixed ep-reg-* to avoid collisions.
═══════════════════════════════════════════════════════════ */

/* ── LOOKUP FORM WRAPPER ─────────────────────────────────── */
/* Centers the lookup / sent-state card when there's no
   account or valid token.                                   */
.ep-reg-lookup {
  max-width: 480px;
  margin: 0 auto;
}

/* ── SECTION LABEL ───────────────────────────────────────── */
.ep-reg-section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-3);
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1.5px solid var(--border);
}

/* ── LIST CONTAINER ──────────────────────────────────────── */
.ep-reg-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}

/* ── INDIVIDUAL REGISTRATION ACCORDION ITEM ─────────────── */
.ep-reg-item {
  background: var(--page-bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.ep-reg-item.open {
  border-color: var(--org-accent);
  box-shadow: var(--shadow-md), 0 0 0 3px var(--org-accent-mid);
}

.ep-reg-item.past    { opacity: 0.78; }
.ep-reg-item.cancelled { opacity: 0.60; }

/* ── ITEM HEADER (always visible) ───────────────────────── */
.ep-reg-item-header {
  display: flex;
  align-items: center;
  min-height: 72px;
  cursor: pointer;
}

/* Left date column */
.ep-reg-date-col {
  width: 64px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px 8px;
  border-right: 1px solid var(--border);
  background: var(--section-bg);
  align-self: stretch;
  transition: background 0.2s;
}

.ep-reg-item.open   .ep-reg-date-col { background: var(--org-accent-light); }
.ep-reg-item.past   .ep-reg-date-col { background: var(--section-bg); }

.ep-reg-date-month {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-3);
  line-height: 1;
}

.ep-reg-date-day {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--text);
}

.ep-reg-item.open      .ep-reg-date-day { color: var(--org-accent); }
.ep-reg-item.past      .ep-reg-date-day { color: var(--text-3); }
.ep-reg-item.cancelled .ep-reg-date-day { color: var(--text-3); }

/* Middle info column */
.ep-reg-info-col {
  flex: 1;
  min-width: 0;
  padding: 14px 16px;
}

.ep-reg-name-row {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  margin-bottom: 5px;
}

.ep-reg-name {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

/* Attendee / Volunteer role pill */
.ep-reg-role-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--org-accent);
  background: var(--org-accent-light);
  border: 1px solid var(--org-accent-mid);
  padding: 3px 8px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
}

.ep-reg-role-pill svg {
  width: 9px; height: 9px;
  stroke: currentColor; fill: none; stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Status badges */
.ep-reg-status-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 20px;
  border: 1px solid;
  white-space: nowrap;
  flex-shrink: 0;
}

.ep-reg-status-badge.upcoming {
  color: var(--org-accent);
  background: var(--org-accent-light);
  border-color: var(--org-accent-mid);
}

.ep-reg-status-badge.past {
  color: var(--text-3);
  background: var(--section-bg);
  border-color: var(--border);
}

.ep-reg-status-badge.cancelled {
  color: #B91C1C;
  background: rgba(185, 28, 28, 0.07);
  border-color: rgba(185, 28, 28, 0.22);
}

/* Time / location meta row */
.ep-reg-meta-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.ep-reg-meta-time { font-size: 12px; color: var(--text-2); }

.ep-reg-meta-sep {
  font-size: 11px;
  color: var(--text-3);
  opacity: 0.5;
}

.ep-reg-meta-loc {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ep-reg-meta-loc svg {
  width: 10px; height: 10px;
  stroke: currentColor; fill: none; stroke-width: 2;
  flex-shrink: 0;
}

/* Right expand column */
.ep-reg-expand-col {
  padding: 0 16px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.ep-reg-expand-btn {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--section-bg);
  border: 1.5px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-3);
  cursor: pointer;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
  flex-shrink: 0;
}

.ep-reg-expand-btn svg {
  width: 14px; height: 14px;
  stroke: currentColor; fill: none; stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform 0.28s cubic-bezier(.22,.61,.36,1);
}

.ep-reg-expand-btn:hover {
  background: var(--org-accent-light);
  border-color: var(--org-accent-mid);
  color: var(--org-accent);
}

.ep-reg-item.open .ep-reg-expand-btn {
  background: var(--org-accent-light);
  border-color: var(--org-accent-mid);
  color: var(--org-accent);
}

.ep-reg-item.open .ep-reg-expand-btn svg {
  transform: rotate(180deg);
}

/* ── FOLDOUT BODY ────────────────────────────────────────── */
/* max-height animation avoids display:none layout thrash.
   JS toggles .open on the parent .ep-reg-item.             */
.ep-reg-item-body {
  overflow: hidden;
  border-top: 0px solid var(--border);
  max-height: 0;
  transition:
    max-height 0.35s cubic-bezier(.22,.61,.36,1),
    border-top-width 0s 0.35s;
}

.ep-reg-item.open .ep-reg-item-body {
  max-height: 600px;
  border-top-width: 1px;
  transition:
    max-height 0.35s cubic-bezier(.22,.61,.36,1),
    border-top-width 0s;
}

.ep-reg-item-body-inner {
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 2-column detail grid inside the foldout */
.ep-reg-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 24px;
}

.ep-reg-detail-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 2px;
}

.ep-reg-detail-value {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.3;
}

/* Compact notification summary row */
.ep-reg-notif-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--section-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.4;
}

.ep-reg-notif-row svg {
  width: 15px; height: 15px;
  stroke: var(--text-3); fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
}

.ep-reg-notif-row strong { color: var(--text); }

/* Action row: prefs / view event / cancel buttons */
.ep-reg-action-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ep-reg-btn-prefs {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 15px;
  border-radius: var(--radius-sm);
  background: var(--page-bg);
  color: var(--text-2);
  border: 1.5px solid var(--border);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.15s, color 0.15s;
}

.ep-reg-btn-prefs:hover {
  border-color: var(--org-accent);
  color: var(--org-accent);
}

.ep-reg-btn-prefs svg {
  width: 13px; height: 13px;
  stroke: currentColor; fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
}

.ep-reg-btn-cancel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 15px;
  border-radius: var(--radius-sm);
  background: transparent;
  color: #B91C1C;
  border: 1.5px solid rgba(185, 28, 28, 0.3);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}

.ep-reg-btn-cancel:hover {
  background: rgba(185, 28, 28, 0.06);
  border-color: #B91C1C;
}

.ep-reg-btn-cancel svg {
  width: 13px; height: 13px;
  stroke: currentColor; fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
}

/* ── PAST-EVENTS TOGGLE BUTTON ───────────────────────────── */
.ep-reg-past-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 28px;
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  background: var(--section-bg);
  border: 1.5px solid var(--border);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
  text-align: center;
  transition: border-color 0.18s, color 0.18s;
}

.ep-reg-past-toggle:hover {
  border-color: var(--org-accent);
  color: var(--org-accent);
}

.ep-reg-past-toggle svg {
  width: 15px; height: 15px;
  stroke: currentColor; fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
  transition: transform 0.28s cubic-bezier(.22,.61,.36,1);
}

.ep-reg-past-toggle.open svg { transform: rotate(180deg); }

/* ── PAST SECTION CONTAINER ──────────────────────────────── */
.ep-reg-past-section { margin-top: 24px; }

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 540px) {
  .ep-reg-detail-grid  { grid-template-columns: 1fr; gap: 12px; }
  .ep-reg-date-col     { width: 52px; }
  .ep-reg-date-day     { font-size: 20px; }
  .ep-reg-action-row   { flex-direction: column; }
  .ep-reg-btn-prefs,
  .ep-reg-btn-cancel   { width: 100%; justify-content: center; }
}


/* ═══════════════════════════════════════════════════════════
   CANCEL REGISTRATION PAGE  (CancelRegistration.cshtml)
   Extends the existing ep-confirm-* system; one new class.
═══════════════════════════════════════════════════════════ */

/* Warning icon wrap — red tint to signal destructive action */
.ep-cancel-icon-wrap {
  background: rgba(185, 28, 28, 0.08);
  border-color: rgba(185, 28, 28, 0.2);
}

.ep-cancel-icon-wrap svg {
  stroke: #B91C1C;
}


/* ═══════════════════════════════════════════════════════════
   CONTACT PREFERENCES PAGE  (ContactPreferences.cshtml)
   All selectors prefixed ep-prefs-* to avoid collisions.
═══════════════════════════════════════════════════════════ */

/* ── SECTION LABEL ───────────────────────────────────────── */
/* Renders as the label bar at the top of each ep-confirm-card
   section; uses background: section-bg like ep-confirm-card-label
   but with a slightly larger font to serve as a sub-heading.  */
.ep-prefs-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 14px 22px 10px;
  border-bottom: 1px solid var(--border);
  background: var(--section-bg);
}

/* ── TIMING OPTIONS ──────────────────────────────────────── */
/* Styled interactive checkboxes, visually consistent with
   the ep-nl-reason-option pattern used on the newsletter
   unsubscribe page.                                          */
.ep-prefs-timing-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 22px 20px;
}

.ep-prefs-timing-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  background: var(--section-bg);
  cursor: pointer;
  position: relative;
  transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
  user-select: none;
}

.ep-prefs-timing-option:hover {
  border-color: var(--org-accent);
  background: var(--org-accent-light);
}

.ep-prefs-timing-option:has(.ep-prefs-timing-check:checked) {
  border-color: var(--org-accent);
  background: var(--org-accent-light);
  box-shadow: 0 0 0 3px var(--org-accent-mid);
}

.ep-prefs-timing-option:has(.ep-prefs-timing-check:focus-visible) {
  outline: 2.5px solid var(--org-accent);
  outline-offset: 2px;
}

/* Visually hidden native checkbox; keyboard accessible */
.ep-prefs-timing-check {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* Small icon box */
.ep-prefs-timing-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--page-bg);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background 0.18s, border-color 0.18s;
}

.ep-prefs-timing-icon svg {
  width: 15px; height: 15px;
  stroke: var(--text-3); fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  transition: stroke 0.18s;
}

.ep-prefs-timing-option:has(.ep-prefs-timing-check:checked) .ep-prefs-timing-icon {
  background: rgba(255, 255, 255, 0.8);
  border-color: var(--org-accent-mid);
}

.ep-prefs-timing-option:has(.ep-prefs-timing-check:checked) .ep-prefs-timing-icon svg {
  stroke: var(--org-accent);
}

/* Label with bold name + subdued detail */
.ep-prefs-timing-label {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-2);
  line-height: 1.35;
}

.ep-prefs-timing-label strong {
  display: block;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 1px;
}

.ep-prefs-timing-option:has(.ep-prefs-timing-check:checked) .ep-prefs-timing-label {
  color: var(--text-2);
}

/* Checkmark indicator — styled like a rounded checkbox */
.ep-prefs-timing-check-mark {
  width: 22px; height: 22px;
  border-radius: 6px;
  background: transparent;
  border: 1.5px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background 0.18s, border-color 0.18s;
}

.ep-prefs-timing-check-mark svg {
  width: 11px; height: 11px;
  stroke: transparent; fill: none; stroke-width: 3;
  stroke-linecap: round; stroke-linejoin: round;
  transition: stroke 0.15s;
}

.ep-prefs-timing-option:has(.ep-prefs-timing-check:checked) .ep-prefs-timing-check-mark {
  background: var(--org-accent);
  border-color: var(--org-accent);
}

.ep-prefs-timing-option:has(.ep-prefs-timing-check:checked) .ep-prefs-timing-check-mark svg {
  stroke: var(--org-accent-contrast);
}

/* ── CHANNEL SELECTOR ────────────────────────────────────── */
/* Radio group for email / SMS / both.                       */
.ep-prefs-channel-group {
  padding: 14px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ep-prefs-channel-note {
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.5;
  margin-bottom: 4px;
}

.ep-prefs-channel-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  background: var(--section-bg);
  cursor: pointer;
  position: relative;
  transition: border-color 0.18s, background 0.18s;
  user-select: none;
}

.ep-prefs-channel-option:hover {
  border-color: var(--org-accent);
  background: var(--org-accent-light);
}

.ep-prefs-channel-option:has(.ep-prefs-channel-radio:checked) {
  border-color: var(--org-accent);
  background: var(--org-accent-light);
  box-shadow: 0 0 0 3px var(--org-accent-mid);
}

.ep-prefs-channel-option:has(.ep-prefs-channel-radio:focus-visible) {
  outline: 2.5px solid var(--org-accent);
  outline-offset: 2px;
}

.ep-prefs-channel-radio {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.ep-prefs-channel-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--page-bg);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.ep-prefs-channel-icon svg {
  width: 14px; height: 14px;
  stroke: var(--text-3); fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

.ep-prefs-channel-option:has(.ep-prefs-channel-radio:checked) .ep-prefs-channel-icon svg {
  stroke: var(--org-accent);
}

.ep-prefs-channel-label {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-2);
  line-height: 1.3;
}

.ep-prefs-channel-option:has(.ep-prefs-channel-radio:checked) .ep-prefs-channel-label {
  font-weight: 600;
  color: var(--text);
}

/* Custom radio indicator (circle with inner dot via box-shadow) */
.ep-prefs-channel-radio-mark {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  flex-shrink: 0;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.ep-prefs-channel-option:has(.ep-prefs-channel-radio:checked) .ep-prefs-channel-radio-mark {
  border-color: var(--org-accent);
  background: var(--org-accent);
  /* Inner white dot */
  box-shadow: inset 0 0 0 3px var(--page-bg);
}

/* ── SUCCESS BANNER ──────────────────────────────────────── */
.ep-prefs-success-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: color-mix(in srgb, var(--org-accent) 8%, var(--page-bg));
  border: 1.5px solid var(--org-accent-mid);
  border-radius: var(--radius-md);
  font-size: 14px;
  color: var(--text-2);
  margin-bottom: 16px;
  animation: fadeUp 0.35s ease both;
}

.ep-prefs-success-banner svg {
  width: 18px; height: 18px;
  stroke: var(--org-accent); fill: none; stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
}

.ep-prefs-success-banner strong { color: var(--text); }

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 480px) {
  .ep-prefs-timing-list   { padding: 12px 16px 16px; }
  .ep-prefs-channel-group { padding: 10px 16px 16px; }
  .ep-prefs-timing-icon   { width: 30px; height: 30px; }
}

/* ═══════════════════════════════════════════════════════════
   AFFILIATE ORGANIZATIONS
   Logo strip. Uses flex-wrap rather than a fixed-column grid
   so it reflows naturally at any viewport width without needing
   its own column-count breakpoints.
═══════════════════════════════════════════════════════════ */
.ep-affiliates-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 16px;
}

.ep-affiliate-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 168px;
  height: 96px;
  padding: 18px 22px;
  background: var(--page-bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}

/* Hover/focus affordances only apply when the tile is a link —
   unlinked orgs render as plain divs and stay static. */
a.ep-affiliate-logo:hover {
  border-color: var(--org-accent);
  box-shadow: var(--shadow-md), 0 0 0 3px var(--org-accent-mid);
  transform: translateY(-2px);
}

a.ep-affiliate-logo:focus-visible {
  outline: 2.5px solid var(--org-accent);
  outline-offset: 2px;
}

.ep-affiliate-logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

@media (max-width: 640px) {
  .ep-affiliates-grid   { gap: 12px; }
  .ep-affiliate-logo    { width: 132px; height: 76px; padding: 14px 18px; }
}

@media (max-width: 400px) {
  .ep-affiliate-logo    { width: 112px; height: 66px; padding: 10px 14px; }
}

img.hero-icon {
  display:inline-block;
  height:72px;
  width:auto;
}