/* Hope look for /church-fathers (Church Fathers Explorer). Builds on
   hope-guides.css. Fixes from the 2026-10-12 audit: the hero now clears the
   fixed site header on phones, the tab bar scrolls with fade edges (and the
   active tab is scrolled into view by church-fathers.js), map labels are
   readable, and section text sits on the flat Hope background instead of a
   photo. Retoning goes through the page's own --cf-* tokens so every rule in
   church-fathers.css picks it up; the drawer sits outside <main>. */

body.hope-guide {
  --cf-ink: #232d42;
  --cf-ink-soft: #374151;
  --cf-faint: #4b5563;
  --cf-gold: #3a57e8;
  --cf-gold-deep: #2440c4;
  --cf-parch: #f5f6fa;
  --cf-parch-raised: #ffffff;
  --cf-line: #e6e9f2;
  --cf-line-strong: #d6dbe7;
  --cf-shadow: rgba(17, 38, 146, 0.07);
}
body.hope-guide .cf-page { font-family: var(--hg-font); color: var(--hg-text); padding-top: 92px; }

/* Hero as one white card */
body.hope-guide .cf-hero { background: var(--hg-surface); border: 1px solid var(--hg-border); border-radius: var(--hg-radius); box-shadow: var(--hg-shadow); padding: 34px 28px 30px; max-width: 900px; margin: 0 auto; }
body.hope-guide .cf-hero-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 0.12em; color: var(--hg-primary); }
body.hope-guide .cf-hero-title { font-weight: 800; font-size: clamp(30px, 4.6vw, 46px); letter-spacing: -0.01em; line-height: 1.12; }
body.hope-guide .cf-hero-sub { font-size: 19px; font-weight: 600; color: var(--hg-body); }
body.hope-guide .cf-hero-body { font-size: 16.5px; color: var(--hg-muted); }
body.hope-guide .cf-rule { display: none; }

/* Buttons + chips */
body.hope-guide .cf-btn { min-height: 44px; font-size: 14.5px; letter-spacing: 0; border-radius: 10px; color: var(--hg-text); border-color: var(--hg-border-strong); background: var(--hg-surface); }
body.hope-guide .cf-btn:hover { background: var(--hg-primary-soft); border-color: var(--hg-primary); color: var(--hg-primary); }
body.hope-guide .cf-btn--primary, body.hope-guide .cf-btn--primary:hover { background: var(--hg-primary); border-color: var(--hg-primary); color: #fff; }
body.hope-guide .cf-btn--primary:hover { background: var(--hg-primary-hover); }
body.hope-guide .cf-btn--sm { min-height: 40px; font-size: 13.5px; }
body.hope-guide .cf-chip { min-height: 40px; font-size: 14px; letter-spacing: 0; padding: 6px 14px; color: var(--hg-text); background: var(--hg-surface); }
body.hope-guide .cf-chip[aria-pressed="true"] { background: var(--hg-primary-soft); color: var(--hg-primary); border-color: var(--hg-primary); }

/* Tab bar: sits under the fixed header, scrolls sideways with fade edges */
body.hope-guide .cf-nav {
  top: 78px; background: rgba(255, 255, 255, 0.97); -webkit-backdrop-filter: none; backdrop-filter: none;
  border: 1px solid var(--hg-border); border-radius: 12px; box-shadow: var(--hg-shadow-sm); padding: 6px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 28px), transparent 100%);
  scroll-padding-inline: 28px;
}
body.hope-guide .cf-nav-btn { min-height: 44px; font-size: 14.5px; letter-spacing: 0; text-transform: none; color: var(--hg-muted); padding: 8px 14px; border-radius: 9px; }
body.hope-guide .cf-nav-btn:hover { background: var(--hg-surface-2); color: var(--hg-text); }
body.hope-guide .cf-nav-btn[aria-selected="true"] { background: var(--hg-primary); color: #fff; }
body.hope-guide .cf-nav-btn:focus-visible { outline: 3px solid var(--hg-primary); outline-offset: -3px; }

/* Section heads + cards */
body.hope-guide .cf-section-title { font-size: 22px; font-weight: 800; }
body.hope-guide .cf-section-sub { color: var(--hg-muted); }
body.hope-guide .cf-card { background: var(--hg-surface); border-radius: var(--hg-radius-sm); box-shadow: var(--hg-shadow-sm); }
body.hope-guide .cf-card:hover { border-color: var(--hg-primary); box-shadow: 0 8px 22px rgba(58, 87, 232, 0.14); }
body.hope-guide .cf-card h3 { font-size: 17px; font-weight: 800; }
body.hope-guide .cf-card-meta { font-size: 13.5px; font-weight: 700; }
body.hope-guide :is(.cf-story, .cf-slider-wrap) { background: var(--hg-surface); border-color: var(--hg-border); border-radius: var(--hg-radius); box-shadow: var(--hg-shadow-sm); }
body.hope-guide .cf-story-title { font-weight: 800; }
body.hope-guide .cf-story-span, body.hope-guide .cf-sub, body.hope-guide .cf-result-kind { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; }

/* Timeline + evidence */
body.hope-guide .cf-tl-tick { font-size: 13px; }
body.hope-guide .cf-tl-bar { background: #3a57e8; border-color: #2d47cc; }
body.hope-guide .cf-tl-bar--approx { background: repeating-linear-gradient(135deg, #5a72ec, #5a72ec 6px, #3a57e8 6px, #3a57e8 12px); }
body.hope-guide .cf-tl-bar span { font-size: 12.5px; color: #fff; }
body.hope-guide .cf-tl-marker { background: rgba(35, 45, 66, 0.35); }
body.hope-guide .cf-tl-marker span { font-size: 12.5px; color: var(--hg-text); background: rgba(255, 255, 255, 0.92); }
body.hope-guide .cf-tl-item-date { font-size: 14px; font-weight: 700; }
body.hope-guide .cf-slider-year { font-weight: 800; color: var(--hg-text); }
body.hope-guide .cf-slider { background: linear-gradient(90deg, var(--hg-primary) 0%, var(--hg-border-strong) 0%); }
body.hope-guide .cf-slider::-webkit-slider-thumb { background: var(--hg-primary); border-color: #fff; }
body.hope-guide .cf-slider::-moz-range-thumb { background: var(--hg-primary); border-color: #fff; }
body.hope-guide .cf-ev-row { background: var(--hg-surface); min-height: 44px; }
body.hope-guide .cf-ev-row--direct .cf-ev-mark { color: var(--hg-develop); }
body.hope-guide .cf-ev-row--suggestive .cf-ev-mark { color: var(--hg-reaffirm); }
body.hope-guide .cf-ev-row--none { opacity: 0.75; }
body.hope-guide .cf-ev-status { font-size: 13px; }

/* Quotes */
body.hope-guide .cf-quote { background: var(--hg-surface); border: 1px solid var(--hg-border); border-left: 4px solid var(--hg-primary); border-radius: var(--hg-radius-sm); }
body.hope-guide .cf-quote-cite { font-size: 14px; font-weight: 700; }
body.hope-guide .cf-quote-src { font-size: 13.5px; }
body.hope-guide .cf-quote-caution { color: #6b4a00; background: var(--hg-reaffirm-bg); }

/* Map: labels readable on desktop; on phones only the chosen place is
   labelled (the full list sits right under the map). */
body.hope-guide .cf-map-wrap { border-color: var(--hg-border); border-radius: var(--hg-radius); }
body.hope-guide .cf-pin circle { fill: #3a57e8; stroke: #fff; }
body.hope-guide .cf-pin.is-on circle { fill: #b42318; }
body.hope-guide .cf-pin text { font-family: var(--hg-font); font-size: 10.5px; font-weight: 600; fill: #232d42; stroke: rgba(255, 255, 255, 0.92); stroke-width: 3; }
body.hope-guide .cf-pin.is-on text { fill: #7a1a10; font-weight: 800; }
body.hope-guide .cf-place-row { background: var(--hg-surface); border-left-color: var(--hg-primary); min-height: 44px; }
body.hope-guide .cf-place-row.is-on { border-left-color: #b42318; background: var(--hg-primary-soft); }
body.hope-guide .cf-place-meta { font-size: 13.5px; }
body.hope-guide .cf-relmap-node text { font-family: var(--hg-font); font-size: 13px; font-weight: 600; }
body.hope-guide .cf-relmap-label { font-family: var(--hg-font); font-size: 12px; }

/* Compare table */
body.hope-guide .cf-compare-table tbody th { font-size: 13px; letter-spacing: 0.04em; }

/* Drawer (outside <main>) */
body.hope-guide .cf-drawer-panel, body.hope-guide .cf-drawer-panel * { font-family: var(--hg-font) !important; }
body.hope-guide .cf-drawer-panel { background: var(--hg-surface); border-left-color: var(--hg-border); }
body.hope-guide .cf-drawer-panel :is(h1, h2, h3, h4) { color: var(--hg-text) !important; letter-spacing: -0.01em; }
body.hope-guide .cf-prof-name { font-weight: 800; }
body.hope-guide .cf-drawer-close { min-height: 44px; min-width: 44px; font-size: 14px; border-radius: 10px; background: var(--hg-surface); }
body.hope-guide .cf-badge { font-size: 12px; letter-spacing: 0.03em; }
body.hope-guide .cf-rel-type { font-size: 12px; letter-spacing: 0.03em; }
body.hope-guide .cf-claim-doc { font-size: 13.5px; }
body.hope-guide .cf-caveats { background: var(--hg-reaffirm-bg); border-color: #f0dcae; }
body.hope-guide .cf-caveats > summary { min-height: 44px; font-size: 14.5px; color: #6b4a00; }
body.hope-guide .cf-page :focus-visible, body.hope-guide .cf-drawer :focus-visible { outline-color: var(--hg-primary); }

@media (max-width: 780px) {
  body.hope-guide .cf-page { padding-top: 84px; }
  body.hope-guide .cf-hero { padding: 24px 18px 22px; }
  body.hope-guide .cf-hero-sub { font-size: 17px; }
  body.hope-guide .cf-hero-body { font-size: 15.5px; }
  body.hope-guide .cf-nav { top: 70px; margin: 18px 0 24px; padding: 6px 10px; }
  body.hope-guide .cf-pin text { display: none; }
  body.hope-guide .cf-pin.is-on text { display: block; font-size: 24px; stroke-width: 5; }
  body.hope-guide .cf-ev-status { font-size: 13px; }
}