/* ==========================================================================
   TrueGospel.ca — Shared Design System (v5 "Living Word")
   Used by every rebuilt page. Do not duplicate these rules per-page —
   include this file and add only page-specific styles locally.
   ========================================================================== */

:root{
  --void:#07080B; --void-2:#0E1013; --void-3:#14171C;
  --gold:#D4A94A; --gold-dim:#8A6E30;
  --parchment:#F1EAD6; --ember:#8C3B2E; --verdigris:#3F6E63;
  --font-display:'Fraunces',serif;
  --font-mono:'IBM Plex Mono',monospace;
  --font-ui:'Inter',sans-serif;
}
*{box-sizing:border-box}
body.tg-theme{
  background:var(--void); color:var(--parchment); font-family:var(--font-ui);
  overflow-x:hidden; padding-left:56px; margin:0;
}
.tg-theme a{color:inherit;text-decoration:none}
.tg-theme button{font-family:inherit}
.tg-theme ::selection{background:var(--gold);color:var(--void)}
.tg-theme ::-webkit-scrollbar{width:8px;height:8px}
.tg-theme ::-webkit-scrollbar-track{background:var(--void)}
.tg-theme ::-webkit-scrollbar-thumb{background:rgba(212,169,74,.25);border-radius:4px}
.tg-theme ::-webkit-scrollbar-thumb:hover{background:rgba(212,169,74,.45)}

/* ambient background glow, used on every page */
.tg-theme::before{content:"";position:fixed;top:-10%;left:-5%;width:50vw;height:60vh;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse, rgba(212,169,74,.05), transparent 65%)}
.tg-theme::after{content:"";position:fixed;bottom:-10%;right:-5%;width:45vw;height:55vh;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse, rgba(63,110,99,.05), transparent 65%)}

/* ---------- site nav rail (every page) ---------- */
.site-rail{position:fixed;left:0;top:0;bottom:0;width:56px;border-right:1px solid rgba(212,169,74,.15);
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:1.2rem 0;z-index:200;background:var(--void)}
.site-rail-mark{font-family:var(--font-display);font-size:.95rem;font-weight:600;color:var(--gold)}
.site-rail button{background:none;border:none;padding:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:.5rem}
.site-menu-lines{display:flex;flex-direction:column;gap:4px}
.site-menu-lines span{width:16px;height:1px;background:var(--gold-dim)}
.site-rail button:hover .site-menu-lines span{background:var(--gold)}
.site-menu-label{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.1em;color:rgba(241,234,214,.5);writing-mode:vertical-rl}
.site-rail-social{display:flex;flex-direction:column;gap:1rem;align-items:center}
.site-rail-social-link{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;
  border:1px solid rgba(212,169,74,.2);color:rgba(241,234,214,.5);font-size:.9rem;text-decoration:none;transition:.2s}
.site-rail-social-link:hover{border-color:var(--gold);color:var(--gold)}

.site-index-overlay{position:fixed;inset:0;left:56px;background:rgba(7,8,11,.97);z-index:250;opacity:0;pointer-events:none;
  transition:opacity .3s ease;overflow-y:auto;padding:5vw 6vw}
.site-index-overlay.open{opacity:1;pointer-events:auto}
.site-index-close{position:absolute;top:2rem;right:2.2rem;font-family:var(--font-mono);font-size:.72rem;color:rgba(241,234,214,.6);
  background:none;border:1px solid rgba(241,234,214,.25);padding:.55rem 1rem;cursor:pointer}
.site-index-close:hover{color:var(--gold);border-color:var(--gold)}
.site-index-title{font-family:var(--font-display);font-weight:300;font-size:clamp(1.5rem,3vw,2.2rem);margin-bottom:2.5rem}
.site-index-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2.2rem}
.site-index-groups h4{font-family:var(--font-mono);font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;color:var(--verdigris);
  margin-bottom:.8rem;border-bottom:1px solid rgba(241,234,214,.1);padding-bottom:.5rem}
.site-index-groups a{display:block;font-family:var(--font-display);font-size:1rem;color:rgba(241,234,214,.8);padding:.4rem 0;transition:.2s}
.site-index-groups a:hover{color:var(--gold);padding-left:.3rem}

/* ---------- site-wide search overlay (accessible from every page) ---------- */
.site-search-overlay{position:fixed;inset:0;background:rgba(7,8,11,.9);z-index:260;opacity:0;pointer-events:none;
  transition:opacity .25s ease;display:flex;align-items:flex-start;justify-content:center;padding-top:14vh}
.site-search-overlay.open{opacity:1;pointer-events:auto}
.site-search-box{width:min(600px,88vw);display:flex;align-items:center;gap:.8rem}
.site-search-box form{flex:1;display:flex;align-items:center;gap:.8rem;background:var(--void-2);
  border:1px solid rgba(212,169,74,.35);border-radius:10px;padding:1rem 1.3rem;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.site-search-icon{color:var(--gold);font-size:1.1rem}
.site-search-box input{flex:1;background:none;border:none;outline:none;color:var(--parchment);
  font-family:var(--font-display);font-size:1.15rem}
.site-search-box input::placeholder{color:rgba(241,234,214,.35)}
.site-search-close{font-family:var(--font-mono);font-size:.68rem;color:rgba(241,234,214,.4);background:none;
  border:1px solid rgba(241,234,214,.2);padding:.4rem .7rem;border-radius:4px;cursor:pointer;flex-shrink:0}
.site-search-close:hover{color:var(--gold);border-color:var(--gold)}

@media(max-width:700px){
  .site-index-overlay{left:40px}
  .site-rail{width:40px}
  body.tg-theme{padding-left:40px}
}

/* ---------- shared components (reused across pages) ---------- */

/* glow card — used for panels, entries, sidebar widgets */
.tg-card{border:1px solid rgba(212,169,74,.2);border-radius:6px;padding:1.3rem;
  background:linear-gradient(160deg, rgba(212,169,74,.04), transparent 70%)}
.tg-card.dark{background:var(--void-3)}
.tg-card:hover.tg-card--hoverable{border-color:var(--gold);box-shadow:0 0 22px rgba(212,169,74,.1);transform:translateY(-2px)}

.tg-card-title{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold-dim);margin-bottom:.8rem}

/* buttons */
.tg-btn{font-family:var(--font-mono);font-size:.78rem;font-weight:600;padding:.7rem 1.4rem;border-radius:4px;
  border:none;cursor:pointer;display:inline-flex;align-items:center;gap:.5rem}
.tg-btn--primary{background:var(--gold);color:var(--void)}
.tg-btn--primary:hover{opacity:.85}
.tg-btn--ghost{background:none;border:1px solid rgba(241,234,214,.25);color:rgba(241,234,214,.7)}
.tg-btn--ghost:hover{border-color:var(--gold);color:var(--gold)}

/* verse tags / chips */
.tg-chip{font-family:var(--font-mono);font-size:.72rem;color:var(--gold);border:1px solid rgba(212,169,74,.3);
  padding:.4rem .8rem;border-radius:20px;transition:.2s;display:inline-block}
.tg-chip:hover{background:var(--gold);color:var(--void)}

/* daily verse widget (used in sidebars everywhere) */
.tg-verse-widget-title{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold-dim);margin-bottom:.9rem}
.tg-verse-widget-text{font-family:var(--font-display);font-style:italic;font-size:.95rem;line-height:1.6;color:rgba(241,234,214,.85)}
.tg-verse-widget-ref{font-family:var(--font-mono);font-size:.68rem;color:var(--gold);margin-top:.5rem}

/* breadcrumb */
.tg-crumb{display:flex;align-items:center;gap:.5rem;font-family:var(--font-mono);font-size:.72rem;
  color:rgba(241,234,214,.4);flex-wrap:wrap}
.tg-crumb a{color:var(--gold-dim)}
.tg-crumb a:hover{color:var(--gold)}

/* section title with underline, used across article/reader pages */
.tg-section-title{display:flex;align-items:center;gap:.6rem;font-family:var(--font-mono);font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--gold-dim);margin:2.2rem 0 1rem;
  padding-bottom:.6rem;border-bottom:1px solid rgba(241,234,214,.08)}

/* auto-linked scripture references inside article body/excerpt text */
.tg-inline-verse-link{color:var(--gold);border-bottom:1px dotted rgba(212,169,74,.5);text-decoration:none;transition:.15s}
.tg-inline-verse-link:hover{border-bottom-style:solid;background:rgba(212,169,74,.08)}

/* long-form reading typography, shared by Bible Reader / Blog / Index entries */
.tg-prose{font-family:var(--font-display);font-size:1.05rem;line-height:1.9;color:rgba(241,234,214,.82);font-weight:300}
.tg-prose p{margin-bottom:1.3rem}
.tg-prose strong{color:var(--gold)}
.tg-prose blockquote{border-left:2px solid var(--gold);padding:.3rem 0 .3rem 1.4rem;margin:1.6rem 0;font-style:italic;color:rgba(241,234,214,.7)}