/* Final Joyner Document Format v2.2 Stylesheet (Optimized for Readability and Aesthetics) */

/* General Document Styles */

@keyframes backgroundFlicker {
  0%, 100% { background-color: #1c1b18; }
  50%      { background-color: #30261d; }
}

body {
  font-family: 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
  font-size: 11pt;
  line-height: 1.26;
  color: #f0dbc2; /* softer black for easier reading */
  animation: backgroundFlicker 8s infinite ease-in-out;
  margin: 0;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(255, 160, 90, 0.05), transparent 80%);
  mix-blend-mode: overlay;
  z-index: 0;
}


/* Container for optimal margins and readability */
.container {
  max-width: 700px; /* slightly wider than strict spec for comfortable reading */
  width: 90%;
  margin: 0 auto;
  padding: 1rem 0;
}

footer, footer p { text-align:center; padding:1.25rem 0; }
footer nav a { margin: 0 0.25rem; text-decoration:none; }
footer picture { display:block; margin:0.75rem auto 0; }

/* Title and Author */
h1 {
  font-size: 17pt;
  font-weight: normal;
  line-height: 22pt;
  text-align: center;
  margin: 5em 0 0.2em 0;
}

.author {
  text-align: center;
  margin-bottom: 1em;
}

/* Abstract: Italicized, properly spaced, and justified */
.abstract {
  margin: 0 0.5in 12pt 0.5in; /* Adds space below */
  text-align: justify;
  font-style: italic;
}


/* Body Text */
p {
  text-align: justify;
  margin: 0 0 8.5pt 0;
  color: #f3e4c3; /* Softer black enhances readability */
  line-height: 1.4;
}

/* Headings */
h2, h3, h4 {
  font-size: 11pt;
  font-weight: bold;
  margin: 12pt 0 8.5pt 0;
}

h2 {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: center;
  margin-top: 18pt;
}

h3 {
  font-style: italic;
  text-align: center;
}

h4 {
  font-style: italic;
  display: inline; /* run-in sidehead */
  margin: 0;
}

/* Lists: corrected indentation and hanging bullets/numbers */
ul, ol {
  margin: 0 0 8.5pt 0.75in;
  padding: 0;
  list-style-position: outside;
}

ul li,
ol li {
  padding-left: 0.25in;
  text-indent: -0.25in;
}

ol {
  list-style-type: decimal;
}

/* Blockquote styling for comfortable reading */
blockquote {
  border-left: 2px solid #a77f4f; /* warm brass */
  color: #cdb797;                 /* glowing parchment brown */
  background-color: rgba(40, 30, 20, 0.2); /* candle-sheen backdrop */
  padding-left: 1em;
  font-style: italic;
}

/* Hyperlinks: subtle yet clearly differentiated */
a {
  color: #d8a55c; /* soft amber */
  text-decoration: none;
  border-bottom: 1px dotted #c79e5c;
}

a:hover,
a:focus {
  color: #ffdd99; /* gentle candle-glow */
  border-bottom: 1px solid #ffdd99;
}

/* Images and Figures: responsive and centered */
figure {
  margin: 1.5em auto;
  text-align: center;
}

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

figure figcaption {
  font-size: 8.5pt; /* Smaller than body text */
  font-style: italic;
  text-align: center;
  white-space: nowrap; /* Prevents unwanted line breaks */
  overflow: hidden; /* Ensures no overflow */
  text-overflow: ellipsis; /* Gracefully truncates if too long */
  display: block;
  margin: 4px auto; /* Adjusts spacing */
  max-width: 90%; /* Keeps it responsive */
}

figure figcaption strong {
  font-weight: bold;
  font-style: italic;
}

/* Table styling: centered, readable */
.table-container {
  overflow-x: auto;
  margin: 1em auto;
}

table {
  border-collapse: collapse;
  margin: 0 auto;
  width: 100%;
  max-width: 5.5in;
  border-bottom: 1px solid #888;
}

table caption {
  font-size: 8.5pt;
  line-height: 14pt;
  text-align: center;
  margin-bottom: 4pt;
}

table caption strong {
  font-weight: bold;
  font-style: italic;
}

th,
td {
  font-size: 8.5pt;
  padding: 4px;
}

th {
  border-bottom: 1px solid #555;
}

td.num,
th.num {
  text-align: right;
}

table tbody tr:last-child td {
  border-bottom: 1px solid #555;
}

/* Responsive adjustments for optimal mobile reading */
@media (max-width: 600px) {
  body {
    font-size: 12pt;
  }

  .container {
    width: 95%;
  }

  .abstract,
  blockquote {
    margin-left: 0.25in;
    margin-right: 0.25in;
  }

  ul,
  ol {
    margin-left: 0.5in;
  }

  table caption,
  figure figcaption {
    padding: 0 0.25in;
  }
}

/* Primary verse number (for the main script, e.g., Sentences of Carpocrates) */
.verse-num-primary {
  font-weight: bold;
  color: #222; /* Keeps it visually prominent */
  margin-right: 6px; /* Creates a comfortable space from the next element */
}

/* Referenced verse number (for the cited script, e.g., Sextus) */
.verse-num-ref {
  font-style: italic;
  font-size: 0.85em;
  vertical-align: super; /* Superscript for subtle distinction */
  color: #bfa37b; /* Slightly faded to indicate it's a reference */
  margin-left: 2px; /* Creates separation from the primary number */
  margin-right: 6px; /* Space before the text starts */
}

/* Verse reference names (e.g., "Sextus") in small caps */
.verse-ref {
  font-variant: small-caps;
  font-weight: bold;
  color: #d4aa70;
  margin-left: 4px; /* Space from preceding text */
  margin-right: 2px; /* Space between reference name and verse number */
}

/* Inline citations for cross-referencing verses */
.verse-cite {
  font-size: 0.85em;
  font-style: italic;
  color: #0366d6; /* Subtle blue to indicate it’s a reference */
  text-decoration: none;
  border-bottom: 1px dotted #aaa;
}

.verse-cite:hover {
  color: #003399;
  border-bottom-style: solid;
}

.span-divine {
  font-variant: small-caps;
  font-weight: bold;
  color: #ffcc88; /* divine sparkle highlight */
   text-shadow: 0 0 6px rgba(255, 204, 136, 0.4);
}

.span-sibyl {
  font-variant: small-caps;
  font-weight: normal;
}

.speech-wisdom {
  color: #5ca8c7; /* A deep, calming blue distinct from hyperlinks */
  font-weight: bold; /* Optional: makes it stand out */
}

.speech-king {
  color: #a03a3a; /* Deep, rich red (darker than standard red) */
  font-weight: bold; /* Optional: makes it stand out */
}

/* Ensure everything inside .text-center is actually centered */
.text-center,
.text-center h1,
.text-center h2,
.text-center h3,
.text-center p,
.text-center blockquote {
  text-align: center;
}

@font-face {
  font-family: "Source Serif 4 Display";
  src: url("SourceSerif4Display-Light.ttf.woff2") format("woff2"),
  font-weight: normal;
  font-style: normal;
}

.scripture-title {
  font-family: "Source Serif 4 Display", serif;
  font-size: min(8vw, 3.2rem); /* Dynamically adjusts but never too large */
  font-weight: normal; /* No bold */
  text-transform: uppercase; /* Apple-style elegance */
  letter-spacing: -0.02em; /* Slight negative tracking for vintage print feel */
  text-align: center;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.25); /* Subtle embossed effect */
  margin: 0 auto 0.75em auto; /* Centering */
  max-width: 90vw; /* Ensures it never exceeds the viewport width */
  display: block;
  overflow-wrap: break-word; /* Allows text to break if necessary */
  white-space: normal; /* Allows wrapping on smaller screens */
}

.subtitle {
  font-size: min(0.75rem, 2vw); /* Small but readable */
  font-weight: normal;
  text-transform: uppercase; /* Keeps it formal */
  text-align: center;
  white-space: normal; /* Prevents line breaks */
  word-wrap: break-word;
  display: block;
  margin-top: 0.25em;
}

/* Table of Content Styling */
#table-of-content {
  max-width: 650px;
  margin: 2rem auto;
  padding: 1rem;
  background: rgba(40, 30, 20, 0.4); /* translucent parchment */
  border-left: 4px solid #a77f4f;    /* warm candle brass */
  border-radius: 0 8px 8px 0;
  color: #e0c9a0;
  font-style: italic;
}


#table-of-content ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#table-of-content > ul > li {
  font-size: 12pt;
  font-weight: bold;
  margin-bottom: 0.75rem;
}

#table-of-content ul ul {
  margin-top: 0.25rem;
  padding-left: 1.25rem; /* Indent subsections */
}

#table-of-content ul ul li {
  font-size: 11pt;
  font-weight: normal;
  margin-bottom: 0.5rem;
}

#table-of-content a {
  color: #d8a55c; /* soft amber */
  text-decoration: none;
  border-bottom: 1px dotted #c79e5c;
}

#table-of-content a:hover {
  color: #ffdd99; /* gentle candle-glow */
  border-bottom: 1px solid #ffdd99;
}

#toc-button {
  position: fixed;
  bottom: 15px;
  right: 15px;
  background: #a77f4f; /* warm brass, same as your blockquote border */
  color: #1c1b18; /* dark parchment ink for contrast */
  padding: 10px 15px;
  font-size: 12pt;
  font-weight: bold;
  text-decoration: none;
  border-radius: 5px;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
  opacity: 0; /* Initially hidden */
  transition: opacity 0.3s ease-in-out, background 0.3s ease;
  pointer-events: none;
}

#toc-button:hover {
  background: #d8a55c; /* soft amber on hover */
  color: #1c1b18;
}

@keyframes shimmer-red-blue {
  0% {
    color: #a03a3a; /* deep red */
  }
  50% {
    color: #5ca8c7; /* soft blue */
  }
  100% {
    color: #a03a3a; /* deep red */
  }
}

.logoscript {
  font-weight: bold;
  font-variant: small-caps;
  animation: shimmer-red-blue 6s infinite ease-in-out;
  transition: color 1s ease;
  /*text-shadow: 0 0 2px #1e6091, 0 0 4px #8b0000;*/
}