/* Leipätekstin kirjasin, koko ja tekstin väri. */

/* Leipäteksti on Source Serif 4 kuten mdBookissa. Ei theme.font.text, koska se
 * vaihtaisi myös valikon, yläpalkin ja otsikot; kohteena vain artikkeli
 * (.md-content__inner). Kirjasintiedostot ja @font-face-säännöt ovat
 * fonts.css:ssä (sivuston oma assets/fonts/, ei Google Fonts), samoin teeman
 * oma Source Sans 3. Selain lataa vaihtoehtoisen kirjasimen tiedoston vasta
 * kun sitä käytetään. */

.md-content__inner {
  font-family: "Source Serif 4", "Source Serif Pro", Georgia, serif;
  /* Kumoaa modern-teeman tiivistyksen (.md-typeset: -0.01em). Otsikoiden
   * omat arvot jäävät voimaan. */
  letter-spacing: normal;
}

/* Lukijan valitsema kirjasin (yläpalkin valikko, fontmenu.js). Oletus on
 * "ei attribuuttia". Tulostussivu seuraa mukana, koska luvut liitetään samaan
 * elementtiin. Ei kokokorjausta: pieni ero x-korkeuksissa on hyväksytty. */
body[data-jyu-font="atkinson"] .md-content__inner {
  font-family: "Atkinson Hyperlegible Next", "Source Sans 3", Helvetica, Arial, sans-serif;
}

body[data-jyu-font="literata"] .md-content__inner {
  font-family: "Literata", "Source Serif 4", Georgia, serif;
}

/* Sisällön tekstikoko. Perustaso on teeman koko × --jyu-text-base: teeman
 * .75rem (15 px puhelimessa ja tavallisella näytöllä) oli etenkin
 * puhelimessa pieni, joten entinen 110 % on uusi 100 %. Lukijan valitsema
 * koko (sama valikko) on --jyu-text-scale bodyssä, oletus 1. Teeman .75rem
 * kerrotaan molemmilla, joten em-mitoitetut otsikot, koodi, taulukot ja
 * laatikot seuraavat; teeman rem-koot sisällön sisällä kerrotaan erikseen.
 * Valikot, yläpalkki, vihjeet ja vaiheittaisen ohjeen säätimet pysyvät
 * ennallaan, samoin tehtäväkortin numero, jonka sarake on rem-levyinen
 * (tasks.css). Vain ruudulle: paperilla teeman print-koko. */
:root {
  --jyu-text-base: 1.1;
}

@media screen {
  .md-content__inner {
    font-size: calc(0.75rem * var(--jyu-text-base) * var(--jyu-text-scale, 1));
  }

  .md-typeset .footnote {
    font-size: calc(0.64rem * var(--jyu-text-base) * var(--jyu-text-scale, 1));
  }

  .md-typeset .tabbed-labels > label {
    font-size: calc(0.7rem * var(--jyu-text-base) * var(--jyu-text-scale, 1));
  }
}

/* Otsikot pysyvät teeman kirjasimessa (Source Sans 3). Teema ei aseta niille
 * font-familyä, joten ilman tätä ne perisivät serifin. Laatikoiden otsikot
 * ja summary ovat otsikoita, sisältö leipätekstiä. */
.md-content__inner :is(h1, h2, h3, h4, h5, h6, .admonition-title, summary) {
  font-family: var(--md-text-font-family);
}

/* Tekstin väri jyrkemmäksi: vaalea .87 -> .92, tumma #e1e1e1.
 * Teema johtaa muut tekstivärit tästä perusmuuttujasta, joten yksi arvo per
 * teema riittää; --light on teemassa kiinteä, joten se siirretään erikseen.
 * Vaalealla tarvitaan myös [data-md-color-scheme=default], koska teema
 * määrittelee arvon bodylle ja pelkkä :root häviäisi sille. */
:root,
[data-md-color-scheme="default"] {
  --md-default-fg-color: #000000eb;
  --md-default-fg-color--light: #00000099;
}

[data-md-color-scheme="slate"] {
  --md-default-fg-color: #e1e1e1;
  --md-default-fg-color--light: hsla(var(--md-hue), 15%, 90%, 0.62);
}

/* Päävalikon linkit 500: Source Sans 3 jää 14 px:ssä 400:lla haaleaksi.
 * :not jättää pois sisällysluettelon (kapealla näytöllä samassa valikossa)
 * ja valitun rivin, jonka seuraava sääntö nostaa 700:aan. */
.md-nav--primary
  .md-nav__link:not(.md-nav--secondary .md-nav__link, .md-nav__link--active) {
  font-weight: 500;
}

/* Valittu rivi 700 molemmissa valikoissa: teeman 500 ei erotu, kun muutkin
 * rivit ovat 500, ja väri yksin lukee "linkki", ei "tässä olet". */
.md-nav__item .md-nav__link--active {
  font-weight: 700;
}

/* Tooltipit lähemmäs leipätekstin kokoa (.75rem): teeman title-tooltip
 * (role=tooltip, mm. <abbr title>) on .55rem ja alaviitteen ponnahdus
 * (role=dialog) .64rem, mikä on selitystekstille liian pientä. */
[role="tooltip"] > .md-tooltip2__inner,
[role="dialog"] > .md-tooltip2__inner {
  font-size: 0.7rem;
}

/* Tummassa teemassa tooltipin tausta on sama kuin sivun, ja varjo katoaa
 * mustaan. Tausta koodilohkon sävyyn: muuttuja vaihdetaan .md-tooltip2:ssa,
 * jotta sisältö, nuoli ja alaviiteikkunan liukuvärit vaihtuvat yhdessä.
 * Reuna samalla värillä kuin teeman nuolen reunaviiva. */
[data-md-color-scheme="slate"] .md-tooltip2 {
  --md-default-bg-color: var(--md-code-bg-color);
}

[data-md-color-scheme="slate"] .md-tooltip2__inner {
  border: 0.05rem solid var(--md-default-fg-color--lightest);
}