.container-header {
  background: linear-gradient(to right, #015219, #3cc063);
  padding-top: 0.15rem;
  padding-bottom: 0.15rem;
}

.container-header .grid-child {
  padding-top: 0;
  padding-bottom: 0;
}

.container-footer {background: linear-gradient(to right, #015219, #3cc063);
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.container-footer .grid-child {
  padding-top: 0;
  padding-bottom: 0;
} 

.navbar-brand,
.container-header .grid-child .navbar-brand {
  padding-top: 0;
  padding-bottom: 0;
  margin: 0;
  display: flex;
  align-items: center;
}

.navbar-brand img,
a[href="/"] img,
img[alt="Project ARKHAIA"] {
  max-width: 850px;
  max-height: 70px;   /* drop from 85 if you want it shorter */
  width: auto;        /* swap from 100% — let the image size itself */
  height: auto;
  display: block;
}

.container-header ul.mod-menu.nav-pills > li.metismenu-item > a,
.container-header ul.mod-menu.nav-pills > li.metismenu-item > button.mod-menu__heading {
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
  line-height: 1.2;
}

/* The ul itself often has default browser/Bootstrap margin */
.container-header ul.mod-menu.nav-pills {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
}

/* The module wrapper around the menu */
.container-header .mod-menu-wrapper,
.container-header .moduletable {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.container-header ul.mod-menu.nav-pills > li.metismenu-item.parent {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
}

.container-header ul.mod-menu.nav-pills > li.metismenu-item.parent > .mm-toggler-link {
  flex: 0 0 auto;
  vertical-align: middle;
  align-self: center;
}

body {
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;        /* up from 300 — better legibility at small sizes */
  font-size: 1.25rem;         /* respects browser font preferences; ~16px at default */
  line-height: 2;        /* unitless — scales with font-size */
  color: #333;
  background-color: #fff;
}

.com-content-article__body a:not([class]) {
  color: #1a7e36;
}


ul li, ol li {
  line-height: 2.75;        /* 300% is 3× line height — unusually tall, reined in here */
  font-size: 1.1em;       /* list item text — larger than body */
}

ul li::marker, ol li::marker {
  font-size: 0.5em;        /* marker is relative to the li font-size */
}

h5 {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: #4a5a7a;
  border: 1px solid #4a5a7a;
  display: inline-block;
  padding: 0.2em 0.65em;
  border-radius: 3px;
  letter-spacing: 0.03em;
  margin-bottom: 0.5em;
}

/* ----------------------------------------------------------
   1. SHARED STRUCTURE
   Targets ALL old classes + the new bottom classes
   ---------------------------------------------------------- */
.green-button, .smgreen-button, .red-button, .blue-button, 
.yellow-button, .magenta-button, .purple-button, .smpurple-button, 
.medpurple-button, .orange-button, .medorange-button, .grey-button, 
.red-outline-button,
.bottomnext, .bottomchoice, .bottomspecial, .bottomblue, .bottomred {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 2.1em;
  padding: 0.22em 0.85em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  appearance: none;
  -webkit-appearance: none;
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-decoration: none;
  border-radius: 20px;
  border: 2px solid;
  background: transparent;
  margin: 2px;
  cursor: pointer;

  transition: background-color 0.13s ease, color 0.13s ease, transform 0.08s ease;
}

/* Global Active Animation */
.green-button:active, .red-button:active, .blue-button:active, 
.bottomnext:active, .bottomchoice:active, .bottomred:active {
  transform: scale(0.95);
}

/* ----------------------------------------------------------
   2. SHARED COLORS (Grouping old classes with bottom classes)
   ---------------------------------------------------------- */

/* GREEN */
.green-button, .smgreen-button, .bottomnext {
  border-color: #1a7e36;
  color: #1a7e36 !important;
}
.green-button:hover, .smgreen-button:hover, .bottomnext:hover {
  background-color: #1a7e36;
  color: #fff !important;
}

/* RED */
.red-button, .bottomred {
  border-color: #a63228;
  color: #a63228 !important;
}
.red-button:hover, .bottomred:hover {
  background-color: #a63228;
  color: #fff !important;
}

/* BLUE */
.blue-button, .bottomblue {
  border-color: #2a4d8c;
  color: #2a4d8c !important;
}
.blue-button:hover, .bottomblue:hover {
  background-color: #2a4d8c;
  color: #fff !important;
}

/* MAGENTA / CHOICE */
.magenta-button, .bottomchoice {
  border-color: #992e68;
  color: #992e68 !important;
}
.magenta-button:hover, .bottomchoice:hover {
  background-color: #992e68;
  color: #fff !important;
}

/* ORANGE / SPECIAL */
.orange-button, .medorange-button, .bottomspecial {
  border-color: #b8621f;
  color: #b8621f !important;
}
.orange-button:hover, .medorange-button:hover, .bottomspecial:hover {
  background-color: #b8621f;
  color: #fff !important;
}

/* YELLOW, PURPLE, GREY (Original classes preserved) */
.yellow-button { border-color: #6b6e1a; color: #6b6e1a !important; }
.yellow-button:hover { background-color: #6b6e1a; color: #fff !important; }
.purple-button, .smpurple-button, .medpurple-button { border-color: #5c3d99; color: #5c3d99 !important; }
.purple-button:hover { background-color: #5c3d99; color: #fff !important; }
.grey-button { border-color: #999; color: #999 !important; }
.grey-button:hover { background-color: #999; color: #fff !important; }

/* RED OUTLINE (disabled placeholder) */
.red-outline-button {
  border-color: #e63946;
  color: #e63946 !important;
  opacity: 0.85;
  cursor: not-allowed !important;
}
.red-outline-button:hover {
  background: transparent;
  color: #e63946 !important;
  cursor: not-allowed !important;
}


/* ----------------------------------------------------------
   3. BOTTOM BUTTON SIZE OVERRIDES
   ---------------------------------------------------------- */
.bottomnext, .bottomchoice, .bottomspecial, .bottomblue, .bottomred {
  font-size: 1.25rem;
  padding: 0.4em 1.4em;
  margin: 8px 4px;
}

/* ----------------------------------------------------------
   4. MOBILE
   ---------------------------------------------------------- */
@media (max-width: 480px) {
  .green-button, .red-button, .blue-button, .magenta-button, .purple-button {
    font-size: 0.75rem;
    padding: 0.2em 0.7em;
  }
  .bottomnext, .bottomchoice, .bottomspecial, .bottomblue {
    font-size: 0.88rem;
    padding: 0.35em 1.1em;
  }
  .bottomred {
    font-size: 0.85rem;
    padding: 0.3em 0.9em;
  }
}


.donate-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.4em 1.4em;        /* matches bottom nav button padding */

  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 1rem;              /* matches bottom nav buttons */
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  text-decoration: none;

  border-radius: 20px;          /* pill — consistent with full button system */
  border: none;
  background: #E11845;          /* old deep amber #9e6b10 */
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);

  transition: background-color 0.13s ease, transform 0.08s ease;
}
.donate-button:hover  { background-color: #FF3366; } /* old amber #b87c14 */
.donate-button:active { transform: scale(0.96); }

@media (max-width: 600px) {
  .donate-button {
    font-size: 0.88rem;
    padding: 0.35em 1.1em;
  }
}



.cellpadding td {padding:10px}



/* ----------------------------------------------------------
   SHARED CORE — rules identical across both contexts
   Applied via comma-separated selectors below
   ---------------------------------------------------------- */
.navbar-nav li.donate > a,
ul.mod-menu li a.donate,
ul.mod-menu li.donate > a {
  display: inline-flex !important;    /* needs !important — Joomla core sets display:block */
  align-items: center;
  gap: 0.45em;
  width: auto !important;             /* needs !important — Joomla core sets width:100% */
  height: auto !important;
  line-height: 1;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 1rem;                    /* matches header donate + bottom nav buttons */
  font-weight: 700;
  padding: 0.4em 1.4em !important;   /* needs !important — Joomla core sets nav padding */
  background: #E11845 !important;     /* needs !important — Joomla nav bg override */
  color: #ffffff !important;          /* needs !important — Joomla nav link color override */
  border: none !important;
  border-radius: 20px;                /* pill */
  text-decoration: none !important;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(158, 107, 16, 0.35) !important;
  transition: background-color 180ms ease,
              transform 100ms ease,
              box-shadow 180ms ease;
  margin: auto 0;
}

/* Heart prefix */
.navbar-nav li.donate > a::before,
ul.mod-menu li a.donate::before,
ul.mod-menu li.donate > a::before {
  content: '♥';  /* ♥ */
  font-size: 0.85em;
  color: #ffffff;
  transition: transform 200ms ease;
}

/* Hover */
.navbar-nav li.donate > a:hover,
ul.mod-menu li a.donate:hover,
ul.mod-menu li.donate > a:hover {
  background: #FF3366 !important;     /* needs !important — Joomla hover override */
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(158, 107, 16, 0.45);
}

.navbar-nav li.donate > a:hover::before,
ul.mod-menu li a.donate:hover::before,
ul.mod-menu li.donate > a:hover::before {
  transform: scale(1.25);
}

/* Active / press */
.navbar-nav li.donate > a:active,
ul.mod-menu li a.donate:active,
ul.mod-menu li.donate > a:active {
  transform: scale(0.96);
  box-shadow: 0 1px 4px rgba(158, 107, 16, 0.2);
}

/* Mobile */
@media (max-width: 600px) {
  .navbar-nav li.donate > a,
  ul.mod-menu li a.donate,
  ul.mod-menu li.donate > a {
    font-size: 0.88rem !important;
    padding: 0.35em 1.1em !important;
  }
}


.container-header {background: linear-gradient(to right, #015219, #3cc063);}
.container-footer {background: linear-gradient(to right, #015219, #3cc063);}
/* .com-content-article__body a {color: #025e07} */

.navbar-brand img,
a[href="/"] img,
img[alt="Project ARKHAIA"] {
  width: 100% !important;
  max-width: 850px !important;
  height: auto !important;
}

body {
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;        /* up from 300 — better legibility at small sizes */
  font-size: 1.25rem;         /* respects browser font preferences; ~16px at default */
  line-height: 2;        /* unitless — scales with font-size */
  color: #333;
  background-color: #fff;
}

.com-content-article__body a:not([class]) {
  color: #1a7e36;
}


ul li, ol li {
  line-height: 2.75;        /* 300% is 3× line height — unusually tall, reined in here */
  font-size: 1.1em;       /* list item text — larger than body */
}

ul li::marker, ol li::marker {
  font-size: 0.5em;        /* marker is relative to the li font-size */
}

h5 {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: #4a5a7a;
  border: 1px solid #4a5a7a;
  display: inline-block;
  padding: 0.2em 0.65em;
  border-radius: 3px;
  letter-spacing: 0.03em;
  margin-bottom: 0.5em;
}

/* ----------------------------------------------------------
   1. SHARED STRUCTURE
   Targets ALL old classes + the new bottom classes
   ---------------------------------------------------------- */
.green-button, .smgreen-button, .red-button, .blue-button, 
.yellow-button, .magenta-button, .purple-button, .smpurple-button, 
.medpurple-button, .orange-button, .medorange-button, .grey-button, 
.red-outline-button,
.bottomnext, .bottomchoice, .bottomspecial, .bottomblue, .bottomred {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 2.1em;
  padding: 0.22em 0.85em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  appearance: none;
  -webkit-appearance: none;
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-decoration: none;
  border-radius: 20px;
  border: 2px solid;
  background: transparent;
  margin: 2px;
  cursor: pointer;

  transition: background-color 0.13s ease, color 0.13s ease, transform 0.08s ease;
}

/* Global Active Animation */
.green-button:active, .red-button:active, .blue-button:active, 
.bottomnext:active, .bottomchoice:active, .bottomred:active {
  transform: scale(0.95);
}

/* ----------------------------------------------------------
   2. SHARED COLORS (Grouping old classes with bottom classes)
   ---------------------------------------------------------- */

/* GREEN */
.green-button, .smgreen-button, .bottomnext {
  border-color: #1a7e36;
  color: #1a7e36 !important;
}
.green-button:hover, .smgreen-button:hover, .bottomnext:hover {
  background-color: #1a7e36;
  color: #fff !important;
}

/* RED */
.red-button, .bottomred {
  border-color: #a63228;
  color: #a63228 !important;
}
.red-button:hover, .bottomred:hover {
  background-color: #a63228;
  color: #fff !important;
}

/* BLUE */
.blue-button, .bottomblue {
  border-color: #2a4d8c;
  color: #2a4d8c !important;
}
.blue-button:hover, .bottomblue:hover {
  background-color: #2a4d8c;
  color: #fff !important;
}

/* MAGENTA / CHOICE */
.magenta-button, .bottomchoice {
  border-color: #992e68;
  color: #992e68 !important;
}
.magenta-button:hover, .bottomchoice:hover {
  background-color: #992e68;
  color: #fff !important;
}

/* ORANGE / SPECIAL */
.orange-button, .medorange-button, .bottomspecial {
  border-color: #b8621f;
  color: #b8621f !important;
}
.orange-button:hover, .medorange-button:hover, .bottomspecial:hover {
  background-color: #b8621f;
  color: #fff !important;
}

/* YELLOW, PURPLE, GREY (Original classes preserved) */
.yellow-button { border-color: #6b6e1a; color: #6b6e1a !important; }
.yellow-button:hover { background-color: #6b6e1a; color: #fff !important; }
.purple-button, .smpurple-button, .medpurple-button { border-color: #5c3d99; color: #5c3d99 !important; }
.purple-button:hover { background-color: #5c3d99; color: #fff !important; }
.grey-button { border-color: #999; color: #999 !important; }
.grey-button:hover { background-color: #999; color: #fff !important; }

/* RED OUTLINE (disabled placeholder) */
.red-outline-button {
  border-color: #e63946;
  color: #e63946 !important;
  opacity: 0.85;
  cursor: not-allowed !important;
}
.red-outline-button:hover {
  background: transparent;
  color: #e63946 !important;
  cursor: not-allowed !important;
}


/* ----------------------------------------------------------
   3. BOTTOM BUTTON SIZE OVERRIDES
   ---------------------------------------------------------- */
.bottomnext, .bottomchoice, .bottomspecial, .bottomblue, .bottomred {
  font-size: 1.25rem;
  padding: 0.4em 1.4em;
  margin: 8px 4px;
}

/* ----------------------------------------------------------
   4. MOBILE
   ---------------------------------------------------------- */
@media (max-width: 480px) {
  .green-button, .red-button, .blue-button, .magenta-button, .purple-button {
    font-size: 0.75rem;
    padding: 0.2em 0.7em;
  }
  .bottomnext, .bottomchoice, .bottomspecial, .bottomblue {
    font-size: 0.88rem;
    padding: 0.35em 1.1em;
  }
  .bottomred {
    font-size: 0.85rem;
    padding: 0.3em 0.9em;
  }
}


.donate-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.4em 1.4em;        /* matches bottom nav button padding */

  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 1rem;              /* matches bottom nav buttons */
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  text-decoration: none;

  border-radius: 20px;          /* pill — consistent with full button system */
  border: none;
  background: #E11845;          /* old deep amber #9e6b10 */
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);

  transition: background-color 0.13s ease, transform 0.08s ease;
}
.donate-button:hover  { background-color: #FF3366; } /* old amber #b87c14 */
.donate-button:active { transform: scale(0.96); }

@media (max-width: 600px) {
  .donate-button {
    font-size: 0.88rem;
    padding: 0.35em 1.1em;
  }
}



.cellpadding td {padding:10px}



/* ----------------------------------------------------------
   SHARED CORE — rules identical across both contexts
   Applied via comma-separated selectors below
   ---------------------------------------------------------- */
.navbar-nav li.donate > a,
ul.mod-menu li a.donate,
ul.mod-menu li.donate > a {
  display: inline-flex !important;    /* needs !important — Joomla core sets display:block */
  align-items: center;
  gap: 0.45em;
  width: auto !important;             /* needs !important — Joomla core sets width:100% */
  height: auto !important;
  line-height: 1;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 1rem;                    /* matches header donate + bottom nav buttons */
  font-weight: 700;
  padding: 0.4em 1.4em !important;   /* needs !important — Joomla core sets nav padding */
  background: #E11845 !important;     /* needs !important — Joomla nav bg override */
  color: #ffffff !important;          /* needs !important — Joomla nav link color override */
  border: none !important;
  border-radius: 20px;                /* pill */
  text-decoration: none !important;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(158, 107, 16, 0.35) !important;
  transition: background-color 180ms ease,
              transform 100ms ease,
              box-shadow 180ms ease;
  margin: auto 0;
}

/* Heart prefix */
.navbar-nav li.donate > a::before,
ul.mod-menu li a.donate::before,
ul.mod-menu li.donate > a::before {
  content: '♥';  /* ♥ */
  font-size: 0.85em;
  color: #ffffff;
  transition: transform 200ms ease;
}

/* Hover */
.navbar-nav li.donate > a:hover,
ul.mod-menu li a.donate:hover,
ul.mod-menu li.donate > a:hover {
  background: #FF3366 !important;     /* needs !important — Joomla hover override */
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(158, 107, 16, 0.45);
}

.navbar-nav li.donate > a:hover::before,
ul.mod-menu li a.donate:hover::before,
ul.mod-menu li.donate > a:hover::before {
  transform: scale(1.25);
}

/* Active / press */
.navbar-nav li.donate > a:active,
ul.mod-menu li a.donate:active,
ul.mod-menu li.donate > a:active {
  transform: scale(0.96);
  box-shadow: 0 1px 4px rgba(158, 107, 16, 0.2);
}

/* Mobile */
@media (max-width: 600px) {
  .navbar-nav li.donate > a,
  ul.mod-menu li a.donate,
  ul.mod-menu li.donate > a {
    font-size: 0.88rem !important;
    padding: 0.35em 1.1em !important;
  }
}


/* =============================================================
   LATIN SIDE GLOSS READER — CSS Overrides
   Paste into: Joomla > System > Site Template Styles >
               Cassiopeia > [your style] > User CSS tab
               (or templates/cassiopeia/css/user.css)

   All rules are scoped to .latin-reader so there is no
   risk of collision with Joomla or Bootstrap styles.

   Companion script: latin-reader.js (loaded site-wide).
   The script powers cross-paragraph lemma highlighting
   by toggling .lemma-active on every <strong> and
   .gloss-entry sharing the same lemma-X class.
   ============================================================= */

/* ── Outer wrapper ─────────────────────────────────────────── */

.latin-reader {
  border: 1px solid #c8b89a;
  border-radius: 4px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
}

/* Tiered variant: lives inside an accordion that already provides its own
   frame, so the inner border becomes redundant. Drop the border and the
   border-radius; keep padding modest so content sits neatly within the
   accordion panel. */
.latin-reader.latin-reader--tiered {
  border: none;
  border-radius: 0;
  padding: 0.5rem 0;
  margin-bottom: 0;
}

/* ── Title bar ─────────────────────────────────────────────── */

.latin-reader .reader-title {
  font-size: 1.6rem;
  font-weight: bold;
  margin-bottom: 1.1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #c8b89a;
  letter-spacing: 0.02em;
}

.latin-reader .reader-title .tier-label {
  font-weight: normal;
}

/* ── Paragraph pair ────────────────────────────────────────── */
/*
   Each .latin-pair is one Bootstrap row pairing a Latin
   paragraph with its corresponding glosses. No visible
   divider between pairs — separation is whitespace only.
*/

.latin-reader .latin-pair {
  margin-bottom: 1.1rem;
}

.latin-reader .latin-pair:last-child {
  margin-bottom: 0;
}

/* ── Latin text column ─────────────────────────────────────── */
/*
   Each .latin-text div also carries class="alpheios-enabled"
   and lang="lat" so the Alpheios embedded library can attach
   to the Latin text in every paragraph. See template markup.
*/

.latin-reader .latin-text {
  font-size: 1.3rem;
  line-height: 2.0;
  padding-right: 1rem;
  border-right: 1px solid #c8b89a;
}

.latin-reader .latin-text strong,
.latin-reader .latin-text b {
  font-weight: 700;
}

/* Greek text inline */
.latin-reader .latin-text .greek {
  font-style: italic;
}

/* ── Gloss column ──────────────────────────────────────────── */

.latin-reader .gloss-panel {
  font-size: 1rem;
  line-height: 1.65;
  padding-left: 1rem;
}

/*
   .gloss-heading appears only in the FIRST .latin-pair.
   Omit it from all subsequent pairs.
*/
.latin-reader .gloss-panel .gloss-heading {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: bold;
  margin-bottom: 0.4rem;
  border-bottom: 1px solid #c8b89a;
  padding-bottom: 0.2rem;
}

/* ── Individual gloss entry ────────────────────────────────── */

.latin-reader .gloss-entry {
  margin-bottom: 0.35rem;
}

.latin-reader .gloss-entry:last-child {
  margin-bottom: 0;
}

.latin-reader .gloss-entry .gloss-term {
  font-weight: 700;
}

.latin-reader .gloss-entry .gloss-sep {
  margin: 0 0.2em;
}

.latin-reader .gloss-entry .gloss-def {
  font-style: italic;
}

/* ---------------------------------------------------------------
   Gloss hover highlighting — within paragraph
   Requires: .gloss-ref.gloss-N on <strong> in latin-text
             .gloss-entry.gloss-N on matching .gloss-entry div
   Uses :has() — supported in all modern browsers (Chrome 105+,
   Firefox 121+, Safari 15.4+).
   Numbering is local to each .latin-pair and resets at every
   new paragraph. Supports up to gloss-25 per paragraph.
--------------------------------------------------------------- */

/* Hovering the bold word highlights its gloss entry */
.latin-pair:has(.gloss-ref.gloss-1:hover) .gloss-entry.gloss-1,
.latin-pair:has(.gloss-ref.gloss-2:hover) .gloss-entry.gloss-2,
.latin-pair:has(.gloss-ref.gloss-3:hover) .gloss-entry.gloss-3,
.latin-pair:has(.gloss-ref.gloss-4:hover) .gloss-entry.gloss-4,
.latin-pair:has(.gloss-ref.gloss-5:hover) .gloss-entry.gloss-5,
.latin-pair:has(.gloss-ref.gloss-6:hover) .gloss-entry.gloss-6,
.latin-pair:has(.gloss-ref.gloss-7:hover) .gloss-entry.gloss-7,
.latin-pair:has(.gloss-ref.gloss-8:hover) .gloss-entry.gloss-8,
.latin-pair:has(.gloss-ref.gloss-9:hover) .gloss-entry.gloss-9,
.latin-pair:has(.gloss-ref.gloss-10:hover) .gloss-entry.gloss-10,
.latin-pair:has(.gloss-ref.gloss-11:hover) .gloss-entry.gloss-11,
.latin-pair:has(.gloss-ref.gloss-12:hover) .gloss-entry.gloss-12,
.latin-pair:has(.gloss-ref.gloss-13:hover) .gloss-entry.gloss-13,
.latin-pair:has(.gloss-ref.gloss-14:hover) .gloss-entry.gloss-14,
.latin-pair:has(.gloss-ref.gloss-15:hover) .gloss-entry.gloss-15,
.latin-pair:has(.gloss-ref.gloss-16:hover) .gloss-entry.gloss-16,
.latin-pair:has(.gloss-ref.gloss-17:hover) .gloss-entry.gloss-17,
.latin-pair:has(.gloss-ref.gloss-18:hover) .gloss-entry.gloss-18,
.latin-pair:has(.gloss-ref.gloss-19:hover) .gloss-entry.gloss-19,
.latin-pair:has(.gloss-ref.gloss-20:hover) .gloss-entry.gloss-20,
.latin-pair:has(.gloss-ref.gloss-21:hover) .gloss-entry.gloss-21,
.latin-pair:has(.gloss-ref.gloss-22:hover) .gloss-entry.gloss-22,
.latin-pair:has(.gloss-ref.gloss-23:hover) .gloss-entry.gloss-23,
.latin-pair:has(.gloss-ref.gloss-24:hover) .gloss-entry.gloss-24,
.latin-pair:has(.gloss-ref.gloss-25:hover) .gloss-entry.gloss-25,
{
  background-color: #f5ecd7;
  border-radius: 3px;
  padding: 0 0.2em;
  margin-left: -0.2em;
}

/* Hovering the gloss entry highlights the matching bold word(s) */
.latin-pair:has(.gloss-entry.gloss-1:hover) .gloss-ref.gloss-1,
.latin-pair:has(.gloss-entry.gloss-2:hover) .gloss-ref.gloss-2,
.latin-pair:has(.gloss-entry.gloss-3:hover) .gloss-ref.gloss-3,
.latin-pair:has(.gloss-entry.gloss-4:hover) .gloss-ref.gloss-4,
.latin-pair:has(.gloss-entry.gloss-5:hover) .gloss-ref.gloss-5,
.latin-pair:has(.gloss-entry.gloss-6:hover) .gloss-ref.gloss-6,
.latin-pair:has(.gloss-entry.gloss-7:hover) .gloss-ref.gloss-7,
.latin-pair:has(.gloss-entry.gloss-8:hover) .gloss-ref.gloss-8,
.latin-pair:has(.gloss-entry.gloss-9:hover) .gloss-ref.gloss-9,
.latin-pair:has(.gloss-entry.gloss-10:hover) .gloss-ref.gloss-10,
.latin-pair:has(.gloss-entry.gloss-11:hover) .gloss-ref.gloss-11,
.latin-pair:has(.gloss-entry.gloss-12:hover) .gloss-ref.gloss-12,
.latin-pair:has(.gloss-entry.gloss-13:hover) .gloss-ref.gloss-13,
.latin-pair:has(.gloss-entry.gloss-14:hover) .gloss-ref.gloss-14,
.latin-pair:has(.gloss-entry.gloss-15:hover) .gloss-ref.gloss-15,
.latin-pair:has(.gloss-entry.gloss-16:hover) .gloss-ref.gloss-16,
.latin-pair:has(.gloss-entry.gloss-17:hover) .gloss-ref.gloss-17,
.latin-pair:has(.gloss-entry.gloss-18:hover) .gloss-ref.gloss-18,
.latin-pair:has(.gloss-entry.gloss-19:hover) .gloss-ref.gloss-19,
.latin-pair:has(.gloss-entry.gloss-20:hover) .gloss-ref.gloss-20,
.latin-pair:has(.gloss-entry.gloss-21:hover) .gloss-ref.gloss-21,
.latin-pair:has(.gloss-entry.gloss-22:hover) .gloss-ref.gloss-22,
.latin-pair:has(.gloss-entry.gloss-23:hover) .gloss-ref.gloss-23,
.latin-pair:has(.gloss-entry.gloss-24:hover) .gloss-ref.gloss-24,
.latin-pair:has(.gloss-entry.gloss-25:hover) .gloss-ref.gloss-25,
{
  background-color: #f5ecd7;
  border-radius: 2px;
  padding: 0 0.1em;
}

/* ---------------------------------------------------------------
   Cross-paragraph lemma highlighting (driven by latin-reader.js)
   When the user hovers a <strong> or .gloss-entry carrying a
   lemma-X class, the script adds .lemma-active to every other
   element in the same .latin-reader sharing that lemma-X class.
   This bridges across .latin-pair blocks so a word can be
   glossed once per passage and still hover-highlight wherever
   it reappears.

   The panel uses a single-slot reveal model: gloss entries are
   hidden by default and only the active one becomes visible.
   The .gloss-heading (column label) remains visible at all
   times in the first paragraph's panel.
--------------------------------------------------------------- */

/* Highlight the bolded word in the Latin column when its lemma is active */
.latin-reader .latin-text .lemma-active {
  background-color: #f5ecd7;
  border-radius: 3px;
  padding: 0 0.2em;
  margin-left: -0.2em;
}

/* Hide all gloss entries by default — single-slot reveal */
.latin-reader .gloss-entry {
  display: none;
}

/* Reveal only the entry whose lemma is currently active */
.latin-reader .gloss-entry.lemma-active {
  display: block;
}

/* Reserve panel column height so the page doesn't reflow when
   a gloss appears or disappears. The min-height matches roughly
   two lines of gloss content at the panel's font-size. */
.latin-reader .gloss-panel {
  min-height: 3.5em;
}

/* Cursor cue on glossed words */
.latin-reader .latin-text .gloss-ref {
  cursor: default;
}

/* ── Responsive ────────────────────────────────────────────── */

@media (max-width: 480px) {
  .latin-reader .latin-text {
    font-size: 0.88rem;
    padding-right: 0.6rem;
  }
  .latin-reader .gloss-panel {
    font-size: 0.72rem;
    padding-left: 0.6rem;
  }
}