/*
 * mobile.css — Centro Studi Tecnojus
 * Pacchetto responsive mobile-first.
 *
 * ISTRUZIONI DI INSTALLAZIONE
 * ───────────────────────────
 * 1. Copiare questo file nella cartella css/ del sito
 *    (accanto a base.css e biblioteca.css).
 *
 * 2. Aggiungere in OGNI pagina HTML, nel <head>,
 *    DOPO il link a base.css (e a biblioteca.css se presente):
 *
 *      <link rel="stylesheet" href="css/mobile.css" />
 *      (o "../css/mobile.css" nelle pagine in sottocartelle)
 *
 * 3. Aggiungere il pulsante hamburger nella navbar di OGNI pagina:
 *    Nella struttura <nav class="navbar"> inserire SUBITO DOPO il logo
 *    e PRIMA del <ul> il seguente blocco HTML:
 *
 *      <button class="nav-toggle" id="navToggle"
 *              aria-label="Apri menu" aria-expanded="false"
 *              aria-controls="navMenu">
 *        <span></span><span></span><span></span>
 *      </button>
 *
 *    E aggiungere id="navMenu" all'<ul> esistente:
 *      <ul id="navMenu">
 *
 * 4. Aggiungere alla fine di ogni pagina, prima di </body>,
 *    lo script di toggle (vedi fondo file).
 *
 * Dipende da: base.css (variabili CSS :root)
 * Compatibilità: tutti i browser moderni (Chrome, Firefox, Safari, Edge)
 * Nessuna dipendenza JS esterna — lo script è minimale e inline.
 */


/* ══════════════════════════════════════════════════════════
   1. IMMAGINI FLUIDE — fix globale, priorità massima
   Previene l'overflow orizzontale causato da qualsiasi
   immagine con larghezza fissa (Accademia_tecnojus.jpg ecc.)
══════════════════════════════════════════════════════════ */
img {
  max-width: 100%;
  height: auto;
}


/* ══════════════════════════════════════════════════════════
   2. FONT SIZE BODY — soglia minima leggibilità mobile
   base.css imposta 15px; su mobile saliamo a 16px
   per rispettare la soglia W3C / Apple HIG.
══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  body {
    font-size: 16px;
  }
}


/* ══════════════════════════════════════════════════════════
   3. NAVBAR — PULSANTE HAMBURGER
   Visibile solo sotto 768px.
   I tre span sono le tre linee del simbolo ☰.
══════════════════════════════════════════════════════════ */
.nav-toggle {
  display: none;              /* nascosto su desktop */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 38px;
  height: 38px;
  background: none;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 4px;
  cursor: pointer;
  padding: 6px;
  margin-left: auto;          /* spinge a destra, prima del search */
  flex-shrink: 0;
  transition: background .18s;
}
.nav-toggle:hover {
  background: rgba(255,255,255,.12);
}
.nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background: rgba(255,255,255,.85);
  border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease;
  transform-origin: center;
}

/* Animazione hamburger → X quando menu è aperto */
.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}


/* ══════════════════════════════════════════════════════════
   4. NAVBAR — LAYOUT MOBILE
   Sotto 768px la navbar ridiventa una barra a riga singola:
   logo | (spazio) | hamburger
   Il menu <ul> e il campo ricerca si spostano fuori dalla
   barra, in un pannello a scomparsa sotto di essa.
══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  nav.navbar {
    flex-wrap: nowrap;       /* una sola riga: logo + toggle */
    padding: 0 1rem;
    min-height: 50px;
    position: sticky;
    top: 0;
    z-index: 200;
  }

  /* Il pulsante hamburger diventa visibile */
  .nav-toggle {
    display: flex;
    order: 3;
  }

  /* Il campo di ricerca si nasconde nella barra
     e riappare nel pannello del menu */
  .nav-search {
    display: none;
    order: 4;
  }

  /* ── PANNELLO MENU ── */
  nav.navbar ul {
    /* Nascosto: altezza 0, nessun overflow */
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    width: 100%;
    order: 5;

    /* Il pannello si espande SOTTO la barra navbar.
       Usiamo position absolute per non rompere il layout sticky. */
    position: absolute;
    top: 50px;               /* altezza esatta della navbar */
    left: 0;
    right: 0;
    z-index: 199;

    background: var(--blu-nav);
    border-top: 1px solid rgba(255,255,255,.12);
    border-bottom: 2px solid var(--arancione);
    box-shadow: 0 6px 18px rgba(0,0,0,.18);

    /* Animazione apertura con max-height */
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
  }

  /* Stato aperto — aggiunto via JS sul <ul> */
  nav.navbar ul.menu-aperto {
    max-height: 400px;       /* valore maggiore del contenuto reale */
  }

  /* Voci di menu verticali — target touch 48px */
  nav.navbar ul li {
    width: 100%;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  nav.navbar ul li:last-child {
    border-bottom: none;
  }
  nav.navbar ul li a {
    display: block;
    padding: .85rem 1.25rem;
    font-size: .9rem;
    font-weight: 600;
    color: rgba(255,255,255,.88);
    letter-spacing: .02em;
    min-height: 48px;        /* target touch minimo Apple HIG / WCAG */
    display: flex;
    align-items: center;
  }
  nav.navbar ul li a:hover,
  nav.navbar ul li a.attivo {
    background: rgba(255,255,255,.07);
    color: var(--arancione);
  }

  /* Campo di ricerca nel pannello, sotto le voci */
  nav.navbar ul::after {
    content: '';             /* spazio finale */
    display: block;
    height: .5rem;
  }

  /* ── RICERCA NEL PANNELLO ── */
  /* La barra di ricerca viene mostrata nel pannello
     tramite un elemento .nav-search-panel inserito via JS
     (vedi script in fondo) */
  .nav-search-panel {
    display: flex;
    padding: .65rem 1.25rem .85rem;
    border-top: 1px solid rgba(255,255,255,.1);
  }
  .nav-search-panel input {
    flex: 1;
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.3);
    border-right: none;
    color: #fff;
    padding: .55rem .8rem;
    font-size: .9rem;
    font-family: var(--font-sans);
    border-radius: 3px 0 0 3px;
    outline: none;
  }
  .nav-search-panel input::placeholder { color: rgba(255,255,255,.55); }
  .nav-search-panel input:focus { background: rgba(255,255,255,.22); }
  .nav-search-panel button {
    background: var(--arancione);
    border: none;
    color: #fff;
    padding: .55rem .8rem;
    cursor: pointer;
    border-radius: 0 3px 3px 0;
    font-size: .95rem;
    transition: background .2s;
    min-width: 44px;
  }
  .nav-search-panel button:hover { background: var(--arancione-lt); }

}


/* ══════════════════════════════════════════════════════════
   5. NAVIGAZIONE CONTESTUALE HOME (barra "In questa pagina")
   Su mobile diventa scrollabile orizzontalmente invece di
   andare a capo su più righe, per non occupare troppo spazio.
══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  .home-header + .home-area-nav {
    top: 50px;               /* ancora sotto la navbar sticky */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;   /* Firefox: nasconde scrollbar */
  }
  .home-header + .home-area-nav::-webkit-scrollbar { display: none; }

  .home-header + .home-area-nav .area-nav-inner {
    flex-wrap: nowrap;       /* non va a capo — scorre orizzontalmente */
    padding: .7rem 1rem;
    gap: .45rem;
  }

  .home-header + .home-area-nav .area-nav-link {
    white-space: nowrap;
    font-size: .75rem;
    padding: .28rem .65rem;
  }

  .home-header + .home-area-nav .area-nav-label {
    white-space: nowrap;
    flex-shrink: 0;
  }
}


/* ══════════════════════════════════════════════════════════
   6. GRIGLIA AGGIORNAMENTI — colonne su mobile
   .agg-item usa grid-template-columns: 78px 1fr auto
   Su schermi molto stretti (<380px) la data finisce
   per essere troppo ravvicinata al testo.
══════════════════════════════════════════════════════════ */
@media (max-width: 420px) {
  .agg-item {
    grid-template-columns: 60px 1fr auto;
    gap: .5rem;
  }
  .agg-data {
    font-size: .68rem;
  }
}


/* ══════════════════════════════════════════════════════════
   7. HOME-PRIMO-GRID — stacking corretto su mobile
   La regola già esiste in base.css a 900px;
   qui aggiungiamo padding orizzontale adeguato.
══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .sez {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}


/* ══════════════════════════════════════════════════════════
   8. CARD ACCADEMIA — immagine logo Accademia
   Accademia_tecnojus.jpg: max-width è già coperto dalla
   regola globale img al punto 1. Qui gestiamo il layout
   dell'aside quando va in colonna.
══════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .acc-aside {
    flex: none;
    width: 100%;
  }
  .acc-logo {
    height: 24px;
  }
}


/* ══════════════════════════════════════════════════════════
   9. FOOTER — adattamento testo su schermi molto stretti
══════════════════════════════════════════════════════════ */
@media (max-width: 400px) {
  .footer-copy {
    font-size: .7rem;
  }
}


/* ══════════════════════════════════════════════════════════
   10. SEZIONE GOVERNANCE — wrapping nomi su mobile
══════════════════════════════════════════════════════════ */
@media (max-width: 540px) {
  .gov-lista {
    flex-direction: column;
    gap: .55rem;
  }
}


/* ══════════════════════════════════════════════════════════
   11. LOGIN AREA SOCI — input stack su mobile
══════════════════════════════════════════════════════════ */
@media (max-width: 540px) {
  .login-inline {
    flex-direction: column;
    align-items: stretch;
  }
  .login-inline-input {
    width: 100%;
  }
  .login-inline-btn {
    width: 100%;
    padding: .55rem;
    font-size: .88rem;
  }
}


/* ══════════════════════════════════════════════════════════
   12. PAGINE INTERNE (biblioteca.css) — area-nav mobile
   Stessa tecnica della home: scroll orizzontale
   invece di wrapping verticale.
══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .hero-biblioteca + .area-nav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .hero-biblioteca + .area-nav::-webkit-scrollbar { display: none; }
  .hero-biblioteca + .area-nav .area-nav-inner {
    flex-wrap: nowrap;
    padding: .7rem 1rem;
  }
  .hero-biblioteca + .area-nav .area-nav-link {
    white-space: nowrap;
    font-size: .75rem;
  }
}


/*
 * ══════════════════════════════════════════════════════════
 * SCRIPT DA AGGIUNGERE IN OGNI PAGINA HTML
 * Incollare prima di </body> in ogni file HTML.
 *
 * Gestisce:
 * - apertura/chiusura menu con il pulsante hamburger
 * - chiusura menu cliccando fuori
 * - chiusura menu alla selezione di una voce
 * - spostamento del campo ricerca nel pannello su mobile
 * ══════════════════════════════════════════════════════════
 *
 * <script>
 * (function() {
 *   var toggle = document.getElementById('navToggle');
 *   var menu   = document.getElementById('navMenu');
 *   if (!toggle || !menu) return;
 *
 *   // Crea il pannello ricerca mobile (clone del nav-search)
 *   function injectSearchPanel() {
 *     if (menu.querySelector('.nav-search-panel')) return;
 *     var orig = document.querySelector('.nav-search');
 *     if (!orig) return;
 *     var panel = document.createElement('div');
 *     panel.className = 'nav-search-panel';
 *     panel.innerHTML =
 *       '<input type="text" id="navInputMobile" placeholder="Cerca…" aria-label="Cerca" />' +
 *       '<button aria-label="Avvia ricerca">&#128269;</button>';
 *     menu.appendChild(panel);
 *     // Collega la funzione di ricerca se presente
 *     var btn = panel.querySelector('button');
 *     var inp = panel.querySelector('input');
 *     if (btn && typeof navCerca === 'function') {
 *       btn.addEventListener('click', function() {
 *         var navInput = document.getElementById('navInput');
 *         if (navInput) navInput.value = inp.value;
 *         navCerca();
 *       });
 *       inp.addEventListener('keydown', function(e) {
 *         if (e.key === 'Enter') btn.click();
 *       });
 *     }
 *   }
 *
 *   function apriMenu() {
 *     injectSearchPanel();
 *     menu.classList.add('menu-aperto');
 *     toggle.setAttribute('aria-expanded', 'true');
 *     toggle.setAttribute('aria-label', 'Chiudi menu');
 *   }
 *   function chiudiMenu() {
 *     menu.classList.remove('menu-aperto');
 *     toggle.setAttribute('aria-expanded', 'false');
 *     toggle.setAttribute('aria-label', 'Apri menu');
 *   }
 *
 *   toggle.addEventListener('click', function() {
 *     if (menu.classList.contains('menu-aperto')) chiudiMenu();
 *     else apriMenu();
 *   });
 *
 *   // Chiudi cliccando fuori dalla navbar
 *   document.addEventListener('click', function(e) {
 *     if (!e.target.closest('nav.navbar')) chiudiMenu();
 *   });
 *
 *   // Chiudi selezionando una voce (anchor link)
 *   menu.querySelectorAll('a').forEach(function(a) {
 *     a.addEventListener('click', function() {
 *       setTimeout(chiudiMenu, 120);
 *     });
 *   });
 * })();
 * </script>
 */