/* Central Henderson — member portal & preview theme */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800&family=Poppins:wght@400;500;600;700&display=swap');

:root {
  /* Brand Colors */
  --central-red: #EE2B37;
  --central-red-hover: #d42530;
  --central-black: #111111;
  --central-white: #FFFFFF;
  --central-grey: #7f848a;
  --central-canvas: #f7f6f4;
  --central-card: #ffffff;
  --central-line: #e7e1da;
  --central-red-soft: #fff3f4;
  --central-ink-soft: #1a1a1a;

  /* Typography */
  --font-brand: "Gotham", "Montserrat", "Arial", sans-serif;
  --font-web: "Poppins", "Arial", sans-serif;

  /* Layout */
  --container-max: 1180px;
  --section-padding-desktop: 96px;
  --section-padding-tablet: 72px;
  --section-padding-mobile: 48px;

  /* Radius */
  --radius-button: 999px;
  --radius-card: 18px;
  --radius-panel: 22px;

  /* Motion */
  --transition-fast: 180ms ease;
  --transition-slow: 240ms cubic-bezier(.16,1,.3,1);

  /* Legacy aliases */
  --font-body: var(--font-web);
  --font-heading: var(--font-brand);
  --accent: var(--central-red);
  --text: var(--central-black);
  --bg: var(--central-white);
  --bg-muted: #f4f4f4;
  --bg-dark: var(--central-black);
  --text-on-dark: var(--central-white);
  --accent-soft: var(--central-red-soft);
  --border: var(--central-line);
  --brand-accent: var(--central-red);
  --brand-dark: var(--central-black);
  --brand-soft: var(--central-red-soft);
}
body {
  font-family: var(--font-web);
  background: linear-gradient(180deg,#ffffff 0%,#faf8f6 100%);
  color: var(--central-black);
}

h1, h2, h3, .card-title, .hero-name, .dash-pillar-name, .sb-church, .tb-title, .dash-mod-title {
  font-family: var(--font-brand);
  font-weight: 700;
  letter-spacing: -0.03em;
}

.accent { color: var(--central-red); }
.bg-dark { background: var(--central-black); color: var(--central-white); }
.bg-light { background: var(--central-white); color: var(--central-black); }
.bg-muted { background: var(--central-canvas); }
.border-accent { border-color: var(--central-red); }

/* ── Member portal shell ── */
.sb {
  background: var(--central-white);
  border-right-color: var(--central-line);
}

.sb-church {
  font-family: var(--font-brand);
  color: var(--central-black);
}

.sb-av {
  border-color: var(--central-red);
}

.sb-tier {
  background: var(--central-red-soft);
  color: var(--central-red);
  border-radius: var(--radius-button);
}

.sb-tier-dot,
.nb-badge,
.nb-badge-orange,
.sd-on,
.token-val {
  background: var(--central-red);
}

.nb {
  border-radius: calc(var(--radius-card) - 4px);
  transition: background var(--transition-fast);
}

.nb.active {
  background: var(--central-canvas);
}

.nb.active .nb-label {
  color: var(--central-black);
  font-weight: 600;
}

.nb-label {
  font-family: var(--font-web);
  color: var(--central-grey);
}

.card,
.hero-card,
.blessing-card,
.pulse-card,
.dash-pillar,
.tile,
.give-amt {
  border-radius: var(--radius-card);
}

.card-link,
.ba-outline,
.blessing-role,
.blessing-verse,
.lc-topic {
  color: var(--central-red);
}

.ba-primary,
.home-live-pill,
.pilot-next-btn {
  background: var(--central-red);
  color: var(--central-white);
  border-radius: var(--radius-button);
  transition: background var(--transition-fast);
}

.ba-primary:hover,
.home-live-pill:hover {
  background: var(--central-red-hover);
}

.co {
  padding-bottom: var(--section-padding-mobile);
}

.tb-title {
  color: var(--central-black);
}

.tb-search,
.tb-bell {
  border-radius: var(--radius-card);
  border-color: var(--central-line);
}

.platform-note,
.token-label,
.pulse-sub {
  color: var(--central-grey);
}

/* Duotone icon tiles */
.grace-ic { display: block; flex-shrink: 0; }
.grace-inline { display: inline-flex; align-items: center; gap: 6px; }
.ic-tile {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-card);
  background: var(--central-red-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ic-row {
  width: 34px;
  height: 34px;
  border-radius: calc(var(--radius-card) - 2px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0;
}
.nb-ico, .tile-ico, .dash-hub-ico, .pf-mc-ico, .badge-circle,
.post-av-icon, .tb-bell, .tb-search, .pf-qa-ico, .tx-ico, .pf-tx-ico,
.central-action-ico, .video-play-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0;
  line-height: 0;
}
.badge-circle, .post-av-icon { background: var(--central-red-soft) !important; }
.pf-mc-ico { min-height: 28px; }
.qcmd { display: inline-flex; align-items: center; gap: 6px; }

/* Central Pulse */
.pulse-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--central-red);
  animation: ld 1.4s infinite;
  flex-shrink: 0;
}
@keyframes ld {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
.pulse-card {
  background: var(--central-card);
  border: 1px solid var(--central-line);
  padding: 16px;
}
.pulse-score {
  font-size: 22px;
  font-weight: 700;
  color: var(--central-red);
  line-height: 1;
  font-family: var(--font-brand);
}
.pulse-sub { font-size: 10px; margin-top: 4px; }
.pulse-activity { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.pulse-act { display: flex; align-items: flex-start; gap: 8px; font-size: 11px; color: #555; line-height: 1.4; font-family: var(--font-web); }
.pulse-act strong { color: var(--central-black); font-weight: 600; }
.pulse-act-time { font-size: 9px; color: var(--central-grey); display: block; margin-top: 2px; }
.sb-pulse-block { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--central-line); width: 100%; }
.sb-commitment { font-size: 10px; font-weight: 700; color: var(--central-red); text-align: center; font-family: var(--font-brand); }

/* Dashboard pillars — GRACE at Central */
.dash-pillar {
  border-radius: var(--radius-card);
  transition: border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}
.dash-pillar-name {
  font-family: var(--font-brand);
}
.dash-pillar-badge {
  border-radius: var(--radius-button);
}

@media (min-width: 768px) {
  .co {
    padding-bottom: var(--section-padding-tablet);
  }
}

@media (min-width: 1024px) {
  .co {
    padding-bottom: var(--section-padding-desktop);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nb,
  .dash-pillar,
  .ba-primary,
  .home-live-pill {
    transition: none;
  }
  .pulse-live-dot {
    animation: none;
  }
}
