/* ==========================================================================
   Ephesus Accounts Hub — Frontend Responsive + Theme Toggle
   Loaded last (after global.css and accounts.css) so it overrides cleanly.
   Goals:
     1. Bullet-proof responsive layout on the member pages
        (login, register, profile) across 320px → 1440px+.
     2. Style the light/dark theme toggle button in the header.
     3. Ensure forms, modals, and panels are touch-friendly.
   ========================================================================== */

/* ==========================================================================
   Layout System foundation (Layout Spec §6.1 box model + §6.3 containment).
   Global border-box + overflow guards. Low-specificity (:where) so components
   can still override; additive — no visual change beyond preventing overflow.
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
:where(.eah-main, main, section, .prof-container, .prof-content, .prof-section,
       .card, .egw-card, .auth-card, .auth-form-section, .egw-section, .prof-card){
  max-width: 100%; min-width: 0;
}
:where(p, h1, h2, h3, h4, h5, h6, li, dd, dt, td, th, blockquote){ overflow-wrap: break-word; }

/* ==========================================================================
   Motion System foundation (Motion Spec §3) — GLOBAL reduced-motion baseline.
   Honour the OS setting: neutralise non-essential motion for everyone at once
   (state cues stay perceivable via colour/opacity). JS-driven motion branches
   on matchMedia separately. Supersedes the older partial reduced-motion blocks.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Base, reset, smooth theme transitions ---------- */
html { color-scheme: light dark; }
/* v2.94.0 (Phase D): pin color-scheme to the EXPLICIT/resolved mode so light-dark()
   tokens + native controls follow the user's choice on ANY OS. data-theme is always
   concrete (System resolves to light|dark and live-updates via window.EGWMode). */
[data-theme="light"] { color-scheme: light; }
[data-theme="dark"]  { color-scheme: dark; }
html, body {
  transition: background-color var(--motion-base, 220ms) var(--ease-standard, ease), color var(--motion-base, 220ms) var(--ease-standard, ease);
}
.eah-body {
  background: var(--color-bg, #FFFFFF);
  color: var(--color-text, #1A1A1A);
  min-height: 100vh;
}
[data-theme="dark"] .eah-body {
  background: var(--color-bg, #0B1220);
  color: var(--color-text, #E8E8E8);
}

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: #111827;
  color: #fff;
  padding: var(--space-2) var(--space-4);
  border-radius: 0 0 var(--radius-md) 0;
  z-index: 9999;
  font-weight: 600;
}
.skip-link:focus { left: 0; outline: 3px solid #FBBF24; }

/* ==========================================================================
   Header
   ========================================================================== */
.eah-header {
  width: 100%;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--header-border);
  background: var(--header-bg);
  backdrop-filter: saturate(180%) blur(8px);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  position: sticky;
  top: 0;
  z-index: 100;
}
[data-theme="dark"] .eah-header {
  background: var(--header-bg);
  border-bottom-color: var(--header-border);
}
.eah-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  max-width: 1060px;   /* align logo/toggle with the page content block */
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--space-4);
}

/* Logo */
.eah-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  color: inherit;
  min-width: 0;
  cursor: pointer;
  padding: var(--space-1) var(--space-2);
  margin-inline-start: 0;  /* flush far-left */
  border-radius: var(--radius-md);
  transition: background var(--motion-fast, 150ms) var(--ease-standard, ease), opacity var(--motion-fast, 150ms) var(--ease-standard, ease);
}
.eah-logo:hover { background: rgba(0,0,0,.04); }
.eah-logo:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(124, 58, 237, .35); }
[data-theme="dark"] .eah-logo:hover { background: rgba(255,255,255,.06); }
.eah-logo img { height: 48px; width: auto; display: block; }
.eah-logo .logo-light { display: block; }
.eah-logo .logo-dark  { display: none; }
[data-theme="dark"] .eah-logo .logo-light { display: none; }
[data-theme="dark"] .eah-logo .logo-dark  { display: block; }

.eah-wordmark {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.05;
  font-family: "Jost", "Barlow", system-ui, sans-serif;
  letter-spacing: .08em;
  color: inherit;
}
.eah-wordmark strong { display: block; white-space: nowrap; font-size: 15px; font-weight: 800; }
.eah-wordmark span   { display: block; white-space: nowrap; font-size: 10px; font-weight: 500; opacity: .7; }

/* Header actions (toggle + future menu items) — anchored to far right.
   margin-inline-start:auto wins regardless of other flex children in between,
   so the theme toggle stays on the far right even if a page injects
   extra content into the header. */
.eah-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-inline-start: auto !important;
  order: 9999;  /* If a parent uses different flex ordering, push us last. */
}

/* Theme toggle button */
.eah-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  min-width: 40px;
  aspect-ratio: 1 / 1;
  padding: 0;
  background: rgba(0, 0, 0, .04);
  color: #1F2937;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 50%;
  cursor: pointer;
  transition: background var(--motion-fast, 150ms) var(--ease-standard, ease), color var(--motion-fast, 150ms) var(--ease-standard, ease), transform var(--motion-fast, 150ms) var(--ease-standard, ease), box-shadow var(--motion-fast, 150ms) var(--ease-standard, ease);
  -webkit-tap-highlight-color: transparent;
}
.eah-theme-toggle:hover  { background: rgba(0, 0, 0, .08); transform: rotate(15deg); }
.eah-theme-toggle:active { transform: rotate(0); }
.eah-theme-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, .35);
}
[data-theme="dark"] .eah-theme-toggle {
  background: rgba(255, 255, 255, .06);
  color: #FACC15;
  border-color: rgba(255, 255, 255, .12);
}
[data-theme="dark"] .eah-theme-toggle:hover { background: rgba(255, 255, 255, .12); }
.eah-theme-toggle svg { width: 20px; height: 20px; display: block; }

/* ==========================================================================
   Member page layout — generic
   ========================================================================== */
.eah-main,
.eah-content,
main#main {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-4) 60px;
  box-sizing: border-box;
}

/* Forms — touch-friendly defaults */
.eah-form input[type="text"],
.eah-form input[type="email"],
.eah-form input[type="password"],
.eah-form input[type="tel"],
.eah-form input[type="number"],
.eah-form input[type="date"],
.eah-form input[type="search"],
.eah-form textarea,
.eah-form select {
  min-height: 44px;          /* WCAG touch target */
  font-size: 16px;           /* prevents iOS auto-zoom */
  border-radius: var(--radius-md);
}

button,
.btn,
.eah-btn,
[role="button"] {
  min-height: 44px;
  -webkit-tap-highlight-color: transparent;
}

/* Make all images/media never blow out their container */
img, video, iframe { max-width: 100%; height: auto; }

/* Long-string safety in cards/tables */
.eah-card,
.profile-card,
.eah-form { overflow-wrap: anywhere; word-break: break-word; }

/* ==========================================================================
   Login / Register / Profile pages — container hardening
   These class names are defensive: they catch the common wrappers used by
   the original parent theme so we cover them whether or not they're already
   styled in global.css.
   ========================================================================== */
.login-shell, .signup-shell, .profile-shell,
.eah-auth-shell, .eah-account-shell {
  width: 100%;
  max-width: 100%;
  padding-inline-start: var(--space-4);
  padding-inline-end: var(--space-4);
  box-sizing: border-box;
}

.login-card, .signup-card, .auth-card, .eah-card {
  max-width: 460px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-6);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: 0 10px 30px -10px rgba(17, 24, 39, .15);
  border: 1px solid rgba(0, 0, 0, .06);
}
[data-theme="dark"] .login-card,
[data-theme="dark"] .signup-card,
[data-theme="dark"] .auth-card,
[data-theme="dark"] .eah-card {
  background: #111827;
  border-color: rgba(255, 255, 255, .08);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .6);
}

/* Profile page two-column → one-column on tablet */
.profile-shell .profile-grid,
.eah-account-shell .account-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--space-6);
}

/* ==========================================================================
   Responsive breakpoints
   ========================================================================== */

/* Tablet — 1024px */
@media (max-width: 1024px) {
  .profile-shell .profile-grid,
  .eah-account-shell .account-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}

/* Small tablet / large phone — 768px */
@media (max-width: 768px) {
  .eah-header-inner { padding: 0 var(--space-3); }
  .eah-logo img { height: 34px; }
  .eah-wordmark strong { font-size: 13px; }
  .eah-wordmark span   { font-size: 9px; }

  main#main, .eah-main, .eah-content { padding: var(--space-4) var(--space-3) 50px; }
  .login-card, .signup-card, .auth-card, .eah-card {
    padding: var(--space-6) var(--space-4);
    margin: 0 auto;
  }
}

/* Phone — 600px */
@media (max-width: 600px) {
  .eah-header { padding: var(--space-2) 0; }
  .eah-logo img { height: 30px; }
  .eah-theme-toggle { width: 36px; height: 36px; }
  .eah-theme-toggle svg { width: 18px; height: 18px; }

  .login-card, .signup-card, .auth-card, .eah-card {
    border-radius: var(--radius-lg);
    padding: var(--space-6) var(--space-4);
  }
}

/* Small phone — 380px */
@media (max-width: 380px) {
  .eah-wordmark { display: none; }  /* Logo image is enough at this size */
  .eah-header-inner { padding: 0 var(--space-2); }
  main#main, .eah-main, .eah-content { padding: var(--space-4) var(--space-2) var(--space-10); }
  .login-card, .signup-card, .auth-card, .eah-card {
    padding: var(--space-4) var(--space-4);
    border-radius: var(--radius-md);
  }
}

/* Large screens — keep things readable */
@media (min-width: 1440px) {
  main#main, .eah-main, .eah-content { max-width: 1280px; }
}

/* Coarse pointer (touch) — pump up tap targets a touch */
@media (pointer: coarse) {
  .eah-theme-toggle { width: 44px; height: 44px; }
  button, .btn, .eah-btn { min-height: 48px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html, body, .eah-theme-toggle, .eah-header { transition: none !important; }
  .eah-theme-toggle:hover { transform: none; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.eah-footer {
  border-top: 1px solid var(--color-border, rgba(0, 0, 0, .06));
  padding: var(--space-4) var(--space-4);
  text-align: center;
  font-size: 13px;
  color: rgba(0, 0, 0, .55);
  margin-top: auto;
}
[data-theme="dark"] .eah-footer {
  border-top-color: rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .55);
}
.eah-footer p { margin: 0; }

/* Make the body a flex column so footer sits at the bottom on short pages */
.eah-body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.eah-body > main { flex: 1 0 auto; }

/* ==========================================================================
   Landing page (index.php) — big centered hero matching the brand mock.
   ========================================================================== */
.eah-landing {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 200px);  /* leave room for header + footer */
  padding: 60px var(--space-4);
  text-align: center;
}
.eah-landing-inner {
  max-width: 760px;
  width: 100%;
  margin: 0 auto;
}
.eah-landing-title {
  font-family: "Jost", "Barlow", system-ui, sans-serif;
  font-size: clamp(28px, 4.4vw, 52px);  /* sized down from clamp(40px, 8vw, 92px) */
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: #0F0F10;
  text-transform: uppercase;
  margin: 0 0 var(--space-4);
}
[data-theme="dark"] .eah-landing-title { color: #FFFFFF; }

.eah-landing-subtitle {
  font-size: clamp(15px, 1.6vw, 18px);
  color: #6B7280;
  margin: 0 0 var(--space-6);
  line-height: 1.5;
}
[data-theme="dark"] .eah-landing-subtitle { color: rgba(255,255,255,.72); }

.eah-landing-actions {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.eah-landing-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-8);
  min-height: 50px;
  font-family: "Jost", "Barlow", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  border-radius: var(--radius-pill);
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background var(--motion-fast, 150ms) var(--ease-standard, ease), color var(--motion-fast, 150ms) var(--ease-standard, ease), border-color var(--motion-fast, 150ms) var(--ease-standard, ease), transform var(--motion-fast, 150ms) var(--ease-standard, ease), box-shadow var(--motion-fast, 150ms) var(--ease-standard, ease);
  -webkit-tap-highlight-color: transparent;
}
.eah-landing-btn:hover { transform: translateY(-1px); }

.eah-landing-btn-primary {
  background: #0F0F10;
  color: #FFFFFF;
  border-color: #0F0F10;
}
.eah-landing-btn-primary:hover {
  background: #2A2A2D;
  color: #FFFFFF;
  border-color: #2A2A2D;
  box-shadow: 0 8px 22px -8px rgba(15, 15, 16, .55);
}

.eah-landing-btn-outline {
  background: transparent;
  color: #0F0F10;
  border-color: #0F0F10;
}
.eah-landing-btn-outline:hover {
  background: #0F0F10;
  color: #FFFFFF;
}

[data-theme="dark"] .eah-landing-btn-primary {
  background: #FFFFFF;
  color: #0F0F10;
  border-color: #FFFFFF;
}
[data-theme="dark"] .eah-landing-btn-primary:hover {
  background: #E5E5E5;
  color: #0F0F10;
  border-color: #E5E5E5;
}
[data-theme="dark"] .eah-landing-btn-outline {
  color: #FFFFFF;
  border-color: #FFFFFF;
}
[data-theme="dark"] .eah-landing-btn-outline:hover {
  background: #FFFFFF;
  color: #0F0F10;
}

/* Mobile tweaks */
@media (max-width: 600px) {
  .eah-landing { min-height: calc(100vh - 160px); padding: var(--space-10) var(--space-4); }
  .eah-landing-title { margin-bottom: var(--space-6); }
  .eah-landing-actions { flex-direction: column; width: 100%; gap: var(--space-2); }
  .eah-landing-btn { width: 100%; max-width: 320px; }
}

/* ==========================================================================
   Landing page — hero section refinements (now part of a longer page)
   ========================================================================== */
.eah-landing-hero {
  text-align: center;
  padding: var(--space-10) var(--space-4) var(--space-6);
}
.eah-landing-info {
  max-width: 1000px;
  margin: clamp(var(--space-20), 18vh, 200px) auto var(--space-8); /* pushed lower, closer to footer */
  padding: 0 var(--space-4);
}
.eah-landing-info-heading {
  font-family: "Jost", "Barlow", system-ui, sans-serif;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #6B7280;
  font-weight: 700;
  text-align: center;
  margin: 0 0 var(--space-4);
}
[data-theme="dark"] .eah-landing-info-heading { color: rgba(255,255,255,.55); }

/* The .eah-landing wrapper used to be 100vh centered. Loosen it now that
   there's more content below the hero. */
.eah-landing {
  min-height: auto;
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
  text-align: left;
}

/* ==========================================================================
   Landing-page accordion — tab cards + single body panel.
   Three equal-width trigger cards in a row that NEVER squeeze. Clicking one
   activates it (purple ring + lifted) and reveals its content in the single
   panel below, with smooth height + fade animation. Only one open at a time.
   ========================================================================== */
.eah-accordion {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.eah-accordion-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

.eah-accordion-tab {
  appearance: none;
  -webkit-appearance: none;
  background: #FFFFFF;
  border: 1.5px solid rgba(0,0,0,.08);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
  text-align: left;
  font-family: "Jost", "Barlow", system-ui, sans-serif;
  color: #0F0F10;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  transition: transform var(--motion-base, 220ms) var(--ease-standard, ease), border-color var(--motion-base, 220ms) var(--ease-standard, ease), box-shadow var(--motion-base, 220ms) var(--ease-standard, ease), background var(--motion-base, 220ms) var(--ease-standard, ease);
  -webkit-tap-highlight-color: transparent;
  min-height: 72px;
}
.eah-accordion-tab:hover {
  border-color: rgba(15,15,16,.25);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px -8px rgba(15,15,16,.18);
}
.eah-accordion-tab:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, .35);
}
.eah-accordion-tab[aria-selected="true"] {
  border-color: #0F0F10;
  background: #0F0F10;
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -12px rgba(15,15,16,.45);
}
[data-theme="dark"] .eah-accordion-tab {
  background: #282723;
  border-color: rgba(255,255,255,.10);
  color: #FFFFFF;
}
[data-theme="dark"] .eah-accordion-tab[aria-selected="true"] {
  background: #FFFFFF;
  color: #0F0F10;
  border-color: #FFFFFF;
}

.eah-accordion-icon {
  flex-shrink: 0;
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(15,15,16,.06);
  color: inherit;
  border-radius: var(--radius-md);
  transition: background var(--motion-base, 220ms) var(--ease-standard, ease), color var(--motion-base, 220ms) var(--ease-standard, ease);
}
.eah-accordion-tab[aria-selected="true"] .eah-accordion-icon {
  background: rgba(255,255,255,.16);
}
[data-theme="dark"] .eah-accordion-icon { background: rgba(255,255,255,.08); }
[data-theme="dark"] .eah-accordion-tab[aria-selected="true"] .eah-accordion-icon {
  background: rgba(15,15,16,.10);
}

.eah-accordion-title {
  flex: 1 1 auto;
  white-space: normal;
  overflow-wrap: anywhere;
}

.eah-accordion-chevron {
  flex-shrink: 0;
  width: 24px; height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: .6;
  transition: transform var(--motion-slow, 320ms) var(--ease-standard, ease), opacity var(--motion-base, 220ms) var(--ease-standard, ease);
}
.eah-accordion-tab[aria-selected="true"] .eah-accordion-chevron {
  transform: rotate(180deg);
  opacity: 1;
}

/* ---- The single body panel beneath the tabs ---- */
.eah-accordion-panel-wrap {
  position: relative;
  overflow: hidden;
  height: 0;
  transition: height .4s cubic-bezier(.2,.8,.2,1);
}
.eah-accordion-panel-wrap.is-open {
  /* Height is set inline by JS for smooth transition. */
}

.eah-accordion-panel {
  background: #FFFFFF;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-6);
  color: #4B5563;
  font-size: 15px;
  line-height: 1.65;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity var(--motion-slow, 320ms) var(--ease-standard, ease) .05s, transform var(--motion-slow, 320ms) var(--ease-standard, ease) .05s;
  margin-top: var(--space-1);  /* visual gap from the trigger card */
}
.eah-accordion-panel.is-active {
  opacity: 1;
  transform: translateY(0);
}
.eah-accordion-panel[hidden] {
  /* still rendered for measurement, but visually hidden + non-interactive */
  display: block !important;
  visibility: hidden;
  pointer-events: none;
  position: absolute;
  top: 0; left: 0; right: 0;
}
[data-theme="dark"] .eah-accordion-panel {
  background: #282723;
  border-color: rgba(255,255,255,.10);
  color: rgba(255,255,255,.78);
}
.eah-accordion-panel p { margin: 0 0 var(--space-3); }
.eah-accordion-panel p:last-child { margin-bottom: 0; }

/* ---- Two-column eligibility grid inside Panel 1 ---- */
.eah-eligibility-item { display: flex; gap: var(--space-2); align-items: flex-start; }
.eah-eligibility-icon { flex: 0 0 auto; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; background: rgba(15,15,16,.06); border-radius: var(--radius-md); }
[data-theme="dark"] .eah-eligibility-icon { background: rgba(255,255,255,.08); }
.eah-eligibility-icon svg { width: 20px; height: 20px; display: block; }
.eah-eligibility-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-top: var(--space-4);
}
@media (max-width: 700px) {
  .eah-eligibility-grid { grid-template-columns: 1fr; }
}

/* ---- Mobile: tabs stack vertically, panel stacks underneath ---- */
@media (max-width: 700px) {
  .eah-accordion-tabs {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
  .eah-accordion-tab {
    padding: var(--space-3) var(--space-4);
    min-height: 58px;
    font-size: 14px;
  }
  .eah-accordion-tab[aria-selected="true"] { transform: none; }
  .eah-accordion-panel { padding: var(--space-4) var(--space-4); font-size: 14px; }
}

/* ==========================================================================
   Footer — copyright + EGW Diaspora attribution
   ========================================================================== */
.eah-footer {
  padding: var(--space-6) var(--space-4) var(--space-8);
  border-top: 1px solid rgba(0, 0, 0, .06);
  background: transparent;
  text-align: center;
}
[data-theme="dark"] .eah-footer { border-top-color: rgba(255, 255, 255, .08); }

.eah-footer-inner {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.eah-footer-copy {
  margin: 0;
  font-size: 13px;
  color: #6B7280;
}
.eah-footer-attribution {
  margin: 0;
  font-size: 12px;
  color: #9CA3AF;
  letter-spacing: .01em;
}
.eah-footer-attribution strong {
  color: #374151;
  font-weight: 700;
}
[data-theme="dark"] .eah-footer-copy        { color: rgba(255,255,255,.55); }
[data-theme="dark"] .eah-footer-attribution { color: rgba(255,255,255,.42); }
[data-theme="dark"] .eah-footer-attribution strong { color: rgba(255,255,255,.82); }

@media (max-width: 600px) {
  .eah-footer { padding: var(--space-4) var(--space-3) var(--space-6); }
  .eah-footer-copy        { font-size: 12px; }
  .eah-footer-attribution { font-size: 11px; }
}


/* ==========================================================================
   Neutral default theme (v2.88.0) — no navy, no yellow; header/footer match.
   ========================================================================== */
.eah-footer { background: var(--footer-bg); border-top-color: var(--footer-border); }
[data-theme="dark"] .eah-theme-toggle { color: #E8EAED !important; }
html[data-theme="dark"] .prof-sidebar { background: var(--prof-light-card,#232220) !important; }

/* ==========================================================================
   "How It Works" steps + eligibility items — heading on its own line, then
   the description beneath it (v2.88.1). Previously the <strong> and <span>
   were inline and ran together.
   ========================================================================== */
.eah-steps {
  list-style: none;
  counter-reset: eah-step;
  margin: var(--space-2) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.eah-steps li {
  counter-increment: eah-step;
  position: relative;
  padding-inline-start: var(--space-8);
  min-height: 26px;
}
.eah-steps li::before {
  content: counter(eah-step);
  position: absolute;
  left: 0;
  top: 1px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-bg-alt, #282723);
  border: 1px solid var(--color-border, rgba(127,127,127,.2));
  color: var(--color-text, inherit);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.eah-steps strong {
  display: block;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 2px;
  line-height: 1.3;
}
.eah-steps span {
  display: block;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  line-height: 1.55;
}
/* Member / Affiliate eligibility — same heading-over-description treatment */
.eah-eligibility-item > div:not(.eah-eligibility-icon) strong {
  display: block;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 2px;
  line-height: 1.3;
}
.eah-eligibility-item > div:not(.eah-eligibility-icon) span {
  display: block;
  font-size: 0.84rem;
  color: var(--color-text-muted);
  line-height: 1.55;
}