@font-face {
    font-family: "ebgaramond";
    src: url("eb-garamond-v26-latin-regular.woff") format('woff');
}    

/* use Gentium - Regular in .woff2 format */
@font-face {
  font-family: GentiumW;
  font-weight: 400;
  src: url(Gentium-Regular.woff2);
}
/* use Gentium - Medium in .woff2 format */
@font-face {
  font-family: GentiumW;
  font-weight: 500;
  src: url(Gentium-Medium.woff2);
}
/* use Gentium - SemiBold in .woff2 format */
@font-face {
  font-family: GentiumW;
  font-weight: 600;
  src: url(Gentium-SemiBold.woff2);
}
/* use Gentium - Bold in .woff2 format */
@font-face {
	font-family: GentiumW;
  font-weight: 700;
	src: url(Gentium-Bold.woff2);
}
/* use Gentium - ExtraBold in .woff2 format */
@font-face {
	font-family: GentiumW;
  font-weight: 800;
	src: url(Gentium-ExtraBold.woff2);
}
/* use Gentium - Italic in .woff2 format */
@font-face {
  font-family: GentiumW;
  font-weight: 400;
  font-style: italic;
  src: url(Gentium-Italic.woff2);
}
/* use Gentium - MediumItalic in .woff2 format */
@font-face {
  font-family: GentiumW;
  font-weight: 500;
  font-style: italic;
  src: url(Gentium-MediumItalic.woff2);
}
/* use Gentium - SemiBoldItalic in .woff2 format */
@font-face {
  font-family: GentiumW;
  font-weight: 600;
  font-style: italic;
  src: url(Gentium-SemiBoldItalic.woff2);
}
/* use Gentium - BoldItalic in .woff2 format */
@font-face {
	font-family: GentiumW;
  font-weight: 700;
  font-style: italic;
	src: url(Gentium-BoldItalic.woff2);
}
/* use Gentium - ExtraBoldItalic in .woff2 format */
@font-face {
	font-family: GentiumW;
  font-weight: 800;
  font-style: italic;
	src: url(Gentium-ExtraBoldItalic.woff2);
}

html {
  scroll-padding-top: 4rem; /* same as your sticky offset */
  -webkit-text-size-adjust: 100%;
}

body {
    font-family: GentiumW, Georgia, 'Times New Roman', Times, serif; 
    font-size: 1.125rem;
    max-width: 36em;
    margin: 0 auto;
    width: 90%;
    position: relative;
    line-height: 1.5em;
}

h1 {
  color: firebrick;
  line-height: 1.2em;
}

.control {
  cursor: url('data:image/x-icon;base64,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'), pointer; 
}

summary,
.word {
  cursor: pointer;
}
.word:hover {
  background-color: rgb(255 228 230);
}

hr {
  border: 1px solid rgba(0,0,0,0.1);
}
details {
  padding: 0.2em 0.2em 0;
}

details[open] {
  padding: 0.2em 0.2em 0;
}

summary {
  font-weight: lighter;
  padding: 0.3em;
}

details[open] summary {
  margin-bottom: -0.2em;
}

body {
  padding: 1em;
}
.source::before {
  content: " \2014";
}
.latin-text {
  line-height: 1.5em;
}
.latin-text .word {
  font-size: 1.1em;
}

.latin-text > details {
  font-family: GentiumW, Georgia, 'Times New Roman', Times, serif; 
  font-size: 14pt;
}

span[data-tippy-content] {
  text-shadow: 0px 1px grey;
  color: black;
  cursor: pointer;  
}
span[data-tippy-content]:hover {
  background-color: rgb(255 228 230);
}
.tippy-box[data-theme~="tomato"] {
  background-color: #4354d9;
  color: white;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol";
}

.tippy-box[data-theme~="tomato"][data-placement^="top"]
  > .tippy-arrow::before {
  border-top-color: #4354d9;
}
.tippy-box[data-theme~="tomato"][data-placement^="bottom"]
  > .tippy-arrow::before {
  border-bottom-color: #4354d9;
}
.tippy-box[data-theme~="tomato"][data-placement^="left"]
  > .tippy-arrow::before {
  border-left-color: #4354d9;
}
.tippy-box[data-theme~="tomato"][data-placement^="right"]
  > .tippy-arrow::before {
  border-right-color: #4354d9;
}

/* === Passage Specific Styles === */

.chapter-header {
    font-size: 1.1rem;
    color: #7f8c8d;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.chapter-ref {
    color: #95a5a6;
    font-size: 0.9rem;
    font-style: normal;
}

.latin-text .translation details summary {
  margin-bottom: -0.2em;
}

.latin-passage {
    font-size: 1.1rem;
    /* line-height: 1.9; */
    color: #2c3e50;
    /* margin-bottom: 20px; */
}

.latin-quote {
  margin-bottom: 0.5em;
}

.latin-passage p {
    /* margin-bottom: 1rem; */
    margin: 0.1rem;
    white-space: normal; /* allow wrapping */
}

/* .passage-nav {
    background-color: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 30px;
} */

.passage-nav h2 {
    margin-top: 0;
    font-size: 1.2rem;
    color: #2c3e50;
}

.passage-separator {
    border-top: 2px solid #bdc3c7;
    /* margin: 40px 0; */
}

.passage dt {
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 5; /* above content */
  border-bottom: 1px solid #ddd;
  padding: 0.5em;
}

.passage dd {
  margin-left: 0;
}

.passage dd .translation details summary {
  margin-bottom: 0em;
}

.passage dd .translation details p {
  margin: 0.2em 0 0 1.5em;
}

.passage dd details .notes {
  margin: -1em 0 0 1.5em;
}


@media (max-width: 768px) {
  .passage dt {
    font-size: 0.9rem;
  }
}

/* === Split Phrase Support === */

/* Base styling for split phrase words */
/* .highlight {
    background-color: #ffffcc;
    padding: 2px 4px;
    border-radius: 3px;
    cursor: pointer;
    transition: background-color 0.2s;
} */

.highlight:hover ~ .highlight {
    background-color: rgb(255 228 230);
}
.highlight:has(~ .highlight:hover) {
    background-color: rgb(255 228 230);
}

.blurred-word, .blurred-word[data-tippy-content] {
    color: transparent;
    text-shadow: 0 0 12px rgba(0, 0, 0, 0.8);
    cursor: pointer;    
    user-select: none;
}

.blurred-word:hover {
    text-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
}

.blurred-word.revealed {
    color: inherit;
    text-shadow: none;
    background-color: #ffffcc;
}

.meaning-explanation {
    margin: 1rem 0;
    padding: 10px 15px;
    background-color: #f8f9fa;
    border-left: 3px solid #95a5a6;
    font-size: 0.95rem;
}

.meaning-explanation p {
    margin-bottom: 0.5rem;
}

.meaning-explanation p:last-child {
    margin-bottom: 0;
}

.meaning-section-header {
  margin-bottom: 1rem;
}

.vocab-entry {
  scroll-margin-top: -2em;
}

.vocab-illustration {
  margin-left: 0em;
  margin-top: 1.2em;
}

.vocab-illustration > .translation {
  margin: 0 0 0 1em;
  padding: 0 0.2em;
}

.vocab-illustration > details > div {
  margin: 0.2em 0 0 1.5em;
  padding: 0 0em;
}

.vocab-illustration > details > div > p {
  margin: 0.2em 0 0;
}


.translation-para {
  margin: 0.2em 0 0.2em 1.5em;
}

.latin-text .notes {
  margin-left: 1.5em;
}

.translation-para:last-of-type {
  margin-bottom: 0;
}


details[open] summary.details-summary {
  margin-bottom: 0;
  padding-bottom: 0;
}

.details-para {
  margin: 0;
}

.chapter-list ul li {
  margin-bottom: 0.25em;
}
.chapter-list ul  {
  list-style: none;
  padding-left: 0;
}

.passage-nav ul {
  list-style: none;
  padding-left: 0;
}

.newline {
  display: flex;
  justify-content: end;
  gap: 0.25em;
}

summary {
  list-style: none;
  cursor: pointer;
  font-weight: 500;
}

summary::-webkit-details-marker {
  display: none;
}

summary::before {
  content: "+";
  color: firebrick;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 1.25em;
  margin-right: 0.1em;

  font-size: 1.4em;      /* size */
  font-weight: 700;      /* boldness */
  line-height: 1;
}

details[open] summary::before {
  content: "–";
  color: firebrick;
}

.chapter-navigation {
  margin-top: 1em;
  display: flex;
  justify-content: center;
  align-items: center;
}

.chapter-navigation a {
  border: 1px solid black;
  padding: 0.2em 0.5em 0.2em;
  background-color: white;
  border-radius: 6px;
  text-decoration: none;
  color: firebrick;
  margin: 0 1em;
  font-size: smaller;
  cursor: pointer;
}

.chapter-navigation a:hover {
  color: white;
  background-color: firebrick;
}

.chapter-navigation #home {
  padding: 0.5em 1em 0.1em;
  background-color: white;
  color: firebrick;
}

.chapter-navigation #home:hover {
  color: white;
  background-color: firebrick;
}

.nod .notes {
    margin-left: 1.5em;
    margin-top: 0.5em;
}

.transcript {
    line-height: 1.5;
}

.cue {
    cursor: pointer;
    padding: 2px 0;
}
.cue:hover {
    background-color: rgba(51, 102, 152, 1.0);
    color: white;
}
.cue.active {
    background: rgba(255, 230, 150, 0.8);
    color: black;
}

.landing ul, .credits ul{
  list-style-position: inside; 
  padding-left: 0em;
  list-style-type: "—";
}

.credits ol {
  list-style-position: inside; 
  padding-left: 0em;
}

.landing ol {
  list-style-position: inside; 
  padding-left: 0em;
}

.landing li, .credits li {
  margin-top: 1em;
}

.landing li p {
  text-indent: 1em;
}

.latin-passage p {
  white-space: normal;
}

@media (max-width: 480px) {
  .latin-passage p {
    /* white-space: nowrap; */
    overflow-x: auto;
  }
}

.play-ecce, .play-ecce-slow {
  color: firebrick;
}

.play-control {
  vertical-align: middle;
}