@charset "UTF-8";

/* ==========================================================
   Panoramic Ministries — Theme Variables (canonical)
   Contract: body.theme-dark flips variables only
   ========================================================== */

:root {
  /* Core */
  --pc-bg: #ffffff;
  --pc-text: #111111;
  --pc-muted: #444444;

  /* Surfaces */
  --pc-surface-1: #fafafa;   /* panels / pericopes */
  --pc-surface-2: #f4f4f4;   /* banners / table headers / code blocks */

  /* Borders + dividers */
  --pc-border: #999999;
  --pc-divider: #999999;

  /* Links */
  --pc-link: #005a8d;
  --pc-link-hover: #0080c0;

  /* TOC / nav */
  --pc-toc-bg: #fdfdfd;
  --pc-banner-bg: #f4f4f4;

  /* Scripture */
  --pc-scripture: var(--pc-text);

  /* Accent surfaces used in a few blocks */
  --pc-highlight-bg: #fef9e7;
  --pc-highlight-border: #d4af37;

  /* ========== Mobile Reading Enhancements Vars ========== */
  --pc-font-size-base: 18px;     /* adjusted in media query */
  --pc-line-height: 1.6;
  --pc-max-width: 72ch;
  --pc-side-pad: 16px;

  /* User-adjustable vars (JS writes to these) */
  --pc-user-font-mult: 1;
  --pc-user-line-mult: 1;

  /* Progress bar percent (JS writes 0–100) */
  --scroll: 0;
}

body.theme-dark {
  --pc-bg: #0f1115;
  --pc-text: #e9e9ea;
  --pc-muted: #d7d7d9;

  --pc-surface-1: #181a1d;
  --pc-surface-2: #16181b;

  --pc-border: #2a2f3a;
  --pc-divider: #2a2f3a;

  --pc-link: #7ab4ff;
  --pc-link-hover: #a7caff;

  --pc-toc-bg: #16181b;
  --pc-banner-bg: #16181b;

  --pc-scripture: #d7d7d9;

  --pc-highlight-bg: #2a2516;
  --pc-highlight-border: #d4af37;
}

/* ==========================================================
   Base
   ========================================================== */

html { box-sizing: border-box; scroll-behavior: smooth; }
*, *::before, *::after { box-sizing: inherit; }

body {
  margin: 2rem auto;
  padding: 0 2rem;
  max-width: 900px;
  font-family: "Open Sans", Arial, sans-serif;
  font-size: calc(var(--pc-font-size-base) * var(--pc-user-font-mult));
  line-height: calc(var(--pc-line-height) * var(--pc-user-line-mult));
  color: var(--pc-text);
  background: var(--pc-bg);
  transition: background 0.3s ease, color 0.3s ease;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Slightly smaller base on narrow screens (avoid clamp() for compatibility) */
@media (max-width: 720px) {
  :root { --pc-font-size-base: 16px; }
}

/* Headings */
h1, h2, h3, h4 {
  font-family: "Cormorant Garamond", "EB Garamond", serif;
  margin: 1.2em 0 0.5em;
  line-height: 1.3;
  font-weight: 600;
  color: var(--pc-text);
}
h1 { font-size: 1.8em; }
h2 { font-size: 1.4em; }
h3 { font-size: 1.2em; }

/* Comfortable paragraph rhythm */
p { margin: 0 0 0.85em; }

/* Links */
a { color: var(--pc-link); }
a:hover { color: var(--pc-link-hover); }

/* ==========================================================
   Layout / Containers
   ========================================================== */

/* Center column, responsive padding (avoid logical props for compatibility) */
.pc-front,
.pc-back,
.pc-pericope,
.pc-body,
main,
section {
  max-width: var(--pc-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--pc-side-pad);
  padding-right: var(--pc-side-pad);
}

/* Pericope container */
.pc-pericope {
  margin: 3rem 0;
  padding: 1rem 2rem;
  border-left: 4px solid var(--pc-border);
  background-color: var(--pc-surface-1);
  border-radius: 4px;
  transition: background 0.3s ease, border-color 0.3s ease;
}

/* Divider */
.pc-divider {
  border: 0;
  border-top: 1px solid var(--pc-divider);
  margin: 2rem 0;
}

/* Core text */
.pc-body { margin: 0.8em 0; }

/* ==========================================================
   Teaching Transcript / Codeblocks
   ========================================================== */

.pc-codeblock {
  max-width: 100%;
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;

  /* Visual containment */
  background: var(--pc-surface-2);
  border-left: 4px solid var(--pc-border);
  border-radius: 4px;

  /* Typography */
  font-family: "Courier New", Courier, monospace;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--pc-text);

  /* CRITICAL FIXES */
  white-space: pre-wrap;        /* preserve line breaks BUT allow wrapping */
  word-wrap: break-word;        /* legacy support */
  overflow-wrap: break-word;    /* modern support */
  overflow-x: auto;             /* safety net for edge cases */
}

/* ==========================================================
   Key Idea / Notes / Prayer
   ========================================================== */

.pc-key-idea__heading {
  font-weight: bold;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--pc-muted);
  margin-top: 1.2em;
}

.pc-key-idea__body {
  font-style: italic;
  color: var(--pc-text);
  margin-left: 1rem;
}

/* Notes */
.pc-notes, .pc-body.notes {
  font-size: 0.9rem;
  color: var(--pc-muted);
  margin-top: 1.2em;
}

/* Prayer stanza */
.pc-prayer__stanza {
  font-style: italic;
  text-indent: 2em;
  margin: 2rem 0;
  color: var(--pc-muted);
  border-left: 2px solid var(--pc-border);
  padding-left: 1rem;
}

/* ==========================================================
   Historic Window and Dance of Life
   ========================================================== */

.pc-historic-window {
  background: var(--pc-surface-1);
  border-left: 3px solid var(--pc-border);
  padding: 0.5rem 1rem;
  margin: 1rem 0;
}

.pc-dance-of-life {
  background: var(--pc-highlight-bg);
  border-left: 3px solid var(--pc-highlight-border);
  padding: 0.5rem 1rem;
  margin: 1rem 0;
  font-style: italic;
}

/* ==========================================================
   Symbol Spotlight Tables
   ========================================================== */

.pc-symbol-spotlight { margin: 2rem 0; overflow-x: auto; }

.pc-symbol-spotlight__table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
  font-size: 0.95rem;
}

.pc-symbol-spotlight__table th,
.pc-symbol-spotlight__table td {
  border: 1px solid var(--pc-border);
  padding: 0.5em 0.8em;
  text-align: left;
}

.pc-symbol-spotlight__table thead {
  background-color: var(--pc-surface-2);
  font-weight: 600;
}

.pc-table--zebra tbody tr:nth-child(even) { background-color: var(--pc-surface-1); }

/* ==========================================================
   Scripture Formatting (universal)
   ========================================================== */

/* Scripture block container (matches <blockquote class="pc-scripture__text">) */
.pc-scripture__text {
  font-size: 0.95em;     /* global scripture size */
  line-height: 1.55;
  margin: 0 0 1em 0;
  color: var(--pc-scripture);
}

/* Scripture paragraph (matches <p data-style="Scripture Para">) */
[data-style="Scripture Para"] {
  font-style: italic;
  margin: 0 0 0.75rem 0;
}

/* Inline scripture */
[data-style="Scripture Inline"],
em.pc-scripture__inline {
  font-style: italic;
  font-size: 0.95em;
  color: var(--pc-scripture);
}

/* Optional: tighter stanza spacing when multiple scripture paragraphs stack */
[data-style="Scripture Para"] + [data-style="Scripture Para"] {
  margin-top: 0;
}
/* ==========================================================
   Book-level blocks (header, intro, addenda, toc)
   ========================================================== */

.pc-home-nav {
  margin: 0 0 1rem 0;
}

.pc-home-nav__link {
  text-decoration: none;
  font-weight: 600;
  color: var(--pc-link);
}

.pc-home-nav__link:hover {
  text-decoration: underline;
  color: var(--pc-link-hover);
}

/* Book header */
.pc-book-header {
  margin: 0 0 1.5rem 0;
  padding: 1rem 1.25rem;
  background: var(--pc-surface-1);
  border: 1px solid var(--pc-border);
  border-radius: 4px;
}

.pc-book-title {
  margin-top: 0;
}

/* Intro + Addenda containers */
.pc-introduction,
.pc-addenda,
.pc-intro-addenda {
  margin: 1.25rem 0;
  padding: 1rem 1.25rem;
  background: var(--pc-surface-1);
  border: 1px solid var(--pc-border);
  border-radius: 4px;
}

/* Canonical TOC container (your site uses .pc-toc, not nav#toc) */
.pc-toc {
  margin: 1.25rem 0 2rem 0;
  padding: 1rem 1.25rem;
  background: var(--pc-toc-bg);
  border: 1px solid var(--pc-border);
  border-radius: 4px;
}

.pc-toc a {
  text-decoration: none;
  color: var(--pc-link);
}

.pc-toc a:hover {
  text-decoration: underline;
  color: var(--pc-link-hover);
}

.pc-toc__list {
  padding-left: 1.2rem;
}

/* =========================
   Addendum Tables — bounded cells + full width (Symbol Spotlight style)
   ========================= */

.pc-figure--full {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.pc-table--full {
  width: 100%;
}

.pc-table--bounded {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;          /* forces wrapping fnd prevents column blowouts */
}

.pc-table--bounded th,
.pc-table--bounded td {
  border: 1px solid var(--pc-border, #d0d0d0);
  padding: 0.6rem 0.75rem;
  vertical-align: top;
  word-break: normal;
  overflow-wrap: anywhere;      /* protects against long tokens */
  hyphens: auto;
}


/* Optional: horizontal scroll on small screens (keeps columns readable) */
.pc-figure .pc-table--bounded {
  display: table;
}

@media (max-width: 768px) {
  .pc-figure {
    overflow-x: auto;
  }
  .pc-table--bounded {
    min-width: 900px;           /* adjust per your column count */
  }
}

/* ==========================================================
   Table of Contents
   ========================================================== */

nav#toc {
  border: 1px solid var(--pc-border);
  background: var(--pc-toc-bg);
  padding: 1rem 2rem;
  margin-bottom: 2rem;
  border-radius: 4px;
}

nav#toc ol { padding-left: 1rem; line-height: 1.5; }

nav#toc a {
  text-decoration: none;
  color: var(--pc-link);
}

nav#toc a:hover { text-decoration: underline; color: var(--pc-link-hover); }

/* ==========================================================
   Appendices
   ========================================================== */

.pc-appendices { margin: 3rem 0; }
.pc-appendix__title { margin-top: 1rem; }

.pc-appendix__back a {
  text-decoration: none;
  color: var(--pc-link);
}

.pc-appendix__back a:hover {
  text-decoration: underline;
  color: var(--pc-link-hover);
}

/* ==========================================================
   Theme Toggle Button
   ========================================================== */

.theme-toggle {
  display: inline-block;
  margin-bottom: 1rem;
  padding: 0.25rem 1rem;
  border: 1px solid var(--pc-border);
  background: var(--pc-highlight-bg);
  color: var(--pc-text);
  cursor: pointer;
  font-size: 0.9rem;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.theme-toggle:hover {
  background: var(--pc-link);
  color: #ffffff;
}

/* ==========================================================
   Top Navigation Banner
   ========================================================== */

.pc-nav-banner {
  background: var(--pc-banner-bg);
  border-bottom: 1px solid var(--pc-border);
  padding: 0.5rem 0;
  text-align: center;

  position: sticky;
  top: 0;
  z-index: 1000;
  -webkit-backdrop-filter: saturate(140%) blur(6px);
  backdrop-filter: saturate(140%) blur(6px);
}

.pc-nav-banner__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-flex;
  gap: 1.5rem;
}

.pc-nav-banner__link {
  text-decoration: none;
  font-weight: 600;
  color: var(--pc-link);
}

.pc-nav-banner__link:hover {
  text-decoration: underline;
  color: var(--pc-link-hover);
}

/* ==========================================================
   Anchors / Sticky Offset
   ========================================================== */

[id]::before {
  content: "";
  display: block;
  height: 72px;    /* height of your sticky header area */
  margin-top: -72px;
}

/* ==========================================================
   Responsive Media
   ========================================================== */

img,
table {
  max-width: 100%;
  height: auto;
}

/* Horizontal scroll for wide tables */
.pc-symbol-spotlight,
.pc-symbol-spotlight__table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Better tap targets */
a,
button { padding: 0.1em 0; }

/* TOC compact on phones */
@media (max-width: 640px) {
  .pc-nav-banner__list { gap: 0.85rem; }
  .pc-front__toc ol,
  .pc-front__toc ul { margin-left: 0; padding-left: 1rem; }
}

/* Reading progress bar (JS updates --scroll). Avoid shorthand 'inset'. */
body::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: auto;
  bottom: auto;
  height: 3px;
  background: linear-gradient(to right, var(--pc-link), transparent);
  width: calc(var(--scroll) * 1%);
  z-index: 1100;
  pointer-events: none;
}

/* Optional: hide gutter anchor icons on small screens */
@media (max-width: 640px) {
  .pc-anchor,
  .pc-gutter { display: none; }
}

/* ==========================================================
   Print
   ========================================================== */

@media print {
  body { margin: 1in; color: #000000; background: #ffffff; }
  a { color: #000000; text-decoration: none; }
  nav#toc, .theme-toggle, .pc-nav-banner { display: none; }
}
/* ==========================================================
   Book-level blocks — aligned, NOT boxed (Canonical)
   ========================================================== */

.pc-book-header,
.pc-introduction,
.pc-addenda,
.pc-intro-addenda,
.pc-toc {
  margin: 1.25rem 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

/* Keep consistent TOC spacing */
.pc-toc__list {
  padding-left: 1.2rem;
}

/* Links consistent across book-level areas */
.pc-toc a,
.pc-home-nav__link {
  text-decoration: none;
  color: var(--pc-link);
}

.pc-toc a:hover,
.pc-home-nav__link:hover {
  text-decoration: underline;
  color: var(--pc-link-hover);
}