/* =============================================================================
   OEF sivuroolit  ·  LOHKO G, OSA 1
   Luotu 16.9.2026. Ladataan `oef-sivu-perusta.css`:n JÄLKEEN.

   Perusta antaa kolmelle sivulle saman akselin, saman palstan ja saman
   merkityskartan. Tämä tiedosto antaa kullekin sen oman rytmin. Jako on sama
   kuin lohkoissa F2 ja H: jos rooli hylätään, perusta jää voimaan yhden
   link-rivin poistolla, eikä kumpikaan puoli ole toisensa varassa.

   Kaksi sivua, kaksi pykälää. `404.html` EI ole täällä, ja se on päätös eikä
   unohdus: se sivu tarjoillaan haavoittuvuusskannereille tuhansia kertoja
   vuorokaudessa ja sen oma dokumentoitu suunnitteluperiaate on että se
   renderöityy oikein myös silloin kun yhtään ulkoista tiedostoa ei ladata.
   Sen säännöt ovat siksi sen omassa <style>-lohkossa, ja ne on kirjoitettu
   samoilla tokeneilla. Kaksi lähdettä samalle päätökselle ajautuisi erilleen.
   ========================================================================== */

/* =============================================================================
   §Y  YHTEYSTIETOSIVU (contact.html)
   ========================================================================== */

/* --- §Y1  YHTEYSTIETOPALKKI ON KICKER, EI LEIPÄÄ --------------------------
   Palkki on sivun ensimmäinen elementti ja se on puhdasta konetietoa: osoite,
   numero, sähköposti, aukioloaika. §5.1:n rekisterisääntö sanoo että koneen
   tuottama tai koneen lukema arvo on monoa. Se on myös LocalBusiness-
   mikrodataa, eli sama sisältö menee koneelle kahta reittiä.

   KESKITYS. Palkin sisältö oli ainoa keskitetty rivi sivulla: se alkoi x 260
   kun koko muu sivu alkaa x 164. Kumous on tehty NIMETYLLE KOHTEELLE
   (`[itemtype$="LocalBusiness"]`) eikä apuluokalle: portti
   test/keskitysapuluokat.test.js kieltää kumouksen jonka viimeinen kompoundi
   on pelkkä apuluokka, koska silloin säännöstä ei näe mihin se osuu. Tästä
   näkee: se osuu yhteen elementtiin tällä sivulla. */
body.sivu--yhteys main [itemtype$="LocalBusiness"] {
  justify-content: flex-start;
  font-family: var(--f-kone);
  font-size: var(--t-1);
  column-gap: var(--v8);
  row-gap: var(--v2);
  /* Palkin sisapehmuste 24 -> 32 px. Perustelu on mitta eika maku: korttien
     sisalto alkaa linjalta 197 (kehys 164 + `p-8` 32 + 1 px reuna) ja palkin
     sisalto alkoi linjalta 190. Seitseman pikselin ero kahden vierekkaisen
     lohkon valilla ei lue erona vaan epatarkkuutena, ja se oli sivun kolmas
     alkulinja. 32 px vie palkin sisallon linjalle 197. */
  padding-left: var(--v8);
  padding-right: var(--v8);
  /* Lasikortti pois, ks. §Y2. */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: transparent;
  border: 1px solid var(--oef-viiva);
}

/* --- §Y2  KAKSI POLKUA, YKSI ENSISIJAINEN --------------------------------
   Mitattu lähtötila 1440 px:llä: vasen kortti 544 x 613 px ja oikea kortti
   544 x 613 px, molemmilla sama `glass-card`, sama 12 px kulma, sama pinta ja
   sama pehmuste. Sumennustestissä (8 px) ruudulle jää kaksi täsmälleen
   samanpainoista suorakulmiota eikä kumpikaan nouse esiin: makuportti §2
   mitta 2 vaatii tasan yhden hallitsevan.

   Sivun oma teksti kertoo kumpi on ensisijainen: vasen on "NOPEIN TAPA" ja
   oikea "TARKEMPI POLKU". Painotus tehdään siis sillä mitä sivu jo sanoo, ei
   uudella väitteellä. Mekanismi on sama kuin palvelusivujen kolmen luvun
   rivissä (`oef-palvelu-sivu.css` §6.1): ensisijainen saa oman pinnan ja
   oranssin yläreunan, muut jäävät kehyksellisiksi.

   Efektibudjetti (mitta 6): tausta + yläreuna = 2. Kulma tulee jo
   tokenikerroksesta eikä se ole tämän säännön lisäys. */
/* KIERROS 2 LOYSI TASTA VIAN JOKA EI NAKYNYT MITTARISSA. Ensimmainen versio
   antoi ensisijaiselle kortille pelkan `--oef-bg-syva` -pinnan ja 2 px
   ylareunan JA JATTI molemmille `.glass-card`in. Mitattuna kaikki oli
   kunnossa (kontrasti 0, kulmia 2), mutta 8 px sumennuksessa 2 px viiva
   katoaa kokonaan ja #0F1419 vastaan rgba(255,255,255,0.03) pohjalla #0A0F14
   on silmalle sama pinta. Kaksi korttia oli siis yha identtiset, ja painotus
   lepasi yksin sen yhden viivan varassa joka haviaa ensimmaisena.

   `.glass-card` on lisaksi makuportti §6:n NIMETTY KIELLETTY: backdrop-blur +
   puolilapinakyva pinta + reunus = kolme efektia kun budjetti on kaksi. Se on
   `css/styles.css`:ssa eli koko sivuston jaettu luokka, joten sita ei pureta
   lahteesta; palvelusivut tekevat saman neutraloinnin omassa scopessaan
   (`oef-palvelu-sivu.css` §5).

   ERO ON NYT KOKO LAATIKON MITTA EIKA VIIVA:
     ensisijainen = tayttava pinta + 2 px oranssi ylareuna, EI kehysta  (2 efektia)
     toissijainen = hiusviiva, lapinakyva pinta                          (1 efekti)
   Sama mekanismi kuin palvelusivujen kolmen luvun rivissa ja
   VARKE-klusterin `.stat--paa`:ssa: ensisijainen saa pinnan, muut viivan. */
body.sivu--yhteys main .grid > .glass-card {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: transparent;
  border: 1px solid var(--oef-viiva);
}
body.sivu--yhteys main #quickContactCard {
  background: var(--oef-bg-syva);
  border: 0;
  border-top: 2px solid var(--toiminta);
}

/* --- §Y3  BLUR-BLOBI POIS -------------------------------------------------
   `<div class="absolute -top-12 -right-12 w-40 h-40 bg-accent/10 rounded-full
   blur-3xl">` on makuportin §6:n nimetty kielletty: blur-blobi taustalla.
   Poistotesti (§1 testi 3) ajettu: poista se, katosiko jotain. Ei katonnut.
   Kortilla on jo oma kehys, oma syaani kicker ja oma syaani ikonilaatta,
   joten se erottuu ilman hehkua, ja hehku oli kolmas syaani samassa 544 px
   laatikossa. Sääntö on `display: none` eikä `opacity: 0`, koska
   läpinäkyvä elementti jäisi silti maalattavaksi kerrokseksi.

   Kohde on nimetty (`.glass-card > .absolute`), ei paljas apuluokka. */
body.sivu--yhteys main .glass-card > .absolute.blur-3xl { display: none; }

/* =============================================================================
   §O  ENERGIAOPAS (energiaopas.html)
   ========================================================================== */

/* --- §O1  KAKSI KIINTEÄÄ PALKKIA SAMASSA KAISTASSA -----------------------
   TÄMÄ ON LOHKON AINOA MITATTU PÄÄLLEKKÄISYYSVIKA. Mitattu 1440 px:llä:
   kuusi paria, ja jokainen pari on KIINTEÄ-KIINTEÄ eli kaksi `position:fixed`
   -palkkia samassa kohdassa. Kiinteä palkki virtaavan sisällön päällä on
   suunniteltu peitto ja sivu vierii sen alta; kaksi kiinteää palkkia päällekkäin
   ei ole.

   Parit: `span.text-xl "ORIGINALENERGY"` x `a.text-sm "Energiaopas"` 96x26 px,
   `a.nav-link "Palvelut"` x `a.text-sm "Todistus"` 45x22 px, ja neljä muuta.

   JUURISYY ON MATKA, EI Z-INDEKSI. Alanavi `#stickyNav` on `top: 72px` ja sen
   piilotila on `translate-y-[-100%]`, eli oman korkeutensa (noin 45 px) verran
   ylös. Se päätyy kohtaan 27 px. Ylätunniste on 0-95 px ja sen tausta on
   `bg-gradient-to-b ... to-transparent`, eli SE ON LÄPINÄKYVÄ alareunastaan.
   Piilotettu alanavi kuultaa siis pysyvästi ylätunnisteen läpi, ja
   kuvakaappauksessa se näkyy haamutekstinä logon oikealla puolella.
   z-index ei auta, koska päällä oleva kerros ei ole peittävä.

   KORJAUS ON LÄHTEESSÄ, EI TÄÄLLÄ. Sivun oma skripti kirjoitti piilotilan
   inline-tyylinä (`stickyNav.style.transform = 'translateY(-100%)'`), joten
   CSS ei voinut nähdä tilaa muuten kuin lukemalla toisen tiedoston
   merkkijonoa. Se on täsmälleen se kytkentä joka hajoaa hiljaa kun toinen
   pää muuttuu. Skripti vaihtaa nyt luokkaa `on-auki`, ja tila on tässä.
   Piilotila EI ole pelkkä siirto vaan `visibility: hidden`: siirretty
   elementti on yhä maalattava, piilotettu ei ole. */
body.sivu--opas #stickyNav {
  visibility: hidden;
  transform: translateY(-100%);
  transition: transform var(--dur) var(--ease), visibility 0s linear var(--dur);
}
body.sivu--opas #stickyNav.on-auki {
  visibility: visible;
  transform: translateY(0);
  transition: transform var(--dur) var(--ease), visibility 0s linear 0s;
}
/* Alanavi asettuu ylätunnisteen alle eikä sen sisään. Vakio on sama
   `--oef-ylatunniste` jota mainin turva-alue käyttää (oef-typo.css), joten
   ylätunnisteen kasvaessa muutetaan yksi arvo. */
body.sivu--opas #stickyNav { top: var(--oef-ylatunniste); }

/* --- §O2  ALANAVIN REKISTERI JA RYTMI ------------------------------------
   Alanavi on sivun sisäinen sijaintitieto, eli §5.1:n mukaan konetta. Se on
   myös sivuston ainoa navigaatio joka käyttää kolmea eri tekstiväriä
   (slate-400, slate-500 ja slate-700 erottimelle). Tokenikerros on jo
   korjannut värit; tässä yhtenäistetään koko ja väli. */
body.sivu--opas #stickyNav a {
  font-family: var(--f-kone);
  font-size: var(--t-0);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
body.sivu--opas #stickyNav > div { gap: var(--v5); }

/* --- §O3  HERON PALSTA ---------------------------------------------------
   Mitattu: energiaoppaan palsta oli 1280 px kun järjestelmän muut sivut ovat
   803-1112 px, ja sen päälinja oli x 80 kun järjestelmä on x 164. Perusta
   korjaa molemmat, mutta heron oma ruudukko `lg:grid-cols-[1.35fr_1fr]`
   tuottaa 1160 px:n palstalla vasemmalle palstalle 645 px, jolloin
   viisirivinen h1 venyy kuudelle riville. Suhde 1.35:1 -> 1.5:1 palauttaa
   vasemman palstan 680 px:iin eli samaan luokkaan kuin palvelusivujen 803 px
   ilman että oikean palstan kortti kapenee alle 440 px:n. */
@media (min-width: 1024px) {
  body.sivu--opas main > section#hero > div > div { grid-template-columns: 1.5fr 1fr; }
}

/* --- §O4  NELJA LUKUA, NELJA VARIA -> YKSI MERKITYS PER VARI -------------
   Tama loytyi KUVASTA kolmannella kierroksella, ei mittarista. Yksikaan
   mittari ei nahnyt sita: OTSIKKOVARI lukee vain h1-h3, kontrastimittari
   hyvaksyy kaikki nelja (6,2-19,2:1) ja kulmia oli 2.

   Mitattu y 1955-2110, 1440 px: `9 v` oranssi (--toiminta), `9 h` syaani
   (--ehto), `20-9 %` vihrea (text-green-400) ja `0 EUR` valkoinen. Nelja
   samanarvoista lukua nelja eri varia. Brandbook §3.1:n merkityskartassa
   oranssi on TOIMINTA JA MAARAAIKA, syaani SITOVA EHTO ja vihrea
   TOTEUTUNUT TILA. Yksikaan niista ei pida paikkaansa naista luvuista:
   energiatodistuksen voimassaolo ei ole toiminta, vastausaika ei ole sitova
   ehto eika saastohaarukka ole toteutunut tila. Sumennustestissa (8 px)
   riviin jaa nelja erivarista laikkua joista yksikaan ei nouse esiin.

   Tama on TASMALLEEN sama vika jonka palvelusivut korjasivat
   (`oef-palvelu-sivu.css` §6.1: "Kolme lukua olivat oranssi, syaani ja
   vihrea, eli kolme eri merkitysta kolmelle samanarvoiselle luvulle"), ja
   korjaus on sama mekanismi: kartassa VALKOINEN on itse vastaus, joten luvut
   ovat valkoisia ja YKSI saa oman pinnan ja oranssin ylareunan.

   HALLITSEVAKSI VALITTIIN NELJAS, `0 EUR provisiota laitetoimittajilta tai
   urakoitsijoilta`, ja valinta tulee sivun omasta tekstista eika maustani:
   sivun h1 paattyy sanaan "puolueettomasti" ja tama luku on sen ainoa
   numeerinen muoto. Kolme muuta ovat faktoja jotka kuka tahansa alan toimija
   voi esittaa; tama on vaite joka erottaa. Sijainti rivin lopussa on silloin
   etu eika haitta: rivi lukeutuu kolmena faktana jotka johtavat yhteen
   vaitteeseen.

   Efektibudjetti (mitta 6): tausta + ylareuna = 2. Lasikortti puretaan samalla
   (§6:n nimetty kielletty), joten muut kolme jaavat hiusviivaan. */
body.sivu--opas main .stat-number { color: var(--teksti-1); }
body.sivu--opas main .grid > div:has(> .stat-number) {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: transparent;
  border: 1px solid var(--oef-viiva);
}
body.sivu--opas main .grid > div:last-child:has(> .stat-number) {
  background: var(--oef-bg-syva);
  border: 0;
  border-top: 2px solid var(--toiminta);
}

/* --- §O5  KOLME SAMANARVOISTA LINKKIA KOLMESSA VARISSA -------------------
   Palvelukorttien "Lue lisää" on oranssi, syaani ja vihrea (rivit 570, 576,
   582). Kolme samanarvoista linkkia kolmessa merkityksessa. Linkki on
   toimintaa, eli merkityskartan oranssia, ja leipatekstin seassa oranssi
   linkki on --toiminta-linkki (#FF9A4C, 9,14:1) eika aksenttioranssi.
   Kohde on nimetty ruudukon kautta, ei paljaana apuluokkana. */
body.sivu--opas main .grid a .text-primary,
body.sivu--opas main .grid a .text-accent,
body.sivu--opas main .grid a .text-green-400,
body.sivu--opas main .grid > a .text-primary,
body.sivu--opas main .grid > a .text-accent,
body.sivu--opas main .grid > a .text-green-400 { color: var(--toiminta-linkki); }