html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

.lesson-content h4 {
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
  font-weight: 600;
}

.lesson-content p {
  margin-bottom: 1rem;
}

.lesson-content h4:first-child {
  margin-top: 0;
}

/* ---------------------------------------------------------------------
   Scholarly / parchment theme
   --------------------------------------------------------------------- */

:root {
  --bg-parchment: #f7efdb;
  --bg-parchment-alt: #efe4c6;
  --bg-ink: #2c3e63;
  --bg-ink-dark: #1f2c48;
  --bg-gold: #b08d57;
  --bg-gold-light: #cba86a;
}

[data-bs-theme="light"] {
  --bs-body-bg: var(--bg-parchment);
  --bs-body-color: #3a2f22;
  --bs-primary: var(--bg-ink);
  --bs-primary-rgb: 44, 62, 99;
  --bs-success: #4d7a52;
  --bs-link-color: var(--bg-ink);
  --bs-link-hover-color: var(--bg-ink-dark);
}

[data-bs-theme="light"] body {
  background-color: var(--bg-parchment);
  background-image:
    radial-gradient(circle at 15% 20%, rgba(176, 141, 87, 0.06), transparent 40%),
    radial-gradient(circle at 85% 75%, rgba(44, 62, 99, 0.05), transparent 45%),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.015) 0px, rgba(0, 0, 0, 0.015) 1px, transparent 1px, transparent 3px);
  background-attachment: fixed;
}

[data-bs-theme="light"] .navbar,
[data-bs-theme="light"] .footer {
  background-color: var(--bg-parchment-alt) !important;
}

[data-bs-theme="light"] .card,
[data-bs-theme="light"] .accordion-item,
[data-bs-theme="light"] .list-group-item,
[data-bs-theme="light"] .modal-content {
  background-color: #fffdf6;
}

[data-bs-theme="light"] .btn-primary {
  background-color: var(--bg-ink);
  border-color: var(--bg-ink);
}

[data-bs-theme="light"] .btn-primary:hover {
  background-color: var(--bg-ink-dark);
  border-color: var(--bg-ink-dark);
}

[data-bs-theme="light"] .btn-outline-primary {
  color: var(--bg-ink);
  border-color: var(--bg-ink);
}

[data-bs-theme="light"] .btn-outline-primary:hover {
  background-color: var(--bg-ink);
  border-color: var(--bg-ink);
}

[data-bs-theme="dark"] {
  --bs-body-bg: #171c26;
  --bs-body-color: #e9e1cd;
  --bs-primary: var(--bg-gold-light);
  --bs-primary-rgb: 203, 168, 106;
  --bs-link-color: var(--bg-gold-light);
  --bs-link-hover-color: #ddc086;
}

[data-bs-theme="dark"] body {
  background-color: #171c26;
  background-image:
    radial-gradient(circle at 15% 20%, rgba(176, 141, 87, 0.08), transparent 45%),
    radial-gradient(circle at 85% 75%, rgba(203, 168, 106, 0.05), transparent 45%);
}

[data-bs-theme="dark"] .navbar,
[data-bs-theme="dark"] .footer {
  background-color: #1f2530 !important;
}

[data-bs-theme="dark"] .navbar .nav-link,
[data-bs-theme="dark"] .navbar-brand {
  color: #e9e1cd !important;
}

[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .accordion-item,
[data-bs-theme="dark"] .list-group-item,
[data-bs-theme="dark"] .modal-content {
  background-color: #1f2530;
  color: #e9e1cd;
}

[data-bs-theme="dark"] .btn-primary,
[data-bs-theme="dark"] .btn-success {
  color: #1f2530;
}

/* Greek text legibility: larger, clearer serif with room for diacritics */
h1, h2, h3,
[lang="grc"] {
  font-family: "Cardo", "Gentium Plus", "Palatino Linotype", Georgia, serif;
}

[lang="grc"] {
  font-size: 1.25em;
  line-height: 1.8;
  letter-spacing: 0.01em;
}

/* Ensure highlighted words in context passage previews stay bold with the Greek font.
   Cardo's bold weight is too subtle (especially with polytonic diacritics) to read as
   emphasized at a glance, so matched words switch to Noto Serif, which has a distinctly
   heavier bold face with full Greek/diacritic coverage. */
[lang="grc"] strong,
[lang="grc"] b {
  font-family: "Noto Serif", "Cardo", "Gentium Plus", "Palatino Linotype", Georgia, serif;
  font-weight: 700;
  color: var(--bg-ink);
}

[data-bs-theme="dark"] [lang="grc"] strong,
[data-bs-theme="dark"] [lang="grc"] b {
  color: var(--bg-gold-light);
}

/* Hero section on the home page */
.hero-section {
  padding: 4rem 2rem;
  border-radius: 0.75rem;
  background-color: rgba(176, 141, 87, 0.08);
  border: 1px solid rgba(176, 141, 87, 0.25);
}

[data-bs-theme="dark"] .hero-section {
  background-color: rgba(203, 168, 106, 0.06);
  border-color: rgba(203, 168, 106, 0.2);
}

/* Lessons card/list view toggle */
.lessons-view-toggle .btn.active {
  background-color: var(--bg-ink);
  border-color: var(--bg-ink);
  color: #fffdf6;
}

[data-bs-theme="dark"] .lessons-view-toggle .btn.active {
  background-color: var(--bg-gold-light);
  border-color: var(--bg-gold-light);
  color: #1f2530;
}

.lesson-card {
  transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.lesson-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 0.5rem 1rem rgba(44, 62, 99, 0.15);
}

.year-progress {
  height: 0.6rem;
}

/* Completion checkmark badge */
.completion-checkmark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: #4d7a52;
  color: #fff;
  animation: checkmark-pop 0.4s ease-out;
}

@keyframes checkmark-pop {
  0% { transform: scale(0); opacity: 0; }
  70% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); }
}

/* Immersive Reader: Greek word + translation textbox pairs that flow and wrap at the
   right margin, continuing on the next line as needed. */
.immersive-reader-container {
  display: flex;
  flex-wrap: wrap;
}

.immersive-word {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  margin: 0.25rem;
}

.immersive-verse-marker {
  display: inline-flex;
  align-items: center;
  font-size: 0.8rem;
  font-weight: bold;
  color: var(--bs-secondary-color);
  align-self: center;
  margin: 0.25rem 0.1rem 0.25rem 0.5rem;
}

.immersive-word-label {
  font-family: "Noto Serif", serif;
  font-size: 1.1rem;
  margin-bottom: 0.25rem;
  white-space: nowrap;
}

.immersive-word-strongs {
  font-size: 0.75rem;
  color: var(--bs-secondary-color);
  margin-bottom: 0.25rem;
  text-decoration: none;
}

.immersive-word-strongs:hover {
  text-decoration: underline;
}

.immersive-word-input {
  width: 6rem;
  text-align: center;
}

/* Zipfian frequency tiers: Tier 1 (Core, 50+ occurrences) is intentionally left unstyled so
   the eye snaps to the rarer, more challenging words instead. */

.immersive-word[data-tier="2"] .immersive-word-label,
.immersive-tier-legend-item[data-tier="2"] .immersive-word-label {
  text-decoration: underline;
  text-decoration-color: #4d7a52;
  text-decoration-thickness: 2px;
}

.immersive-word[data-tier="3"] .immersive-word-label,
.immersive-tier-legend-item[data-tier="3"] .immersive-word-label {
  color: #b8860b;
}

.immersive-word[data-tier="4"] .immersive-word-label,
.immersive-tier-legend-item[data-tier="4"] .immersive-word-label {
  color: #c0392b;
}

.immersive-word[data-tier="5"] .immersive-word-label,
.immersive-tier-legend-item[data-tier="5"] .immersive-word-label {
  color: #aad4ff;
  font-weight: 700;
  background-color: #1f3a5f;
  padding: 0 0.15rem;
  border-radius: 0.2rem;
}

.immersive-word[data-tier="unknown"] .immersive-word-label,
.immersive-tier-legend-item[data-tier="unknown"] .immersive-word-label {
  color: var(--bs-secondary-color);
  border-bottom: 1px dashed var(--bs-secondary-color);
}

.immersive-tier-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.9rem;
  font-size: 0.85rem;
}

.immersive-tier-legend-title {
  font-weight: 600;
  margin-right: 0.25rem;
}

.immersive-tier-legend-item .immersive-word-label {
  font-size: 0.85rem;
  white-space: nowrap;
}

[data-bs-theme="dark"] .immersive-word[data-tier="2"] .immersive-word-label,
[data-bs-theme="dark"] .immersive-tier-legend-item[data-tier="2"] .immersive-word-label {
  text-decoration-color: #7ab07f;
}

[data-bs-theme="dark"] .immersive-word[data-tier="3"] .immersive-word-label,
[data-bs-theme="dark"] .immersive-tier-legend-item[data-tier="3"] .immersive-word-label {
  color: #e0b84d;
}

[data-bs-theme="dark"] .immersive-word[data-tier="4"] .immersive-word-label,
[data-bs-theme="dark"] .immersive-tier-legend-item[data-tier="4"] .immersive-word-label {
  color: #ff6b5b;
}

[data-bs-theme="dark"] .immersive-word[data-tier="5"] .immersive-word-label,
[data-bs-theme="dark"] .immersive-tier-legend-item[data-tier="5"] .immersive-word-label {
  color: #cfe6ff;
  background-color: #14223a;
}

/* Grammar Diagram: the generated SVG's viewBox width can exceed the container (long verses
   produce wide diagrams), so without explicit sizing the browser renders it at its native
   pixel dimensions and it overflows the page. Scale it down to fit, but allow horizontal
   scrolling (rather than further shrinking illegibly) when a diagram is still wider than the
   viewport even at 100% container width. */
.grammar-diagram-svg {
  width: 100%;
  overflow-x: auto;
}

.grammar-diagram-svg svg {
  display: block;
  max-width: 100%;
  height: auto;
}

.context-chapter-greek {
  max-height: 320px;
  overflow-y: auto;
  padding: 0.5rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.25rem;
  line-height: 1.8;
}

.context-chapter-columns {
  display: flex;
  gap: 0.75rem;
}

.context-chapter-pane {
  flex: 1 1 50%;
  min-width: 0;
  max-height: 320px;
  overflow-y: auto;
  padding: 0.5rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.25rem;
  line-height: 1.8;
}

.context-chapter-english {
  font-style: normal;
}

.context-chapter-verse-number {
  color: var(--bs-secondary-color);
  font-weight: 600;
}

.context-chapter-verse-target {
  background-color: #ffe08a;
  color: #212529;
  border-radius: 0.2rem;
  padding: 0.1rem 0.2rem;
}