/* =============================================================================
   OEF runko · sama ylätunniste ja alatunniste sivuille ilman Tailwindia
   Luotu 14.10.2026 (Danin päätös: ilme yhtenäiseksi kaikille 19 sivulle).

   Tailwind-sivuilla (etusivu, palvelusivut, services, contact, kysy, opas,
   kartoitus) header ja footer ovat Tailwind-luokkia. VARKE-sivut, laskuri,
   tietosuojaseloste ja 404 eivät lataa Tailwindia, joten niillä oli kolme
   omaa ylätunnistetta (3 linkkiä, 0 linkkiä, ei mitään) ja yhden rivin
   alatunniste. Tämä tiedosto piirtää saman headerin ja saman 4-palstaisen
   footerin puhtaalla CSS:llä: samat 8 linkkiä, sama CTA, sama palsta
   (max 1280 px, sivupehmuste 48/24 px) kuin palvelusivujen Tailwind-header.

   Mobiilivalikko on <details>: toimii ilman JS:ää eikä tarvitse menuOverlay-
   skriptiä. Header on sticky eikä fixed, joten sivun sisältöä ei tarvitse
   siirtää alas. Riippuvuudeton: värit fallbackeina, koska /varke-klusteri ja
   tietosuojaseloste lataavat tokenit eri tavoin.
   ========================================================================== */

.oef-runko-yla {
  position: sticky; top: 0; z-index: 50;
  background: rgba(10, 15, 20, 0.82);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--oef-viiva-heikko, rgba(255, 255, 255, 0.06));
  font-family: 'Inter', system-ui, sans-serif;
}
.oef-runko-yla__palsta,
.oef-runko-ala__palsta {
  max-width: 1280px; margin: 0 auto; padding: 0 24px; box-sizing: border-box;
}
.oef-runko-yla__palsta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; min-height: 96px;
}
@media (min-width: 1024px) {
  .oef-runko-yla__palsta, .oef-runko-ala__palsta { padding: 0 48px; }
}
.oef-runko-logo { display: flex; flex-direction: column; color: #FFFFFF; text-decoration: none; }
.oef-runko-logo__nimi {
  font-family: 'Satoshi', 'Inter', system-ui, sans-serif;
  font-size: 1.25rem; font-weight: 700; line-height: 1; letter-spacing: -0.04em;
}
.oef-runko-logo__maa { font-size: 10px; font-weight: 500; letter-spacing: 0.2em; opacity: 0.7; margin-top: 2px; }

.oef-runko-navi { display: none; align-items: center; gap: 20px; }
@media (min-width: 1024px) { .oef-runko-navi { display: flex; } }
.oef-runko-navi a:not(.oef-runko-cta),
.oef-runko-valikko__lista a {
  color: #FFFFFF; text-decoration: none; font-size: 1rem; line-height: 1.5;
  padding: 6px 0; border-bottom: 2px solid transparent;
}
.oef-runko-navi a:not(.oef-runko-cta):hover { color: var(--toiminta, #FF5C00); }
.oef-runko-navi a[aria-current="page"] { border-bottom-color: var(--toiminta, #FF5C00); }

.oef-runko-cta {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--toiminta-pinta, #CC4A08); color: #FFFFFF; text-decoration: none;
  font-family: var(--f-kone, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 12px 24px; border-radius: 4px;
  box-shadow: 0 4px 20px rgba(255, 92, 0, 0.5);
  transition: background-color 0.2s, transform 0.2s;
}
.oef-runko-cta:hover { background: var(--toiminta-pinta-hover, #B34107); transform: translateY(-2px); }
.oef-runko-yla a:focus-visible, .oef-runko-ala a:focus-visible, .oef-runko-valikko > summary:focus-visible {
  outline: 2px solid #FFFFFF; outline-offset: 3px;
}

.oef-runko-valikko { position: static; }
@media (min-width: 1024px) { .oef-runko-valikko { display: none; } }
.oef-runko-valikko > summary {
  list-style: none; cursor: pointer; color: #FFFFFF;
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 8px;
}
.oef-runko-valikko > summary::-webkit-details-marker { display: none; }
.oef-runko-valikko > summary svg { width: 28px; height: 28px; }
.oef-runko-valikko__lista {
  position: absolute; left: 0; right: 0; top: 100%;
  background: #0A0F14; border-bottom: 1px solid var(--oef-viiva, rgba(255, 255, 255, 0.1));
  display: flex; flex-direction: column; gap: 4px; padding: 16px 24px 24px;
}
.oef-runko-valikko__lista .oef-runko-cta { margin-top: 12px; }

.oef-runko-ala {
  border-top: 1px solid var(--oef-viiva, rgba(255, 255, 255, 0.1));
  padding: 48px 0; font-family: 'Inter', system-ui, sans-serif;
  color: var(--teksti-3, #94A3B8); font-size: 0.875rem; line-height: 1.6;
  background: transparent; text-align: left;
}
.oef-runko-ala__ruudukko { display: grid; gap: 32px; margin-bottom: 48px; }
@media (min-width: 640px) { .oef-runko-ala__ruudukko { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .oef-runko-ala__ruudukko { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.oef-runko-alatunniste__otsikko { color: #FFFFFF; font-size: 1rem; font-weight: 600; margin: 0 0 16px; }
.oef-runko-ala ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.oef-runko-ala a { color: var(--teksti-3, #94A3B8); text-decoration: none; }
.oef-runko-ala a:hover { color: var(--toiminta, #FF5C00); }
.oef-runko-ala address { font-style: normal; }
.oef-runko-ala p { margin: 0 0 8px; }
.oef-runko-ala__alarivi {
  border-top: 1px solid var(--oef-viiva-heikko, rgba(255, 255, 255, 0.06)); padding-top: 24px;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  font-size: 0.8125rem; color: var(--teksti-4, #7C8CA1);
}
.oef-runko-ala__alarivi a { color: var(--teksti-4, #7C8CA1); }

/* mittaus.js lisää Evästeasetukset-napin footeriin, mutta injektoi sen tyylit vain
   kun suostumusbanneri rakennetaan. Kun valinta on jo tehty, nappi jäisi selaimen
   oletusnapiksi: Tailwind-sivuilla preflight peittää tämän, runko-sivuilla ei. */
.oef-runko-ala .oef-ev-footer {
  max-width: 1280px; margin: 16px auto 0; padding: 0 24px; box-sizing: border-box; font-size: 0.8125rem;
}
@media (min-width: 1024px) { .oef-runko-ala .oef-ev-footer { padding: 0 48px; } }
.oef-runko-ala .oef-ev-footer button {
  background: none; border: 0; padding: 4px 2px; cursor: pointer; font: inherit;
  color: var(--teksti-3, #94A3B8); text-decoration: underline;
}
.oef-runko-ala .oef-ev-footer a { text-decoration: underline; }
.oef-runko-ala .oef-ev-footer button:hover { color: #FFFFFF; }
.oef-runko-ala .oef-ev-footer button:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }

/* Kierros 2 (14.10.2026): riippumattomuuslause palasi tagline-palstaan. Se on
   OEF:n ydinviesti (puolueeton asiantuntija, ei urakoita eikä laitteita), ja se
   katosi VARKE-sivuilta ja laskurista kun yhteinen footer korvasi sivujen omat.
   Sama --teksti-3 kuin palstan muu teksti: lause on sisältöä, ei korostusta. */
.oef-runko-ala .oef-runko-ala__riippumaton { max-width: 34ch; margin-bottom: 16px; }