/* =============================================================================
   OEF yläpalkin pudotusvalikot · yksi tiedosto kaikille sivuille (9.11.2026)

   Danin 9.11. päätös: yläpalkissa logo, Palvelut ▾, Energiatuki 2026–2027 ▾,
   Kysy, Yhteystiedot ja CTA. Etusivu- ja Hinnoittelu-linkit pois.

   Malli on WAI-ARIA APG:n "disclosure navigation", ei role=menu: nappi
   (aria-expanded + aria-controls) avaa tavallisen linkkilistan. Logiikka on
   js/oef-navi.js:ssä. Ilman JS:ää (html ilman .oef-navi-js) paneeli aukeaa
   :hover- ja :focus-within-tilasta, joten linkit ovat silti tavoitettavissa.

   Värit: oef-tokens.css. Oranssi = linkki tai toiminto (aktiivinen merkki,
   hover), muu neutraalia. Fallbackit, koska varke.html (Astro) ei lataa
   tokeneita.
   ========================================================================== */

.oef-navi-ryhma { position: relative; display: inline-flex; }

.oef-navi-nappi {
  appearance: none; background: none; border: 0; margin: 0; cursor: pointer;
  font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 0 4px; line-height: inherit; white-space: nowrap;
  position: relative;
  transition: color var(--dur-nopea, 120ms) var(--ease, ease-out);
}
.oef-navi-nappi:hover,
.oef-navi-ryhma[data-auki] > .oef-navi-nappi { color: var(--toiminta, #FF5C00); }
.oef-navi-nappi:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; border-radius: 2px; }
.oef-navi-nuoli {
  width: 12px; height: 12px; flex: none;
  transition: transform var(--dur, 200ms) var(--ease, ease-out);
}
.oef-navi-ryhma[data-auki] .oef-navi-nuoli { transform: rotate(180deg); }

/* Aktiivinen: nykyinen sivu on tässä valikossa. Sama 2 px oranssi alaviiva
   kuin .nav-link.active (styles.css) ja runko-navin aria-current. */
.oef-navi-nappi[data-nykyinen]::after {
  content: ''; position: absolute; left: 0; right: 18px; bottom: -2px;
  height: 2px; border-radius: 1px; background: var(--toiminta, #FF5C00);
}

.oef-navi-paneeli {
  display: none;
  position: absolute; top: calc(100% + 12px); left: -16px; z-index: 60;
  min-width: 248px; box-sizing: border-box;
  margin: 0; padding: 8px; list-style: none;
  background: var(--oef-bg, #0A0F14);
  border: 1px solid var(--oef-viiva, rgba(255, 255, 255, 0.10));
  border-radius: var(--r-kortti, 12px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
  font-family: var(--f-leipa, 'Inter', system-ui, sans-serif);
  font-size: 15px; letter-spacing: normal; text-transform: none;
  transform-origin: top left;
  translate: var(--oef-navi-siirto, 0px) 0;
}
/* Näkymätön silta napin ja paneelin välissä, ettei hiiri pudota ei-JS-tilaa. */
.oef-navi-paneeli::before { content: ''; position: absolute; left: 0; right: 0; top: -13px; height: 13px; }

.oef-navi-ryhma[data-auki] > .oef-navi-paneeli,
html:not(.oef-navi-js) .oef-navi-ryhma:is(:hover, :focus-within) > .oef-navi-paneeli {
  display: block;
  animation: oef-navi-auki var(--dur, 200ms) var(--ease, ease-out);
}
@keyframes oef-navi-auki { from { opacity: 0; transform: translateY(-4px) scale(0.98); } }
@media (prefers-reduced-motion: reduce) {
  @keyframes oef-navi-auki { from { opacity: 0; } }
  .oef-navi-nuoli { transition: none; }
}

.oef-navi-paneeli li { margin: 0; padding: 0; }
.oef-navi-paneeli a {
  display: flex; align-items: center; min-height: 40px; box-sizing: border-box;
  padding: 8px 12px; border-radius: var(--r-pieni, 6px);
  color: var(--teksti-2, #CBD5E1); text-decoration: none; white-space: nowrap;
  border: 0; line-height: 1.4;
  transition: background-color var(--dur-nopea, 120ms) var(--ease, ease-out), color var(--dur-nopea, 120ms) var(--ease, ease-out);
}
.oef-navi-paneeli a:hover { background: var(--oef-pinta-2, rgba(255, 255, 255, 0.06)); color: var(--teksti-1, #FFFFFF); }
.oef-navi-paneeli a:focus-visible { outline: 2px solid #FFFFFF; outline-offset: -2px; }
.oef-navi-paneeli a[aria-current="page"] {
  color: var(--teksti-1, #FFFFFF);
  box-shadow: inset 2px 0 0 var(--toiminta, #FF5C00);
  border-radius: 0 var(--r-pieni, 6px) var(--r-pieni, 6px) 0;
}
.oef-navi-paneeli .oef-navi-kaikki {
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--oef-viiva, rgba(255, 255, 255, 0.10));
}
.oef-navi-paneeli .oef-navi-kaikki a { color: var(--toiminta-linkki, #FF9A4C); }
.oef-navi-paneeli .oef-navi-kaikki a:hover { color: var(--teksti-1, #FFFFFF); }

/* Yläpalkin oma linkkirivi: Kysy ja Yhteystiedot, aria-current näkyy samoin. */
header nav a[aria-current="page"].nav-link::after {
  content: ''; position: absolute; bottom: -2px; left: 0; width: 100%;
  height: 2px; background: var(--toiminta, #FF5C00); border-radius: 1px;
}

/* ---------------------------------------------------------------------------
   Mobiilivalikko: samat ryhmät otsikoineen, kaikki linkit näkyvissä.
   Sama markup Tailwind-sivujen menuOverlayssa ja runko-sivujen <details>issä.
   ------------------------------------------------------------------------ */
.oef-mobiili { display: flex; flex-direction: column; gap: 24px; }
.oef-mobiili__otsikko {
  margin: 0 0 4px; padding: 0 12px;
  font-family: var(--f-kone, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--teksti-3, #94A3B8);
}
.oef-mobiili ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.oef-mobiili a {
  display: flex; align-items: center; min-height: 44px; box-sizing: border-box;
  padding: 10px 12px; border-radius: var(--r-pieni, 6px);
  color: var(--teksti-1, #FFFFFF); text-decoration: none; font-size: 16px; font-weight: 500; line-height: 1.4;
  border: 0;
}
.oef-mobiili a:hover { background: var(--oef-pinta-2, rgba(255, 255, 255, 0.06)); }
.oef-mobiili a:focus-visible { outline: 2px solid #FFFFFF; outline-offset: -2px; }
.oef-mobiili a[aria-current="page"] {
  background: rgba(255, 92, 0, 0.10); color: var(--toiminta, #FF5C00);
  box-shadow: inset 2px 0 0 var(--toiminta, #FF5C00);
}
.oef-mobiili .oef-navi-kaikki { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--oef-viiva, rgba(255, 255, 255, 0.10)); }
.oef-mobiili .oef-navi-kaikki a { color: var(--toiminta-linkki, #FF9A4C); }
.oef-mobiili__muut { border-top: 1px solid var(--oef-viiva, rgba(255, 255, 255, 0.10)); padding-top: 16px; }

/* ---------------------------------------------------------------------------
   Mobiilivalikon peitto (Quinn a6ccba86, 9.11.2026).
   Tailwind-sivujen menuOverlayssa <nav> oli oma vierityslaatikko (flex-1
   min-h-0 overflow-y-auto) ja alalaidan CTA-lohko oli sen alapuolella omana
   kiinteänä palkkinaan. 375x800: sisältö 711 px, tilaa 599 px, joten "Kysy"
   ja "Ota yhteyttä" leikkautuivat CTA-lohkon taakse. Nyt koko paneeli vierii
   yhtenä (menu-overlay on jo overflow-y: auto), nav ei kutistu, ja CTA tulee
   linkkien jälkeen. Lyhyellä sisällöllä nav kasvaa ja CTA pysyy alalaidassa.
   Korkeus 100dvh: mobiiliselaimen työkalupalkki ei peitä paneelin alaosaa.
   ------------------------------------------------------------------------ */
#menuOverlay { height: 100vh; height: 100dvh; overscroll-behavior: contain; }
#menuOverlay > .flex.flex-col.h-full { height: auto; min-height: 100%; }
#menuOverlay > .flex.flex-col.h-full > nav { flex: 1 0 auto; overflow: visible; }
#menuOverlay > .flex.flex-col.h-full > nav + div { padding-bottom: max(24px, env(safe-area-inset-bottom)); }
.oef-runko-valikko__lista { max-height: calc(100vh - 96px); max-height: calc(100dvh - 96px); overscroll-behavior: contain; }
/* VARKE-sivujen kiinteä alapalkki (.floating-cta, hakuoppaan .ankkuri, z 70)
   peitti runkovalikon kaksi alinta kohdetta. Valikon ollessa auki palkki on
   päällekkäinen toiminto (sama CTA on valikon lopussa), joten se piilotetaan. */
body:has(details.oef-runko-valikko[open]) .floating-cta,
body:has(details.oef-runko-valikko[open]) .ankkuri { display: none; }

/* Evästepalkki valikon päällä (Quinnin audit 10244f55, 9.11.2026).
   Ensikäynnillä 375 px:llä #oef-evasteet (fixed, z 2147483000) peitti valikon
   alimmat linkit. Valikon ollessa auki palkki piilotetaan, ja se palaa heti kun
   valikko suljetaan. Suostumusta ei kysytä eikä anneta tällä välin, eli mittaus
   pysyy pois päältä kunnes käyttäjä valitsee. */
body:has(#menuOverlay.active) #oef-evasteet,
body:has(details.oef-runko-valikko[open]) #oef-evasteet { display: none; }

/* Referenssit-linkki toi yläpalkkiin viidennen kohdan (10.11.2026). Tailwind-
   sivujen palkissa (gap-8) logo osui 1024 px:llä kiinni Palvelut-nappiin.
   Kapealla työpöydällä linkkiväli 20 px, jolloin logon ja CTA:n puolelle jää
   ilmaa. CTA on navin sisällä ja kutistuu, joten logon väli pidetään
   marginaalilla. 1280 px:stä ylöspäin Tailwindin oma 32 px. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  header nav.gap-8[aria-label="Päävalikko"] { gap: 20px; margin-left: 24px; }
}