/* Koondlehe stiil.
 *
 * Kasutab AINULT TEDI semantilisi tokeneid failist tedi/tokens.css.
 * Ühtegi kõva värvi, kõva piksli- ega fondisuurust siin ei ole —
 * see on TEDI reegli „semantic tokens only" sisu.
 *
 * Kui vajad väärtust, mida tokenite hulgas ei ole, võta see paketist
 * juurde (vaata tedi/tokens.css päist), mitte kirjuta siia arvu.
 *
 * See fail kuulub ainult koondlehele. Prototüüpidel on igaühel oma
 * stiil ja neid siit ei mõjutata — prototüüpide TEDI-le viimine on
 * eraldi töö.
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--general-surface-secondary);
  color: var(--general-text-primary);
  font-family: var(--tedi-family-roboto), system-ui, -apple-system,
    "Segoe UI", Arial, sans-serif;
  font-size: var(--tedi-size-02);
  font-weight: var(--tedi-weight-02);
  line-height: var(--tedi-line-height-03);
  /* Kitsal ekraanil ei tohi ükski pikk murdmatu sõna lehte laiemaks
     ajada. Pikim siin on monospace `Prototüüp_strateegiapaev_5`. */
  overflow-wrap: break-word;
}

/* ------------------------------------------------------------------ */
/* Ligipääsetavus                                                     */
/* ------------------------------------------------------------------ */

.jata-vahele {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  background: var(--general-surface-brand-primary);
  color: var(--general-text-white);
  padding: var(--tedi-dimensions-07) var(--tedi-dimensions-10);
  border-radius: var(--tedi-radius-02-default);
  font-weight: var(--tedi-weight-04);
}

.jata-vahele:focus {
  left: var(--tedi-dimensions-05);
  top: var(--tedi-dimensions-05);
}

:focus-visible {
  outline: var(--tedi-borders-02) solid var(--general-border-brand);
  outline-offset: var(--tedi-dimensions-02);
}

/* ------------------------------------------------------------------ */
/* Paigutus                                                           */
/* ------------------------------------------------------------------ */

.piir {
  max-width: var(--tedi-containers-11);
  margin-inline: auto;
  padding-inline: var(--tedi-dimensions-10);
}

/* ------------------------------------------------------------------ */
/* Brändiriba ja pealkirjaplokk                                       */
/* ------------------------------------------------------------------ */

.braend {
  background: var(--general-surface-brand-primary);
  color: var(--general-text-white);
}

.braend .piir {
  display: flex;
  align-items: center;
  gap: var(--tedi-dimensions-07);
  padding-block: var(--tedi-dimensions-07);
}

.braend .margis {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tedi-dimensions-15);
  height: var(--tedi-dimensions-15);
  background: var(--general-surface-brand-secondary);
  border-radius: var(--tedi-radius-02-default);
  font-size: var(--tedi-size-00);
  font-weight: var(--tedi-weight-04);
  letter-spacing: var(--tedi-dimensions-01);
}

.braend .nimi {
  font-size: var(--tedi-size-02);
  font-weight: var(--tedi-weight-04);
  line-height: var(--tedi-line-height-03);
}

.braend .nimi .teine {
  font-weight: var(--tedi-weight-02);
  color: var(--general-status-info-background-light);
}

.pealkirjaplokk {
  background: var(--general-surface-primary);
  border-bottom: var(--general-border-width-default) solid var(--general-border-primary);
}

.pealkirjaplokk .piir {
  padding-block: var(--tedi-dimensions-16) var(--tedi-dimensions-14);
}

.ylarida {
  margin: 0 0 var(--tedi-dimensions-05);
  font-size: var(--tedi-size-00);
  font-weight: var(--tedi-weight-04);
  line-height: var(--tedi-line-height-00);
  letter-spacing: var(--tedi-dimensions-01);
  text-transform: uppercase;
  color: var(--general-text-tertiary);
}

h1 {
  margin: 0 0 var(--tedi-dimensions-07);
  font-size: var(--tedi-size-09);
  font-weight: var(--tedi-weight-04);
  line-height: var(--tedi-line-height-09);
  color: var(--general-text-primary);
}

.juhtlause {
  margin: 0;
  max-width: var(--tedi-containers-09);
  font-size: var(--tedi-size-03);
  line-height: var(--tedi-line-height-05);
  color: var(--general-text-secondary);
}

/* ------------------------------------------------------------------ */
/* Põhisisu                                                           */
/* ------------------------------------------------------------------ */

main.piir {
  padding-block: var(--tedi-dimensions-16) var(--tedi-dimensions-19);
}

h2 {
  margin: 0 0 var(--tedi-dimensions-11);
  font-size: var(--tedi-size-06);
  font-weight: var(--tedi-weight-04);
  line-height: var(--tedi-line-height-07);
}

h2:not(:first-child) {
  margin-top: var(--tedi-dimensions-19);
}

p {
  margin: 0 0 var(--tedi-dimensions-10);
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: var(--link-primary-default);
  text-decoration: underline;
  text-underline-offset: var(--tedi-dimensions-02);
}

a:hover {
  color: var(--link-primary-hover);
}

a:active {
  color: var(--link-primary-active);
}

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--tedi-size-01);
  background: var(--general-surface-tertiary);
  border: var(--general-border-width-default) solid var(--general-border-primary);
  border-radius: var(--tedi-radius-01);
  padding-inline: var(--tedi-dimensions-03);
  /* Failinimed ja tokeninimed on pikad ja ilma tühikuteta. */
  word-break: break-word;
}

/* ------------------------------------------------------------------ */
/* Prototüübikaardid                                                  */
/* ------------------------------------------------------------------ */

.kaardid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--tedi-dimensions-13);
}

.kaart {
  background: var(--general-surface-primary);
  border: var(--general-border-width-default) solid var(--card-border-primary);
  border-radius: var(--tedi-radius-03);
  padding: var(--tedi-dimensions-13);
}

.kaart:focus-within {
  border-color: var(--card-border-selected);
}

.kaart-paeis {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--tedi-dimensions-05) var(--tedi-dimensions-07);
  margin-bottom: var(--tedi-dimensions-07);
}

/* Kaardi pealkiri on h2, sest leht ei vaja enam vahepealkirju —
   selgitav sisu kolis dokumentatsiooni. Oma reegel on vajalik, et
   üldine h2 suurus ja ülemine veeris kaardile ei kanduks. */
.kaart h2 {
  margin: 0;
  font-size: var(--tedi-size-05);
  font-weight: var(--tedi-weight-04);
  line-height: var(--tedi-line-height-06);
}

.kaart .tee {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--tedi-size-01);
  color: var(--general-text-tertiary);
}

.kaart p {
  margin-bottom: var(--tedi-dimensions-07);
  color: var(--general-text-secondary);
}

.kaart p.esile {
  color: var(--general-text-primary);
}

/* Sildid. Värv ei ole ainus eristus — igal sildil on ka tekst. */
.sildid {
  list-style: none;
  margin: var(--tedi-dimensions-11) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--tedi-dimensions-04);
}

.sildid li {
  font-size: var(--tedi-size-00);
  font-weight: var(--tedi-weight-02);
  line-height: var(--tedi-line-height-00);
  padding: var(--tedi-dimensions-03) var(--tedi-dimensions-06);
  border-radius: var(--tedi-radius-07);
  background: var(--general-surface-tertiary);
  border: var(--general-border-width-default) solid var(--general-border-primary);
  color: var(--general-text-secondary);
}

.sildid li.tunnus {
  background: var(--general-surface-brand-tertiary);
  border-color: var(--general-border-brand);
  color: var(--general-text-brand);
  font-weight: var(--tedi-weight-04);
}

/* Avaldamise rida kaardi all */
.avaldatud {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tedi-dimensions-05);
  margin-top: var(--tedi-dimensions-11);
  padding-top: var(--tedi-dimensions-09);
  border-top: var(--general-border-width-default) solid var(--general-border-primary);
  font-size: var(--tedi-size-01);
  color: var(--general-text-tertiary);
}

/* ------------------------------------------------------------------ */
/* Teatekastid                                                        */
/* ------------------------------------------------------------------ */

.teade {
  border-radius: var(--tedi-radius-03);
  padding: var(--tedi-dimensions-12);
  border: var(--general-border-width-default) solid var(--general-border-primary);
  background: var(--general-surface-primary);
}

.teade > :last-child {
  margin-bottom: 0;
}

.teade.info {
  background: var(--general-status-info-background-light);
  border-color: var(--general-status-info-border);
  color: var(--general-status-info-text);
}

.teade.hoiatus {
  background: var(--general-status-warning-background-primary);
  border-color: var(--general-status-warning-border);
  color: var(--general-status-warning-text);
}

.teade h2,
.teade h3 {
  margin-top: 0;
  font-size: var(--tedi-size-03);
  line-height: var(--tedi-line-height-04);
}

.teade a {
  color: inherit;
}

.loetelu {
  margin: 0;
  padding-left: var(--tedi-dimensions-13);
}

.loetelu li {
  margin-bottom: var(--tedi-dimensions-05);
}

.loetelu li:last-child {
  margin-bottom: 0;
}

/* ------------------------------------------------------------------ */
/* Jalus                                                              */
/* ------------------------------------------------------------------ */

footer {
  background: var(--general-surface-primary);
  border-top: var(--general-border-width-default) solid var(--general-border-primary);
}

footer .piir {
  padding-block: var(--tedi-dimensions-14) var(--tedi-dimensions-16);
  font-size: var(--tedi-size-01);
  line-height: var(--tedi-line-height-02);
  color: var(--general-text-tertiary);
}

/* ------------------------------------------------------------------ */
/* Laiemad ekraanid                                                   */
/* ------------------------------------------------------------------ */

@media (min-width: 48rem) {
  .piir {
    padding-inline: var(--tedi-dimensions-14);
  }

  h1 {
    font-size: var(--tedi-size-09);
    line-height: var(--tedi-line-height-11);
  }

  .kaardid {
    gap: var(--tedi-dimensions-14);
  }
}

@media print {
  .jata-vahele,
  .braend {
    display: none;
  }

  body {
    background: var(--general-surface-primary);
  }

  .kaart,
  .teade {
    break-inside: avoid;
  }
}