/* ═══════════════════════════════════════════════════════════════
   shared.css — Common styles for all sub-page Bible study views
   Per-page <style> must define: :root with --accent (hex color)
   ═══════════════════════════════════════════════════════════════ */

*{margin:0;padding:0;box-sizing:border-box;}
*:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px;}
html{scroll-behavior:smooth;}
body{
  background:var(--navy);
  background-image:
    radial-gradient(ellipse at 15% 0%,color-mix(in srgb,var(--accent) 7%,transparent) 0%,transparent 55%),
    radial-gradient(ellipse at 85% 100%,color-mix(in srgb,var(--accent) 4%,transparent) 0%,transparent 50%);
  color:var(--sand);
  font-family:'EB Garamond',serif;
  font-size:18px;line-height:1.8;
  min-height:100dvh;
}
p{text-align:justify;hyphens:auto;}

/* ── LAYOUT ── */
.layout{display:flex;min-height:100dvh;}

/* ── SIDEBAR ── */
.sidebar{
  width:var(--nav-w);flex-shrink:0;
  background:linear-gradient(180deg,rgba(44,36,22,0.98) 0%,rgba(20,16,8,0.98) 100%);
  border-right:1px solid color-mix(in srgb,var(--accent) 12%,transparent);
  position:fixed;top:0;left:0;bottom:0;
  overflow-y:auto;overflow-x:hidden;
  z-index:50;display:flex;flex-direction:column;
}
.sidebar::-webkit-scrollbar{width:4px;}
.sidebar::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--accent) 20%,transparent);border-radius:4px;}

.sidebar-header{
  padding:28px 20px 20px;
  border-bottom:1px solid color-mix(in srgb,var(--accent) 10%,transparent);
  flex-shrink:0;
}
.sidebar-back{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--sand-dim);font-family:'Cinzel',serif;
  font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  text-decoration:none;margin-bottom:16px;
  transition:color var(--transition);
}
.sidebar-back:hover{color:var(--accent);}
.sidebar-title{
  font-family:'Cinzel Decorative',serif;font-size:13px;
  color:var(--accent);line-height:1.4;letter-spacing:0.5px;
}
.sidebar-subtitle{
  font-family:'Cinzel',serif;font-size:10px;
  color:var(--sand-dim);letter-spacing:3px;
  text-transform:uppercase;margin-top:4px;
}

.sidebar-nav{padding:12px 0 24px;flex:1;}
.nav-item{
  display:flex;align-items:center;gap:12px;
  width:100%;padding:11px 20px;
  background:none;border:none;cursor:pointer;
  text-align:left;transition:background var(--transition),border-left-color var(--transition);
  border-left:3px solid transparent;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  min-height:44px;
}
.nav-item:hover{background:color-mix(in srgb,var(--accent) 6%,transparent);border-left-color:color-mix(in srgb,var(--accent) 30%,transparent);}
.nav-item.active{background:color-mix(in srgb,var(--accent) 10%,transparent);border-left-color:var(--accent);}
.nav-num{font-family:'Cinzel',serif;font-size:10px;color:var(--gold-dim);letter-spacing:1px;min-width:22px;opacity:0.7;}
.nav-item.active .nav-num{opacity:1;color:var(--accent);}
.nav-abbr{font-family:'Cinzel',serif;font-size:11px;font-weight:600;color:var(--accent);min-width:32px;opacity:0.7;}
.nav-item.active .nav-abbr{opacity:1;}
.nav-name{font-family:'EB Garamond',serif;font-size:15px;color:var(--sand);opacity:0.75;line-height:1.2;}
.nav-item.active .nav-name,.nav-item:hover .nav-name{opacity:1;}

/* ── MAIN ── */
.main{margin-left:var(--nav-w);flex:1;min-width:0;}

/* ── HERO ── */
.hero{
  padding:48px 52px 36px;
  background:linear-gradient(160deg,rgba(44,36,22,0.9) 0%,transparent 100%);
  border-bottom:1px solid color-mix(in srgb,var(--accent) 12%,transparent);
  position:relative;overflow:hidden;
}
.hero::before{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,transparent,transparent 80px,color-mix(in srgb,var(--accent) 1.5%,transparent) 80px,color-mix(in srgb,var(--accent) 1.5%,transparent) 81px);
  pointer-events:none;
}
.hero-eyebrow{font-family:'Cinzel',serif;font-size:11px;letter-spacing:4px;color:var(--accent);text-transform:uppercase;opacity:.75;margin-bottom:12px;}
.hero-title{font-family:'Cinzel Decorative',serif;font-size:clamp(22px,3vw,36px);color:var(--sand);line-height:1.25;margin-bottom:10px;}
.hero-title span{color:var(--accent);}
.hero-desc{font-family:'EB Garamond',serif;font-size:17px;color:var(--sand-dim);max-width:600px;line-height:1.65;}

/* ── CONTENT ── */
.content{padding:0 52px 80px;}

/* ── BOOK PANELS ── */
.book-panel{display:none;animation:fadeIn 300ms ease;}
.book-panel.active{display:block;}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}

.book-header{padding:44px 0 32px;border-bottom:1px solid color-mix(in srgb,var(--accent) 12%,transparent);margin-bottom:36px;}
.book-eyebrow{font-family:'Cinzel',serif;font-size:10px;letter-spacing:4px;color:var(--accent);text-transform:uppercase;opacity:.7;margin-bottom:10px;}
.book-title{font-family:'Cinzel Decorative',serif;font-size:clamp(24px,3.5vw,42px);color:var(--sand);line-height:1.15;margin-bottom:14px;}
.book-title span{color:var(--accent);}
.book-meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px;}
.book-tag{
  display:inline-flex;align-items:center;padding:4px 12px;
  background:color-mix(in srgb,var(--accent) 9%,transparent);border:1px solid color-mix(in srgb,var(--accent) 18%,transparent);
  border-radius:20px;font-family:'Cinzel',serif;font-size:10px;
  letter-spacing:1.5px;color:var(--accent);text-transform:uppercase;
}
.book-verse{
  font-family:'EB Garamond',serif;font-size:20px;font-style:italic;
  color:var(--sand-dim);border-left:3px solid var(--accent);
  padding-left:20px;line-height:1.55;max-width:620px;
}
.book-verse cite{display:block;font-style:normal;font-size:13px;font-family:'Cinzel',serif;letter-spacing:1.5px;color:var(--accent);opacity:.75;margin-top:6px;}

/* ── TABS ── */
.tabs{display:flex;border-bottom:1px solid color-mix(in srgb,var(--accent) 15%,transparent);margin-bottom:40px;overflow-x:auto;}
.tabs::-webkit-scrollbar{height:0;}
.tab-btn{
  padding:12px 24px;background:none;border:none;
  border-bottom:2px solid transparent;cursor:pointer;
  font-family:'Cinzel',serif;font-size:11px;letter-spacing:2.5px;
  color:var(--sand-dim);text-transform:uppercase;white-space:nowrap;
  transition:color var(--transition),border-color var(--transition);
  margin-bottom:-1px;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.tab-btn:hover{color:var(--sand);}
.tab-btn.active{color:var(--accent);border-bottom-color:var(--accent);}
.tab-panel{display:none;}
.tab-panel.active{display:block;animation:fadeIn 250ms ease;}

/* ── STUDY BLOCKS ── */
.study-block{margin-bottom:48px;}
.study-block+.study-block{padding-top:40px;border-top:1px solid color-mix(in srgb,var(--accent) 8%,transparent);}
.block-title{
  font-family:'Cinzel',serif;font-size:13px;letter-spacing:3px;
  color:var(--accent);text-transform:uppercase;
  margin-bottom:20px;display:flex;align-items:center;gap:12px;
}
.block-title::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 25%,transparent),transparent);}
.block-body p{color:var(--sand);font-size:18px;line-height:1.85;margin-bottom:16px;max-width:72ch;text-align:justify;hyphens:auto;}
.block-body p:last-child{margin-bottom:0;}
.block-body strong{color:var(--accent);font-weight:600;}

/* ── INFO GRID ── */
.info-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px;margin-bottom:32px;}
.info-card{background:rgba(255,255,255,0.03);border:1px solid color-mix(in srgb,var(--accent) 12%,transparent);border-radius:var(--radius-md);padding:18px 20px;}
.info-card-label{font-family:'Cinzel',serif;font-size:9px;letter-spacing:2.5px;color:var(--accent);text-transform:uppercase;opacity:.75;margin-bottom:6px;}
.info-card-value{font-family:'EB Garamond',serif;font-size:16px;color:var(--sand);line-height:1.4;}

/* ── TIMELINE ── */
.timeline{border-left:2px solid color-mix(in srgb,var(--accent) 18%,transparent);padding-left:28px;margin-left:8px;}
.tl-item{position:relative;margin-bottom:28px;}
.tl-item::before{content:'';position:absolute;left:-37px;top:5px;width:12px;height:12px;background:var(--accent);border-radius:50%;border:2px solid var(--navy);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 30%,transparent);}
.tl-date{font-family:'Cinzel',serif;font-size:10px;letter-spacing:2px;color:var(--accent);text-transform:uppercase;opacity:.8;margin-bottom:4px;}
.tl-text{font-family:'EB Garamond',serif;font-size:16px;color:var(--sand);line-height:1.6;text-align:justify;hyphens:auto;}

/* ── GEO BOX ── */
.geo-box{background:color-mix(in srgb,var(--accent) 6%,transparent);border:1px solid color-mix(in srgb,var(--accent) 14%,transparent);border-radius:var(--radius-md);padding:28px 32px;margin-bottom:28px;}
.geo-box p{font-size:17px;color:var(--sand);line-height:1.8;margin-bottom:12px;text-align:justify;hyphens:auto;}
.geo-box p:last-child{margin-bottom:0;}
.geo-box strong{color:var(--accent);}

/* ── KEY VERSE ── */
.key-verse{background:color-mix(in srgb,var(--accent) 6%,transparent);border-left:4px solid var(--accent);border-radius:0 var(--radius-sm) var(--radius-sm) 0;padding:20px 24px;margin:28px 0;}
.key-verse p{font-family:'EB Garamond',serif;font-size:19px;font-style:italic;color:var(--sand);line-height:1.6;margin-bottom:6px;}
.key-verse cite{font-family:'Cinzel',serif;font-size:10px;letter-spacing:2px;color:var(--accent);opacity:.8;font-style:normal;}

/* ── MOBILE TOGGLE ── */
.menu-toggle{
  display:none;position:fixed;top:16px;left:16px;z-index:200;
  width:44px;height:44px;background:var(--navy-mid);
  border:1px solid color-mix(in srgb,var(--accent) 20%,transparent);border-radius:var(--radius-sm);
  cursor:pointer;align-items:center;justify-content:center;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(20,16,8,0.7);backdrop-filter:blur(2px);z-index:40;}

/* ── TABLET / HAMBURGER (≤ 900px) ── */
@media(max-width:900px){
  .menu-toggle{display:flex;}
  .sidebar{
    left:calc(-1 * var(--nav-w));
    transition:left var(--transition);
    z-index:100;
    box-shadow:var(--shadow-md);
  }
  .sidebar.open{left:0;}
  .sidebar-overlay.open{display:block;}
  .main{margin-left:0;}
  .sidebar-header{padding-top:76px;}
  .hero{padding:68px 28px 28px;}
  .hero-desc{font-size:16px;}
  .content{padding:0 28px 64px;}
  .book-header{padding:28px 0 22px;}
  .book-verse{font-size:17px;}
  .tabs{gap:0;}
  .tab-btn{padding:11px 18px;font-size:10px;letter-spacing:2px;}
  .block-body p{font-size:17px;max-width:none;}
  .geo-box p{font-size:16px;}
  .key-verse p{font-size:17px;}
  .info-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));}
}

/* ── MOBILE (≤ 600px) ── */
@media(max-width:600px){
  :root{--nav-w:85vw;}
  body{font-size:16px;}

  .hero{padding:64px 18px 24px;}
  .hero-eyebrow{font-size:9px;letter-spacing:3px;}
  .hero-title{font-size:20px;line-height:1.3;}
  .hero-desc{font-size:15px;line-height:1.6;}

  .content{padding:0 18px 56px;}

  .book-header{padding:24px 0 18px;}
  .book-eyebrow{font-size:9px;letter-spacing:2.5px;}
  .book-title{font-size:24px;line-height:1.2;}
  .book-meta{gap:6px;}
  .book-tag{font-size:9px;padding:3px 10px;}
  .book-verse{font-size:16px;padding-left:14px;}
  .book-verse cite{font-size:11px;}

  .tabs{margin-bottom:28px;}
  .tab-btn{padding:10px 12px;font-size:9px;letter-spacing:1.5px;}

  .study-block{margin-bottom:32px;}
  .study-block+.study-block{padding-top:28px;}
  .block-title{font-size:11px;letter-spacing:2px;margin-bottom:14px;}
  .block-body p{font-size:16px;line-height:1.75;max-width:none;}

  .info-grid{grid-template-columns:1fr 1fr;gap:10px;}
  .info-card{padding:14px 14px;}
  .info-card-label{font-size:8px;}
  .info-card-value{font-size:14px;}

  .timeline{padding-left:20px;margin-left:4px;}
  .tl-item{margin-bottom:20px;}
  .tl-item::before{left:-28px;width:10px;height:10px;}
  .tl-date{font-size:9px;}
  .tl-text{font-size:15px;}

  .geo-box{padding:18px 18px;margin-bottom:20px;}
  .geo-box p{font-size:15px;line-height:1.7;}

  .key-verse{padding:16px 18px;margin:20px 0;}
  .key-verse p{font-size:16px;line-height:1.55;}
  .key-verse cite{font-size:9px;}

  .sidebar-header{padding:76px 16px 16px;}
  .sidebar-title{font-size:12px;}
  .sidebar-subtitle{font-size:9px;}
  .nav-item{padding:10px 16px;gap:10px;}
  .nav-num{font-size:9px;min-width:18px;}
  .nav-abbr{font-size:10px;min-width:28px;}
  .nav-name{font-size:14px;}
}