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

   Mobile-first redesign of the shared page chrome. Deliberately
   scoped to .bt-* classes (plus a single body{margin:0}) 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.
   ============================================================ */

:root{
  --bt-black:#000;
  --bt-line:#e3e3e3;
  --bt-accent:#0488cd;
  --bt-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

body{ margin:0; }

/* ---------- 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; }
  .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; }
}