/* modern.css — loaded after style.css on every canon page.
   It only overrides; the old stylesheets stay untouched.
   !important is used where old markup sets widths/fonts inline. */

/* Charis SIL: covers Cyrillic and all Pāli diacritics. The same files are
   referenced by the old fonts.css; check that /fonts/charsil/ exists on the
   server (or replace with self-hosted Noto Serif woff2). */
@font-face { font-family: "CharisSILW"; font-display: swap;
  src: url(../fonts/charsil/CharisSIL-R.woff) format("woff"); }
@font-face { font-family: "CharisSILW"; font-style: italic; font-display: swap;
  src: url(../fonts/charsil/CharisSIL-I.woff) format("woff"); }
@font-face { font-family: "CharisSILW"; font-weight: bold; font-display: swap;
  src: url(../fonts/charsil/CharisSIL-B.woff) format("woff"); }
@font-face { font-family: "CharisSILW"; font-weight: bold; font-style: italic; font-display: swap;
  src: url(../fonts/charsil/CharisSIL-BI.woff) format("woff"); }

:root {
  --text: #222; --muted: #666; --bg: #fdfcf9; --link: #0b55a8;
  --rule: #ddd6c8; --pali: #5b4a30; --accent: #f3efe6;
  --measure: 40em;
  --serif: "CharisSILW", "Charis SIL", "Noto Serif", "Gentium Plus",
           "Gentium Book Plus", "DejaVu Serif", Georgia, serif;
}

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  max-width: var(--measure) !important;
  margin: 0 auto !important;
  padding: 1rem clamp(1rem, 4vw, 2.5rem) 3rem !important;
  font-family: var(--serif) !important;   /* beats inline "VU Times, ..." */
  font-size: 1.0625rem; line-height: 1.6;
  color: var(--text); background: var(--bg) !important;
  overflow-wrap: break-word;
}
body:has(table[data-parallel]) { --measure: 76em; }

/* legacy <font face=...> and per-element font stacks */
font[face], td, p, li, dir, blockquote { font-family: inherit !important; }
td.tdPaliSource, p.pPaliSource { font-size: inherit; letter-spacing: normal; }

h1, h2, h3 { line-height: 1.25; font-weight: 600; }
h1 { font-size: clamp(1.45rem, 4.5vw, 2rem); margin: .4em 0 .2em; }
h2 { font-size: clamp(1.15rem, 3.5vw, 1.4rem); margin: 1.2em 0 .4em; }
h3 { font-size: 1.1rem; }

p { margin: 0 0 .8em; }
[align="justify"], p { hyphens: auto; }
@media (max-width: 40em) {                 /* justified text on phones = rivers */
  [align="justify"] { text-align: left !important; }
}

a:link, a:visited { color: var(--link); }
a:hover { color: #0a7a3a; }

hr { border: 0; border-top: 1px solid var(--rule); margin: 1.5em 0; }
img, video, iframe { max-width: 100%; height: auto; }
dir, blockquote { margin-left: clamp(.75rem, 4vw, 2.5rem); padding-left: 0; }

/* fixed-width boxes such as the "Словами Будды" notice (482px) */
table { max-width: 100% !important; }
table[style*="width"], table[width] { width: auto !important; height: auto !important; }
table[data-parallel] { width: 100% !important; }

/* footnote anchors: don't hide target under the top edge */
:target { scroll-margin-top: 4rem; }
:target:not(a), a:target + * { background: #fff6cc; }

/* ------------------------------------------------ bilingual tables */
/* rows as flex boxes: Russian always first/left, whatever the source order */
table[data-parallel], table[data-parallel] > tbody { display: block; }
table[data-parallel] > colgroup { display: none; }
table[data-parallel] tr { display: flex; gap: 2em; margin-bottom: .6em; }
table[data-parallel] td {
  display: block; flex: 1 1 0; min-width: 0;
  padding: 0 !important; border: 0 !important;
}
table[data-parallel] td:lang(ru) { order: -1; }
table[data-parallel] td:lang(pi) { color: var(--pali); font-size: .95em; }
table[data-parallel] td p { margin-bottom: .6em; }

html.hide-pi table[data-parallel] td:lang(pi),
html.hide-ru table[data-parallel] td:lang(ru) { display: none; }
html.hide-pi table[data-parallel] td,
html.hide-ru table[data-parallel] td { width: auto !important; }

@media (max-width: 48em) {
  table[data-parallel] tr {
    flex-direction: column; gap: 0; margin: 0;
    padding: .4em 0; border-bottom: 1px solid var(--rule);
  }
  table[data-parallel] td { flex: none; width: auto !important; padding: .15em 0 !important; }
  table[data-parallel] td:lang(pi) {
    border-left: 3px solid var(--rule) !important;
    padding-left: .75em !important; margin: .3em 0 .2em;
  }
}

/* toggle bar injected by parallel.js */
.lang-toggle {
  position: sticky; top: 0; z-index: 10;
  display: flex; gap: .4em; justify-content: center;
  padding: .45em 0; margin: 0 0 1em;
  background: var(--bg); border-bottom: 1px solid var(--rule);
  font: .9rem system-ui, sans-serif;
}
.lang-toggle button {
  font: inherit; padding: .35em .9em; border-radius: 1em; cursor: pointer;
  border: 1px solid var(--rule); background: transparent; color: var(--text);
}
.lang-toggle button[aria-pressed="true"] { background: var(--accent); border-color: var(--muted); }
.lang-toggle .sep { width: 1px; margin: 0 .4em; background: var(--rule); }
table[data-parallel] tr.reading td { background: var(--accent); transition: background .3s; }
[data-pali].reading { background: var(--accent); transition: background .3s; }
.pali-play {
  display: inline-grid; place-items: center; width: 1.6em; height: 1.6em;
  margin: 0 .4em 0 0; padding: 0; vertical-align: .1em; border-radius: 50%;
  border: 1px solid var(--rule); background: var(--bg); color: var(--muted);
  font: .75rem system-ui, sans-serif; cursor: pointer;
}
.pali-play:hover, .pali-play[aria-pressed="true"] { color: var(--text); border-color: var(--muted); }
.rec-play {
  font: .85rem system-ui, sans-serif; padding: .2em .8em; margin: 0 .5em; vertical-align: middle;
  border-radius: 1em; border: 1px solid var(--rule); background: var(--bg); color: var(--text); cursor: pointer;
}
.rec-play[aria-pressed="true"] { background: var(--accent); border-color: var(--muted); }
p.rec-line { margin: .4em 0; }
table.reading td { background: var(--accent); transition: background .3s; }
@media print { .pali-play, .rec-play, p.rec-line { display: none; } }
@media (max-width: 40em) { .lang-toggle { flex-wrap: wrap; } .lang-toggle .sep { display: none; } }

/* ------------------------------------------------ dark mode */
/* dark theme: set by theme.js as <html data-theme="dark"> (the reader's
   choice, or the system setting); without JS the system setting applies */
:root[data-theme="dark"] {
  --text: #e2ddd3; --muted: #9a958c; --bg: #1c1b19; --link: #8cb8f0;
  --rule: #3d3a35; --pali: #cdb68c; --accent: #34312b; color-scheme: dark;
}
:root[data-theme="dark"] font[color="#000000"], :root[data-theme="dark"] font[color="black"] { color: inherit !important; }
:root[data-theme="dark"] font[color="#0000ff"], :root[data-theme="dark"] font[color="blue"] { color: var(--link) !important; }
:root[data-theme="dark"] [bgcolor] { background: transparent !important; }
:root[data-theme="dark"] :target:not(a), :root[data-theme="dark"] a:target + * { background: #4a4220; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --text: #e2ddd3; --muted: #9a958c; --bg: #1c1b19; --link: #8cb8f0;
    --rule: #3d3a35; --pali: #cdb68c; --accent: #34312b; color-scheme: dark;
  }
  :root:not([data-theme]) font[color="#000000"], :root:not([data-theme]) font[color="black"] { color: inherit !important; }
  :root:not([data-theme]) font[color="#0000ff"], :root:not([data-theme]) font[color="blue"] { color: var(--link) !important; }
  :root:not([data-theme]) [bgcolor] { background: transparent !important; }
  :root:not([data-theme]) :target:not(a), :root:not([data-theme]) a:target + * { background: #4a4220; }
}

/* theme switch injected by theme.js */
.theme-toggle {
  position: fixed; top: .6rem; right: .6rem; z-index: 20;
  width: 2.3rem; height: 2.3rem; padding: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--rule); background: var(--bg); color: var(--muted);
  opacity: .75; transition: opacity .15s, color .15s;
}
.theme-toggle:hover, .theme-toggle:focus-visible { opacity: 1; color: var(--text); }
.theme-toggle svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 48em) { .lang-toggle { padding-right: 3rem; padding-left: 3rem; } }

/* ------------------------------------------------ print */
@media print {
  body { max-width: none !important; font-size: 11pt; background: #fff !important; }
  :root[data-theme="dark"], :root:not([data-theme]) {   /* always print light */
    --text: #222; --muted: #666; --bg: #fff; --link: #0b55a8;
    --rule: #ddd6c8; --pali: #5b4a30; --accent: #f3efe6; color-scheme: light;
  }
  .lang-toggle, .theme-toggle, img[src*="button"] { display: none !important; }
  a:link, a:visited { color: inherit; text-decoration: none; }
}