/****************************************************************************\

  legisign.css -- uusi perustyyli

  Hieman W3C.orgista varastettua, hieman omaa vanhaa.

  2018-07-26  Tyyli valmis. Perusfontiksi Skirt.
  2018-08-21  Eri korostusväri vain luku -lomakekentille.
  2018-09-01  Löytyi käyttöoikeus toiseen webfonttiin (Orbi), joten vaihdetaan
              se perusfontiksi.
  2021-06-20  Uusi fontti perusfontiksi: Maecenas.
  2022-07-19  Yksinkertaistettu ja selkeytetty linkkivärejä.
  2022-07-31  Taas yksi yritys selkeyttää linkkivärejä.
  2023-04-04  Vuoden 2023 tyyli on keltainen ja ruskea.
  2023-09-27  Korjattu kuvatekstin (figcaption) kursiivi.
  2023-11-27  Vaalean tai tumman teeman toiveen huomioon ottaminen.
  2023-12-01  Korjaus vaaleaan teemaan.
  2024-04-25  Päivitetään vaaleaa teemaa ja nimetään teema uudelleen
              niin, ettei vuosiluku näy siitä.
  2024-05-03  Päivitetään vielä tummaakin teemaa.
  2024-06-09  Korjauksia päiväysväreihin.
  2025-02-16  Vuotuisen värien päivityksen aika.
  2026-01-15  Värit korjattu jo varsin varhaisessa vaiheessa vuotta.
  2026-01-16  Lisätty vielä linkinkohdistusväri vaaleaan teemaan.
  2026-05-03  Lisätty sivun taustaväriin väriliuku vaikutelman
              keventämmiseksi.
  2026-08-16  Päivitetty fontti Bitteriksi (Googlen fontti, joka vaatii
              yhteydenoton :p).
  2026-08-17  Korjattu virhesivujen vaaleateemainen versio. Tumma teema
              vielä odottaa.
  2026-08-19  Korjattu virhesivujen tummateemainen versio ja tehty muitakin
              väreihin liittyviä korjauksia.

\****************************************************************************/

/* Fontin määritys */

@import url('https://fonts.googleapis.com/css2?family=Bitter:ital,wght@0,100..900;1,100..900&display=swap');

/*
@font-face {
  font-family: "PublicSans-Regular";
  src: url('../webfont/publicsans/publicsans-regular.woff2') format('woff2'), url('../webfont/publicsans/publicsans-regular.woff') format('woff');
}

@font-face {
  font-family: "PublicSans-Italic";
  src: url('../webfont/publicsans/publicsans-italic.woff2') format('woff2'), url('../webfont/publicsans/publicsans-italic.woff') format('woff');
}

@font-face {
  font-family: "PublicSans-Medium";
  src: url('../webfont/publicsans/publicsans-medium.woff2') format('woff2'), url('../webfont/publicsans/publicsans-medium.woff') format('woff');
}

@font-face {
  font-family: "PublicSans-MediumItalic";
  src: url('../webfont/publicsans/publicsans-mediumitalic.woff2') format('woff2'), url('../webfont/publicsans/publicsans-mediumitalic.woff') format('woff');
}
*/

/* Perusosiot */

html {
    font-family: "Bitter", sans-serif;
    font-size: 110%;
}

body {
    margin: 0;
}

header, section, footer, aside, nav, time, figure, figcaption {
    display: block;
}

/*
footer, header, nav {
    font-family: "PublicSans-Regular", sans-serif;
}
*/

header {
    padding-top: 0.5ex;
}

header hgroup {
    float: right;
}

footer {
    max-width: 90%;
    margin: 2ex auto;
    text-align: right;
}

nav {
    padding-bottom: 1ex;
    text-align: center;
    font-size: 90%;
}

section {
    clear: both;
    max-width: 90%;
    padding: 0.5ex 1em;
    margin: 2ex auto;
    font: 1.056em/1.3 "Bitter", sans-serif;
    position: relative;
}

section.columns {
    column-width: 500px;
    column-gap: 20px;
}

#linkit {
  margin-top: 1ex;
  padding: 1ex 1em;
  border: 2px dashed black;
  background: rgb(0, 0, 0);
}

figure {
    padding: 1ex 1em;
}

figcaption {
    padding: 1ex 0;
    font: 1.056em/1.3 "Bitter", serif;
    font-style: italic;
    font-size: 90%;
}

address, time {
    display: inline;
    text-align: right;
    font-size: 90%;
    font-style:  normal;
}

/* Otsikot */

h1, h2, h3 {
    font: "Bitter";
    font-weight: bold;
}

h1 {
    float: right;
    padding-right: 1em;
    padding-bottom: 1ex;
    text-align: center;
    background: transparent;
}

h2 {
    text-align: left;
    margin-top: 3ex;
    margin-bottom: 1ex;
    font-size: 133%;
}

h2+p {
    page-break-before: avoid;
}

section>h2 {
    margin-top: 2ex;
}

/* Muut elementit */

p {
    margin-top: 0;
    margin-bottom: 1ex;
}

p.ingressi {
    font-size: 115%;
    font-weight: bold;
}

section>p {
    margin-top: 2ex;
}

blockquote {
    /*font-family: "Carlito", "Calibri", sans-serif;*/
    font-size: 95%;
}

blockquote em {
    /*font-family: "Carlito", "Calibri", sans-serif;*/
    font-style: italic;
}

img {
    max-width: 100%;
    overflow: auto;
}

/* Taulukot */

th, td {
    vertical-align: top;
    text-align: left;
}

/* Luettelot ja luetelmat */

ul {
    padding-left: 1em;
}

li {
    margin-bottom: 1ex;
}

dt {
    margin-top: 2ex;
    font-weight: bold;
}

/* Lomakkeet */

input, button {
    padding: .2em .5em;
    border: thin solid black;
    border-radius: .25em;
    background: rgb(240, 248, 255);
}

input[readonly], textarea[readonly] {
  background: rgb(255, 240, 245);
}

button img {
    vertical-align: middle;
}

/* Merkkityylit */

em, cite {
    font-family: "Bitter";
    font-style: normal;
}

sup {
    line-height: 0;
}

@media screen {
    a {
        text-decoration: none;
        background: transparent;
    }

    a:active, a:link:hover, a:visited:hover {
        text-decoration: dotted underline;
    }

    a>img {
        border: none;
    }
}

/* Väriteemat */

@media (prefers-color-scheme: light) {
    html {
        /*background: rgb(93, 71, 139);*/
        background: linear-gradient(0deg, rgba(93, 71, 139, 1) 0%, rgba(255, 240, 245, 1) 100%);
        background-repeat: round;
        color: rgb(255, 240, 245);
    }

    html.errorpage {
        background: rgb(178, 34, 34);
    }

    header, nav {
        background: rgb(238, 210, 238);
        color: black;
    }

    section {
        background: rgb(255, 240, 245);
        color: black;
        box-shadow: 0 0.3em 1em rgb(36, 36, 36);
    }

    section.columns {
        column-rule: 3px solid rgba(205, 181, 205, 0.5);
    }

    h2 {
        background: transparent;
        color: rgb(93, 71, 139);
    }

    blockquote,
    p.ingressi {
        background: transparent;
        color: rgb(93, 71, 139);
    }

    a {
        background: transparent;
        color: rgb(210, 105, 30);
    }

    footer a {
        background: transparent;
        color: rgb(238, 149, 114);
    }

    .errorpage footer a {
        background: transparent;
        color: rgb(255, 255, 255);
    }

    a:not([href]) {
        color: rgb(176, 176, 176);
    }

    a:active,
    a:link:hover,
    a:visited:hover {
        background: transparent;
        color: rgb(143, 188, 143);
    }
}

@media (prefers-color-scheme: dark) {
    html {
        /*background: rgb(48, 48, 48);*/
        background: linear-gradient(0deg, rgba(93, 71, 139, 1) 0%, rgba(139, 102, 139, 1) 100%);
        background-repeat: round;
    }

    html.errorpage {
        background: rgb(93, 71, 139);
    }

    footer {
        background: transparent;
        color: rgb(255, 239, 219);
    }

    header, nav {
        background: rgb(139, 102, 139);
        color: white;
    }

    section {
        background: rgb(33, 10, 54);
        color: rgb(248, 248, 248);
        box-shadow: 0 0.3em 1em rgb(205, 150, 205);
    }

    section.columns {
        column-rule: 3px solid rgba(205, 181, 205, 0.5);
    }

    h1 {
        background: transparent;
        color: white;
    }

    h2, blockquote {
        background: transparent;
        color: rgb(171, 130, 255);
    }

    a {
        background: transparent;
        color: rgb(245, 150, 10);
    }

    a:not([href]) {
        color: rgb(176, 176, 176);
    }

    a:active,
    a:link:hover,
    a:visited:hover {
        background: transparent;
        color: rgb(255, 182, 191);
    }
}