/* Kotityöt — lakisivujen tyylit. Sama sivukehys tietosuojalla ja tuella. */
@import url("landing.css");

.page-head { padding: 2.5rem 0 1rem; }
.page-head h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); margin: 1rem 0 .4rem; letter-spacing: -0.02em; }
.page-head .paivitetty { color: var(--teksti-himmea); margin: 0; font-size: .95rem; }

main.wrap > section {
  background: var(--valkoinen); border: 1px solid var(--reuna);
  border-radius: 16px; padding: 1.75rem 1.6rem; margin-bottom: 2rem;
}
main.wrap > section:first-of-type { margin-top: 1rem; }
main.wrap h2 { font-size: 1.25rem; margin: 2rem 0 .6rem; }
main.wrap h2:first-child { margin-top: 0; }
main.wrap p, main.wrap li { color: var(--teksti-himmea); }
main.wrap li { margin: .4rem 0; }
main.wrap strong { color: var(--teksti); }

table.tiedot { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .95rem; }
table.tiedot th, table.tiedot td {
  text-align: left; padding: .6rem .5rem; border-bottom: 1px solid var(--reuna);
  vertical-align: top; color: var(--teksti-himmea);
}
table.tiedot th { color: var(--teksti); font-weight: 700; }

.back-home { margin: 0 0 2rem; }

/* Taulukot pinotaan kapealla näytöllä.
   Vaakavieritys olisi lakitekstissä huono: lukijan pitäisi vetää sivuttain
   nähdäkseen mitä tiedoista sanotaan. Mitattu 393 px:llä, että kolme
   tekstisaraketta vuotaa 29 elementin verran yli reunan. */
@media (max-width: 38rem) {
  table.tiedot, table.tiedot tbody, table.tiedot tr, table.tiedot td { display: block; width: 100%; }
  table.tiedot thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  table.tiedot tr {
    border: 1px solid var(--reuna); border-radius: 12px;
    padding: .9rem 1rem; margin-bottom: .9rem; background: var(--kerma);
  }
  table.tiedot td { border: 0; padding: .35rem 0; }
  table.tiedot td::before {
    content: attr(data-otsikko);
    display: block; font-size: .78rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em;
    color: var(--teksti); margin-bottom: .15rem;
  }
}