/* =====================================================================
   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-valokuva + CTA-laatikko (.hero-valokuva, .hero-laatikko)
     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; }
/* h3 leipätekstin jatkona (esim. Palvelut-osion "Tallennusmuoto") tarvitsee
   yläväliä samoin kuin artikkelissa — kortin sisällä (h3 heti ikonin
   jälkeen) väliä ei haluta, joten rajattu section > .rajaus > p + h3:aan. */
section > .rajaus > p + h3 { margin-top: 1.75rem; }

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; }
/* KONTRASTIKORJAUS (videosiirtola.fi 6.8.2026): --vari-korostus tekstinä
   antaa vain 4,3:1 vaalealla taustalla (alle AA:n 4,5:1) tässä paletissa —
   toimi vain painikkeen valkoisella tekstillä laskettuna. Hover käyttää
   siksi --vari-korostus-2-tummaa (6,79:1 taustalla / 4,74:1 vaalealla). */
.ylapalkki nav a:hover { color: var(--vari-korostus-2-tumma, 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-variantti: valokuva + CTA-laatikko (.hero-valokuva) ---
   Tuotu sapluunasta (templates/sivukas-site-template, commit 6ea6d39,
   11.8.2026 pihakaato.fi:n käyttöönoton yhteydessä) videosiirtola.fi:lle
   8.2026 — korvaa aiemman kaksipalstaisen .hero:n. Full-bleed valokuva
   taustalla, puolikuultava värilaatikko sen päällä.

   Laatikon rgba(var(--vari-tumma-rgb), .75) -tausta tarkistettu WCAG
   AA:ksi worst-case-oletuksella (laatikko puhtaan valkoisen
   valokuvakohdan päällä): --vari-teksti-tummalla 5,73:1 (vaatii 4,5:1),
   --vari-linkki-tummalla (h1 em -aksentti, iso teksti) 3,74:1 (vaatii
   3:1) — molemmat läpäisevät. Jos muutat alfan tai värit, laske
   uudelleen.

   HUOM kuvan resoluutio: images/03.jpg on vain 619×348 — tämä komponentti
   venyttää sen lähes koko näkymän levyiseksi (min-height min(88vh,620px)),
   joten kuva näkyy hieman pehmeänä isoilla näytöillä. Asiakkaan muut kuvat
   (05/06.jpg) ovat yhtä pieniä; 01.jpg on korkearesoluutioinen mutta
   geneerinen toimistokuva, ei aiheeseen sopiva (LUONNOS jätti sen
   tarkoituksella pois). Vaihda kun asiakkaalta saadaan isompi kuva. */
.hero-valokuva {
  background-color: var(--vari-tumma);
  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;
  max-width: 32rem;
}
.hero-laatikko h1 { color: inherit; }
.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); }
.hero-laatikko--oikea { margin-left: auto; }

.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; }
}

/* 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; }
.logo img { height: 42px; width: auto; flex: none; border-radius: 6px; }

/* --- 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-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. Asiakaskohtaiset lisäkomponentit (videosiirtola.fi) --- */

/* Kaksipalstainen teksti+kuva-lohko (esim. "Miksi digitoida", "Miksi
   Videosiirtola"). --kaanteinen kääntää järjestyksen leveällä näytöllä
   vaihtelua varten; kapealla molemmat pinoutuvat samassa järjestyksessä. */
.kaksipalsta {
  display: flex; align-items: center; gap: 3rem; flex-wrap: wrap;
}
.kaksipalsta > * { flex: 1 1 22rem; }
.kaksipalsta img {
  width: 100%; height: auto; display: block;
  border-radius: var(--pyoristys);
  box-shadow: 0 8px 30px var(--vari-varjo, rgba(0 0 0 / .15));
}
.kaksipalsta--kaanteinen { flex-direction: row-reverse; }

/* Tarkistuslista (✓): hyötyjä/perusteluja luetteleva lista, sama
   visuaalinen kieli kuin hinnaston sisältölistalla. Merkin väri on
   --vari-tumma, ei --vari-korostus: korostus antaa vaalealla taustalla
   vain 3,0:1 (juuri ja juuri UI-rajalla) — tumma on turvallinen molemmilla
   taustoilla (8,1–11,6:1). */
.tarkistuslista { list-style: none; }
.tarkistuslista li {
  padding-left: 1.75rem; position: relative; margin-bottom: .9rem;
  color: var(--vari-teksti-himmea, inherit);
}
.tarkistuslista li::before {
  content: "✓"; position: absolute; left: 0;
  color: var(--vari-tumma); font-weight: 700;
}

/* Yhteystietolista: osoite, puhelin, sähköposti ym. — ei tarkistusmerkkiä,
   koska nämä eivät ole "sisältyy palveluun" -väittämiä. Linkkiväri
   --vari-korostus-2-tumma: ainoa aksenttiväri joka läpäisee AA:n (4,5:1)
   sekä --vari-tausta- että --vari-vaalea-taustalla (ks. yllä). */
.tiedot-lista { list-style: none; }
.tiedot-lista li { margin-bottom: .75rem; }
.tiedot-lista a { color: var(--vari-korostus-2-tumma, var(--vari-korostus)); font-weight: 700; text-decoration: underline; }

/* Yhteydenottolomake */
.lomake { display: grid; gap: 1.1rem; max-width: 30rem; margin-top: 1.5rem; }
.lomake-kentta { display: flex; flex-direction: column; gap: .4rem; }
.lomake-kentta label { font-weight: 700; font-size: .95rem; }
.lomake-kentta input, .lomake-kentta textarea {
  font: inherit; color: var(--vari-teksti);
  background: var(--vari-tausta);
  border: 1px solid var(--vari-reuna, rgba(0 0 0 / .2));
  border-radius: calc(var(--pyoristys) / 2);
  padding: .7rem .9rem;
}
.lomake-kentta textarea { resize: vertical; min-height: 6rem; }
.lomake-kentta input:focus-visible, .lomake-kentta textarea:focus-visible {
  outline: 3px solid var(--vari-korostus); outline-offset: 1px;
}
.lomake button.nappi { justify-self: start; border: none; cursor: pointer; font: inherit; }

/* Tekijänoikeushuomautus ja muu pieni lakiteksti */
.pieni-teksti { font-size: .9rem; color: var(--vari-teksti-himmea, inherit); max-width: 62ch; }
.pieni-teksti a { color: var(--vari-korostus-2-tumma, var(--vari-korostus)); }