/* Mobiilinavigaatio: tiivistyva palkki. Claude Design -luovutus
   design_handoff_aio_mobile_nav (A2), sovitettu sivuston naviin 11.9.2026.
   Ladataan styles.css:n tai subpage.css:n JA garage-channel.css:n jalkeen.
   Kaikki saannot ovat alle 600 px:n leveydella, joka on sama raja jolla
   garage-channel.css antaa avaajalle oman rivin. Vaakataso (600 px ja
   yli) ei muutu.

   Poikkeama luovutuksesta: nav-lohko ei muuta korkeuttaan tiivistyessa.
   Luovutus kutisti koko navin (144 -> 49) ja paikkasi seuraukset
   overflow-anchor:none:lla ja nav-height.js:n vartijalla. Tassa lohko
   pysyy avoimen korkuisena (nav-compact.js mittaa sen --nav-open-h-
   muuttujaan) ja vain sisempi .in kutistuu. Lohkon tyhja alaosa on
   lapinakyva ja paastaa kosketukset lapi (pointer-events), joten
   sisalto ei siirry pikselia, ankkurit osuvat, hero ei muutu eika
   vierityksen ankkurointia tarvitse sammuttaa.

   Mitat 390 px:ssa: auki 147 px (tunnusrivi 30, linkkirivi 34, nappi
   44, pehmusteet 9+10+10+9, viiva 1), ilman avaajaa 93, tiiviina 49.
   Rivivali oli luovutuksessa 8 px; kayttajan puhelintesti 11.9.: 8 oli
   liian tiivis ja 12 hieman liikaa, 10 on valimalli. Hero mahtuu
   375x629:ssa avaajan kanssa. */

@media(max-width:599.98px){

  /* -- 1. Lohko ja pinta. Tausta ja viiva siirtyvat nav:sta .in:iin,
     jotta tiiviissa tilassa lohkon alaosa on lapinakyva. Viiva
     pidetaan molemmissa tiloissa: luovutus poisti sen auki-tilasta,
     koska mockin hero oli eri savy, mutta talla sivustolla navi ja
     hero ovat samaa sinista ja viiva on niiden ainoa raja. -------- */
  nav.sitenav{background:transparent;border-bottom:0;pointer-events:none}
  nav.sitenav .in{position:relative;background:var(--aic-blue-900);border-bottom:1px solid rgba(255,255,255,.18);pointer-events:auto}
  nav.sitenav.cmp,nav.sitenav.cmp-x{height:var(--nav-open-h)}

  /* -- 2. Tunnusrivi tiiviimmaksi: tunnus 30 px, ITEE 30 px. Selite
     (Advanced / Intelligence / Oulu) jaa pois: lockupin saanto on
     selitteen mustekorkeus = merkin kirjainkorkeus (2 x rivivali +
     0,686 x fonttikoko; CD 14.9.2026), ja 30 px:n merkilla kirjain-
     korkeus on 24,3 px, jolloin selite olisi noin 9/8,8 px eli alle
     luettavan chrome-koon. Merkki kantaa brandin yksin. Rivin korkeus
     ei muutu, koska .mark on 30 px ja selite oli samat 30 px. ------- */
  nav.sitenav .in{padding:9px 20px;row-gap:10px;grid-template-rows:auto;transition:padding 200ms ease,row-gap 200ms ease}
  nav.sitenav.agc-host .in{row-gap:10px}
  nav.sitenav .mark{height:30px}
  nav.sitenav .mark .mk{width:66.8px;height:30px;transition:width 200ms ease,height 200ms ease}
  nav.sitenav .mark .dsc{display:none}
  nav.sitenav .itee{width:30px;height:30px}

  /* -- 3. Linkit laatikoiksi. Leveys sisallon mukaan (flex:1 1 auto),
     ei tasalevyisina: YHTEYSTIEDOT on 70 px ja tasalevyisen laatikon
     sisus on 390 px:ssa 65 px, 360:ssa 60 px. Sisallon mukaan koko
     rivi on 270 px ja mahtuu 320:sta ylospain ilman lyhytnimia.
     Kosketusalue 44 px :after-elementilla, joka korvaa alasivujen
     aria-current-alleviivauksen (sama pseudoelementti). ------------ */
  nav.sitenav .in .navlinks{display:flex;flex-wrap:nowrap;gap:6px;padding:0;justify-content:space-between;overflow:visible;-webkit-mask-image:none;mask-image:none}
  nav.sitenav .in .navlinks a{position:relative;flex:1 1 auto;min-width:0;height:34px;display:flex;align-items:center;justify-content:center;padding:0 8px;margin:0;line-height:1;
    border:1px solid rgba(255,255,255,.34);border-radius:var(--radius-md);
    font-size:10px;letter-spacing:.06em;color:rgba(255,255,255,.88);white-space:nowrap;text-decoration:none}
  nav.sitenav .in .navlinks a.on,nav.sitenav .in .navlinks a.c,nav.sitenav .in .navlinks a[aria-current=page]{border-color:var(--aic-orange-600);color:var(--aic-orange-600)}
  nav.sitenav .in .navlinks a:after{content:"";position:absolute;left:0;right:0;top:-5px;bottom:-5px;height:auto;background:none}

  /* -- 4. Avaaja napiksi: oranssi taytto, kuplamerkki, ei kursoria
     eika kenoviivaa. Kohdistusrengas valkoinen, koska --color-focus on
     sama oranssi kuin tausta. Ikoni on oma leikkaus vyohykemerkista
     (viiva 3,4 yksikkoa, ei lattiaviivaa); merkkisarja ei muutu. ---- */
  nav.sitenav.agc-host .in [data-agc-trigger]{margin-top:0}
  nav.sitenav.agc-host .in .agc-t{width:100%;height:44px;justify-content:center;gap:9px;padding:0 12px;
    background:var(--aic-orange-600);border:0;border-radius:var(--radius-md);
    color:var(--aic-neutral-900);font-size:15px;font-weight:600}
  nav.sitenav.agc-host .in .agc-t:hover,nav.sitenav.agc-host .in .agc-t:active{background:var(--aic-orange-700)}
  nav.sitenav.agc-host .in .agc-t:focus-visible{outline:2px solid #fff;outline-offset:2px}
  nav.sitenav.agc-host .in .agc-t .agc-car,nav.sitenav.agc-host .in .agc-t .agc-sl{display:none}
  nav.sitenav.agc-host .in .agc-t:before{content:"";width:18px;height:18px;flex:none;background:url(assets/logos/aio-garage-icon.svg) center/contain no-repeat}

  /* -- 5. Valikkopainike. Auki-tilassa display:none, jottei se vie
     ruudukosta omaa rivia (luovutuksen 0x0-painike olisi saanut rivin
     ja rivivalin). Sarake negatiivisena, jotta sama saanto osuu
     etusivun kolmi- ja alasivujen nelisarakkeiseen ruudukkoon. ------ */
  nav.sitenav .in .navburger{display:none;width:34px;height:34px;padding:0;grid-row:1;grid-column:-2/-1;justify-self:end;
    border:1px solid rgba(255,255,255,.34);border-radius:var(--radius-md);background:none;
    gap:4px;align-content:center;justify-items:center;cursor:pointer;color:#fff}
  nav.sitenav .in .navburger i{display:block;width:18px;height:2px;background:currentColor}
  nav.sitenav .in .navburger:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}

  /* -- 6. Tiivis tila (nav.cmp): linkkirivi pois (visibility, jotta
     linkit poistuvat myos sarkainjarjestyksesta), tunnus 57 px, avaaja
     pieneksi napiksi tunnuksen viereen, valikkopainike reunaan.
     Rivivali nollataan, koska tyhja rivi 2 pitaisi muuten valinsa:
     negatiivinen marginaali ei kutista ruudukon rataa (mitattu 57 px,
     ei 49). ------------------------------------------------------------ */
  nav.sitenav .in .navlinks{max-height:60px;opacity:1;visibility:visible;transition:max-height 200ms ease,opacity 120ms ease,visibility 0s}
  nav.sitenav.cmp .in .navlinks{max-height:0;opacity:0;visibility:hidden;overflow:hidden;transition:max-height 200ms ease,opacity 120ms ease,visibility 0s 200ms}
  nav.sitenav.cmp .in{padding-top:7px;padding-bottom:7px;row-gap:0}
  nav.sitenav.cmp .mark{height:25.6px}
  nav.sitenav.cmp .mark .mk{width:57px;height:25.6px}
  nav.sitenav.cmp .mark .dsc,nav.sitenav.cmp .lang,nav.sitenav.cmp .itee{display:none}
  nav.sitenav.cmp .in .navburger{display:grid}
  nav.sitenav.cmp.agc-host .in [data-agc-trigger]{grid-row:1;grid-column:-3/-2;justify-self:end;margin:0}
  nav.sitenav.cmp.agc-host .in .agc-t{width:auto;height:34px;padding:0 11px;gap:7px;font-size:13.5px}
  nav.sitenav.cmp.agc-host .in .agc-t .agc-full{display:none}
  nav.sitenav.cmp.agc-host .in .agc-t .agc-short{display:inline}

  /* -- 7. Paneeli (nav.cmp.open). Ei erillista elementtia: .in kasvaa
     kiintean nav-lohkon yli ja peittaa sisallon. Linkit pystylistana
     rivilla 2, kielivalinta ja ITEE rivilla 3 kuten referenssin
     sheet-jalka. ------------------------------------------------------ */
  /* Matalassa näkymässä (zoomaus 400 %) paneeli vierittyy, jotta
     kielivalinta ja ITEE-linkki tulevat esiin (huomio 12, 1.10.2026). */
  nav.sitenav.cmp.open .in{padding-bottom:16px;max-height:100vh;max-height:100dvh;overflow-y:auto;overscroll-behavior:contain}
  nav.sitenav.cmp.open .in .navlinks{max-height:none;margin-top:4px;opacity:1;visibility:visible;overflow:visible;flex-direction:column;align-items:stretch;gap:0;transition:none}
  nav.sitenav.cmp.open .in .navlinks a{flex:none;height:auto;justify-content:space-between;padding:14px 0;border:0;border-bottom:1px solid rgba(255,255,255,.16);border-radius:0;font-size:14px;letter-spacing:.1em;color:#fff}
  nav.sitenav.cmp.open .in .navlinks a.on,nav.sitenav.cmp.open .in .navlinks a.c,nav.sitenav.cmp.open .in .navlinks a[aria-current=page]{color:var(--aic-orange-600)}
  nav.sitenav.cmp.open .in .navlinks a:after{content:"\203A";position:static;height:auto;color:var(--aic-orange-600);font-size:13px;line-height:1}
  nav.sitenav.cmp.open .lang{display:flex;grid-row:3;grid-column:1;justify-self:start;margin:12px 0 0}
  nav.sitenav.cmp.open .itee{display:block;grid-row:3;grid-column:-2/-1;justify-self:end;margin-top:12px}

  /* -- 8. Ankkurit: tiivis palkki on 49 px, joten osion ylamarginaali
     pienenee (116 etusivulla, 97 alasivuilla). Luokan html.cnav antaa
     nav-compact.js, joten ilman JavaScriptia, jolloin tiivistystakaan
     ei ole, vanhat arvot pysyvat. -------------------------------------- */
  html.cnav section,html.cnav section[id]{scroll-margin-top:64px}
  /* "Takaisin ylos" osoittaa #top-osioon, joka alkaa navin alta (147 tai
     93 px); 64 px:n marginaali jatti vierityksen noin 83 px:iin eika
     tiivis navi purkautunut (purku alle 16 px). Ylisuuri marginaali
     leikkautuu nollaan, jolloin navi avautuu. Puhelintesti 11.9. */
  html.cnav #top{scroll-margin-top:100vh}

  /* Liike pois, jos kayttaja on sen kieltanyt: styles.css:n ja
     subpage.css:n yleinen prefers-reduced-motion-saanto kattaa taman. */
}

/* Valikkopainike ei kuulu 600 px:n ja sita leveammille naytoille. */
@media(min-width:600px){.navburger{display:none}}