/* ============================================================
   Oregon Heals · main.css
   Brand tokens · base styles · components for both pages
   ============================================================ */

/* === Brand tokens === */
:root {
  --color-coral:        #CB5427;
  --color-teal:         #4F7170;
  --color-green-dark:   #435F4A;
  --color-green-darker: #2f4036;
  --color-green-light:  #CBDBC0;
  --color-cream:        #FCFBF7;
  --color-text:         #2a3a30;
  --color-text-muted:   #4a584f;
  --color-text-faint:   #7a8580;
  --color-border:       rgba(67, 95, 74, 0.12);

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  --shadow-soft: 0 2px 12px rgba(67, 95, 74, 0.06);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
}

/* === Reset & base === */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-cream);
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--color-coral); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; color: var(--color-green-dark); letter-spacing: -0.01em; margin: 0; line-height: 1.1; }

/* Skip link for keyboard users */
.skip-link {
  position: absolute; top: -100px; left: 0;
  background: var(--color-green-dark); color: var(--color-cream);
  padding: 12px 18px; z-index: 100; text-decoration: none;
  border-radius: 0 0 var(--radius-md) 0;
}
.skip-link:focus { top: 0; }

/* Focus states */
*:focus-visible {
  outline: 2px solid var(--color-coral);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* === Container === */
.container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.container-narrow { max-width: 720px; margin: 0 auto; padding: 0 24px; }

/* === Nav === */
.site-nav {
  background: var(--color-cream);
  border-bottom: 1px solid var(--color-border);
  position: sticky; top: 0; z-index: 50;
}
.site-nav-inner {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 24px;
  max-width: 1200px; margin: 0 auto;
}
.site-nav-wordmark {
  font-family: var(--font-display); font-weight: 600; font-size: 17px;
  color: var(--color-green-dark); text-decoration: none;
  letter-spacing: -0.01em;
}
.site-nav-wordmark:hover { text-decoration: none; color: var(--color-coral); }
.site-nav-links { display: flex; gap: 28px; font-size: 14px; font-weight: 500; }
.site-nav-links a { color: var(--color-teal); text-decoration: none; }
.site-nav-links a:hover { color: var(--color-green-dark); }
.site-nav-links a.is-active { color: var(--color-coral); font-weight: 700; }
.site-nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; color: var(--color-green-dark); }

@media (max-width: 680px) {
  .site-nav-links { display: none; flex-direction: column; gap: 12px; position: absolute; top: 100%; left: 0; right: 0; background: var(--color-cream); padding: 16px 24px; border-bottom: 1px solid var(--color-border); }
  .site-nav-links.is-open { display: flex; }
  .site-nav-toggle { display: block; }
}

/* === Hero (shared base) === */
.hero {
  position: relative; overflow: hidden;
  padding: 56px 24px 56px;
  text-align: center;
}
.hero-inner { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; }
.hero-blob { position: absolute; pointer-events: none; }
.hero-blob.coral { bottom: -60px; right: -70px; width: 220px; height: 220px; opacity: 0.55; }
.hero-blob.teal { top: -40px; left: -50px; width: 170px; height: 170px; opacity: 0.18; }
.hero-blob.light { top: -50px; left: -60px; width: 240px; height: 240px; opacity: 0.6; }

.hero-eyebrow {
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--color-coral);
  margin: 0 0 14px;
}
.hero-title { font-size: clamp(36px, 6vw, 52px); margin: 0 0 16px; }
.hero-title em { color: var(--color-coral); font-style: normal; }
.hero-tagline {
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: clamp(17px, 2.2vw, 20px);
  color: var(--color-teal);
  margin: 0 0 28px;
}
.hero-lede {
  max-width: 560px; margin: 0 auto;
  font-size: clamp(15px, 1.8vw, 17px); line-height: 1.7;
  color: var(--color-text-muted);
}

/* === Meta pill === */
.meta-pill {
  display: inline-flex; flex-wrap: wrap; gap: 8px 24px; justify-content: center;
  background: var(--color-green-dark); color: var(--color-cream);
  padding: 12px 24px; border-radius: var(--radius-pill);
  font-size: 14px; font-weight: 500;
  margin: 0 0 32px;
}
.meta-pill span { display: inline-flex; align-items: center; gap: 8px; }
.meta-pill svg { flex-shrink: 0; }

/* === Forms === */
.form {
  max-width: 400px; margin: 32px auto 0;
}
.form-label {
  display: block;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-teal); text-align: center;
  margin: 0 0 12px;
}
.form-prompt {
  font-family: var(--font-display);
  font-size: clamp(24px, 4vw, 32px);
  font-weight: 700;
  color: var(--color-teal);
  text-align: center;
  margin: 40px 0 20px;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.form-stack { display: flex; flex-direction: column; gap: 10px; }
.form-input {
  width: 100%;
  padding: 14px 16px;
  border: 1.5px solid var(--color-green-light);
  border-radius: var(--radius-md);
  font-family: var(--font-body); font-size: 15px;
  background: white; color: var(--color-green-dark);
  text-align: center;
  transition: border-color 0.15s ease;
}
.form-input:focus { border-color: var(--color-coral); outline: none; }
.form-button {
  background: var(--color-coral); color: white;
  border: none; padding: 14px 24px;
  border-radius: var(--radius-md);
  font-family: var(--font-body); font-weight: 700; font-size: 14px;
  letter-spacing: 0.06em; text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.form-button:hover { background: #a8421d; }
.form-note {
  font-size: 12px; color: var(--color-text-faint);
  margin: 14px 0 0; text-align: center; font-style: italic;
}
.form-success {
  background: var(--color-green-light);
  color: var(--color-green-darker);
  padding: 16px 20px; border-radius: var(--radius-md);
  text-align: center; font-weight: 500;
  display: none;
}
.form-success.is-shown { display: block; }

/* ============================================================
   Registration page — dedicated EveryAction ticketing form.
   Constrains form width, refines label and field styling beyond
   the general .oh-ea-form overrides for a cleaner standalone page.
   ============================================================ */
.register-wrap {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 12px;
}

/* Soften EA's all-caps label treatment on the register page */
.register-wrap .oh-ea-form .ngp-form label,
.register-wrap .oh-ea-form .ngp-form .at-label {
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  color: var(--color-green-dark) !important;
  margin-bottom: 6px !important;
}

/* More breathing room between fields */
.register-wrap .oh-ea-form .ngp-form .at-row,
.register-wrap .oh-ea-form .ngp-form .at-fieldset .at-row,
.register-wrap .oh-ea-form .ngp-form .at-form-row {
  margin-bottom: 18px !important;
}

/* Style EA's ticket selection list (if rendered as discrete tickets) */
.register-wrap .oh-ea-form .ngp-form [class*="ticket-list"],
.register-wrap .oh-ea-form .ngp-form [class*="ticket-row"],
.register-wrap .oh-ea-form .ngp-form [class*="ticket-item"] {
  background: white;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  margin-bottom: 10px;
}
.register-wrap .oh-ea-form .ngp-form [class*="ticket-name"] {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-green-dark);
  font-size: 16px;
}
.register-wrap .oh-ea-form .ngp-form [class*="ticket-price"] {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-coral);
  font-size: 18px;
}

/* Soften the required asterisk */
.register-wrap .oh-ea-form .ngp-form .at-required,
.register-wrap .oh-ea-form .ngp-form .at-form-required {
  color: var(--color-coral) !important;
  font-weight: 400 !important;
  margin-left: 2px;
}

/* === Section pattern === */
.section { padding: 64px 24px; position: relative; overflow: hidden; }
.section-inner { max-width: 680px; margin: 0 auto; position: relative; z-index: 1; }

/* ============================================================
   Decorative elements — inspired by the summit logo's mountains,
   sun-with-rays, and organic curved shapes. Positioned absolutely
   inside sections, with pointer-events disabled so they never
   interfere with clickable content. Sections that contain them
   must be position:relative and overflow:hidden.
   ============================================================ */
.deco {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}
.deco-blob {
  width: clamp(160px, 24vw, 220px);
  height: clamp(160px, 24vw, 220px);
}
.deco-blob.coral { opacity: 0.4; }
.deco-blob.teal { opacity: 0.18; }
.deco-blob.light { opacity: 0.55; }
.deco-sun {
  width: clamp(70px, 10vw, 100px);
  height: clamp(70px, 10vw, 100px);
}

/* Mountain horizon — full-width landscape silhouette used as a
   section transition. Sits flush against the next section below. */
.deco-horizon {
  display: block;
  width: 100%;
  height: clamp(60px, 8vw, 90px);
  margin-bottom: -2px;
  background: var(--color-cream);
}
.section--green + .deco-horizon { background: var(--color-green-light); }

/* Presented-by gets relative positioning so its sun decoration sits inside it */
.presented { position: relative; overflow: hidden; }
.section-eyebrow {
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--color-coral); text-align: center;
  margin: 0 0 12px;
}
.section h2 {
  font-size: clamp(26px, 4vw, 34px);
  text-align: center;
  margin: 0 0 24px;
}
.section p { font-size: 16px; line-height: 1.75; margin: 0 0 18px; }
.section p strong { color: var(--color-coral); font-weight: 700; }

.section--green { background: var(--color-green-light); }
.section--green p { color: var(--color-green-darker); }
.section--dark { background: var(--color-green-dark); color: var(--color-cream); }
.section--dark h2 { color: var(--color-cream); }
.section--dark p { color: var(--color-green-light); }

.section--green .quote {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(18px, 2.5vw, 22px); line-height: 1.5;
  text-align: center; max-width: 600px; margin: 0 auto;
  color: var(--color-green-darker);
}

/* === Summit CTA banner (used on root page) === */
.summit-banner {
  background: var(--color-green-dark);
  padding: 40px 24px;
}
.summit-banner-inner {
  max-width: 880px; margin: 0 auto;
  display: flex; gap: 28px; align-items: center; flex-wrap: wrap;
  justify-content: center;
}
.summit-banner-logo { flex-shrink: 0; }
.summit-banner-logo img { width: 180px; height: auto; }
.summit-banner-text { flex: 1; min-width: 240px; color: var(--color-cream); }
.summit-banner-eyebrow {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--color-green-light); margin: 0 0 6px;
}
.summit-banner-meta {
  font-size: 14px; color: var(--color-green-light); margin: 6px 0 0;
}
.summit-banner-btn {
  display: inline-block;
  background: var(--color-coral); color: var(--color-cream);
  padding: 14px 24px; border-radius: var(--radius-md);
  font-weight: 700; font-size: 14px;
  letter-spacing: 0.06em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
  transition: background-color 0.15s ease;
}
.summit-banner-btn:hover { background: #a8421d; text-decoration: none; }

/* === Members grid (root page) === */
.members-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  max-width: 880px; margin: 32px auto 0;
}
.member-card {
  padding: 28px 22px;
  background: white;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-align: center;
}
.member-card h3 {
  font-size: 20px;
  margin: 0 0 10px;
}
.member-card p {
  font-size: 14px; line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0;
}

/* === Presented-by (summit page) === */
.presented {
  padding: 40px 24px;
  background: var(--color-cream);
  text-align: center;
  border-top: 1px solid var(--color-border);
}
.presented-label {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--color-teal); margin: 0 0 20px;
}
.partners {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
}
.partner-pill {
  padding: 10px 18px; background: white;
  border: 1px solid var(--color-green-light);
  border-radius: var(--radius-md);
  font-family: var(--font-display); font-weight: 500;
  font-size: 14px; color: var(--color-green-dark);
}

/* === Footer === */
.site-footer {
  background: var(--color-green-darker);
  color: var(--color-green-light);
  padding: 32px 24px;
  font-size: 13px;
}
.site-footer-inner {
  max-width: 1100px; margin: 0 auto;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  flex-wrap: wrap;
}
.site-footer a { color: var(--color-green-light); opacity: 0.85; text-decoration: none; }
.site-footer a:hover { opacity: 1; text-decoration: underline; }

/* === Summit hero logo === */
.summit-hero-logo {
  width: clamp(160px, 25vw, 200px);
  margin: 0 auto 20px;
  height: auto;
}

/* === Coalition hero logo === */
.coalition-hero-logo {
  width: clamp(280px, 45vw, 460px);
  margin: 0 auto 32px;
  height: auto;
}

/* === Coalition hero copy === */
.coalition-headline {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(24px, 3.6vw, 32px);
  line-height: 1.25;
  color: var(--color-green-dark);
  max-width: 600px;
  margin: 0 auto 20px;
}

/* === Reduced motion === */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   EveryAction ActionTag · brand overrides
   ------------------------------------------------------------
   EveryAction injects a form into .ngp-form. We wrap that in
   .oh-ea-form to get specificity high enough to win over the
   EveryAction default stylesheet without needing !important on
   every rule. Where we still need it, it's because EA loads its
   styles dynamically after our CSS.
   ============================================================ */

.form-eyebrow {
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-teal); text-align: center;
  margin: 32px 0 12px;
}

.oh-ea-form {
  max-width: 420px;
  margin: 0 auto;
}

.oh-ea-form .ngp-form,
.oh-ea-form .ngp-form * {
  font-family: var(--font-body);
}

/* ============================================================
   TICKET TIER VISIBILITY CONTROL
   Hides future ticket tiers from the EveryAction form so only
   the currently-active tier shows publicly. To launch a new
   tier on its open date, delete that tier's block below.

   EA renders tickets as <tr> rows inside a <table class="at-table TicketLevels">.
   Selectors target tbody > tr by position in that table.

   Tier positions (verified via inspect-element June 2026):
     1. Standard (First Mover) — $35     · visible
     2. Student (First Mover) — $15      · visible
     3. Standard (Early Bird) — $55      · hidden until July 12
     4. Student (Early Bird) — $20       · hidden until July 12
     5. Standard (Last Call) — $75       · hidden until August 9
     6. Student (Last Call) — $25        · hidden until August 9
     7. Standard (At the Door) — $129    · hidden until August 22 morning
   ============================================================ */

/* === Hide Standard (Early Bird) — DELETE THIS BLOCK on July 12 === */
.oh-ea-form .at-table.TicketLevels tbody tr:nth-child(3) {
  display: none !important;
}

/* === Hide Student (Early Bird) — DELETE THIS BLOCK on July 12 === */
.oh-ea-form .at-table.TicketLevels tbody tr:nth-child(4) {
  display: none !important;
}

/* === Hide Standard (Last Call) — DELETE THIS BLOCK on August 9 === */
.oh-ea-form .at-table.TicketLevels tbody tr:nth-child(5) {
  display: none !important;
}

/* === Hide Student (Last Call) — DELETE THIS BLOCK on August 9 === */
.oh-ea-form .at-table.TicketLevels tbody tr:nth-child(6) {
  display: none !important;
}

/* === Hide Standard (At the Door) — DELETE THIS BLOCK morning of August 22 === */
.oh-ea-form .at-table.TicketLevels tbody tr:nth-child(7) {
  display: none !important;
}

/* Hide EveryAction form chrome — title, description, intro text, map, etc.
   The summit page already explains date, location, and context elsewhere,
   so the embed should be just: field labels, inputs, and the submit button. */
.oh-ea-form .ngp-form .at-title,
.oh-ea-form .ngp-form .at-form-header,
.oh-ea-form .ngp-form .at-form-title,
.oh-ea-form .ngp-form .at-description,
.oh-ea-form .ngp-form .at-c-description,
.oh-ea-form .ngp-form .at-form-description,
.oh-ea-form .ngp-form .at-intro-text,
.oh-ea-form .ngp-form .at-c-text,
.oh-ea-form .ngp-form .at-c-disclaimer,
.oh-ea-form .ngp-form .at-legal-disclaimer,
.oh-ea-form .ngp-form .at h2,
.oh-ea-form .ngp-form .at-h2,
.oh-ea-form .ngp-form [class*="introtext"],
.oh-ea-form .ngp-form [class*="intro-text"],
.oh-ea-form .ngp-form [class*="form-description"],
.oh-ea-form .ngp-form .at-section-header,
.oh-ea-form .ngp-form .at-c-fastaction,
.oh-ea-form .ngp-form .at-text-fastaction,
.oh-ea-form .ngp-form .HasFastAction {
  display: none !important;
}

/* Hide the HeaderHtml markup block (description text) and fieldset titles
   like "Contact Information" — confirmed from EveryAction form JSON config. */
.oh-ea-form .ngp-form [data-name="HeaderHtml"],
.oh-ea-form .ngp-form [data-element-name="HeaderHtml"],
.oh-ea-form .ngp-form .at-markup-HeaderHtml,
.oh-ea-form .ngp-form .at-row-HeaderHtml,
.oh-ea-form .ngp-form .at-form-markup,
.oh-ea-form .ngp-form .at-c-markup,
.oh-ea-form .ngp-form .at-markup,
.oh-ea-form .ngp-form legend,
.oh-ea-form .ngp-form .at-fieldset-title,
.oh-ea-form .ngp-form fieldset > legend {
  display: none !important;
}

/* Hide any location map / venue widget — confirmed class
   .at-event-map-container from EveryAction form JSON config */
.oh-ea-form .ngp-form .at-event-map-container,
.oh-ea-form .ngp-form [class*="event-map"],
.oh-ea-form .ngp-form [class*="map-container"],
.oh-ea-form .ngp-form .at-map,
.oh-ea-form .ngp-form .at-form-map,
.oh-ea-form .ngp-form .at-c-map,
.oh-ea-form .ngp-form .at-location-map,
.oh-ea-form .ngp-form .ngp-map,
.oh-ea-form .ngp-form .at-find-form,
.oh-ea-form .ngp-form .at-find-location,
.oh-ea-form .ngp-form .at-location,
.oh-ea-form .ngp-form .at-c-location,
.oh-ea-form .ngp-form .at-event-location,
.oh-ea-form .ngp-form .at-venue,
.oh-ea-form .ngp-form [id*="map"],
.oh-ea-form .ngp-form iframe[src*="maps.google"],
.oh-ea-form .ngp-form iframe[src*="google.com/maps"],
.oh-ea-form .ngp-form iframe[src*="maps.googleapis"],
.oh-ea-form .ngp-form iframe[src*="mapbox"],
.oh-ea-form .ngp-form iframe[src*="openstreetmap"] {
  display: none !important;
}

/* Layout */
.oh-ea-form .ngp-form fieldset,
.oh-ea-form .ngp-form .at-fieldset,
.oh-ea-form .ngp-form .at-form-content {
  border: none;
  padding: 0;
  margin: 0;
  background: transparent;
}

/* Labels */
.oh-ea-form .ngp-form label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-teal);
  margin: 0 0 8px;
  display: block;
  text-align: left;
}

/* Text and email inputs */
.oh-ea-form .ngp-form input[type="text"],
.oh-ea-form .ngp-form input[type="email"],
.oh-ea-form .ngp-form input[type="tel"],
.oh-ea-form .ngp-form input[type="number"] {
  width: 100%;
  padding: 14px 16px;
  border: 1.5px solid var(--color-green-light);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 15px;
  background: white;
  color: var(--color-green-dark);
  text-align: center;
  margin-bottom: 10px;
  box-sizing: border-box;
  transition: border-color 0.15s ease;
}
.oh-ea-form .ngp-form input[type="text"]:focus,
.oh-ea-form .ngp-form input[type="email"]:focus,
.oh-ea-form .ngp-form input[type="tel"]:focus {
  border-color: var(--color-coral);
  outline: none;
}

/* Submit button — !important because EveryAction's customCSS loads
   dynamically after our main.css and wins the cascade at equal specificity. */
.oh-ea-form .ngp-form input[type="submit"],
.oh-ea-form .ngp-form button[type="submit"],
.oh-ea-form .ngp-form .at-submit,
.oh-ea-form .ngp-form .at-form-submit,
.oh-ea-form .ngp-form .at-form-submit input,
.oh-ea-form .ngp-form .at-form-submit button,
.oh-ea-form .ngp-form [class*="submit"] input,
.oh-ea-form .ngp-form [class*="submit"] button,
.oh-ea-form .ngp-form [type="submit"] {
  width: 100%;
  max-width: 240px;
  display: block;
  background: #CB5427 !important;
  background-color: #CB5427 !important;
  color: white !important;
  border: none !important;
  padding: 12px 24px;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  margin: 8px auto 0;
  transition: background-color 0.15s ease;
}
.oh-ea-form .ngp-form input[type="submit"]:hover,
.oh-ea-form .ngp-form button[type="submit"]:hover,
.oh-ea-form .ngp-form .at-submit:hover,
.oh-ea-form .ngp-form [type="submit"]:hover {
  background: #a8421d !important;
  background-color: #a8421d !important;
}

/* Required asterisk and inline errors */
.oh-ea-form .ngp-form .at-required,
.oh-ea-form .ngp-form .at-form-required {
  color: var(--color-coral);
}
.oh-ea-form .ngp-form .at-error,
.oh-ea-form .ngp-form .at-form-error,
.oh-ea-form .ngp-form .has-error {
  color: var(--color-coral);
  font-size: 12px;
  margin-top: 4px;
}

/* Disclaimer text and small print */
.oh-ea-form .ngp-form .at-c-disclaimer,
.oh-ea-form .ngp-form .at-legal-disclaimer,
.oh-ea-form .ngp-form .at-text {
  font-size: 12px;
  color: var(--color-text-faint);
  text-align: center;
  line-height: 1.5;
}

/* Success / thank-you state */
.oh-ea-form .ngp-form .at-form-success,
.oh-ea-form .ngp-form .at-thanks {
  background: var(--color-green-light);
  color: var(--color-green-darker);
  padding: 16px 20px;
  border-radius: var(--radius-md);
  text-align: center;
  font-weight: 500;
}

/* Dark-section variant for newsletter form on root page */
.section--dark .form-eyebrow,
.section--dark .oh-ea-form .ngp-form label {
  color: var(--color-green-light);
}

/* Stronger EveryAction color cleanup — ensures the form area
   inherits the cream/brand palette and nothing reads as default EA */
.oh-ea-form .ngp-form,
.oh-ea-form .ngp-form > *,
.oh-ea-form .ngp-form .at,
.oh-ea-form .ngp-form .at-form,
.oh-ea-form .ngp-form .at-form-content,
.oh-ea-form .ngp-form .at-inner {
  background: transparent !important;
  color: var(--color-text);
}
.oh-ea-form .ngp-form a {
  color: var(--color-coral);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.oh-ea-form .ngp-form a:hover {
  color: var(--color-green-dark);
}
.oh-ea-form .ngp-form select {
  width: 100%;
  padding: 14px 16px;
  border: 1.5px solid var(--color-green-light);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 15px;
  background: white;
  color: var(--color-green-dark);
  box-sizing: border-box;
}
.oh-ea-form .ngp-form input[type="checkbox"],
.oh-ea-form .ngp-form input[type="radio"] {
  accent-color: var(--color-coral);
}

/* Defensive: kill unexpected background patterns on any input-like element.
   EveryAction's multi-select widget (used for pronouns and similar fields)
   can render with a hatched/wavy default background that doesn't match
   our brand. This nukes any background-image and forces consistent styling
   across plain selects, multi-selects, and Select2-style wrappers. */
.oh-ea-form .ngp-form input,
.oh-ea-form .ngp-form select,
.oh-ea-form .ngp-form textarea,
.oh-ea-form .ngp-form [role="combobox"],
.oh-ea-form .ngp-form [role="listbox"],
.oh-ea-form .ngp-form [class*="select2"],
.oh-ea-form .ngp-form [class*="multiselect"],
.oh-ea-form .ngp-form [class*="multi-select"],
.oh-ea-form .ngp-form [class*="-tags"],
.oh-ea-form .ngp-form .at-text-input,
.oh-ea-form .ngp-form .at-form-input {
  background-image: none !important;
}
.oh-ea-form .ngp-form select,
.oh-ea-form .ngp-form [class*="select2-selection"],
.oh-ea-form .ngp-form [class*="multiselect"],
.oh-ea-form .ngp-form [class*="multi-select"] {
  background-color: white !important;
  border: 1.5px solid var(--color-green-light) !important;
  border-radius: var(--radius-md) !important;
  min-height: 48px;
  padding: 12px 14px;
  font-family: var(--font-body) !important;
  font-size: 15px !important;
  color: var(--color-green-dark) !important;
  box-sizing: border-box;
}

/* === Presented-by logo (summit page) === */
.presented-logo {
  display: block;
  width: clamp(220px, 35vw, 280px);
  height: auto;
  margin: 0 auto;
}
.presented a {
  display: inline-block;
  text-decoration: none;
  transition: opacity 0.15s ease;
}
.presented a:hover {
  opacity: 0.85;
}

/* === Coalition member logos (root page) === */
.members-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 48px;
  max-width: 720px;
  margin: 32px auto 0;
  padding: 24px;
}
.member-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.member-logo:hover {
  opacity: 0.85;
  transform: translateY(-2px);
}
.member-logo img {
  max-height: 80px;
  width: auto;
  height: auto;
}
/* Placeholder used until real logo SVGs arrive */
.member-logo-placeholder {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 5vw, 42px);
  color: var(--color-green-dark);
  letter-spacing: -0.02em;
  padding: 16px 32px;
  border: 1.5px dashed var(--color-green-light);
  border-radius: var(--radius-md);
}

@media (max-width: 540px) {
  .members-logos {
    gap: 32px;
  }
}

/* ============================================================
   Draft sections — hidden until ready to launch.
   Remove the "draft" class from any element to reveal it.
   The summit page also has a ?showdrafts URL param that
   temporarily reveals all drafts for previewing.
   ============================================================ */
.draft {
  display: none !important;
}

/* ============================================================
   CTA buttons (sponsorship, etc)
   ============================================================ */
.cta-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 32px;
}
.btn-primary,
.btn-secondary {
  display: inline-block;
  padding: 14px 24px;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
  cursor: pointer;
  border: 1.5px solid transparent;
}
.btn-primary {
  background: var(--color-coral);
  color: white;
}
.btn-primary:hover {
  background: #a8421d;
  text-decoration: none;
}
.btn-secondary {
  background: transparent;
  color: var(--color-green-dark);
  border-color: var(--color-green-dark);
}
.btn-secondary:hover {
  background: var(--color-green-dark);
  color: var(--color-cream);
  text-decoration: none;
}

/* ============================================================
   Agenda · expandable timeline
   ============================================================ */
.agenda {
  max-width: 720px;
  margin: 0 auto;
  border-top: 1px solid var(--color-border);
}
.agenda-item {
  border-bottom: 1px solid var(--color-border);
}
.agenda-item > summary {
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding: 20px 16px 20px 0;
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 36px;
  transition: background-color 0.15s ease;
}
.agenda-item > summary::-webkit-details-marker { display: none; }
.agenda-item > summary::after {
  content: '+';
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  color: var(--color-coral);
  line-height: 1;
  transition: transform 0.2s ease;
}
.agenda-item[open] > summary::after {
  content: '–';
}
.agenda-item > summary:hover {
  background: rgba(67, 95, 74, 0.03);
}
.agenda-time {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  color: var(--color-coral);
  letter-spacing: -0.01em;
  width: 88px;
}
.agenda-meta {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  color: var(--color-green-dark);
  line-height: 1.35;
}
.agenda-body {
  padding: 0 0 24px 108px;
}
.agenda-body p {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-text-muted);
}
.agenda-body ul {
  margin: 8px 0 12px;
  padding-left: 20px;
  color: var(--color-text-muted);
  font-size: 15px;
  line-height: 1.8;
}
.agenda-body strong {
  color: var(--color-green-dark);
}

@media (max-width: 540px) {
  .agenda-item > summary { flex-direction: column; gap: 4px; }
  .agenda-time { width: auto; }
  .agenda-body { padding-left: 0; }
}

/* ============================================================
   Speaker cards
   ============================================================ */
.speakers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
  max-width: 960px;
  margin: 32px auto 0;
}
.speaker-card {
  background: white;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 28px 22px;
  text-align: center;
}
.speaker-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--color-green-light);
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.speaker-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.avatar-initial {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 28px;
  color: var(--color-green-dark);
  letter-spacing: -0.01em;
}
.speaker-name {
  font-size: 18px;
  margin: 0 0 6px;
}
.speaker-title {
  font-size: 13px;
  line-height: 1.45;
  color: var(--color-text-muted);
  margin: 0 0 16px;
}
.speaker-bio-toggle {
  margin-top: 12px;
}
.speaker-bio-toggle > summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-coral);
  list-style: none;
  display: inline-block;
}
.speaker-bio-toggle > summary::-webkit-details-marker { display: none; }
.speaker-bio-toggle > summary::after {
  content: ' →';
  display: inline-block;
  transition: transform 0.2s ease;
}
.speaker-bio-toggle[open] > summary::after {
  content: ' ↑';
}
.speaker-bio {
  font-size: 14px;
  line-height: 1.65;
  color: var(--color-text-muted);
  margin: 12px 0 0;
  text-align: left;
}

/* ============================================================
   .section--green variant tweaks for new content
   ============================================================ */
.section--green .agenda { border-top-color: rgba(67, 95, 74, 0.2); }
.section--green .agenda-item { border-bottom-color: rgba(67, 95, 74, 0.2); }
.section--green .agenda-item > summary:hover { background: rgba(67, 95, 74, 0.06); }

/* ============================================================
   Urgency badge — appears above ticket cards announcing the next
   price-change deadline. Switches to a "final week" treatment
   (sharper coral, subtle pulse) when fewer than 7 days remain.
   Auto-managed by JS at the bottom of summit/index.html.
   ============================================================ */
.urgency-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: fit-content;
  max-width: 90%;
  margin: 0 auto 24px;
  background: rgba(203, 84, 39, 0.1);
  color: var(--color-coral);
  border: 1.5px solid rgba(203, 84, 39, 0.35);
  border-radius: var(--radius-pill);
  padding: 8px 18px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-align: center;
}
.urgency-badge[hidden] { display: none; }
.urgency-badge-icon {
  font-size: 14px;
  line-height: 1;
}
.urgency-badge-text strong {
  font-weight: 700;
}

/* Final-week treatment — sharper coral, subtle pulse */
.urgency-badge--final-week {
  background: var(--color-coral);
  color: white;
  border-color: var(--color-coral);
  animation: urgencyPulse 2.4s ease-in-out infinite;
}
@keyframes urgencyPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(203, 84, 39, 0.45); }
  50%      { box-shadow: 0 0 0 8px rgba(203, 84, 39, 0); }
}

/* ============================================================
   Ticket cards
   ============================================================ */
.ticket-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  max-width: 560px;
  margin: 0 auto;
}
.ticket-card {
  flex: 1 1 220px;
  max-width: 280px;
  background: var(--color-cream);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
}
.ticket-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  color: var(--color-green-dark);
  margin: 0 0 12px;
}
.ticket-price {
  margin: 0 0 6px;
  line-height: 1;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
}
.ticket-price-current {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 44px;
  color: var(--color-green-dark);
  letter-spacing: -0.02em;
}
.ticket-price-anchor {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  color: var(--color-text-faint);
  text-decoration: line-through;
  text-decoration-color: rgba(67, 95, 74, 0.45);
  text-decoration-thickness: 2px;
}
.ticket-tier-note {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-coral);
  margin: 0 0 16px;
}
.ticket-roadmap {
  list-style: none;
  padding: 14px 0 0;
  margin: 0;
  border-top: 1px solid var(--color-border);
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.7;
  text-align: center;
}
.ticket-fine-print {
  font-size: 11px;
  font-style: italic;
  color: var(--color-text-faint);
  margin: -8px 0 14px;
  text-align: center;
  line-height: 1.4;
}

/* ============================================================
   Hide problematic optional fields from the registration form
   These multi-select fields (Preferred Language, Gender, Race,
   Ethnicity) render with a wrapper-card visual that doesn't
   match the cleaner single-select fields. Pronouns is also
   hidden — moving demographic + identity questions to a
   post-registration "attendee profile" survey for cleaner UX
   and better data quality.

   These fields still exist in EA — this only hides them visually
   on the embedded form.
   ============================================================ */

/* Match by standard label class (built-in fields) */
.oh-ea-form label.PreferredLanguages,
.oh-ea-form label.Pronoun,
.oh-ea-form label.Pronouns,
.oh-ea-form label.Gender,
.oh-ea-form label.Race,
.oh-ea-form label.Ethnicity,

/* Match by class containing the field name (catches custom field variants) */
.oh-ea-form label[class*="Gender"],
.oh-ea-form label[class*="Race"]:not([class*="-race-"]),
.oh-ea-form label[class*="Ethnicity"],
.oh-ea-form label[class*="Language"],
.oh-ea-form label[class*="Pronoun"],

/* Match the row container if a row is named after one of these fields */
.oh-ea-form .at-row.Gender,
.oh-ea-form .at-row.Race,
.oh-ea-form .at-row.Ethnicity,
.oh-ea-form .at-row[class*="Gender"],
.oh-ea-form .at-row[class*="Race"]:not([class*="-race-"]),
.oh-ea-form .at-row[class*="Ethnicity"],

/* Match by data-name attribute which EA uses for some custom fields */
.oh-ea-form [data-name="Gender"],
.oh-ea-form [data-name="Race"],
.oh-ea-form [data-name="Ethnicity"],
.oh-ea-form [data-name="Pronouns"],
.oh-ea-form [data-name="Pronoun"],
.oh-ea-form [data-name="PreferredLanguages"],
.oh-ea-form [data-name*="Gender"],
.oh-ea-form [data-name*="Race"],
.oh-ea-form [data-name*="Ethnicity"] {
  display: none !important;
}

/* Collapse rows that contain only hidden labels */
.oh-ea-form .at-row:not(:has(label:not([class*="PreferredLanguages"]):not([class*="Pronoun"]):not([class*="Gender"]):not([class*="Race"]):not([class*="Ethnicity"]):not([class*="Language"]))) {
  display: none !important;
}

/* Community access callout — quiet text link below the ticket cards.
   !important on margin and text-align because .section p and other rules
   keep trying to override. Belt and suspenders. */
.community-callout,
.section .community-callout,
.register-wrap .community-callout {
  max-width: 460px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 28px !important;
  margin-bottom: 0 !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  color: var(--color-green-darker) !important;
  text-align: center !important;
  font-style: italic !important;
  text-wrap: balance;
  display: block !important;
}
.community-callout a,
.section .community-callout a,
.register-wrap .community-callout a {
  color: var(--color-coral) !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1.5px !important;
  text-underline-offset: 3px !important;
  font-weight: 600 !important;
  font-style: normal !important;
}

/* ============================================================
   Select2 multi-select widget cleanup
   EveryAction uses Select2 for fields like Preferred Language,
   Gender, Race, Ethnicity. The default Select2 widget looks
   visually different from other form fields (the "concentric
   bubbles" appearance). These styles make them look more like
   regular form inputs.
   ============================================================ */
.oh-ea-form .select2-container,
.oh-ea-form .select2-container--default,
.oh-ea-form [class*="select2-container"] {
  width: 100% !important;
  min-width: 100% !important;
}

.oh-ea-form .select2-selection,
.oh-ea-form .select2-selection--single,
.oh-ea-form .select2-selection--multiple,
.oh-ea-form [class*="select2-selection"] {
  width: 100% !important;
  min-height: 46px !important;
  padding: 8px 14px !important;
  border: 1.5px solid var(--color-green-light) !important;
  border-radius: var(--radius-md) !important;
  background: white !important;
  background-image: none !important;
  font-family: var(--font-body) !important;
  font-size: 15px !important;
  color: var(--color-green-dark) !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
}

/* Style the chosen tag bubbles to be less prominent */
.oh-ea-form .select2-selection__choice,
.oh-ea-form [class*="select2-selection__choice"] {
  background: var(--color-green-light) !important;
  border: none !important;
  color: var(--color-green-dark) !important;
  padding: 3px 10px !important;
  margin: 2px 4px 2px 0 !important;
  border-radius: var(--radius-md) !important;
  font-size: 13px !important;
  display: inline-flex !important;
  align-items: center !important;
}
.oh-ea-form .select2-selection__choice__remove,
.oh-ea-form [class*="select2-selection__choice__remove"] {
  color: var(--color-green-dark) !important;
  margin-right: 6px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}

/* The search/input area inside the multi-select */
.oh-ea-form .select2-search,
.oh-ea-form .select2-search__field,
.oh-ea-form [class*="select2-search"] {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  color: var(--color-green-dark) !important;
  min-height: 28px !important;
  padding: 2px 4px !important;
}

/* The "x" close button on chosen items */
.oh-ea-form .select2-selection__rendered,
.oh-ea-form [class*="select2-selection__rendered"] {
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  width: 100% !important;
}

/* The dropdown arrow */
.oh-ea-form .select2-selection__arrow,
.oh-ea-form [class*="select2-selection__arrow"] {
  height: 100% !important;
  top: 0 !important;
  right: 8px !important;
}

/* Placeholder text */
.oh-ea-form .select2-selection__placeholder,
.oh-ea-form [class*="placeholder"] {
  color: var(--color-text-faint) !important;
  font-style: italic !important;
}