/* ==========================================================================
   Navigation — Header · istanza 85:4474 · responsive

   PROVVISORIO. Il mockup mobile non esiste: ogni valore qui dentro e una mia
   scelta di riflusso, non una misura di Figma.

   REGOLA INVIOLABILE: nessuna riga fuori da @media. A >= 1512 l'header resta
   identico al mockup: 1512 x 91, logo 263 + menu (5 voci, gap 32) + azioni 209.

   ALTEZZA: 91px NON viene mai toccata, a nessun breakpoint.
   L'Hero compensa l'header con padding-top 171 (91 + 80) e quel padding non
   e mio: cambiare l'altezza qui scollerebbe l'Hero. Tutto il riflusso avviene
   quindi dentro la riga da 43px (24 + 43 + 24), mai in verticale.

   Struttura desktop:
     .nav           1512 x 91, position absolute, row space-between
     .nav__logo      263 x 32 — immagine 131.2 x 32 + 131.8 di vuoto a destra
     .nav__menu      hug x 19 — 5 link, gap 32, nowrap
     .nav__actions   209 x 43 — pulsante 145 + Lingua 56, gap 8
   ========================================================================== */


/* --------------------------------------------------------------------------
   1280-1511 · Desktop compresso
   A 1280 restano 1200px utili: logo 263 + menu (~570) + azioni 209 = ~1042.
   Ci sta ancora, quindi la struttura non cambia: si sciolgono solo le
   larghezze fisse che non descrivono contenuto.
   -------------------------------------------------------------------------- */
@media (max-width: 1511px) {
  /* I 263px del blocco logo sono la cella di griglia di Figma, non il logo:
     131.8px sono vuoto a destra. Sotto i 1512 quel vuoto e spazio che serve
     al menu, quindi il blocco diventa hug sull'immagine. */
  .nav__logo {
    width: auto;
    flex: 0 0 auto;
  }
  .nav__logo-img {
    flex: 0 0 auto;
  }

  /* Il menu resta nowrap: se andasse a capo sfonderebbe i 91px di altezza. */
  .nav__menu {
    flex: 0 1 auto;
    min-width: 0;
  }

  /* 209px e la somma 145 + 8 + 56: si lascia hug, cosi il blocco non si
     comprime mai quando il menu cresce. */
  .nav__actions {
    width: auto;
    flex: 0 0 auto;
  }

  /* Con logo e azioni hug, lo space-between lascerebbe il menu appiccicato
     ai bordi solo per caso: si impone un respiro minimo. Valore MIO. */
  .nav {
    gap: var(--space-4);
  }
}


/* --------------------------------------------------------------------------
   1024-1279 · Laptop
   A 1024 restano 944px utili: 131.2 (logo) + ~570 (menu) + 209 (azioni) = 910
   piu i due gap da 32 = 974. Non ci sta. Si stringe il passo del menu da 32 a
   16 (menu ~442 + 4 gap = ~506) e il totale torna a ~910 su 944.
   Valori MIEI: in Figma il gap del menu e 32 e non ha alternative.
   -------------------------------------------------------------------------- */
@media (max-width: 1279px) {
  .nav__menu {
    gap: var(--space-3);            /* 32 -> 16 */
  }
  .nav {
    gap: var(--space-3);            /* 32 -> 16 fra i tre blocchi */
  }
}


/* --------------------------------------------------------------------------
   <= 1023 · Tablet e sotto — il menu esce dalla barra
   Cinque voci di cui una lunga ("Monitoring & Reporting") non stanno in 688px
   accanto a logo e azioni, e non possono andare a capo: la barra e alta 91 e
   quell'altezza e vincolata dall'Hero.

   SCELTA MIA: il menu viene nascosto e restano logo + azioni.
   Qui andra un MENU HAMBURGER, da implementare quando arrivera il mockup
   mobile: serve markup nuovo (bottone + pannello) e in questa fase non posso
   toccare i partial ne aggiungere JavaScript.
   Nota: le stesse 5 voci sono comunque raggiungibili nella colonna
   "QUICK LINKS" del footer, quindi la pagina non resta senza navigazione.
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .nav__menu {
    display: none;
  }
  /* Senza il menu di mezzo, lo space-between fa gia tutto il lavoro. */
  .nav {
    gap: var(--space-3);
  }
}


/* --------------------------------------------------------------------------
   < 480 · Mobile stretto
   A 375 restano 343px utili (gutter 16). Logo 131.2 + azioni 209 = 340.2:
   passerebbe per 3px, senza alcun respiro fra i due blocchi. Si riduce il
   logo e si lascia il pulsante hug sulla propria label.
   -------------------------------------------------------------------------- */
@media (max-width: 479px) {
  /* 106 x 25.85 — larghezza MIA, l'aspect-ratio 131.2/32 e quello di Figma. */
  .nav__logo-img {
    width: 106px;
    height: auto;
    aspect-ratio: 131.2 / 32;
  }
  .nav__logo {
    height: auto;
  }

  /* 145px e la larghezza Figma del pulsante "BOOK A DEMO": hug sulla label
     con padding ridotto libera una trentina di px. */
  .nav__actions .btn {
    width: auto;
    padding-inline: 12px;
  }

  /* Il core, sotto i 480, concede ai .btn il ritorno a capo e height auto:
     nella barra non e ammissibile, due righe di label sfondano i 91px.
     Qui si ripristina il comportamento desktop del solo pulsante di header. */
  .nav__actions .btn {
    white-space: nowrap;
    height: 43px;
    min-height: 0;
  }
}

/* --- Sotto i 375px --------------------------------------------------------
   A 320px (iPhone SE prima serie, il minimo ancora considerato) logo +
   pulsante + selettore lingua non ci stanno: 106 + 145 + 56 + gutter sfondano.
   Il pulsante "BOOK A DEMO" viene nascosto: la stessa CTA e ripetuta
   nell'Hero, in Why Vidim, in Core Capabilities, in Vidim Numbers e nel
   footer, quindi non si perde nulla. Restano logo e selettore lingua.
   Scelta mia, non di Figma: da rivedere col mockup mobile, dove la CTA
   probabilmente entrera nel menu hamburger. */
@media (max-width: 374px) {
  .nav__actions .btn { display: none; }
  .nav__actions { width: auto; }
}