/* ══════════════════════════════════════════════════════════════════════════
   YLÄPALKKI IRRALLISILLE SIVUILLE (26.8.2026)
   ══════════════════════════════════════════════════════════════════════════

   🔴 MIKSI TÄMÄ ON OLEMASSA. Mitattu: `grep -c "<header\|<nav"` antoi NOLLA
   seitsemälletoista `public/*.html`-sivulle. Hakukoneesta `tietoturva.html`:lle
   laskeutuva hankintapäällikkö EI PÄÄSSYT TAKAISIN TUOTTEESEEN muuten kuin
   sivun alatunnisteen kautta — ja osalla sivuista ei ole sitäkään.

   Sivustolla oli kolme toisistaan tietämätöntä navigaatiojärjestelmää:
   Reactin navipalkki (yksi URL), docs.js:n sivupalkki (10 sivua) ja
   ei-mitään (nämä 17). Tämä sulkee kolmannen aukon.

   🔴 TIEDOSTO, EI LOHKO. Perustelu on kirjattu `docs.css:1-7`:ään: "sivun
   lisääminen on sisällön kirjoittamista, ei tyylin kopiointia — muuten viides
   sivu ajautuu ensimmäisestä erilleen." Nämä sivut ovat tarkoituksella
   JS-vapaita yhden tiedoston sivuja, joten jaettu React-komponentti ei sovi;
   jaettu tyylitiedosto sopii.

   🔴 ARVOT OVAT KOPIOITA `src/index.css`:N NAVITOKENEISTA, ja se on tiedossa.
   Nämä sivut eivät lataa sovelluksen tyylitiedostoa, joten tokeneita ei voi
   periä. Kopio on sallittu VAIN koska portti vertaa niitä:
   `src/utils/palkkiPortti.test.js` lukee molemmat ja vaatii samat luvut.
   Ilman porttia tästä tulisi viides tyylimaailma — täsmälleen se mitä tämä
   työ purkaa.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --palkki-korkeus: 3.5rem;   /* = --navi-korkeus */
  --palkki-kohde: 2rem;       /* = --navi-kohde   */
  --palkki-teksti: 0.875rem;  /* = --navi-teksti  */
  --palkki-merkki: 0.9375rem; /* = --navi-merkki  */
  --palkki-radius: 8px;       /* = --navi-radius  */
  --palkki-muste: #171717;    /* = --color-primary   (vaalea) */
  --palkki-himmea: #525252;   /* = --color-secondary (vaalea) */
  --palkki-viiva: #e5e5e5;    /* = --border-card     (vaalea) */
  --palkki-coral: #c81e24;    /* = --accent-coral-solid (vaalea) */
  --palkki-hover: rgba(23, 23, 23, 0.05);
}

/* 🔴 ANKKURIVARAUS (auditointi 26.8.2026). Palkki on `position: sticky`,
   joten ilman tätä ankkuriin hypätty otsikko jää sen alle. Mitattu ennen
   korjausta: `#sisalto`-hypyn jälkeen H1:n ensimmäinen tekstirivi oli
   46–47 px:ssä ja palkin alareuna 56 px:ssä — eli 9–10 px otsikkorivistä
   palkin alla, ja koska palkki on läpikuultava, kirjainten yläosat näkyivät
   sumeana haamuna.

   Tämä on TÄSMÄLLEEN sama WCAG 2.4.11 -vika joka korjattiin sovelluksesta
   samassa työssä (varaus valehteli neljässä paikassa) — ja jonka oma
   sticky-palkkini toi näille 17 sivulle. `+ 1rem` on sama marginaali kuin
   `index.css`:n `calc(var(--navi-korkeus) + 1rem)`. */
html { scroll-padding-top: calc(var(--palkki-korkeus) + 1rem); }

/* Ohituslinkin kohde saa `tabindex="-1"`, jotta fokus oikeasti siirtyy.
   Selaimen oletusääriviiva siitä olisi harhaanjohtava — kohde ei ole
   kontrolli — joten se piilotetaan, mutta VAIN näppäimistöfokuksessa
   näkymätön kehys riittää kertomaan sijainnin vieritys + otsikko. */
#sisalto:focus { outline: none; }

/* Ohituslinkki: palkissa on kolme linkkiä ennen sisältöä, ja ne toistuvat
   joka sivulla. WCAG 2.4.1 (Bypass Blocks). Sama kuvio kuin docs.css:99. */
.ohita {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 60;
  background: var(--palkki-muste);
  color: #fff;
  padding: 0.7rem 1.1rem;
  border-radius: 0 0 var(--palkki-radius) 0;
  font-weight: 600;
  text-decoration: none;
}
.ohita:focus { left: 0; color: #fff; }

.sivupalkki {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  min-height: var(--palkki-korkeus);
  padding: 0 1.5rem;
  background: #fff;
  border-bottom: 1px solid var(--palkki-viiva);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
/* Läpikuultavuus vain jos selain tukee sitä — muuten teksti sisällön päällä
   olisi lukukelvoton. Sama suojaus kuin `.site-nav`issa. */
@supports (backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px)) {
  .sivupalkki {
    background: rgba(255, 255, 255, 0.88);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
            backdrop-filter: saturate(180%) blur(12px);
  }
}

.sivupalkki-merkki {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: var(--palkki-kohde);
  flex: none;
  font-size: var(--palkki-merkki);
  font-weight: 600;
  letter-spacing: -0.011em;
  color: var(--palkki-muste);
  text-decoration: none;
}
.sivupalkki-merkki img { display: block; border-radius: 6px; }

.sivupalkki-linkit {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  flex: 1;
  min-width: 0;
}
.sivupalkki-linkit a {
  display: inline-flex;
  align-items: center;
  height: var(--palkki-kohde);
  padding-inline: 0.55rem;
  border-radius: var(--palkki-radius);
  font-size: var(--palkki-teksti);
  font-weight: 500;
  color: var(--palkki-himmea);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 120ms ease, color 120ms ease;
}
.sivupalkki-linkit a:hover { background: var(--palkki-hover); color: var(--palkki-muste); }

/* Paluu tuotteeseen. Tämä on koko palkin tarkoitus: hakukoneesta tälle
   sivulle laskeutunut ei päässyt takaisin sovellukseen mistään. */
.sivupalkki-paluu {
  display: inline-flex;
  align-items: center;
  height: var(--palkki-kohde);
  padding: 0 0.9rem;
  flex: none;
  border-radius: var(--palkki-radius);
  background: var(--palkki-coral);
  color: #fff;
  font-size: var(--palkki-teksti);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 120ms ease;
}
.sivupalkki-paluu:hover { background: #a3161b; }  /* = --accent-coral-solid-hover */

.sivupalkki :focus-visible {
  outline: 3px solid var(--palkki-muste);
  outline-offset: 2px;
}

/* 🔴 KAPEALLA PIILOTETAAN MERKIN TEKSTI, EI LINKKEJA (auditointi 26.8.2026).
   Ensimmainen versio piilotti `.sivupalkki-linkit`in ja perusteli sen
   kommentilla "Mitaan ei piiloteta ilman etta sama polku on muualla —
   molemmat kohteet ovat sivun alatunnisteessa."

   SE OLI EPATOSI. Mitattu: YHDELLAKAAN 17 sivusta ei ole `<footer>`-elementtia.
   Alle 640 px:ssa `/kayttoonotto/` ja `/organisaatioille.html` katosivat
   nelja sivua kokonaan ilman korvaavaa reittia — mm.
   `saavutettavuusseloste.html`, `tillganglighetsutlatande.html` ja
   `accessibility-statement.html` menettivat molemmat.

   Merkin teksti on turvallinen piilotettava: ikoni jaa, linkki vie yha
   etusivulle, ja `aria-label="PDF Taituri"` sailyttaa saavutettavan nimen.
   Se sailyttaa sisaltolinkit, jotka ovat koko palkin tarkoitus. */
@media (max-width: 40em) {
  .sivupalkki { padding: 0 1rem; gap: 0.5rem; }
  .sivupalkki-merkki .merkki-teksti { display: none; }
  .sivupalkki-linkit { gap: 0; }
  .sivupalkki-linkit a { padding-inline: 0.4rem; }
  .sivupalkki-paluu { padding: 0 0.7rem; }
}

/* Kosketuskohteet 44 px, sama talon standardi kuin sovelluksessa. */
@media (max-width: 68.75em), (pointer: coarse) {
  .sivupalkki-merkki,
  .sivupalkki-linkit a,
  .sivupalkki-paluu { height: 2.75rem; }
}