/* =========================================================
   TYYLI.CSS – Matsku12.com
   Ulkoasu Nokia N900:n Maemo 5 -käyttöliittymän henkeen.
   Värit ovat heti alla: muuta niitä, niin koko sivusto muuttuu.
   ========================================================= */

@font-face {
  font-family: "Nunito Sans";
  src: url("/fontit/nunito-sans-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Nunito Sans";
  src: url("/fontit/nunito-sans-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  /* --- VÄRIT --- */
  --ymparys:   #4b5056;  /* sivun tausta "puhelimen" ympärillä */
  --kuori:     #1a1a1a;  /* puhelimen musta reunus */
  --ruutu:     #0e0f10;  /* sisältöalueen tausta */
  --paneeli:   #1c1d1f;  /* alapalkki */
  --viiva:     #3a3c40;  /* reunat */
  --viiva2:    #2a2c30;  /* himmeämmät erotinviivat */
  --teksti:    #eceeef;  /* leipäteksti */
  --himmea:    #a8acb0;  /* päivämäärät, pikkutekstit */
  --korostus:  #63b6ff;  /* linkit ja sininen korostus */
  --korostus2: #9ad6ff;  /* vaaleampi sininen (hover) */

  /* Kiiltävät napit */
  --nappi:   linear-gradient(#55585d, #2b2d30);
  --nappi-h: linear-gradient(#64676c, #34363a);
  --valittu: linear-gradient(#9ad6ff, #2e8ee0);

  /* --- FONTTI JA MITAT --- */
  --fontti: "Nunito Sans", "Segoe UI", Tahoma, sans-serif;
  --leveys: 1000px;      /* koko sivun maksimileveys */
  --sivupalkki: 260px;   /* oikean palstan leveys */
}

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

html {
  background: var(--ymparys);
  scroll-padding-top: 64px;   /* ankkurilinkit eivät jää valikon alle */
}

body {
  max-width: var(--leveys);
  margin: 28px auto;
  background: var(--ruutu);
  color: var(--teksti);
  font: 14.5px/1.65 var(--fontti);
  border: 16px solid var(--kuori);
  border-radius: 14px;
  box-shadow: 0 0 0 2px #6a6d70, 0 22px 50px rgba(0, 0, 0, .45);
}

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

a { color: var(--korostus); text-underline-offset: 2px; }
a:hover { color: var(--korostus2); }

:focus-visible { outline: 2px solid var(--korostus); outline-offset: 2px; }

.hyppy { position: absolute; left: -9999px; }
.hyppy:focus { left: 12px; top: 12px; z-index: 20; background: var(--korostus); color: #000; padding: 4px 8px; }

/* ---------- Yläpalkki (Maemon otsikkopalkki) ---------- */
.ylapalkki {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 18px;
  padding: 12px 18px 12px 16px;
  background: linear-gradient(#3c3e42, #1c1d1f);
  border-bottom: 1px solid #000;
}

.logo {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--teksti);
  text-decoration: none;
  font: 700 30px/1 var(--fontti);
}
.logo:hover { color: #fff; }
.logo img { width: 46px; height: 46px; flex: none; }
.logo .numero { color: var(--korostus); }
.logo .com { color: var(--himmea); }
.logo .nimi::after { content: " ▾"; font-size: .45em; color: var(--himmea); vertical-align: .25em; }

.slogan { margin: 0; color: var(--himmea); font-size: 14px; }

.poistu {                       /* ✕ oikeassa yläkulmassa */
  margin-left: auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  color: #cfd2d5;
  text-decoration: none;
  font: 700 22px/1 sans-serif;
}
.poistu:hover { background: rgba(255, 255, 255, .08); color: #fff; }

/* ---------- Valikko (pysyy ylhäällä selatessa) ---------- */
.valikko {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #141516;
  border-bottom: 1px solid var(--viiva2);
  padding: 8px 24px;
}
.valikko ul, .alavalikko {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}
.valikko ul { gap: 6px; font: 700 15px/1 var(--fontti); }
.valikko a {
  display: inline-block;
  padding: 8px 14px;
  color: var(--teksti);
  text-decoration: none;
  background: var(--nappi);
  border: 1px solid #0b0b0c;
  border-radius: 8px;
  box-shadow: inset 0 1px rgba(255, 255, 255, .2);
}
.valikko a:hover { background: var(--nappi-h); color: #fff; }
.valikko a[aria-current="page"] { background: var(--valittu); color: #fff; }

/* ---------- Sisältö ja sivupalkki ---------- */
.sisalto {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--sivupalkki);
  gap: 32px;
  padding: 28px 32px 36px;
}
main, .sivupalkki { min-width: 0; }

h1, h2, h3 { font-family: var(--fontti); font-weight: 700; color: #fff; line-height: 1.2; }
h1 { font-size: 34px; margin: 0 0 10px; }
h2 {
  font-size: 24px;
  margin: 34px 0 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--viiva2);
}
h1 small, h2 small { font-size: .5em; font-weight: 400; color: var(--himmea); margin-left: .4em; }
h3 { font-size: 16px; margin: 0 0 4px; }
h3 a { text-decoration: none; }
h3 a:hover { text-decoration: underline; }
p { margin: 0 0 12px; }

.johdanto { font-size: 17px; color: var(--himmea); }

/* Merkinnät (artikkelilistat) */
.merkinta {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid #1e1f21;
}
.merkinta > a img {
  display: block;
  width: 120px;
  height: 90px;
  object-fit: cover;
  border: 1px solid var(--viiva);
  border-radius: 8px;
}
.merkinta > a:hover img { border-color: var(--korostus); }
.merkinta p { margin-bottom: 6px; }
.merkinta.ilman-kuvaa { grid-template-columns: 1fr; }

.meta { font-size: 12px; color: var(--himmea); margin-bottom: 6px; }
.tagi, .uusi, .pian {
  display: inline-block;
  margin-right: .4em;
  padding: 4px 8px;
  border-radius: 6px;
  font: 700 12px/1 var(--fontti);
  text-decoration: none;
}
.tagi { border: 1px solid var(--korostus); color: var(--korostus); }
.uusi { background: var(--korostus); color: #00203d; }
.pian { border: 1px dashed var(--himmea); color: var(--himmea); }

.lue { font: 700 14px/1 var(--fontti); text-decoration: none; }
.lue:hover { text-decoration: underline; }

.ylos {
  display: block;
  margin-top: 28px;
  text-align: center;
  font: 700 14px/1 var(--fontti);
  text-decoration: none;
}

/* Artikkelisivu */
.murupolku { font-size: 12px; color: var(--himmea); margin-bottom: 14px; }
.murupolku a { color: var(--himmea); }
figure { margin: 20px 0; }
figure img { display: block; border: 1px solid var(--viiva); border-radius: 8px; }
figcaption { font-size: 12px; color: var(--himmea); margin-top: 6px; }
.taulukko { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; margin: 12px 0 18px; font-size: 13.5px; }
th, td { border: 1px solid var(--viiva); padding: 6px 10px; text-align: left; }
th { background: linear-gradient(#3c3e42, #26282b); color: #fff; }
pre, code { font-family: "Courier New", monospace; }
pre {
  background: #000;
  border: 1px solid var(--viiva2);
  border-radius: 8px;
  padding: 12px 14px;
  overflow-x: auto;
  font-size: 13px;
  line-height: 1.5;
}
.lataukset { padding-left: 0; list-style: none; }
.lataukset li { padding: 7px 0; border-bottom: 1px solid #1e1f21; }
.lataukset li::before { content: "▼ "; color: var(--korostus); }

/* ---------- Sivupalkin laatikot ---------- */
.laatikko {
  background: linear-gradient(#26282b, #1a1b1d);
  border: 1px solid var(--viiva);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 18px;
}
.laatikko h2 {
  margin: 0;
  padding: 12px 14px 2px;
  border: 0;
  font: 700 14px/1 var(--fontti);
  color: var(--himmea);
}
.laatikko-sisus { padding: 10px 14px 14px; }
.pieni { font-size: 11.5px; color: var(--himmea); margin: 6px 0; }

/* Kello */
.kello-aika {
  text-align: center;
  font: 700 34px/1.15 var(--fontti);
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.kello-pvm { text-align: center; font-size: 12px; color: var(--himmea); }

/* Laskuri */
.laskuri {
  text-align: center;
  font: 700 26px/1 var(--fontti);
  letter-spacing: .18em;
  color: var(--korostus);
  background: #000;
  border: 1px solid var(--viiva2);
  border-radius: 7px;
  padding: 8px 0 6px;
}

/* Banneri */
.banneri-kuva { display: block; width: 88px; margin: 0 auto 6px; }
.banneri-koodi {
  width: 100%;
  resize: none;
  font: 11px/1.4 "Courier New", monospace;
  color: var(--himmea);
  background: #000;
  border: 1px solid var(--viiva2);
  border-radius: 6px;
  padding: 5px 7px;
}

/* Suosittelen: rullaava nauha 88x31-napeista */
.nauha { overflow: hidden; }
.nauha-sisa { display: flex; width: max-content; animation: rullaa 28s linear infinite; }
.nauha:hover .nauha-sisa { animation-play-state: paused; }
@keyframes rullaa { to { transform: translateX(-50%); } }
.nauha-sisa > a { flex: none; width: 88px; height: 31px; margin-right: 6px; }
.nauha-sisa > a img { display: block; width: 88px; height: 31px; }
.nappi {                         /* tekstinapit, kunnes vaihdat tilalle oikeat 88x31-kuvat */
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 12px/1 var(--fontti);
  color: #fff;
  text-decoration: none;
  background: var(--nappi);
  border: 1px solid #0b0b0c;
  border-radius: 6px;
}
.nappi:nth-child(2n) { background: var(--valittu); }
.nappi:hover { color: #fff; }

/* Sivuston tila */
.tila { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 0; font-size: 12.5px; }
.tila dt { color: var(--himmea); }
.tila dd { margin: 0; color: #fff; font-weight: 700; }

/* ---------- Alapalkki ---------- */
.alapalkki {
  background: var(--paneeli);
  border-top: 1px solid #000;
  border-radius: 0 0 2px 2px;
  padding: 18px 32px 22px;
  text-align: center;
  font-size: 12.5px;
}
.alapalkki p { margin: 0 0 6px; }
.alapalkki a { color: var(--teksti); }
.alavalikko { justify-content: center; margin-bottom: 8px; }
.alavalikko li + li::before { content: "·"; margin: 0 .5em; color: var(--himmea); }

/* ---------- 404-sivu ---------- */
.virhe { font: 700 22px/1.3 var(--fontti); color: #fff; }

/* ---------- Kapeat näytöt (puhelin) ---------- */
@media (max-width: 860px) {
  body { margin: 10px; border-width: 8px; border-radius: 12px; }
  .ylapalkki { padding: 10px 10px 10px 12px; gap: 4px 12px; }
  .logo { font-size: 23px; gap: 10px; }
  .logo img { width: 38px; height: 38px; }
  .slogan { order: 3; width: 100%; }
  .valikko { padding: 8px 12px; }
  .valikko ul { gap: 5px; font-size: 14px; }
  .valikko a { padding: 7px 11px; }
  .sisalto { grid-template-columns: minmax(0, 1fr); padding: 22px 16px 28px; gap: 16px; }
  h1 { font-size: 28px; }
  .alapalkki { padding: 16px; }
}
@media (max-width: 480px) {
  .merkinta { grid-template-columns: 84px minmax(0, 1fr); gap: 12px; }
  .merkinta > a img { width: 84px; height: 63px; }
}

/* ---------- Vähemmän liikettä, jos käyttäjä on sitä pyytänyt ---------- */
@media (prefers-reduced-motion: reduce) {
  .nauha-sisa { animation: none; flex-wrap: wrap; width: auto; row-gap: 6px; }
  .nauha-sisa > a[aria-hidden="true"] { display: none; }
}