:root {
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
  --space-xl: 4rem;
  --article-font: Georgia, serif;
  --article-size: 16px;
  --article-lineheight: 1.28;
  --article-margin-top: 10px;
  --article-margin-bottom: 5px;
  --article-margin-left: 0px;
  --ich-maroon: #660000;
  --ich-maroon-dark: #3d0000;
  --ich-gold: #b8860b;
  --ich-gold-light: #d4a63f;
  --ich-parchment: #f5ecd6;
  --ich-ink: #000000;
}

/* ===== Spacing: Margin ===== */
.mt-0   { margin-top: 0; }
.mt-xs  { --h3-margin-top: 0.25rem; }
.mt-sm  { margin-top: 0.5rem; }
.mt-md  { margin-top: 1rem; }
.mt-lg  { margin-top: 2rem; }
.mt-xl  { margin-top: 4rem; }

.mb--1 { margin-bottom: -0.5rem; }
.mb--2 { margin-bottom: -1rem; }
.mb--3 { margin-bottom: -1.5rem; }
.mb--4 { margin-bottom: -2rem; }


.mb-0   { margin-bottom: 0; }
.mb-xs  { margin-bottom: 0.25rem; }
.mb-sm  { margin-bottom: 0.5rem; }
.mb-md  { margin-bottom: 1rem; }
.mb-lg  { margin-bottom: 2rem; }

/* ===== Spacing: Padding ===== */
.pt-xs  { padding-top: 0.25rem; }
.pt-sm  { padding-top: 0.5rem; }
.pt-md  { padding-top: 1rem; }
.pt-md2 { padding-top: 1.5rem; }
.pt-lg  { padding-top: 2rem; }

.pb-xs  { padding-bottom: 0.25rem; }
.pb-sm  { padding-bottom: 0.5rem; }
.pb-md  { padding-bottom: 1rem; }
.pb-lg  { padding-bottom: 2rem; }

/* ===== Spacing: Margin ===== */

/* Top margin */
.mt-xs { margin-top: var(--space-xs); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }

/* Bottom margin */
.mb-xs { margin-bottom: var(--space-xs); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }

/* ===== Spacing: Phantom Nudges ===== */
.nudge-up-xs { display: block; margin-bottom: -0.25rem; }
.nudge-up-sm { display: block; margin-bottom: -0.5rem; }
.nudge-up-md { display: block; margin-bottom: -1rem; }
.nudge-up-lg { display: block; margin-bottom: -1.5rem; }
.nudge-up-xl { display: block; margin-bottom: -2rem; }

/* ===== Dividers ===== */
.divider {
  border-bottom: 1px solid #ccc;
  margin: 1rem 0;
}

.dash-divider {
    display: inline-block;
    margin-bottom: -1em;
}

.dash-wrap {
    text-align: center;
}

.half-hr {
      width: 50%; /* Set the width to half of the container */
      margin: 0 auto; /* Center the <hr> horizontally */
      border: 1px solid #000; /* Optional: Customize the border */
}

.rule-soft {
  border-bottom: 1px solid rgba(0,0,0,0.15);
  margin: 0.75rem 0;
}

.rule-tight {
  border-bottom: 1px solid rgba(0,0,0,0.2);
  margin: 0.25rem 0;
}

.rule-soft {
  border-bottom: 1px solid rgba(0,0,0,0.15);
  margin: 0.75rem 0;
}

/* ===== Resonance ===== */
.resonance-soft { opacity: 0.85; }
.resonance-quiet { opacity: 0.65; }
.resonance-bold { opacity: 1; }

/* ===== Typography ===== */
.text-xs   { font-size: 0.75rem; }
.text-sm   { font-size: 0.875rem; }
.text-md   { font-size: 1rem; }
.text-lg   { font-size: 1.25rem; }
.text-xl   { font-size: 1.5rem; }

.text-center { text-align: center; }
.text-right  { text-align: right; }
.text-left   { text-align: left; }

.fw-light   { font-weight: 300; }
.fw-normal  { font-weight: 400; }
.fw-bold    { font-weight: 700; }

.source-ref {
  font-size: 14px;
  font-style: normal; /* optional */
  opacity: 0.85;      /* optional subtlety */
}

.source-ref-c {
  font-size: 14px;
  font-style: normal; /* optional */
  opacity: 0.85;      /* optional subtlety */
  text-align: center;
}

/* ===== Colors ===== */
.text-muted     { color: #666; }
.text-soft      { color: rgba(0,0,0,0.6); }
.text-quiet     { color: rgba(0,0,0,0.45); }
.text-black     { color: #000; }
.text-accent    { color: #3366cc; } /* tweak as needed */

.bg-soft        { background-color: #f7f7f7; }
.bg-quiet       { background-color: #eee; }
.bg-accent      { background-color: #e5ecff; }

/* ===== Resonance ===== */
.resonance-soft  { opacity: 0.85; }
.resonance-quiet { opacity: 0.65; }
.resonance-bold  { opacity: 1; }

.hover-glow:hover {
  transition: 0.2s ease;
  opacity: 1;
  filter: drop-shadow(0 0 2px rgba(0,0,0,0.15));
}

/* ===== Layout ===== */
.flex        { display: flex; }
.flex-col    { flex-direction: column; }
.flex-row    { flex-direction: row; }
.flex-center { justify-content: center; align-items: center; }

.gap-xs { gap: 0.25rem; }
.gap-sm { gap: 0.5rem; }
.gap-md { gap: 1rem; }
.gap-lg { gap: 2rem; }

.w-100 { width: 100%; }
.w-50  { width: 50%; }
.w-auto { width: auto; }

/* ===== Slip Helpers ===== */
.slip {
  padding: 0.75rem 1rem;
  border-radius: 4px;
}

.slip-soft {
  background-color: #f9f9f9;
}

.slip-accent {
  background-color: #eef3ff;
  border-left: 3px solid #3366cc;
}

.hebrew-framed {
  display: inline-block;
  background-color: #ffffff;
  border: 2px solid #556B2F;   /* olive accent */
  border-radius: 8px;
  padding: 0px 10px 0px 6px;
}

.hebrew-framed h3 {
  margin: 0;
  color: #556B2F; /* text accent */
}

.greek-framed {
  display: inline-block;
  background-color: #ffffff;
  border: 2px solid #1E90FF;   /* aegean blue accent */
  border-radius: 8px;
  padding: 0px 10px 0px 6px;
}

.greek-framed h3 {
  margin: 0;
  color: #1E90FF;
}

.latin-framed {
  display: inline-block;
  background-color: #ffffff;
  border: 2px solid #DAA520;   /* parchment gold accent */
  border-radius: 8px;
  padding: 0px 10px 0px 6px;
}

.latin-framed h3 {
  margin: 0;
  color: #DAA520;
}

/* ==========================================
   ICHTHUS ACCENT THEME — BODY LEVEL
   ========================================== */

/* Body gets only ink color, no parchment */
body.accent-ichthus {
  color: var(--ich-ink);
  font-weight: 400;
}

/* The dock gets the parchment */
#ichthus .resource-block {
  background: var(--ich-parchment) url('/Images/parchment.jpg') repeat;
  border: 3px solid rgba(120, 70, 40, 0.45); /* warm parchment edge */
  border-radius: 18px;                       /* scroll-like rounding */
  padding: 2rem;
  box-shadow:
    0 2px 6px rgba(0,0,0,0.15),              /* soft lift */
    inset 0 0 12px rgba(0,0,0,0.12);         /* inner parchment glow */
}

body.accent-ichthus h1,
body.accent-ichthus h2,
body.accent-ichthus h3,
body.accent-ichthus h4 {
  color: var(--ich-maroon);
}

body.accent-ichthus a {
  color: var(--ich-gold);
}

body.accent-ichthus a:hover {
  color: var(--ich-gold-light);
}

.ichthus-table {
  border-spacing: 0 16px;
}

body.accent-ichthus table {
  border-collapse: separate;
  margin: 0 auto;
  color: var(--ich-ink);
}

body.accent-ichthus th {
  background: var(--ich-gold);
  color: var(--ich-ink);
  padding: 10px 16px;
  border: 2px solid var(--ich-maroon-dark);
  border-radius: 6px;
}

body.accent-ichthus td {
  background: #fff;
  border: 1px solid var(--ich-maroon);
  padding: 10px 14px;
  border-radius: 4px;
  text-align: center;
}

body.accent-ichthus img {
  border: 3px solid var(--ich-maroon-dark);
  border-radius: 8px;
  padding: 4px;
  background: var(--ich-parchment);
  display: block;
  margin: 0 auto;
}

body.ichthus {
  font-size: 1.1875rem; /* 19px */
}

/* === IChThUS Utilities === */

/* Text utilities */
.text-ich-maroon { color: var(--ich-maroon); }
.text-ich-gold { color: var(--ich-gold); }

/* Background utilities */
.bg-ich-parchment { background: var(--ich-parchment); }
.bg-ich-gold { background: var(--ich-gold); }

/* Border utilities */
.border-ich { border: 2px solid var(--ich-maroon-dark); }

/* === IChThUS Theme Section Wrapper === */
.theme-ichthus {
  --accent-bg: #fdf8e7;
  --accent-border: #d8c9a3;
  --accent-text: #3a2f1b;
}

.theme-ichthus .resource-block {
  background: var(--accent-bg);
  border: 1px solid var(--accent-border);
  color: var(--accent-text);
}

/* === Base Blockquote Styling === */

.scripture-pop {
  position: relative;
  display: inline-block;
  cursor: pointer;
  color: var(--ich-gold);
  font-weight: 600;
}

.scripture-pop:hover .scripture-box {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.scripture-box {
  position: absolute;
  left: 50%;
  top: 1.6em;
  transform: translateX(-50%) translateY(6px);
  background: var(--ich-parchment) url('/Images/parchment.jpg') repeat;
  border: 2px solid rgba(120, 70, 40, 0.45);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  width: 260px;
  box-shadow:
    0 2px 6px rgba(0,0,0,0.15),
    inset 0 0 12px rgba(0,0,0,0.12);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 20;
}

/* === IChThUS Theme Wrapper === */
.theme-ichthus {
  --accent-bg: #fdf8e7;
  --accent-border: #d8c9a3;
  --accent-text: #3a2f1b;
}

.theme-ichthus .resource-block {
  background: var(--accent-bg);
  border: 1px solid var(--accent-border);
  color: var(--accent-text);
}

/* === Shared Scripture Blockquote === */
.blockquote-scripture {
  font-style: italic;
  padding: 8px 12px;
  margin: 1em 0;
  border-left: 3px solid currentColor;
  color: #000;
  background-color: #fdfdf6; /* parchment tone */
}

body.accent-ichthus table {
  border-collapse: separate;
  border-spacing: 20px;
  margin: 0 auto;
  color: var(--ich-ink);
}

body.accent-ichthus th {
  background: var(--ich-gold);
  color: var(--ich-ink);
  padding: 10px 16px;
  border: 2px solid var(--ich-maroon-dark);
  border-radius: 6px;
}

body.accent-ichthus td {
  background: #fff;
  border: 1px solid var(--ich-maroon);
  padding: 10px 14px;
  border-radius: 4px;
}

body.accent-ichthus img {
  border: 3px solid var(--ich-maroon-dark);
  border-radius: 8px;
  padding: 4px;
  background: var(--ich-parchment);
  display: block;
  margin: 0 auto;
}

.dock-width {
  width: 80%;
  max-width: 800px;
  margin-inline: auto;
}

/* ================================
   Cross‑Link Dock Component
   ================================ */

.cross-links {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;

  gap: var(--space-lg);          /* rhythmic spacing between links */

  /* tightened vertical rhythm */
  margin-top: var(--space-sm);   /* gentler lift above the dash divider */
  margin-bottom: var(--space-xs);/* keeps the block visually tucked */

  padding: 0.25em 0.5em;         /* lighter internal padding = tighter bottom */
  background-color: #fdfdf6;     /* parchment tone */
  border: 1px solid #ddd;
  border-radius: 6px;
}

.cross-links a {
  color: currentColor;           /* accent-driven */
  text-decoration: none;
  padding: 0.15rem 0.35rem;      /* subtle touch target */
  border-radius: 4px;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.cross-links a:hover {
  background-color: var(--accent-soft);
  color: var(--accent-strong);
  text-decoration: underline;
}


.term-block {
  background-color: #f9f9fc;
  border: 2px solid currentColor; /* accent-driven */
  border-radius: 8px;
  padding: 1em 1.5em 0.75em;

  /* Vertical rhythm: generous above, tight below */
  margin: 2em auto 0.5em;

  max-width: 800px;

  /* Shadow tuned to feel present but not heavy */
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);

  font-family: 'Segoe UI', sans-serif;
}

/* Term Title */
.term-title {
  font-size: 1.8em;
  font-weight: bold;
  color: #2c3e50;
  margin-bottom: 0.5em;
  text-align: center;
}

/* Latin term heading */
.latin-term {
  font-family: "Garamond", "Georgia", "Times New Roman", serif;
  font-size: 1.6em;
  font-weight: bold;
  color: #4a2f1f; /* warm parchment tone */
  margin-bottom: 0.5em;
}

/* Hebrew term heading */
.hebrew-term {
  font-family: "SBL Hebrew", "Ezra SIL", "David", "Times New Roman", serif;
  font-size: 1.6em;
  font-weight: bold;
  color: #556B2F; /* olive accent */
  margin-bottom: 0.5em;
  direction: ltr;
}

/* Greek term heading */
.greek-term {
  font-family: "Gentium Plus", "Palatino Linotype", "Georgia", "Times New Roman", serif;
  font-size: 1.6em;
  font-weight: bold;
  color: #71706E; /* deep slate accent */
  margin-bottom: 0.5em;
}

/* Historical notes */
.historical-note {
  font-size: 0.95em;
  line-height: 1.4;
  color: #444;
  margin: 0.5em 0;
}

/* Unified accent scaffolding */
.accent-greek {
  border-color: #71706E;
  color: #71706E;
  --accent-title-color: #71706E;
}

.accent-hebrew {
  border-color: #556B2F; /* slate olive */
  color: #556B2F;
  --accent-title-color: #556B2F;
}

.accent-latin {
  border-color: #B8860B; /* bronzy parchment */
  color: #B8860B;
  --accent-title-color: #B8860B;
}

/* === Accent Variant: English === */
.accent-english {
  border-color: #000080;       /* navy accent */
  color: #000080;              /* text accent */
  background-color: #f9f9ff;   /* subtle tint */
  --accent-title-color: #00080;
}

/* ========== Oracle Dock Accent ========== */
.accent-oracle {
  --accent-bg: #2E0854;       /* Deep violet — mystery, majesty */
  --accent-text: #FFD700;     /* Gold — revelation, divine utterance */
  --accent-border: #8B008B;   /* Dark magenta — prophetic edge */
  --accent-shadow: 0 0 0.5em #FFD70088; /* Soft gold glow */
  --accent-font-weight: 600;
  --accent-letter-spacing: 0.03em;
  --accent-font-style: italic;
}

/* === English Term Heading === */
.english-term {
  font-family: "Arial", "Helvetica", sans-serif;
  font-size: 1.6em;
  font-weight: bold;
  color: #000080;
  margin-bottom: 0.5em;
}

/* ===== Geektweakery: Resource Block ===== */
.resource-block {
  padding: 1rem;
  margin-bottom: .2rem;
  background-color: #f9f9fc;
  border-radius: 4px;
  --p-spacing: 0.75em; /* or whatever feels right */
  --p-line-height: 1.35;
}

.resource-block h4 {
  margin-top: var(--h4-margin-top, 0);
  color: var(--accent-title-color, #333); /* fallback */
}

.resource-block p {
  margin-top: 0;
  margin-bottom: var(--p-spacing, 1em);
  line-height: var(--p-line-height, 1.5);
}


.resource-block-border {
  border: 2px solid #ccc;
  border-radius: 6px;
  padding: 1em;
  margin-top: .5em;
  margin-bottom: .25em;
  background-color: #f9f9f9;
}

/* Global image styling */
img {
  border-radius: 10px;   /* globally rounded corners */
  height: auto;          /* keep aspect ratio */
  max-width: 100%;       /* responsive scaling */
}


/* Image float helpers */
.img-left {
  float: left;
  margin: 0 12px 12px 0;
}

.img-right {
  float: right;
  margin: 0 0 12px 12px;
}

.h4-nudge {
  --h4-margin-top: 0em;
}

.h4-nudge-1 {
  --h4-margin-top: 0.2em;
}

.h4-nudge-1x {
  --h4-margin-top: 0.3em;
}

.h4-nudge-1x2 {
  --h4-margin-top: 0.4em;
}

.h4-nudge-2 {
  --h4-margin-top: 0.5em;
}

.h4-nudge-3 {
  --h4-margin-top: 0.6em;
}

.flush-left {
  margin-left: 0rem; /* image width (48px) + right margin (4px from mr-3) */
}

.float-left { float: left; }
.float-right { float: right; }
.float-none { float: none; }

/* Float left variant */
.img-left {
  float: left;
  margin: 0 12px 12px 0; /* breathing room on right & bottom */
}

/* Float right variant */
.img-right {
  float: right;
  margin: 0 0 12px 12px; /* breathing room on left & bottom */
}

.mr-1 { margin-right: 4px; }
.mr-2 { margin-right: 8px; }
.mr-3 { margin-right: 12px; }

.mr-xs { margin-right: var(--space-xs); }
.mr-sm { margin-right: var(--space-sm); }
.mr-md { margin-right: var(--space-md); }
.mr-lg { margin-right: var(--space-lg); }
.mr-xl { margin-right: var(--space-xl); }

.nudge-up-1 { top: -1px; }
.nudge-up-2 { top: -2px; }
.nudge-up-3 { top: -3px; }
.nudge-up-4 { top: -4px; }

.nudge-down-1 { bottom: -1px; }
.nudge-down-2 { bottom: -2px; }
.nudge-down-3 { bottom: -3px; }

@media (max-width: 600px) {
  .collapse-float { float: none; display: block; margin: 0 auto 16px; }
}

sup {
    line-height: 100%;
}

/* === Micro-Nudges === */
.nudge-up-1 { position: relative; top: -1px; }
.nudge-up-2 { position: relative; top: -2px; }
.nudge-up-3 { position: relative; top: -3px; }

.h3-nudge-1 { --h3-margin-top: 0.25rem; }
.h3-nudge-2 { --h3-margin-top: 0.5rem; }
.h3-nudge-3 { --h3-margin-top: 0.75rem; }

/* === Resource Modules === */

/* === Section Modules === */
.module {
  background-color: white;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 1.5em;
  margin-bottom: 2em;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.module h2 {
  font-size: 1.5em;
  margin-bottom: 0.5em;
  color: #0066cc;
}

.module ul {
  list-style-type: disc;
  padding-left: 1.5em;
}

.module li {
  margin-bottom: 0.5em;
}

/* === Global Paragraph Margins === */
p {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

.article-paragraph {
  font-family: var(--article-font);
  font-size: var(--article-size);
  line-height: var(--article-lineheight);
  margin-top: var(--article-margin-top);
  margin-bottom: var(--article-margin-bottom);
  margin-left: var(--article-margin-left, 0);
  text-align: left;
}
.article-paragraph-center {
  text-align: center;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.text-center { text-align: center; }


/* The sidebar defines the “style context” */
.sidebar {
  --article-font: Georgia, serif;
  --article-size: 14px;
  --article-lineheight: 1.4;
  --article-margin-top: 6px;
  --article-margin-bottom: 6px;
  --article-margin-left: 10px;

  background-color: #f4f7fa;
  border-left: 4px solid #2a6fbb;
  padding: 1em;
  max-width: 500px;
}

/* The paragraph simply consumes the variables */
.sidebar-paragraph {
  font-family: var(--article-font);
  font-size: var(--article-size);
  line-height: var(--article-lineheight);
  margin-top: var(--article-margin-top);
  margin-bottom: var(--article-margin-bottom);
  margin-left: var(--article-margin-left, 0);
  text-align: left;
}

/* A title style that also uses the same variable system */
.sidebar-title {
  font-family: var(--article-font);
  font-size: calc(var(--article-size) * 1.2);
  margin-bottom: var(--article-margin-bottom);
  margin-left: var(--article-margin-left, 0);
  color: #2a6fbb;
}

.article-container {
  --article-font: Georgia, serif;
  --article-size: 16px;
  --article-lineheight: 1.5;
  --article-margin-top: 12px;
  --article-margin-bottom: 10px;
  --article-margin-left: 0;

  background-color: #ffffff;
  padding: 1.5em;
  border: 1px solid #ddd;
  border-radius: 6px;
  max-width: 700px;
  margin: 0 auto;
}

.article-title {
  font-family: var(--article-font);
  font-size: calc(var(--article-size) * 1.5);
  margin-bottom: var(--article-margin-bottom);
  text-align: center;
  color: #2a6fbb;
}

   /* === Dedicated Centering Utility === */
/* == apply only at the container level to keep
  your markup clean and running smoothly == */
.text-center {
  text-align: center;
}

/* === Video Link enhancements === */
.video-fallback {
  text-align: center;
  padding: 1rem;
  background: var(--bg-soft);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  box-shadow: var(--shadow-sm);
  max-width: 600px;
  margin: 0 auto;
}

.video-thumb {
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  margin-bottom: 0.5rem;
}

.lyric-snippet {
  text-align: center; /* fallback for inline content */
  display: block;     /* ensure it's a block container */
  margin-bottom: 0.5rem;
}

.video-link {
  display: inline-block; /* allows padding and styling */
}

.center-block {
  display: flex;
  justify-content: center;
}

.lyric-snippet {
  margin: 0;
}

.video-link {
  display: inline-block;
}