/* =====================================================================
   BenefitCanada — red & white theme (2026-10-07)
   Loaded after site.css. Clean, flat, white surfaces; Canada red accents;
   one maple leaf as the brand mark; minimal imagery.
   To revert: remove the theme.css <link> in Site.Master
   (full pre-redesign version: git tag pre-redesign-2026-10-07).
   ===================================================================== */

:root {
  --red: #D52B1E;          /* Canada red */
  --red-dark: #A8201A;
  --red-tint: #FDF1F0;
  --ink: #1A1A1A;
  --muted: #5F6368;
  --line: #E6E6E6;
  --bg: #FFFFFF;
  --card: #FFFFFF;
  --green: #1E7B46;        /* only for "ok/receiving" status */
  --amber: #A35C00;
  --radius: 10px;
}

html, body { background: #fff; color: var(--ink); }
body { font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; }
a { color: var(--red); }
a:hover { color: var(--red-dark); }
h1, h2, h3 { color: var(--ink); letter-spacing: -0.01em; }
h1 em { font-style: normal; color: var(--red); }

/* thin red band across the very top — the only decorative element besides the leaf */
body::before { content: ""; display: block; height: 4px; background: var(--red); }

/* ---------- header / brand ---------- */
.topbar { background: #fff; border-bottom: 1px solid var(--line); box-shadow: none; backdrop-filter: none; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 1.2rem; font-weight: 600; color: var(--ink); text-decoration: none; }
.brand .leaf { width: 28px; height: 28px; margin: 0; flex: none; }
.brand b { color: var(--red); font-weight: 700; }
.topbar nav a { color: var(--ink); font-weight: 500; }
.topbar nav a:hover { color: var(--red); }

/* ---------- buttons ---------- */
.btn, input[type=submit].btn { background: var(--red); color: #fff; border: 1px solid var(--red); border-radius: 6px; box-shadow: none; font-weight: 600; }
.btn:hover, input[type=submit].btn:hover { background: var(--red-dark); border-color: var(--red-dark); color: #fff; }
.btn-ghost, input[type=submit].btn-ghost { background: #fff; color: var(--red); border: 1px solid var(--red); }
.btn-ghost:hover, input[type=submit].btn-ghost:hover { background: var(--red-tint); color: var(--red-dark); }
.btn:disabled { background: #EEE; border-color: #DDD; color: #888; }
.chip { border-radius: 6px; }
.chip.on { background: var(--red); border-color: var(--red); color: #fff; }

/* ---------- surfaces: flat white, thin borders, no shadows/gradients ---------- */
.hero, .life-section, .categories, .next-steps-section, .block, section.block { background: #fff !important; background-image: none !important; }
.card, .form-card, .plan, .benefit, .summary-bar, .life-card, .event-card, .prov-grid a, .next-steps-grid > div, .fact, .categories .card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: none !important;
}
.card:hover, .event-card:hover, .prov-grid a:hover, .life-card:hover { border-color: var(--red); box-shadow: none; }
.benefit { border-left: 3px solid var(--red); }
.plan.featured { border: 2px solid var(--red); }
.plan-flag { background: var(--red); color: #fff; }
.fact { border-left: 3px solid var(--red); }
section.block + section.block { border-top: 1px solid var(--line); }

/* eyebrows and small labels in red caps */
.eyebrow, .province-eyebrow, .hero-path-label, .account-eyebrow { color: var(--red); letter-spacing: .08em; font-weight: 700; }
.ai-badge { background: #fff; border: 1px solid var(--red); color: var(--red); border-radius: 999px; box-shadow: none; }
.ai-dot { background: var(--red); box-shadow: none; }

/* step numbers: red outline circles */
.step-num { background: #fff; color: var(--red); border: 2px solid var(--red); border-radius: 50%; }

/* ---------- hero: text + one big leaf, no photo ---------- */
.hero { padding: 72px 0 64px; border-bottom: 1px solid var(--line); }
.hero-leaf { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
.hero-figure { margin: 0; width: min(440px, 100%); }
.hero-image { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 12px; }
.hero-figure figcaption { color: var(--muted); font-size: 12px; margin-top: 6px; }
.hero-mark { width: 72px; height: 72px; }
.hero .stats b { color: var(--red); }
.hero-note { color: var(--muted); }
.hero-urgency { color: var(--ink); font-size: 15px; margin: 10px 0 0; max-width: 46ch; }
.hero-urgency b { color: var(--red); }
.hero-card, .hero-image-note, .photo-note { display: none !important; }

/* ---------- life cards: text only ---------- */
.life-card { display: block; padding: 24px; }
.life-card > div { padding: 0; }
.life-card h3 { margin-top: 0; }
.life-card a { font-weight: 600; }

/* signup banner: white with red border instead of dark green block */
.signup-banner { background: #fff !important; color: var(--ink) !important; border: 2px solid var(--red); box-shadow: none; }
.signup-banner h3, .signup-banner p, .signup-banner span { color: var(--ink) !important; }

/* ---------- status colours stay meaningful but quiet ---------- */
.tag { background: #F4F4F4; color: #333; border-radius: 4px; }
.tag.high { background: #E9F5EE; color: var(--green); }
.tag.medium { background: #FFF4E5; color: var(--amber); }
.msg-info { background: #F6F7F9; border-color: #E2E5EA; color: #333; }
.msg-err { background: var(--red-tint); border-color: #F3C4C0; color: var(--red-dark); }
.progress > div { background: var(--red); }

/* ---------- footer ---------- */
.footer { background: #fff; border-top: 1px solid var(--line); }
.footer a { color: var(--ink); }
.footer a:hover { color: var(--red); }

/* ---------- forms ---------- */
.field input, .field select, .field textarea { border-radius: 6px; border-color: #CFCFCF; }
.field input[type=search] { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid #CFCFCF; border-radius: 6px; font: inherit; background: #fff; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--red); outline-offset: 1px; border-color: var(--red); }
:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

@media (max-width: 860px) {
  .hero-mark { display: none; }
}

/* ---------- override hard-coded greens/beiges from earlier designs ---------- */
.hero h1 { color: var(--ink); }
.hero h1 em, h1 em { color: var(--red); }
.hero-card b { color: var(--ink); }
.signup-banner .btn { background: var(--red); color: #fff; border-color: var(--red); }
.signup-banner .btn:hover { background: var(--red-dark); color: #fff; }
.registration-story, .questionnaire-intro { background: #fff !important; border: 1px solid var(--line); }
.plan.featured { border-color: var(--red); }
.ai-badge { display: inline-flex; padding: 6px 14px; border: 1px solid var(--red); border-radius: 999px; color: var(--red); background: #fff; font-size: .78rem; letter-spacing: .08em; }
:focus-visible, #form-error:focus { outline: 3px solid var(--red); outline-offset: 3px; }
.hero p.lead { color: #3F4246; }
.plan .ticks li::before { color: var(--red); }