/* Hope look for /family-tree (The Biblical Family Tree). Builds on
   hope-guides.css. Gender stays on the card's side/top bar and the avatar;
   era badges keep their colour but now carry readable text. The golden
   Messianic spine stays gold: it is the meaning of the page. Drawer and
   methods modal sit outside <main>, so they get the Hope font here.
   Phone fix: couples stack (spouse under the person) so spouse cards such as
   Eve are no longer cut off past the right edge. */

body.hope-guide .bt-page { color: var(--hg-text); font-family: var(--hg-font); }

/* Hero as one white card */
body.hope-guide .bt-hero { background: var(--hg-surface); border: 1px solid var(--hg-border); border-radius: var(--hg-radius); box-shadow: var(--hg-shadow); -webkit-backdrop-filter: none; backdrop-filter: none; }
body.hope-guide .bt-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 0.12em; color: var(--hg-primary); }
body.hope-guide .bt-title { font-weight: 800; font-size: clamp(30px, 4.4vw, 44px); letter-spacing: -0.01em; line-height: 1.12; color: var(--hg-text) !important; }
body.hope-guide .bt-sub { font-size: 17px; color: var(--hg-body); }
body.hope-guide .bt-sub strong { color: var(--hg-text); }

/* Search */
body.hope-guide .bt-search-wrap { background: var(--hg-surface); border: 1px solid var(--hg-border-strong); border-radius: 12px; box-shadow: none; padding: 4px 6px 4px 14px; }
body.hope-guide .bt-search-wrap:focus-within { border-color: var(--hg-primary); box-shadow: 0 0 0 3px var(--hg-primary-soft); }
body.hope-guide .bt-search-wrap svg { color: var(--hg-faint); }
body.hope-guide .bt-search { font-size: 16px; color: var(--hg-text); min-height: 40px; }
body.hope-guide .bt-search::placeholder { color: var(--hg-faint); }
body.hope-guide .bt-search-clear.is-visible { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; color: var(--hg-faint); border-radius: 10px; }
body.hope-guide .bt-search-results { background: var(--hg-surface); border: 1px solid var(--hg-border); border-radius: 12px; box-shadow: 0 18px 40px rgba(17, 38, 146, 0.14); }
body.hope-guide .bt-search-result { min-height: 44px; justify-content: center; align-items: flex-start; border-bottom-color: var(--hg-border); }
body.hope-guide .bt-search-result:hover, body.hope-guide .bt-search-result.is-active { background: var(--hg-primary-soft); }
body.hope-guide .bt-search-result-name { font-size: 15px; font-weight: 700; color: var(--hg-text); }
body.hope-guide .bt-search-result-role, body.hope-guide .bt-search-empty { font-size: 14px; color: var(--hg-muted); }

/* Legend + buttons */
body.hope-guide .bt-legend-item { font-size: 14px; font-weight: 600; color: var(--hg-text); background: var(--hg-surface); border-color: var(--hg-border); padding: 5px 11px; }
body.hope-guide .bt-btn { min-height: 44px; font-size: 14.5px; font-weight: 700; letter-spacing: 0; color: var(--hg-text); background: var(--hg-surface); border: 1px solid var(--hg-border-strong); border-radius: 10px; padding: 8px 14px; }
body.hope-guide .bt-btn:hover { background: var(--hg-primary-soft); border-color: var(--hg-primary); color: var(--hg-primary); }
body.hope-guide .bt-btn.is-active { background: #fdf1d9; border-color: #c9a24e; color: #6b4a00; }

/* Cards */
body.hope-guide .bt-node { background: var(--hg-surface); border: 1px solid var(--hg-border); border-radius: var(--hg-radius-sm); box-shadow: var(--hg-shadow-sm); }
body.hope-guide .bt-node:hover { border-color: var(--hg-primary); box-shadow: 0 8px 22px rgba(58, 87, 232, 0.14); }
body.hope-guide .bt-node:focus-visible { outline: 3px solid var(--hg-primary); outline-offset: 2px; }
body.hope-guide .bt-node.is-focused { border-color: var(--hg-primary); box-shadow: 0 0 0 3px var(--hg-primary), 0 10px 26px rgba(58, 87, 232, 0.18); }
body.hope-guide .bt-node-bar { border-radius: 12px 12px 0 0; }
body.hope-guide .bt-node--compact .bt-node-bar { border-radius: 12px 0 0 12px; }
body.hope-guide .bt-node-name { font-size: 16.5px !important; font-weight: 800; color: var(--hg-text) !important; }
body.hope-guide .bt-node--messianic .bt-node-name { color: #5a3f00 !important; }
body.hope-guide .bt-node-aka { font-size: 13px; color: var(--hg-muted); }
body.hope-guide .bt-node-role { font-size: 14px; color: var(--hg-body); }
body.hope-guide .bt-node-dates { font-size: 13px; color: var(--hg-muted); }
body.hope-guide .bt-node-era { font-size: 12px; letter-spacing: 0.02em; text-transform: none; padding: 3px 10px; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); }
body.hope-guide .bt-node--compact .bt-node-name { font-size: 15px !important; }
body.hope-guide .bt-node--compact .bt-node-role { font-size: 13.5px; }
body.hope-guide .bt-node--compact .bt-node-dates { font-size: 13px; }
body.hope-guide .bt-node--compact .bt-node-era { font-size: 12px; padding: 2px 9px; }

/* Branch / sub-branch toggles: readable, 44px */
body.hope-guide .bt-branch-toggle, body.hope-guide .bt-sub-toggle { min-height: 44px; font-size: 14px; font-weight: 700; letter-spacing: 0; color: var(--hg-text); background: var(--hg-surface); border: 1px dashed var(--hg-border-strong); border-radius: 999px; padding: 6px 14px; }
body.hope-guide .bt-sub-toggle { min-height: 40px; font-size: 13.5px; }
body.hope-guide .bt-branch-toggle:hover, body.hope-guide .bt-sub-toggle:hover { background: var(--hg-primary-soft); border-color: var(--hg-primary); color: var(--hg-primary); }
body.hope-guide .bt-branch::before, body.hope-guide .bt-branch::after, body.hope-guide .bt-item::before, body.hope-guide .bt-item::after { background: var(--hg-border-strong); }
body.hope-guide .bt-couple-more { min-height: 44px; font-size: 14px; color: var(--hg-text); background: var(--hg-surface); border-color: var(--hg-border-strong); }
body.hope-guide .bt-couple-more:hover, body.hope-guide .bt-couple-more.is-open { background: var(--hg-primary-soft); color: var(--hg-primary); }

/* Notes */
body.hope-guide .bt-note { background: var(--hg-surface); border: 1px solid var(--hg-border); border-left: 4px solid #c9a24e; border-radius: var(--hg-radius-sm); box-shadow: var(--hg-shadow-sm); }
body.hope-guide .bt-note b { font-size: 12.5px; letter-spacing: 0.1em; color: var(--hg-primary); }
body.hope-guide .bt-note p { color: var(--hg-body); }

/* Drawer + methods modal (outside <main>) */
body.hope-guide .bt-drawer, body.hope-guide .bt-drawer *, body.hope-guide .bt-modal, body.hope-guide .bt-modal * { font-family: var(--hg-font) !important; }
body.hope-guide .bt-drawer { background: var(--hg-surface); border-right: 1px solid var(--hg-border); }
body.hope-guide .bt-drawer-head::after { background: rgba(255, 255, 255, 0.9); }
body.hope-guide .bt-drawer-era { font-size: 12px; letter-spacing: 0.02em; text-transform: none; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); }
body.hope-guide .bt-drawer-name { color: var(--hg-text) !important; font-weight: 800; letter-spacing: -0.01em; }
body.hope-guide .bt-drawer-aka, body.hope-guide .bt-drawer-dates { font-size: 14px; color: var(--hg-muted); }
body.hope-guide .bt-drawer-role { color: var(--hg-body); }
body.hope-guide :is(.bt-drawer-close, .bt-modal-close) { width: 44px; height: 44px; top: 10px; right: 10px; border-radius: 10px; border-color: var(--hg-border); color: var(--hg-faint); }
body.hope-guide .bt-drawer-thread { font-size: 12.5px; letter-spacing: 0.02em; text-transform: none; color: #6b4a00; background: #fdf1d9; }
body.hope-guide .bt-drawer-summary, body.hope-guide .bt-drawer-detail, body.hope-guide .bt-drawer-spouses { color: var(--hg-body); }
body.hope-guide .bt-drawer-label { font-size: 12.5px; letter-spacing: 0.1em; color: var(--hg-primary); }
body.hope-guide .bt-relation { min-height: 40px; font-size: 14px; color: var(--hg-text); background: var(--hg-surface-2); border-color: var(--hg-border-strong); }
body.hope-guide .bt-relation:hover { background: var(--hg-primary-soft); border-color: var(--hg-primary); }
body.hope-guide .bt-drawer-scriptures { color: var(--hg-body); background: var(--hg-surface-2); }
body.hope-guide .bt-drawer-honest p { color: #5a2a1e; }
body.hope-guide .bt-modal { background: var(--hg-surface); border: 1px solid var(--hg-border); border-radius: var(--hg-radius); }
body.hope-guide .bt-modal-head { border-bottom-color: var(--hg-border); }
body.hope-guide .bt-modal-head h2 { color: var(--hg-text) !important; font-weight: 800; letter-spacing: -0.01em; }
body.hope-guide .bt-modal-body p, body.hope-guide .bt-modal-body li { color: var(--hg-body); }
body.hope-guide .bt-modal-body strong { color: var(--hg-text); }

/* Phones: stack each couple so the spouse sits under the person instead of
   running off the right edge; the heart turns to point down. */
@media (max-width: 640px) {
  body.hope-guide .bt-hero { padding: 22px 18px 20px; }
  body.hope-guide .bt-sub { font-size: 15.5px; }
  body.hope-guide .bt-couple { flex-direction: column; align-items: flex-start; gap: 4px; }
  body.hope-guide .bt-couple--compact { align-items: flex-start; }
  body.hope-guide .bt-couple-link { padding: 2px 0; margin-left: calc(var(--trunk, 100px) - 11px); }
  body.hope-guide .bt-couple-extra { flex-direction: column; align-items: flex-start; }
  body.hope-guide .bt-couple-more { margin: 2px 0; }
  body.hope-guide .bt-node--spouse, body.hope-guide .bt-node--compact.bt-node--spouse { width: 200px; }
  body.hope-guide .bt-branch .bt-couple-link { margin-left: 18px; }
  body.hope-guide .bt-branch { margin-left: calc(var(--trunk) - 60px); }
}