/* Bible Rooted - Bible Study article styles.
   Built on the variables and card styles in header.php and the "modern content styling" used on
   qa.php / index.php, so articles match the rest of the site. Loaded only by /bible-study pages. */

:root{
    --pg-orange:#f97316; --pg-orange-hover:#ea580c; --pg-orange-dark:#c2410c; --pg-orange-darker:#9a3412;
    --pg-orange-light:#fff1e6; --pg-orange-soft:#fff7f0; --pg-orange-border:#fdba8c;
    --pg-black:#111827; --pg-ink:#1e293b; --pg-muted:#475569;
    --pg-shadow:0 1px 2px rgba(17,24,39,.05), 0 10px 28px -12px rgba(194,65,12,.22);
    --pg-shadow-hover:0 2px 4px rgba(17,24,39,.06), 0 18px 36px -12px rgba(194,65,12,.38);
}

/* ---------- Cards (same as qa.php) ---------- */
.chapter-display{
    border:1px solid #f1e4da !important;
    border-top:5px solid var(--pg-orange) !important;
    border-radius:24px !important;
    box-shadow:var(--pg-shadow) !important;
}
.chapter-display + .chapter-display{ margin-top:1.75rem; }

.toolbar-action-group{
    position:absolute; top:0; right:10px; z-index:5;
    display:flex; align-items:center; gap:15px; flex-wrap:wrap;
}

/* ---------- Page header ---------- */
.chapter-header{ padding-bottom:1.5rem; margin-bottom:1.75rem !important; border-bottom:1px solid #f1e4da; }
.chapter-header h1{
    font-size:clamp(1.8rem, 3.8vw, 2.7rem) !important; font-weight:800 !important;
    letter-spacing:-.02em; line-height:1.15; color:var(--pg-black) !important; margin:.4rem auto .5rem !important;
}
.chapter-header h1::after{
    content:""; display:block; width:60%; height:4px; border-radius:4px; margin:.9rem auto 0;
    background:linear-gradient(90deg, var(--pg-orange), var(--pg-orange-dark));
}
.chapter-header h2{
    font-size:1.05rem !important; font-weight:500 !important; color:var(--pg-muted) !important;
    margin:.6rem auto 0 !important; line-height:1.5; max-width:760px;
}
.article-kicker{
    display:inline-block; margin-top:1.25rem; padding:.25rem .85rem; border-radius:999px;
    background:var(--pg-orange-light); border:1px solid var(--pg-orange-border);
    color:var(--pg-orange-darker); font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
}
.article-breadcrumb{ font-size:.85rem; color:var(--pg-muted); margin-bottom:.5rem; padding-right:180px; }
.article-breadcrumb a{ color:var(--pg-orange-dark); font-weight:600; }
.article-breadcrumb a:hover{ text-decoration:underline; }
.article-breadcrumb span{ margin:0 .25rem; }

/* ---------- Shared box label (same as the site's "Related ..." blocks) ---------- */
.ref-group-title{
    font-size:.8rem !important; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
    color:var(--pg-orange-dark) !important; margin-bottom:.6rem !important;
}

/* ---------- Quick answer + table of contents ---------- */
.article-quick-answer, .related-topics{
    margin-top:1.5rem; padding:1.25rem 1.4rem;
    background:var(--pg-orange-soft); border:1px solid var(--pg-orange-border);
    border-left:4px solid var(--pg-orange); border-radius:16px;
}
.article-quick-answer p{ font-size:1.1rem; line-height:1.8; color:var(--pg-ink); }
.article-toc{ margin-top:1.75rem; padding:1.1rem 1.4rem; border:1px solid #f1e4da; border-radius:16px; background:#fff; }
.article-toc ol{ margin:0; padding-left:1.25rem; columns:2; column-gap:2.5rem; }
.article-toc li{ margin:.3rem 0; break-inside:avoid; color:var(--pg-orange-dark); }
.article-toc a{ color:var(--pg-ink); font-weight:500; }
.article-toc a:hover{ color:var(--pg-orange-hover); text-decoration:underline; }

/* ---------- Article body typography ---------- */
.article-body{ font-size:1.125rem; line-height:1.85; color:#1f2937; }
.article-body > h2{
    font-size:clamp(1.45rem, 2.6vw, 1.85rem); font-weight:800; letter-spacing:-.015em; line-height:1.25;
    color:var(--pg-black); margin:2.75rem 0 1rem; padding-bottom:.55rem; border-bottom:1px solid #f1e4da;
    scroll-margin-top:110px;
}
.article-body > h2:first-child{ margin-top:0; }
.article-body > h3{
    font-size:1.25rem; font-weight:700; color:var(--pg-orange-darker); line-height:1.35;
    margin:2rem 0 .65rem; scroll-margin-top:110px;
}
.article-body p{ margin:0 0 1.15rem; }
.article-body a{ color:var(--pg-orange-dark); font-weight:600; text-decoration:underline; text-underline-offset:2px; }
.article-body a:hover{ color:var(--pg-orange-hover); text-decoration:none; }
.article-body strong{ color:var(--pg-black); font-weight:700; }
.article-body ul, .article-body ol{ margin:0 0 1.35rem; padding-left:1.6rem; }
.article-body li{ margin:.45rem 0; }
.article-body ul li::marker{ color:var(--pg-orange); }
.article-body ol li::marker{ color:var(--pg-orange-dark); font-weight:700; }
.article-body blockquote{
    margin:1.5rem 0; padding:1rem 1.4rem; background:var(--primary-tint, #fff7ed);
    border-left:4px solid var(--pg-orange); border-radius:0 14px 14px 0;
    font-size:1.15rem; font-style:italic; color:var(--pg-ink);
}
.article-body blockquote p{ margin:0; }
.article-body code{ background:var(--pg-orange-light); padding:1px 6px; border-radius:6px; font-size:.92em; }
.article-pre{
    margin:1.25rem 0 1.5rem; padding:1rem 1.25rem; overflow-x:auto;
    background:var(--surface-color, #f9fafb); border:1px solid var(--border-color, #e5e7eb); border-radius:12px;
    font-family:Consolas, Menlo, monospace; font-size:.92rem; line-height:1.6; white-space:pre; color:var(--pg-ink);
}

/* ---------- Tables ---------- */
.article-table-wrap{ margin:1.25rem 0 1.75rem; overflow-x:auto; border:1px solid #f1e4da; border-radius:14px; }
.article-table{ width:100%; border-collapse:collapse; font-size:.98rem; line-height:1.55; }
.article-table th{
    background:var(--pg-orange-light); color:var(--pg-orange-darker); text-align:left;
    font-weight:700; padding:.75rem 1rem; border-bottom:2px solid var(--pg-orange-border);
}
.article-table td{ padding:.7rem 1rem; border-bottom:1px solid #f1e4da; vertical-align:top; }
.article-table tr:last-child td{ border-bottom:none; }
.article-table tbody tr:nth-child(even) td{ background:#fffcf9; }

/* ---------- Image placeholders ---------- */
.article-figure{ margin:2rem 0; }
.article-figure img{
    width:100%; height:auto; aspect-ratio:16 / 9; object-fit:cover;
    border-radius:18px; border:1px solid #f1e4da;
    background:linear-gradient(135deg, var(--pg-orange-light), #fde3cf);   /* visible until the real image is uploaded */
    box-shadow:var(--pg-shadow);
}
.article-figure figcaption{ margin-top:.6rem; text-align:center; font-size:.88rem; color:var(--pg-muted); }

/* ---------- FAQ (same look as the Q&A page) ---------- */
.qa-list{ margin-top:1rem; display:flex; flex-direction:column; gap:1rem; }
.qa-item{
    position:relative; padding:1.25rem 1.5rem 1.35rem;
    background:#fff; border:1px solid #f1e4da; border-left:5px solid var(--pg-orange);
    border-radius:18px; box-shadow:0 1px 2px rgba(17,24,39,.04); line-height:1.75;
    transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.qa-item:hover{ box-shadow:var(--pg-shadow-hover); transform:translateY(-2px); border-color:var(--pg-orange-border); border-left-color:var(--pg-orange); }
.qa-item .qa-question{
    display:flex; align-items:flex-start; gap:.75rem; margin:0 0 .7rem;
    font-weight:800; font-size:1.15rem; line-height:1.4; color:var(--pg-black);
}
.qa-item .qa-question::before{
    content:"Q"; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center;
    width:30px; height:30px; margin-top:-2px; border-radius:10px; font-size:.85rem; font-weight:800; color:#fff;
    background:linear-gradient(135deg, var(--pg-orange), var(--pg-orange-hover));
    box-shadow:0 6px 12px -6px rgba(249,115,22,.7);
}
.qa-item .qa-answer{ padding-left:calc(30px + .75rem); color:var(--pg-ink); font-size:1.04rem; }
.qa-item .qa-answer p:last-child, .qa-item .qa-answer ul:last-child{ margin-bottom:0; }

/* ---------- Keep exploring / related pills (same as topics & prayers pages) ---------- */
.related-topics{ margin-top:2.5rem; }
.related-topics + .related-topics{ margin-top:1.25rem; }
.related-topics p{ font-size:1rem; margin-bottom:.9rem; color:var(--pg-ink); }
.topic-links{ display:flex; flex-wrap:wrap; gap:.55rem; }
.topic-links a.verse-ref-trigger{
    display:inline-flex; align-items:center; padding:.4rem 1rem; border-radius:999px;
    background:#fff; border:1px solid var(--pg-orange-border); color:var(--pg-ink);
    font-size:.9rem; font-weight:600; text-decoration:none;
    transition:background .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.topic-links a.verse-ref-trigger:hover{
    background:var(--pg-orange); color:#fff; border-color:var(--pg-orange);
    transform:translateY(-2px); box-shadow:0 8px 16px -8px rgba(249,115,22,.7);
}

/* ---------- Hub page cards ---------- */
.hub-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:1rem; margin:1rem 0 2rem; }
.hub-card{
    display:flex; flex-direction:column; gap:.4rem; padding:1.2rem 1.3rem;
    background:#fff; border:1px solid #f1e4da; border-left:5px solid var(--pg-orange); border-radius:18px;
    text-decoration:none !important; transition:box-shadow .2s ease, transform .2s ease;
}
.hub-card:hover{ box-shadow:var(--pg-shadow-hover); transform:translateY(-2px); }
.hub-card-role{ font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--pg-orange-dark); }
.hub-card-title{ font-size:1.08rem; font-weight:800; line-height:1.35; color:var(--pg-black); }
.hub-card-desc{ font-size:.92rem; line-height:1.55; color:var(--pg-muted); font-weight:400; }

/* ---------- Responsive ---------- */
@media (max-width:768px){
    .chapter-display{ border-radius:18px !important; }
    .article-breadcrumb{ padding-right:0; margin-top:2.75rem; }
    .article-toc ol{ columns:1; }
    .article-body{ font-size:1.05rem; }
    .qa-item .qa-answer{ padding-left:0; }
}

/* ---------- Print ---------- */
@media print{
    header, footer, .toolbar-action-group, .article-toc, .related-topics, .article-figure{ display:none !important; }
    .chapter-display{ box-shadow:none !important; border:none !important; padding:0 !important; }
    .qa-item{ break-inside:avoid; box-shadow:none; }
}