/* ============================================================
   BibleTools — responsive site chrome (header / nav / drawer / footer)
   Loaded globally via lay_Main.cfm (#Application.CSSURL#responsive20260717.css).

   Mobile-first redesign of the shared page chrome. Deliberately
   scoped to .bt-* classes (plus the body base rule) so it does
   NOT disturb the existing circuit / table styles in bibletools1.css,
   bibletools2.css or layout.css. The reading pane, resource picker
   and commentary styling belong to the individual circuit layouts.

   20260717: site typography base + page background.
   - body gets an intentional font (system sans) — previously nothing
     set one, so content rendered in the browser default serif.
   - warm off-white page background (--bt-bg); reading surfaces stay
     pure white (--bt-surface) so cards lift off the page.
   - long-form content (commentary, circuit articles) reads in a
     screen serif (--bt-serif) at 17px/1.65.
   - scoped reset neutralizes the legacy P/LI rules (tiny justified
     Verdana from bibletools2.css / layout.css) inside .bt-main only.
   ============================================================ */

:root{
  --bt-black:#000;
  --bt-line:#e3e3e3;
  --bt-accent:#0488cd;
  --bt-bg:#f6f4ef;        /* warm off-white page background */
  --bt-surface:#ffffff;   /* reading surfaces / cards */
  --bt-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --bt-serif:Georgia,"Times New Roman",serif;
}

body{ margin:0; background:var(--bt-bg); font-family:var(--bt-sans); line-height:1.6; color:#1a1a1a; }

/* Neutralize the legacy typography rules (P = .8em justified Verdana,
   LI = 10pt Verdana in bibletools2.css/layout.css) inside the modern
   layout only — legacy pages outside .bt-main keep their look. */
.bt-main p, .bt-main li, .bt-main .p{ font:inherit; text-align:left; }

/* Intentionally-small legacy text (disclaimers, fine-print links):
   keep it de-emphasized but readable — the classes themselves are
   8pt/xx-small Verdana, and the p-reset above would otherwise
   promote them to full body size. */
.bt-main .smaller, .bt-main .psmaller{ font-size:.8125rem; line-height:1.5; color:#6b6b6b; }

/* Long-form reading content: commentary/resource text on the Bible page
   and article bodies in the content circuits. Serif for sustained
   reading; UI chrome stays on the sans stack. */
.bt-option-content, .bt-circuit-main{ font-family:var(--bt-serif); font-size:1.0625rem; line-height:1.65; }

/* Content headings inside the cards: the legacy H3 rule (24pt italic
   Times in layout.css) leaks in otherwise. Circuit-level rules loaded
   later (e.g. .bt-subscribe-box h3) still win size/margin. */
.bt-option-content h3, .bt-circuit-main h3{ font-family:inherit; font-style:normal; font-size:1.3rem; font-weight:700; line-height:1.3; margin:20px 0 10px; color:#1a1a1a; }

/* Legacy resource headers ("Commentaries:" etc. — Arial spans in
   bibletools2.css) follow the content font */
.bt-main .ResourceType, .bt-main .ResourceTypeDetail{ font-family:inherit; }

/* ---------- Header ---------- */
.bt-header{ position:sticky; top:0; z-index:50; background:#fff; border-bottom:1px solid var(--bt-line); font-family:var(--bt-sans); }
.bt-header *{ box-sizing:border-box; }
.bt-logo-bar{ display:flex; align-items:center; justify-content:center; padding:14px 16px 10px; }
.bt-logo-bar a{ display:block; width:100%; max-width:340px; }
.bt-logo-bar img{ width:100%; max-width:340px; height:auto; display:block; }

.bt-navbar{ background:var(--bt-black); display:flex; align-items:center; gap:12px; padding:8px 14px; }
.bt-nav-toggle{ background:none; border:1px solid #333; color:#fff; width:42px; height:38px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; flex:0 0 auto; }
.bt-nav-toggle svg{ width:22px; height:22px; }

.bt-search{ flex:1 1 auto; display:flex; min-width:0; margin:0; }
.bt-search input[type=text]{ flex:1 1 auto; min-width:0; border:1px solid #444; background:#111; color:#fff; border-radius:8px 0 0 8px; padding:8px 12px; font-size:15px; }
.bt-search input[type=text]::placeholder{ color:#888; }
.bt-search input[type=submit]{ border:1px solid #444; border-left:none; background:#222; color:#fff; border-radius:0 8px 8px 0; padding:0 14px; cursor:pointer; font-size:14px; }

/* Inline desktop menu (hidden on mobile — lives in the drawer there) */
.bt-nav-links{ display:none; }

/* ---------- Slide-out drawer (mobile nav) ---------- */
.bt-drawer-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.5); opacity:0; visibility:hidden; transition:opacity .25s ease; z-index:60; }
.bt-drawer-overlay.open{ opacity:1; visibility:visible; }
.bt-drawer{ position:fixed; top:0; left:0; bottom:0; width:78%; max-width:320px; background:var(--bt-black); color:#fff; transform:translateX(-100%); transition:transform .28s cubic-bezier(.22,1,.36,1); z-index:70; display:flex; flex-direction:column; box-shadow:2px 0 24px rgba(0,0,0,.4); font-family:var(--bt-sans); }
.bt-drawer.open{ transform:translateX(0); }
.bt-drawer-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid #222; }
.bt-drawer-head span{ font-size:13px; letter-spacing:.12em; color:#888; text-transform:uppercase; }
.bt-drawer-close{ background:none; border:none; color:#fff; font-size:28px; line-height:1; cursor:pointer; }
.bt-drawer nav a{ display:block; color:#fff; padding:16px 20px; border-bottom:1px solid #1c1c1c; font-size:16px; letter-spacing:.04em; text-decoration:none; }
.bt-drawer nav a:hover{ background:#161616; }

/* ---------- Main (wraps the circuit layout) ---------- */
.bt-main{ max-width:1120px; margin:0 auto; padding:16px; }

/* ---------- Footer ---------- */
.bt-footer{ text-align:center; padding:8px 16px 24px; }

/* ============================================================
   DESKTOP (>= 920px): inline menu, centered nav, compact search
   ============================================================ */
@media (min-width:920px){
  .bt-nav-toggle{ display:none; }
  .bt-navbar{ justify-content:center; gap:22px; padding:10px 20px; }
  .bt-search{ flex:0 0 auto; max-width:260px; margin-right:22px; }
  .bt-nav-links{ display:flex; gap:18px; flex-wrap:wrap; align-items:center; }
  .bt-nav-links a{ color:#fff; font-size:13.5px; letter-spacing:.06em; text-decoration:none; }
  .bt-nav-links a:hover{ color:#bbb; }
}