/* Navbar, mega menu, menu mobile e modale lingua: copiati da home-v2 (solo token). */
[hidden] { display: none !important; }
.mega[hidden] { display: block !important; }
/* Icone */
.icon {
  display: inline-block;
  flex: none;
  width: var(--space-6);
  height: var(--space-6);
  background: currentColor;
  mask: var(--ico) center / contain no-repeat;
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask-mode: alpha;
  -webkit-mask-mode: alpha;
}

.btn .icon { width: var(--btn-md-icon); height: var(--btn-md-icon); }
.btn--sm .icon { width: var(--btn-sm-icon); height: var(--btn-sm-icon); }
.btn--lg .icon { width: var(--btn-lg-icon); height: var(--btn-lg-icon); }

.icon--freccia { --ico: url("assets/icone/freccia-destra.svg"); }
.icon--spunta { --ico: url("assets/icone/spunta.svg"); width: var(--space-4); height: var(--space-4); color: var(--link); }
.icon--menu { --ico: url("assets/icone/menu.svg"); }
.icon--chiudi { --ico: url("assets/icone/chiudi.svg"); }
.icon--palette { --ico: url("assets/icone/palette.svg"); }
.icon--seo { --ico: url("assets/icone/seo.svg"); }
.icon--meta { --ico: url("assets/icone/pagina-meta.svg"); }
.icon--img { --ico: url("assets/icone/immagine.svg"); }
.icon--quote { --ico: url("assets/icone/virgolette.svg"); color: var(--link); }
.icon--giu { --ico: url("assets/icone/chevron-giu.svg"); }
.icon--design { --ico: url("assets/icone/design.svg"); }
.icon--stile { --ico: url("assets/icone/stile.svg"); }
.icon--scintilla { --ico: url("assets/icone/scintilla.svg"); }
.icon--pagine { --ico: url("assets/icone/pagine.svg"); }
.icon--componenti { --ico: url("assets/icone/componenti.svg"); }
.icon--server { --ico: url("assets/icone/server.svg"); }
.icon--sicurezza { --ico: url("assets/icone/sicurezza.svg"); }
.icon--sito { --ico: url("assets/icone/sito-web.svg"); }
.icon--portfolio { --ico: url("assets/icone/portfolio.svg"); }
.icon--utente { --ico: url("assets/icone/utente.svg"); }
.icon--consulenza { --ico: url("assets/icone/consulenza.svg"); }
.icon--documento { --ico: url("assets/icone/documento.svg"); }
.icon--converti { --ico: url("assets/icone/converti.svg"); }
.icon--pubblica { --ico: url("assets/icone/pubblica.svg"); }
.icon--progetto { --ico: url("assets/icone/progetto.svg"); }
.icon--cartella { --ico: url("assets/icone/cartella.svg"); }
.icon--globo { --ico: url("assets/icone/globo.svg"); }
.icon--apri { --ico: url("assets/icone/apri-sito.svg"); width: var(--space-4); height: var(--space-4); }

/* Navbar e mega menu */
.site-header { position: sticky; top: var(--space-0); z-index: 2; }

.nav {
  position: relative;
  z-index: 1;
  background: var(--bg);
  border-bottom: var(--btn-border-width) solid var(--border);
}

.nav.is-scrolled { background: var(--surface); }

.nav__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  min-height: var(--space-10);
  min-width: 0;
}

.nav__logo { display: flex; align-items: center; flex: none; min-width: 0; max-width: 100%; }
.nav__logo img { height: var(--space-6); width: auto; max-width: 100%; }
.logo-chiaro { display: block; }
.logo-scuro { display: none; }



[data-theme="dark"] .logo-chiaro { display: none; }
[data-theme="dark"] .logo-scuro { display: block; }

.nav__links {
  display: none;
  flex-wrap: wrap;
  margin: var(--space-0);
  margin-left: auto;
  padding: var(--space-0);
  list-style: none;
  gap: var(--space-1);
  min-width: 0;
}

.nav__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--btn-touch-min);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: var(--fs-link-sm);
  font-weight: var(--fw-button);
  line-height: var(--lh-link-sm);
  text-decoration: none;
}

button.nav__link {
  border: none;
  background: transparent;
  font-family: var(--font-sans);
  cursor: pointer;
  gap: var(--space-1);
}

.nav__link .icon--giu {
  width: var(--space-4);
  height: var(--space-4);
  transition: transform var(--dur-md) var(--ease-standard);
}

.nav__link[aria-expanded="true"]{ color: var(--text-primary); background: var(--surface-alt); }@media (hover:hover) and (pointer:fine){.nav__link:hover{ color: var(--text-primary); background: var(--surface-alt); }}

.nav__link[aria-current="true"],
.nav__link[aria-current="page"] { color: var(--text-primary); }

.nav__link[aria-expanded="true"] .icon--giu { transform: rotate(180deg); }

.nav__drop { display: flex; align-items: center; }

.mega {
  position: absolute;
  z-index: 2;
  left: var(--space-0);
  right: var(--space-0);
  top: 100%;
  background: var(--surface);
  border-bottom: var(--btn-border-width) solid var(--border);
  clip-path: inset(0 0 0 0);
  transition: clip-path var(--dur-lg) var(--ease-enter), visibility var(--dur-0) var(--ease-standard);
}

.mega[hidden] {
  display: block !important;
  visibility: hidden;
  pointer-events: none;
  clip-path: inset(0 0 100% 0);
}

@media (max-width: 63.9375rem) {
  .nav__links .mega { display: none !important; }
}

.mega__in {
  display: grid;
  gap: var(--space-7);
  padding: var(--space-7) var(--container-pad) var(--space-8);
}

.mega__col { min-width: 0; }

.mega__title {
  margin: var(--space-0) var(--space-0) var(--space-2);
  padding: var(--space-0) var(--space-3) var(--space-3);
  border-bottom: var(--btn-border-width) solid var(--border);
  color: var(--text-muted);
  font-size: var(--fs-caption);
  font-weight: var(--fw-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  line-height: var(--lh-caption);
  text-transform: uppercase;
}

.mega__grid { display: grid; gap: var(--space-1); }
.mega__grid--2 { grid-template-columns: minmax(0, 1fr); }

.mega__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-3);
  border-radius: var(--btn-radius);
  color: inherit;
  text-decoration: none;
  transition: background var(--dur-md) var(--ease-standard);
}

.mega__item:focus-visible{ background: var(--surface-alt); }@media (hover:hover) and (pointer:fine){.mega__item:hover{ background: var(--surface-alt); }}

.mega__item[aria-current="true"] { background: var(--accent-soft); }

.mega__tile {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--space-8);
  height: var(--space-8);
  border-radius: var(--radius-sm);
  background: var(--indaco-100);
  color: var(--indaco-700);
}

.mega__tile .icon { width: var(--space-5); height: var(--space-5); }

.mega__item b,
.mega__item .mega__label {
  display: block;
  color: var(--text-primary);
  font-size: var(--fs-link-sm);
  font-weight: var(--fw-h4);
  line-height: var(--lh-link-sm);
  overflow-wrap: break-word;
}

.mega__item small {
  display: block;
  margin-top: var(--space-1);
  color: var(--text-secondary);
  font-size: var(--fs-small);
  font-weight: var(--fw-body);
  line-height: var(--lh-small);
  overflow-wrap: break-word;
}

.mega__aside {
  min-width: 0;
  padding: var(--space-7);
  border-radius: var(--radius-md);
  background: var(--bg);
}

.mega__feat {
  display: block;
  min-width: 0;
  color: var(--text-primary);
  text-decoration: none;
  border-radius: var(--radius-md);
}

.mega__feat-img {
  display: block;
  overflow: hidden;
  margin-bottom: var(--space-3);
  border-radius: var(--btn-radius);
  aspect-ratio: 16 / 9;
}

.mega__feat-img img { width: 100%; height: 100%; object-fit: cover; }

.mega__feat b {
  display: block;
  font-size: var(--fs-link-sm);
  font-weight: var(--fw-h4);
  line-height: var(--lh-link-sm);
  overflow-wrap: break-word;
}

.nav__toggle .icon--chiudi { display: none; }
.nav__toggle[aria-expanded="true"] .icon--menu { display: none; }
.nav__toggle[aria-expanded="true"] .icon--chiudi { display: inline-block; }

.nav__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--actions-gap); margin-left: auto; min-width: 0; }
.nav__actions .btn,
.nav__menu-in .btn { white-space: normal; text-align: center; max-width: 100%; }
.nav__login { display: none; }

.nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--btn-touch-min);
  height: var(--btn-touch-min);
  padding: var(--space-0);
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
}

.nav__menu {
  position: fixed;
  z-index: 1;
  inset: var(--space-10) var(--space-0) var(--space-0);
  background: var(--bg);
  overflow: auto;
}

.nav__menu-in {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4) var(--container-pad) var(--space-8);
}

.nav__menu-in > a:not(.btn) {
  display: flex;
  align-items: center;
  min-height: var(--space-10);
  color: var(--text-primary);
  font-size: var(--fs-h4);
  font-weight: var(--fw-h3);
  line-height: var(--lh-h4);
  text-decoration: none;
  overflow-wrap: break-word;
}

.nav__menu-in .btn { width: 100%; justify-content: center; }

.nav-acc { min-width: 0; border-bottom: var(--btn-border-width) solid var(--border); }

.nav-acc > button {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  min-height: var(--space-10);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  font-weight: var(--fw-h3);
  line-height: var(--lh-h4);
  cursor: pointer;
  overflow-wrap: break-word;
}

.nav-acc > button .icon {
  width: var(--space-6);
  height: var(--space-6);
  transition: transform var(--dur-md) var(--ease-standard);
}

.nav-acc > button[aria-expanded="true"] { color: var(--link); }
.nav-acc > button[aria-expanded="true"] .icon { transform: rotate(180deg); }

.nav-acc__panel { min-width: 0; padding-bottom: var(--space-4); }

.nav-acc__title {
  margin: var(--space-3) var(--space-0) var(--space-1);
  color: var(--text-muted);
  font-size: var(--fs-caption);
  font-weight: var(--fw-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  line-height: var(--lh-caption);
  text-transform: uppercase;
}

.nav-acc__panel a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--btn-touch-min);
  min-width: 0;
  padding: var(--space-2) var(--space-0);
  border-radius: var(--btn-radius);
  color: var(--text-primary);
  font-size: var(--fs-body);
  font-weight: var(--fw-button);
  line-height: var(--lh-body);
  text-decoration: none;
  overflow-wrap: break-word;
}

.nav-acc__panel a .icon { width: var(--space-5); height: var(--space-5); color: var(--link); }

.nav__desktop-only { display: none; }

.nav__lang {
  justify-content: center;
  width: var(--btn-touch-min);
  padding-inline: var(--space-0);
}

.mega-scrim {
  position: fixed;
  z-index: 1;
  inset: var(--space-0);
  background: color-mix(in oklch, var(--color-inchiostro) 24%, transparent);
}

@media (min-width: 64rem) {
  .nav__bar { flex-wrap: nowrap; }
  .nav__links { display: flex; flex-wrap: nowrap; align-items: center; margin-left: var(--space-0); flex: 1; min-width: 0; }
  .nav__link { padding-inline: var(--space-2); }
  .mega__grid--2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mega--servizi .mega__in { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); }
  .mega--piattaforma .mega__in { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
  .mega--risorse .mega__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
  .nav__desktop-only { display: inline-flex; }
  .nav__actions { margin-left: auto; }
  .nav__toggle { display: none; }
}

.md-ov {
  position: fixed;
  z-index: 3;
  inset: var(--space-0);
  display: grid;
  place-items: center;
  padding: var(--space-9) var(--space-4);
  background: color-mix(in oklch, var(--color-inchiostro) 50%, transparent);
}

.md {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--measure-text);
  max-height: calc(100dvh - var(--space-12));
  overflow: auto;
  border: var(--btn-border-width) solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text-primary);
  transform: translateY(var(--move-md));
  transition: transform var(--dur-lg) var(--ease-enter);
}

.md-ov:not([hidden]) .md { transform: translateY(var(--space-0)); }

.md__head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-6) var(--space-0);
}

.md__title {
  flex: 1;
  margin: var(--space-0);
  font-size: var(--fs-h4);
  font-weight: var(--fw-h4);
  letter-spacing: var(--ls-h4);
  line-height: var(--lh-h4);
}

.md__x {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--space-8);
  height: var(--space-8);
  margin: calc(var(--space-2) * -1) calc(var(--space-2) * -1) var(--space-0) var(--space-0);
  padding: var(--space-0);
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
}

@media (hover:hover) and (pointer:fine){.md__x:hover{ background: var(--surface-alt); color: var(--text-primary); }}
.md__x .icon { width: var(--space-5); height: var(--space-5); }

.md__body {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-6) var(--space-6);
}

.lang-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--space-10);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: var(--fs-h4);
  font-weight: var(--fw-h4);
  line-height: var(--lh-h4);
  text-decoration: none;
}

.lang-opt:focus-visible{ background: var(--surface-alt); }@media (hover:hover) and (pointer:fine){.lang-opt:hover{ background: var(--surface-alt); }}
.lang-opt[aria-current="true"] { background: var(--accent-soft); color: var(--link); }

html.modal-open,
html.modal-open body { overflow: hidden; }

@media (max-width: 47.9375rem) {
  .md-ov { align-items: end; padding: var(--space-0); }
  .md {
    max-width: none;
    max-height: calc(100dvh - var(--space-10));
    border-radius: var(--radius-md) var(--radius-md) var(--space-0) var(--space-0);
  }
}
/* Navbar da specifica brand: desktop 72 alto, logo 28; tablet/mobile 64, logo 24 (26 non è in scala). */
:root { --nav-bar-h: var(--space-10); }
@media (min-width: 64rem) { :root { --nav-bar-h: calc(var(--space-10) + var(--space-2)); } }
html { scroll-padding-top: calc(var(--nav-bar-h) + var(--space-4)); }
.nav__bar { min-height: var(--nav-bar-h); }
@media (min-width: 64rem) { .nav__logo img { height: calc(var(--space-6) + var(--space-1)); } }
.nav__menu { inset: var(--nav-bar-h) var(--space-0) var(--space-0); }