:root{
  --logo-w:175px;
  --logo-h:auto;
}

/* HEADER */
.site-header{
  position:sticky;
  top:0;
  z-index:1000;
  background:#F9F9F9;
  border-bottom:1px solid var(--ink-100);
}
html.theme-dark .site-header{
  background:var(--bg);
  border-bottom:1px solid var(--ink-700);
}

.nav{display:flex;align-items:center;gap:1rem}
.nav__logo{display:flex;align-items:center;gap:.5rem;padding:.75rem 0}
.nav__list{display:flex;align-items:center;gap:.75rem;margin:0;padding:0;list-style:none}

/* LINK BASE */
.nav__link{
  position:relative;
  display:inline-block;
  padding:.75rem 1rem;
  color:var(--ink-900);
  text-decoration:none;
  font-weight:500;
  transition:color .2s ease;
}
.nav__link:hover{ color:var(--accent); }

/* LINEA ROSSA aderente al bordo */
.nav__link::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px; /* attaccata al bordo inferiore */
  height:5px; background:var(--accent);
  opacity:0; transform:scaleX(0); transform-origin:center;
  transition:transform .25s ease, opacity .25s ease;
}
/* Hover o pagina attiva (persistente) */
.nav__link:hover::after,
.nav__link[aria-current="page"]::after,
.nav__link.is-active::after{ opacity:1; transform:scaleX(1); }
.nav__link[aria-current="page"], .nav__link.is-active{ color:var(--accent); }

/* Toggle tema (icona cerchio) */
.theme-toggle{
  margin-left:auto; display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%;
  border:1px solid var(--ink-100);
  background:var(--bg); color: var(--accent);
  cursor:pointer; transition: background .2s ease, transform .12s ease, border-color .2s ease;
}
.theme-toggle:hover{ transform: translateY(-1px); border-color: var(--accent-600); }
.theme-toggle:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.theme-toggle .icon{ display:inline-flex; width:20px; height:20px; }
.theme-toggle .icon svg{ width:20px; height:20px; display:block; }
html.theme-dark .theme-toggle{ color:#fff; border-color: rgba(255,255,255,.3); }

/* Logo swap */
.nav__logo .logo{ width:var(--logo-w); height:var(--logo-h); display:block; }
.nav__logo .logo--dark{ display:none; }
@media (prefers-color-scheme: dark){
  .nav__logo .logo--light{ display:none; }
  .nav__logo .logo--dark{ display:block; }
}
html.theme-light .nav__logo .logo--light{ display:block; }
html.theme-light .nav__logo .logo--dark{ display:none; }
html.theme-dark .nav__logo .logo--light{ display:none; }
html.theme-dark .nav__logo .logo--dark{ display:block; }

/* =========  MOBILE HAMBURGER (Fold Out)  ========= */

/* Mostra hamburger solo sotto 992px. Sopra: desktop nav */
.nav--mobile{ display:none; }
.nav--desktop{ display:block; }

@media (max-width: 992px){
  .nav--desktop{ display:none; }
  .nav--mobile{ display:block; }
  .theme-toggle{ order:3; } /* il toggle resta visibile accanto all’hamburger */
}

/* Struttura hamburger */
#menuToggle{
  display:none; /* nascosto su desktop */
}
@media (max-width: 992px){
  #menuToggle{
    display:block;
    position: relative; /* dentro la .nav */
    z-index: 20;
    -webkit-user-select:none; user-select:none;
  }
  #menuToggle input{
    display:block; width:40px; height:32px;
    position:absolute; top:-6px; left:-6px;
    cursor:pointer; opacity:0; z-index:3;
    -webkit-touch-callout:none;
  }
  /* Le 3 barre */
  #menuToggle span{
    display:block; width:33px; height:4px; margin-bottom:5px; position:relative;
    background: var(--ink-900); border-radius:3px; z-index:2;
    transform-origin:4px 0px;
    transition: transform .5s cubic-bezier(0.77,0.2,0.05,1.0),
                background .5s cubic-bezier(0.77,0.2,0.05,1.0),
                opacity .55s ease;
  }
  html.theme-dark #menuToggle span{ background:#fff; }

  #menuToggle span:first-child{ transform-origin:0% 0%; }
  #menuToggle span:nth-last-child(2){ transform-origin:0% 100%; }

  /* Stato aperto → croce */
  #menuToggle input:checked ~ span{
    opacity:1; transform: rotate(45deg) translate(-2px,-1px);
    background: var(--accent);
  }
  #menuToggle input:checked ~ span:nth-last-child(3){
    opacity:0; transform: rotate(0) scale(0.2,0.2);
  }
  #menuToggle input:checked ~ span:nth-last-child(2){
    transform: rotate(-45deg) translate(0,-1px);
  }

  /* Drawer */
  #menu{
    position: absolute;
    top: 44px; /* sotto le barre */
    left: 0;
    max-width: 420px;
    width: 92vw;
    max-height: calc(100vh - 44px);
    margin: 0;
    padding: 20px 22px 28px;
    box-sizing: border-box;
    overflow-y: auto;
    background: #ededed;
    list-style: none;
    -webkit-font-smoothing: antialiased;
    transform: translateX(-105%);
    transition: transform .5s cubic-bezier(0.77,0.2,0.05,1.0);
    border-right:1px solid var(--ink-100);
    border-bottom:1px solid var(--ink-100);
    border-top-left-radius: 0;
    border-top-right-radius: 14px;
    border-bottom-right-radius: 14px;
    box-shadow: 0 10px 30px rgba(11,12,14,.15);
  }
  html.theme-dark #menu{
    background: var(--surface);
    border-right-color: var(--ink-700);
    border-bottom-color: var(--ink-700);
    box-shadow: 0 10px 30px rgba(0,0,0,.45);
  }

  #menu li{ padding: 10px 0; font-size: 18px; }
  #menu a{ color: var(--ink-900); text-decoration: none; }
  #menu a:hover{ color: var(--accent); }
  #menu li label{ cursor: pointer; }

  /* Apertura */
  #menuToggle input:checked ~ ul{ transform: none; }

  /* Tema dentro il drawer */
  #menu .menu-theme{ padding-top:8px; border-top:1px solid var(--ink-100); margin-top:10px; }
  html.theme-dark #menu .menu-theme{ border-top-color: var(--ink-700); }
  #menu .menu-theme .theme-toggle{
    margin-left:0; width:auto; height:auto; border-radius:10px; padding:.5rem .75rem;
  }
}