/* ========================================
   CSS Variables & Reset
======================================== */
:root {
  /* Noble heritage palette */
  --background: hsl(40, 30%, 96%);
  --foreground: hsl(30, 20%, 15%);
  --card: hsl(40, 25%, 94%);
  --primary: hsl(350, 45%, 25%);
  --primary-foreground: hsl(40, 30%, 96%);
  --secondary: hsl(38, 35%, 90%);
  --muted: hsl(75, 15%, 85%);
  --muted-foreground: hsl(30, 15%, 38%); /* 5.4:1 su --background e --card (AA) */
  --accent: hsl(75, 25%, 35%);
  --border: hsl(35, 20%, 85%);
  
  /* Typography */
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'Cardo', Georgia, serif;
  
  /* Transitions */
  --transition-slow: 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);
  --transition-gentle: 0.5s ease;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  font-weight: 400;
  letter-spacing: 0.01em;
  background-color: var(--background);
  color: var(--foreground);
  line-height: 1.6;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

/* ========================================
   Header SEMPRE FISSO - CON EFFETTO SCROLL
======================================== */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: all 0.5s ease;
  pointer-events: none;
}

.header.scrolled {
  background: color-mix(in srgb, var(--background) 95%, transparent);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05);
  pointer-events: auto;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
  pointer-events: auto;
}

/* Logo container */
.combined-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: opacity var(--transition-gentle);
  max-width: 200px;
  pointer-events: auto;
  position: relative;
}

.logo-main {
  display: flex;
  align-items: center;
  gap: 1rem;
  position: relative;
}

/* Container per i loghi simbolo */
.logo-symbol-container {
  position: relative;
  width: 62px;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Stile per i loghi simbolo */
.logo-default, .logo-scrolled {
  width: 62px;
  height: 62px;
  object-fit: contain;
  transition: opacity 0.3s ease;
  position: absolute;
  left: 0;
  top: 0;
}

/* Logo di default (logo-1.webp) visibile quando NON scrolled */
.logo-default {
  opacity: 1;
}

/* Logo scrolled (logo-1w.png) nascosto quando NON scrolled */
.logo-scrolled {
  opacity: 0;
}

/* Quando la header è scrolled */
.header.scrolled .logo-default {
  opacity: 0;
}

.header.scrolled .logo-scrolled {
  opacity: 1;
}

/* Container per i loghi testo */
.logo-text {
  margin-left: 1rem;
  position: relative;
  width: 150px;
  height: 50px;
  display: flex;
  align-items: center;
}

/* Stile per i loghi di testo */
.logo-text-default, .logo-text-scrolled {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: auto;
  max-height: 50px;
  object-fit: contain;
  transition: opacity 0.3s ease;
}

/* Logo di testo default (logo-2.webp) visibile quando NON scrolled */
.logo-text-default {
  opacity: 1;
}

/* Logo di testo scrolled (logo-2w.png) nascosto quando NON scrolled */
.logo-text-scrolled {
  opacity: 0;
}

/* Quando la header è scrolled */
.header.scrolled .logo-text-default {
  opacity: 0;
}

.header.scrolled .logo-text-scrolled {
  opacity: 1;
}

/* Separatore verticale tra logo e testo */
.logo-main::after {
  content: '';
  position: absolute;
  right: -1.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 60px;
  background: color-mix(in srgb, var(--background) 30%, transparent);
  transition: all var(--transition-gentle);
}

.header.scrolled .logo-main::after {
  background: var(--border);
}

/* Navigation */
.nav {
  display: none;
  gap: 2.5rem;
  pointer-events: auto;
}


.nav-link {
  font-size: 0.875rem;
  color: white;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  transition: color 0.3s ease;
  position: relative;
  padding: 0.5rem 0;
  pointer-events: auto;
  font-weight: 400;
}

.header.scrolled .nav-link {
  color: var(--foreground);
  text-shadow: none;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.nav-link:hover::after {
  transform: scaleX(1);
}

/* La navbar naviga tra pagine, non tra sezioni: la pagina corrente e'
   marcata in HTML con aria-current, non calcolata allo scroll. */
.nav-link[aria-current="page"]::after {
  transform: scaleX(1);
}

/* Mobile Menu Button */
.mobile-menu-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 44px;
  min-height: 44px;
  padding: 0.5rem;
  z-index: 1001;
  pointer-events: auto;
}

.mobile-menu-btn span {
  width: 24px;
  height: 1px;
  background: white;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
  transition: all 0.3s ease;
}

.header.scrolled .mobile-menu-btn span {
  background: var(--foreground);
  filter: none;
}

.mobile-menu-btn.active span:nth-child(1) {
  transform: rotate(45deg) translate(6px, 6px);
}

.mobile-menu-btn.active span:nth-child(2) {
  opacity: 0;
}

.mobile-menu-btn.active span:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}


/* Open mobile nav overlay */


/* ========================================
   Layout del contenuto principale
======================================== */
.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.main-content {
  position: relative;
  z-index: 10;
  background: var(--background);
}

.section {
  padding: 6rem 0;
}

@media (min-width: 768px) {
  .section {
    padding: 8rem 0;
  }
}

@media (min-width: 1024px) {
  .section {
    padding: 10rem 0;
  }
}

/* ========================================
   Hero Section - PARALLAX
======================================== */
.hero-chisiamo {
  background-image: url("../../assets/chi-siamo-hero.webp");
  background-size: cover;
  background-position: center;
  color: var(--primary-foreground);
  text-align: center;
  padding: 0;
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero-chisiamo::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  margin-top: 80px;
  padding: 2rem 1rem;
}

@media (min-width: 768px) {
  .hero-content {
    margin-top: 100px;
    padding: 4rem 2rem;
  }
}

@media (min-width: 1024px) {
  .hero-content {
    margin-top: 120px;
    padding: 6rem 3rem;
  }
}

.hero-label {
  font-size: 0.875rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0.8;
  margin-bottom: 1rem;
}

.hero-title {
  font-size: clamp(2.5rem, 6vw, 4rem);
  margin-bottom: 1.5rem;
}

.divider {
  width: 60px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
  margin: 2rem auto;
}

.divider-center {
  margin-left: auto;
  margin-right: auto;
}

.hero-subtitle {
  font-size: 1.125rem;
  max-width: 64rem;
  margin: 0 auto;
  opacity: 0.9;
  line-height: 1.8;
  font-weight: 400;
}

/* ========================================
   Storia Section
======================================== */
.storia {
  background: var(--secondary);
}

.storia-grid {
  display: grid;
  gap: 3rem;
}

@media (min-width: 1024px) {
  .storia-grid {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
  }
}

.storia-image img {
  width: 100%;
  height: 500px;
  object-fit: cover;
  border-radius: 4px;
}

@media (min-width: 1024px) {
  .storia-image img {
    height: 700px;
  }
}

.image-caption {
  font-size: 0.875rem;
  color: var(--muted-foreground);
  font-style: italic;
  margin-top: 1rem;
  text-align: center;
}

.section-label {
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  margin-bottom: 1rem;
}

.section-title {
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: 1.5rem;
}

.storia-text {
  color: var(--muted-foreground);
  margin-bottom: 1.5rem;
  line-height: 1.8;
  font-size: 1.1rem;
}

/* ========================================
   Territorio Section — momento scuro a piena larghezza, sul modello
   dell'hero: la foto delle colline riappare qui, sotto un velo bordeaux
   quasi nero, come unica pausa scura nel resto della pagina chiara.
======================================== */
.territorio {
  position: relative;
  overflow: hidden;
  background: hsl(350, 55%, 8%);
  color: hsl(40, 32%, 92%);
}

.territorio-backdrop {
  position: absolute;
  inset: 0;
  background-image: url('../../assets/hero-bg-1280.webp');
  background-size: cover;
  background-position: center 60%;
  opacity: 0.24;
}

/* Il velo che affonda la foto nel bordeaux quasi nero: stessa temperatura
   di colore dell'hero e del preloader, non un nero neutro. */
.territorio-backdrop::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 15%, hsl(350 50% 12% / 0.15), hsl(350 58% 7% / 0.88) 60%, hsl(350 60% 5%) 100%);
}

.territorio .container {
  position: relative;
  z-index: 1;
}

.territorio-intro {
  max-width: 44rem;
  margin: 0 auto 4.5rem;
  text-align: center;
}

.territorio .section-label {
  color: hsl(40, 42%, 76%);
}

.territorio .section-title {
  font-style: italic;
  color: hsl(40, 35%, 96%);
}

.territorio-text {
  font-size: 1.15rem;
  line-height: 1.85;
  color: hsl(40, 22%, 87%);
}

.territorio-map {
  max-width: 30rem;
  margin: 0 auto;
}

.territorio-map img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 20px 45px hsl(350, 65%, 3%, 0.5));
}

.territorio-map-caption {
  margin-top: 1.75rem;
  text-align: center;
  font-size: 0.9rem;
  font-style: italic;
  line-height: 1.7;
  color: hsl(40, 28%, 78%);
}

/* ========================================
   Valori Section
======================================== */
.valori {
  background: var(--card);
}

.valori-header {
  text-align: center;
  max-width: 72rem;
  margin: 0 auto 4rem;
}

.valori-intro {
  font-size: 1.2rem;
  line-height: 1.8;
  color: var(--muted-foreground);
  margin-top: 2rem;
  max-width: 56rem;
  margin-left: auto;
  margin-right: auto;
}

.valori-list {
  max-width: 56rem;
  margin: 0 auto;
  border-top: 1px solid var(--border);
}

.valore-row {
  display: flex;
  align-items: stretch;
  gap: 1.5rem;
  padding: 2.25rem 0;
  border-bottom: 1px solid var(--border);
  transition: transform 0.4s ease;
}

@media (min-width: 768px) {
  .valore-row {
    gap: 2.5rem;
    padding: 3rem 0;
  }
}

.valore-row:hover {
  transform: translateX(0.75rem);
}

.valore-content {
  flex: 1 1 auto;
  min-width: 0;
}

/* Le iniziali P/T/R sono illustrazioni floreali (assets/p.svg, t.svg,
   r.svg), non più glifi di testo. Su mobile restano a dimensione fissa
   e ancorate in alto: farle combaciare con l'altezza della riga qui
   le renderebbe larghe quanto lo schermo. Da tablet in su, dove la
   colonna di testo ha margine, height:auto le lascia stirare
   (align-items: stretch) fino a pareggiare esattamente l'altezza di
   ogni valore-row, larghezza proporzionale via aspect ratio nativo. */
.valore-initial {
  display: block;
  width: auto;
  height: 3.75rem;
  flex-shrink: 0;
  opacity: 0.55;
  transition: opacity 0.4s ease;
}

@media (min-width: 768px) {
  .valore-initial {
    height: 150px;
  }
}

.valore-row:hover .valore-initial {
  opacity: 1;
}

.valore-title {
  font-size: 1.5rem;
  margin-bottom: 0.75rem;
}

@media (min-width: 768px) {
  .valore-title {
    font-size: 1.75rem;
  }
}

.valore-description {
  color: var(--muted-foreground);
  line-height: 1.8;
  font-size: 1.1rem;
  max-width: 42rem;
}

/* ========================================
   Team Section
======================================== */
.team {
  background: var(--background);
}

.team-header {
  text-align: center;
  max-width: 72rem;
  margin: 0 auto 4rem;
}

.team-intro {
  font-size: 1.2rem;
  line-height: 1.8;
  color: var(--muted-foreground);
  margin-top: 2rem;
  max-width: 56rem;
  margin-left: auto;
  margin-right: auto;
}

/* Striscia foto — scorrimento circolare "a puzzle".
   Il markup vero è un solo gruppo di <figure class="team-tile"> dentro
   #teamStripTrack (vedi chi-siamo.html); chi-siamo.js lo duplica per il
   loop e assegna a ciascuna foto una delle varianti .team-tile--a..h
   qui sotto, che ne decidono taglia, scarto verticale e inclinazione.
   Il risultato è una fila di foto sparse come ritagli, non allineate
   una sotto l'altra come le vecchie card. */
.team-strip {
  position: relative;
  overflow: hidden;
  padding: 3rem 0 3.5rem;
  /* Le foto si dissolvono ai bordi invece di essere tagliate di netto. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}

.team-strip-track {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  width: max-content;
  animation: team-strip-scroll 50s linear infinite;
}

/* In pausa su hover/focus: chi guarda una foto non se la vede scappare via. */
.team-strip:hover .team-strip-track,
.team-strip:focus-within .team-strip-track {
  animation-play-state: paused;
}

@keyframes team-strip-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.team-tile {
  flex: none;
  position: relative;
  width: 220px;
  height: 240px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--card);
  border: 6px solid var(--card);
  box-shadow: 0 14px 30px rgba(40, 15, 20, 0.16);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.team-tile:hover {
  transform: scale(1.05) rotate(0deg) !important;
  box-shadow: 0 18px 36px rgba(40, 15, 20, 0.24);
  z-index: 2;
}

.team-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Varianti "a puzzle": si ripetono ogni 8 foto, così anche aggiungendo
   o togliendo immagini la fila resta irregolare invece di andare in
   griglia. Taglia, scarto verticale e inclinazione sono diversi per
   ognuna apposta, per dare l'idea di ritagli sparsi a caso. */
.team-tile--a { width: 200px; height: 260px; transform: translateY(-16px) rotate(-3deg); }
.team-tile--b { width: 260px; height: 190px; transform: translateY(20px) rotate(2deg); }
.team-tile--c { width: 170px; height: 220px; transform: translateY(4px) rotate(4deg); }
.team-tile--d { width: 230px; height: 280px; transform: translateY(-26px) rotate(-2deg); }
.team-tile--e { width: 210px; height: 210px; transform: translateY(12px) rotate(-4deg); }
.team-tile--f { width: 250px; height: 225px; transform: translateY(-8px) rotate(3deg); }
.team-tile--g { width: 180px; height: 245px; transform: translateY(24px) rotate(-1deg); }
.team-tile--h { width: 240px; height: 200px; transform: translateY(-14px) rotate(1deg); }

/* Le foto duplicate dallo script servono solo a chiudere il loop:
   fuori dagli occhi degli screen reader e, a chi preferisce meno
   movimento, fuori anche dalla vista (vedi prefers-reduced-motion). */
.team-tile-clone {
  visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
  .team-strip-track {
    animation: none;
  }

  .team-strip {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .team-tile-clone {
    display: none;
  }
}

/* ========================================
   CTA Section — due colonne compatte: niente più foto/scrim, solo un
   blocco basso in --primary con due azioni indipendenti (contatto e
   newsletter) separate da un filo verticale che sparisce quando le due
   metà si impilano su mobile.
======================================== */
.cta {
  background-color: var(--primary);
  background-image: none;
  color: var(--primary-foreground);
  text-align: center;
  padding: 3.5rem 0;
}

@media (min-width: 768px) {
  .cta {
    padding: 4rem 0;
  }
}

@media (min-width: 1024px) {
  .cta {
    padding: 4.5rem 0;
  }
}

.cta-split {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.cta-half {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cta-divider {
  display: none;
}

@media (min-width: 768px) {
  .cta-split {
    flex-direction: row;
    gap: 3rem;
  }

  .cta-half {
    flex: 1 1 0;
    justify-content: center;
  }

  /* Nessun bordo fisso: si estende all'altezza della metà più alta
     grazie allo stretch di default del flex item. */
  .cta-divider {
    display: block;
    width: 1px;
    background: color-mix(in srgb, var(--primary-foreground) 22%, transparent);
  }
}

.cta-title {
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  margin-bottom: 1.5rem;
  text-wrap: balance;
}

.cta-newsletter-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cta-newsletter-field {
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
  width: 100%;
  max-width: 22rem;
}

.cta-newsletter-field input {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid color-mix(in srgb, var(--primary-foreground) 45%, transparent);
  padding: 0.6rem 0;
  color: var(--primary-foreground);
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 400;
  transition: border-color 0.3s ease;
}

.cta-newsletter-field input::placeholder {
  color: color-mix(in srgb, var(--primary-foreground) 70%, transparent);
}

.cta-newsletter-field input:focus {
  outline: none;
  border-color: var(--primary-foreground);
}

.cta-newsletter-field input[aria-invalid="true"] {
  border-color: hsl(4, 70%, 78%);
}

.cta-newsletter-submit {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 1px;
  border: 1px solid var(--primary-foreground);
  color: var(--primary-foreground);
  transition: background-color 0.3s ease, color 0.3s ease;
}

.cta-newsletter-submit:hover {
  background: var(--primary-foreground);
  color: var(--primary);
}

.cta-newsletter-submit:focus-visible {
  outline: 2px solid var(--primary-foreground);
  outline-offset: 3px;
}

.cta-newsletter-submit svg {
  transition: transform 0.3s ease;
}

.cta-newsletter-submit:hover svg {
  transform: translateX(2px);
}

.cta-newsletter-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.cta-newsletter-message {
  margin-top: 0.85rem;
  min-height: 1.2em;
  font-size: 0.85rem;
  color: color-mix(in srgb, var(--primary-foreground) 85%, transparent);
}

.cta-newsletter-message[data-state="error"] {
  color: hsl(4, 70%, 78%);
}

.cta-newsletter-message[data-state="success"] {
  color: hsl(90, 40%, 78%);
}

/* Stessa famiglia del pulsante "Invia" del form in Contatti: bordo
   sottile, spigolo vivo, maiuscolo trackato, si riempie al hover con la
   freccia che scivola — non il pulsante a pillola con ombra usato
   altrove sul sito. Qui i colori sono invertiti (bordo e testo chiari)
   perché il pulsante vive sullo scrim scuro della sezione CTA. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.9rem 1.75rem;
  border-radius: 0;
  font-size: 0.875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.btn-primary {
  background: transparent;
  color: var(--primary-foreground);
  border: 1px solid var(--primary-foreground);
}

.btn-primary:hover {
  background: var(--primary-foreground);
  color: var(--primary);
}

.btn-primary:focus-visible {
  outline: 2px solid var(--primary-foreground);
  outline-offset: 3px;
}

.btn-primary svg {
  transition: transform 0.3s ease;
}

.btn-primary:hover svg {
  transform: translateX(4px);
}


/* Footer — nessun sigillo e nessuna cornice a doppio filo: il footer
   attacca direttamente dopo l'ultima sezione, separato solo dal filo di
   bordo. Sfondo chiaro, niente fotografia: il tocco distintivo è
   tipografico. */
.footer {
  position: relative;
  background: var(--card);
  color: var(--foreground);
  padding: 5rem 0 3rem;
  border-top: 1px solid var(--border);
}

@media (min-width: 768px) {
  .footer {
    padding: 6rem 0 3rem;
  }
}

/* Senza il sigillo sopra non c'è più niente da scavalcare: il padding
   che gli faceva spazio sparisce con lui. */
.footer-grid {
  display: grid;
  gap: 3rem;
}

@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 6rem;
    align-items: start;
  }

  /* Nel markup il form viene prima (così su una colonna è la prima cosa
     che si vede): qui, su due colonne, le info tornano a sinistra e il
     form a destra, il disegno originale — solo l'ordine visivo cambia,
     non quello del DOM/tab. */
  .footer-info {
    order: 1;
  }

  .footer-form {
    order: 2;
  }
}

.footer-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  margin-bottom: 2rem;
  color: var(--primary);
}

.footer-details {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.footer-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.5rem;
}

.footer-detail-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.footer-detail p {
  color: var(--muted-foreground);
  line-height: 1.6;
  font-size: 1.1rem;
}

/* 44px di area toccabile su chiamare e scrivere, senza aprire lo spazio
   tra le righe (il margin negativo riassorbe il padding). */
.footer-detail a {
  display: inline-block;
  padding-block: 0.6rem;
  margin-block: -0.45rem;
  transition: color 0.3s ease;
}

.footer-detail a:hover,
.footer-detail a:focus-visible {
  color: var(--primary);
}

.footer-form {
  position: relative;
}

.form-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.75rem;
  margin-bottom: 1.75rem;
  color: var(--primary);
}

.form-field {
  position: relative;
  margin-bottom: 1.75rem;
}

.form-field input,
.form-field textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid hsl(40, 30%, 92%, 0.3);
  padding: 0.75rem 0;
  color: var(--primary-foreground);
  font-family: var(--font-sans);
  font-size: 1.1rem;
  font-weight: 400;
  transition: border-color 0.3s ease;
  resize: none;
}

.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: hsl(40, 45%, 85%, 0.7);
}

.form-field label {
  position: absolute;
  left: 0;
  top: 0.75rem;
  font-size: 1.1rem;
  color: hsl(40, 30%, 92%, 0.55);
  transition: all 0.3s ease;
  pointer-events: none;
}

.form-field input:focus + label,
.form-field input:not(:placeholder-shown) + label,
.form-field textarea:focus + label,
.form-field textarea:not(:placeholder-shown) + label {
  top: -0.75rem;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.form-submit {
    display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--background) 80%, transparent);
  transition: color 0.3s ease;
  margin-top: 1rem;
}

.form-submit:hover {
  color: var(--primary-foreground);
}

.form-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}


.form-submit svg {
  transition: transform 0.3s ease;
}

.form-submit:hover svg {
  transform: translateX(4px);
}

.footer-quicklinks {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 2rem;
}

.footer-quicklink {
  display: inline-block;
  width: fit-content;
  padding: 0.65rem 0;
  min-height: 44px;
  font-size: 1.05rem;
  color: var(--muted-foreground);
  border-bottom: 1px solid transparent;
  transition: color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.footer-quicklink:hover,
.footer-quicklink:focus-visible {
  color: var(--primary);
  border-color: var(--primary);
  transform: translateX(4px);
}

.footer-quicklink:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

.footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Stessa famiglia di .btn/.form-submit: spigolo vivo, non più il cerchio
   icona-sola — il nome del social ora è scritto, non solo suggerito. */
.footer-social-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 1.1rem;
  border-radius: 0;
  border: 1px solid var(--border);
  color: var(--muted-foreground);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: border-color 0.3s ease, color 0.3s ease, background-color 0.3s ease;
}

.footer-social-link:hover,
.footer-social-link:focus-visible {
  color: var(--primary-foreground);
  background: var(--primary);
  border-color: var(--primary);
}

.footer-social-link:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

.footer-social-link svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
  .footer-quicklink:hover,
  .footer-quicklink:focus-visible {
    transform: none;
  }
}

/* Footer Bottom */
.footer-bottom {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  text-align: center;
}

/* Il logotipo, centrato, sempre sulla propria riga sopra P.IVA/copyright
   — anche nel layout a riga di desktop (vedi flex-basis sotto). */
.footer-logo {
  flex: 1 0 100%;
  display: flex;
  justify-content: center;
}

.footer-logo img {
  height: 2rem;
  width: auto;
}

@media (min-width: 768px) {
  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

.footer-brand {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.6rem;
  font-family: var(--font-serif);
  font-size: 1.125rem;
  letter-spacing: 0.2em;
  color: var(--primary);
}

@media (min-width: 768px) {
  .footer-brand {
    justify-content: flex-start;
  }
}

.footer-piva {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: var(--muted-foreground);
}

.footer-legal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

@media (min-width: 768px) {
  .footer-legal {
    align-items: flex-end;
  }
}

.footer-copyright {
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

/* Firma di chi ha realizzato il sito: dicitura piu' logo, una riga sola.
   Resta sotto il copyright, ma leggibile — niente opacita' addosso: il
   passo indietro lo fa gia' il corpo piccolo e il colore attenuato. */
.footer-credit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.15rem 0.55rem;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--muted-foreground);
}

@media (min-width: 768px) {
  .footer-credit {
    justify-content: flex-end;
  }
}

/* Segnaposto cliccabile: <a> senza href — e' la forma che l'HTML prevede
   per "qui ci andra' un link". Focus e puntatore ci sono gia', cosi'
   il giorno che arriva l'indirizzo basta aggiungere href. */
.footer-credit-logo {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  border-radius: 2px;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Al passaggio il marchio fa solo un piccolo "pop": nessuna linea sotto,
   solo scala e un filo di sollevamento. */
.footer-credit-logo:hover,
.footer-credit-logo:focus-visible {
  transform: translateY(-1px) scale(1.08);
}

.footer-credit-logo:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 4px;
}

/* Il file ha circa il 15% di margine interno sopra e sotto: l'altezza
   dichiarata qui e' quindi piu' alta del segno che si vede davvero.
   Sta alla pari con il corpo del testo accanto, un po' piu' presente. */
.footer-credit-logo img {
  display: block;
  height: 1.4rem;
  width: auto;
  max-width: none;
}

@media (prefers-reduced-motion: reduce) {
  .footer-credit-logo {
    transition-duration: 0.01ms;
  }

  .footer-credit-logo:hover,
  .footer-credit-logo:focus-visible {
    transform: none;
  }
}

.footer-legal-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 1.25rem;
}

@media (min-width: 768px) {
  .footer-legal-links {
    justify-content: flex-end;
  }
}

.footer-legal-link {
  display: inline-block;
  font-family: inherit;
  font-size: 0.8rem;
  color: var(--muted-foreground);
  background: none;
  border: none;
  padding: 0;
  /* Area di tocco alta 44px riassorbita dal margine negativo, cosi' il
     dito ha dove premere senza che la riga si allarghi. Le due
     dichiarazioni vanno dopo il "padding: 0" del reset del <button>:
     prima, veniva azzerata l'imbottitura e restava il margine negativo
     da solo — e su mobile, dove i link vanno a capo, le due righe si
     sovrapponevano. */
  padding-block: 0.7rem;
  margin-block: -0.55rem;
  cursor: pointer;
  text-underline-offset: 3px;
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: color 0.3s ease, text-decoration-color 0.3s ease;
}

.footer-legal-link:hover,
.footer-legal-link:focus-visible {
  color: var(--primary);
  text-decoration-color: currentColor;
}

.footer-legal-link:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

/* ========================================
   Banner cookie — informativo: spiega cosa carica il sito da domini
   esterni (Google Fonts, script da CDN) e registra la scelta, ma non
   blocca nulla — il sito non usa cookie di profilazione/tracciamento.
======================================== */
.cookie-banner {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 2000;
  max-width: 640px;
  margin: 0 auto;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 20px 50px rgba(40, 15, 20, 0.18);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transform: translateY(calc(100% + 2rem));
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
}

.cookie-banner[data-visible="true"] {
  transform: translateY(0);
  opacity: 1;
}

.cookie-banner-text {
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--muted-foreground);
}

.cookie-banner-text a {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cookie-banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: flex-end;
}

.cookie-banner-btn {
  font-family: inherit;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.7rem 1.4rem;
  border-radius: 9999px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.cookie-banner-btn-accept {
  background: var(--primary);
  color: var(--primary-foreground);
  border: 1px solid var(--primary);
}

.cookie-banner-btn-accept:hover {
  background: hsl(350, 45%, 20%);
  transform: translateY(-1px);
}

.cookie-banner-btn-reject {
  background: transparent;
  color: var(--muted-foreground);
  border: 1px solid var(--border);
}

.cookie-banner-btn-reject:hover {
  color: var(--foreground);
  border-color: var(--muted-foreground);
}

.cookie-banner-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .cookie-banner {
    transition: opacity 0.3s ease;
    transform: none;
  }

  .cookie-banner-btn-accept:hover {
    transform: none;
  }
}

@media (min-width: 640px) {
  .cookie-banner {
    left: auto;
    right: 1.5rem;
    bottom: 1.5rem;
    width: 420px;
  }
}

/* ========================================
   Animations
======================================== */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-up {
  animation: fadeUp 0.8s ease forwards;
}

/* ========================================
   Responsive
======================================== */
@media (max-width: 768px) {
  /* Logo responsive */
  .logo-default, .logo-scrolled {
    width: 60px;
    height: 60px;
  }
  
  .logo-main::after {
    height: 50px;
    right: -1rem;
  }
  
  /* Hero section */
  .hero-chisiamo {
    min-height: 80vh;
  }
  
  .hero-content {
    margin-top: 60px;
  }
  
  /* Territorio mobile: la mappa non deve dominare uno schermo stretto. */
  .territorio-map {
    max-width: 20rem;
  }

  /* Striscia team più stretta: foto più piccole, scarti verticali
     ridotti e loop un po' più rapido per restare allo stesso ritmo
     visivo (px al secondo) di una fila più corta. */
  .team-strip-track {
    gap: 1.1rem;
    animation-duration: 32s;
  }

  .team-tile,
  .team-tile--a, .team-tile--b, .team-tile--c, .team-tile--d,
  .team-tile--e, .team-tile--f, .team-tile--g, .team-tile--h {
    width: 150px;
    height: 170px;
  }

  .team-tile--a { transform: translateY(-10px) rotate(-3deg); }
  .team-tile--b { transform: translateY(13px) rotate(2deg); }
  .team-tile--c { transform: translateY(3px) rotate(4deg); }
  .team-tile--d { transform: translateY(-16px) rotate(-2deg); }
  .team-tile--e { transform: translateY(8px) rotate(-4deg); }
  .team-tile--f { transform: translateY(-5px) rotate(3deg); }
  .team-tile--g { transform: translateY(15px) rotate(-1deg); }
  .team-tile--h { transform: translateY(-9px) rotate(1deg); }

  /* Mobile menu */
  .nav {
    display: none;
  }
  
}

@media (max-width: 480px) {
  /* Logo molto piccolo */
  .logo-default, .logo-scrolled {
    width: 50px;
    height: 50px;
  }
  
  .logo-main::after {
    height: 40px;
  }
  
  /* Hero section */
  .hero-chisiamo {
    min-height: 70vh;
  }
  
  .hero-content {
    margin-top: 40px;
  }
  
  /* Section padding */
  .section {
    padding: 4rem 0;
  }
  
  /* CTA buttons */
  .btn {
    min-width: 180px;
    padding: 0.875rem 1.5rem;
  }
  
  /* Striscia team ancora più compatta sui telefoni piccoli. */
  .team-strip-track {
    gap: 0.85rem;
  }

  .team-tile,
  .team-tile--a, .team-tile--b, .team-tile--c, .team-tile--d,
  .team-tile--e, .team-tile--f, .team-tile--g, .team-tile--h {
    width: 120px;
    height: 140px;
  }
}

/* ========================================
   Mobile — menu a tutto schermo
======================================== */
@media (max-width: 767.98px) {
  /* Il simbolo scende alla stessa altezza del logo testuale */
  .logo-symbol-container,
  .logo-default,
  .logo-scrolled {
    width: 52px;
    height: 52px;
  }

  /* A menu chiuso resta solo il simbolo: il lettering collassa
     senza spostare il simbolo, e rientra al suo posto all'apertura. */
  .logo-main {
    gap: 0;
  }

  .logo-text {
    width: 0;
    height: 52px;
    margin-left: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateX(-14px);
    transition:
      width 0.55s cubic-bezier(0.16, 1, 0.3, 1),
      margin-left 0.55s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.08s,
      opacity 0.45s ease 0.12s;
  }

  .logo-text-default,
  .logo-text-scrolled {
    max-height: 44px;
    width: 140px;
  }

  .header.menu-open .logo-text {
    width: 140px;
    margin-left: 1rem;
    opacity: 1;
    transform: translateX(0);
  }

  /* Sul crema del menu servono le versioni a colori */
  .header.menu-open .logo-default,
  .header.menu-open .logo-text-default {
    opacity: 0;
  }

  .header.menu-open .logo-scrolled,
  .header.menu-open .logo-text-scrolled {
    opacity: 1;
  }

  .header.menu-open .mobile-menu-btn span {
    background: var(--primary);
    filter: none;
  }

  /* Il separatore verticale appartiene alla lettura desktop */
  .logo-main::after {
    display: none;
  }

  /* Il logo vive sopra l'overlay, non sotto */
  .combined-logo {
    z-index: 1001;
  }

  /* --- Overlay --- */
  .nav {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 999;
    flex-direction: column;
    justify-content: center;
    gap: 0;
    padding: 96px 1.5rem 3rem;
    background:
      radial-gradient(120% 90% at 12% 0%, hsl(38, 55%, 94%) 0%, transparent 62%),
      linear-gradient(168deg, var(--background) 0%, var(--secondary) 58%, hsl(35, 26%, 86%) 100%);
    clip-path: inset(0 0 100% 0);
    opacity: 0;
    visibility: hidden;
    /* Un livello suo: il ritaglio dell'apertura ridipinge questo
       sfondo e basta, non la pagina che ha sotto. */
    will-change: clip-path, opacity;
    pointer-events: none;
    transition:
      clip-path 0.62s cubic-bezier(0.16, 1, 0.3, 1),
      opacity 0.3s ease 0.14s,
      visibility 0s linear 0.62s;
  }

  .nav.nav-open {
    clip-path: inset(0 0 0 0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition:
      clip-path 0.62s cubic-bezier(0.16, 1, 0.3, 1),
      opacity 0.24s ease,
      visibility 0s linear 0s;
  }

  .nav .nav-link {
    color: var(--foreground);
    text-shadow: none;
    font-family: var(--font-serif);
    font-size: clamp(1.75rem, 8vw, 2.5rem);
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: 1.2;
    padding: 1rem 0;
    border-top: 1px solid color-mix(in srgb, var(--primary) 14%, transparent);
    opacity: 0;
    transform: translateY(18px);
    transition:
      opacity 0.4s ease,
      transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
      color 0.3s ease;
  }

  .nav .nav-link:last-child {
    border-bottom: 1px solid color-mix(in srgb, var(--primary) 14%, transparent);
  }

  .nav .nav-link:active {
    color: var(--primary);
  }

  /* L'underline desktop non ha senso su una lista a tutta pagina */
  .nav .nav-link::after {
    display: none;
  }

  .nav.nav-open .nav-link {
    opacity: 1;
    transform: translateY(0);
  }

  .nav.nav-open .nav-link:nth-child(1) { transition-delay: 0.20s, 0.20s, 0s; }
  .nav.nav-open .nav-link:nth-child(2) { transition-delay: 0.26s, 0.26s, 0s; }
  .nav.nav-open .nav-link:nth-child(3) { transition-delay: 0.32s, 0.32s, 0s; }
  .nav.nav-open .nav-link:nth-child(4) { transition-delay: 0.38s, 0.38s, 0s; }
  .nav.nav-open .nav-link:nth-child(5) { transition-delay: 0.44s, 0.44s, 0s; }
}

@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
  .nav,
  .nav.nav-open,
  .logo-text,
  .nav .nav-link,
  .nav.nav-open .nav-link {
    transition-duration: 0.01ms;
    transition-delay: 0s;
  }
}

@media (max-width: 767.98px) {
  .combined-logo {
    max-width: none;
  }
}

/* WCAG 2.4.7. Fuori da ogni media query apposta: la regola era intrappolata
   dentro un blocco a movimento ridotto e sul desktop non si applicava mai.
   Sull'header trasparente in cima alla hero il primary non si vede: il ring
   e' bianco finche' l'header non e' .scrolled. */
.nav .nav-link:focus-visible,
.combined-logo:focus-visible,
.mobile-menu-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 4px;
  border-radius: 2px;
}

.header:not(.scrolled) .nav .nav-link:focus-visible,
.header:not(.scrolled) .combined-logo:focus-visible,
.header:not(.scrolled) .mobile-menu-btn:focus-visible {
  outline-color: var(--primary-foreground);
}


/* ========================================
   Menu a overlay anche da desktop
   L'hamburger e' l'unica porta della navigazione: sopra i 768px
   l'overlay riprende la logica mobile, con piu' respiro.
======================================== */
@media (min-width: 768px) {
  .nav {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 999;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 0;
    padding: 140px clamp(3rem, 10vw, 10rem) 5rem;
    background:
      radial-gradient(110% 80% at 10% 0%, hsl(38, 55%, 94%) 0%, transparent 60%),
      linear-gradient(168deg, var(--background) 0%, var(--secondary) 58%, hsl(35, 26%, 86%) 100%);
    clip-path: inset(0 0 100% 0);
    opacity: 0;
    visibility: hidden;
    /* Un livello suo: il ritaglio dell'apertura ridipinge questo
       sfondo e basta, non la pagina che ha sotto. */
    will-change: clip-path, opacity;
    pointer-events: none;
    transition:
      clip-path 0.62s cubic-bezier(0.16, 1, 0.3, 1),
      opacity 0.3s ease 0.14s,
      visibility 0s linear 0.62s;
  }

  .nav.nav-open {
    clip-path: inset(0 0 0 0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition:
      clip-path 0.62s cubic-bezier(0.16, 1, 0.3, 1),
      opacity 0.24s ease,
      visibility 0s linear 0s;
  }

  .nav .nav-link {
    width: 100%;
    max-width: 780px;
    color: var(--foreground);
    text-shadow: none;
    font-family: var(--font-serif);
    font-size: clamp(2rem, 3.6vw, 3.25rem);
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: 1.2;
    padding: 1.1rem 0;
    border-top: 1px solid color-mix(in srgb, var(--primary) 14%, transparent);
    opacity: 0;
    transform: translateY(18px);
    transition:
      opacity 0.4s ease,
      transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
      color 0.3s ease;
  }

  .nav .nav-link:last-child {
    border-bottom: 1px solid color-mix(in srgb, var(--primary) 14%, transparent);
  }

  .nav .nav-link:hover {
    color: var(--primary);
  }

  /* L'underline desktop non ha senso su una lista a tutta pagina */
  .nav .nav-link::after {
    display: none;
  }

  .nav.nav-open .nav-link {
    opacity: 1;
    transform: translateY(0);
  }

  .nav.nav-open .nav-link:nth-child(1) { transition-delay: 0.20s, 0.20s, 0s; }
  .nav.nav-open .nav-link:nth-child(2) { transition-delay: 0.26s, 0.26s, 0s; }
  .nav.nav-open .nav-link:nth-child(3) { transition-delay: 0.32s, 0.32s, 0s; }
  .nav.nav-open .nav-link:nth-child(4) { transition-delay: 0.38s, 0.38s, 0s; }
  .nav.nav-open .nav-link:nth-child(5) { transition-delay: 0.44s, 0.44s, 0s; }

  /* Il logo resta leggibile sopra il crema dell'overlay */
  .combined-logo {
    z-index: 1001;
  }

  .header.menu-open .logo-default,
  .header.menu-open .logo-text-default {
    opacity: 0;
  }

  .header.menu-open .logo-scrolled,
  .header.menu-open .logo-text-scrolled {
    opacity: 1;
  }

  .header.menu-open .logo-main::after {
    background: var(--border);
  }

  .header.menu-open .mobile-menu-btn span {
    background: var(--primary);
    filter: none;
  }
}

@media (min-width: 768px) and (prefers-reduced-motion: reduce) {
  .nav,
  .nav.nav-open,
  .nav .nav-link,
  .nav.nav-open .nav-link {
    transition-duration: 0.01ms;
    transition-delay: 0s;
  }
}

/* ========================================
   Pagina corrente dentro l'overlay
   Porpora del sito piu' un segno a margine: il colore da solo
   non basterebbe a distinguere la voce attiva.
======================================== */
.nav .nav-link[aria-current="page"] {
  color: var(--primary);
  font-weight: 700;
  padding-left: 1.75rem;
}

.nav .nav-link[aria-current="page"]::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--primary);
}

/* ========================================
   Lettering al centro della navbar
   Il simbolo resta a sinistra, il lettering sta al centro esatto della
   barra: si misura quindi sul contenitore dell'header, non sull'ancora
   del logo (per questo nell'HTML vive fuori da essa). Decorativo e
   inerte: il bersaglio "home" resta il simbolo.
======================================== */
.header-content {
  position: relative;
}

.logo-text {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: 0;
  transform: translate(-50%, -50%);
  z-index: 1001;
  pointer-events: none;
}

/* La barra verticale separava il simbolo dal lettering che gli stava
   accanto. Ora che il lettering e' altrove non separa piu' niente. */
.logo-main::after {
  display: none;
}

/* Su telefono il lettering compare solo a menu aperto. Non si allarga
   piu' da destra del simbolo (era agganciato a lui): ora e' gia' al
   centro e semplicemente entra. */
@media (max-width: 767.98px) {
  .logo-text {
    width: 140px;
    height: 52px;
    margin-left: 0;
    overflow: visible;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.94);
    transition:
      opacity 0.4s ease,
      transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .header.menu-open .logo-text {
    width: 140px;
    margin-left: 0;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
  .logo-text {
    transition-duration: 0.01ms;
  }
}

/* ========================================
   Il lampo blu al tocco su mobile
   Non e' una cosa sola, e "-webkit-tap-highlight-color" ne spegne solo
   la prima delle tre:
   1. l'highlight del tap — gia' spento nel reset, ribadito qui su html
      perche' la proprieta' si eredita e va dichiarata sulla radice;
   2. la selezione del testo — basta che il dito si sposti di un pixel
      mentre tocca e il browser seleziona la parola, dipingendola di blu.
      E' questa che di solito sopravvive al reset;
   3. il callout di iOS al tocco prolungato.
   Il testo dei contenuti resta selezionabile: si blocca solo la parte
   interattiva dell'interfaccia, dove selezionare non serve.
======================================== */
html {
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}

a,
button,
label,
summary,
[role="button"] {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Telefono e mail si copiano: qui la selezione serve davvero. */
a[href^="tel:"],
a[href^="mailto:"] {
  -webkit-touch-callout: default;
  -webkit-user-select: text;
  user-select: text;
}

/* E se una selezione avviene comunque, che sia nei colori del sito. */
::selection {
  background: color-mix(in srgb, var(--primary) 22%, transparent);
  color: var(--foreground);
}

/* ========================================
   Blocco dello scorrimento quando l'overlay del menu e' aperto.
   Vedi il commento in "bloccaScorrimento" nel JS: si tiene ferma la
   pagina senza toglierla dal flusso, cosi' l'apertura del menu non
   paga un rilayout dell'intero documento nel fotogramma sbagliato.
   Il posto della barra resta prenotato sempre, cosi' toglierla non
   sposta di un pixel quello che c'e' sotto.
======================================== */
html {
  scrollbar-gutter: stable;
}

html.scorrimento-bloccato,
html.scorrimento-bloccato body {
  overflow: hidden;
}

/* Alcuni blocchi a piena larghezza si misurano con
   "--scrollbar: calc(100vw - 100%)". A barra nascosta quel calcolo
   diventa negativo e la sezione si allarga di quindici pixel proprio
   mentre il menu si apre: un rilayout di una sezione alta quanto lo
   schermo, nel fotogramma peggiore. Senza barra la compensazione da'
   fare e' zero, e messa qui il valore non oscilla. */
html.scorrimento-bloccato {
  --scrollbar: 0px;
}

/* L'overlay non passa lo scorrimento a quello che ha dietro. */
.nav {
  overscroll-behavior: contain;
}

/* L'indirizzo di sede e' un <address>: e' l'elemento che i motori di
   ricerca leggono come recapito dell'attivita'. Il corsivo di default
   qui non c'entra niente con il resto del footer. */
.footer-address {
  font-style: normal;
  line-height: inherit;
}