/* ================================================================
   Bible Study Circle — Main Stylesheet
   ================================================================ */

:root {
    --bg: #faf6f0;
    --fg: #2c2417;
    --accent: #7a5c3a;
    --accent-light: #a68b6b;
    --border: #d4c5b0;
    --quote-bg: #f3ece2;
    --scholar-bg: #eef4f0;
    --scholar-border: #7a9e8e;
    --link: #5a3e28;
    --passage-hover: rgba(122,92,58,0.06);
    --passage-active: rgba(122,92,58,0.1);
    --topbar-h: 42px;
    /* Category colors for chronology/genealogies */
    --cat-roman: #4a6fa5;
    --cat-jewish: #2c5f7c;
    --cat-herod: #8b5e9b;
    --cat-priest: #c17817;
    --cat-gospel: #3a7a4a;
    /* Language colors for glossary */
    --cat-gr: #2c5f7c;
    --cat-aram: #6b3a7a;
    --cat-lat: #8b3a3a;
    /* Table colors */
    --table-header: #7a5c3a;
    --table-stripe: #f3ece2;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'PT Sans', sans-serif;
    background: var(--bg);
    color: var(--fg);
    line-height: 1.7;
}

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Hidden scrollbar utility */
.scroll-hidden::-webkit-scrollbar { display: none; }
.scroll-hidden { -ms-overflow-style: none; scrollbar-width: none; }


/* ================================================================
   TOP NAVIGATION BAR
   ================================================================ */

.topbar {
    position: sticky; top: 0; z-index: 100;
    background: var(--fg); color: var(--bg);
    padding: 0 1.5rem; font-size: 0.85rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    display: flex; align-items: center; gap: 0.6rem;
    height: var(--topbar-h); flex-shrink: 0;
    overflow-x: auto;
}
.topbar::-webkit-scrollbar { display: none; }
.topbar { -ms-overflow-style: none; scrollbar-width: none; }

.topbar a {
    color: #ccc; text-decoration: none;
    padding: 0.2rem 0.4rem; border-radius: 3px;
    white-space: nowrap; flex-shrink: 0;
}
.topbar a:hover { color: #fff; text-decoration: none; }
.topbar a.current { color: #fff; background: var(--accent); }
.topbar .brand {
    font-family: 'PT Serif', serif; font-weight: 700;
    color: var(--bg); margin-right: 0.8rem; font-size: 1rem;
}


/* ================================================================
   SUB-NAVIGATION (course-level: lectures + ref pages)
   ================================================================ */

.subnav {
    background: var(--quote-bg);
    border-bottom: 1px solid var(--border);
    padding: 0.4rem 1.5rem;
    font-size: 0.82rem;
    overflow-x: auto;
    flex-shrink: 0;
}
.subnav::-webkit-scrollbar { display: none; }
.subnav { -ms-overflow-style: none; scrollbar-width: none; }

.subnav-inner {
    display: flex; align-items: center; gap: 0.5rem;
    max-width: 960px; margin: 0 auto;
}
.subnav-link {
    color: var(--accent-light); text-decoration: none;
    padding: 0.15rem 0.35rem; border-radius: 3px;
    white-space: nowrap;
}
.subnav-link:hover { color: var(--accent); text-decoration: none; background: rgba(122,92,58,0.08); }
.subnav-link.active { color: var(--fg); font-weight: 700; background: rgba(122,92,58,0.12); }

.subnav-ref {
    color: var(--scholar-border); text-decoration: none;
    padding: 0.15rem 0.35rem; border-radius: 3px;
    white-space: nowrap;
}
.subnav-ref:hover { color: var(--scholar-border); text-decoration: none; background: rgba(122,158,142,0.1); }
.subnav-ref.active { color: var(--scholar-border); font-weight: 700; background: rgba(122,158,142,0.15); }

.subnav-sep { color: var(--border); margin: 0 0.3rem; }


/* ================================================================
   LANDING PAGE
   ================================================================ */

.landing {
    max-width: 960px; margin: 0 auto;
    padding: 3rem 2rem 4rem;
}
.landing-hero {
    text-align: center; margin-bottom: 3rem;
}
.landing-hero h1 {
    font-family: 'PT Serif', serif; font-size: 2.4rem;
    color: var(--accent); margin-bottom: 0.3rem;
}
.landing-subtitle {
    font-size: 1.15rem; color: var(--accent-light);
}

.course-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.2rem;
}
.course-card {
    display: block; background: #fff;
    border: 1px solid var(--border); border-radius: 8px;
    padding: 1.5rem; text-decoration: none; color: var(--fg);
    transition: box-shadow 0.2s, border-color 0.2s;
}
.course-card:hover {
    box-shadow: 0 4px 16px rgba(122,92,58,0.12);
    border-color: var(--accent-light); text-decoration: none;
}
.course-card-type {
    font-size: 0.75rem; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--accent-light);
    margin-bottom: 0.5rem;
}
.course-card h2 {
    font-family: 'PT Serif', serif; font-size: 1.3rem;
    color: var(--accent); margin-bottom: 0.3rem;
}
.course-card-subtitle {
    font-size: 0.92rem; color: var(--accent-light); margin-bottom: 0.6rem;
}
.course-card-meta {
    font-size: 0.8rem; color: var(--border);
}


/* ================================================================
   COURSE PAGE
   ================================================================ */

.course-page {
    max-width: 960px; margin: 0 auto;
    padding: 2rem 2rem 4rem;
}
.course-header {
    margin-bottom: 2.5rem;
}
.course-header h1 {
    font-family: 'PT Serif', serif; font-size: 2rem;
    color: var(--accent); margin-bottom: 0.3rem;
}
.course-subtitle {
    font-size: 1.1rem; color: var(--accent-light); margin-bottom: 0.5rem;
}
.course-description {
    font-size: 0.95rem; color: var(--fg); max-width: 640px;
}

.course-section { margin-bottom: 2.5rem; }
.course-section h2 {
    font-family: 'PT Serif', serif; font-size: 1.2rem;
    color: var(--accent); border-bottom: 2px solid var(--accent);
    padding-bottom: 0.3rem; margin-bottom: 1rem;
}

.lecture-list {
    display: flex; flex-direction: column; gap: 0.6rem;
}
.lecture-card {
    display: flex; align-items: center; gap: 1rem;
    background: #fff; border: 1px solid var(--border);
    border-radius: 6px; padding: 1rem 1.2rem;
    text-decoration: none; color: var(--fg);
    transition: box-shadow 0.2s, border-color 0.2s;
}
.lecture-card:hover {
    box-shadow: 0 2px 10px rgba(122,92,58,0.1);
    border-color: var(--accent-light); text-decoration: none;
}
.lecture-card-order {
    font-family: 'PT Serif', serif; font-size: 1.6rem;
    color: var(--accent-light); min-width: 2rem; text-align: center;
}
.lecture-card h3 {
    font-family: 'PT Serif', serif; font-size: 1.1rem;
    color: var(--accent); margin-bottom: 0.1rem;
}
.lecture-card p {
    font-size: 0.88rem; color: var(--accent-light);
}

.ref-list {
    display: flex; flex-wrap: wrap; gap: 0.6rem;
}
.ref-card {
    display: inline-block; background: var(--scholar-bg);
    border: 1px solid var(--scholar-border);
    border-radius: 4px; padding: 0.5rem 1rem;
    font-size: 0.9rem; color: var(--scholar-border);
    text-decoration: none;
    transition: background 0.2s;
}
.ref-card:hover {
    background: rgba(122,158,142,0.15); text-decoration: none;
}


/* ================================================================
   LECTURE PAGE — v3 Two-column layout
   ================================================================ */

.lecture-layout {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--topbar-h));
}

.page-wrapper {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.scripture-column {
    flex: 1;
    max-width: 720px;
    margin: 0 auto;
    padding: 2rem 2rem 4rem;
    overflow-y: auto;
    transition: max-width 0.4s cubic-bezier(0.4,0,0.2,1),
                margin 0.4s cubic-bezier(0.4,0,0.2,1),
                padding 0.4s cubic-bezier(0.4,0,0.2,1);
}
.scripture-column.shifted {
    max-width: 38%;
    margin: 0;
    padding: 2rem 1.5rem 4rem 2rem;
}

.commentary-panel {
    width: 0; overflow: hidden; opacity: 0;
    overflow-y: auto;
    transition: width 0.4s cubic-bezier(0.4,0,0.2,1),
                opacity 0.3s ease 0.1s;
    border-left: 0 solid var(--border);
}
.commentary-panel.open {
    width: 62%; opacity: 1;
    border-left-width: 2px;
}
.commentary-inner {
    padding: 2rem 2.5rem 4rem 2rem;
    min-width: 300px;
}

/* Lecture nav (prev/next) */
.lecture-nav {
    display: flex; justify-content: space-between;
    margin-top: 2rem; padding-top: 1.5rem;
    border-top: 1px solid var(--border);
    font-size: 0.9rem;
}
.lecture-nav a {
    color: var(--accent); text-decoration: none;
}
.lecture-nav a:hover { text-decoration: underline; }


/* ================================================================
   REFERENCE PAGE
   ================================================================ */

.ref-page {
    max-width: 960px; margin: 0 auto;
    padding: 2rem 2rem 4rem;
}
.ref-content h1 {
    font-family: 'PT Serif', serif; font-size: 2rem;
    color: var(--accent); margin-bottom: 1rem;
}


/* ================================================================
   PASSAGE BLOCKS (v3 interactive layout)
   ================================================================ */

.passage {
    padding: 0.8rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s;
    margin-bottom: 0.3rem;
    border-left: 3px solid transparent;
}
.passage:hover { background: var(--passage-hover); }
.passage.active {
    background: var(--passage-active);
    border-left-color: var(--accent);
}

.section-header {
    font-family: 'PT Serif', serif; font-size: 1.2rem;
    color: var(--accent); border-bottom: 2px solid var(--accent);
    padding-bottom: 0.3rem; margin: 2rem 0 0.8rem;
    cursor: default;
}

.mobile-hint {
    display: none;
    font-size: 0.72rem; color: var(--accent-light);
    margin-left: 0.5rem; vertical-align: middle;
}


/* ================================================================
   SCRIPTURE TEXT
   ================================================================ */

.verse-num {
    font-size: 0.72rem; color: var(--accent-light);
    vertical-align: super; margin-right: 0.15rem; user-select: none;
}
.scripture-text {
    font-family: 'PT Serif', serif; font-size: 1.05rem; line-height: 1.85;
}

.scripture {
    font-family: 'PT Serif', serif; font-size: 1.02rem;
    line-height: 1.85; background: var(--quote-bg);
    border-left: 3px solid var(--accent);
    padding: 0.6rem 1rem; margin: 0.6rem 0;
    border-radius: 0 4px 4px 0;
}


/* ================================================================
   COMMENTARY CONTENT (inside passages or standalone)
   ================================================================ */

.commentary-content {
    display: none;
}
.commentary-content.visible {
    display: block;
    animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.commentary-content h2 {
    font-family: 'PT Serif', serif; font-size: 1.4rem;
    color: var(--accent); margin-bottom: 0.8rem;
    padding-bottom: 0.3rem; border-bottom: 1px solid var(--border);
}
.commentary-content h3 {
    font-family: 'PT Serif', serif; font-size: 1.1rem;
    color: var(--accent); margin: 1.2rem 0 0.5rem;
}

.close-commentary {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.82rem; color: var(--accent-light); cursor: pointer;
    margin-bottom: 1.5rem; padding: 0.3rem 0.6rem; border-radius: 4px;
    border: 1px solid var(--border); background: transparent;
    transition: all 0.2s;
}
.close-commentary:hover {
    background: var(--quote-bg); color: var(--accent);
}


/* ================================================================
   CONTENT ELEMENTS (used in lectures and reference pages)
   ================================================================ */

h1 { font-family: 'PT Serif', serif; font-size: 2rem; color: var(--accent); margin-bottom: 0.3rem; }
h2 { font-family: 'PT Serif', serif; color: var(--accent); }
h3 { font-family: 'PT Serif', serif; color: var(--accent); }

.subtitle {
    font-size: 1.1rem; color: var(--accent-light); margin-bottom: 2rem;
}

.term { font-weight: 700; color: var(--accent); }
.gr { font-style: italic; color: #2c5f7c; }
.aram { color: #6b3a7a; }
.lat { font-style: italic; color: #8b3a3a; }
.src { font-size: 0.8rem; color: var(--accent-light); }

.scholar-box {
    background: var(--scholar-bg); border-left: 3px solid var(--scholar-border);
    padding: 0.8rem 1rem; margin: 0.8rem 0;
    border-radius: 0 4px 4px 0; font-size: 0.88rem;
}
.scholar-box .scholar-name {
    font-weight: 700; color: var(--scholar-border);
    font-size: 0.82rem; text-transform: uppercase;
    letter-spacing: 0.03em; margin-bottom: 0.3rem;
}

.xref-box {
    background: var(--quote-bg); border-left: 3px solid var(--accent-light);
    padding: 0.6rem 1rem; margin: 0.6rem 0;
    border-radius: 0 4px 4px 0; font-size: 0.9rem;
}

.timeline-box {
    background: var(--quote-bg); border: 1px solid var(--border);
    border-radius: 6px; padding: 1rem; margin: 1rem 0;
    font-size: 0.88rem;
}
.timeline-box .tl-year {
    font-weight: 700; color: var(--accent); margin-right: 0.5rem;
}

.quote-table {
    width: 100%; border-collapse: collapse; margin: 1rem 0;
    font-size: 0.9rem;
}
.quote-table th {
    background: var(--accent); color: #fff;
    padding: 0.5rem 0.8rem; text-align: left;
    font-family: 'PT Sans', sans-serif; font-size: 0.85rem;
}
.quote-table td {
    padding: 0.5rem 0.8rem; border-bottom: 1px solid var(--border);
}
.quote-table tr:nth-child(even) td {
    background: var(--quote-bg);
}

/* Generic table styles (for bare <table> in content) */
.commentary-content table,
.ref-content table {
    width: 100%; border-collapse: collapse; margin: 1rem 0;
    font-size: 0.9rem;
}
.commentary-content th,
.ref-content th {
    background: var(--accent); color: #fff;
    padding: 0.5rem 0.8rem; text-align: left;
    font-family: 'PT Sans', sans-serif; font-size: 0.85rem;
}
.commentary-content td,
.ref-content td {
    padding: 0.5rem 0.8rem; border-bottom: 1px solid var(--border);
}
.commentary-content tr:nth-child(even) td,
.ref-content tr:nth-child(even) td {
    background: var(--quote-bg);
}


.synoptic {
    display: grid; grid-template-columns: 1fr 1fr 1fr;
    gap: 0.8rem; margin: 1rem 0; font-size: 0.88rem;
}
.synoptic > div {
    background: var(--quote-bg); border-radius: 4px;
    padding: 0.6rem 0.8rem;
}
.synoptic .syn-label {
    font-weight: 700; font-size: 0.78rem;
    color: var(--accent-light); margin-bottom: 0.3rem;
    text-transform: uppercase; letter-spacing: 0.03em;
}

.illustration {
    background: #fff; border: 1px solid var(--border);
    border-radius: 6px; padding: 1rem; margin: 1rem 0;
    text-align: center;
}
.illustration img {
    max-width: 100%; height: auto; border-radius: 4px;
}
.illustration .ill-caption {
    font-size: 0.82rem; color: var(--accent-light);
    margin-top: 0.5rem; font-style: italic;
}

.mini-map {
    border: 1px solid var(--border); border-radius: 6px;
    overflow: visible; margin: 1rem 0; min-height: 250px;
}

.footer {
    margin-top: 2rem; padding-top: 1.5rem;
    border-top: 1px solid var(--border);
    font-size: 0.85rem; color: var(--accent-light); text-align: center;
}



/* ================================================================
   REFERENCE PAGE STYLES
   ================================================================ */
.ref-page .ref-content {
    max-width: 960px;
    margin: 0 auto;
    padding: 2rem 1.5rem 4rem;
}

/* Geography: Leaflet map */
.ref-content #map {
    height: 400px;
    border-radius: 6px;
    border: 1px solid var(--border);
    margin: 1rem 0;
}
.ref-content .map-filters {
    display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem;
}
.ref-content .map-filter {
    padding: 0.3rem 0.8rem; border: 1px solid var(--border); border-radius: 4px;
    background: var(--bg); color: var(--fg); cursor: pointer; font-size: 0.85rem;
    transition: all 0.2s;
}
.ref-content .map-filter:hover { background: var(--quote-bg); }
.ref-content .map-filter.active {
    background: var(--accent); color: #fff; border-color: var(--accent);
}
.ref-content .loc-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.2rem; margin-top: 1.5rem;
}
.ref-content .loc-card {
    padding: 1rem; background: #fff; border: 1px solid var(--border); border-radius: 6px;
}
.ref-content .loc-card h3 {
    font-family: 'PT Serif', serif; font-size: 1.1rem; color: var(--accent);
    margin-bottom: 0.3rem;
}
.ref-content .loc-ref {
    font-size: 0.8rem; color: var(--accent-light); margin-bottom: 0.5rem;
}
.ref-content .loc-desc { font-size: 0.88rem; }

/* Temple: SVG diagrams */
.ref-content .diagram-container {
    background: #fff; border: 1px solid var(--border); border-radius: 8px;
    padding: 1.5rem; margin: 1.5rem 0; overflow-x: auto;
}
.ref-content .diagram-caption {
    font-size: 0.85rem; color: var(--accent-light); text-align: center;
    margin-top: 0.5rem; font-style: italic;
}

/* Genealogies: tree styles */
.ref-content .tree-container {
    overflow-x: auto; margin: 1rem 0;
}
.ref-content .tree-section {
    margin: 2rem 0;
}
.ref-content .tree-section h3 {
    font-family: 'PT Serif', serif; font-size: 1.15rem; color: var(--accent);
    border-bottom: 2px solid var(--accent); padding-bottom: 0.3rem; margin-bottom: 1rem;
}

/* Chronology: timeline styles */
.ref-content .timeline-box {
    background: var(--quote-bg); border-left: 3px solid var(--accent);
    border-radius: 6px; padding: 1rem; margin: 1rem 0; font-size: 0.88rem;
}
.ref-content .timeline-box .tl-year {
    font-weight: 700; color: var(--accent); margin-right: 0.5rem;
}

/* Glossary: term styles */
.ref-content .glossary-term {
    font-weight: 700; color: var(--accent);
}

/* Names: name index styles */
.ref-content .name-section h3 {
    font-family: 'PT Serif', serif; font-size: 1.15rem; color: var(--accent);
    margin: 1.5rem 0 0.5rem;
}

@media (max-width: 640px) {
    .ref-content #map { height: 300px; }
    .ref-content .loc-grid { grid-template-columns: 1fr; }
    .ref-content .gloss-entry {
        grid-template-columns: 1fr;
        gap: 0.2rem;
    }
    .ref-content .gloss-ref { text-align: left; }
    .ref-content .genealogy-compare { grid-template-columns: 1fr; }
    .ref-content .tree { min-width: 600px; }
}

/* ================================================================
   CHRONOLOGY PAGE
   ================================================================ */

.ref-content .intro {
    font-family: 'PT Serif', serif; font-size: 1rem;
    margin-bottom: 2rem; color: #444;
}

.ref-content .legend {
    display: flex; flex-wrap: wrap; gap: 1rem;
    margin-bottom: 2.5rem; padding: 1rem 1.2rem;
    background: var(--quote-bg); border-radius: 6px; border: 1px solid var(--border);
}
.ref-content .legend-item {
    display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem;
}
.ref-content .legend-dot {
    width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0;
}

.ref-content .period { margin-bottom: 3rem; }
.ref-content .period-title {
    font-family: 'PT Serif', serif; font-size: 1.4rem; color: var(--accent);
    border-bottom: 2px solid var(--accent); padding-bottom: 0.3rem; margin-bottom: 0.3rem;
}
.ref-content .period-sub {
    font-size: 0.9rem; color: var(--accent-light); margin-bottom: 1.2rem; font-style: italic;
}

.ref-content .tl { position: relative; padding-left: 2.5rem; }
.ref-content .tl::before {
    content: ''; position: absolute; left: 8px; top: 0; bottom: 0;
    width: 2px; background: var(--border);
}

.ref-content .tl-entry {
    position: relative; margin-bottom: 0.8rem; padding: 0.6rem 1rem;
    border-left: 3px solid var(--border); border-radius: 0 4px 4px 0;
    background: #fff; transition: transform 0.2s, box-shadow 0.2s;
}
.ref-content .tl-entry:hover {
    transform: translateX(3px); box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.ref-content .tl-entry::before {
    content: ''; position: absolute; left: -2.5rem; top: 0.8rem;
    width: 10px; height: 10px; border-radius: 50%; border: 2px solid #fff;
}

.ref-content .tl-entry.cat-roman { border-left-color: var(--cat-roman); }
.ref-content .tl-entry.cat-roman::before { background: var(--cat-roman); }
.ref-content .tl-entry.cat-jewish { border-left-color: var(--cat-jewish); }
.ref-content .tl-entry.cat-jewish::before { background: var(--cat-jewish); }
.ref-content .tl-entry.cat-herod { border-left-color: var(--cat-herod); }
.ref-content .tl-entry.cat-herod::before { background: var(--cat-herod); }
.ref-content .tl-entry.cat-priest { border-left-color: var(--cat-priest); }
.ref-content .tl-entry.cat-priest::before { background: var(--cat-priest); }
.ref-content .tl-entry.cat-gospel { border-left-color: var(--cat-gospel); }
.ref-content .tl-entry.cat-gospel::before { background: var(--cat-gospel); }

.ref-content .tl-entry.highlight {
    background: var(--quote-bg); border-left-width: 4px;
}

.ref-content .tl-date {
    font-family: 'PT Serif', serif; font-weight: 700; font-size: 0.9rem; color: var(--accent);
}
.ref-content .tl-title { font-weight: 700; font-size: 0.95rem; }
.ref-content .tl-desc { font-size: 0.88rem; color: #555; margin-top: 0.2rem; }
.ref-content .tl-ref {
    font-size: 0.8rem; color: var(--accent-light); margin-top: 0.3rem; font-style: italic;
}


/* ================================================================
   GENEALOGIES PAGE
   ================================================================ */

.ref-content .tree-section { overflow-x: auto; margin: 1rem 0; }

.ref-content .tree {
    display: flex; flex-direction: column; align-items: center; gap: 0;
    padding: 1rem 0; min-width: 800px;
}
.ref-content .tree-gen {
    display: flex; justify-content: center; gap: 1.5rem; margin-bottom: 0;
    position: relative; padding: 0.5rem 0;
}
.ref-content .tree-node {
    background: #fff; border: 2px solid var(--border); border-radius: 6px;
    padding: 0.4rem 0.7rem; font-size: 0.82rem; text-align: center;
    min-width: 110px; max-width: 150px; position: relative; z-index: 2;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.ref-content .tree-node:hover {
    border-color: var(--accent); box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.ref-content .tree-node.herod { border-color: var(--cat-herod); background: #f8f0fa; }
.ref-content .tree-node.hasmonean { border-color: var(--cat-jewish); background: #eef3f8; }
.ref-content .tree-node.gospel { border-color: var(--cat-gospel); background: #eef8f0; }
.ref-content .tree-node .name { font-weight: 700; font-size: 0.88rem; }
.ref-content .tree-node .years { font-size: 0.72rem; color: var(--accent-light); }
.ref-content .tree-node .role { font-size: 0.72rem; color: #888; font-style: italic; }

.ref-content .tree-connector { width: 2px; height: 20px; background: var(--border); margin: 0 auto; }
.ref-content .tree-hline { height: 2px; background: var(--border); position: relative; }

.ref-content .genealogy-compare {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin: 1rem 0;
}
.ref-content .genealogy-col {
    background: #fff; border: 1px solid var(--border); border-radius: 6px; padding: 1rem;
}
.ref-content .genealogy-col h3 { margin-top: 0; }
.ref-content .genealogy-col .gen-list { list-style: none; padding: 0; }
.ref-content .genealogy-col .gen-list li {
    padding: 0.25rem 0; border-bottom: 1px dotted var(--border);
    font-size: 0.85rem; display: flex; justify-content: space-between;
}
.ref-content .genealogy-col .gen-list li:last-child { border-bottom: none; }
.ref-content .genealogy-col .gen-list .gen-name { font-weight: 700; }
.ref-content .genealogy-col .gen-list .gen-note {
    font-size: 0.75rem; color: var(--accent-light); font-style: italic;
}

.ref-content .match-highlight { background: #fff8e1; }


/* ================================================================
   GLOSSARY PAGE
   ================================================================ */

.ref-content .gloss-entry {
    padding: 0.6rem 0; border-bottom: 1px dotted var(--border);
    display: grid; grid-template-columns: 200px 1fr 120px; gap: 0.5rem;
    align-items: start;
}
.ref-content .gloss-term { font-weight: 700; font-size: 0.95rem; }
.ref-content .gloss-term.gr { color: var(--cat-gr); font-style: italic; }
.ref-content .gloss-term.aram { color: var(--cat-aram); direction: rtl; }
.ref-content .gloss-term.lat { color: var(--cat-lat); font-style: italic; }
.ref-content .gloss-def { font-size: 0.88rem; color: #444; }
.ref-content .gloss-ref { font-size: 0.78rem; color: var(--accent-light); text-align: right; }
.ref-content .gloss-alpha {
    font-family: 'PT Serif', serif; font-size: 1.8rem; color: var(--accent);
    border-bottom: 2px solid var(--accent); margin-top: 2rem; margin-bottom: 0.5rem;
}


/* ================================================================
   NAMES PAGE
   ================================================================ */

.ref-content .name-entry {
    padding: 0.7rem 0; border-bottom: 1px dotted var(--border);
}
.ref-content .name-title {
    font-family: 'PT Serif', serif; font-weight: 700; font-size: 1.05rem; color: var(--accent);
}
.ref-content .name-alt { font-size: 0.85rem; color: var(--accent-light); margin-left: 0.5rem; }
.ref-content .name-desc { font-size: 0.9rem; margin-top: 0.3rem; }
.ref-content .name-ref { font-size: 0.8rem; color: var(--accent-light); margin-top: 0.3rem; }
.ref-content .alpha-letter {
    font-family: 'PT Serif', serif; font-size: 1.8rem; color: var(--accent);
    border-bottom: 2px solid var(--accent); margin-top: 2rem; margin-bottom: 0.5rem;
}


/* ================================================================
   SEARCH/FILTER UI (shared across ref pages)
   ================================================================ */

.ref-search {
    display: flex; gap: 0.5rem; margin-bottom: 1.5rem; align-items: center;
}
.ref-search input {
    flex: 1; padding: 0.5rem 0.8rem; border: 1px solid var(--border);
    border-radius: 4px; font-size: 0.9rem; font-family: 'PT Sans', sans-serif;
    background: #fff; color: var(--fg);
    transition: border-color 0.2s;
}
.ref-search input:focus {
    outline: none; border-color: var(--accent);
}
.ref-search input::placeholder { color: var(--accent-light); }
.ref-search .search-count {
    font-size: 0.8rem; color: var(--accent-light); white-space: nowrap;
}
.ref-filters {
    display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem;
}
.ref-filter-btn {
    padding: 0.3rem 0.8rem; border: 1px solid var(--border); border-radius: 4px;
    background: var(--bg); color: var(--fg); cursor: pointer; font-size: 0.85rem;
    transition: all 0.2s; font-family: 'PT Sans', sans-serif;
}
.ref-filter-btn:hover { background: var(--quote-bg); }
.ref-filter-btn.active {
    background: var(--accent); color: #fff; border-color: var(--accent);
}
.ref-no-results {
    text-align: center; padding: 2rem; color: var(--accent-light); font-style: italic;
}


/* ================================================================
   MOBILE LAYOUT
   ================================================================ */

@media (max-width: 768px) {
    body { overflow-y: auto; height: auto; }

    .topbar { padding: 0 1rem; }

    .page-wrapper {
        display: block; height: auto; overflow: visible;
    }
    .scripture-column {
        max-width: 100% !important; margin: 0 !important;
        padding: 1.5rem 1rem 3rem !important;
        overflow-y: visible !important; height: auto !important;
    }
    .scripture-column.shifted {
        max-width: 100% !important; margin: 0 !important;
    }
    .commentary-panel {
        display: none !important;
    }

    /* Inline commentary inside passage (accordion) */
    .passage .commentary-content {
        display: none;
        border-top: 1px solid var(--border);
        margin-top: 0.8rem; padding-top: 0.8rem;
        cursor: default;
    }
    .passage .commentary-content.visible {
        display: block;
        animation: slideDown 0.3s ease;
    }
    .passage { border-left-width: 4px; }
    .passage .mobile-hint { display: inline-block; }
    .passage.active .mobile-hint { display: none; }

    .commentary-content h2 { font-size: 1.2rem; }

    .landing { padding: 2rem 1rem 3rem; }
    .landing-hero h1 { font-size: 1.8rem; }
    .course-grid { grid-template-columns: 1fr; }

    .course-page { padding: 1.5rem 1rem 3rem; }
    .ref-page { padding: 1.5rem 1rem 3rem; }

    .synoptic { grid-template-columns: 1fr; }

    .subnav-inner { flex-wrap: wrap; }
}

@keyframes slideDown {
    from { opacity: 0; max-height: 0; }
    to { opacity: 1; max-height: 2000px; }
}