/*
 * Omat korjaukset Webflow'n tyylien päälle.
 * Ladataan WebflowLayout.astro:ssa Webflow'n tyylitiedoston JÄLKEEN.
 * Webflow'n omaa minimoitua tiedostoa ei muokata.
 */

/*
 * HERO-TAUSTAVIDEO
 *
 * Webflow antaa taustavideolle z-index: -100, mutta sen säiliölle
 * (.w-background-video) ei mitään, joka loisi pinojärjestyksen: säiliön
 * z-index on auto, isolation auto, eikä esivanhemmilla ole transformia,
 * suodinta tai läpinäkyvyyttä. Video päätyy siksi juuren pinojärjestykseen
 * eli koko sivun sisällön alle. Säiliön overflow: hidden rajaa sen, joten
 * ulkoasu on oikein, mutta rakenne on tarpeettoman hauras: mikä tahansa
 * läpinäkyvä kohta sivulla voi paljastaa videon.
 *
 * isolation: isolate luo säiliölle oman pinojärjestyksen, jolloin video
 * pysyy sen sisällä. Ulkoasuun tämä ei vaikuta.
 *
 * HUOM: älä lisää tähän transformia tai muuta GPU-kerroksen pakottavaa
 * vihjettä ilman todennettua syytä. Kokeiltiin (translateZ(0)) korjaamaan
 * Claude-selaimessa näkyvää videon jälkikuvaa, mutta ilmiö ei toistu
 * oikeilla laitteilla eikä vihje poistanut sitä — se vain lisäisi
 * komposointikuormaa jokaisella hero-videolla.
 */
.w-background-video {
  isolation: isolate;
}

/*
 * NAVIGAATIOPALKKI — läpinäkyvä hero-kuvan päällä, sen jälkeen lasi
 *
 * Webflow'n .navbar-fix on kiinteä (position: fixed) mutta taustaltaan
 * läpinäkyvä, ja linkit käyttivät mix-blend-mode: difference -tekniikkaa
 * pysyäkseen luettavina sekä vaalealla että tummalla. Juuri se sai ne
 * sekoittumaan kuviin ja teksteihin.
 *
 * Nyt palkki toimii näin:
 *   - läpinäkyvä niin kauan kuin sivun ensimmäinen osio (hero) on sen
 *     takana; sen jälkeen lasitausta
 *   - taustan ja tekstin sävy seuraa sitä, mitä palkin takana on:
 *     hiekka vaalealla, musta tummalla
 *
 * Luokat is-solid ja is-dark asettaa Nav.astron skripti. Ilman JavaScriptiä
 * palkki jää läpinäkyväksi, kuten se oli ennenkin.
 *
 * Sekoitustila puretaan heti eikä vasta taustan ilmestyessä: sitä ei voi
 * liu'uttaa, joten sen vaihtaminen kesken siirtymän näkyisi nykäyksenä.
 * Sen sijaan sävy lasketaan myös läpinäkyvänä, ja väri vaihtuu samalla
 * kaarella kuin tausta.
 *
 * Läpinäkyvä tila on kirjoitettu kohdevärillä nollaläpinäkyvyydellä ja
 * sumennus arvolla blur(0px) — arvosta none ei voi animoida.
 */
/*
 * Tausta ja sumennus ovat pseudo-elementissä, eivät palkissa itsessään.
 *
 * backdrop-filter tekee elementistä sijoituskehyksen kaikille
 * position: fixed -jälkeläisille. Palkin sisällä on mobiilivalikko, joka
 * on juuri sellainen: kun tehoste oli palkissa, valikko kutistui palkin
 * kokoiseksi ja sen hiekanvärinen tausta katosi, jolloin linkit
 * sekoittuivat sivun sisältöön. Pseudo-elementti ei aiheuta samaa.
 */
.navbar-fix::before {
  content: "";
  /*
   * display: block on pakollinen. Webflow'n oma clearfix asettaa
   * .w-nav:before -elementille display: table, jolloin absoluuttisesti
   * sijoitettu laatikko kutistuu sisältönsä kokoiseksi eli 0 × 0
   * pikseliin — tausta ei näy lainkaan.
   */
  display: block;
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: rgb(235 234 229 / 0%);
  -webkit-backdrop-filter: blur(0px) saturate(100%);
  backdrop-filter: blur(0px) saturate(100%);
  transition: background-color .5s cubic-bezier(.4, 0, .2, 1),
              -webkit-backdrop-filter .5s cubic-bezier(.4, 0, .2, 1),
              backdrop-filter .5s cubic-bezier(.4, 0, .2, 1);
}

.navbar-fix.is-dark::before {
  background-color: rgb(0 0 0 / 0%);
}

/*
 * Sivun latautuessa palkki on läpinäkyvä eikä siirry mihinkään: skripti
 * poistaa is-init-luokan vasta asetettuaan ensimmäisen tilan. Ilman tätä
 * ensimmäinen tila häivähtäisi näkyviin.
 */
.navbar-fix.is-init::before {
  transition: none;
}

.navbar-fix.is-solid::before {
  background-color: rgb(235 234 229 / 78%);
  -webkit-backdrop-filter: blur(16px) saturate(115%);
  backdrop-filter: blur(16px) saturate(115%);
}

.navbar-fix.is-solid.is-dark::before {
  background-color: rgb(0 0 0 / 55%);
}

.nav-link-fix {
  mix-blend-mode: normal;
  color: var(--black);
  transition: color .5s cubic-bezier(.4, 0, .2, 1);
}

/*
 * Hover käyttää samaa color-ominaisuutta kuin sävynvaihto, mutta se saa
 * olla nopea — puolen sekunnin häivytys tuntuisi hitaalta osoittimen
 * alla. Hiiren poistuessa väri palaa pitkällä kaarella, mikä sopii
 * yhteen sävynvaihdon kanssa.
 */
.nav-link-fix:hover {
  transition-duration: .12s;
}

/*
 * Logon värin asettaa sivujen oma changeLogoColor-skripti inline-tyylillä
 * osion mukaan. !important voittaa inline-tyylin, joten logo seuraa
 * palkin sävyä kaikkialla — ei vain niissä osioissa, jotka on merkitty
 * luokalla color-change-section.
 */
#vertti_logo {
  fill: var(--red) !important;
  transition: fill .5s cubic-bezier(.4, 0, .2, 1);
}

.navbar-fix.is-dark #vertti_logo {
  fill: var(--white) !important;
}

/*
 * Vain työpöydällä: kapealla näytöllä linkit näkyvät vasta avautuvassa
 * valikossa, joka on hiekanvärinen — siellä musta on aina oikea väri.
 */
@media (min-width: 992px) {
  .navbar-fix.is-dark .nav-link-fix {
    color: var(--white);
  }

  /*
   * Hover ja nykyinen sivu pysyvät punaisina myös tummalla palkilla.
   * Webflow'n omat säännöt (.nav-link-fix:hover ja .nav-link-fix.w--current)
   * ovat vähemmän tarkkoja kuin yllä oleva sävysääntö, joten ne on
   * toistettava tässä — muuten valkoinen voittaisi ne.
   */
  .navbar-fix.is-dark .nav-link-fix:hover,
  .navbar-fix.is-dark .nav-link-fix.w--current {
    color: var(--red);
  }

  .navbar-fix.is-dark .nav-link-fix:hover {
    transition-duration: .12s;
  }
}

/*
 * ENNEN KUIN SÄVY ON SELVILLÄ
 *
 * Hero-kuvan kirkkautta ei voi lukea ennen kuin kuva on latautunut. Siihen
 * asti linkit käyttävät Webflow'n alkuperäistä difference-sekoitusta, joka
 * on luettava sekä vaalealla että tummalla. Ilman tätä linkit olisivat
 * mustia ja välähtäisivät valkoisiksi, kun tumma hero paljastuu.
 *
 * Skripti lisää luokan has-tone heti kun sävy on tiedossa. Säännöt ovat
 * tarkoituksella tiedoston lopussa: ne ovat yhtä tarkkoja kuin
 * sävysäännöt, joten järjestys ratkaisee.
 */
.navbar-fix:not(.has-tone) .nav-link-fix {
  mix-blend-mode: difference;
  color: gray;
}

.navbar-fix:not(.has-tone) .nav-link-fix:hover,
.navbar-fix:not(.has-tone) .nav-link-fix.w--current {
  mix-blend-mode: normal;
  color: var(--red);
}

@media (prefers-reduced-motion: reduce) {
  .navbar-fix::before,
  .nav-link-fix,
  #vertti_logo {
    transition: none;
  }
}


/* ---------------------------------------------------------------------------
   Otsikkohierarkia
   Sivuilla oli aiemmin useita h1-elementtejä (/about-sivulla 70). Ylimääräiset
   on vaihdettu h2/h3/p-tageiksi, jotta jokaisella sivulla on tasan yksi h1.
   Webflow'n CSS tyylittää otsikkoluokat, ei tageja, joten vaihto on
   ulkoasullisesti huomaamaton — kahta poikkeusta lukuun ottamatta.
   --------------------------------------------------------------------------- */

/* .names-slides ei aseta riviväliä itse, vaan sai sen h1-tagin perusarvosta
   (44px). h3:na se saisi h3:n perusarvon ja karusellin rivitys muuttuisi. */
.names-slides {
  line-height: 44px;
}

/* 404-sivun otsikko oli h2. h1-tagin perusarvot ovat suuremmat, joten
   entinen koko palautetaan tässä. */
.utility-page-content h1 {
  margin-top: 20px;
  font-size: 32px;
  line-height: 36px;
}


/* ---------------------------------------------------------------------------
   /about — henkilöruudukon sijoittelu
   Webflow kirjoitti jokaiselle henkilökortille oman id-säännön
   (#w-node-...-ac86ff61 { grid-area: span 1/…; place-self: start }). Ne olivat
   kaikki identtisiä, joten uusille korteille ei tehdä uusia id-sääntöjä —
   sama sijoittelu annetaan ruudukon kaikille lapsille luokan kautta. Ilman
   place-self: start kortti venyisi rivin korkuiseksi ja nimi irtoaisi kuvasta.
   Vanhojen korttien id-säännöt saavat jäädä: ne sanovat saman asian.
   --------------------------------------------------------------------------- */
.our-people-grid > * {
  place-self: start;
}