/* ========== Mobile enhancements: drawer + hamburger ========== */

@media (max-width: 980px) {

.apoi-logo-bar-wrap #logo1 {

  height: 110px !important;

} 

.apoi-logo-bar-wrap #logo2 {

  height: 56px !important;

} 

.apoi-logo-bar-wrap.shrink #logo1 {

  height: 80px !important;

} /* adjust as desired */

.apoi-logo-bar-wrap.shrink #logo2 {

  height: 40px !important;

} /* adjust as desired */

  /* Larghezza adattiva e spaziatura */

  main { max-width: 100%; margin: 40px auto 80px; padding: 0 16px 80px; }

  .layout { display: block; }

  .content { margin-top: 12px; }



  /* Sidebar come drawer dal basso */

  .sidebar {

    position: fixed;

    left: 0; right: 0; bottom: 0;

    top: auto;

    z-index: 10000;

    transform: translateY(105%);

    transition: transform .28s ease;

    pointer-events: none; /* chiusa: non cliccabile */

  }

  .sidebar .toc {

    max-height: min(70vh, 520px);

    overflow: auto;

    border-radius: 16px 16px 0 0;

    padding-bottom: 18px;

    box-shadow: 0 -12px 40px rgba(0,0,0,.55);

    background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));

  }



  /* Backdrop */

  body::before {

    content: "";

    position: fixed; inset: 0;

    background: rgba(0,0,0,.35);

    opacity: 0; pointer-events: none;

    transition: opacity .2s ease;

    z-index: 9998;

  }



  /* Stato aperto */

  body.menu-open .sidebar {

    transform: translateY(0%);

    pointer-events: auto;

  }

  body.menu-open::before {

    opacity: 1; pointer-events: auto;

  }



  /* Hamburger: riusa #toTop in basso a destra */

  #toTop {

    right: 16px;

    bottom: 16px;

    width: 54px; height: 54px;

    border-radius: 999px;

    padding: 0;

    display: grid; place-items: center;

    opacity: 1; transform: none; /* sempre visibile su mobile */

    box-shadow: 0 10px 28px rgba(0,0,0,.45);

  }

  /* Nascondi label “Back to top” e disegna le 3 barre */

  #toTop { color: transparent; line-height: 0; }

  #toTop::before, #toTop::after {

    content: ""; display: block; width: 24px; height: 2px; background: #fff; border-radius: 2px;

  }

  #toTop::before { box-shadow: 0 -7px 0 #fff, 0 7px 0 #fff; } /* tre righe */



  /* Tabelle scrollabili su schermi stretti */

  .content table { display: block; overflow-x: auto; white-space: nowrap; }



  /* Immagini già responsive; margini un filo più stretti */

  .figure img { width: 100%; max-height: 60vh; }

  

  .sidebar .toc {margin-bottom:0}

}



/* Hover/active piccoli feedback */

@media (hover:hover) and (max-width: 980px) {

  #toTop:hover { filter: brightness(1.1); }

}







/* Drawer + backdrop + hamburger per mobile, senza cambiare l'HTML */

@media (max-width: 980px) {

  /* Sidebar diventa drawer dal basso */

  .sidebar {

    position: fixed !important;

    left: 0; right: 0; bottom: 0;

    top: auto;

    z-index: 10000;

    transform: translateY(105%);

    transition: transform .28s ease;

    pointer-events: none;

  }

  .sidebar .toc {

    max-height: min(70vh, 520px);

    overflow: auto;

    border-radius: 16px 16px 0 0;

    padding-bottom: 18px;

    box-shadow: 0 -12px 40px rgba(0,0,0,.55);

  }



  /* Backdrop */

  body::before {

    content: "";

    position: fixed; inset: 0;

    background: rgba(0,0,0,.35);

    opacity: 0; pointer-events: none;

    transition: opacity .2s ease;

    z-index: 9998;

  }



  /* Stato aperto */

  body.menu-open .sidebar {

    transform: translateY(0%);

    pointer-events: auto;

  }

  body.menu-open::before {

    opacity: 1; pointer-events: auto;

  }



  /* Bottone hamburger in basso a destra (creato via JS) */

  #apoiHamburger {

    position: fixed;

    right: 16px; bottom: 16px;

    width: 54px; height: 54px;

    z-index: 10001;

    border: 0;

    border-radius: 999px;

    background: linear-gradient(90deg, var(--accent), var(--accent2));

    box-shadow: 0 10px 28px rgba(0,0,0,.45);

    display: grid; place-items: center;

    cursor: pointer;

  }

  #apoiHamburger::before {

    content: ""; display: block; width: 24px; height: 2px; background: #fff; border-radius: 2px;

    box-shadow: 0 -7px 0 #fff, 0 7px 0 #fff; /* 3 barre */

  }

  body.menu-open #apoiHamburger { filter: brightness(1.1); }

  

  

    /* Back to top centrato */

  #toTop {

    left: 50% !important;

    right: auto !important;

    bottom: 16px !important;

    transform: translate(-50%, 0) !important;

    padding: 10px 16px !important;

    opacity: 1; /* così non “scompare” quando serve toccarlo */

  }

}



@media (max-width: 980px) {

  /* backdrop più scuro quando il menu è aperto */

  body.menu-open::before {

    background: rgba(0,0,0,.5); /* da .35 a .50 */

  }



  /* pannello menu: frosted glass + più opaco */

  .sidebar .toc {

    /* aumenta l’opacità di base del pannello */

    background: rgba(20,20,20,0.82) !important;



    /* frosted glass */

    backdrop-filter: saturate(180%) blur(18px);

    -webkit-backdrop-filter: saturate(180%) blur(18px);



    /* micro-bordi per risalto */

    border-top: 1px solid rgba(255,255,255,0.08);

    border-left: 1px solid rgba(255,255,255,0.05);

    border-right: 1px solid rgba(255,255,255,0.05);



    /* transizione morbida all’apertura */

    transition: backdrop-filter .28s ease, background .28s ease;

    will-change: transform, backdrop-filter;

  }



  /* evita scroll di pagina con drawer aperto */

  body.menu-open {

    overflow: hidden;

    touch-action: none;

  }

}





@media (max-width: 980px) {

  /* resetta l’hamburger e riporta il pulsante alla forma ovale con testo */

  #toTop {

    /* posizione: centro in basso, come da tuo recap precedente */

    left: -180px !important;

    right: auto !important;

    bottom: 16px !important;

    transform: translate(-50%, 0) !important;



    /* stile “pill/ovale” */

    display: inline-flex !important;

    align-items: center;

    justify-content: center;

    min-width: 160px;           /* o quanto preferisci */

    height: 44px;

    padding: 0 18px !important;

    border-radius: 9999px !important;



    /* testo visibile */

    color: #fff !important;

    font-weight: 600;

    line-height: 1 !important;

    text-transform: none;       /* mantieni la stringa esatta */

    opacity: 1 !important;



    /* look coerente con la tua estetica */

    background: linear-gradient(90deg, var(--accent), var(--accent2));

    box-shadow: 0 10px 28px rgba(0,0,0,.35);

  }



  /* rimuovi le tre barrette dell’hamburger */

  #toTop::before,

  #toTop::after {

    content: none !important;

  }



  /* feedback tapp */

  #toTop:active { transform: translate(-50%, 2px) !important; }

  @media (hover:hover) {

    #toTop:hover { filter: brightness(1.06); }

  }

}







@media (max-width: 980px) {

  /* Ripristina il controllo JS per la visibilità */

  #toTop {

    opacity: inherit !important;         /* lascia che lo script gestisca l'opacità */

    transform: inherit !important;       /* lascia che lo script gestisca la posizione */

    transition: opacity 0.25s ease, transform 0.25s ease;

  }



  /* Quando il bottone è attivo (lo script lo rende visibile), mantieni lo stile ovale */

  #toTop.show {

    opacity: 1 !important;

    transform: translate(120%, 0) !important;

  }



  /* Quando è nascosto (scroll in alto), sparisce */

  #toTop:not(.show) {

    opacity: 0;

    pointer-events: none;

  }

}





@media (max-width: 980px) {

  .meta { grid-template-columns: 1fr; }

  .meta-row { grid-template-columns: 1fr; gap: 6px; }

  .meta-list dt { opacity: .8; font-size: .95rem; }

  .meta-list dd { font-size: 1rem; }

}