/* tla-theme.css — The Literary Apologetic
 * Single source of truth for site-wide color palette.
 * Link this on EVERY page, AFTER the page's own <style> block, so these
 * rules win without needing to rewrite each page's individual CSS:
 *
 *   Root pages:   <link rel="stylesheet" href="tla-theme.css">
 *   Author pages: <link rel="stylesheet" href="../../tla-theme.css">
 *
 * To recolor the whole site: edit the variables below, save, re-upload
 * this one file. Nothing else needs to change.
 *
 * This targets class names already shared across index.html and the
 * author-page templates (hero, sidebar, section, engage, footer, etc).
 * If a class name here doesn't exist on some page, the rule is simply
 * unused there — harmless.
 */

:root{
  --tla-bg:#1c1e22;
  --tla-bg-alt:#2b2e33;
  --tla-bg-deep:#0a0d14;
  --tla-border:#40444b;
  --tla-cream:#ffffff;
  --tla-text-light:#d5d8dd;
  --tla-text-dark:#2b2e33;
  --tla-ink:#1c1e22;
  --tla-slate:#6b7078;
  --tla-dustrose:#d5d8dd;
  --tla-gold:#9868a8;
  --tla-crimson:#6b4577;
  --tla-heading:#8a3232;
}

/* ── Page shell / banner / nav / devotional ── */
body{background:var(--tla-bg) !important;color:var(--tla-text-light) !important;}
.site-banner{background:var(--tla-bg-deep) !important;}
nav{background:var(--tla-bg-alt) !important;border-bottom:1px solid var(--tla-border) !important;}
.nav-links a{color:#ffffff !important;}
.nav-links a:hover{color:var(--tla-gold) !important;}
#tla-devotional,.devotional-bar{background:#1c1e22 !important;border-bottom:1px solid var(--tla-border) !important;}
.devotional-text{color:var(--tla-gold) !important;}
.datetime-text{color:#ffffff !important;}

/* ── Author hero ── */
.author-hero,.hero-left{background:var(--tla-bg) !important;}
.hero-era{color:var(--tla-crimson) !important;}
.hero-name{color:#f0e6cc !important;}
.hero-dates{color:#8a9aaa !important;}
.hero-quote{color:var(--tla-dustrose) !important;border-top-color:var(--tla-border) !important;}
.hero-attr{color:#9aa0a8 !important;}
.hero-right::after{background:linear-gradient(to right,var(--tla-bg) 0%,transparent 40%) !important;}

/* ── Content zone / card container ──
 * Turns each author page's full-width white strip into the same kind of
 * contained, rounded card index.html uses for its main content block.
 * Done with a pseudo-element top bar so no page HTML needs to change. */
.content-zone{
  background:var(--tla-cream) !important;
  border-top:none !important;
  max-width:1200px;
  margin:2rem auto 3rem;
  border-radius:1.25rem;
  overflow:hidden;
  position:relative;
  border:1px solid #dcdee2;
  box-shadow:0 10px 40px rgba(0,0,0,.35);
}
.content-zone::before{
  content:'';
  position:absolute;top:0;left:0;right:0;height:3px;z-index:2;
  background:linear-gradient(to right,var(--tla-crimson),var(--tla-gold),var(--tla-slate),var(--tla-gold),var(--tla-crimson));
}
.section-label{color:var(--tla-crimson) !important;}
.section-title{color:var(--tla-heading) !important;border-bottom-color:#dcdee2 !important;}
.section p{color:var(--tla-text-dark) !important;}
.section p em{color:var(--tla-slate) !important;}
.author-nav{border-top-color:#dcdee2 !important;}
.author-nav a{color:var(--tla-crimson) !important;}
.author-nav a:hover{color:var(--tla-ink) !important;}
.comments-title{color:var(--tla-ink) !important;}

/* ── Sidebar ── */
.sidebar-heading{color:var(--tla-crimson) !important;}
.sidebar-links a{color:var(--tla-crimson) !important;}
.sidebar-links a:hover{color:var(--tla-ink) !important;}
.sidebar-note{color:var(--tla-slate) !important;}
.sidebar-return{color:var(--tla-crimson) !important;}
.sidebar-section{border-bottom-color:#dcdee2 !important;}

/* ── Engage / comments box ── */
.engage-box{background:#f4f5f7 !important;border-color:#dcdee2 !important;}
.engage-box.engage-comment{border-left-color:var(--tla-crimson) !important;}
.engage-box.engage-subscribe{border-left-color:var(--tla-ink) !important;}
.engage-heading{color:var(--tla-ink) !important;}
.engage-btn{background:var(--tla-crimson) !important;}
.engage-btn:hover{background:var(--tla-gold) !important;}
.engage-box.engage-subscribe .engage-btn{background:var(--tla-ink) !important;}
.engage-comment-name{color:var(--tla-crimson) !important;}

/* ── Footer ── */
#tla-footer{background:var(--tla-bg-alt) !important;border-top:1px solid var(--tla-border) !important;}
#tla-footer .footer-quote,#tla-footer .footer-mission{color:var(--tla-dustrose) !important;}
#tla-footer .footer-sitemap a{color:#ffffff !important;}
#tla-footer .footer-sitemap a:hover{color:var(--tla-gold) !important;}
#tla-footer .footer-copy{color:var(--tla-gold) !important;}
#tla-footer .footer-contact{color:#ffffff !important;}
#tla-footer .footer-contact a{color:var(--tla-crimson) !important;}
#tla-footer .footer-rights{color:#9aa0a8 !important;}

/* ── Shared card container, matching index.html's .essays-card ──
 * Wrap a page's main content div in class="tla-card" to get the same
 * rounded white card with gradient top bar that index.html uses. */
.tla-card{background:var(--tla-cream);border:1px solid #dcdee2;border-radius:1.25rem;color:var(--tla-ink);overflow:hidden;position:relative;}
.tla-card::before{content:'';position:absolute;top:0;left:0;right:0;height:35%;background:linear-gradient(to bottom, rgba(255,255,255,.15), transparent);pointer-events:none;z-index:0;}
.tla-card-top-bar{height:3px;background:linear-gradient(to right,var(--tla-crimson),var(--tla-gold),var(--tla-slate),var(--tla-gold),var(--tla-crimson));}