/*
 * ALSA Core — Header
 * CSS copiato dal prototipo funzionante + aggiunte per lang switch e logo immagine.
 */

/* ── Topbar — sticky + stile da prototipo ── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  backdrop-filter: saturate(140%) blur(6px);
  -webkit-backdrop-filter: saturate(140%) blur(6px);
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 86px;
}

/* ── Brand ── */
.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  font-weight: 500;
  letter-spacing: -0.01em;
  font-size: 18px;
  text-decoration: none;
  color: var(--ink);
}
.brand__mark  { font-weight: 600; letter-spacing: 0; }
.brand__suffix {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stone-500);
  position: relative;
  top: -1px;
}

/* ── Nav desktop ── */
.nav {
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav__list {
  display: flex;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__link {
  padding: 10px 14px;
  font-size: 14.5px;
  color: var(--graphite);
  text-decoration: none;
  position: relative;
  border-radius: var(--radius);
}
.nav__link:hover { color: var(--navy-800); }
.nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--navy-800);
}
.nav__cta { margin-left: 12px; }

/* ── Switch lingua ── */
.nav__lang {
  display: flex;
  align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  overflow: hidden;
  margin-left: 10px;
}
.nav__lang button,
.nav__lang a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--stone-500);
  background: transparent;
  border: none;
  cursor: pointer;
  text-decoration: none;
  line-height: 1;
  font-family: inherit;
}
.nav__lang button[aria-pressed="true"],
.nav__lang a[aria-pressed="true"] { background: var(--ink); color: var(--white); }
.nav__lang button[disabled] { opacity: 0.35; cursor: not-allowed; }

/* ── Toggle mobile — identico al prototipo ── */
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  background: transparent;
  border-radius: var(--radius);
  position: relative;
  cursor: pointer;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 18px;
  height: 1.4px;
  background: var(--ink);
  transform: translateX(-50%);
  transition: transform .25s ease, top .25s ease;
}
.nav-toggle span              { top: 50%; transform: translate(-50%, -50%); }
.nav-toggle span::before      { top: -6px; }
.nav-toggle span::after       { top:  6px; }
.nav-toggle[aria-expanded="true"] span         { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { top: 0; transform: translateX(-50%) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { top: 0; transform: translateX(-50%) rotate(-45deg); }

/* ── Mobile — identico al prototipo + fix fullscreen ── */
@media (max-width: 920px) {
  .nav-toggle { display: inline-block; }

  .nav {
    display: none;
  }

  .nav.is-open {
    display: flex;
    position: fixed;
    top: var(--header-h, 86px);
    left: 0;
    right: 0;
    height: calc(100dvh - var(--header-h, 86px));
    flex-direction: column;
    align-items: stretch;
    background: var(--paper);
    border-top: 1px solid var(--line);
    padding: 12px var(--pad-x) 40px;
    gap: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 999;
  }

  html.nav-open .topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }

  .nav__list {
    flex-direction: column;
    width: 100%;
    gap: 0;
  }
  .nav__link {
    display: block;
    padding: 16px 0;
    border-bottom: 1px solid var(--line);
    font-size: 20px;
  }
  .nav__cta   { margin: 18px 0 0; align-self: flex-start; }
  .nav__lang  { margin-left: 0; margin-top: 16px; }
}