/* Adattamenti per schermi stretti (telefoni/tablet in verticale).
   Il menu diventa un pannello verticale a comparsa (hamburger), visto
   che scrivere comandi a mano è scomodo quando compare la tastiera:
   dev'essere il modo principale, affidabile, per navigare il sito. */
@media (max-width: 680px){

  .content-col{
    padding: 0 16px;
  }

  .topbar{
    position: relative;
    padding: 10px 14px;
  }

  .topbar-title{
    display: none;
  }

  /* --- hamburger --- */

  .nav-toggle{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    width: 34px;
    height: 34px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
  }

  .nav-toggle-bar{
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 1px;
    background: var(--text);
  }

  /* --- pannello verticale a comparsa --- */

  .topbar-nav{
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-left: 0;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(var(--app-height, 100vh) - 56px);
    overflow-y: auto;
    padding: 6px 0;
    background: var(--bg-topbar);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 10px 20px rgba(0, 0, 0, .1);
    z-index: 20;
  }

  .topbar-nav.panel-open{
    display: flex;
  }

  .nav-item > a{
    display: block;
    padding: 11px 20px;
  }

  /* --- sottomenu: da flyout laterale ad accordion verticale --- */

  .submenu{
    position: static;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    left: auto;
    right: auto;
    top: auto;
    margin: 0;
    min-width: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: rgba(0, 0, 0, .035);
    max-height: 0;
    overflow: hidden;
    transition: max-height .2s ease;
  }

  .nav-item.has-submenu.open > .submenu{
    max-height: 600px;
  }

  .submenu .nav-item > a{
    padding-left: 36px;
    font-size: 13px;
  }

  .submenu .nav-item.has-submenu > .submenu .nav-item > a{
    padding-left: 52px;
  }

  .page.landing .logo-text{
    font-size: 40px;
  }

  .logo-text{
    font-size: 24px;
  }

  .comment-line{
    font-size: 11px;
  }

  #terminal-output{
    font-size: 13px;
  }

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

  .hint{
    display: none;
  }
}