/*
  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;
  overflow-wrap: anywhere;
}

.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-card-header > img {
  height: 52px;
  flex-shrink: 0;
}

.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;
}

/* Circular icon slot, left of the date badge */
.ep-sched-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  align-self: center;
  margin-left: 18px;
}

.ep-sched-icon img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border);
  background: var(--section-bg);
}

/* 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-icon { width: 36px; height: 36px; margin-left: 12px; }
  .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; }
}

/* ── TYPE GROUP (Volunteering vs Attending) ──────────────── */
/* Registrations are split into labelled type-groups; this only
   spaces successive groups apart. Everything inside reuses the
   existing .ep-reg-* rules.                                  */
.ep-reg-group + .ep-reg-group { margin-top: 40px; }


/* ── 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 {
  height: 100%;
}

@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;
}

/* Org icons masked to circles. aspect-ratio squares the box off
   whichever dimension each rule above sets, so the 50% radius is a
   true circle; cover fills that square rather than letterboxing. */
img.hero-icon,
.ep-org-card-header > img,
.ep-affiliate-logo img,
.ep-nav-brand img,
.ep-footer-brand img  {
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  object-fit: cover;
}

/* ═══════════════════════════════════════════════════════════
   DONATE CTA
   Standalone card used by the "Support with a gift" section.
   Reuses .ep-section / .ep-section-heading / .ep-divider from
   the shared section pattern above (~line 441).
═══════════════════════════════════════════════════════════ */
.ep-donate-card {
  max-width: 560px;
  margin: 0 auto;
  padding: 44px 40px;
  text-align: center;
  background: var(--page-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

/* Center the shared heading/divider when they're reused inside this card */
.ep-donate-card .ep-section-heading,
.ep-donate-card .ep-divider {
  margin-left: auto;
  margin-right: auto;
}

.ep-donate-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: var(--org-accent-light);
  border: 1px solid var(--org-accent-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--org-accent);
}

.ep-donate-icon svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ep-donate-body {
  font-size: 15px;
  color: var(--text-2);
  line-height: 1.6;
  max-width: 440px;
  margin: 0 auto 28px;
}

/* Filled gradient pill — same treatment as the primary hero CTA,
   so "Donate" reads as an equally weighted action, not an afterthought. */
.ep-btn-donate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 30px;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--org-accent), var(--org-accent-2));
  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;
}

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

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

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

@media (max-width: 540px) {
  .ep-donate-card { padding: 32px 24px; }
  .ep-btn-donate  { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════
   IN-PAGE ANCHOR OFFSET
   .ep-nav is position:fixed at 60px tall, so every fragment jump
   (#upcoming, #attend, #volunteer-roles, #opportunities, #signup)
   was landing with the target tucked underneath it. Setting this
   on the scroll container fixes href jumps and scrollIntoView
   alike, for every page, without per-target scroll-margin.
═══════════════════════════════════════════════════════════ */
html { scroll-padding-top: 76px; }


/* ═══════════════════════════════════════════════════════════
   SKIP LINK
═══════════════════════════════════════════════════════════ */
/* Off-screen until focused. Sits above the fixed nav (z-index 200)
   so it isn't hidden behind it when it appears.                */
.ep-skip-link {
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 300;
  padding: 0.6rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--org-accent);
  color: var(--org-accent-contrast);
  font-size: 0.875rem;
  font-weight: 700;
  box-shadow: var(--shadow-md);
  transform: translateY(calc(-100% - 1rem));
  transition: transform 0.15s ease;
}

.ep-skip-link:focus {
  transform: translateY(0);
}

/* The skip target carries tabindex="-1" so focus can land on it.
   Suppress the resulting focus ring around the whole page body —
   the ring on the skip link itself already showed the interaction. */
#main:focus { outline: none; }


/* ═══════════════════════════════════════════════════════════
   MAIN MENU (NAV JUMP LIST)
═══════════════════════════════════════════════════════════ */

/* ── BRAND BLOCK ─────────────────────────────────────────── */
/* .ep-nav-left used to be the <a> itself. It is now a flex row
   holding the brand link plus the menu button, so the anchor
   needs its own box.                                         */
.ep-nav-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;          /* lets .ep-nav-org ellipsize */
  border-radius: var(--radius-sm);
}

/* The logo <img> is a bare child of the brand link — it was
   previously relying on the intrinsic 34px size of the asset.
   Pin it so a different-sized upload can't break the nav.    */
.ep-nav-brand img,
.ep-footer-brand img {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
}

.ep-nav-brand:focus-visible,
.ep-nav-menu-btn:focus-visible,
.ep-menu-item:focus-visible {
  outline: 2.5px solid var(--org-accent);
  outline-offset: 2px;
}

/* ── MENU BUTTON ─────────────────────────────────────────── */
.ep-nav-menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: transparent;
  color: var(--text-2);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

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

.ep-nav-menu-btn[aria-expanded="true"] {
  background: var(--section-bg);
  color: var(--text);
  border-color: var(--border-strong);
}

.ep-nav-menu-icon {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

/* Swap hamburger for X based on the button's own state — no JS
   class juggling needed.                                     */
.ep-nav-menu-icon--close                             { display: none; }
.ep-nav-menu-btn[aria-expanded="true"] .ep-nav-menu-icon--open  { display: none; }
.ep-nav-menu-btn[aria-expanded="true"] .ep-nav-menu-icon--close { display: block; }

/* ── BACKDROP ────────────────────────────────────────────── */
/* Always present when the menu is open — it is what makes
   click-outside reliable. Transparent on desktop (the dropdown
   is small and the page behind stays readable), dimmed on
   mobile where the panel is a full-width sheet.              */
.ep-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 190;
  background: rgba(17, 19, 24, 0);
  transition: background 0.18s ease;
}

.ep-menu-backdrop[hidden] { display: none; }

/* ── PANEL ───────────────────────────────────────────────── */
.ep-menu-panel {
  position: fixed;
  top: 60px;                        /* height of .ep-nav */
  left: 32px;                       /* matches .ep-nav desktop padding */
  z-index: 210;
  width: min(23rem, calc(100vw - 4rem));
  max-height: calc(100vh - 76px);
  max-height: calc(100dvh - 76px);
  overflow-y: auto;
  overscroll-behavior: contain;     /* stop scroll chaining to the page */
  background: var(--page-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(-0.5rem);
  transition: opacity 0.16s ease, transform 0.16s cubic-bezier(.22,.61,.36,1);
}

.ep-menu-panel[hidden] { display: none; }

.ep-menu-panel.is-open   { opacity: 1; transform: translateY(0); }
.ep-menu-backdrop.is-open { background: rgba(17, 19, 24, 0); }

.ep-menu-inner {
  padding: 0.75rem;
}

/* ── GROUP LABELS ────────────────────────────────────────── */
/* --text-2 rather than --text-3: at this size --text-3 lands
   around 2.9:1 on white, which fails AA.                     */
.ep-menu-group-label {
  padding: 0.5rem 0.75rem 0.375rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-2);
}

.ep-menu-group-label + .ep-menu-list { margin-bottom: 0.25rem; }

.ep-menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ── ITEMS ───────────────────────────────────────────────── */
.ep-menu-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  border-radius: var(--radius-sm);
  border-left: 3px solid transparent;
  color: var(--text);
  transition: background 0.14s;
}

.ep-menu-item:hover { background: var(--section-bg); }

/* Current page: accent stripe + tint + weight change. Three
   redundant signals, so it never depends on hue alone.       */
.ep-menu-item[aria-current="page"] {
  background: var(--org-accent-light);
  border-left-color: var(--org-accent);
}

.ep-menu-item[aria-current="page"] .ep-menu-item-label {
  font-weight: 700;
}

.ep-menu-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.125rem;
  height: 2.125rem;
  flex-shrink: 0;
  border-radius: 9px;
  background: var(--section-bg);
  color: var(--text-2);
}

.ep-menu-item:hover .ep-menu-item-icon,
.ep-menu-item[aria-current="page"] .ep-menu-item-icon {
  background: var(--org-accent);
  color: var(--org-accent-contrast);
}

.ep-menu-item-icon svg {
  width: 1.0625rem;
  height: 1.0625rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ep-menu-item-body {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.ep-menu-item-label {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
}

.ep-menu-item-desc {
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--text-2);
}

/* ── PANEL RESPONSIVE ────────────────────────────────────── */
/* At and below the nav's own mobile breakpoint the dropdown
   becomes a full-width sheet hanging off the nav bar.        */
@media (max-width: 768px) {
  .ep-menu-panel {
    left: 0;
    right: 0;
    width: auto;
    max-height: calc(100vh - 60px);
    max-height: calc(100dvh - 60px);
    border-left: none;
    border-right: none;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    transform: translateY(-0.75rem);
  }

  .ep-menu-backdrop.is-open { background: rgba(17, 19, 24, 0.42); }

  .ep-menu-inner { padding: 0.75rem 0.5rem 1.25rem; }
}

/* Very narrow phones: the org name, the menu button label and the
   page CTA can't all fit. Drop the button's text — the icon plus
   its aria-label still identifies it, and "Menu" is contained in
   "Main menu" so the accessible name still matches what a speech
   user would say.                                            */
@media (max-width: 560px) {
  .ep-nav-menu-btn-label { display: none; }
  .ep-nav-menu-btn       { padding: 0.4rem 0.5rem; }
}

/* Scroll lock while the sheet is open. Applied by JS only when the
   sheet breakpoint is active.                                */
body.ep-menu-locked {
  overflow: hidden;
}


/* ═══════════════════════════════════════════════════════════
   REDUCED MOTION
   Honours the OS-level "reduce motion" setting across every
   page: entrance animations, the pulsing live-event ring, the
   float bar, and smooth scrolling all resolve instantly.
   Animation fill-mode is 'both' throughout, so elements still
   settle in their final visible state.
═══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* ═══════════════════════════════════════════════════════════
   VOLUNTEER DASHBOARD — ep-dash-*
   Layout-only additions for the signed-in volunteer dashboard.
   Deliberately reuses existing components rather than duplicating
   them:
     - .ep-event-list / .ep-event-row / .ep-sched-*  (schedule rows)
     - .ep-share-card / .ep-share-icon / .ep-share-title / .ep-share-desc
       (CTA card body)
     - .ep-task-enrolled-badge                       (featured-CTA pill)
     - .ep-confirm-card / .ep-confirm-card-label     (history panel shell)
     - .ep-reg-detail-grid / .ep-reg-detail-label/-value (lifetime stats)
     - .ep-sched-fill-bar-wrap / .ep-sched-fill-bar  (category bars)
═══════════════════════════════════════════════════════════ */

/* ── TOP ROW: upcoming events + volunteer shifts ─────────── */
.ep-dash-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}

.ep-dash-panel {
  background: var(--page-bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.ep-dash-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  background: var(--section-bg);
  border-bottom: 1px solid var(--border);
}

.ep-dash-panel-head-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  min-width: 0;
}

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

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

.ep-dash-panel-link {
  font-size: 13px;
  font-weight: 700;
  color: var(--org-accent);
  white-space: nowrap;
  flex-shrink: 0;
  transition: opacity 0.15s;
}

.ep-dash-panel-link:hover { opacity: 0.7; }

.ep-dash-panel-link:focus-visible {
  outline: 2.5px solid var(--org-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Nested schedule list loses its own border/shadow/radius — the
   panel already supplies that chrome, so a second one would just
   double the border weight along every edge. */
.ep-dash-panel-body .ep-event-list {
  border: none;
  box-shadow: none;
  border-radius: 0;
}

.ep-dash-panel-body .ep-empty-state { padding: 36px 20px; }
.ep-dash-panel-body .ep-empty-state svg { width: 36px; height: 36px; margin-bottom: 12px; }
.ep-dash-panel-body .ep-empty-title { font-size: 16px; }
.ep-dash-panel-body .ep-empty-sub { font-size: 13px; }


/* ── FOUR PRIMARY STAT TILES ─────────────────────────────── */
.ep-dash-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.ep-dash-stat-tile {
  background: var(--page-bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 26px 20px 24px;
  text-align: center;
  min-width: 0;
}

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

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

.ep-dash-stat-value {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 38px);
  font-weight: 700;
  color: var(--text);
  line-height: 1.15;
  margin-bottom: 4px;
  /* Long formatted numbers (e.g. "1,240") shrink to fit rather than
     wrapping or overflowing a narrow tile. */
  overflow-wrap: anywhere;
}

.ep-dash-stat-label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-3);
}


/* ── ATTENTION-GRABBING CTA CARDS ────────────────────────── */
.ep-dash-cta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 18px;
  align-items: stretch;
}

/* Combined with .ep-share-card (icon/title/desc + hover-lift are
   defined in the SPREAD THE WORD section above); this modifier just
   stretches the card to the grid row height and pins the action
   label to the bottom so uneven description lengths still line up. */
.ep-dash-cta-card {
  height: 100%;
  justify-content: space-between;
}

.ep-dash-cta-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--org-accent);
  margin-top: 6px;
}

.ep-dash-cta-action svg {
  width: 13px; height: 13px;
  stroke: currentColor; fill: none; stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform 0.15s;
}

.ep-dash-cta-card:hover .ep-dash-cta-action svg { transform: translateX(3px); }

/* Featured / personalized recommendation. Border + tint communicate
   priority; the "Matches your skills" badge (reusing
   .ep-task-enrolled-badge) states it explicitly so the distinction
   isn't carried by colour alone. */
.ep-dash-cta-card.featured {
  border-color: var(--org-accent);
  background: var(--org-accent-light);
}

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


/* ── LIFETIME HISTORY PANEL ──────────────────────────────── */
.ep-dash-card-pad { padding: 20px 22px 22px; }

.ep-dash-history-breakdown {
  border-top: 1px solid var(--border);
  padding: 18px 22px 22px;
}

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

.ep-dash-history-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 0;
}

.ep-dash-history-row-name {
  width: 140px;
  flex-shrink: 0;
  font-size: 13px;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Overrides the fixed 80px width from .ep-sched-fill-bar-wrap so the
   bar fills the remaining row width instead of a short fixed track. */
.ep-dash-history-bar-wrap {
  width: auto;
  flex: 1;
}

.ep-dash-history-row-hours {
  width: 52px;
  flex-shrink: 0;
  text-align: right;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-3);
}


/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .ep-dash-cards-grid   { grid-template-columns: 1fr; }
  .ep-dash-stats-grid   { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .ep-dash-panel-head-title { font-size: 15px; }
  .ep-dash-history-row-name { width: 92px; font-size: 12px; }
  .ep-dash-stat-tile        { padding: 22px 16px 20px; }
}

@media (max-width: 420px) {
  .ep-dash-stats-grid { grid-template-columns: 1fr; }
}

/* Row is now a non-interactive wrapper; this inner link recreates the
   flex layout the row itself used to provide as an <a>. */
.ep-sched-link {
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: stretch;
  text-decoration: none;
  color: inherit;
}

.ep-dash-complete-form { display: flex; }

.ep-dash-complete-btn { flex-shrink: 0; }

@media (max-width: 480px) {
  /* Icon-only on narrow screens — label text wraps the row otherwise. */
  .ep-dash-complete-btn .ep-dash-complete-label { display: none; }
  .ep-dash-complete-btn { padding: 9px 11px; }
}

/* Log out button: reset <button> chrome, then inherit the item layout */
.ep-menu-item--btn {
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  text-align: left;
}

/* ═══════════════════════════════════════════════════════════
   SCREEN-READER-ONLY UTILITY
   PublicView.cshtml already applies .sr-only in three places
   (the fill-banner labels), but the class was never defined —
   so that text is currently rendering on screen and reading
   out twice next to its aria-hidden visual twin. This is the
   standard clip-rect implementation: it stays in the a11y
   tree and in the tab/reading order, unlike display:none.
═══════════════════════════════════════════════════════════ */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Skip-link pattern: a .sr-only element that should become visible
   when it receives keyboard focus. */
.sr-only-focusable:focus,
.sr-only-focusable:focus-visible {
  position: static;
  width: auto; height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
}


/* ═══════════════════════════════════════════════════════════
   ROLE SKILL MATCH  (VolunteerSignup.cshtml)

   Shows the skills a role asks for and the level it asks for
   them at, checked against the levels on the signed-in
   volunteer's profile. Three states per row: meets, below,
   not listed.

   Sizes here are in rem rather than the px used elsewhere in
   this file, so they scale with the reader's browser font-size
   setting. 1rem = the user's root size (16px by default), so
   these render identically to the surrounding px values at
   default settings and grow correctly when the reader has
   turned text up.

   Reuses rather than duplicates:
     .ep-confirm-card / .ep-confirm-card-label   card shell
     .ep-task-req-pill / .ep-task-reqs           soft-requirement pills
     .ep-signin-nudge*                           the "add your skills" CTA

   COLOUR IS NEVER THE SIGNAL. Each state differs by icon
   shape, by background lightness, and by its status wording.
   Status text is always --text-2 (8.9:1 on white) and never
   --org-accent, because --org-accent is injected per-
   organization by _PublicLayout and cannot be assumed to
   clear 4.5:1.
═══════════════════════════════════════════════════════════ */

/* Soft, role-wide requirements ("Training provided") sit above the
   per-skill list — they apply to the role, not to any one skill. */
.ep-skill-notes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 16px 22px 0;
}

/* Summary line and the "no skills required" / "sign in to compare"
   fallbacks all share this. */
.ep-skill-note {
  padding: 16px 22px 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--text-2);
}

.ep-skill-summary-count {
  font-weight: 700;
  color: var(--text);
}

.ep-skill-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 22px 18px;
}

/* Named areas rather than flex: the level detail is a second line that has
   to sit under the name but stay clear of the icon gutter, and the status
   badge has to hold one right-hand alignment down the whole list instead
   of tracking each skill name's width. The detail area simply collapses
   on rows that don't render one (the not-signed-in state). */
.ep-skill-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  grid-template-areas:
    "icon name   status"
    "icon detail detail";
  align-items: center;
  column-gap: 12px;
  row-gap: 5px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--page-bg);
}

/* Three match states, separated on THREE axes at once — icon shape,
   background lightness, and the status wording — so the list stays
   readable in greyscale, under any org accent, and for readers with any
   form of colour vision deficiency. No hue anywhere carries meaning. */
.ep-skill-row--meets {
  border-color: var(--org-accent-mid);
  background: var(--org-accent-light);
}

.ep-skill-row--below {
  border-color: var(--border-strong);
  background: var(--section-bg);
}

.ep-skill-row--missing {
  border-style: dashed;
  background: var(--page-bg);
}

.ep-skill-icon {
  grid-area: icon;
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid var(--border-strong);
  background: var(--section-bg);
}

.ep-skill-row--meets .ep-skill-icon {
  border-color: var(--org-accent-mid);
  background: var(--page-bg);
}

.ep-skill-icon svg {
  width: 14px; height: 14px;
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* --text-2, not --text-3: --text-3 is 2.95:1 against --section-bg,
     under the 3:1 floor for meaningful non-text content. */
  stroke: var(--text-2);
}

.ep-skill-row--meets .ep-skill-icon svg { stroke: var(--org-accent); }

.ep-skill-name {
  grid-area: name;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
  /* Skill names are org-authored free text; a long one breaks rather than
     widening the grid and pushing the status column off-screen. */
  overflow-wrap: anywhere;
}

.ep-skill-status {
  grid-area: status;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-2);
  white-space: nowrap;
}

/* ── LEVEL DETAIL LINE ──────────────────────────────────── */
.ep-skill-detail {
  grid-area: detail;
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}

.ep-skill-detail-text {
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--text-2);
}

.ep-skill-detail-text strong {
  font-weight: 700;
  color: var(--text);
}

.ep-skill-detail-sep { padding: 0 1px; }

/* ── LEVEL GAUGE ────────────────────────────────────────── */
/* Four segments, one per level above Unskilled; Unskilled is the empty
   gauge rather than a segment. Purely decorative and aria-hidden — the
   declared and required levels are both named in the text beside it, so
   nothing is lost if it isn't rendered or isn't perceived.

   Three segment appearances, which is what makes the gap legible at a
   glance: filled (the volunteer has reached this level), required-but-
   empty (a darker track — this is the shortfall), and beyond-requirement
   (a faint track). */
.ep-skill-gauge {
  display: inline-flex;
  gap: 3px;
  flex-shrink: 0;
}

.ep-skill-gauge-seg {
  width: 16px;
  height: 6px;
  border-radius: 3px;
  background: var(--border);
}

.ep-skill-gauge-seg.is-required { background: var(--border-strong); }

.ep-skill-gauge-seg.is-filled { background: var(--text-2); }

.ep-skill-row--meets .ep-skill-gauge-seg.is-filled { background: var(--org-accent); }

/* ── CTA: profile has no skill levels recorded ──────────── */
/* .ep-signin-nudge supplies the tinted box, flex layout and button; this
   only re-boxes it for the inside of a card. */
.ep-skill-cta {
  margin: 16px 22px 20px;
}

/* ── EXTRA PROFILE SKILLS ───────────────────────────────── */
.ep-skill-extra {
  border-top: 1px solid var(--border);
  padding: 14px 22px 16px;
}

/* --text-2 rather than the --text-3 used by the other *-label classes in
   this file: at this size --text-3 is 3.14:1 on white, which fails AA for
   normal text. See the contrast note at the end of this file. */
.ep-skill-extra-label {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: 9px;
}

.ep-skill-extra-hint {
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: none;
}

.ep-skill-extra .ep-task-reqs { margin-bottom: 10px; }

/* Level suffix inside a requirement pill. Separated by a rule rather than
   a "·" so it doesn't read as part of the skill name in speech output. */
.ep-skill-pill-level {
  margin-left: 6px;
  padding-left: 6px;
  border-left: 1px solid var(--border-strong);
  font-weight: 700;
  color: var(--text-2);
}

.ep-skill-manage-link {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-2);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.15s;
}

.ep-skill-manage-link:hover,
.ep-skill-manage-link:focus-visible { color: var(--org-accent); }

/* ── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 560px) {
  /* The status badge drops onto its own line rather than being squeezed
     to one word per line next to a wrapping skill name. It stays out of
     the icon gutter so the three lines read as one block. */
  .ep-skill-row {
    grid-template-columns: 28px minmax(0, 1fr);
    grid-template-areas:
      "icon name"
      "icon status"
      "icon detail";
    align-items: start;
    row-gap: 4px;
  }

  .ep-skill-status { white-space: normal; }

  /* The icon is centred against the name line specifically, not the full
     three-line block, so it still reads as belonging to the name. */
  .ep-skill-icon { margin-top: 1px; }
}

@media (max-width: 480px) {
  /* Match the tighter gutters the card uses at this width. */
  .ep-skill-notes,
  .ep-skill-note,
  .ep-skill-list,
  .ep-skill-extra { padding-left: 16px; padding-right: 16px; }

  .ep-skill-cta   { margin-left: 16px; margin-right: 16px; }
}


/* ═══════════════════════════════════════════════════════════
   SMALL FIXES PULLED OUT OF VolunteerSignup.cshtml
═══════════════════════════════════════════════════════════ */

/* Was an inline style with opacity:0.75 over --org-accent, which put it
   below 4.5:1 on most brand palettes. Fixed colour, rem-based size. */
.ep-join-event-bar-slots {
  margin-left: auto;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text-2);
}

/* The role strip is a non-wrapping flex row; on a narrow phone the
   role name and the slot count collide. Allow the count to wrap under
   and re-align it left so it doesn't hang off the right edge. */
@media (max-width: 420px) {
  .ep-join-event-bar-role      { flex-wrap: wrap; row-gap: 4px; }
  .ep-join-event-bar-slots     { margin-left: 0; width: 100%; }
}

/* Was an inline style on the "My Registrations" link in the success
   state. Same appearance, but now reusable and focusable-visible. */
.ep-inline-link {
  color: var(--org-accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* ═══════════════════════════════════════════════════════════
   LANDING PAGE  (Index.cshtml)  —  ep-lp-*

   Append to the end of event-public.css, before the closing
   "NOT CHANGED" note.

   Two kinds of rule live here:

     .ep-lp-*      genuinely new components (three of them).
     .ep-landing   scoped overrides of shared components. The
                   page wrapper exists purely as a scope hook so
                   this page can diverge without restyling
                   PublicView / PublicList / PublicDashboard.

   All sizes are rem so they track the browser's font setting.
   (body still carries font-size:16px, which overrides the user's
   default for anything inheriting or using em — worth fixing
   separately; rem is measured off <html> and is unaffected.)
═══════════════════════════════════════════════════════════ */


/* ── KEYBOARD FOCUS ──────────────────────────────────────── */
/* This page is almost entirely links, and several of the classes
   it reuses (.ep-btn-hero-vol, a.ep-share-card, .ep-event-row)
   have no focus-visible rule of their own — they fall back to the
   UA ring, which is close to invisible on the photo hero.

   --text rather than --org-accent as the default: --text is
   #111318, so it clears 3:1 against --page-bg, --section-bg and
   --org-accent-light no matter what hue the org picks. The two
   dark-background cases below are overridden to a colour the org
   has already guaranteed is readable there. */
.ep-landing a:focus-visible,
.ep-landing button:focus-visible {
  outline: 3px solid var(--text);
  outline-offset: 3px;
}

.ep-hero--landing a:focus-visible,
.ep-lp-spotlight a:focus-visible { outline-color: #FFFFFF; }


/* ── CONTRAST REPAIRS, SCOPED ────────────────────────────── */
/* --text-3 is 3.14:1 on --page-bg and 2.95:1 on --section-bg;
   both fail AA for normal text, as the note at the foot of this
   file already records. These two classes carry body copy on this
   page, so they are re-pointed at --text-2 (8.9:1 on --page-bg).
   Scoped, so it stays a landing-page fix rather than the global
   restyle that note is deferring. */
.ep-landing .ep-share-desc,
.ep-landing .ep-attend-card-footnote {
  color: var(--text-2);
}


/* ═══════════════════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════════════════ */

/* Taller than the event hero — this is the only screen most
   visitors judge the site on. svh rather than vh so the mobile
   URL bar collapsing doesn't resize the hero mid-scroll; the vh
   line is the fallback for browsers without svh. */
.ep-hero--landing { min-height: max(600px, 78vh); }

@supports (height: 100svh) {
  .ep-hero--landing { min-height: max(600px, 78svh); }
}

/* Shown only if the photo is missing or fails to load. Neutral base with
   the accent as a wash rather than a full-bleed field of it — at this
   size the brand colour is scenery, not a signal. */
.ep-hero--landing .ep-hero-image {
  background: linear-gradient(
          135deg,
          var(--text) 0%,
          color-mix(in srgb, var(--org-accent) 32%, var(--text)) 55%,
          var(--text) 100%
  );
}

.ep-hero--landing .ep-hero-content { max-width: 46rem; }

/* The copy sits on a translucent panel instead of straight on the
   photo. .ep-hero-overlay is tuned for the stock landscape; once an
   org uploads its own photo the scrim alone can't be relied on, and
   this panel puts a known floor under the white text's contrast. */
.ep-lp-hero-card {
  padding: clamp(1.25rem, 4vw, 2.25rem);
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: var(--radius-xl);
  background: rgba(12, 14, 20, 0.45);
  backdrop-filter: blur(10px) saturate(115%);
  -webkit-backdrop-filter: blur(10px) saturate(115%);
  box-shadow: var(--shadow-lg);
}

/* Larger than .ep-hero-title's clamp, and with both ends in rem so
   the type still scales when the reader raises their default font
   size — a px clamp pins it shut. */
.ep-hero--landing .ep-hero-title {
  font-size: clamp(2rem, 7vw, 4.25rem);
  margin-bottom: 0.75rem;
  /* The org name is interpolated into the headline and can be any
     length; balance stops a long one leaving a single orphan word on
     the last line. Ignored by browsers that don't support it. */
  text-wrap: balance;
}

.ep-hero--landing .ep-hero-tagline {
  font-size: 1.0625rem;
  max-width: 32rem;
}


/* ═══════════════════════════════════════════════════════════
   SCHEDULE SPOTLIGHT
   Full-width accent panel; the page's second route to /e/all.
═══════════════════════════════════════════════════════════ */
.ep-lp-spotlight {
  /* Held as a custom property rather than written inline, so the photo
     below can bleed by exactly this much without repeating the clamp
     (and drifting from it later). */
  --lp-pad: clamp(1.75rem, 4vw, 3rem);
  position: relative;
  overflow: hidden;
  padding: var(--lp-pad);
  border-radius: var(--radius-xl);
  /* Neutral, not --org-accent. A panel this size is a field of colour
     rather than an accent, and it reads differently for every brand hue
     — some are fine, some are shouting. --text is the same surface
     .ep-footer and .ep-float-bar already use, so it is a material the
     page has elsewhere, and it leaves the brand colour to do its work
     on the button where it carries meaning. */
  background: var(--text);
  box-shadow: var(--shadow-md);
}

/* Same dot grid as .ep-masthead::before — the texture is what ties this
   panel to the rest of the product now that the colour doesn't. */
.ep-lp-spotlight::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.10) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}

.ep-lp-spotlight-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 21rem);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: center;
}

.ep-lp-spotlight-copy { min-width: 0; }

/* Bleeds to the panel's top, right and bottom edges; overflow:hidden on
   the panel clips it back to the corner radius.

   The <img> is wrapped rather than being the grid item itself, for two
   reasons. align-self:stretch on a replaced element leaves the height
   resolving from the file's own aspect ratio, so a portrait photo drags
   the whole panel to its own height; and negative margins widen an
   auto-width block but not a replaced element, so the right bleed
   silently does nothing. A plain block does both correctly, and the
   image then fills it with object-fit.

   The background is the floor for a failed load — with alt="" a broken
   image draws nothing at all, which would leave a hole showing the dot
   grid. */
.ep-lp-spotlight-media {
  display: block;
  align-self: stretch;
  width: calc(100% + var(--lp-pad));
  position: relative;
  min-height: 22rem;
  margin: calc(var(--lp-pad) * -1) calc(var(--lp-pad) * -1) calc(var(--lp-pad) * -1) 0;
  overflow: hidden;
  background: var(--text-2);
}

/* Taken out of flow on purpose. In flow, height:100% is indefinite while
   the grid is still measuring the row, so the browser falls back to the
   file's intrinsic height and the photo's own proportions end up setting
   the panel's height. Absolute positioning removes it from that
   measurement entirely — the wrapper's min-height decides the size and
   the photo just fills it. */
.ep-lp-spotlight-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ep-lp-spotlight-title {
  font-family: var(--font-display);
  font-size: clamp(1.625rem, 3.4vw, 2.5rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  margin-bottom: 0.5rem;
  text-wrap: balance;
}

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

/* Softened white is safe here in a way it wasn't when this panel was
   accent-coloured: --text is a fixed token, so the ratio is computable
   rather than dependent on whatever hue the org configured. At 0.82 over
   #111318 this lands around 12:1. */
.ep-lp-spotlight-sub {
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
  max-width: 34rem;
}

/* Reuses .ep-btn-signup — accent fill, accent-contrast label — which is
   the same pairing .ep-float-cta uses on .ep-float-bar's --text surface,
   so an accent button on near-black is already proven in this file.
   This modifier only resizes it and stops the flex box filling the
   column. */
.ep-lp-btn-lg {
  width: fit-content;
  margin-top: 1.5rem;
  padding: 0.9375rem 1.75rem;
  font-size: 1rem;
}

.ep-lp-btn-lg svg { width: 1.125rem; height: 1.125rem; }


/* ═══════════════════════════════════════════════════════════
   DESTINATION CARDS
   Body and hover come from .ep-share-card + .ep-dash-cta-card;
   this only scales them up for a landing-page context.
═══════════════════════════════════════════════════════════ */
/* .ep-share-card is align-items:flex-start, which leaves the text block
   shrink-to-fit — the descriptions wrap well short of the card's right
   edge and the three cards rag differently. Stretch instead; the icon
   has an explicit width so it is unaffected. */
.ep-lp-card {
  overflow: hidden;   /* clips .ep-lp-card-media to the corner radius */
  padding: 1.75rem 1.5rem 1.5rem;
  gap: 0.75rem;
  align-items: stretch;
  /* .ep-dash-cta-card is justify-content:space-between, which spreads
     the slack between all three children — a card with a two-line
     description drops its title below its neighbours'. Pack from the
     top and let the action row alone take up the slack. */
  justify-content: flex-start;
}

.ep-lp-card .ep-dash-cta-action { margin-top: auto; }

/* Full-bleed thumbnail. The negative margins are the card's own padding
   inverted; overflow:hidden on the card clips the top corners. The
   aspect-ratio holds the box open whether or not the file loads, so a
   missing image can't collapse the card or shift what is under it. */
.ep-lp-card-media {
  display: block;
  position: relative;   /* positioning context for the icon chip */
  margin: -1.75rem -1.5rem 0.5rem;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--org-accent-light);
}

.ep-lp-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* A badge pinned inside the thumbnail, not a flex sibling straddling its
   bottom edge. The straddling version positioned itself with a negative
   margin against the media box's height, so anything that made that box
   shorter than expected dragged the chip up under the card's
   overflow:hidden and clipped it to a sliver of border.

   Two other things changed with it. The background is --page-bg, not the
   inherited --org-accent-light: that was the same colour as the media
   box's own empty state, so before the photo loaded the chip was a mint
   square on a mint field and only its border showed. And the shadow is
   a real drop shadow rather than a --page-bg ring, since a ring only
   separates the chip from a background that happens to match it. */
.ep-lp-card .ep-share-icon {
  position: absolute;
  top: 0.875rem;
  left: 0.875rem;
  width: 3rem; height: 3rem;
  border-radius: 12px;
  background: var(--page-bg);
  border-color: var(--border-strong);
  box-shadow: 0 1px 3px rgba(17, 19, 24, 0.24), 0 4px 10px rgba(17, 19, 24, 0.16);
}

.ep-lp-card .ep-share-icon svg { width: 1.375rem; height: 1.375rem; }

.ep-lp-card .ep-share-title {
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 0.375rem;
}

.ep-lp-card .ep-share-desc { font-size: 0.875rem; }


/* ═══════════════════════════════════════════════════════════
   ACCOUNT SECTION
═══════════════════════════════════════════════════════════ */

/* Sits above .ep-attend-card-header, which is already the accent block —
   so the card reads photo / accent band / action, top to bottom. */
.ep-lp-account-media {
  width: 100%;
  /* height:auto is load-bearing. The width/height attributes on the tag
     are presentational hints that set real CSS width and height, so
     without this the image renders at its literal 450px and ignores
     aspect-ratio. The other images on this page escape it only because
     they already set an explicit height. */
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--org-accent-light);
}


/* .ep-btn-signup is already a centred flex row; it just has no
   width of its own, and it's the primary action in a fixed 340px
   column here rather than one button among several in a card grid. */
.ep-lp-btn-block {
  width: 100%;
  padding: 0.9375rem 1.25rem;
  font-size: 0.9375rem;
}


/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Single column: copy first, then the photo bleeding to the panel's
     bottom three edges instead of its right three. */
  .ep-lp-spotlight-inner { grid-template-columns: 1fr; }
  .ep-lp-btn-lg          { width: 100%; }

  .ep-lp-spotlight-media {
    align-self: start;
    width: calc(100% + var(--lp-pad) * 2);
    min-height: 0;
    aspect-ratio: 16 / 9;
    margin: 0 calc(var(--lp-pad) * -1) calc(var(--lp-pad) * -1);
  }
}

@media (max-width: 480px) {
  .ep-lp-card                { padding: 1.375rem 1.25rem 1.25rem; }
  /* Only the bleed margins need to track the card's smaller padding —
     the chip is positioned against the media box, not the card. */
  .ep-lp-card-media          { margin: -1.375rem -1.25rem 0.5rem; }
  .ep-lp-card .ep-share-icon { top: 0.75rem; left: 0.75rem; width: 2.75rem; height: 2.75rem; }
}


/* ═══════════════════════════════════════════════════════════
   FORCED COLOURS
   The hero puts text over a photo, which Windows High Contrast
   can't remap — the photo stays, the text becomes CanvasText, and
   the two collide. Drop the photo and its scrim and give the panel
   an opaque system background.
═══════════════════════════════════════════════════════════ */
@media (forced-colors: active) {
  .ep-hero--landing .ep-hero-image,
  .ep-hero--landing .ep-hero-overlay { display: none; }

  .ep-lp-hero-card {
    background: Canvas;
    border-color: CanvasText;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* These three get their shape from a background fill, which forced
     colours flattens — leaving them looking like bare links next to
     .ep-btn-hero-attend, which keeps its border. currentColor resolves
     to LinkText on all three, so the outline is guaranteed visible. */
  .ep-landing .ep-btn-hero-vol,
  .ep-landing .ep-btn-signup {
    border: 1px solid currentColor;
  }

  /* Forced colours can't remap a photograph, so these keep their own
     palette while everything around them collapses to two system
     colours — which is exactly the noise the mode exists to remove.
     They are decorative, so nothing is lost by dropping them. */
  .ep-lp-spotlight-media,
  .ep-lp-account-media { display: none; }

  /* The card thumbnail is NOT hidden here, unlike the other two: the
     icon chip lives inside it, and it is the only thing telling the
     three cards apart at a glance. Flattened to a plain bordered strip
     instead, with the photo itself dropped. */
  .ep-lp-card-media {
    aspect-ratio: auto;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid CanvasText;
    padding: 0.875rem;
  }

  .ep-lp-card-media img { display: none; }

  .ep-lp-card .ep-share-icon {
    position: static;
    box-shadow: none;
  }
}
/* ═══════════════════════════════════════════════════════════
   MONTH CALENDAR  (Calendar.cshtml)  —  ep-mcal-*

   "mcal" rather than "cal": .ep-cal-btn / #ep-cal-panel already
   belong to the add-to-calendar buttons on PublicView.

   Reuses rather than duplicates:
     .ep-masthead*                          header
     .ep-section* / .ep-divider             section shell + heading row
     .ep-filter-bar / .ep-filter-tab*       filter toggles
     .ep-search-*                           search box
     .ep-empty-state                        no-results message
     .sr-only                               spoken-only text

   One markup, two layouts: a 7-column grid, and below 42.5em an
   agenda that drops days with nothing in them. The breakpoint is
   in em, so a reader who enlarges text gets the agenda sooner
   instead of a squeezed grid; it also covers 400% zoom reflow.

   COLOUR IS NEVER THE SIGNAL. Enrolled chips carry a check mark,
   full chips are hollow with a dashed outline, today is a filled
   disc, the pressed filter has an inset ring. Text is only ever
   --text or --text-2 on light fills, or --org-accent-contrast on
   --org-accent, since --org-accent itself can't be assumed to
   clear 4.5:1. rem throughout.
═══════════════════════════════════════════════════════════ */

/* ── PAGE SCOPE: FOCUS + CONTRAST REPAIRS ────────────────── */
/* Same approach as .ep-landing: --text clears 3:1 on every light
   surface regardless of the org's hue. .ep-search-input sets
   outline:none, which this out-ranks. */
.ep-mcal-page a:focus-visible,
.ep-mcal-page button:focus-visible,
.ep-mcal-page input:focus-visible {
  outline: 3px solid var(--text);
  outline-offset: 2px;
}

/* --text-3 is 3.14:1 on --page-bg and 2.95:1 on --section-bg. */
.ep-mcal-page .ep-filter-tab,
.ep-mcal-page .ep-empty-state,
.ep-mcal-page .ep-search-input::placeholder {
  color: var(--text-2);
}

.ep-mcal-page .ep-filter-tab.active,
.ep-mcal-page .ep-filter-tab:hover {
  color: var(--text);
}

/* The stock active state is white-on-near-white plus a faint shadow.
   The ring makes "pressed" visible without relying on either. */
.ep-mcal-page .ep-filter-tab[aria-pressed="true"] {
  box-shadow: var(--shadow-sm), inset 0 0 0 1.5px var(--text-2);
}

/* --border is 1.25:1 on white, so the field had no visible edge.
   --text-3 is fine here: non-text contrast only needs 3:1. */
.ep-mcal-page .ep-search-input {
  border-color: var(--text-3);
}


/* ── MONTH HEADER CONTROLS ───────────────────────────────── */
.ep-mcal-controls,
.ep-mcal-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.ep-mcal-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 2.5rem;
  padding: 0.375rem 0.875rem;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  background: var(--page-bg);
  color: var(--text);
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}

.ep-mcal-nav-link:hover {
  background: var(--section-bg);
  border-color: var(--text-3);
}


/* ── LEGEND ──────────────────────────────────────────────── */
/* Sits in .ep-filter-bar; the chips inside are .ep-mcal-event, so the
   key can't drift from what it describes. */
.ep-mcal-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  margin-left: auto;
}

.ep-mcal-legend .ep-mcal-event {
  font-weight: 600;
}


/* ── GRID SHELL ──────────────────────────────────────────── */
.ep-mcal {
  background: var(--page-bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.ep-mcal-weekdays,
.ep-mcal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.ep-mcal-weekdays {
  background: var(--section-bg);
  border-bottom: 1px solid var(--border);
}

.ep-mcal-weekday {
  padding: 0.5rem 0.25rem;
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-2);
}

/* Borders rather than a gap-over-background trick, so the rules
   survive forced-colours mode. The -1px tucks the last row's bottom
   rule under .ep-mcal's own border. */
.ep-mcal-grid {
  list-style: none;
  margin-bottom: -1px;
}


/* ── DAY CELL ────────────────────────────────────────────── */
.ep-mcal-day {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
  min-height: 7rem;
  padding: 0.375rem;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.ep-mcal-day:nth-child(7n)  { border-right: 0; }
.ep-mcal-day.is-outside     { background: var(--section-bg); }

/* The h3 only needs resetting; its visible parts are aria-hidden and
   the full spoken date lives in a .sr-only sibling. */
.ep-mcal-date {
  display: flex;
  align-items: center;
  font: inherit;
}

/* Holds the weekday (agenda only) and, on the 1st, the month name. */
.ep-mcal-date-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-2);
  white-space: nowrap;
}

.ep-mcal-date-dow { display: none; }
.ep-mcal-date-mon { margin-right: 0.25rem; }

.ep-mcal-date-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  height: 1.75rem;
  padding: 0 0.375rem;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  color: var(--text);
}

.ep-mcal-day.is-outside .ep-mcal-date-num {
  color: var(--text-2);
  font-weight: 400;
}

.ep-mcal-day.is-today .ep-mcal-date-num {
  background: var(--org-accent);
  color: var(--org-accent-contrast);
}


/* ── EVENT CHIPS ─────────────────────────────────────────── */
.ep-mcal-events {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
}

/* The transparent border is deliberate: forced-colours mode paints it,
   which keeps every chip outlined there. Vertical padding keeps the
   chip at 24px+ tall for pointer targets. */
.ep-mcal-event {
  position: relative;          /* contains the .sr-only text */
  display: flex;
  align-items: flex-start;
  gap: 0.25rem;
  padding: 0.25rem 0.375rem;
  border: 1px solid transparent;
  border-left: 3px solid var(--org-accent);
  border-radius: 0.375rem;
  background: var(--org-accent-light);
  color: var(--text);
  font-size: 0.75rem;
  line-height: 1.3;
}

a.ep-mcal-event:hover .ep-mcal-event-name { text-decoration: underline; }

/* Lift the ring above neighbouring chips; they're only 3px apart. */
.ep-mcal-page .ep-mcal-event:focus-visible {
  z-index: 1;
  outline-offset: 1px;
}

.ep-mcal-event-mark {
  flex-shrink: 0;
  width: 0.8125rem;
  height: 0.8125rem;
  margin-top: 0.0625rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Three lines, then ellipsis: the time rarely leaves room for the
   first word of the name, so two lines cut most names to one word.
   The full name is always in the link's accessible name, and uncut
   in the agenda layout. */
.ep-mcal-event-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  min-width: 0;
  overflow-wrap: anywhere;
}

.ep-mcal-event-time {
  color: var(--text-2);
  white-space: nowrap;
}

.ep-mcal-event-name { font-weight: 600; }

/* Full: hollow. Left padding grows by the 2px the bar no longer takes. */
.ep-mcal-event.is-full {
  border: 1px dashed var(--text-2);
  padding-left: calc(0.375rem + 2px);
  background: var(--page-bg);
  color: var(--text-2);
}

/* Enrolled: solid. Declared after .is-full so an enrolled, full event
   takes this fill and text colour but keeps the dashed outline. */
.ep-mcal-event.is-enrolled {
  background: var(--org-accent);
  color: var(--org-accent-contrast);
}

.ep-mcal-event.is-enrolled .ep-mcal-event-time { color: inherit; }


/* ── AGENDA LAYOUT (NARROW / ENLARGED TEXT) ──────────────── */
@media (max-width: 42.5em) {
  .ep-mcal-weekdays { display: none; }

  .ep-mcal-grid { display: block; }

  .ep-mcal-day {
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr);
    align-items: start;
    gap: 0.75rem;
    min-height: 0;
    padding: 0.75rem 1rem 0.75rem 0.5rem;
    border-right: 0;
  }

  .ep-mcal-day.is-empty { display: none; }

  .ep-mcal-date       { flex-direction: column; }
  .ep-mcal-date-label { font-size: 0.75rem; }
  .ep-mcal-date-dow   { display: inline; }
  .ep-mcal-date-mon   { margin-right: 0; }

  .ep-mcal-date-num {
    min-width: 2.5rem;
    height: 2.5rem;
    font-size: 1.375rem;
  }

  .ep-mcal-events { gap: 0.375rem; }

  .ep-mcal-event                  { font-size: 0.875rem; padding: 0.5rem 0.625rem; }
  .ep-mcal-event.is-full          { padding-left: calc(0.625rem + 2px); }
  .ep-mcal-legend .ep-mcal-event  { font-size: 0.75rem; padding-block: 0.25rem; }

  /* Drop the clamp and give the time its own line, as the list rows do. */
  .ep-mcal-event-text { display: block; }
  .ep-mcal-event-time { display: block; }

  /* Every day filtered out: hide the empty frame; .ep-empty-state
     is showing and says why. */
  .ep-mcal:not(:has(.ep-mcal-day:not(.is-empty))) { display: none; }
}


/* ── FORCED COLOURS ──────────────────────────────────────── */
/* Both states are drawn with a background, which the mode removes. */
@media (forced-colors: active) {
  .ep-mcal-day.is-today .ep-mcal-date-num,
  .ep-mcal-page .ep-filter-tab[aria-pressed="true"] {
    forced-color-adjust: none;
    background: Highlight;
    color: HighlightText;
  }
}