/* ============================================
   NAVBAR — assets/css/navbar.css
   ============================================ */

#hdr {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 500;
  height: var(--nh);
  background: var(--wh);
  border-bottom: 1px solid var(--s1);
  animation: navIn .45s ease both;
}
@keyframes navIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
#hdr.scrolled { box-shadow: 0 2px 20px rgba(46,30,10,.08); }

.nav-wrap {
  max-width: var(--mw);
  margin: 0 auto;
  padding: 0 2rem;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

/* ── Logo ── */
.logo-a {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}
.logo-disc {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--s0);
  border: 1.5px solid var(--s2);
  box-shadow: 0 2px 10px rgba(46,30,10,.08);
  display: flex; align-items: center; justify-content: center;
  transition: border-color .3s, transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .3s;
}
.logo-a:hover .logo-disc {
  border-color: var(--au);
  transform: scale(1.07);
  box-shadow: 0 6px 18px rgba(46,30,10,.13), 0 0 0 3px rgba(196,154,46,.1);
}

/* ── Link principali ── */
.nl {
  list-style: none;
  display: flex;
  align-items: center;
  height: 100%;
}
.nl > li {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}
.nl > li > a {
  position: relative;
  display: flex;
  align-items: center;
  gap: .3rem;
  text-decoration: none;
  font-family: var(--fb);
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--s4);
  padding: .5rem .85rem;
  height: 100%;
  transition: color .2s;
  white-space: nowrap;
}
/* pallino indicatore */
.nl > li > a::after {
  content: '';
  position: absolute;
  bottom: 10px; left: 50%;
  transform: translateX(-50%);
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--au);
  opacity: 0;
  transition: opacity .22s;
}
.nl > li > a:hover,
.nl > li.open > a { color: var(--s6); }
.nl > li > a:hover::after,
.nl > li.open > a::after,
.nl > li > a.active::after { opacity: 1; }
.nl > li > a.active { color: var(--s5); font-weight: 500; }

/* freccia dropdown */
.arr {
  display: inline-block;
  width: 7px; height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .22s ease;
  flex-shrink: 0;
}
.nl > li.open > a .arr { transform: rotate(-135deg) translateY(-2px); }

/* ── Dropdown ── */
.dropdown {
  position: absolute;
  top: calc(100% + 1px); left: 0;
  min-width: 210px;
  background: var(--s1);
  border: 1px solid var(--s2);
  border-top: 2px solid var(--au);
  border-radius: 0 0 10px 10px;
  padding: .5rem 0;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}
.nl > li.open .dropdown {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.dropdown a {
  display: block;
  text-decoration: none;
  font-family: var(--fb);
  font-size: .71rem; font-weight: 300;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--s4);
  padding: .65rem 1.2rem;
  transition: color .18s, background .18s, padding-left .18s;
  white-space: nowrap;
}
.dropdown a:hover {
  color: var(--s6);
  background: rgba(196,154,46,.08);
  padding-left: 1.5rem;
}

/* ── Hamburger ── */
.brg {
  display: none;
  background: none; border: none; cursor: pointer;
  padding: 5px; flex-direction: column; gap: 5px; flex-shrink: 0;
}
.brg span {
  display: block; width: 22px; height: 1.5px;
  background: var(--s4); border-radius: 2px;
  transition: transform .28s ease, opacity .28s ease;
  transform-origin: center;
}
.brg.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.brg.open span:nth-child(2) { opacity: 0; }
.brg.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ── Menu mobile ── */
.mob {
  display: none; flex-direction: column;
  position: fixed; inset: var(--nh) 0 0 0;
  background: var(--wh);
  border-top: 1px solid var(--s1);
  padding: 1.5rem 2rem; gap: 0;
  z-index: 499; overflow-y: auto;
}
.mob.open { display: flex; animation: mobIn .25s ease; }
@keyframes mobIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.mob a {
  font-family: var(--fb); font-size: .82rem; font-weight: 300;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--s4); text-decoration: none;
  padding: .85rem .25rem;
  border-bottom: 1px solid var(--s1);
  transition: color .2s, padding-left .2s;
}
.mob a:hover { color: var(--s6); padding-left: .5rem; }
.mob a:last-child { border-bottom: none; }
.mob a.sub {
  font-size: .7rem; color: var(--s3);
  padding-left: 1.2rem; border-bottom-color: transparent;
}
.mob a.sub:hover { color: var(--s5); padding-left: 1.6rem; }

/* ── Responsive ── */
@media (max-width: 640px) {
  .nl { display: none; }
  .brg { display: flex; }
}