/* 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 */
  background-color: #30261d;
  margin: 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;
}
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; }
figure figcaption {
  font-size: 8.5pt;
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  margin: 4px auto;
  max-width: 90%;
}
figure figcaption strong { font-weight: bold; font-style: italic; }
picture { display: block; margin: auto; width: 50%; }
img { max-width: 100%; height: auto; }

/* Primary verse number (for the main script, e.g., Sentences of Carpocrates) */
.verse-num-primary {
  font-weight: bold;
  color: #d4aa70; /* 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;
}

/* 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;
}

.downloads { justify-content: center; margin: 1rem 0 2rem; display: flex; gap: .75rem; flex-wrap: wrap; }
.downloads .btn { padding: .5rem .8rem; border: 1px solid currentColor; border-radius: .5rem; text-decoration: none; }
.subtitle {
  font-size: min(0.55rem, 2vw);
  font-weight: normal;
  text-transform: uppercase;
  text-align: center;
  white-space: normal;
  word-wrap: break-word;
  display: block;
  margin-top: 0.25em;
}

/* Language nav in footer - add to style.css */
.lang-nav {
  margin: 0.75rem 0;
  font-size: 0.9em;
  text-align: center;
}

.lang-nav a {
  border-bottom: none;
}

.lang-nav a:hover {
  border-bottom: 1px solid currentColor;
}

/* 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;
  }
}