/* Väriteeman komponenttisäännöt, joita ei voi ilmaista pelkillä tokeneilla. Ladataan sivun oman CSS:n jälkeen
   (src/chrome.mjs applyTheme, render.mjs shell). Arvot tulevat public/klik-tokens.css:stä, joten samat säännöt
   tuottavat vuokralaisille suunnan A (sininen peitto, valkoinen teksti) ja vuokranantajille suunnan B (vaalea
   verho, tumma teksti). !importantia käytetään vain, kun arkiston Webflow-CSS:n tarkempi valitsin pitää ohittaa
   (perustelu säännön kohdalla). */

/* ---------- 1. Webflow-herot (arkistosivut ja uudistetut sivut, joiden kuva tulee arkiston CSS:stä) ----------
   Arkiston CSS:ssä heron kuvan päällä on musta peittokerros (#000000a6 ym.). Sen päälle tulee teeman peitto
   ::after-kerroksena sisällön alle: A:ssa sininen brändipeitto, B:ssä vaalea verho, joka vaalentaa ja harmaannuttaa
   takana olevan kuvan (backdrop-filter), jotta tumma teksti on luettavaa kuvasta riippumatta.
   Uudistetut sivut, jotka asettavat heron kuvan itse tokenilla --klik-hero-overlay, merkitään .ku-hero-own. */
/* !important: arkiston ._w-herosection.vuokranantajat.vuokralaiset (0,3,0) asettaa position: static, jolloin
   peittokerros levittäytyisi koko sivun päälle. */
:is(._w-herosection, .header-main):not(.ku-hero-own) { position: relative !important; isolation: isolate; }
:is(._w-herosection, .header-main):not(.ku-hero-own)::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--klik-hero-wash);
  -webkit-backdrop-filter: var(--klik-hero-filter); backdrop-filter: var(--klik-hero-filter);
}
:is(._w-herosection, .header-main) { border-bottom: 1px solid var(--klik-hero-line); }

/* Heron tekstit: arkiston CSS antaa näille luokille valkoisen värin yhden luokan valitsimella (0,1,0). */
:is(._w-herosection, .header-main) :is(h1, h2, ._w-herosectiontitle, .uusi-otsake, .heading-30) {
  color: var(--klik-on-hero); text-shadow: none;
}
:is(._w-herosection, .header-main) :is(._w-herosectiontext, .paragraph-14) { color: var(--klik-on-hero-text); text-shadow: none; }
/* Arkiston .keltainen-korostus: A:ssa keltainen sinisellä, B:ssä sininen vaalealla (keltainen teksti ei näy vaalealla). */
:is(._w-herosection, .header-main) .keltainen { color: var(--klik-hero-accent); }
:is(._w-herosection, .header-main) a:focus-visible { outline-color: var(--klik-hero-focus); }
/* Arkiston heropainikkeet (._w-herosectionbutton #0236c7, .button-2._0-top-margin #03c) katoaisivat siniseen peittoon: heron pääpainikkeen tokenit
   (A keltainen + tumma teksti, B sininen + valkoinen teksti). */
:is(._w-herosection, .header-main) :is(._w-herosectionbutton, .button-2.w-button) { background-color: var(--klik-hero-btn-bg); color: var(--klik-hero-btn-text); }
:is(._w-herosection, .header-main) :is(._w-herosectionbutton, .button-2.w-button):hover { background-color: var(--klik-hero-btn-hover-bg); color: var(--klik-hero-btn-hover-text); }

/* Vuokranantajien arkistosivujen herot (ei uudistetun .klik-uusi-sisällön sisällä): arkiston sisällössä on muitakin valkoisia
   tekstiluokkia (.heading-33, .link-6, arvostelu-upotus ym.), joten vaalean verhon päällä kaikki teksti tummaksi.
   Webflow'n painikkeet (.w-button) pitävät omat värinsä. */
[data-klik-theme="landlord"] :is(._w-herosection, .header-main):not(.klik-uusi, .klik-uusi *) :is(h1, h2, h3, h4, h5, h6, p, li, a, span, div, strong, small, label):not(.w-button, .w-button *, [class*="button"], [class*="button"] *) {
  color: var(--klik-on-hero-text); text-shadow: none;
}
[data-klik-theme="landlord"] :is(._w-herosection, .header-main):not(.klik-uusi, .klik-uusi *) :is(h1, h2, h3, h4, [class*="heading"]):not(.w-button, [class*="button"]) { color: var(--klik-on-hero); }

/* ---------- 2. Arkiston tekstilinkit ----------
   Webflow'n .link (#00a1ff) jää valkoisella 2,8:1:een (WCAG AA vaatii 4,5:1). Tekstilinkit pääväriin;
   muunnelmat .nappula ja .tyopaikka (omat taustansa) pitävät arkiston värin. */
.link:not(.nappula, .tyopaikka) { color: var(--klik-primary); }