@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Libre+Baskerville:wght@400;700&display=swap');

.mw-reader-scope {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  --olive-900: #1f3a29;
  --olive-800: #254a32;
  --olive-700: #2c5a3b;
  --olive-600: #356a45;
  --olive-500: #4b7a52;
  --olive-400: #6b8b5e;
  --olive-300: #8ea471;
  --olive-200: #b7c597;
  --olive-100: #dfe7c2;
  --olive-50: #ede6d0;
  --gold-500: #c4a647;
  --ink: #0c0f0a;

  --text-scale: 1;
  --line-spacing: 1;

  --ui-font: 'Libre Baskerville', Georgia, 'Times New Roman', serif;
  --reader-font: 'Libre Baskerville', Georgia, 'Times New Roman', serif;

  --shadow-tile: 0 4px 8px rgba(20, 35, 28, 0.18);
  --shadow-tile-hover: 0 8px 16px rgba(20, 35, 28, 0.25);

  --border-tile: rgba(255, 255, 255, 0.35);
  --border-strong: rgba(13, 32, 22, 0.45);

  --focus-ring: 0 0 0 2px rgba(73, 117, 93, 0.45);

  --header-icon-size: clamp(2rem, 4vw, 2.65rem);
  --selection-toolbar-gap: 40px;
  --selection-toolbar-scale: 0.75;

  --gradient-ot-1: linear-gradient(135deg, #294632, #1e3828);
  --gradient-ot-2: linear-gradient(135deg, #698b58, #4a6e40);
  --gradient-ot-3: linear-gradient(135deg, #3d5835, #2a3f25);
  --gradient-ot-4: linear-gradient(135deg, #213c30, #162e24);
  --gradient-nt-1: linear-gradient(135deg, #2a4738, #1f3629);
  --gradient-nt-2: linear-gradient(135deg, #668859, #4c6e42);
  --gradient-nt-3: linear-gradient(135deg, #4f6a44, #345232);
  --gradient-nt-4: linear-gradient(135deg, #294335, #1c3027);
  --gradient-menu-primary: var(--gradient-ot-4);
  --gradient-menu-secondary: var(--gradient-ot-2);
  --gradient-menu-secondary-hover: var(--gradient-ot-3);
  --gradient-menu-toggle: var(--gradient-nt-1);

  background: var(--olive-50);
  color: var(--ink);
  font-family: var(--ui-font);
  font-size: calc(1rem * var(--text-scale, 1));
  font-weight: 400;
  line-height: 1.5;
}

.mw-reader-scope,
.mw-reader-scope * {
  box-sizing: border-box;
}

.mw-reader-scope h1,
.mw-reader-scope h2,
.mw-reader-scope h3,
.mw-reader-scope h4,
.mw-reader-scope h5,
.mw-reader-scope h6 {
  font-family: var(--ui-font);
  font-weight: 700;
  margin: 0;
}

.mw-reader-scope h1 {
  font-size: 1.6rem;
  line-height: 1.2;
}

.mw-reader-scope h2 {
  font-size: 1.35rem;
  line-height: 1.25;
}

.mw-reader-scope h3 {
  font-size: 1.15rem;
  line-height: 1.3;
}

.mw-reader-scope p,
.mw-reader-scope ul,
.mw-reader-scope ol,
.mw-reader-scope li {
  margin: 0;
}

.mw-reader-scope ul,
.mw-reader-scope ol {
  padding-left: 1.25rem;
}

.mw-reader-scope a {
  color: var(--olive-800);
  cursor: pointer;
  display: inline-block;
  text-decoration: underline;
  transition: color 0.18s ease, transform 0.18s ease;
}

.mw-reader-scope a:hover,
.mw-reader-scope a:focus-visible {
  color: var(--olive-600);
  transform: scale(1.02);
  outline: none;
}

.mw-reader-scope article {
  background: #fff;
  padding: 1rem;
  border-radius: 1rem;
}

.mw-reader-scope article > * + * {
  margin-top: 0.75rem;
}

.mw-reader-scope .olive-frame {
  border: 1px solid rgba(43, 77, 55, 0.25);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.mw-reader-scope .olive-accent {
  color: var(--olive-800);
}

.mw-reader-scope .mw-reader-view {
  font-weight: 400;
  font-family: var(--reader-font);
}

.mw-reader-scope .mw-reader-view,
.mw-reader-scope .mw-reader-view .verse-line,
.mw-reader-scope .mw-reader-view .verse-line span,
.mw-reader-scope .mw-reader-view .verse-num {
  text-shadow: none;
}

.mw-reader-scope .verse-line {
  margin-bottom: 0.85rem;
  line-height: calc(1.7 * var(--line-spacing, 1));
}

.mw-reader-scope .verse-line:last-child {
  margin-bottom: 0;
}

.mw-reader-scope .verse-num {
  font-weight: 600;
  color: var(--olive-700);
  margin-right: 0.35rem;
  display: inline-block;
  min-width: 1.25rem;
  text-align: right;
}

.mw-reader-scope .verse-num-clickable {
  cursor: pointer;
  color: var(--olive-900);
  display: inline-block;
  transition: color 0.2s, transform 0.2s;
}

.mw-reader-scope .verse-num-clickable:hover,
.mw-reader-scope .verse-num-clickable:focus-visible {
  color: var(--olive-600);
  transform: scale(1.08);
}

/* ============================================
   HIGHLIGHTED VERSE (when typing "John 1:1")
   ============================================ */
.mw-reader-scope .verse-highlight {
  background-color: rgba(161, 180, 133, 0.75) !important;
  border-radius: 0;
  padding: 0;
}

/* ============================
   MODES (wrapper modifier classes)
   ============================ */
.mw-reader-scope.sans-mode {
  --ui-font: 'DM Sans', 'Segoe UI', system-ui, sans-serif;
  --reader-font: 'DM Sans', 'Segoe UI', system-ui, sans-serif;
}

.mw-reader-scope.theme-dark {
  background: #111b16;
  color: var(--olive-50);
}

.mw-reader-scope.theme-dark .olive-frame,
.mw-reader-scope.theme-dark article {
  background: #17261f;
  border-color: rgba(255, 255, 255, 0.08);
}

.mw-reader-scope.high-contrast {
  background: #000;
  color: #fff;
}

.mw-reader-scope.high-contrast .olive-frame,
.mw-reader-scope.high-contrast article {
  background: #000;
  border-color: #fff;
  color: inherit;
}

.mw-reader-scope.high-contrast .verse-highlight {
  color: inherit;
  background: transparent !important;
  box-shadow: inset 0 0 0 2px currentColor;
}

.mw-reader-scope.hc-white-black,
.mw-reader-scope.high-contrast.hc-white-black {
  background: #000;
  color: #fff;
}

.mw-reader-scope.hc-white-black .olive-frame,
.mw-reader-scope.hc-white-black article,
.mw-reader-scope.high-contrast.hc-white-black .olive-frame,
.mw-reader-scope.high-contrast.hc-white-black article {
  background: #000;
  color: #fff;
  border-color: #fff;
}

.mw-reader-scope.hc-white-black .verse-highlight,
.mw-reader-scope.high-contrast.hc-white-black .verse-highlight {
  background: #fff !important;
  color: #000 !important;
}

.mw-reader-scope.hc-black-white,
.mw-reader-scope.high-contrast.hc-black-white {
  background: #fff;
  color: #000;
}

.mw-reader-scope.hc-black-white .olive-frame,
.mw-reader-scope.hc-black-white article,
.mw-reader-scope.high-contrast.hc-black-white .olive-frame,
.mw-reader-scope.high-contrast.hc-black-white article {
  background: #fff;
  color: #000;
  border-color: #000;
}

.mw-reader-scope.hc-black-white .verse-highlight,
.mw-reader-scope.high-contrast.hc-black-white .verse-highlight {
  background: #fff !important;
  color: #000 !important;
}

.mw-reader-scope.hc-yellow-black,
.mw-reader-scope.high-contrast.hc-yellow-black {
  background: #000;
  color: #ffe600;
}

.mw-reader-scope.hc-yellow-black .olive-frame,
.mw-reader-scope.hc-yellow-black article,
.mw-reader-scope.high-contrast.hc-yellow-black .olive-frame,
.mw-reader-scope.high-contrast.hc-yellow-black article {
  background: #000;
  color: #ffe600;
  border-color: #ffe600;
}

.mw-reader-scope.hc-yellow-black .verse-highlight,
.mw-reader-scope.high-contrast.hc-yellow-black .verse-highlight {
  background: #000 !important;
  color: #ffe600 !important;
}

.mw-reader-scope.hc-black-yellow,
.mw-reader-scope.high-contrast.hc-black-yellow {
  background: #ffe600;
  color: #000;
}

.mw-reader-scope.hc-black-yellow .olive-frame,
.mw-reader-scope.hc-black-yellow article,
.mw-reader-scope.high-contrast.hc-black-yellow .olive-frame,
.mw-reader-scope.high-contrast.hc-black-yellow article {
  background: #ffe600;
  color: #000;
  border-color: #000;
}

.mw-reader-scope.hc-black-yellow .verse-highlight,
.mw-reader-scope.high-contrast.hc-black-yellow .verse-highlight {
  background: #ffe600 !important;
  color: #000 !important;
}

.mw-reader-scope.hc-navy-yellow,
.mw-reader-scope.high-contrast.hc-navy-yellow {
  background: #ffe680;
  color: #0b2a45;
}

.mw-reader-scope.hc-navy-yellow .olive-frame,
.mw-reader-scope.hc-navy-yellow article,
.mw-reader-scope.high-contrast.hc-navy-yellow .olive-frame,
.mw-reader-scope.high-contrast.hc-navy-yellow article {
  background: #ffe680;
  color: #0b2a45;
  border-color: #0b2a45;
}

.mw-reader-scope.hc-navy-yellow .verse-highlight,
.mw-reader-scope.high-contrast.hc-navy-yellow .verse-highlight {
  background: #ffe680 !important;
  color: #0b2a45 !important;
}

.mw-reader-scope.hc-white-navy,
.mw-reader-scope.high-contrast.hc-white-navy {
  background: #0b213d;
  color: #fefefe;
}

.mw-reader-scope.hc-white-navy .olive-frame,
.mw-reader-scope.hc-white-navy article,
.mw-reader-scope.high-contrast.hc-white-navy .olive-frame,
.mw-reader-scope.high-contrast.hc-white-navy article {
  background: #0b213d;
  color: #fefefe;
  border-color: #fefefe;
}

.mw-reader-scope.hc-white-navy .verse-highlight,
.mw-reader-scope.high-contrast.hc-white-navy .verse-highlight {
  background: #133260 !important;
  color: #fefefe !important;
}