/* ============================================================================
   Flat Truths · Biblical section · supplementary styles
   Extends dossier.css. Only loaded on biblical-* pages.

   Addresses: B1 verse-block, B2 key-list, B3 callout pattern,
              A1 hebrew, A2 scripture blockquote, A3 sacred names,
              A4 back-to-top, A5 verse-block heading hierarchy.
   ============================================================================ */

/* ============== B1 + A2 + A5 · verse-block as scripture card ============== */
.verse-block {
    background: linear-gradient(180deg, var(--bg-elevated) 0%, rgba(5,8,23,0.4) 100%);
    border: 1px solid var(--border);
    border-left: 3px solid var(--cyan);
    padding: 22px 24px 20px;
    margin: 28px 0;
    border-radius: 0 4px 4px 0;
    position: relative;
}
.verse-block::before {
    content: "//";
    position: absolute;
    top: 18px;
    right: 22px;
    font-family: var(--mono);
    font-size: 0.7rem;
    color: var(--cyan);
    opacity: 0.4;
    letter-spacing: 0.18em;
}
.verse-block h3 {
    font-family: var(--mono);
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--cyan);
    margin: 0 0 12px 0;
    font-weight: 600;
    line-height: 1.4;
    padding-right: 40px;        /* clear the // mark */
}
.verse-block h3 em {
    font-style: italic;
    font-weight: 500;
    color: var(--gold, #d4af37);
    text-transform: none;
    letter-spacing: 0.02em;
}
.verse-block blockquote {
    border-left: 0;
    padding: 0;
    margin: 0 0 12px 0;
    color: var(--text);
    font-style: normal;
    font-family: var(--serif);
    font-size: 1.08rem;
    line-height: 1.7;
}
.verse-block blockquote::before { content: "“"; font-size: 1.3em; color: var(--cyan); margin-right: 0.05em; }
.verse-block blockquote::after  { content: "”"; font-size: 1.3em; color: var(--cyan); margin-left: 0.05em; }
.verse-block p:not(.verse-block blockquote) {
    color: var(--text-muted);
    font-size: 0.96rem;
    line-height: 1.6;
    margin: 8px 0 0;
}
.verse-block p strong {
    color: var(--text);
    font-family: var(--mono);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    margin-right: 0.25em;
}

/* ============== B2 · key-list (scripture references) ============== */
.key-list {
    list-style: none;
    padding: 0;
    margin: 18px 0 24px;
    border-top: 1px solid var(--border);
}
.key-list li {
    padding: 12px 0 12px 28px;
    border-bottom: 1px solid var(--border);
    position: relative;
    font-size: 0.96rem;
    line-height: 1.55;
    color: var(--text-muted);
    margin: 0;
}
.key-list li::before {
    content: "›";
    position: absolute;
    left: 6px;
    top: 12px;
    color: var(--cyan);
    font-family: var(--mono);
    font-weight: 700;
}
.key-list li strong {
    color: var(--text);
    font-family: var(--mono);
    font-size: 0.84rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 600;
    margin-right: 0.5em;
}
.key-list li a {
    color: var(--cyan);
    text-decoration: none;
    border-bottom: 1px dotted var(--cyan);
}
.key-list li a:hover { border-bottom-style: solid; }

/* ============== B3 · biblical callout — match site pattern ============== */
.evidence .callout {
    background: linear-gradient(135deg, rgba(0,212,255,0.06), rgba(0,212,255,0.02));
    border-left-width: 3px;
}
.evidence .callout h3 {
    font-family: var(--mono);
    font-size: 0.74rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--cyan);
    margin: 0 0 14px;
    font-weight: 600;
}
.evidence .callout ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.evidence .callout li {
    padding: 8px 0;
    border-bottom: 1px solid rgba(0,212,255,0.1);
    margin: 0;
}
.evidence .callout li:last-child { border-bottom: 0; }
.evidence .callout li a {
    color: var(--text);
    text-decoration: none;
    display: flex;
    align-items: center;
    transition: color 0.15s;
}
.evidence .callout li a::before {
    content: "→";
    color: var(--cyan);
    margin-right: 0.7em;
    font-family: var(--mono);
    transition: transform 0.15s;
}
.evidence .callout li a:hover { color: var(--cyan); }
.evidence .callout li a:hover::before { transform: translateX(3px); }
.evidence .callout p {
    color: var(--text-muted);
    font-size: 0.92rem;
    margin: 0 0 8px;
}

/* ============== A1 · Hebrew / Greek inline term ============== */
.evidence p em,
.verse-block p em {
    font-style: italic;
    color: var(--gold, #d4af37);
    font-weight: 500;
    font-family: var(--serif);
    padding: 0 0.05em;
}
/* But preserve italic-as-emphasis when used in narration */
.evidence p em.plain,
.evidence p i { color: inherit; font-weight: inherit; }

/* ============== A3 · Sacred names ============== */
/* These three names should pop slightly without being garish.
   Applied via opt-in class .sn or auto-wrapping in JS. */
.sn,
.sacred-name {
    color: var(--gold, #d4af37);
    font-weight: 500;
    letter-spacing: 0.01em;
}

/* ============== A4 · floating back-to-top ============== */
.rw-top-btn {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(5, 8, 23, 0.92);
    backdrop-filter: blur(8px);
    border: 1px solid var(--cyan);
    color: var(--cyan);
    cursor: pointer;
    display: grid;
    place-items: center;
    font-family: var(--mono);
    font-size: 1.1rem;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.2s, transform 0.2s, background 0.15s;
    z-index: 90;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.rw-top-btn.visible {
    opacity: 1;
    transform: translateY(0);
}
.rw-top-btn:hover {
    background: var(--cyan);
    color: var(--bg);
}

/* ============== Hero refinements specific to biblical pages ============== */
.hero h1 em {
    font-style: italic;
    font-weight: 400;
    color: var(--gold, #d4af37);
}

/* ============== Print-friendly tweaks ============== */
@media print {
    .rw-top-btn,
    .site-header,
    .site-footer { display: none !important; }
    .verse-block {
        background: transparent !important;
        border: 1px solid #999;
        page-break-inside: avoid;
    }
    .verse-block blockquote { color: #000 !important; }
    .evidence .callout { background: transparent !important; }
}

/* ============== Mobile ============== */
@media (max-width: 640px) {
    .verse-block { padding: 18px 16px 14px; margin: 22px -8px; border-radius: 0; }
    .verse-block::before { display: none; }
    .verse-block h3 { font-size: 0.72rem; padding-right: 0; }
    .verse-block blockquote { font-size: 1.02rem; line-height: 1.65; }
    .key-list li { padding-left: 22px; font-size: 0.93rem; }
    .rw-top-btn { bottom: 16px; right: 16px; width: 38px; height: 38px; }
}