/* =====================================================================
   SIVUKAS-SAPLUUNA · KOMPONENTTITYYLIT
   =====================================================================
   Kaikki värit, fontit ja mitat tulevat teematiedostosta (teema.css)
   CSS-muuttujina. Tämä tiedosto on SAMA kaikilla sivustoilla — sivuston
   ilme vaihdetaan teematiedostoa vaihtamalla, ei tätä muokkaamalla.

   Uudet tokenit (--vari-hero, --vari-korostus-2, --vari-reuna,
   --vari-varjo, --vari-teksti-himmea, --vari-hover-pinta, --fontti-otsikko)
   on kirjoitettu var(x, fallback) -muodossa, jotta vanhat teemavariantit
   (css/teemat/) toimivat vaikka niistä puuttuisivat uudet arvot.

   Sisällys:
     1. Perusasetukset
     2. Yleiset apuluokat (.rajaus, .nappi, .hyppylinkki)
     2b. Yläpalkki
     3. Hero
     4. Korttirivit (.kortit)
     5. Vaihekortit (.vaiheet)
     6. Hinnastotaulukko (.hinnasto)
     7. Footer
     8. Artikkeli (blogi)
   ===================================================================== */

/* --- 1. Perusasetukset --- */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--fontti);
  font-size: var(--fonttikoko-perus);
  color: var(--vari-teksti);
  background: var(--vari-tausta);
  line-height: var(--riviheitto);
}

h1, h2 {
  font-family: var(--fontti-otsikko, var(--fontti));
  font-weight: var(--otsikko-paino, 400);
}
h1 { font-size: var(--fonttikoko-h1); line-height: 1.06; }
h2 { font-size: var(--fonttikoko-h2); line-height: 1.15; margin-bottom: 2.25rem; }
h3 { font-size: var(--fonttikoko-h3); font-weight: 700; margin-bottom: .5rem; }

/* Rivitys: otsikot tasapainoisiksi, leipäteksti ilman yksinäisiä loppusanoja.
   Ei koskaan *-valitsimella — sillä on suorituskykyhinta. */
h1, h2, h3 { text-wrap: balance; }
p, li, blockquote { text-wrap: pretty; }

section { padding: var(--lohkovali) 0; }

/* Peräkkäisten kappaleiden väli (reset nollaa marginit → palautetaan rytmi) */
section p + p { margin-top: .85rem; }

/* Leipätekstin mitta ja sävy lohkoissa */
section > .rajaus > p { max-width: 62ch; color: var(--vari-teksti-himmea, inherit); }

/* Vaalea taustalohko — anna sectionille class="vaalea" */
.vaalea { background: var(--vari-vaalea); }

/* Näppäimistökäyttäjän fokusrengas näkyviin kaikissa interaktiivisissa */
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--vari-korostus);
  outline-offset: 2px;
}

/* --- 2. Yleiset apuluokat --- */

/* Sisällön rajaus keskelle */
.rajaus {
  max-width: var(--sisallon-leveys);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Toimintanappi (linkki napin näköisenä) */
.nappi {
  display: inline-block;
  background: var(--vari-korostus);
  color: var(--vari-teksti-tummalla);
  padding: .85rem 1.85rem;
  border-radius: var(--pyoristys);
  text-decoration: none;
  font-weight: 700;
}
.nappi:hover { background: var(--vari-korostus-hover); }

/* Hyppylinkki ("Siirry sisältöön"): piilossa kunnes saa näppäimistöfokuksen.
   YHTEINEN-yläpalkin ensimmäinen linkki joka sivulla; kohde <main id="sisalto">. */
.hyppylinkki {
  position: absolute;
  left: 1rem;
  top: .75rem;
  z-index: 10;
  background: var(--vari-tumma);
  color: var(--vari-teksti-tummalla);
  padding: .6rem 1.1rem;
  border-radius: var(--pyoristys);
  text-decoration: none;
  transform: translateY(-250%);
}
.hyppylinkki:focus { transform: none; }

/* Hyppylinkin kohde: ei fokusrengasta koko sisältölohkon ympärille */
main[tabindex="-1"]:focus { outline: none; }

/* Toissijainen nappi (ääriviiva) */
.nappi--toissijainen {
  background: transparent;
  color: inherit;
  border: 2px solid currentColor;
  padding: calc(.85rem - 2px) calc(1.85rem - 2px);
}
.nappi--toissijainen:hover { background: var(--vari-hover-pinta, rgba(0 0 0 / .06)); }

/* --- 2b. Yläpalkki (YHTEINEN navigaatio) --- */
.ylapalkki {
  background: var(--vari-tausta);
  border-bottom: 1px solid var(--vari-reuna, rgba(0 0 0 / .1));
}
.ylapalkki .rajaus {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; padding-top: .9rem; padding-bottom: .9rem;
}
.ylapalkki nav { display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: center; }
.ylapalkki nav a { color: var(--vari-teksti); text-decoration: none; font-size: 1rem; }
.ylapalkki nav a:hover { color: var(--vari-korostus); }
.ylapalkki .nappi { padding: .55rem 1.15rem; font-size: .95rem; border-radius: calc(var(--pyoristys) - 2px); }
/* KONTRASTIKORJAUS (PSI 30.7.2026): ".ylapalkki nav a" voittaa ".nappi"-säännön
   spesifisyydellä (0,1,2 > 0,1,0) → yläpalkin napin teksti peri tumman värin
   vihreällä pohjalla (kontrasti 2,1:1; WCAG AA vaatii 4,5:1). Palautetaan napin
   oma tekstiväri, myös hoverissa (nav a:hover voittaisi muuten samoin). */
.ylapalkki nav a.nappi,
.ylapalkki nav a.nappi:hover { color: var(--vari-teksti-tummalla); }

/* Ankkurilinkkien pehmeä vieritys */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
section[id] { scroll-margin-top: 1rem; }

/* --- 3. Hero (kaksipalstainen: teksti + maskotti; kapealla pinoutuu) --- */
.hero {
  background: var(--vari-hero, var(--vari-vaalea));
  color: var(--vari-teksti);
  padding: var(--lohkovali) 0;
}
.hero .rajaus { display: flex; align-items: center; gap: 3rem; flex-wrap: wrap; }
.hero-teksti { flex: 1 1 26rem; }
.hero-kuva { flex: 0 1 auto; margin-inline: auto; }
.hero-kuva svg { width: clamp(220px, 30vw, 340px); height: auto; display: block; }
.hero h1 em { color: var(--vari-korostus-2-tumma, var(--vari-korostus)); font-style: italic; }
.hero p { margin: 1.35rem 0 2rem; font-size: 1.3125rem; max-width: 42ch; color: var(--vari-teksti-himmea, inherit); }
.hero .napit { display: flex; gap: .75rem; flex-wrap: wrap; }

/* Logo: maskottimerkki (inline-SVG) + tekstiosa vierekkäin.
   SVG:n värit tulevat teemasta var()-arvoina, joten teemanvaihto värittää
   myös maskotin. */
.logo {
  color: var(--vari-teksti);
  font-weight: 700; letter-spacing: .02em;
  font-size: 1.25rem;
  display: inline-flex; align-items: center; gap: .7rem;
  text-decoration: none;
}
.logo svg { width: 48px; height: auto; flex: none; }

/* --- 4. Korttirivit --- */
.kortit {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.kortti {
  background: var(--vari-vaalea);
  border-radius: var(--pyoristys);
  padding: 1.75rem 1.6rem;
  box-shadow: 0 2px 10px var(--vari-varjo, rgba(0 0 0 / .06));
}
/* Kortit vaalealla taustalohkolla tarvitsevat vaalean pohjan */
.vaalea .kortti { background: var(--vari-tausta); }

/* Kortin otsikko oikealla otsikkotasolla (esim. h2 kun sivulla ei ole
   erillistä h2:ta ennen korttilistaa) mutta h3:n ulkoasulla — h2 perisi
   muuten Instrument Serifin ja ison koon. */
.kortti-otsikko { font-size: var(--fonttikoko-h3); font-weight: 700; margin-bottom: .5rem; font-family: var(--fontti); }

/* Ikonin värillinen ympyrä kortin yläreunassa */
.ikoni-tausta {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--vari-korostus-2, var(--vari-korostus));
  display: grid; place-items: center;
  margin-bottom: 1rem;
}
/* Ikonin viiva tummana oranssilla ympyrällä — valkoinen jäisi alle 3:1 (WCAG,
   ei-tekstisisältö). Jos --vari-korostus-2 on tumma, vaihda tämä vaaleaksi. */
.ikoni-tausta .ikoni { width: 23px; height: 23px; color: var(--vari-tumma); }
.kortti p { color: var(--vari-teksti-himmea, inherit); }

/* Referenssikortit: kuva + teksti.
   auto-fill (ei auto-fit) pitää kortin sarakkeen levyisenä myös silloin kun
   kohteita on vain yksi — auto-fit venyttäisi yhden kortin koko riville. */
.kortit.kapea { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.kortti-kuva {
  display: block;
  width: 100%;
  /* aspect-ratio varaa tilan ennen latausta → ei sivun hyppimistä (CLS). */
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: calc(var(--pyoristys) - 6px);
  margin-bottom: 1rem;
}

/* Asiakkaan sitaatti referenssikortissa. Pystyviiva erottaa sen kuvauksesta
   ilman lainausmerkkigrafiikkaa — sitaatin omat lainausmerkit riittävät. */
.kortti blockquote {
  margin-top: 1rem;
  padding-left: 1rem;
  border-left: 3px solid var(--vari-korostus-2, var(--vari-korostus));
}
.kortti blockquote p { font-style: italic; }
.kortti blockquote p + p { font-style: normal; margin-top: .5rem; font-size: .9375rem; }

/* Linkkikortti (blogilistaus): koko kortti klikattavaksi otsikkolinkin
   ::before-peitolla. Rajattu :has(.kortti-otsikko):lla, jotta muut
   .kortti-käytöt (esim. etusivun ominaisuuskortit) eivät muutu. */
.kortti:has(.kortti-otsikko) {
  position: relative;
  transition: box-shadow .15s ease, transform .15s ease;
}
.kortti:has(.kortti-otsikko):hover {
  box-shadow: 0 4px 16px var(--vari-varjo, rgba(0 0 0 / .12));
  transform: translateY(-2px);
}
.kortti-otsikko a { text-decoration: none; }
.kortti-otsikko a::before { content: ""; position: absolute; inset: 0; }
.kortti-otsikko a::after { content: " →"; display: inline-block; transition: transform .15s ease; }
.kortti:has(.kortti-otsikko):hover .kortti-otsikko a::after { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .kortti:has(.kortti-otsikko) { transition: none; }
  .kortti-otsikko a::after { transition: none; }
}

/* --- 5. Vaihekortit (numeroitu prosessi) --- */
.vaiheet {
  list-style: none; counter-reset: vaihe;
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.vaiheet li {
  counter-increment: vaihe;
  background: var(--vari-tausta);
  border-radius: var(--pyoristys);
  padding: 1.75rem 1.6rem;
  box-shadow: 0 2px 10px var(--vari-varjo, rgba(0 0 0 / .06));
}
.vaiheet li::before {
  content: counter(vaihe);
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--vari-korostus);
  color: var(--vari-teksti-tummalla);
  font-weight: 700; font-size: 1.1875rem;
  margin-bottom: 1rem;
}
.vaiheet p { color: var(--vari-teksti-himmea, inherit); }
/* Aikamerkintä vaiheen otsikossa: kertoo mitä tapahtuu ja milloin. */
.vaihe-aika {
  display: block;
  font-size: 1rem;
  font-weight: 400;
  color: var(--vari-teksti-himmea, inherit);
  margin-top: .15rem;
}
.vaiheet a { color: var(--vari-korostus); font-weight: 700; }

/* --- 6. Hinnastotaulukko --- */
.hinnasto {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.hinnasto .hinta { font-size: 2rem; font-weight: 700; margin: .75rem 0; }
.hinnasto .hinta small { font-size: 1rem; font-weight: 400; }
/* Yliviivattu vanha hinta uuden vieressä samalla painolla/koolla kuin
   itse hinta — kontrasti tekee tarjouksesta silmäiltävän, ei vain luetun. */
.hinta-vanha {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  color: var(--vari-teksti-himmea, inherit);
  margin-right: .6rem;
}
.hinnasto ul { list-style: none; margin: 1rem 0; }
.hinnasto li { padding-left: 1.5rem; position: relative; margin-bottom: .4rem; }
.hinnasto li::before {
  content: "✓"; position: absolute; left: 0;
  color: var(--vari-korostus); font-weight: 700;
}
.hinnasto li + li { margin-top: .6rem; }

/* Yhden paketin hinnoittelu (päätös 10.8./2.9.2026): kortti pysyy lukukelpoisen
   levyisenä eikä veny koko riville, vaikka .hinnasto on auto-fit-ruudukko. */
.kortti-tarjous { max-width: 34rem; }
.tarjous-lappu {
  display: inline-block;
  background: var(--vari-korostus-2, var(--vari-korostus));
  color: var(--vari-tausta);
  font-weight: 700;
  font-size: 1rem;
  padding: .25rem .9rem;
  border-radius: 999px;
  margin-bottom: 1rem;
}
.hinta-normaali { color: var(--vari-teksti-himmea, inherit); font-size: 1.0625rem; }
.hinnasto-ehdot {
  color: var(--vari-teksti-himmea, inherit);
  font-size: 1.0625rem;
  margin-bottom: 1.25rem;
}

/* --- 7. Footer --- */
footer {
  background: var(--vari-tumma);
  color: var(--vari-teksti-tummalla);
  padding: 2.25rem 0;
  font-size: .9375rem;
}
footer a { color: var(--vari-linkki-tummalla); }
footer p + p { margin-top: .35rem; color: rgb(255 255 255 / .75); }

/* --- 8. Artikkeli (blogi) --- */
/* Leipätekstin ja seuraavan väliotsikon väliin ilmaa (globaali h2/h3 ei
   varaa margin-topia, koska sama sääntö kattaa myös sectionin ensimmäisen
   otsikon, jolle lisätila ei sopisi). */
article h2 { margin-top: 2.5rem; }
article h3 { margin-top: 1.75rem; }

article table { border-collapse: collapse; width: 100%; margin: 1.5rem 0; }
article th, article td {
  padding: .6rem .9rem;
  border: 1px solid var(--vari-reuna, rgba(0 0 0 / .1));
  text-align: left;
}
article th { background: var(--vari-vaalea); }