/* =========================================================
   Semitic Jew — Global Styles (Universal Hero + Core UI)
   Palette: 054A91, 3E7CB1, 81A4CD, DBE4EE, F17300
   Fonts: Adobe Garamond Pro (serif), Roboto (sans)
   ========================================================= */

/* CSS Reset (light) */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img { max-width: 100%; display: block; }

/* ------------------------------
   Root Variables
------------------------------ */
:root{
  --bg:#ffffff;
  --surface:#ffffff;
  --ink:#0b2340;
  --muted:#6b7280;
  --accent:#F17300;
  --border:#e6ebf2;
}

/* Global header */
.site-header {
  background:var(--surface);
  border-bottom:1px solid #e6ebf2;
  width:100%;
}
.site-header .container {
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 16px;
  min-height: var(--header-h);
  display:flex;
  align-items:center;
  justify-content: space-between; /* logo left, nav centered via inner rule, search right */
  gap: 1rem;
}

/* Center the nav consistently on every page */
.site-header .main-nav ul {
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap: 2rem;                /* consistent spacing between items */
  justify-content:center;   /* center the menu */
  align-items:center;
}

/* Make sure links look the same everywhere */
.site-header .main-nav a {
  text-decoration:none;
  color:#0b2340;
  padding: 10px 0;
}

/* Optional: keep header visible while scrolling (remove if you don't want sticky) */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
}

  /* Typography */
  --ff-serif: "Adobe Garamond Pro", Garamond, "Garamond Premier Pro", Georgia, serif;
  --ff-sans: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  --fs-feature-title: clamp(2.4rem, 3.6vw, 3rem);
  --fs-page-title: clamp(2rem, 3.2vw, 2.6rem);
  --fs-section-title: clamp(1rem, 1.4vw, 1.1rem);
  --fs-body: 1rem;
  --fs-small: .95rem;

  /* Spacing scale (also requested earlier) */
  --space-xl: clamp(48px,6vw,64px);
  --space-lg: clamp(32px,5vw,48px);
  --space-md: clamp(24px,4vw,32px);
  --space-sm: clamp(16px,3vw,24px);
  --space-xs: clamp(8px,2vw,16px);
  --space-xxs: clamp(4px,1vw,8px);
  --space-xxxs: 4px;

  /* Layout */
  --site-max: 1120px; /* universal content width */
  --grid-gap: 16px;
}

/* ------------------------------
   Base
------------------------------ */
html { color: var(--ink-700); font-family: var(--ff-sans); font-size: 16px; }
body { background: var(--paper); line-height: 1.6; color: var(--ink-700); -webkit-font-smoothing: antialiased; }

.container{ max-width: var(--site-max); margin: 0 auto; padding: 0 16px; }

/* Links */
a { color: var(--blue-900); text-decoration: none; }
a:hover { text-decoration: none; filter: brightness(0.95); }

/* ------------------------------
   Header / Nav
------------------------------ */
.site-header { border-bottom: 1px solid #e6ebf2; background: var(--surface); }
.site-header .container{ display:flex; align-items:center; justify-content: space-between; min-height: 64px; gap: 16px; }

.site-title{ font-family: var(--ff-serif); font-size: 1.2rem; color: var(--ink); white-space: nowrap; }

.main-nav ul{ list-style:none; display:flex; align-items:center; justify-content:center; gap: 2rem; margin:0; padding:0; }
.main-nav a{ color: var(--ink-700); }
.main-nav a.active{ color: var(--blue-900); position: relative; }
.main-nav a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-10px; height:3px; background: var(--accent);
}

/* ------------------------------
   Breadcrumbs (always above hero)
------------------------------ */
.breadcrumb{
  padding: var(--space-xs) 0 var(--space-xxs);
  font-size: .95rem;
}
.breadcrumb .container{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.breadcrumb a{ color: var(--blue-900); text-decoration:none; }
.breadcrumb a:hover{ text-decoration:none; filter: brightness(0.95); }
.breadcrumb .sep{ color: var(--ink-300); }
.breadcrumb .current{ color: var(--ink-500); }
/* Capitalize first letter for consistency */
.breadcrumb a, .breadcrumb .current { text-transform: capitalize; }

/* ------------------------------
   UNIVERSAL HERO
   (Use on every top-level page for consistent look)
------------------------------ */
.page-hero{
  background: linear-gradient(180deg, var(--blue-900) 0%, var(--blue-700) 100%);
  color: #fff;
  padding: var(--space-lg) 0 var(--space-md);
}
.page-hero .container{ max-width: var(--site-max); }
.page-hero .page-title{
  font-family: var(--ff-serif);
  font-size: var(--fs-page-title);
  margin: 0 0 .5rem;
  letter-spacing: .5px;
  color:#fff;
}
.page-hero .page-subtitle{
  font-family: var(--ff-sans);
  font-size: 1rem;
  color: var(--blue-100);
  max-width: 60ch;
  margin: 0;
}
.hero-divider{
  height: 12px;
  background: linear-gradient(90deg, var(--accent) 0 140px, transparent 140px) bottom/100% 6px no-repeat;
}

/* ------------------------------
   Cards / Article Cards
------------------------------ */
.card{ background:var(--surface); border:1px solid #e6ebf2; box-shadow: 0 2px 8px rgba(0,0,0,.04); }
.card-media img{ width:100%; height: auto; object-fit: cover; }

/* Article “pill” label — square, dark translucent, inside image */
.label-pill{
  position:absolute; left:8px; top:8px; z-index:2;
  background: rgba(0,0,0,.55);
  color:#fff; font-size:.8rem; line-height: 1;
  padding:6px 8px;
  border-radius: 0; /* square edges */
}

/* Author avatar (cards & article pages) */
.author-avatar{
  width:30px; height:30px; border-radius: 50%;
  object-fit: cover;
  border:1px solid #e6ebf2;
  background:#f0f3f8;
}

/* ------------------------------
   Articles page (simple grid mode)
------------------------------ */
.articles-page main{ padding: var(--space-md) 0 var(--space-lg); }

/* “Recent” grid */
.articles-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(315px, 1fr));
  gap: 20px;
}

/* Lock each card to 315x450 */
.articles-grid .card{
  width:315px; height:450px;
  display:flex; flex-direction:column;
  margin: 0 auto; /* center in cell */
}

/* Media area inside card (keep 315x163.13 approx 16:9) */
.articles-grid .card .card-media{
  position:relative;
  width:100%;
  height: 163.13px;
  overflow:hidden;
  background:#f7f9fc;
}
.articles-grid .card .card-media img{
  width:100%; height:100%; object-fit:cover;
}
/* Disable the old "Open in Logos" pseudo-tooltip */
.article-content .verse:hover::after { content: none !important; }

/* Card body */
.articles-grid .card .card-body{
  padding:12px 12px 0 12px;
  display:flex; flex-direction:column; gap:8px;
  flex: 1 1 auto; /* let body stretch */
}
.card-title{ font-family: var(--ff-serif); font-size:1.05rem; margin:0; color:#000; }
.card-title a{ color:#000; text-decoration:none; }
.card-title a:hover{ text-decoration:none; filter: brightness(.95); }
.card-excerpt{ font-size:.95rem; color: var(--ink-600); margin:0; }
.card-date{ font-size:.85rem; color: var(--ink-400); }

/* Card foot (author row) pinned to bottom */
.articles-grid .card .card-foot{
  display:flex; align-items:center; gap:8px;
  padding: 10px 12px 12px;
  margin-top:auto; /* push to base */
  border-top: 1px solid #f0f2f6;
}
.author-name{ font-size:.95rem; color: var(--ink-700); }

/* Hover shadow (light grey) */
.card:hover{ box-shadow: 0 6px 18px rgba(0,0,0,.08); transform: translateY(-1px); transition: .18s ease; }
/* --- Fix: secondary featured layout (prevent “smushed” content) --- */
.articles-page .card-featured.secondary .inner{
  display:flex; flex-direction:column;
  width:290px; height:450px; box-sizing:border-box;
}

.articles-page .card-featured.secondary .media{ flex:0 0 auto; position:relative; }
.articles-page .card-featured.secondary .media img{
  width:290px; height:163.13px; object-fit:cover; display:block;
}

.articles-page .card-featured.secondary .label-pill{
  position:absolute; left:8px; top:8px;
}

.articles-page .card-featured.secondary .body{
  display:flex; flex-direction:column; flex:1;
  padding:12px; gap:6px; box-sizing:border-box;
}

.articles-page .card-featured.secondary .title{
  font-size:1.05rem; line-height:1.3; margin:0;
}

.articles-page .card-featured.secondary .excerpt{
  font-size:.95rem; line-height:1.45; color:#333; margin:0;
}

.articles-page .card-featured.secondary .card-date{
  font-size:.9rem; color:#666; margin-top:2px;
}

/* Disable the old "Open in Logos" pseudo-tooltip */
.article-content .verse:hover::after { content: none !important; }

.articles-page .card-featured.secondary .card-foot{
  margin-top:auto; padding-top:8px;
  display:flex; align-items:center; gap:8px;
}

.articles-page .card-featured.secondary .author-avatar{
  width:30px; height:30px; border-radius:50%; object-fit:cover;
}

/* ------------------------------
   Tanakh / Texts grids
------------------------------ */
.book-grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr));
  gap: 12px;
}
.book-tile{
  padding: 12px 14px; border:1px solid #e6ebf2; background:var(--surface); border-radius:10px;
}
.book-tile a{ color: var(--blue-900); }

/* ------------------------------
   Footer
------------------------------ */
.site-footer{
  border-top: 1px solid #e6ebf2;
  padding: var(--space-md) 0;
  background:var(--surface);
  color: var(--ink-500);
  font-size: .95rem;
}

/* ------------------------------
   Utilities
------------------------------ */
.mt-0{ margin-top:0 !important; }
.mb-0{ margin-bottom:0 !important; }
.mt-sm{ margin-top: var(--space-sm) !important; }
.mb-sm{ margin-bottom: var(--space-sm) !important; }
.pt-0{ padding-top:0 !important; }
.pb-0{ padding-bottom:0 !important; }

/* ------------------------------
   Responsive tweaks
------------------------------ */
@media (max-width: 700px){
  .main-nav ul{ gap: 1rem; }
  .breadcrumb{ font-size: .9rem; }
  .articles-grid{ grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); }
  .articles-grid .card{ width: 100%; }
}
/* Show the resource label only inside article cards */
.label-pill { display: none; }

.card .label-pill,
.card-featured .label-pill {
  display: inline-flex;
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 4px 8px;
  font-size: 12px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .04em;
  background: rgba(0,0,0,.55); /* dark transparent, squared */
  color: #fff;
  border-radius: 0;            /* square corners */
  border: 0;                   /* no white outline */
  pointer-events: none;
}
.site-header .main-nav ul{
  display:flex;
  justify-content:center;
  gap: 1.25rem; /* keep your spacing */
}
/* --- Articles page breadcrumb fix (location & no numbering) --- */
.articles-page .breadcrumb {
  max-width: var(--container, 1200px);
  margin: 0 auto var(--space-sm, 16px);
  padding: 0 16px;
}
.articles-page .breadcrumb ol {
  list-style: none;      /* removes 1,2,3 numbering */
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
}
.articles-page .breadcrumb li {
  display: flex;
  align-items: center;
  font-size: .95rem;
  color: var(--blue-100, #81A4CD);
}
.articles-page .breadcrumb li + li::before {
  content: "›";
  margin: 0 .35rem;
  color: var(--blue-200, #3E7CB1);
}
.articles-page .breadcrumb a {
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.articles-page .breadcrumb a:hover {
  border-bottom-color: currentColor;
}
/* Breadcrumb color = site accent (orange) */
.breadcrumb a {
  color: var(--accent, #F17300);
  text-decoration: none;
}
.breadcrumb a:visited {
  color: var(--accent, #F17300);
}
.breadcrumb a:hover,
.breadcrumb a:focus {
  opacity: .9;            /* no underline on hover */
}

/* Keep current (last) crumb readable if it's a linkless item */
.breadcrumb li:last-child,
.breadcrumb li:last-child a {
  color: var(--ink, #0b2340);
}
/* Breadcrumbs */
.breadcrumb { max-width: 1100px; margin: var(--space-sm,16px) auto var(--space-xs,8px); padding: 0 16px; }
.breadcrumb .crumbs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.breadcrumb .crumbs li { font-size: .95rem; color: #666; }
.breadcrumb .crumbs li + li::before { content: "›"; margin: 0 6px; color: #999; }
.breadcrumb a { color: var(--accent, #F17300); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; text-underline-offset: 2px; }
/* ==== Centered global nav (brand left, links centered) ==== */
.site-header .header-grid{
  display:grid;
  grid-template-columns:1fr auto 1fr; /* left brand | centered nav | right spacer */
  align-items:center;
  gap:.5rem;
}

.site-header .brand{
  justify-self:start;
  font-family: var(--ff-serif, "Adobe Garamond Pro", Garamond, serif);
  font-weight:700;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  color:#0b2340;
  text-decoration:none;
}

.site-header .main-nav ul{
  display:flex;
  justify-content:center; /* <- centers the menu */
  align-items:center;
  gap: 1.25rem; /* tweak spacing here */
  list-style:none;
  margin:0;
  padding:0;
}

.site-header .main-nav a{
  color:#0b2340;
  text-decoration:none;
  padding:.25rem .125rem;
  border-bottom:2px solid transparent;
}

.site-header .main-nav a:hover{ border-bottom-color: rgba(0,0,0,.15); }
.site-header .main-nav a.active{ border-bottom-color: var(--accent, #F17300); }

.site-header .header-spacer{ justify-self:end; }

@media (max-width: 820px){
  .site-header .main-nav ul{ gap:.75rem; flex-wrap:wrap; }
}
/* ===== Footer (BibleProject-style) ===== */
.site-footer {
  background: #054A91;           /* deep blue */
  color: #DBE4EE;                /* light slate */
  margin-top: 2rem;
  font-size: 0.95rem;
}
.site-footer a { color: #DBE4EE; text-decoration: none; }
.site-footer a:hover { color: #F17300; }

.site-footer .footer-accent {
  height: 6px;
  background: linear-gradient(90deg, #F17300 0 160px, transparent 160px);
}

.site-footer .footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 2rem;
  padding: 2.5rem 0 2rem;
}

.site-footer .brand { display:inline-block; margin-bottom: .5rem; }
.site-footer .brand-mark {
  font-family: var(--ff-serif, "Adobe Garamond Pro", serif);
  font-size: 1.6rem; color: #fff; letter-spacing: .3px;
}
.site-footer .brand-tag { color:#DBE4EE; opacity:.9; max-width: 42ch; }

.site-footer .social { display:flex; gap:.5rem; margin-top: .8rem; }
.site-footer .social a {
  width:36px; height:36px; border-radius: 999px;
  display:flex; align-items:center; justify-content:center;
  border: 1px solid #3E7CB1; color: #DBE4EE;
}
.site-footer .social a:hover { background:#3E7CB1; color:#fff; }

.site-footer .footer-col h4 {
  font-family: var(--ff-serif, "Adobe Garamond Pro", serif);
  font-size: 1.05rem; color:#fff; margin:0 0 .6rem;
}
.site-footer .footer-col ul { list-style:none; padding:0; margin:0; display:grid; gap:.35rem; }
.site-footer .footer-col li a { opacity:.95; }
.site-footer .footer-col li a:hover { opacity:1; color:#F17300; }

.site-footer .pod-links { display:flex; flex-wrap:wrap; gap:.5rem; }
.site-footer .pod-btn {
  padding:.45rem .7rem; border:1px solid #3E7CB1; border-radius: 10px;
  color:#DBE4EE; background:var(--surface); display:inline-block; font-size:.95rem;
}
.pod-link svg{
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: middle;
  fill: currentColor;
}
.pod-link.pod-apple { /* no visual change besides the sharper icon */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.site-footer .pod-btn:hover { background:#3E7CB1; color:#fff; }

.site-footer .newsletter { display:flex; gap:.5rem; margin:.5rem 0; }
.site-footer .newsletter input {
  flex:1; min-width: 0; padding:.55rem .7rem; border-radius: 8px; border:1px solid #81A4CD;
  background:#0b2340; color:#DBE4EE;
}
.site-footer .newsletter button {
  background:#F17300; color:#0b2340; border:none; border-radius: 8px;
  padding:.55rem .9rem; font-weight:600; cursor:pointer;
}
.site-footer .newsletter button:hover { filter: brightness(1.05); }
.site-footer .fine { opacity:.85; }

.site-footer .legal { border-top: 1px solid rgba(219,228,238,.2); }
.site-footer .legal-inner {
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding: .9rem 0;
}
.site-footer .legal-links { list-style:none; display:flex; gap:1rem; margin:0; padding:0; }

@media (max-width: 1000px) {
  .site-footer .footer-grid { grid-template-columns: 1.5fr 1fr; }
}
@media (max-width: 640px) {
  .site-footer .footer-grid { grid-template-columns: 1fr; }
  .site-footer .legal-inner { flex-direction:column; align-items:flex-start; }
}
/* --- Header layout: logo left, nav centered, actions right --- */
.site-header .header-bar{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  column-gap:1rem;
}
.site-header .site-title{
  justify-self:start;
  text-decoration:none;
  font-weight:700;
  color:inherit;
}
.site-header .main-nav{ justify-self:center; }
.site-header .main-nav ul{
  display:flex; gap:2rem; margin:0; padding:0; list-style:none;
}
.site-header .nav-actions{ justify-self:end; }

.search-trigger{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:999px;
  text-decoration:none; color:#054A91; border:1px solid transparent;
}
.search-trigger:hover{ background:#DBE4EE; color:#F17300; }
.search-trigger svg{ width:20px; height:20px; stroke:currentColor; }
/* ---- Header search icon (right aligned) ---- */
.header-grid{
  display:flex; align-items:center; gap:1rem;
  justify-content:space-between;
}
.site-header .main-nav ul{ display:flex; gap:2rem; align-items:center; justify-content:center; }
.nav-utilities{ display:flex; align-items:center; margin-left:auto; }
.nav-search{ display:inline-flex; padding:.4rem; border-radius:8px; text-decoration:none; color:#054A91; }
.nav-search:hover{ background:#f3f6fb; }
/* Breadcrumbs – global */
.breadcrumb{margin:0 auto 1rem; padding:0 1rem;}
.breadcrumb ol{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; align-items:center; gap:.4rem;}
.breadcrumb li{font-size:.95rem; color:#3E7CB1;}
.breadcrumb li+li::before{content:"›"; color:#81A4CD; margin:0 .25rem;}
.breadcrumb a{color:#F17300; text-decoration:none;}
.breadcrumb a:hover{opacity:.85; text-decoration:none;}

/* Articles page: ensure it sits above hero and not cramped */
.articles-page .breadcrumb{max-width:1420px;}
/* --- Header layout with centered nav & right search --- */
.header-bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem}
.site-title{justify-self:start;font-weight:700;text-decoration:none;color:#0b2340}
.main-nav{justify-self:center}
.main-nav ul{display:flex;gap:2rem;list-style:none;margin:0;padding:0}
.main-nav a{text-decoration:none;color:#0b2340}
.nav-search{justify-self:end;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid #e6ebf2;border-radius:999px;background:var(--surface);color:#054A91}
.nav-search:hover{transform:translateY(-1px)}

/* --- Footer tweaks --- */
.footer-heading{font-weight:700}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.5rem}
.footer-links{list-style:none;margin:0;padding:0}
.footer-links a{text-decoration:none;color:#0b2340}
.footer-social{display:flex;gap:.5rem;margin-top:.5rem}
.social-btn{width:36px;height:36px;border:1px solid #e6ebf2;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:var(--surface)}
.newsletter-form{display:flex;gap:.5rem;margin-top:.5rem}
.newsletter-form input{flex:1;min-width:0;padding:.5rem .6rem;border:1px solid #e0e6ef;border-radius:8px}
.newsletter-form button{padding:.5rem .9rem;border:none;border-radius:8px;background:#F17300;color:#fff;font-weight:600;cursor:pointer}
.footer-bottom{margin-top:1rem;padding-top:1rem;border-top:1px solid #e6ebf2;text-align:center;color:#555}
.site-footer .footer-grid {
  display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.footer-heading { font-weight: 700; margin: 0 0 .5rem; }
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin: .35rem 0; }
.footer-links a { text-decoration: none; color: var(--ink, #0b2340); }
.footer-links a:hover { text-decoration: underline; }

.footer-social { display: flex; gap: .5rem; margin-top: .5rem; }
.social-pill {
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:999px; border:1px solid #e6ebf2;
  text-decoration:none; font-weight:600; font-size:.85rem;
  color:#054A91; background:var(--surface);
}

.footer-newsletter .newsletter-form { display:flex; gap:.5rem; margin-top:.5rem; }
.footer-newsletter input[type="email"] {
  flex:1; padding:.55rem .7rem; border:1px solid #e1e6ee; border-radius:8px;
}
.footer-newsletter button {
  padding:.55rem .9rem; border-radius:8px; border:1px solid transparent;
  background:#F17300; color:#fff; font-weight:600; cursor:pointer;
}
.footer-newsletter button:hover { opacity:.9; }
.visually-hidden { position:absolute !important; clip:rect(1px,1px,1px,1px); clip-path: inset(50%); height:1px; width:1px; overflow:hidden; white-space:nowrap; }
/* Footer socials */
.site-footer .footer-social{
  display:flex;
  gap:.5rem;
  margin-top:.75rem;
}

.site-footer .footer-social .icon{
  width:36px;
  height:36px;
  border-radius:999px;           /* rounded */
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--accent, #F17300);
  color:var(--accent, #F17300);  /* orange by default */
  background:transparent;
  text-decoration:none;
  transition:background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
}

.site-footer .footer-social .icon:hover{
  background:var(--accent, #F17300);  /* orange on hover */
  color:#fff;                         /* icon turns white */
  border-color:var(--accent, #F17300);
  transform:translateY(-1px);
}

.site-footer .footer-social .icon svg{
  width:18px; height:18px; display:block;
  fill:currentColor; /* makes the SVG follow the link color */
}
/* --- Footer (3-column) --- */
.site-footer{
  --ink:#0b2340; --accent:#F17300; --muted:#DBE4EE;
  background:#0b2340; color:var(--muted);
  padding:2.5rem 0 0;
}
.site-footer a{ color:var(--accent); text-decoration:none; }
.site-footer a:hover{ color:#fff; text-decoration:none; }

.site-footer .footer-grid{
  display:grid; gap:2rem;
  grid-template-columns: 1.5fr 1fr 1fr;
  align-items:start;
}
@media (max-width: 900px){
  .site-footer .footer-grid{ grid-template-columns:1fr; }
}

.footer-title{ font-weight:800; color:#fff; margin:0 0 .5rem; }
.footer-heading{ font-weight:700; color:#fff; margin:0 0 .5rem; }
.footer-tagline{ margin:.25rem 0 1rem; color:#cfd8e6; }

.footer-links{ list-style:none; margin:0; padding:0; }
.footer-links li{ margin:.4rem 0; }
.footer-links a{ color:#cfd8e6; }
.footer-links a:hover{ color:#fff; }

.footer-socials{ display:flex; gap:.5rem; margin:.75rem 0 1rem; }
.footer-socials .social{
  width:40px; height:40px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.15);
  background:transparent; transition:background .15s, border-color .15s;
}
.footer-socials .social svg{ width:20px; height:20px; fill:var(--accent); transition:fill .15s; }
.footer-socials .social:hover{ background:var(--accent); border-color:var(--accent); }
.footer-socials .social:hover svg{ fill:#fff; }

.footer-newsletter label{
  display:block; font-weight:600; color:#fff; margin:.25rem 0 .5rem;
}
.footer-newsletter .nl-controls{ display:flex; gap:.5rem; }
.footer-newsletter input{
  flex:1; padding:.6rem .75rem; border-radius:8px;
  border:1px solid #3E7CB1; background:var(--surface); color:#0b2340;
}
.footer-newsletter button{
  padding:.6rem .9rem; border-radius:8px; border:0;
  background:var(--accent); color:#fff; font-weight:700; cursor:pointer;
}
.footer-newsletter button:hover{ opacity:.9; }

.footer-bottom{ border-top:1px solid rgba(255,255,255,.12); margin-top:2rem; }
.footer-bottom .container{ padding:1rem 0; display:flex; justify-content:space-between; align-items:center; }
/* Center columns + lists in footer */
.site-footer .footer-col { text-align: center; }
.site-footer .footer-nav { display: flex; flex-direction: column; gap: .45rem; align-items: center; }

/* Keep headings bold as requested previously */
.site-footer .footer-title,
.site-footer .footer-heading { font-weight: 700; }

/* Social pills remain rounded + orange brand color */
.site-footer .social-pill {
  width: 36px; height: 36px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #F17300; color: #F17300; text-decoration: none;
}
.site-footer .social-pill:hover { background: #F17300; color: #fff; }

/* Newsletter stays compact */
.site-footer .newsletter { margin-top: .75rem; }
.site-footer .newsletter-row { display: flex; gap: .5rem; justify-content: center; }
.site-footer .newsletter input { padding: .45rem .6rem; border: 1px solid #e6ebf2; border-radius: 8px; }
.site-footer .newsletter button { padding: .45rem .8rem; border-radius: 8px; background: #F17300; color: #fff; border: none; }
/* Newsletter tiny styles (non-invasive) */
.footer-newsletter { margin-top: 1rem; }
.footer-newsletter .newsletter-row { display:flex; gap:.5rem; }
.footer-newsletter input[type="email"] { flex:1; padding:.5rem .65rem; border:1px solid #e6ebf2; border-radius:8px; }
.footer-newsletter button { padding:.5rem .9rem; border:1px solid #e6ebf2; border-radius:8px; background:#F17300; color:#fff; }
.footer-newsletter .newsletter-note { display:block; margin-top:.4rem; color:#666; font-size:.85rem; }
/* Footer socials */
.site-footer .footer-social{
  display:flex;
  gap:.5rem;
  margin-top:.75rem;
}

.site-footer .footer-social .icon{
  width:36px;
  height:36px;
  border-radius:999px;           /* rounded */
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--accent, #F17300);
  color:var(--accent, #F17300);  /* orange by default */
  background:transparent;
  text-decoration:none;
  transition:background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
}

.site-footer .footer-social .icon:hover{
  background:var(--accent, #F17300);  /* orange on hover */
  color:#fff;                         /* icon turns white */
  border-color:var(--accent, #F17300);
  transform:translateY(-1px);
}

.site-footer .footer-social .icon svg{
  width:18px; height:18px; display:block;
  fill:currentColor; /* makes the SVG follow the link color */
}
/* Center columns + lists in footer */
.site-footer .footer-col { text-align: center; }
.site-footer .footer-nav { display: flex; flex-direction: column; gap: .45rem; align-items: center; }
/* Texts cards grid */
.texts-grid .container { max-width: 1100px; }
.texts-grid .grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
  align-items: stretch;
}
.texts-grid .card {
  background: var(--surface);
  border: 1px solid #e6ebf2;
  border-radius: 12px;
  padding: 1rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
  transition: box-shadow .2s ease, transform .2s ease;
  display: flex; 
}
.texts-grid .card:hover {
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  transform: translateY(-2px);
}
.texts-grid .card-link {
  text-decoration: none;
  color: inherit;
  display: block;
  width: 100%;
}
.texts-grid .card h3 {
  font-family: var(--ff-serif, "Adobe Garamond Pro", Garamond, serif);
  font-size: 1.15rem;
  margin: 0 0 .4rem 0;
}
.texts-grid .card p {
  font-family: var(--ff-sans, Roboto, system-ui, -apple-system, Segoe UI, Arial, sans-serif);
  margin: 0;
  color: #555;
  line-height: 1.55;
}
/* ——— Podcast page rounding ——— */
.podcast-page .podcast-hero .artwork img,
.podcast-page .podcast-hero img.podcast-art {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;       /* round the placeholder/hero artwork */
}

/* Cards (episodes + lectures) */
.podcast-page .episode-card,
.podcast-page .lecture-card {
  border: 1px solid #e6ebf2;
  border-radius: 16px;       /* rounded card corners */
  overflow: hidden;          /* clip child images to rounded corners */
  background: var(--surface);
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
}

/* Ensure thumbnails fill their area and respect rounding */
.podcast-page .episode-card .thumb img,
.podcast-page .lecture-card .thumb img {
  display: block;
  width: 100%;
  height: 180px;             /* adjust if your design needs a different height */
  object-fit: cover;
}
/* Podcast B & C: rounded episode & lecture thumbnails */
.podcast-episodes img,
.podcast-lectures img {
  border-radius: 12px;
}

/* If your markup uses thumb wrappers on cards, keep corners clean */
.podcast-episodes .thumb,
.podcast-lectures .thumb {
  border-radius: 12px;
  overflow: hidden;
}

/* Optional: ensure good cropping inside fixed boxes */
.podcast-episodes .thumb img,
.podcast-lectures .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* === Articles page width constraints (1200px) === */
.articles-page .page-hero .container,
.articles-page .featured-pair .container,
.articles-page .articles-list .container {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Breadcrumb bar itself should also honor 1200px frame */
.articles-page #breadcrumbs {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding-left: 1rem;
  padding-right: 1rem;
}
/* === Articles card layout fixes (excerpts, date, avatar in footer) === */
.articles-page .card,
.articles-page .card-featured.secondary {
  display: flex;
  flex-direction: column;
}

.articles-page .card-body,
.articles-page .card-featured.secondary .body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.articles-page .card-excerpt,
.articles-page .card-featured.secondary .excerpt {
  display: block;
  margin-top: .5rem;
  color: #333;
  max-height: none;         /* ensure not clipped */
  overflow: visible;
}

.articles-page .card-date,
.articles-page .card-featured.secondary .card-date {
  margin-top: .4rem;        /* directly under excerpt */
  font-size: .9rem;
  color: #777;
}

.articles-page .card-foot,
.articles-page .card-featured.secondary .card-foot {
  margin-top: auto;         /* pin footer to bottom */
  display: flex;
  align-items: center;
  gap: .5rem;
  padding-top: .6rem;
}

.articles-page .author-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
}
/* Ensure article cards keep their content inside and stack correctly */
.articles-page .card{
  display:flex;
  flex-direction:column;
  overflow:hidden;              /* keeps excerpt inside the card box */
  box-sizing:border-box;
}

.articles-page .card-media{
  position:relative;
  width:100%;
  height:163.13px;              /* 290x163.13 image box ratio */
  overflow:hidden;
}
.articles-page .card-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.articles-page .card-body{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;                /* text area grows, footer sticks to bottom */
  padding:12px;
}

.articles-page .card-excerpt{
  margin:.4rem 0 .6rem;
  line-height:1.45;
  flex:0 0 auto;
}

.articles-page .card-date{
  color:#666;
  font-size:.92rem;
}

.articles-page .card-foot{
  margin-top:auto;
  padding:12px;
  display:flex;
  align-items:center;
  gap:8px;
  border-top:1px solid #e6ebf2;
}

.articles-page .author-avatar{
  width:30px;
  height:30px;
  border-radius:50%;
  object-fit:cover;
}
/* ---- Featured pair hard sizing (Articles page only) ---- */
.articles-page .featured-grid{
  max-width:1200px; margin:0 auto;
  display:grid; grid-template-columns: 880px 290px; gap:24px;
}

.articles-page .card-featured.primary{ width:880px; height:450px; }
.articles-page .card-featured.primary .inner{
  display:grid; grid-template-columns: 590px 1fr; height:100%;
}
.articles-page .card-featured.primary .media img{
  width:100%; height:100%; object-fit:cover; display:block;
}

/* Secondary featured (must stay 290x450) */
.articles-page .card-featured.secondary{ width:290px; height:450px; }
.articles-page .card-featured.secondary .inner{
  display:flex; flex-direction:column; height:100%;
}
.articles-page .card-featured.secondary .media{
  width:100%; height:163.13px; /* 290 x 163.13 (16:9) */
  flex:0 0 auto; overflow:hidden;
}
.articles-page .card-featured.secondary .media img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.articles-page .card-featured.secondary .body{
  flex:1 1 auto; display:flex; flex-direction:column;
  padding:12px; box-sizing:border-box;
}
.articles-page .card-featured.secondary .card-foot{ margin-top:auto; }

/* Ensure sizing math is predictable */
.articles-page *, .articles-page *::before, .articles-page *::after{ box-sizing:border-box; }
/* ==== Article detail image clamp (700x394 max) ==== */
.article-page .hero-image {
  max-width: 700px;
  margin: 1rem auto;           /* center the image block */
}

.article-page .hero-image img {
  display: block;
  width: 100%;                 /* scale down responsively */
  max-width: 700px;            /* never exceed 700 wide */
  aspect-ratio: 700 / 394;     /* keep exact 700x394 ratio */
  height: auto;                /* computed from aspect-ratio */
  object-fit: cover;           /* crop if needed but keep ratio */
  object-position: center;
}

/* If you ever embed images inside article body, clamp them too */
.article-page .article-content img {
  display: block;
  margin: 1rem auto;
  width: 100%;
  max-width: 700px;
  aspect-ratio: 700 / 394;
  height: auto;
  object-fit: cover;
  object-position: center;
}
/* --- Articles: keep byline + share stacked under image, fixed width --- */
.article-page .hero-image,
.article-page .article-byline,
.article-page .article-share {
  width: 700px;               /* match your article image width */
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.article-page .hero-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 700 / 394;    /* keeps 700x394 proportion */
  object-fit: cover;
  display: block;
}

/* Byline + share spacing */
.article-page .article-byline { margin-top: .5rem; margin-bottom: .75rem; }
.article-page .article-share  { margin-top: .25rem; margin-bottom: 1.25rem; }

/* Ensure nothing “bleeds” */
.article-page .article-shell { max-width: 760px; margin: 0 auto; overflow: hidden; }
/* ===== Articles: lock width & square corners ===== */
.article-page .article-shell{
  max-width: 700px;       /* match image width */
  margin: 0 auto;
}

.article-page .hero-image{
  width: 700px;           /* ensures 700-wide column */
  max-width: 100%;        /* stays responsive on small screens */
  margin: 1rem auto;
}

.article-page .hero-image img{
  display: block;
  width: 100%;
  height: auto;           /* your source is 700x394 */
  border-radius: 0 !important; /* square edges */
}

/* Keep everything beneath aligned to the same column */
.article-page .article-byline,
.article-page .article-share,
.article-page .article-content,
.article-page .article-tags{
  max-width: 700px;
  margin: 0 auto;
}
/* Featured primary date under excerpt */
.card-featured.primary .content .date{
  display:block;
  margin:.5rem 0 .75rem;
  font-size:.95rem;
  color:#667089;
}

/* Featured secondary date under excerpt */
.card-featured.secondary .body .card-date{
  display:block;
  margin:.5rem 0 .75rem;
  font-size:.95rem;
  color:#667089;
}

/* Keep foot just for avatar + name */
.card-featured .foot,
.card-featured .card-foot{
  display:flex;
  align-items:center;
  gap:.5rem;
}
/* Featured date under excerpt (keep avatar in bottom foot) */
.articles-page .card-featured.primary .content { display: flex; flex-direction: column; }
.articles-page .card-featured.primary .content .date-under {
  margin: .4rem 0 .6rem;
  font-size: .95rem;
  color: #666;
}
.articles-page .card-featured.primary .content .foot { margin-top: auto; display:flex; align-items:center; gap:.5rem; }
/* --- Pin author footer to bottom of cards --- */
.articles-page .card {
  display: flex;
  flex-direction: column;
  height: 450px; /* your standard card height */
}
.articles-page .card .card-body {
  /* body takes remaining space above the footer */
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.articles-page .card .card-excerpt { margin-bottom: .5rem; }
.articles-page .card .card-date { margin: .25rem 0 0; }

.articles-page .card .card-foot {
  margin-top: auto;                /* pushes footer to the bottom */
  padding: 10px 12px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Secondary featured (vertical) */
.articles-page .card-featured.secondary .inner {
  display: flex;
  flex-direction: column;
  height: 450px;
}
.articles-page .card-featured.secondary .body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.articles-page .card-featured.secondary .card-foot { margin-top: auto; }

/* Primary featured (horizontal) */
.articles-page .card-featured.primary .content {
  display: flex;
  flex-direction: column;
}
.articles-page .card-featured.primary .foot { margin-top: auto; }
/* ——— Author byline/link ——— */
.article-byline .byline-info { display:flex; flex-direction:column; }
.byline-top{ display:flex; align-items:center; gap:.5rem; }
.byline-name{ font-weight:700; text-decoration:none; color:#0b2340; }
.byline-name:hover{ text-decoration:none; opacity:.85; }

/* author “more” icon (book) */
.author-more{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border:1px solid #e6ebf2; border-radius:6px;
  background:var(--surface); color:var(--accent); cursor:pointer;
}
.author-more:hover{ background:#f9fbfe; }
.author-more svg{ width:16px; height:16px; display:block; }

/* ——— Author modal ——— */
.author-modal[hidden]{ display:none; }
.author-modal__overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.35); backdrop-filter:saturate(120%) blur(2px); z-index:1000;
}
.author-modal__dialog{
  position:fixed; inset:auto 0 0 0; margin:auto; top:10%;
  max-width:640px; background:var(--surface); border:1px solid #e6ebf2; border-radius:12px;
  box-shadow:0 16px 60px rgba(0,0,0,.18); padding:16px 18px; z-index:1001;
}
.author-modal__close{
  position:absolute; top:8px; right:10px; border:0; background:transparent; font-size:20px; cursor:pointer;
}
.author-modal__header{ display:flex; gap:.75rem; align-items:center; margin-bottom:.5rem; }
.author-modal__avatar{ width:48px; height:48px; border-radius:50%; object-fit:cover; border:1px solid #e6ebf2; }
.author-modal__role{ color:#666; font-size:.95rem; }
.author-modal__bio{ color:#333; margin:.5rem 0 1rem; }
.author-modal__list{ margin:.25rem 0 1rem; padding-left:1.1rem; }
.author-modal__list li{ margin:.25rem 0; }
.author-modal__cta{
  display:inline-block; padding:.5rem .75rem; border:1px solid #e6ebf2; border-radius:8px; text-decoration:none; color:#054A91;
}
.author-modal__cta:hover{ background:#f5f8ff; }
.chapter-page { max-width: 900px; margin: 0 auto; }
.verses { display: grid; gap: 12px; }
.verse { border:1px solid #e6ebf2; padding:12px; border-radius:8px; background:var(--surface); }
.verse-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px; }
.verse .num { font-weight:700; color:#054A91; }
.verse .actions { display:flex; gap:6px; }
.verse .actions button { font-size:.85rem; padding:.25rem .5rem; border:1px solid #d9e1ec; background:#f7f9fc; border-radius:6px; cursor:pointer; }
.panel { margin-top:8px; padding:8px; background:#f9fbfe; border:1px dashed #e2e8f0; border-radius:6px; }
/* Center the chapter-number grid on book pages */
.book-page .chapters-grid,
.chapters-grid {
  --tile-w: 64px;        /* chapter tile width  */
  --tile-h: 48px;        /* chapter tile height */
  --gap: 10px;

  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--tile-w), var(--tile-w)));
  gap: var(--gap);

  /* this actually centers the whole grid block */
  justify-content: center;

  /* keep the grid itself tight and centered on the page */
  width: fit-content;
  margin: 1rem auto 2rem;
}

.chapters-grid a,
.chapters-grid .chapter-tile {
  display: grid;
  place-items: center;
  width: var(--tile-w);
  height: var(--tile-h);
  border: 1px solid #e6ebf2;
  text-decoration: none;
  color: #0b2340;
  background: var(--surface);
}

.chapters-grid a:hover,
.chapters-grid .chapter-tile:hover {
  background: #f7f9fc;
  border-color: #d6dfeb;
}
/* Keep universal containers wide; only the reading column is narrow */
.chapter-wrap{
  max-width: 820px;           /* reading width */
  margin: 0 auto;
}

/* If you previously had this, REMOVE it:
   .chapter-page .container { max-width: 760px; }
   It squeezes hero & footer too. */

/* --- Global Nav Thickness & Consistency (override) --- */
:root{
  --bg:#ffffff;
  --surface:#ffffff;
  --ink:#0b2340;
  --muted:#6b7280;
  --accent:#F17300;
  --border:#e6ebf2;
}

.site-header{
  padding-block: var(--nav-pad-y);
}

.site-header .container{
  min-height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-header .logo img{
  max-height: calc(var(--nav-height) - (2 * var(--nav-pad-y)));
  height: auto;
}

.main-nav ul{
  display: flex;
  align-items: center;
  gap: 1.25rem; /* keeps your current spacing */
}

.main-nav a{
  padding: 8px 10px; /* small vertical padding so the bar feels thicker */
  text-decoration: none;
}

/* helpful for in-page anchors so they don't hide behind the thicker header */
html{
  scroll-padding-top: calc(var(--nav-height) + var(--nav-pad-y));
}
/* Articles page: remove extra gap above the universal hero */
body.articles-page .page-hero{
  margin-top: 0 !important;
}
/* === Uniform Navbar (site-wide) === */
:root { --header-h: 72px; --nav-gap: 2rem; }

.site-header{
  position: sticky; top:0; z-index:1000;
  background:var(--surface); border-bottom:1px solid #e6ebf2;
  height: var(--header-h);
}

.site-header .container{
  max-width: 1200px; margin:0 auto; padding:0 16px; height:100%;
}

.site-header__inner{
  display:grid; grid-template-columns: 1fr auto 1fr;
  align-items:center; height:100%;
  gap:24px;
}

.site-title{
  justify-self:start; text-decoration:none;
  font-weight:700; color:#0b2340; white-space:nowrap;
}

.main-nav{ justify-self:center; }
.nav-list{
  display:flex; align-items:center; justify-content:center;
  gap: var(--nav-gap);
  list-style:none; margin:0; padding:0;
}
.nav-list a{
  display:block; padding:12px 0;
  text-decoration:none; color:#0b2340;
}

.nav-search{ justify-self:end; text-decoration:none; }

 /* Ensure content never tucks under sticky header */
main{ padding-top: clamp(8px, 1vw, 12px); }
/* ---- Header normalization (uniform thickness) ---- */
:root { --header-pad-y: 10px; } /* adjust to taste (8–12px looks good) */

.site-header{
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--surface);
  border-bottom: 1px solid #e6ebf2;
  padding: var(--header-pad-y) 0;
}

.site-header .nav-wrap{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.site-header .brand{
  font-family: var(--ff-serif, "Adobe Garamond Pro", Garamond, serif);
  font-weight: 700;
  font-size: 1.25rem;
  color: #0b2340;
  text-decoration: none;
}

.main-nav .nav-list{
  display: flex;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-nav a{ text-decoration: none; color: inherit; }

.nav-search{
  text-decoration: none;
  font-size: 1.1rem;
  line-height: 1;
}
/* Navigation container */
.site-nav {
  background:var(--surface);
  border-bottom:1px solid #e6ebf2;
  padding:12px 0;
}

.nav-container {
  display:flex;
  align-items:center;
  justify-content:space-between;
  max-width:1200px;
  margin:0 auto;
  padding:0 16px;
}

/* Site name styled same as nav links */
.nav-logo {
  font-family: inherit;   /* same font as links */
  font-weight:600;
  font-size:1rem;         /* match link size */
  color:#0b2340;
  text-decoration:none;
}

/* Nav links */
.nav-links {
  display:flex;
  gap:24px;
}
.nav-links a {
  font-weight:500;
  font-size:1rem;
  color:#0b2340;
  text-decoration:none;
}
.nav-links a:hover {
  color:#F17300;
}

/* Search button with clean SVG */
.nav-search {
  background:none;
  border:none;
  cursor:pointer;
  color:#0b2340;
  display:flex;
  align-items:center;
}
.nav-search:hover { color:#F17300; }
/* Responsive featured cards */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 1200px) {
  .cards {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .cards {
    grid-template-columns: 1fr;
  }
}

/* Card image responsiveness */
.card img {
  width: 100%;
  height: auto;
  aspect-ratio: 700 / 394;   /* keep proportion */
  object-fit: cover;
  object-position: center;
  border-bottom: 1px solid #e6ebf2;
}
.nav-links a.active { color: #F17300; font-weight: 600; }
.page-title {
  font-size: 2rem;
  font-weight: 800;
  margin: 0;
  color: #0b2340; /* keep brand color, or adjust if needed */
}
/* Verse xref preview hovercard */
#hovercard {
  position: fixed;                /* JS controls left/top */
  display: none;                  /* toggled by JS */
  max-width: min(420px, 92vw);
  background: var(--surface);
  border: 1px solid #e6ebf2;
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0,0,0,.12);
  padding: .6rem .7rem;
  font-size: .92rem;
  line-height: 1.45;
  z-index: 9999;
}

#hovercard .vc-head {
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  margin-bottom:.35rem;
}

#hovercard .vc-ref { font-weight:700; color: var(--ink, #0b2340); }
#hovercard .vc-text { white-space: normal; word-break: break-word; }
/* --- Diet page verse hovercard --- */
.diet-hovercard{
  position: fixed;
  z-index: 9999;
  display: none;
  max-width: min(420px, 92vw);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0,0,0,.12);
  padding: .6rem .7rem;
  font-size: .92rem;
  line-height: 1.45;
}
.diet-hovercard.open{ display:block; }
.diet-hover-head{ font-weight:700; color:var(--ink); margin-bottom:.25rem; }
.diet-hover-foot{ margin-top:.35rem; font-size:.85rem; color:var(--muted); }
/* === THEME: light/dark support === */
:root{
  --bg:#ffffff;
  --surface:#ffffff;
  --ink:#0b2340;
  --muted:#6b7280;
  --accent:#F17300;
  --border:#e6ebf2;
}
[data-theme="dark"]{
  /* Higher specificity than :root so it overrides page-level :root blocks */
  --bg:#0b1220;
  --surface:#0f1a2b;
  --ink:#e9eef6;
  --muted:#a8b3c2;
  --blue:#93c2ff;
  --accent:#F17300;
  --border:#223046;
  --shadow:0 2px 10px rgba(0,0,0,.7);
  --shadow-hover:0 12px 24px rgba(0,0,0,.75);
}

/* Base surfaces/text use tokens so pages switch automatically */
html,body{background:var(--bg);color:var(--ink);}
a{color:var(--blue);}

.page-header,.pane,.vtabs,.card,.card-body,.index-pane,.detail-pane{
  background:var(--surface);
  color:var(--ink);
  border-color:var(--border);
}
.divider, hr{background:var(--border);border-color:var(--border);}
.card{box-shadow:var(--shadow);}
.card:hover{box-shadow:var(--shadow-hover);}

/* Toggle UI */
.theme-toggle{
  width:40px;height:40px;border-radius:999px;
  border:1px solid var(--border);background:var(--surface);
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;box-shadow:var(--shadow);
  transition:transform .15s, box-shadow .15s, border-color .15s;
}
.theme-toggle:hover{transform:translateY(-1px);box-shadow:var(--shadow-hover);border-color:#cdd8e6;}
.theme-toggle .sun{display:block}
.theme-toggle .moon{display:none}
[data-theme="dark"] .theme-toggle .sun{display:none}
[data-theme="dark"] .theme-toggle .moon{display:block}

/* Fallback: floating toggle appears if header doesn't include one */
.floating-theme-toggle{position:fixed;right:16px;bottom:16px;z-index:1000}

/* === THEME: light/dark support === */
:root{
  --bg:#ffffff;
  --surface:#ffffff;
  --ink:#0b2340;
  --muted:#6b7280;
  --accent:#F17300;
  --border:#e6ebf2;
}
[data-theme="dark"]{
  --bg:#0b1220;
  --surface:#0f1a2b;
  --ink:#e9eef6;
  --muted:#a8b3c2;
  --blue:#93c2ff;
  --accent:#F17300;
  --border:#223046;
  --shadow:0 2px 10px rgba(0,0,0,.7);
  --shadow-hover:0 12px 24px rgba(0,0,0,.75);
}
html,body{background:var(--bg);color:var(--ink);}
a{color:var(--blue);}
.page-header,.pane,.vtabs,.card,.card-body,.index-pane,.detail-pane{
  background:var(--surface);color:var(--ink);border-color:var(--border);
}
.divider, hr{background:var(--border);border-color:var(--border);}
.card{box-shadow:var(--shadow);}
.card:hover{box-shadow:var(--shadow-hover);}

.theme-toggle{
  width:40px;height:40px;border-radius:999px;
  border:1px solid var(--border);background:var(--surface);
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;box-shadow:var(--shadow);
  transition:transform .15s, box-shadow .15s, border-color .15s;
}
.theme-toggle:hover{transform:translateY(-1px);box-shadow:var(--shadow-hover);border-color:#cdd8e6;}
.theme-toggle .sun{display:block}
.theme-toggle .moon{display:none}
[data-theme="dark"] .theme-toggle .sun{display:none}
[data-theme="dark"] .theme-toggle .moon{display:block}
.floating-theme-toggle{position:fixed;right:16px;bottom:16px;z-index:1000}
/* === DARK MODE REFINEMENTS (icons + universal header + typography) === */
[data-theme="dark"]{
  --bg:#0b1220;
  --surface:#0f1a2b;
  --ink:#ffffff;          /* crisp white text */
  --muted:#c8d1de;        /* softer secondary text */
  --blue:#a8cdff;         /* link color in dark */
  --accent:#F17300;
  --border:#223046;
  --shadow:0 2px 10px rgba(0,0,0,.7);
  --shadow-hover:0 12px 24px rgba(0,0,0,.75);
}

html,body{background:var(--bg);color:var(--ink);}
a{color:var(--blue);}
.page-header,.pane,.vtabs,.card,.card-body,.index-pane,.detail-pane{
  background:var(--surface);color:var(--ink);border-color:var(--border);
}
.divider, hr{background:var(--border);border-color:var(--border);}
.card{box-shadow:var(--shadow);}
.card:hover{box-shadow:var(--shadow-hover);}

/* Header partial + links adapt in dark */
[data-theme="dark"] #site-header{ background:var(--surface); color:var(--ink); }
[data-theme="dark"] #site-header a{ color:var(--ink); }
[data-theme="dark"] #site-header .muted,
[data-theme="dark"] #site-header .subtle{ color:var(--muted); }

/* Fix pages that hard-coded dark text colors inline */
[data-theme="dark"] .site-home-title,
[data-theme="dark"] .title{ color:var(--ink) !important; }

/* Toggle visuals */
.theme-toggle{
  width:40px;height:40px;border-radius:999px;
  border:1px solid var(--border);background:var(--surface);color:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;box-shadow:var(--shadow);
  transition:transform .15s, box-shadow .15s, border-color .15s, background-color .15s;
}
.theme-toggle:hover{transform:translateY(-1px);box-shadow:var(--shadow-hover);border-color:#cdd8e6;}
.theme-toggle .sun{display:block}
.theme-toggle .moon{display:none}
[data-theme="dark"] .theme-toggle .sun{display:none}
[data-theme="dark"] .theme-toggle .moon{display:block}

/* Fallback floating button (if header doesn't include one) */
.floating-theme-toggle{position:fixed;right:16px;bottom:16px;z-index:1000}

/* === DARK MODE REFINEMENTS (icons + universal header + typography) === */
[data-theme="dark"]{
  --bg:#0b1220;
  --surface:#0f1a2b;
  --ink:#ffffff;
  --muted:#c8d1de;
  --blue:#a8cdff;
  --accent:#F17300;
  --border:#223046;
  --shadow:0 2px 10px rgba(0,0,0,.7);
  --shadow-hover:0 12px 24px rgba(0,0,0,.75);
}
html,body{background:var(--bg);color:var(--ink);}
a{color:var(--blue);}
.page-header,.pane,.vtabs,.card,.card-body,.index-pane,.detail-pane{
  background:var(--surface);color:var(--ink);border-color:var(--border);
}
.divider, hr{background:var(--border);border-color:var(--border);}
.card{box-shadow:var(--shadow);}
.card:hover{box-shadow:var(--shadow-hover);}
[data-theme="dark"] #site-header{ background:var(--surface); color:var(--ink); }
[data-theme="dark"] #site-header a{ color:var(--ink); }
[data-theme="dark"] #site-header .muted,
[data-theme="dark"] #site-header .subtle{ color:var(--muted); }
[data-theme="dark"] .site-home-title,
[data-theme="dark"] .title{ color:var(--ink) !important; }
.theme-toggle{
  width:40px;height:40px;border-radius:999px;
  border:1px solid var(--border);background:var(--surface);color:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;box-shadow:var(--shadow);
  transition:transform .15s, box-shadow .15s, border-color .15s, background-color .15s;
}
.theme-toggle:hover{transform:translateY(-1px);box-shadow:var(--shadow-hover);border-color:#cdd8e6;}
.theme-toggle .sun{display:block}
.theme-toggle .moon{display:none}
[data-theme="dark"] .theme-toggle .sun{display:none}
[data-theme="dark"] .theme-toggle .moon{display:block}
.floating-theme-toggle{position:fixed;right:16px;bottom:16px;z-index:1000}
/* =========================
   DARK MODE TYPOGRAPHY & UI
   ========================= */

/* Token tweaks for dark mode (keeps your light palette intact) */
[data-theme="dark"]{
  --bg:#0b1220;
  --surface:#0f1a2b;
  --ink:#ffffff;         /* universal text in dark */
  --muted:#c8d1de;       /* secondary text */
  --blue:#a8cdff;        /* links */
  --accent:#F17300;
  --border:#223046;
  --shadow:0 2px 10px rgba(0,0,0,.7);
  --shadow-hover:0 12px 24px rgba(0,0,0,.75);
}

/* Base text & links */
html, body { background:var(--bg); color:var(--ink); }
a { color:var(--blue); }
a:hover { opacity:.9; }

/* Headings + common title classes */
h1,h2,h3,h4,h5,h6,
.page-title,.site-home-title,.title,.card-title { color:var(--ink); }
/* Secondary text */
.kicker,.card-kicker,.desc,.lead,.muted,.cite { color:var(--muted); }

/* Cards & panes inherit surfaces */
.card,.card-body,.pane,.vtabs,.page-header,.index-pane,.detail-pane {
  background:var(--surface); color:var(--ink); border-color:var(--border);
  box-shadow:var(--shadow);
}
.card:hover { box-shadow:var(--shadow-hover); }

/* Inputs & forms */
input, select, textarea {
  background:var(--bg); color:var(--ink); border:1px solid var(--border);
  border-radius:10px;
}
input::placeholder, textarea::placeholder { color:var(--muted); }

/* Buttons (generic + icon buttons) */
button, .btn, input[type="button"], input[type="submit"], .icon-btn, .theme-toggle {
  color:var(--ink); background:var(--surface); border:1px solid var(--border);
  box-shadow:var(--shadow);
  transition:transform .15s, box-shadow .15s, border-color .15s, background-color .15s;
}
button:hover, .btn:hover, .icon-btn:hover, .theme-toggle:hover {
  transform:translateY(-1px); box-shadow:var(--shadow-hover); border-color:#cdd8e6;
}

/* Header & Footer adapt */
#site-header, #site-header a { color:var(--ink); }
#site-header .subtle, #site-header .muted { color:var(--muted); }
#site-footer, #site-footer a { color:var(--ink); }
#site-footer .muted { color:var(--muted); }

/* Dark-specific overrides to beat old inline colors */
[data-theme="dark"] h1,[data-theme="dark"] h2,[data-theme="dark"] h3,
[data-theme="dark"] h4,[data-theme="dark"] h5,[data-theme="dark"] h6,
[data-theme="dark"] .page-title,[data-theme="dark"] .site-home-title,
[data-theme="dark"] .title,[data-theme="dark"] .card-title {
  color:var(--ink) !important;
}
[data-theme="dark"] .kicker,[data-theme="dark"] .card-kicker,
[data-theme="dark"] .desc,[data-theme="dark"] .lead,
[data-theme="dark"] .muted,[data-theme="dark"] .cite {
  color:var(--muted) !important;
}
[data-theme="dark"] nav.primary a { color:var(--ink) !important; }

/* Thumb band backgrounds in dark (if used) */
[data-theme="dark"] .thumb { background:linear-gradient(135deg,#0e1b2b,#15233a); }

/* Theme toggle icon swap */
.theme-toggle .sun{display:block}
.theme-toggle .moon{display:none}
[data-theme="dark"] .theme-toggle .sun{display:none}
[data-theme="dark"] .theme-toggle .moon{display:block}

/* === DARK MODE FIXES: ensure index cards + universal footer adapt === */
[data-theme="dark"] .card,
[data-theme="dark"] .card-body{
  background:var(--surface) !important;
  color:var(--ink) !important;
  border-color:var(--border) !important;
}
[data-theme="dark"] .card-title{ color:var(--ink) !important; }
[data-theme="dark"] .card-kicker{ color:var(--muted) !important; }

[data-theme="dark"] #site-footer{
  background:var(--surface) !important;
  color:var(--ink) !important;
  border-top-color:var(--border) !important;
}
[data-theme="dark"] #site-footer a{ color:var(--ink) !important; }
[data-theme="dark"] #site-footer .muted{ color:var(--muted) !important; }

/* === DARK MODE FIXES: ensure index cards + universal footer adapt === */
[data-theme="dark"] .card,
[data-theme="dark"] .card-body{
  background:var(--surface) !important;
  color:var(--ink) !important;
  border-color:var(--border) !important;
}
[data-theme="dark"] .card-title{ color:var(--ink) !important; }
[data-theme="dark"] .card-kicker{ color:var(--muted) !important; }

[data-theme="dark"] #site-footer{
  background:var(--surface) !important;
  color:var(--ink) !important;
  border-top-color:var(--border) !important;
}
[data-theme="dark"] #site-footer a{ color:var(--ink) !important; }
[data-theme="dark"] #site-footer .muted{ color:var(--muted) !important; }

/* HIDE PAGE-HEADER GLOBALLY */
.page-header{display:none !important;}
/* ===== SITE PALETTE (LIGHT/DARK) — single source of truth ===== */
:root{
  --bg:#ffffff;
  --surface:#ffffff;
  --ink:#0b2340;
  --muted:#6b7280;
  --accent:#F17300;
  --border:#e6ebf2;
}

[data-theme="dark"]{
  color-scheme: dark;

  /* DARK MODE */
  --bg:#000000;         /* Black page background */
  --surface:#054A91;    /* Navy Blue surfaces for strong contrast */
  --ink:#FFFFFF;        /* Primary text on dark */
  --muted:#DBE4EE;      /* Light Gray-Blue secondary text */
  --blue:#81A4CD;       /* Soft Blue links/actions for readability */
  --accent:#F17300;     /* Orange Accent remains vibrant in dark */
  --border:#3E7CB1;     /* Medium Blue borders/dividers on navy */

  --shadow:0 2px 10px rgba(0,0,0,.7);
  --shadow-hover:0 12px 24px rgba(0,0,0,.75);
}
/* ===== END SITE PALETTE ===== */

/* Force footer links to white in dark mode */
[data-theme="dark"] #site-footer a{
  color:#FFFFFF !important;
  opacity:1 !important;
}

/* DARK MODE: force footer links to white across all pages (robust selectors) */
[data-theme="dark"] #site-footer a,
[data-theme="dark"] footer.site-footer a,
[data-theme="dark"] #site-footer .footer-nav a,
[data-theme="dark"] #site-footer .legal-links a,
[data-theme="dark"] #site-footer .footer-brand .icon{
  color:#FFFFFF !important;
  opacity:1 !important;
}

/* FOOTER HEADING STYLE OVERRIDES */
#site-footer .footer-col--explore .footer-heading,
#site-footer .footer-col--texts .footer-heading{
  font-style: italic;
  font-weight: 900;
  letter-spacing: .08em;
}

/* Footer headings style: Resources & The Writings (non-italic) */
#site-footer .footer-col--explore .footer-heading,
#site-footer .footer-col--texts .footer-heading{
  font-style: normal !important;
  font-weight: 800;
  letter-spacing: .06em;
}

/* Dark mode: force index card titles to white */
[data-theme="dark"] .card .card-body .card-title{
  color:#FFFFFF !important;
}

/* Dark mode: force all card titles site-wide to white */
[data-theme="dark"] .card .card-title,
[data-theme="dark"] .card .title{
  color:#FFFFFF !important;
}

/* Dark mode: header brand (crown + Semitic Jew), middle navs, and right-side icons to white */
[data-theme="dark"] #site-header .brand,
[data-theme="dark"] #site-header .brand * ,
[data-theme="dark"] #site-header nav.primary a,
[data-theme="dark"] #site-header .tools .icon-btn,
[data-theme="dark"] #site-header .tools .theme-toggle{
  color:#FFFFFF !important;
}

/* ==== DARK MODE: MEDIA FILTER BUTTONS ==== */
/* Ensure all filter/tabs/pill controls on media.html use dark-blue bg + white text in dark mode */
[data-theme="dark"] .media-filters button,
[data-theme="dark"] .media-filters .btn,
[data-theme="dark"] .media-filters .chip,
[data-theme="dark"] .media-filters .pill,
[data-theme="dark"] .media-filters .tab,
[data-theme="dark"] .media-nav button,
[data-theme="dark"] .media-nav .btn,
[data-theme="dark"] .filters button,
[data-theme="dark"] .filters .btn,
[data-theme="dark"] .filters a,
[data-theme="dark"] .tabs button,
[data-theme="dark"] .tabs .tab,
[data-theme="dark"] .segmented-control button {
  background: var(--brand) !important;  /* Navy Blue #054A91 */
  color: #FFFFFF !important;            /* White text */
  border: 1px solid var(--border) !important;
}

/* Hover/Focus: switch to Teal for strong contrast, keep white text */
[data-theme="dark"] .media-filters button:hover,
[data-theme="dark"] .media-filters .btn:hover,
[data-theme="dark"] .media-filters .chip:hover,
[data-theme="dark"] .media-filters .pill:hover,
[data-theme="dark"] .media-filters .tab:hover,
[data-theme="dark"] .media-nav button:hover,
[data-theme="dark"] .media-nav .btn:hover,
[data-theme="dark"] .filters button:hover,
[data-theme="dark"] .filters .btn:hover,
[data-theme="dark"] .filters a:hover,
[data-theme="dark"] .tabs button:hover,
[data-theme="dark"] .tabs .tab:hover,
[data-theme="dark"] .segmented-control button:hover,
[data-theme="dark"] .media-filters button:focus,
[data-theme="dark"] .media-filters .btn:focus,
[data-theme="dark"] .media-filters .chip:focus,
[data-theme="dark"] .media-filters .pill:focus,
[data-theme="dark"] .media-filters .tab:focus,
[data-theme="dark"] .media-nav button:focus,
[data-theme="dark"] .media-nav .btn:focus,
[data-theme="dark"] .filters button:focus,
[data-theme="dark"] .filters .btn:focus,
[data-theme="dark"] .filters a:focus,
[data-theme="dark"] .tabs button:focus,
[data-theme="dark"] .tabs .tab:focus,
[data-theme="dark"] .segmented-control button:focus {
  background: var(--teal) !important;   /* Teal #009B77 */
  color: #FFFFFF !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(0,155,119,.35) !important; /* focus ring */
}

/* Active/Selected states: keep teal + white text for readability */
[data-theme="dark"] .media-filters [aria-pressed="true"],
[data-theme="dark"] .media-filters .is-active,
[data-theme="dark"] .media-filters .active,
[data-theme="dark"] .media-filters .selected,
[data-theme="dark"] .media-nav [aria-pressed="true"],
[data-theme="dark"] .media-nav .is-active,
[data-theme="dark"] .media-nav .active,
[data-theme="dark"] .filters [aria-pressed="true"],
[data-theme="dark"] .filters .is-active,
[data-theme="dark"] .filters .active,
[data-theme="dark"] .tabs [aria-pressed="true"],
[data-theme="dark"] .tabs .is-active,
[data-theme="dark"] .tabs .active,
[data-theme="dark"] .segmented-control [aria-pressed="true"],
[data-theme="dark"] .segmented-control .is-active,
[data-theme="dark"] .segmented-control .active {
  background: var(--teal) !important;   /* Teal #009B77 */
  color: #FFFFFF !important;
  border-color: var(--teal) !important;
}

/* === DARK MODE: Biblical References page fixes (scoped) === */
[data-theme="dark"] body.bib-refs,
[data-theme="dark"] .bib-refs{
  background: var(--bg);
  color: var(--ink);
}

/* Core containers/cards */
[data-theme="dark"] body.bib-refs .card,
[data-theme="dark"] body.bib-refs .panel,
[data-theme="dark"] body.bib-refs .pane,
[data-theme="dark"] body.bib-refs .ref-card,
[data-theme="dark"] body.bib-refs .ref-item,
[data-theme="dark"] body.bib-refs .ref-list li,
[data-theme="dark"] body.bib-refs .callout,
[data-theme="dark"] body.bib-refs .note,
[data-theme="dark"] body.bib-refs .sidebar,
[data-theme="dark"] body.bib-refs .grid > * {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border-color: var(--border) !important;
  box-shadow: var(--shadow);
}

/* Typography */
[data-theme="dark"] body.bib-refs h1,
[data-theme="dark"] body.bib-refs h2,
[data-theme="dark"] body.bib-refs h3,
[data-theme="dark"] body.bib-refs h4,
[data-theme="dark"] body.bib-refs .title,
[data-theme="dark"] body.bib-refs .card-title{ color: #FFFFFF !important; }
[data-theme="dark"] body.bib-refs .kicker,
[data-theme="dark"] body.bib-refs .desc,
[data-theme="dark"] body.bib-refs .muted,
[data-theme="dark"] body.bib-refs .cite{ color: var(--muted) !important; }
[data-theme="dark"] body.bib-refs a{ color: var(--blue) !important; }

/* Filters / chips / pills / tags */
[data-theme="dark"] body.bib-refs .filters button,
[data-theme="dark"] body.bib-refs .filters .btn,
[data-theme="dark"] body.bib-refs .chip,
[data-theme="dark"] body.bib-refs .pill,
[data-theme="dark"] body.bib-refs .badge,
[data-theme="dark"] body.bib-refs .tag {
  background: var(--brand) !important;
  color: #FFFFFF !important;
  border: 1px solid var(--border) !important;
}
[data-theme="dark"] body.bib-refs .filters button:hover,
[data-theme="dark"] body.bib-refs .filters .btn:hover,
[data-theme="dark"] body.bib-refs .chip:hover,
[data-theme="dark"] body.bib-refs .pill:hover,
[data-theme="dark"] body.bib-refs .badge:hover,
[data-theme="dark"] body.bib-refs .tag:hover,
[data-theme="dark"] body.bib-refs .filters [aria-pressed="true"],
[data-theme="dark"] body.bib-refs .chip.is-active,
[data-theme="dark"] body.bib-refs .pill.is-active,
[data-theme="dark"] body.bib-refs .badge.is-active,
[data-theme="dark"] body.bib-refs .tag.is-active{
  background: var(--teal) !important;
  color: #FFFFFF !important;
  border-color: var(--teal) !important;
}

/* Tables */
[data-theme="dark"] body.bib-refs table{
  background: var(--surface) !important;
  color: var(--ink) !important;
  border: 1px solid var(--border) !important;
  border-collapse: collapse;
}
[data-theme="dark"] body.bib-refs th,
[data-theme="dark"] body.bib-refs td{
  border: 1px solid var(--border) !important;
  background: var(--surface) !important;
  color: var(--ink) !important;
}
[data-theme="dark"] body.bib-refs thead th{
  background: rgba(129,164,205,.15) !important;
  color: #FFFFFF !important;
}

/* Code/mark/kbd */
[data-theme="dark"] body.bib-refs code,
[data-theme="dark"] body.bib-refs kbd,
[data-theme="dark"] body.bib-refs mark{
  background: rgba(129,164,205,.18) !important;
  color: #FFFFFF !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px;
  padding: .1rem .35rem;
}

/* Inputs */
[data-theme="dark"] body.bib-refs input,
[data-theme="dark"] body.bib-refs select,
[data-theme="dark"] body.bib-refs textarea{
  background: var(--bg) !important;
  color: var(--ink) !important;
  border: 1px solid var(--border) !important;
}
[data-theme="dark"] body.bib-refs input::placeholder,
[data-theme="dark"] body.bib-refs textarea::placeholder{ color: var(--muted) !important; }

/* Buttons */
[data-theme="dark"] body.bib-refs button,
[data-theme="dark"] body.bib-refs .btn{
  background: var(--surface) !important;
  color: var(--ink) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow);
}
[data-theme="dark"] body.bib-refs button:hover,
[data-theme="dark"] body.bib-refs .btn:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow-hover);
  border-color: #cdd8e6;
}

/* === DARK MODE: Force all text to white on Biblical References page === */
[data-theme="dark"] body.bib-refs,
[data-theme="dark"] body.bib-refs * {
  color: #FFFFFF !important;
}

/* Placeholders also readable in dark */
[data-theme="dark"] body.bib-refs ::placeholder {
  color: rgba(255,255,255,.75) !important;
}

/* Ensure links remain white regardless of state */
[data-theme="dark"] body.bib-refs a,
[data-theme="dark"] body.bib-refs a:visited,
[data-theme="dark"] body.bib-refs a:hover,
[data-theme="dark"] body.bib-refs a:active {
  color: #FFFFFF !important;
}

/* === DARK MODE: Biblical References specific tweaks === */

/* A) A–Z bar text color: white default, orange on hover/active */
[data-theme="dark"] body.bib-refs .az-bar a,
[data-theme="dark"] body.bib-refs .az-bar button,
[data-theme="dark"] body.bib-refs .alphabet a,
[data-theme="dark"] body.bib-refs .alphabet button,
[data-theme="dark"] body.bib-refs .alpha-nav a,
[data-theme="dark"] body.bib-refs .alpha-nav button,
[data-theme="dark"] body.bib-refs .a-z a,
[data-theme="dark"] body.bib-refs .a-z button,
[data-theme="dark"] body.bib-refs .az a,
[data-theme="dark"] body.bib-refs .az button {
  color:#FFFFFF !important;
  background:var(--surface) !important;
  border-color: transparent;
}
[data-theme="dark"] body.bib-refs .az-bar a:hover,
[data-theme="dark"] body.bib-refs .az-bar button:hover,
[data-theme="dark"] body.bib-refs .alphabet a:hover,
[data-theme="dark"] body.bib-refs .alphabet button:hover,
[data-theme="dark"] body.bib-refs .alpha-nav a:hover,
[data-theme="dark"] body.bib-refs .alpha-nav button:hover,
[data-theme="dark"] body.bib-refs .a-z a:hover,
[data-theme="dark"] body.bib-refs .a-z button:hover,
[data-theme="dark"] body.bib-refs .az a:hover,
[data-theme="dark"] body.bib-refs .az button:hover,
[data-theme="dark"] body.bib-refs .az-bar [aria-pressed="true"],
[data-theme="dark"] body.bib-refs .alphabet .active,
[data-theme="dark"] body.bib-refs .alpha-nav .active,
[data-theme="dark"] body.bib-refs .a-z .active,
[data-theme="dark"] body.bib-refs .az .active {
  color: var(--accent) !important; /* Orange */
}

/* B) Remove stray white bands: keep wrappers same as dark background */
[data-theme="dark"] body.bib-refs main,
[data-theme="dark"] body.bib-refs .container,
[data-theme="dark"] body.bib-refs .wrap,
[data-theme="dark"] body.bib-refs .content,
[data-theme="dark"] body.bib-refs section,
[data-theme="dark"] body.bib-refs .section {
  background: var(--bg) !important;
}

/* C) Search bar: dark navy background + white text */
[data-theme="dark"] body.bib-refs input[type="search"],
[data-theme="dark"] body.bib-refs .search input[type="text"],
[data-theme="dark"] body.bib-refs .search-bar input,
[data-theme="dark"] body.bib-refs .ref-search input {
  background: var(--brand) !important;   /* Navy #054A91 */
  color: #FFFFFF !important;
  border: 1px solid var(--border) !important;
}
[data-theme="dark"] body.bib-refs input[type="search"]::placeholder,
[data-theme="dark"] body.bib-refs .search input[type="text"]::placeholder,
[data-theme="dark"] body.bib-refs .search-bar input::placeholder,
[data-theme="dark"] body.bib-refs .ref-search input::placeholder {
  color: rgba(255,255,255,.8) !important;
}

/* === DARK MODE: Articles page (scoped to .articles-page) === */
[data-theme="dark"] body.articles-page,
[data-theme="dark"] .articles-page {
  background: var(--bg);
  color: var(--ink);
}

[data-theme="dark"] body.articles-page main,
[data-theme="dark"] body.articles-page .container,
[data-theme="dark"] body.articles-page .wrap,
[data-theme="dark"] body.articles-page section,
[data-theme="dark"] body.articles-page .grid > *,
[data-theme="dark"] body.articles-page .card,
[data-theme="dark"] body.articles-page .post-card,
[data-theme="dark"] body.articles-page .article-card,
[data-theme="dark"] body.articles-page .pane,
[data-theme="dark"] body.articles-page .panel,
[data-theme="dark"] body.articles-page .sidebar {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border-color: var(--border) !important;
  box-shadow: var(--shadow);
}

[data-theme="dark"] body.articles-page h1,
[data-theme="dark"] body.articles-page h2,
[data-theme="dark"] body.articles-page h3,
[data-theme="dark"] body.articles-page h4,
[data-theme="dark"] body.articles-page .title,
[data-theme="dark"] body.articles-page .card-title,
[data-theme="dark"] body.articles-page .post-card .title,
[data-theme="dark"] body.articles-page .article-card .title {
  color:#FFFFFF !important;
}

[data-theme="dark"] body.articles-page .kicker,
[data-theme="dark"] body.articles-page .meta,
[data-theme="dark"] body.articles-page .desc,
[data-theme="dark"] body.articles-page .excerpt,
[data-theme="dark"] body.articles-page .muted,
[data-theme="dark"] body.articles-page .cite {
  color: var(--muted) !important;
}

[data-theme="dark"] body.articles-page a { color: var(--blue) !important; }

[data-theme="dark"] body.articles-page .search input[type="search"],
[data-theme="dark"] body.articles-page .search input[type="text"],
[data-theme="dark"] body.articles-page .search-bar input,
[data-theme="dark"] body.articles-page .article-search input {
  background: var(--brand) !important;
  color: #FFFFFF !important;
  border: 1px solid var(--border) !important;
}
[data-theme="dark"] body.articles-page .search input::placeholder,
[data-theme="dark"] body.articles-page .search-bar input::placeholder,
[data-theme="dark"] body.articles-page .article-search input::placeholder {
  color: rgba(255,255,255,.85) !important;
}

[data-theme="dark"] body.articles-page .filters button,
[data-theme="dark"] body.articles-page .filters .btn,
[data-theme="dark"] body.articles-page .chip,
[data-theme="dark"] body.articles-page .pill,
[data-theme="dark"] body.articles-page .tab,
[data-theme="dark"] body.articles-page .tag {
  background: var(--brand) !important;
  color: #FFFFFF !important;
  border: 1px solid var(--border) !important;
}
[data-theme="dark"] body.articles-page .filters button:hover,
[data-theme="dark"] body.articles-page .filters .btn:hover,
[data-theme="dark"] body.articles-page .chip:hover,
[data-theme="dark"] body.articles-page .pill:hover,
[data-theme="dark"] body.articles-page .tab:hover,
[data-theme="dark"] body.articles-page .tag:hover,
[data-theme="dark"] body.articles-page .filters [aria-pressed="true"],
[data-theme="dark"] body.articles-page .chip.is-active,
[data-theme="dark"] body.articles-page .pill.is-active,
[data-theme="dark"] body.articles-page .tab.is-active,
[data-theme="dark"] body.articles-page .tag.is-active {
  background: var(--teal) !important;
  color:#FFFFFF !important;
  border-color: var(--teal) !important;
  box-shadow: 0 0 0 3px rgba(0,155,119,.28);
}

[data-theme="dark"] body.articles-page .pagination a,
[data-theme="dark"] body.articles-page .pagination button {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border: 1px solid var(--border) !important;
}
[data-theme="dark"] body.articles-page .pagination .active,
[data-theme="dark"] body.articles-page .pagination [aria-current="page"] {
  background: var(--teal) !important;
  color: #FFFFFF !important;
  border-color: var(--teal) !important;
}

[data-theme="dark"] body.articles-page table { background: var(--surface) !important; color: var(--ink) !important; border:1px solid var(--border) !important; }
[data-theme="dark"] body.articles-page th, 
[data-theme="dark"] body.articles-page td { border:1px solid var(--border) !important; }
[data-theme="dark"] body.articles-page blockquote { background: rgba(129,164,205,.14) !important; color:#FFFFFF !important; border-left:4px solid var(--blue); }
[data-theme="dark"] body.articles-page code, 
[data-theme="dark"] body.articles-page kbd, 
[data-theme="dark"] body.articles-page mark {
  background: rgba(129,164,205,.18) !important; color:#FFFFFF !important; border:1px solid var(--border) !important; border-radius:6px; padding:.1rem .35rem;
}

[data-theme="dark"] body.articles-page button,
[data-theme="dark"] body.articles-page .btn {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow);
}
[data-theme="dark"] body.articles-page button:hover,
[data-theme="dark"] body.articles-page .btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-hover);
  border-color: #cdd8e6;
}

/* === DARK MODE FIXES: Articles page author/footer/excerpt === */

/* A) Author name (and byline) in article footers must be white in dark mode */
[data-theme="dark"] body.articles-page .author,
[data-theme="dark"] body.articles-page .byline,
[data-theme="dark"] body.articles-page [class*="author"],
[data-theme="dark"] body.articles-page .card-footer .meta,
[data-theme="dark"] body.articles-page .post-card footer .meta,
[data-theme="dark"] body.articles-page .article-card footer .meta {
  color:#FFFFFF !important;
}
[data-theme="dark"] body.articles-page .author a,
[data-theme="dark"] body.articles-page .byline a,
[data-theme="dark"] body.articles-page [class*="author"] a {
  color:#FFFFFF !important;
}

/* B) Featured card excerpt uses dark-mode surface background + readable text */
[data-theme="dark"] body.articles-page .featured .excerpt,
[data-theme="dark"] body.articles-page .feature .excerpt,
[data-theme="dark"] body.articles-page .hero .excerpt,
[data-theme="dark"] body.articles-page .lead .excerpt,
[data-theme="dark"] body.articles-page .post-card.featured .excerpt,
[data-theme="dark"] body.articles-page .article-card.featured .excerpt {
  background:var(--surface) !important;
  color:var(--ink) !important;
  border-color:var(--border) !important;
}

/* C) Card footers adapt to dark mode palette (covers all, incl. 2nd featured) */
[data-theme="dark"] body.articles-page .card-footer,
[data-theme="dark"] body.articles-page .post-card footer,
[data-theme="dark"] body.articles-page .article-card footer {
  background:var(--surface) !important;
  color:var(--ink) !important;
  border-top:1px solid var(--border) !important;
}

/* === DARK MODE: Articles page — force the LARGE FEATURED card excerpt to adopt dark palette === */

/* Ensure the featured card's text container uses dark surface */
[data-theme="dark"] body.articles-page .featured .card-body,
[data-theme="dark"] body.articles-page .feature .card-body,
[data-theme="dark"] body.articles-page [class*="feature"] .card-body,
[data-theme="dark"] body.articles-page [class*="hero"] .card-body,
[data-theme="dark"] body.articles-page [class*="lead"] .card-body {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border-color: var(--border) !important;
}

/* Target common excerpt/summary blocks inside the featured card */
[data-theme="dark"] body.articles-page .featured .excerpt,
[data-theme="dark"] body.articles-page .feature .excerpt,
[data-theme="dark"] body.articles-page [class*="feature"] .excerpt,
[data-theme="dark"] body.articles-page [class*="hero"] .excerpt,
[data-theme="dark"] body.articles-page [class*="lead"] .excerpt,
[data-theme="dark"] body.articles-page .featured .summary,
[data-theme="dark"] body.articles-page .feature .summary,
[data-theme="dark"] body.articles-page [class*="feature"] .summary,
[data-theme="dark"] body.articles-page [class*="hero"] .summary,
[data-theme="dark"] body.articles-page [class*="lead"] .summary,
[data-theme="dark"] body.articles-page .featured .desc,
[data-theme="dark"] body.articles-page .feature .desc,
[data-theme="dark"] body.articles-page [class*="feature"] .desc,
[data-theme="dark"] body.articles-page [class*="hero"] .desc,
[data-theme="dark"] body.articles-page [class*="lead"] .desc,
[data-theme="dark"] body.articles-page .featured .intro,
[data-theme="dark"] body.articles-page .feature .intro,
[data-theme="dark"] body.articles-page [class*="feature"] .intro,
[data-theme="dark"] body.articles-page [class*="hero"] .intro,
[data-theme="dark"] body.articles-page [class*="lead"] .intro,
[data-theme="dark"] body.articles-page .featured .card-text,
[data-theme="dark"] body.articles-page .feature .card-text,
[data-theme="dark"] body.articles-page [class*="feature"] .card-text,
[data-theme="dark"] body.articles-page [class*="hero"] .card-text,
[data-theme="dark"] body.articles-page [class*="lead"] .card-text {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border-color: var(--border) !important;
}

/* If the featured block itself paints a white background, override it */
[data-theme="dark"] body.articles-page .featured,
[data-theme="dark"] body.articles-page .feature,
[data-theme="dark"] body.articles-page [class*="feature-block"],
[data-theme="dark"] body.articles-page [class*="hero-block"],
[data-theme="dark"] body.articles-page [class*="lead-block"]{
  background: var(--surface) !important;
}

/* Keep images unaffected */
[data-theme="dark"] body.articles-page .featured img,
[data-theme="dark"] body.articles-page .feature img,
[data-theme="dark"] body.articles-page [class*="feature"] img { background:var(--surface) !important; }

/* === DARK MODE: FORCE FEATURED EXCERPT TO ADAPT (Articles page) === */
/* Ultra-specific overrides to beat inline/legacy styles */

[data-theme="dark"] body.articles-page .featured,
[data-theme="dark"] body.articles-page .feature,
[data-theme="dark"] body.articles-page [class*="feature"]{
  background: var(--surface) !important;
  color: var(--ink) !important;
  border-color: var(--border) !important;
}

/* Excerpt/summary containers */
[data-theme="dark"] body.articles-page .featured .excerpt,
[data-theme="dark"] body.articles-page .feature .excerpt,
[data-theme="dark"] body.articles-page [class*="feature"] .excerpt,
[data-theme="dark"] body.articles-page [class*="feature"] [class*="excerpt"],
[data-theme="dark"] body.articles-page .featured .summary,
[data-theme="dark"] body.articles-page .feature .summary,
[data-theme="dark"] body.articles-page [class*="feature"] .summary,
[data-theme="dark"] body.articles-page [class*="feature"] [class*="summary"],
/* guard for possible misspelling 'except' */
[data-theme="dark"] body.articles-page .featured .except,
[data-theme="dark"] body.articles-page .feature .except,
[data-theme="dark"] body.articles-page [class*="feature"] .except,
[data-theme="dark"] body.articles-page [class*="feature"] [class*="except"]{
  background: var(--surface) !important;
  color: var(--ink) !important;
  border-color: var(--border) !important;
}

/* Text inside the excerpt/summary */
[data-theme="dark"] body.articles-page .featured .excerpt *,
[data-theme="dark"] body.articles-page .feature .excerpt *,
[data-theme="dark"] body.articles-page [class*="feature"] .excerpt *,
[data-theme="dark"] body.articles-page [class*="feature"] [class*="excerpt"] *,
[data-theme="dark"] body.articles-page .featured .summary *,
[data-theme="dark"] body.articles-page .feature .summary *,
[data-theme="dark"] body.articles-page [class*="feature"] .summary *,
[data-theme="dark"] body.articles-page [class*="feature"] [class*="summary"] *,
[data-theme="dark"] body.articles-page .featured .except *,
[data-theme="dark"] body.articles-page .feature .except *,
[data-theme="dark"] body.articles-page [class*="feature"] .except *,
[data-theme="dark"] body.articles-page [class*="feature"] [class*="except"] *{
  color: var(--ink) !important;
}

/* Featured card body/footer wrappers */
[data-theme="dark"] body.articles-page .featured .card-body,
[data-theme="dark"] body.articles-page .feature .card-body,
[data-theme="dark"] body.articles-page [class*="feature"] .card-body,
[data-theme="dark"] body.articles-page .featured .card-footer,
[data-theme="dark"] body.articles-page .feature .card-footer,
[data-theme="dark"] body.articles-page [class*="feature"] .card-footer{
  background: var(--surface) !important;
  color: var(--ink) !important;
  border-color: var(--border) !important;
}

/* If an overlay/figure/caption paints white, neutralize it */
[data-theme="dark"] body.articles-page .featured .overlay,
[data-theme="dark"] body.articles-page .feature .overlay,
[data-theme="dark"] body.articles-page [class*="feature"] .overlay,
[data-theme="dark"] body.articles-page .featured figcaption,
[data-theme="dark"] body.articles-page .feature figcaption,
[data-theme="dark"] body.articles-page [class*="feature"] figcaption{
  background:var(--surface) !important;
  color: var(--ink) !important;
}

/* Safety: any element whose inline style forces white background inside featured */
[data-theme="dark"] body.articles-page [class*="feature"] [style*="background:var(--surface)"],
[data-theme="dark"] body.articles-page [class*="feature"] [style*="background: #fff"],
[data-theme="dark"] body.articles-page [class*="feature"] [style*="background:white"]{
  background: var(--surface) !important;
  color: var(--ink) !important;
}

/* === DARK MODE: Articles page — make all excerpt text readable (white) === */
[data-theme="dark"] body.articles-page .excerpt,
[data-theme="dark"] body.articles-page .excerpt *,
[data-theme="dark"] body.articles-page .post-card .excerpt,
[data-theme="dark"] body.articles-page .article-card .excerpt,
[data-theme="dark"] body.articles-page .card .excerpt,
[data-theme="dark"] body.articles-page .summary,
[data-theme="dark"] body.articles-page .summary *,
[data-theme="dark"] body.articles-page .desc,
[data-theme="dark"] body.articles-page .desc *,
[data-theme="dark"] body.articles-page .intro,
[data-theme="dark"] body.articles-page .intro *,
[data-theme="dark"] body.articles-page .card-text,
[data-theme="dark"] body.articles-page .card-text *{
  color:#FFFFFF !important;
}

/* === DARK MODE: Articles page — FORCE ALL CARD TEXT (titles/excerpts/dates/meta) TO WHITE === */
[data-theme="dark"] body.articles-page .card .card-title,
[data-theme="dark"] body.articles-page .card .title,
[data-theme="dark"] body.articles-page .post-card .title,
[data-theme="dark"] body.articles-page .article-card .title,
[data-theme="dark"] body.articles-page .card h1,
[data-theme="dark"] body.articles-page .card h2,
[data-theme="dark"] body.articles-page .card h3,
[data-theme="dark"] body.articles-page .card h4,
[data-theme="dark"] body.articles-page .card h5,
[data-theme="dark"] body.articles-page .card h6,
[data-theme="dark"] body.articles-page .card .excerpt,
[data-theme="dark"] body.articles-page .card .excerpt *,
[data-theme="dark"] body.articles-page .card .summary,
[data-theme="dark"] body.articles-page .card .summary *,
[data-theme="dark"] body.articles-page .card .desc,
[data-theme="dark"] body.articles-page .card .desc *,
[data-theme="dark"] body.articles-page .card .intro,
[data-theme="dark"] body.articles-page .card .intro *,
[data-theme="dark"] body.articles-page .card p,
[data-theme="dark"] body.articles-page .card li,
[data-theme="dark"] body.articles-page .card .meta,
[data-theme="dark"] body.articles-page .card .meta *,
[data-theme="dark"] body.articles-page .card .byline,
[data-theme="dark"] body.articles-page .card .byline *,
[data-theme="dark"] body.articles-page .card .author,
[data-theme="dark"] body.articles-page .card .author *,
[data-theme="dark"] body.articles-page .card .date,
[data-theme="dark"] body.articles-page .card time,
[data-theme="dark"] body.articles-page .card footer,
[data-theme="dark"] body.articles-page .card footer * {
  color:#FFFFFF !important;
}

/* Ensure links inside titles/excerpts are white too */
[data-theme="dark"] body.articles-page .card .title a,
[data-theme="dark"] body.articles-page .card .excerpt a,
[data-theme="dark"] body.articles-page .card .desc a,
[data-theme="dark"] body.articles-page .card .meta a,
[data-theme="dark"] body.articles-page .card .byline a,
[data-theme="dark"] body.articles-page .card .author a,
[data-theme="dark"] body.articles-page .card .date a {
  color:#FFFFFF !important;
}

/* Safety: if any inline style forces dark text inside cards, override to white */
[data-theme="dark"] body.articles-page .card [style*="color:#000"],
[data-theme="dark"] body.articles-page .card [style*="color: #000"],
[data-theme="dark"] body.articles-page .card [style*="color:black"]{
  color:#FFFFFF !important;
}

/* === DARK MODE: Articles page — FORCE ALL CARD TEXT (titles/excerpts/dates/meta) TO WHITE === */
[data-theme="dark"] body.articles-page .card .card-title,
[data-theme="dark"] body.articles-page .card .title,
[data-theme="dark"] body.articles-page .post-card .title,
[data-theme="dark"] body.articles-page .article-card .title,
[data-theme="dark"] body.articles-page .card h1,
[data-theme="dark"] body.articles-page .card h2,
[data-theme="dark"] body.articles-page .card h3,
[data-theme="dark"] body.articles-page .card h4,
[data-theme="dark"] body.articles-page .card h5,
[data-theme="dark"] body.articles-page .card h6,
[data-theme="dark"] body.articles-page .card .excerpt,
[data-theme="dark"] body.articles-page .card .excerpt *,
[data-theme="dark"] body.articles-page .card .summary,
[data-theme="dark"] body.articles-page .card .summary *,
[data-theme="dark"] body.articles-page .card .desc,
[data-theme="dark"] body.articles-page .card .desc *,
[data-theme="dark"] body.articles-page .card .intro,
[data-theme="dark"] body.articles-page .card .intro *,
[data-theme="dark"] body.articles-page .card p,
[data-theme="dark"] body.articles-page .card li,
[data-theme="dark"] body.articles-page .card .meta,
[data-theme="dark"] body.articles-page .card .meta *,
[data-theme="dark"] body.articles-page .card .byline,
[data-theme="dark"] body.articles-page .card .byline *,
[data-theme="dark"] body.articles-page .card .author,
[data-theme="dark"] body.articles-page .card .author *,
[data-theme="dark"] body.articles-page .card .date,
[data-theme="dark"] body.articles-page .card time,
[data-theme="dark"] body.articles-page .card footer,
[data-theme="dark"] body.articles-page .card footer * {
  color:#FFFFFF !important;
}

/* Ensure links inside titles/excerpts are white too */
[data-theme="dark"] body.articles-page .card .title a,
[data-theme="dark"] body.articles-page .card .excerpt a,
[data-theme="dark"] body.articles-page .card .desc a,
[data-theme="dark"] body.articles-page .card .meta a,
[data-theme="dark"] body.articles-page .card .byline a,
[data-theme="dark"] body.articles-page .card .author a,
[data-theme="dark"] body.articles-page .card .date a {
  color:#FFFFFF !important;
}

/* Safety: if any inline style forces dark text inside cards, override to white */
[data-theme="dark"] body.articles-page .card [style*="color:#000"],
[data-theme="dark"] body.articles-page .card [style*="color: #000"],
[data-theme="dark"] body.articles-page .card [style*="color:black"]{
  color:#FFFFFF !important;
}

/* === DARK MODE: Articles page — FORCE ALL CARD TEXT (titles/excerpts/dates/meta) TO WHITE === */
[data-theme="dark"] body.articles-page .card .card-title,
[data-theme="dark"] body.articles-page .card .title,
[data-theme="dark"] body.articles-page .post-card .title,
[data-theme="dark"] body.articles-page .article-card .title,
[data-theme="dark"] body.articles-page .card h1,
[data-theme="dark"] body.articles-page .card h2,
[data-theme="dark"] body.articles-page .card h3,
[data-theme="dark"] body.articles-page .card h4,
[data-theme="dark"] body.articles-page .card h5,
[data-theme="dark"] body.articles-page .card h6,
[data-theme="dark"] body.articles-page .card .excerpt,
[data-theme="dark"] body.articles-page .card .excerpt *,
[data-theme="dark"] body.articles-page .card .summary,
[data-theme="dark"] body.articles-page .card .summary *,
[data-theme="dark"] body.articles-page .card .desc,
[data-theme="dark"] body.articles-page .card .desc *,
[data-theme="dark"] body.articles-page .card .intro,
[data-theme="dark"] body.articles-page .card .intro *,
[data-theme="dark"] body.articles-page .card p,
[data-theme="dark"] body.articles-page .card li,
[data-theme="dark"] body.articles-page .card .meta,
[data-theme="dark"] body.articles-page .card .meta *,
[data-theme="dark"] body.articles-page .card .byline,
[data-theme="dark"] body.articles-page .card .byline *,
[data-theme="dark"] body.articles-page .card .author,
[data-theme="dark"] body.articles-page .card .author *,
[data-theme="dark"] body.articles-page .card .date,
[data-theme="dark"] body.articles-page .card time,
[data-theme="dark"] body.articles-page .card footer,
[data-theme="dark"] body.articles-page .card footer * {
  color:#FFFFFF !important;
}

/* Ensure links inside titles/excerpts are white too */
[data-theme="dark"] body.articles-page .card .title a,
[data-theme="dark"] body.articles-page .card .excerpt a,
[data-theme="dark"] body.articles-page .card .desc a,
[data-theme="dark"] body.articles-page .card .meta a,
[data-theme="dark"] body.articles-page .card .byline a,
[data-theme="dark"] body.articles-page .card .author a,
[data-theme="dark"] body.articles-page .card .date a {
  color:#FFFFFF !important;
}

/* Safety: if any inline style forces dark text inside cards, override to white */
[data-theme="dark"] body.articles-page .card [style*="color:#000"],
[data-theme="dark"] body.articles-page .card [style*="color: #000"],
[data-theme="dark"] body.articles-page .card [style*="color:black"]{
  color:#FFFFFF !important;
}

/* === DARK MODE: Articles page — FORCE Recent Articles & Large Featured excerpts to white === */

/* Scope to Articles page for safety */
[data-theme="dark"][data-page="articles"] .recent,
[data-theme="dark"][data-page="articles"] .recent-articles,
[data-theme="dark"][data-page="articles"] [class*="recent"]{
  background: var(--bg) !important;
  color: #FFFFFF !important;
}

/* Recent Articles: titles, excerpts, meta/dates -> white */
[data-theme="dark"][data-page="articles"] [class*="recent"] .card .title,
[data-theme="dark"][data-page="articles"] [class*="recent"] .card .card-title,
[data-theme="dark"][data-page="articles"] [class*="recent"] .card h1,
[data-theme="dark"][data-page="articles"] [class*="recent"] .card h2,
[data-theme="dark"][data-page="articles"] [class*="recent"] .card h3,
[data-theme="dark"][data-page="articles"] [class*="recent"] .card h4,
[data-theme="dark"][data-page="articles"] [class*="recent"] .card h5,
[data-theme="dark"][data-page="articles"] [class*="recent"] .card h6,
[data-theme="dark"][data-page="articles"] [class*="recent"] .card .excerpt,
[data-theme="dark"][data-page="articles"] [class*="recent"] .card .excerpt *,
[data-theme="dark"][data-page="articles"] [class*="recent"] .card .summary,
[data-theme="dark"][data-page="articles"] [class*="recent"] .card .summary *,
[data-theme="dark"][data-page="articles"] [class*="recent"] .card .desc,
[data-theme="dark"][data-page="articles"] [class*="recent"] .card .desc *,
[data-theme="dark"][data-page="articles"] [class*="recent"] .card .intro,
[data-theme="dark"][data-page="articles"] [class*="recent"] .card .intro *,
[data-theme="dark"][data-page="articles"] [class*="recent"] .card p,
[data-theme="dark"][data-page="articles"] [class*="recent"] .card li,
[data-theme="dark"][data-page="articles"] [class*="recent"] .card .meta,
[data-theme="dark"][data-page="articles"] [class*="recent"] .card .meta *,
[data-theme="dark"][data-page="articles"] [class*="recent"] .card .date,
[data-theme="dark"][data-page="articles"] [class*="recent"] .card time {
  color:#FFFFFF !important;
}

/* Large Featured: ensure excerpt + body/footer adopt dark palette and white text */
[data-theme="dark"][data-page="articles"] .featured,
[data-theme="dark"][data-page="articles"] .feature,
[data-theme="dark"][data-page="articles"] [class*="feature"]{
  background: var(--surface) !important;
  color: #FFFFFF !important;
  border-color: var(--border) !important;
}
[data-theme="dark"][data-page="articles"] .featured .card-body,
[data-theme="dark"][data-page="articles"] .feature .card-body,
[data-theme="dark"][data-page="articles"] [class*="feature"] .card-body,
[data-theme="dark"][data-page="articles"] .featured .card-footer,
[data-theme="dark"][data-page="articles"] .feature .card-footer,
[data-theme="dark"][data-page="articles"] [class*="feature"] .card-footer{
  background: var(--surface) !important;
  color: #FFFFFF !important;
  border-color: var(--border) !important;
}
[data-theme="dark"][data-page="articles"] .featured .excerpt,
[data-theme="dark"][data-page="articles"] .feature .excerpt,
[data-theme="dark"][data-page="articles"] [class*="feature"] .excerpt,
[data-theme="dark"][data-page="articles"] [class*="feature"] [class*="excerpt"],
[data-theme="dark"][data-page="articles"] .featured .summary,
[data-theme="dark"][data-page="articles"] .feature .summary,
[data-theme="dark"][data-page="articles"] [class*="feature"] .summary,
[data-theme="dark"][data-page="articles"] [class*="feature"] [class*="summary"],
[data-theme="dark"][data-page="articles"] .featured .desc,
[data-theme="dark"][data-page="articles"] .feature .desc,
[data-theme="dark"][data-page="articles"] [class*="feature"] .desc,
[data-theme="dark"][data-page="articles"] [class*="feature"] [class*="desc"],
[data-theme="dark"][data-page="articles"] .featured .intro,
[data-theme="dark"][data-page="articles"] .feature .intro,
[data-theme="dark"][data-page="articles"] [class*="feature"] .intro,
[data-theme="dark"][data-page="articles"] [class*="feature"] [class*="intro"],
[data-theme="dark"][data-page="articles"] .featured .card-text,
[data-theme="dark"][data-page="articles"] .feature .card-text,
[data-theme="dark"][data-page="articles"] [class*="feature"] .card-text {
  background: var(--surface) !important;
  color: #FFFFFF !important;
  border-color: var(--border) !important;
}

/* Links inside excerpts/titles also white */
[data-theme="dark"][data-page="articles"] .card .title a,
[data-theme="dark"][data-page="articles"] .card .excerpt a,
[data-theme="dark"][data-page="articles"] .card .desc a,
[data-theme="dark"][data-page="articles"] .card .meta a,
[data-theme="dark"][data-page="articles"] .card time a{
  color:#FFFFFF !important;
}

/* Dark mode: 'Featured' header on Articles page must be white */
[data-theme="dark"] body.articles-page #featured-articles h1,
[data-theme="dark"] body.articles-page #featured-articles h2,
[data-theme="dark"] body.articles-page #featured-articles .section-title{
  color:#FFFFFF !important;
}
/* ===== ARTICLE PAGES: dark-mode hard overrides (consistent with site tokens) ===== */
[data-theme="dark"] body.article-doc,
[data-theme="dark"] .article-page{
  background: var(--bg);
  color:#FFFFFF !important;
}
[data-theme="dark"] body.article-doc .article-shell,
[data-theme="dark"] body.article-doc .article-head,
[data-theme="dark"] body.article-doc .article-byline,
[data-theme="dark"] body.article-doc .article-share,
[data-theme="dark"] body.article-doc .article-content,
[data-theme="dark"] body.article-doc .refs{
  background:var(--surface) !important;
  color:#FFFFFF !important;
}
[data-theme="dark"] body.article-doc .article-title,
[data-theme="dark"] body.article-doc h1,
[data-theme="dark"] body.article-doc h2,
[data-theme="dark"] body.article-doc h3,
[data-theme="dark"] body.article-doc h4{
  color:#FFFFFF !important;
}
[data-theme="dark"] body.article-doc .article-date,
[data-theme="dark"] body.article-doc .byline-meta,
[data-theme="dark"] body.article-doc .muted{
  color:rgba(255,255,255,.9) !important;
}
[data-theme="dark"] body.article-doc .article-content a{
  color:#FFFFFF !important;
  text-decoration-color: rgba(255,255,255,.6) !important;
}
[data-theme="dark"] body.article-doc .share-btn{
  background: var(--surface) !important;
  color:#FFFFFF !important;
  border:1px solid var(--border) !important;
}
[data-theme="dark"] body.article-doc .verse{ color:#FFFFFF !important; }
[data-theme="dark"] body.article-doc .verse:hover::after{
  background: var(--surface) !important;
  color:#FFFFFF !important;
  border:1px solid var(--border) !important;
}
[data-theme="dark"] body.article-doc .article-content blockquote{
  background: rgba(129,164,205,.14) !important;
  color:#FFFFFF !important;
  border-left:4px solid var(--accent) !important;
  border-radius:8px;
}
[data-theme="dark"] body.article-doc .refs,
[data-theme="dark"] body.article-doc .refs *{
  color:#FFFFFF !important;
  border-color: var(--border) !important;
}

/* --- Fix: Verse spans should not have white blocks; adapt to dark mode --- */
.verse{background:transparent!important;padding:0!important;border:0!important;box-shadow:none!important;display:inline!important;}
[data-theme="dark"] .verse{color:#FFFFFF!important;}
[data-theme="dark"] /* Verse refs + hover card (article pages) */
.verse{ background:transparent!important; padding:0!important; border:0!important; box-shadow:none!important; display:inline!important; color:var(--brand); font-weight:600; cursor:help; text-decoration:underline dotted; }
html[data-theme="dark"] .verse{ color:#FFFFFF; }

#verse-card{
  position:absolute; z-index:1000;
  background:var(--surface); color:var(--ink);
  border:1px solid var(--border); border-radius:12px;
  box-shadow:0 12px 32px rgba(0,0,0,.18);
  padding:10px 12px; width:min(420px,92vw);
}
#verse-card .vc-head{ font-weight:800; margin:0 0 6px; color:var(--brand); }
#verse-card .vc-text{ font-size:.95rem; line-height:1.55; }

html[data-theme="dark"] #verse-card{
  background:#1f2e44; color:#FFFFFF;
  border-color:rgba(255,255,255,.15);
  box-shadow:0 16px 40px rgba(0,0,0,.6);
}
html[data-theme="dark"] #verse-card .vc-head{ color:#81A4CD; }
/* Remove underline/link look from all inline Bible citations */
.verse,
.verse a {
  text-decoration: none !important;
  border-bottom: none !important;
  color: inherit !important;   /* no “link blue” */
  cursor: help;                /* keep tooltip cue */
}

/* Keep tooltip behavior exactly as-is */
/* Clean, non-link look for citations */
.verse, .verse a {
  text-decoration: none !important;
  border-bottom: none !important;
  color: inherit !important;
  cursor: help;
  position: relative;
}

/* Hover card with actual Scripture text pulled by verses.js */
.verse:hover::after{ opacity:1; transform:translateY(0); }

/* Dark mode hover card */
html[data-theme="dark"] /* Hover card for Bible refs */
#bible-hovercard {
  position: absolute;
  max-width: 520px;
  z-index: 9999;
  background: var(--white, #fff);
  color: var(--ink, #0b2340);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  padding: 10px;
  transition: opacity .12s ease;
  opacity: 0;
}
#bible-hovercard .bh-inner{ padding: 8px 10px 10px; }
#bible-hovercard .bh-header{
  display:flex; align-items:center; justify-content:space-between;
  font-weight:600; margin-bottom:6px;
}
#bible-hovercard .bh-ref{ color: var(--brand, #054A91); }
#bible-hovercard .bh-close{
  background:var(--surface); border: 0; font-size: 20px; line-height: 1;
  color: var(--muted, #6b7280); cursor: pointer; border-radius: 50%;
  width: 28px; height: 28px;
}
#bible-hovercard .bh-section{ margin: 8px 0; }
#bible-hovercard .bh-label{
  font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted, #6b7280); margin-bottom: 4px;
}
#bible-hovercard .bh-text{ font-size: 14px; line-height: 1.45; }
#bible-hovercard .vr{
  display:inline-block; min-width: 1.75em; font-weight: 600; color: var(--accent, #F17300);
}
a.bible-ref{
  color: var(--brand, #054A91);
  border-bottom: 1px dotted currentColor;
  text-decoration: none;
}
a.bible-ref:hover{ color: var(--accent, #F17300); }
@media (prefers-color-scheme: dark){
  #bible-hovercard{
    background: #0b1220; color: #e6e8ee; border-color: rgba(255,255,255,.08);
    box-shadow: 0 10px 30px rgba(0,0,0,.6);
  }
  #bible-hovercard .bh-ref{ color: #81A4CD; }
  a.bible-ref{ color: #81A4CD; }
  a.bible-ref:hover{ color: #F17300; }
}
/* Update verse hover styling */
.verse {
  position: relative;
  text-decoration: underline dotted;
  cursor: pointer;   /* finger pointing hand instead of help/question mark */
  color: var(--brand);
  font-weight: 600;
}
/* Ensure Bible verse citations use hand cursor */
.verse {
  position: relative;
  text-decoration: underline dotted;
  cursor: pointer !important;  /* force override */
  color: var(--brand);
  font-weight: 600;
}

/* Keep footnote references normal (superscripts, numbers) */
.footnote-ref,
.footnote-ref sup {
  cursor: auto !important;   /* or 'default' if you prefer */
}
/* Bible verse citations */
.verse,
a.bible-ref {
  position: relative;
  text-decoration: underline dotted;
  cursor: pointer !important;   /* finger hand cursor */
  color: var(--brand);
  font-weight: 600;
}

/* Keep footnotes and bibliography numbers normal */
.footnote-ref,
.footnote-ref sup {
  cursor: auto !important;      /* arrow cursor */
}
/* Make Bible refs feel like “reftagger” */
.reftag, .verse, a.bible-ref { cursor: pointer; text-decoration: underline; text-decoration-style: dotted; }
.reftag:hover, .verse:hover, a.bible-ref:hover { color: var(--accent, #F17300); }
/* Chapter view (verse wrappers) */
#chapter-root .chapter-title{
  margin:.25rem 0 1rem;
  font-family:var(--ff-serif, "Adobe Garamond Pro", serif);
  font-weight:900;
  color:var(--ink,#0b2340);
}
#chapter-root .verselist{
  display:block;
  margin:16px 0 32px;
}
#chapter-root .verse-wrap{
  display:block;
  margin:0 0 1rem 0;        /* spacing between verses */
  padding:.75rem .75rem;
  border:1px solid var(--border, rgba(0,0,0,.12));
  border-radius:10px;
  background:var(--surface,#ffffff);
}
#chapter-root .verse-head{
  margin:0 0 .25rem 0;
}
#chapter-root .verse-num{
  font-weight:800;
  color:var(--accent,#F17300);
  margin-right:.5rem;
}
#chapter-root .verse-body{
  display:flex;
  flex-direction:column;
  gap:.45rem;
}
#chapter-root .verse-text{
  line-height:1.85;
  color:var(--ink,#0b2340);
}
#chapter-root .verse-actions{
  display:flex;
  gap:.5rem;
}
#chapter-root .btn-ghost{
  appearance:none;
  background:transparent;
  border:1px solid var(--border, rgba(0,0,0,.18));
  color:inherit;
  border-radius:8px;
  padding:.25rem .55rem;
  font-size:.85rem;
  cursor:pointer;
}
#chapter-root .btn-ghost[disabled]{
  opacity:.5; cursor:default;
}

/* Dark mode */
html[data-theme="dark"] #chapter-root .verse-wrap{
  background:#0f1a2b;
  border-color:rgba(255,255,255,.15);
}
html[data-theme="dark"] #chapter-root .verse-text{
  color:#ffffff;
}
html[data-theme="dark"] #chapter-root .btn-ghost{
  border-color:rgba(255,255,255,.2);
}
/* Verse xref preview hovercard */
#hovercard{
  position: fixed;                /* JS controls left/top */
  display: none;                  /* toggled by JS */
  max-width: min(420px, 92vw);
  background: var(--surface);
  border: 1px solid #e6ebf2;
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0,0,0,.12);
  padding: .6rem .7rem;
  font-size: .92rem;
  line-height: 1.45;
  z-index: 9999;
}

#hovercard .vc-head{
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  margin-bottom:.35rem;
}

#hovercard .vc-ref{ font-weight:700; color: var(--ink, #0b2340); }
#hovercard .vc-text{ white-space: normal; word-break: break-word; }
/* styles-theme.css */
/* Base scale: all components should read from these tokens */
:root{
  --bg:#ffffff;
  --surface:#ffffff;
  --ink:#0b2340;
  --muted:#6b7280;
  --accent:#F17300;
  --border:#e6ebf2;
}

/* Theme variants (toggle by setting [data-theme="..."] on <html>) */

/* 1) Default (balanced blues + orange) */
:root[data-theme="default"]{
  --bg: var(--neutral-0);
  --surface:#ffffff;
  --surface-2:#fafcff;
  --text: var(--brand-900);
  --muted:#6b7280;
  --link: var(--brand-800);
  --link-hover: var(--brand-700);
  --primary: var(--brand-800);
  --accent: var(--accent-600);
  --border:#e6ebf2;
}

/* 2) Sky (lighter UI, airy) */
:root[data-theme="sky"]{
  --bg: var(--brand-100);
  --surface:#ffffff;
  --surface-2:#f3f7fb;
  --text: var(--brand-900);
  --muted:#556070;
  --link: var(--brand-800);
  --link-hover: var(--brand-700);
  --primary: var(--brand-700);
  --accent: var(--accent-600);
  --border: color-mix(in oklab, var(--brand-100), #000 10%);
}

/* 3) Deep (ink-first, serious tone) */
:root[data-theme="deep"]{
  --bg: #f3f5f8;
  --surface:#ffffff;
  --surface-2:#f7f9fc;
  --text: var(--brand-900);
  --muted:#4b5563;
  --link: var(--brand-800);
  --link-hover: var(--accent-600);
  --primary: var(--brand-900);
  --accent: var(--accent-600);
  --border:#d9e1ea;
}

/* 4) Earth (brings in the green) */
:root[data-theme="earth"]{
  --bg:#f5f8f6;
  --surface:#ffffff;
  --surface-2:#f0f5f2;
  --text:#143222;
  --muted:#52605a;
  --link: var(--earth-700);
  --link-hover: var(--brand-800);
  --primary: var(--earth-700);
  --accent: var(--accent-600);
  --border:#d9e6df;
}

/* 5) Contrast (blue/orange pop for marketing pages) */
:root[data-theme="contrast"]{
  --bg:#ffffff;
  --surface:#ffffff;
  --surface-2:#fff7f0;
  --text:#0a1a2f;
  --muted:#475569;
  --link: var(--accent-600);
  --link-hover: var(--brand-800);
  --primary: var(--accent-600);
  --accent: var(--brand-800);
  --border:#f5d9bd;
}

/* 6) Dark (brand dark, not charcoal) */
:root[data-theme="dark"]{
  --bg: var(--dark-ink);
  --surface:#0e1626;
  --surface-2:#0f1b2f;
  --text:#e9eef6;
  --muted:#9aa5b1;
  --link:#9cc7ff;
  --link-hover:#cfe3ff;
  --primary:#9cc7ff;
  --primary-contrast:#0b1220;
  --accent:#ff9a3b;
  --accent-contrast:#191b22;
  --border:#1f2a3f;
  --ring:#557bc0;
}

/* 7) Dark-Earth (alt dark using green) */
:root[data-theme="dark-earth"]{
  --bg:#0f1714;
  --surface:#0f1b16;
  --surface-2:#11201a;
  --text:#e8f1ec;
  --muted:#aab8b1;
  --link:#95d2ae;
  --link-hover:#bfe7ca;
  --primary:#7fb38f;
  --primary-contrast:#0f1714;
  --accent:#ff9a3b;
  --accent-contrast:#1a1a1a;
  --border:#1c2a23;
  --ring:#5a8e71;
}

/* Minimal component styles that consume the tokens */
body{background:var(--bg);color:var(--text);}
a{color:var(--link);text-decoration:underline;}
a:hover{color:var(--link-hover);}
.card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:16px;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.btn{display:inline-flex;gap:.5rem;align-items:center;border-radius:999px;padding:.6rem 1rem;border:1px solid var(--border);background:var(--surface);color:var(--text)}
.btn.primary{background:var(--primary);color:var(--primary-contrast);border-color:transparent}
.btn.accent{background:var(--accent);color:var(--accent-contrast);border-color:transparent}
.input, .select{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:.6rem .75rem;color:var(--text)}
hr{border:0;border-top:1px solid var(--border)}
.focus-ring:focus{outline:3px solid var(--ring);outline-offset:2px}

/* Articles: remove divider above card footer */
.articles-page .card-footer{border-top:none!important}

/* Articles: remove divider above card footer */
.articles-page .card-footer{border-top:none!important}

/* Articles: force-remove divider above card footer */
.articles-page .card-footer,.article-card .card-footer,.featured-left .card-footer,.featured-right .card-footer,.boxed .card-footer{border-top:0!important;border-block-start:0!important;box-shadow:none!important}
.articles-page .card-footer::before,.articles-page .card-footer::after{content:none!important;border:0!important;box-shadow:none!important}
.articles-page .card-body{border-bottom:0!important}
.modal-links{ 
  margin-top:8px; 
  display:flex; 
  gap:10px; 
  flex-wrap:wrap; 
}

.modal-chip{
  display:inline-flex; 
  align-items:center; 
  gap:8px; 
  border:1px solid var(--border); 
  padding:8px 10px; 
  border-radius:999px; 
  background:var(--surface); 
  color:var(--ink); 
  text-decoration:none; 
  font-weight:700; 
  font-size:.95rem; 
  transition:transform .12s ease, box-shadow .12s ease, color .12s ease;
}

.modal-chip:hover{
  transform:translateY(-1px); 
  color:var(--brand); 
  box-shadow:0 4px 10px rgba(0,0,0,.08);
}
/* Strong, consistent verse separation */
#verses .verse {
  padding: .4rem .1rem .6rem;
  border-bottom: 2px solid #DBE4EE; /* or use var(--sky) */
}
#verses .verse:last-child {
  border-bottom: 0; /* optional: remove border after last verse */
}

/* Bible verse text styling */
.vtext {
  font-family: "Adobe Garamond Pro", "Garamond", "Georgia", serif;
  font-size: 1.05rem;
  line-height: 1.7;
  color: #111;
}

/* Ensure Bible verse text is normal weight */
.vtext {
  font-weight: 400 !important;
}

.v-tools .tool-btn{
  background:var(--surface);
  border: 1px solid #e6ebf2;
  color: var(--brand, #054A91);
  border-radius: 10px;
  padding: .26rem .6rem;
  font-size: .82rem;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.v-tools .tool-btn:hover{
  background: rgba(5,74,145,.05);
  border-color: #d8e2ee;
}
.v-tools .tool-btn:active{
  background: rgba(5,74,145,.09);
}
.v-tools .tool-btn:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(5,74,145,.18);
}
/* ===== Base Theme Vars ===== */
:root{
  --bg:#ffffff;
  --surface:#ffffff;
  --ink:#0b2340;
  --muted:#6b7280;
  --accent:#F17300;
  --border:#e6ebf2;
}

/* ===== Layout ===== */
.container{max-width:1200px;margin:0 auto;padding:0 16px}
.page-header{padding:24px 0 8px}
.page-title{margin:0;font-size:2rem;font-weight:800}
.crumbs{color:var(--muted);font-size:.9rem;margin-top:4px}
.layout{display:grid;grid-template-columns:2fr 1fr;gap:18px;margin:16px 0 40px}
.panel{background:var(--white);border:1px solid var(--border);border-radius:10px;padding:14px}
.panel h3{margin:.2rem 0 0.6rem;font-size:1.05rem;color:var(--brand)}
.muted{color:var(--muted)}
@media (max-width:900px){.layout{grid-template-columns:1fr}}

/* ===== Reader Toolbar ===== */
.reader-toolbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:center; gap:.5rem; flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--border); border-radius:10px;
  padding:.5rem; margin:10px 0 16px; box-shadow:0 1px 6px rgba(0,0,0,.05);
}
.reader-toolbar .btn,
.reader-toolbar select{
  padding:.45rem .6rem; border:1px solid #e6ebf2; background:var(--surface); border-radius:10px; font:inherit; cursor:pointer;
}
.reader-toolbar .btn:hover{ background:#f8fafc }

/* ===== Bible Verses ===== */
#verses{display:flex; flex-direction:column}
.verse{display:flex; flex-direction:column; padding:12px 0}
.verse + .verse{border-top:1px solid var(--sky); margin-top:4px; padding-top:12px}
.vnum{font-weight:800; color:var(--brand); white-space:nowrap}
.vnum::after{content:" —"; color:var(--muted); margin-left:.25rem}
.vtext{
  font-family:"Adobe Garamond Pro","Garamond","Georgia",serif;
  font-size:1.05rem; line-height:1.7; font-weight:400; color:var(--ink);
}

/* Verse tools: rectangular rounded buttons (ghost/outlined) */
.v-tools{margin-top:6px; display:flex; gap:6px; flex-wrap:wrap}
.v-tools .tool-btn{
  appearance:none;
  background:var(--surface);
  border:1px solid var(--border);
  color:var(--brand);
  border-radius:10px;
  padding:.36rem .72rem;
  font-size:.9rem; line-height:1;
  cursor:pointer;
  transition:background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .05s ease;
}
.v-tools .tool-btn:hover{ background:var(--surface-alt); border-color:var(--border) }
.v-tools .tool-btn:active{ transform:translateY(1px) }
.v-tools .tool-btn:focus{ outline:none; box-shadow:0 0 0 3px rgba(5,74,145,.18) }

/* Panels under each verse */
.v-panel{display:none; margin-top:6px; padding:8px; border:1px solid var(--border); border-radius:8px; background:var(--surface)}
.v-panel.open{display:block}
.v-panel.xr{font-size:.88rem}
.xr-line a{color:var(--brand); margin-right:4px}

/* Exposition textarea (fixed, comfortable writing area) */
/* Exposition textarea (fixed size, scroll on overflow) */
.v-panel.cm .exposition-text{
  width: 100%;
  height: 200px;
  min-height: 200px;
  max-height: 200px;
  resize: none;
  overflow: auto;
  padding: .65rem .75rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  font: inherit;
  line-height: 1.6;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(0,0,0,.03) inset;
}
.v-panel.cm .exposition-text:focus{
  outline: none;
  border-color: #cfd9e6;
  box-shadow: 0 0 0 3px rgba(5,74,145,.12);
}

/* Strong’s badge (placeholder style) */
.badge{
  display:inline-block; margin:.1rem .25rem 0 0; padding:.05rem .35rem;
  border:1px solid var(--border); border-radius:8px; font-size:.78rem;
  color:#333; background:#054A910D; cursor:pointer;
}

/* Hover card (reserved for future) */
.hovercard{
  position:fixed; z-index:9999; display:none; max-width:min(380px, 92vw);
  background:var(--surface); border:1px solid #e6ebf2; border-radius:10px;
  box-shadow:0 8px 30px rgba(0,0,0,.12);
  padding:.6rem .7rem; font-size:.9rem;
}
.hovercard.open{ display:block }

/* ===== Dictionary (right panel) ===== */
.dict-head{display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:.4rem}
.dict-title{font-weight:700; color:var(--ink)}
.icon-btn{border:1px solid #e6ebf2; background:var(--surface); border-radius:8px; padding:.35rem; cursor:pointer}
.icon-btn:hover{background:#f8fafc}
.dict-reveal{overflow:hidden; max-height:0; transition:max-height .2s ease}
.dict-input{width:100%; border:1px solid var(--border); border-radius:10px; padding:.5rem .6rem; font:inherit}
.dict-body{margin-top:.5rem; font-size:.95rem; line-height:1.5}


/* Copy button (icon) inside verse tools */
.v-tools .copy-btn { display:inline-flex; align-items:center; justify-content:center; padding:.36rem .56rem; }
.v-tools .copy-btn svg { width:16px; height:16px; display:block; }
.v-tools .copy-btn.copied { background: rgba(5,74,145,.10); border-color: #cfd9e6; }



/* Cross-ref cursor fix */
.v-panel.xr{ cursor: auto; }
.v-panel.xr a{ cursor: pointer; text-decoration: none; border-bottom: 1px dotted rgba(5,74,145,.35); }
.v-panel.xr a:hover{ border-bottom-color: rgba(5,74,145,.7); }

/* Hovercard baseline for cross-ref previews and strongs */
.hovercard {
  position: fixed;
  z-index: 9999;
  display: none;
  max-width: min(420px, 92vw);
  background: #ffffff;
  border: 1px solid #e6ebf2;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
  padding: .6rem .7rem;
  font-size: .92rem;
  line-height: 1.5;
  color: var(--ink, #0b2340);
}

.hovercard.open {
  display: block;
}
/* Hovercard baseline for cross-ref previews and strongs */
.hovercard {
  position: fixed;
  z-index: 9999;
  display: none;
  max-width: min(420px, 92vw);
  background: #ffffff;
  border: 1px solid #e6ebf2;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
  padding: .6rem .7rem;
  font-size: .92rem;
  line-height: 1.5;
  color: var(--ink, #0b2340);
}
.hovercard.open { display: block; }

/* Cross-ref link visuals & cursor */
.v-panel.xr { cursor: auto; }
.v-panel.xr .xr-line a {
  cursor: pointer;
  text-decoration: none;
  border-bottom: 1px dotted rgba(5,74,145,.35);
}
.v-panel.xr .xr-line a:hover { border-bottom-color: rgba(5,74,145,.7); }

/* Ensure verse blocks have comfortable spacing even with divider hr */
.scripture-divider {
  border: 1px solid #c9a96e;
  width: 50%;
  margin: 2em auto;
}
/* --- Article Author Modal Trigger --- */
.author-info-btn {
  background: none;      /* no outer box */
  border: none;
  padding: 0;
  margin: 0;
  display: inline-flex;  /* keeps svg centered inline */
  align-items: center;
  cursor: pointer;
  color: inherit;        /* inherit text/icon color */
}
<style>
  /* Modal overlay + card — DG-style */
  .modal-overlay{
    position:fixed; inset:0; display:none;
    background:rgba(17,24,39,.6); /* darker scrim */
    z-index: 1000;
  }
  .modal-overlay[aria-hidden="false"]{ display:block; }

  .modal-card{
    position:relative;
    margin: 6vh auto;
    width:min(92vw, 720px);
    max-height:88vh;
    background:var(--surface);
    border-radius:14px;
    box-shadow:0 20px 50px rgba(0,0,0,.35);
    overflow:hidden;                 /* header fixed, body scrolls */
    display:flex; flex-direction:column;
  }
  .modal-head{
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 18px; border-bottom:1px solid #e6ebf2;
    background:var(--surface); position:sticky; top:0; z-index:1;
  }
  .mh-left{display:flex; align-items:center; gap:.6rem}
  .modal-title{margin:0; font-size:1.1rem; font-weight:700; color:#0b2340}
  .author-x-head{display:inline-flex; align-items:center; justify-content:center; color:#054A91}
  .modal-close{
    border:0; background:transparent; cursor:pointer;
    display:inline-flex; align-items:center; justify-content:center;
    width:34px; height:34px; border-radius:50%;
  }
  .modal-close:hover{ background:#f3f4f6 }

  .modal-body{
    padding:18px; overflow:auto; /* scroll body only */
    gap:16px; display:grid; grid-template-columns:72px 1fr; align-items:start;
  }
  .ap-avatar{width:64px; height:64px; border-radius:999px; object-fit:cover}
  .ap-name{font-weight:700; margin-bottom:.25rem}
  .ap-text{color:#0b2340; line-height:1.5; margin:.25rem 0 1rem}

  .modal-links{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.5rem}
  .modal-chip{
    display:inline-block; padding:.4rem .6rem; border-radius:999px;
    border:1px solid #e6ebf2; background:var(--surface); text-decoration:none;
  }

  /* “More by this author” list like DG’s */
  .author-more{margin-top:1rem; padding-top:1rem; border-top:1px solid #e6ebf2}
  .author-more h4{margin:.25rem 0 .5rem; font-size:1rem}
  .author-more ul{list-style:none; padding:0; margin:0}
  .author-more li{margin:.35rem 0}
  .author-more a{text-decoration:none}
  .author-more a:hover{ text-decoration:underline }

  /* Keep footnotes tidy + no underline on refs */
  .footnotes{font-size:.92rem}
  .footnotes .backref, .footnote-ref a { text-decoration:none; border-bottom:0 }
</style>
/* Standout blockquote styling */
.standout-quote {
  border-left: 4px solid var(--accent, #F17300);
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
  background: #fdfaf7; /* soft warm off-white background */
  font-size: 1.1rem;
  font-style: italic;
  line-height: 1.6;
  color: var(--ink, #0b2340);
  border-radius: 6px;
}

.standout-quote cite {
  display: block;
  margin-top: .5rem;
  font-size: .95rem;
  color: var(--muted, #6b7280);
  text-align: right;
}
.standout-quote {
  font-size: 1.25rem;
  font-weight: 500;
  text-align: center;
  color: #0b2340; /* ink */
  margin: 2rem auto;
  padding: 1rem 0;
  max-width: 70%;
  position: relative;
}

.standout-quote::before,
.standout-quote::after {
  content: "";
  display: block;
  height: 1px;
  background: #e6ebf2;
  margin: 1rem auto;
  max-width: 80%;
}

.standout-quote footer {
  font-size: 0.9rem;
  margin-top: 0.75rem;
  color: #6b7280;
  text-align: center;
}
/* ── Standout blockquote (DG style) ───────────────── */
.standout-quote {
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.6;
  text-align: left;
  color: #0b2340; /* ink */
  margin: 2rem auto;
  padding: 0 1rem;
  max-width: 700px;
}

.standout-quote::before,
.standout-quote::after {
  content: "";
  display: block;
  height: 1px;
  background: #e6ebf2;
  margin: 1.5rem 0;
}

.standout-quote footer {
  font-size: 0.9rem;
  margin-top: 0.75rem;
  color: #6b7280;
}
/* ── Standout Pullquote (sidebar on wide screens) ───────────────── */
.standout-quote {
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.6;
  color: #0b2340; /* ink */
  text-align: left;
  margin: 1rem 0;        /* mobile/default spacing */
  padding: .75rem 0;
}

/* Horizontal rules before/after (kept) */
.standout-quote::before,
.standout-quote::after {
  content: "";
  display: block;
  height: 1px;
  background: #e6ebf2;
  margin: .9rem 0;
}

/* Attribution */
.standout-quote footer {
  font-size: 0.9rem;
  margin-top: 0.6rem;
  color: #6b7280;
}

/* Sidebar behavior on larger screens */
@media (min-width: 900px) {
  .standout-quote {
    float: right;
    width: 38%;
    max-width: 360px;
    margin: .25rem 0 1.25rem 1.5rem; /* space from main text on the left */
    padding: .9rem 1rem;
  }

  .standout-quote::before,
  .standout-quote::after {
    margin: .75rem 0;
  }
}

/* Optional: ensure containers wrap floated quotes correctly */
.article-content::after {
  content: "";
  display: table;
  clear: both;
}
.biblio-divider {
  border: 0;
  border-top: 1px solid #e6ebf2; /* matches verse dividers */
  margin: 2rem 0 1rem;
}
/* Inline citation refs as superscript */
.footnote-ref a {
  font-size: 0.75em;
  vertical-align: super;
  line-height: 1;
  text-decoration: none;
  color: inherit;
}
.footnote-ref a:hover {
  text-decoration: underline;
}

/* Bibliography backrefs as superscript */
.footnotes .backref .badge {
  font-size: 0.75em;
  vertical-align: super;
  line-height: 1;
  border: 0;
  padding: 0;
  margin: 0;
}
/* ——— Global: inline bibliography entries with pipe separators ——— */
.footnotes .biblio-list{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  column-gap:.25rem;
  row-gap:.25rem;
}
.footnotes .biblio-list > *{
  display:inline;
  margin:0;
}
.footnotes .biblio-list > *::after{
  content:" |";
  opacity:.6;
  margin-left:.35rem;
}
.footnotes .biblio-list > *:last-child::after{
  content:"";
}

/* Fallback for older pages that still use <ol><li> */
.footnotes ol{
  list-style:none;
  padding:0;
  margin:0;
}
.footnotes ol > li{
  display:inline;
  margin:0;
}
.footnotes ol > li::after{
  content:" |";
  opacity:.6;
  margin-left:.35rem;
}
.footnotes ol > li:last-child::after{
  content:"";
}
/* Bibliography: inline sentence style, separated by pipes */
.footnotes .biblio-list{ display:block; }
.footnotes .biblio-list p{ display:inline; margin:0; }

/* remove any older :after pipes from earlier rules */
.footnotes .biblio-list > *::after{ content:none !important; }

/* add the separator only before subsequent items */
.footnotes .biblio-list p + p::before{
  content:" | ";
  opacity:.6;
}

/* Fallback for pages using <ol><li> */
.footnotes ol{ list-style:none; padding:0; margin:0; display:block; }
.footnotes ol > li{ display:inline; margin:0; }
.footnotes ol > li::after{ content:none !important; }
.footnotes ol > li + li::before{
  content:" | ";
  opacity:.6;
}
/* Inline bibliography pipe-wrap */
.biblio-list p {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.biblio-list p a.backref {
  margin-left: .25rem;
}
.biblio-list p::before,
.biblio-list p::after {
  content: "";
}
.biblio-list p span.badge {
  margin-right: .25rem;
}
/* Inline bibliography pipe-wrap */
.biblio-list p {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.biblio-list p .pipe {
  color: #9ca3af; /* lighter gray */
  margin: 0 .4rem;
}
.biblio-list p a.backref {
  margin-left: .25rem;
}
.biblio-list p span.badge {
  margin-right: .25rem;
}
/* Legend */
.cal-legend{
  display:flex;flex-wrap:wrap;gap:.75rem 1.25rem;
  align-items:center;margin:.75rem 0 0;
  color:#666;font-size:.9rem
}
.dot{width:12px;height:12px;border-radius:50%;display:inline-block}

/* Color mapping for legend dots */
.dot.xspace   { background:#000000; } /* X Space black */
.dot.youtube  { background:#8B0000; } /* YouTube dark red (per your choice) */
.dot.discord  { background:#5865f2; } /* Discord blue */
.dot.sabbath  { background:#054A91; } /* Sabbath = Core UI blue */
.dot.newmoon  { background:#81A4CD; } /* New Moon = Core UI light blue */
.dot.feast    { background:#F17300; } /* Feast Days = accent orange */
.cal-legend button {
  display:inline-flex; align-items:center; gap:.5rem;
  font:inherit; font-size:.9rem; color:#444; background:var(--surface);
  border:1px solid #e6ebf2; border-radius:999px; padding:.3rem .6rem; cursor:pointer;
}
.cal-legend button .dot { width:12px; height:12px; border-radius:50%; display:inline-block }
.cal-legend button[aria-pressed="false"] { opacity:.45 }
.cal-dow{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:.4rem 0;font-weight:600;color:#333;border:1px solid #e6ebf2;border-radius:10px;background:#f8fafc}
.cal-dow .dow-he{font-weight:400;font-size:.75rem;color:#555;margin-top:.25rem;text-align:center}
/* Day of week headers */
.cal-dow {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  background:#f8fafc;
  border:1px solid #e6ebf2;
  border-radius:10px;
  padding:.35rem .25rem;
  min-height:60px; /* consistent height for alignment */
}
.dow-main {
  font-weight:700;
  font-size:.95rem;
  color:#333;
}
.dow-he {
  font-weight:400;
  font-size:.75rem;
  color:#555;
  margin-top:.2rem;
}

/* Spacer between header row and calendar grid */
#dowRow { margin-bottom:8px; } 
/* Global visible text selection */
::selection {
  background: #054A91; /* brand blue background */
  color: #fff;         /* white text */
}
::-moz-selection {
  background: #054A91;
  color: #fff;
}
/* Canon: Strong's panel */
.v-panel.st .strongs-list{display:flex; flex-direction:column; gap:.35rem}
.v-panel.st .strongs-item{border:1px solid var(--border); background:var(--surface); border-radius:8px; padding:.45rem .55rem}
.v-panel.st .strongs-item .head{display:flex; flex-wrap:wrap; gap:.45rem; align-items:baseline}
.v-panel.st .strongs-item .code{font-weight:800; color:var(--brand)}
.v-panel.st .strongs-item .lemma{font-weight:700}
.v-panel.st .strongs-item .tr{color:#556}
.v-panel.st .strongs-item .pos{color:#556}
.v-panel.st .strongs-item .gloss{color:#334}
.v-panel.st .strongs-item details.more{margin-top:.25rem}
.v-panel.st .strongs-item .defs{margin:.25rem 0 .35rem .95rem}
.v-panel.st .strongs-item .refs{font-size:.9rem; color:#556}
.badge{display:inline-block; padding:.1rem .4rem; border:1px solid var(--border); border-radius:999px; font-size:.8rem; background:var(--surface)}

/* Lexicon panel polish */
.v-panel.lx{margin-top:.4rem}
.v-panel.lx.open{animation:fadeSlide .12s ease}
@keyframes fadeSlide{from{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:translateY(0)}}


# Author modal visibility guard
#author-modal.modal-overlay{display:none!important}
body.articles-page #author-modal.modal-overlay{display:flex!important}
.region--tiny-island {
  vector-effect: non-scaling-stroke;
  stroke-width: 1.8px;
  stroke-linejoin: round;
  paint-order: stroke fill;
}
.stp-marker {
  fill: var(--brand-accent, #F17300);
  stroke: var(--region-outline, #054A91);
  stroke-width: 1.8px;
}

/* Active region highlight */
.region--active {
  fill: var(--brand-accent, #F17300);
  fill-opacity: 0.6;
  stroke: var(--region-outline, #054A91);
  stroke-width: 2px;
}
/* Force visual highlight on clicked regions */
svg path.region--active,
svg polygon.region--active,
svg polyline.region--active,
svg circle.region--active {
  fill: var(--brand-accent, #F17300) !important;
  fill-opacity: 0.6 !important;
  stroke: var(--region-outline, #054A91) !important;
  stroke-width: 2px !important;
  pointer-events: auto !important;
}


/* === GLOBAL THEME VARIABLES === */
:root{
  --bg:#ffffff;
  --surface:#ffffff;
  --ink:#0b2340;
  --muted:#6b7280;
  --accent:#F17300;
  --border:#e6ebf2;
}

html[data-theme="dark"]{
  --surface:#0f172a;
  --ink:#f1f5f9;
  --border:#1e293b;
}


/* === THEME ICON SWITCHING === */
.moon-icon { display:block; }
.sun-icon  { display:none; }

html[data-theme="dark"] .moon-icon { display:none; }
html[data-theme="dark"] .sun-icon  { display:block; }


/* === Dual Theme Buttons === */

.theme-toggle-group{
  display:flex;
  gap:8px;
  border:1px solid var(--border);
  border-radius:999px;
  padding:4px;
}

.theme-btn{
  width:34px;
  height:34px;
  border-radius:999px;
  border:none;
  background:transparent;
  color:var(--ink);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:all .2s ease;
}

.theme-btn:hover{
  background:rgba(0,0,0,.06);
}

html[data-theme=\"light\"] .theme-btn[data-theme=\"light\"],
html[data-theme=\"dark\"] .theme-btn[data-theme=\"dark\"]{
  background:var(--accent);
  color:#fff;
}




/* === Theme Toggle (Final Correct Contrast) === */
\
.theme-toggle-group{
\
  display:flex;
\
  gap:6px;
\
  border:1px solid var(--border);
\
  border-radius:999px;
\
  padding:4px;
\
  background:var(--surface);
\
}
\

\
.theme-btn{
\
  width:36px;
\
  height:36px;
\
  border-radius:999px;
\
  border:none;
\
  background:transparent;
\
  display:flex;
\
  align-items:center;
\
  justify-content:center;
\
  cursor:pointer;
\
  transition:all .2s ease;
\
  opacity:.7;
\
}
\

\
.theme-btn svg{
\
  fill:none;
\
  stroke-width:2;
\
}
\

\
/* LIGHT MODE → Dark Icons */
\
html[data-theme=\"light\"] .theme-btn{
\
  color:#0b2340;
\
}
\

\
/* DARK MODE → Light Icons */
\
html[data-theme=\"dark\"] .theme-btn{
\
  color:#f1f5f9;
\
}
\

\
/* Active Button Highlight */
\
html[data-theme=\"light\"] .theme-btn[data-theme=\"light\"],
\
html[data-theme=\"dark\"] .theme-btn[data-theme=\"dark\"]{
\
  background:var(--accent);
\
  color:#ffffff;
\
  opacity:1;
\
}
\

\
.theme-btn:hover{
\
  opacity:1;
\
  transform:translateY(-1px);
\
}


/* === GLOBAL THEME SYSTEM === */
:root{
  --bg:#ffffff;
  --surface:#ffffff;
  --ink:#0b2340;
  --muted:#6b7280;
  --accent:#F17300;
  --border:#e6ebf2;
}

html[data-theme=\"dark\"]{
  --surface:#0f172a;
  --ink:#f1f5f9;
  --border:#1e293b;
  --muted:#94a3b8;
  --accent:#F17300;
  --bg:#0b1220;
}

body{
  background:var(--bg);
  color:var(--ink);
  transition:background .3s ease, color .3s ease;
}


/* Force moon to be dark in light mode */
\
html[data-theme=\"light\"] .theme-btn[data-theme=\"dark\"] svg{
\
  stroke:#0b2340 !important;
\
}


/* Ensure moon + sun icons are dark in light mode */
\
html[data-theme=\"light\"] .theme-btn{
\
  color:#0b2340 !important;
\
}


/* Ensure theme buttons ignore inherited color overrides */
.theme-toggle-group .theme-btn{
  color:var(--ink) !important;
}


html[data-theme="light"]{
  --ink:#0b2340;
}


/* Explicit theme button color binding */
.theme-toggle-group .theme-btn{
  color:var(--ink) !important;
}
html[data-theme=\"light\"] .theme-toggle-group .theme-btn{
  color:#0b2340 !important;
}
html[data-theme=\"dark\"] .theme-toggle-group .theme-btn{
  color:#FFFFFF !important;
}


/* Force moon icon navy in light mode */
html[data-theme=\"light\"] .theme-btn[data-theme=\"dark\"] svg{
  color:#0b2340 !important;
  fill:#0b2340 !important;
}


/* Moon icon control */
.moon-svg path {
  fill: var(--ink);
}

html[data-theme="light"] .moon-svg path {
  fill: #0b2340;
}

html[data-theme="dark"] .moon-svg path {
  fill: #FFFFFF;
}


/* Enlarge and center moon icon */
.moon-svg{
  width:20px;
  height:20px;
  display:block;
  margin:auto;
}


/* Roobert Font */
@font-face {
  font-family: \"Roobert\";
  src: url(\"/fonts/Roobert-Regular.woff2\") format(\"woff2\"),
       url(\"/fonts/RoobertRegular.woff\") format(\"woff\");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

html, body {
  font-family: \"Roobert\", \"Helvetica Neue\", Arial, Helvetica, sans-serif;
}


@font-face {
  font-family: "Zooja";
  src: url("/fonts/Zooja.woff2") format("woff2"),
       url("/fonts/Zooja.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}


/* === HERO FONT PAIRING === */
.hero h1 {
  font-size: clamp(70px, 9vw, 120px);
  line-height: 1.05;
  letter-spacing: -1px;
}

.hero h1 .script-word {
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-weight: 700;
}

.hero h1 .strong-word {
  font-family: "League Spartan", sans-serif;
  font-weight: 900;
}
.socials{
  display:flex;
  gap:14px;
  margin-top:16px;
}

.socials a{
  display:flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border-radius:50%;
  background:rgba(5,74,145,.08);
  color:var(--brand);
  transition:all .25s ease;
}

.socials a:hover{
  background:var(--accent);
  color:#ffffff;
  transform:translateY(-3px);
  box-shadow:0 6px 18px rgba(241,115,0,.35);
}

.socials svg{
  width:18px;
  height:18px;
}
/* Global Theme Inheritance */
body {
  background: var(--surface);
  color: var(--ink);
}

/* Ensure proper light mode defaults */
html:not([data-theme="dark"]){
  --ink:#0b2340;
  --muted:#5b6b7c;
  --surface:#ffffff;
  --border:#e6ebf2;
}
/* ========================= */
/* DRAWER PANEL FIX         */
/* ========================= */

.drawer {
  background: var(--surface) !important;
  color: var(--ink);
  box-shadow: var(--shadow);
  border-left: 1px solid var(--border);
}

.drawer-body {
  background: var(--surface);
}

.drawer-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.drawer .section {
  background: transparent;
}

/* ========================= */
/* DRAWER UI ENHANCEMENTS   */
/* ========================= */

.drawer-title {
  color: var(--accent);
}

.drawer .section h3 {
  margin-top: 0;
  color: var(--accent);
}

.drawer img {
  background: var(--surface);
}
/* ============================= */
/* CONTACT PAGE STYLING */
/* ============================= */

.contact-block{
  padding:28px 0;
  border-top:1px solid var(--border);
}

.contact-block:first-of-type{
  border-top:none;
}

.contact-block h2{
  font-size:1.05rem;
  margin:0 0 6px;
  font-weight:700;
  color:var(--ink);
}

.contact-block p{
  margin:0 0 12px;
  line-height:1.65;
  color:var(--muted);
}

.contact-block strong{
  color:var(--ink);
  font-weight:700;
}
/* Contact page title spacing */
.section .container .page-title{
  margin-bottom: 28px;
}
/* Contact page title spacing */
body:has(.contact-block) .page-title{
  margin-bottom: 36px !important;
}
/* CONTACT PAGE TITLE SPACING FIX */
body:has(.contact-block) .page-title {
  margin-bottom: 48px !important;
}

/* CONTACT PAGE TITLE SPACING – FINAL FIX */
body .contact-block:first-of-type {
  margin-top: 48px !important;
}
/* Contact Page Typography */
.contact-title{
  margin-bottom: 18px;
}

.contact-intro{
  margin-bottom: 48px;
  color: var(--muted);
  line-height: 1.7;
}
/* Contact Page Top Spacing */
.contact-section{
  padding-top: 80px;
}
/* Featured Teaching Cards */

.teaching-grid{
  display:grid;
  gap:36px;
}

@media(min-width:900px){
  .teaching-grid{
    grid-template-columns:1fr 1fr;
  }
}

.teaching-card{
  background:#fff;
  border-radius:14px;
  overflow:hidden;
  border:1px solid #eee;
  box-shadow:0 25px 60px rgba(0,0,0,.08);
  transition:transform .25s ease, box-shadow .25s ease;
}

.teaching-card:hover{
  transform:translateY(-6px);
  box-shadow:0 35px 80px rgba(0,0,0,.12);
}

.teaching-card iframe{
  width:100%;
  aspect-ratio:16/9;
  border:none;
}

.teaching-content{
  padding:20px 22px 24px;
}

.teaching-title{
  font-family:'League Spartan', sans-serif;
  font-weight:900;
  font-size:1.2rem;
  margin-bottom:8px;
  line-height:1.3;
}

.teaching-desc{
  color:var(--muted);
  font-size:.95rem;
  line-height:1.6;
}
/* Article link reset */

.article a{
  text-decoration:none;
  color:inherit;
  display:block;
}

/* Optional hover polish */
.article a:hover h2{
  text-decoration:underline;
}
/* GLOBAL LINK STYLING */

a{
  color:#054a91;
  text-decoration:none;
  transition:color .2s ease;
}

a:hover{
  color:#f17300;
  text-decoration:underline;
}
.article a{
  color:inherit;
  text-decoration:none;
}

.article a:hover h2{
  color:#f17300;
}
/* BUTTON FIX — OVERRIDE LINK STYLES */

.btn{
  display:inline-block;
  padding:12px 20px;
  border-radius:999px;
  background:#054a91;
  color:#ffffff !important;
  text-decoration:none !important;
  transition:all .2s ease;
}

/* Primary button stays same base color */
.btn-primary{
  background:#054a91;
}

/* HOVER — full pill turns orange, text stays white */
.btn:hover,
.btn-primary:hover{
  background:#f17300;
  color:#ffffff !important;
  text-decoration:none !important;
}