/* Menu di navigazione: pulsante e pannello per tablet e mobile */

.nav-links a.btn{padding:.625rem 1.25rem}
.nav-links a.btn:hover{color:var(--ivory)}

.nav-toggle{display:none}

@media(max-width:899px){
  .nav .container{position:relative}

  .nav-toggle{
    display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
    gap:5px;width:2.75rem;height:2.75rem;flex-shrink:0;padding:0;
    border:1px solid var(--hairline);border-radius:50%;background:#fff;cursor:pointer;
    margin-left:1rem;
  }
  .nav-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .nav-toggle span{display:block;width:1.125rem;height:2px;background:var(--ink);border-radius:2px;transition:transform .2s,opacity .2s}
  .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}
  .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  .nav-links{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--ivory);border-bottom:1px solid var(--hairline);
    box-shadow:0 16px 24px -12px rgba(60,40,10,.2);
    padding:.5rem 1.5rem 1.5rem;
  }
  .nav-links.is-open{display:flex}
  .nav-links a:not(.btn){padding:.9rem 0;border-bottom:1px solid var(--hairline);font-size:1rem;color:var(--ink)}
  .nav-links a.btn{margin-top:1.25rem;padding:.875rem 1.75rem;text-align:center}
}

@media(max-width:480px){
  .nav .brand-logo{width:200px;height:auto}
}