/* =====================================================================
   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,
   --vari-nappi-teksti)
   on kirjoitettu var(x, fallback) -muodossa, jotta vanhat teemavariantit
   (css/teemat/) toimivat vaikka niistä puuttuisivat uudet arvot.

   --vari-tumma-rgb (lisätty 11.8.2026): --vari-tumma R,G,B pilkulla
   eroteltuna (esim. "22, 70, 60"), koska hex-/nimimuotoinen CSS-muuttuja
   ei sellaisenaan käy rgba()-funktion sisään läpikuultavaan taustaan.
   Käytössä osioissa 9 ja 10 alla. Kaikki neljä valmista teemaa sisältävät
   tämän jo — jos lisäät uuden teeman, muista laskea ja lisätä se myös.

   --vari-nappi-teksti (lisätty 6.8.2026): napin/korostuspallon tekstiväri
   --vari-korostus-taustaa vasten. Fallback on --vari-teksti-tummalla, joka
   riittää useimmille teemoille (korostusväri on tarpeeksi tumma valkoiselle
   tekstille). Aseta oma arvo teemassa VAIN jos --vari-teksti-tummalla
   epäonnistuisi WCAG-kontrastissa juuri --vari-korostus-taustalla — näin
   kävi "Tumma & näyttävä" -teemalle (kultainen nappi + valkoinen teksti =
   2,52:1, alle vaaditun 4,5:1). Älä sekoita --vari-teksti-tummalla:aan,
   joka on kiinteä footerin tekstiväri (--vari-tumma-taustaa vasten, eri pari).

   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)
     9. Hero-variantti: valokuva + CTA-laatikko (.hero-valokuva)
     10. Tumma tekstuuriosio (.osio-tumma)
   ===================================================================== */

/* --- 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; }

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-nappi-teksti, 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-nappi-teksti, 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.125rem; 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); }

/* 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-nappi-teksti, var(--vari-teksti-tummalla));
  font-weight: 700; font-size: 1.1875rem;
  margin-bottom: 1rem;
}
.vaiheet p { color: var(--vari-teksti-himmea, inherit); }
.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; }
.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;
}

/* --- 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); }

/* =====================================================================
   9. HERO-VARIANTTI: VALOKUVA + CTA-LAATIKKO
   =====================================================================
   Vaihtoehto osion 3 tavalliselle .hero:lle. Käytä kun asiakkaalla on
   iso oma valokuva eikä maskotti-SVG:tä: full-bleed valokuva taustalla,
   puolikuultava värilaatikko sen päällä. Ei backdrop-filteriä — pidetty
   tarkoituksella yksinkertaisena. Laatikon rgba(var(--vari-tumma-rgb), .75)
   -tausta on tarkistettu WCAG AA:ksi worst-case-oletuksella (laatikko
   puhtaan valkoisen valokuvakohdan päällä — todellinen kuva on lähes aina
   tummempi, joten tämä on alaraja): leipäteksti (--vari-teksti-tummalla)
   5,16–8,56:1 kaikilla neljällä teemalla (vaatii 4,5:1) — läpäisee reilusti.
   Jos muutat alfa-arvon (.75) tai --vari-tumma-rgb:n, laske kontrasti
   uudelleen (ks. myös CLAUDE.md).

   HTML:
   <section class="hero-valokuva" style="background-image:url('images/hero.jpg')">
     <div class="rajaus">
       <div class="hero-laatikko">
         <h1>Otsikko <em>korostus</em></h1>
         <p>Lyhyt teksti.</p>
         <div class="napit">
           <a class="nappi" href="...">Ensisijainen CTA</a>
           <a class="nappi nappi--toissijainen" href="#...">Toissijainen</a>
         </div>
         <p class="hero-badge"><svg aria-hidden="true">...</svg> Pieni luottamuslause</p>
       </div>
     </div>
   </section>
   ===================================================================== */
.hero-valokuva {
  background-color: var(--vari-tumma); /* näkyy hetken ennen kuin kuva latautuu */
  background-size: cover;
  background-position: center;
  min-height: min(88vh, 620px);
  display: flex;
  align-items: center;
}
.hero-valokuva .rajaus { width: 100%; }

.hero-laatikko {
  background: rgba(var(--vari-tumma-rgb), .75);
  color: var(--vari-teksti-tummalla);
  padding: 2.5rem 2.25rem;
  border-radius: 4px; /* tarkoituksella pienempi kuin --pyoristys — laatikko, ei kortti */
  max-width: 32rem;
}
.hero-laatikko h1 { color: inherit; }
/* --vari-linkki-tummalla on isolle tekstille (≥3:1) mitattu tässä laatikossa
   (3,70–4,40:1 kaikilla neljällä teemalla, worst-case-laskelma alla) — käytä
   VAIN h1 em:ssä, ei koskaan pienessä tekstissä hero-laatikon sisällä. */
.hero-laatikko h1 em { color: var(--vari-linkki-tummalla); font-style: italic; }
.hero-laatikko p { margin: 1.1rem 0 1.75rem; font-size: 1.125rem; max-width: 40ch; color: inherit; }
.hero-laatikko .napit { display: flex; gap: .75rem; flex-wrap: wrap; }
.hero-laatikko .nappi--toissijainen { border-color: currentColor; }
.hero-laatikko .nappi--toissijainen:hover { background: rgb(255 255 255 / .12); }

/* Valokuvan aihe usein toisella puolella kuvaa — siirrä laatikko tyhjälle
   puolelle tällä tai valitse background-position inline-tyylillä sivulla. */
.hero-laatikko--oikea { margin-left: auto; }

/* Pieni luottamusmerkintä laatikon alla (esim. vastausaikalupaus) */
.hero-badge {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: 1.5rem;
  font-size: .9rem;
  color: inherit;
  opacity: .92;
}
.hero-badge svg { width: 18px; height: 18px; flex: none; }

@media (max-width: 640px) {
  .hero-laatikko { padding: 1.85rem 1.5rem; max-width: none; }
}

/* =====================================================================
   10. TUMMA TEKSTUURIOSIO
   =====================================================================
   Täysleveä tumma osio esim. palvelukorteille. Tausta on aina
   var(--vari-tumma) — sama pari kuin footerissa (--vari-teksti-tummalla
   päällä), joten kontrastia ei tarvitse laskea uudelleen. Dekoratiivinen
   tekstuurikuva on INLINE-SVG suoraan HTML:ssä (ei ulkoinen tiedosto),
   koska vain inline-SVG voi lukea teeman var()-värit; tee kuvasta oma/
   lisenssivapaa, ei koskaan kopioitu toiselta sivustolta. Kortit tällä
   pohjalla saavat automaattisesti valkoisen tekstin alla olevilla
   säännöillä — ei tarvitse lisätä luokkia HTML:ään.

   HTML:
   <section class="osio-tumma">
     <svg class="osio-tumma-tausta" aria-hidden="true" viewBox="...">...</svg>
     <div class="rajaus">
       <h2>Otsikko</h2>
       <div class="kortit"> <div class="kortti">...</div> ... </div>
     </div>
   </section>
   ===================================================================== */
.osio-tumma {
  position: relative;
  background: var(--vari-tumma);
  color: var(--vari-teksti-tummalla);
  overflow: clip;
}
.osio-tumma h2 { color: inherit; }
.osio-tumma > .rajaus { position: relative; z-index: 1; }
/* Voittaa globaalin "section > .rajaus > p" -säännön (osio 1), joka asettaisi
   tumman vari-teksti-himmea-värin — väärä tummalla pohjalla. */
.osio-tumma > .rajaus > p { color: inherit; }

.osio-tumma-tausta {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  width: 100%; height: auto;
  z-index: 0;
}

.osio-tumma .kortti {
  background: rgb(255 255 255 / .08);
  border: 1px solid rgb(255 255 255 / .14);
  box-shadow: none;
}
.osio-tumma .kortti h3 { color: var(--vari-teksti-tummalla); }
.osio-tumma .kortti p { color: var(--vari-teksti-tummalla); }