/* nav-responsive.css — ylävalikon portaittainen kaventuminen.
 *
 * Ongelma: sivujen oma CSS pakotti `.nav-inner{flex-wrap:wrap}` jo 1340 px:ssä,
 * jolloin kaunis yksirivinen valikko hajosi kahdelle riville turhan aikaisin.
 *
 * Ratkaisu: oikean laidan elementit kutistetaan portaittain neliöikoneiksi, ja
 * kaksirivinen taitto siirretään vasta 860 px:iin. Alle 680 px on sivujen oma
 * mobiilivalikko (hampurilainen) — sitä ei kosketa täällä.
 *
 * Tiedosto on JAETTU: linkitetty kaikille markkinointisivuille. Muutokset vain
 * tähän — navin HTML on inline-duplikoitu 68 sivulle, CSS ei enää ole.
 */

/* ── Yksi rivi 861 px:iin asti (kumoaa sivujen oman 1340 px:n taiton) ───────── */
@media (min-width: 861px) {
  .nav-inner  { flex-wrap: nowrap !important; height: 64px !important; row-gap: 0 !important; }
  .nav-links  { flex: 1 1 auto !important; order: 0 !important; flex-wrap: nowrap !important; margin: 0 !important; }
  .nav-logo-text { order: 0 !important; }
  .nav-auth-login, .nav-user-btn { order: 0 !important; }
}

/* Väljyyttä kavennetaan ennen kuin mitään piilotetaan */
@media (max-width: 1340px) and (min-width: 861px) {
  .nav-inner { padding: 0 16px !important; gap: 6px !important; }
  .nav-links > * > a, .nav-links > a { padding-left: 9px !important; padding-right: 9px !important; }
}
@media (max-width: 1240px) and (min-width: 861px) {
  .nav-links > * > a, .nav-links > a { padding-left: 7px !important; padding-right: 7px !important; font-size: 13px !important; }
  .nav-cta { padding: 8px 13px !important; }
}

/* ── Neliöiden yhteiset tyylit + hover-selite ───────────────────────────────── */
@media (max-width: 1180px) and (min-width: 681px) {
  #nav-promo-tools, .nav-auth-login, .nav-cta { position: relative; }
  #nav-promo-tools:hover::after,
  .nav-auth-login:hover::after,
  .nav-cta:hover::after {
    position: absolute; top: calc(100% + 7px); left: 50%; transform: translateX(-50%);
    background: #1a2332; color: #fff; font-size: 11.5px; font-weight: 600;
    padding: 5px 9px; border-radius: 6px; white-space: nowrap; z-index: 1200;
    pointer-events: none; box-shadow: 0 6px 18px rgba(14,45,82,.25);
  }
}

/* ── Vaihe 1 (≤1180 px): "Omat työkalut" → jakoavainneliö ───────────────────── */
@media (max-width: 1180px) and (min-width: 681px) {
  /* nav_promo.js asettaa inline-tyylit → tarvitaan !important */
  #nav-promo-tools {
    width: 38px !important; height: 38px !important;
    padding: 0 !important; gap: 0 !important; margin-right: 2px !important;
    justify-content: center !important; font-size: 0 !important;
    border-radius: 9px !important;
  }
  #nav-promo-tools::before { content: "🔧"; font-size: 17px; line-height: 1; }
  #nav-promo-tools:hover::after { content: "Omat työkalut"; }
}

/* ── Vaihe 2 (≤1080 px): "Kirjaudu sisään" → neliö ─────────────────────────── */
@media (max-width: 1080px) and (min-width: 681px) {
  .nav-auth-login {
    width: 38px; height: 38px; padding: 0 !important;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0 !important; border-radius: 9px;
  }
  .nav-auth-login::before { content: "👤"; font-size: 17px; line-height: 1; }
  .nav-auth-login:hover::after { content: "Kirjaudu sisään"; }
}

/* ── Vaihe 3 (≤980 px): logo pelkäksi ikoniksi ──────────────────────────────── */
@media (max-width: 980px) and (min-width: 681px) {
  .nav-logo-full { display: none !important; }
  .nav-logo-icon { display: block !important; }
}

/* ── Vaihe 4 (≤900 px): "Laske hinta" → laskinneliö ─────────────────────────── */
@media (max-width: 900px) and (min-width: 681px) {
  .nav-cta {
    width: 38px; height: 38px; padding: 0 !important;
    display: inline-flex !important; align-items: center; justify-content: center;
    font-size: 0 !important; border-radius: 9px !important;
  }
  .nav-cta .nc-lg, .nav-cta .nc-sm { display: none !important; }
  .nav-cta::before { content: "€"; font-size: 18px; font-weight: 800; line-height: 1; }
  .nav-cta:hover::after { content: "Laske hinta"; }
}

/* ── Vasta ≤860 px valikkolinkit omalle rivilleen (vanha 1340 px:n käytös) ──── */
@media (max-width: 860px) and (min-width: 681px) {
  .nav-inner { flex-wrap: wrap !important; height: auto !important; min-height: 52px; padding: 6px 14px !important; }
  .nav-links { flex: 1 1 100% !important; order: 3 !important; flex-wrap: wrap !important;
               justify-content: center !important; row-gap: 2px; margin: 0 0 4px !important; }
  .nav-logo-text { order: -1 !important; }
  #nav-promo-tools, .nav-auth-login, .nav-user-btn, .nav-cta { order: 2 !important; }
}

/* Sivujen oma sääntö pienensi CTA:n 11 px:iin heti 1340 px:stä alkaen (osa
 * kaksirivistä taittoa). Yksirivisessä tilassa se näyttää kutistuneelta —
 * palautetaan normaali koko, kunnes CTA muuttuu neliöksi. */
@media (max-width: 1340px) and (min-width: 901px) {
  .nav-cta { font-size: 13px !important; padding: 9px 15px !important; }
}

/* ── Käyttäjävalikko ei saa valua ruudun vasemmalle puolelle ─────────────────
 * Sivujen mobiilikorjaus ankkuroi pudotusvalikon avatarin OIKEAAN reunaan
 * (right:0). Kapealla ruudulla avatar on navin vasemmassa laidassa, jolloin
 * 190 px leveä valikko työntyi ruudun ulkopuolelle (mitattu 390 px: vasen reuna
 * −43 px). Ankkuroidaan vasempaan reunaan — oikealla on aina tilaa, koska
 * avatar on tässä taitossa navin vasemmassa puoliskossa. */
@media (max-width: 680px) {
  #nav-user-menu.open .nav-drop {
    left: 0 !important;
    right: auto !important;
    max-width: calc(100vw - 20px) !important;
  }
}