/* ==========================================================================
   AIMART — Restyling accademico/elegante
   Applicato alle nuove pagine: Iniziative Speciali, Bambini, Dalla lettura
   alla musica. Pensato per estendersi in seguito al resto del sito.
   ========================================================================== */

@import url('https://fonts.cdnfonts.com/css/fraunces');
@import url('https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600,700&display=swap');

:root {
  --bg-primary: #F7F2E7;
  --bg-alt: #F1EADA;
  --surface: #FFFDF8;
  --border: #E2D8C0;
  --text-primary: #14213D;
  --text-secondary: #4A5573;
  --text-tertiary: #8B93A8;
  --accent: #14213D;
  --accent-hover: #0B152B;
  --accent-secondary: #C89A3D;
  /* Versione piu' carica dell'oro, per il testo su fondo chiaro: l'oro di
     palette su crema sta a 2,5:1 di contrasto (soglia leggibilita' 4,5:1),
     questo arriva a 5,2:1 mantenendo lo stesso carattere caldo. */
  --accent-gold-deep: #8C6516;

  /* Manteniamo il bordeaux originale disponibile per elementi gia' esistenti che lo referenziano */
  --accent-legacy: #6B2737;

  --font-heading: 'Fraunces', 'Georgia', serif;
  --font-body: 'General Sans', 'Inter', -apple-system, sans-serif;

  /* ------------------------------------------------------------------
     SCALA TIPOGRAFICA
     ------------------------------------------------------------------
     Il tema originale usa misure fisse in px (h1 70/90, .sl-title 50/70)
     con un solo salto in media query sotto i 1024px: sui formati
     intermedi i titoli restano enormi. Le pagine restyled usavano gia'
     clamp() ma con valori scritti caso per caso.
     Qui la scala esiste una volta sola, in token, e tutto vi si aggancia.
     Rapporto ~1.25 tra un gradino e il successivo. */
  --fs-display: clamp(38px, 5.5vw, 60px);  /* hero */
  --fs-h1:      clamp(32px, 4.4vw, 48px);
  --fs-h2:      clamp(26px, 3.2vw, 36px);  /* titoli di sezione e di lista */
  --fs-h3:      clamp(22px, 2.6vw, 28px);
  --fs-lead:    clamp(17px, 1.4vw, 20px);  /* paragrafo di apertura */
  --fs-body:    16px;
  --fs-small:   15px;
  --fs-kicker:  12px;

  --lh-tight:   1.15;   /* titoli grandi */
  --lh-heading: 1.25;   /* titoli medi */
  --lh-body:    1.6;

  /* Ritmo verticale */
  --space-hero-top:    140px;  /* hero: sopra */
  --space-hero-bottom:  96px;  /* hero: sotto (stacco verso il contenuto) */
  --space-section:      88px;  /* respiro tra sezioni */
  --space-after-hero:   56px;  /* prima sezione subito sotto l'hero */

  /* Elevazione: tre soli gradini, deliberatamente contenuti. Un'ombra che
     deborda piu' di ~20px smette di leggersi come l'appoggio dell'elemento
     sul fondo e diventa un pannello a se'. */
  --shadow-1: 0 1px 2px rgba(20, 33, 61, 0.05);
  --shadow-2: 0 6px 16px rgba(20, 33, 61, 0.07);
  --shadow-3: 0 10px 24px rgba(20, 33, 61, 0.09);
}

/* Reset leggero per le pagine restyled, senza toccare il resto del sito */
/* .restyled non dipinge piu' il proprio fondo: lo sfondo del sito e' unico e
   sta su <body>. */
.restyled {
  background: transparent !important;
}

.restyled,
.restyled p,
.restyled li,
.restyled span,
.restyled a,
.restyled div {
  font-family: var(--font-body);
  color: var(--text-primary);
}

.restyled h1,
.restyled h2,
.restyled h3,
.restyled h4,
.restyled h5 {
  font-family: var(--font-heading);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.18;
  color: var(--text-primary);
}

.restyled .kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}

/* Icona lineare davanti al kicker: un piccolo tocco decorativo mirato,
   coerente con l'accento oro del brand. Mappata per parola-chiave nel testo
   così da adattarsi al tema della sezione senza toccare l'HTML esistente. */
.restyled .kicker::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background-color: var(--accent-secondary);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  /* Nota musicale: icona di default per contenuti Aimart */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18V5l11-2v13'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='17' cy='16' r='3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18V5l11-2v13'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='17' cy='16' r='3'/%3E%3C/svg%3E");
}

/* Accessibilità / inclusione: icona occhio */
.restyled .kicker[data-icon="accessibility"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20M12 2c2.5 2.7 4 6.2 4 10s-1.5 7.3-4 10c-2.5-2.7-4-6.2-4-10s1.5-7.3 4-10z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20M12 2c2.5 2.7 4 6.2 4 10s-1.5 7.3-4 10c-2.5-2.7-4-6.2-4-10s1.5-7.3 4-10z'/%3E%3C/svg%3E");
}

/* Bambini / età: icona pennello (percorsi creativi) */
.restyled .kicker[data-icon="kids"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.06 11.9l8.07-8.06a2.85 2.85 0 1 1 4.03 4.03l-8.06 8.08'/%3E%3Cpath d='M7.07 14.94c-1.66 0-3 1.35-3 3.02 0 1.33-2.5 1.52-2 2.02 1.08 1.1 2.49 2.02 4 2.02 2.2 0 4-1.8 4-4.04a3.01 3.01 0 0 0-3-3.02z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.06 11.9l8.07-8.06a2.85 2.85 0 1 1 4.03 4.03l-8.06 8.08'/%3E%3Cpath d='M7.07 14.94c-1.66 0-3 1.35-3 3.02 0 1.33-2.5 1.52-2 2.02 1.08 1.1 2.49 2.02 4 2.02 2.2 0 4-1.8 4-4.04a3.01 3.01 0 0 0-3-3.02z'/%3E%3C/svg%3E");
}

/* Percorso / rette / info pratiche: icona bussola */
.restyled .kicker[data-icon="path"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolygon points='16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolygon points='16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76'/%3E%3C/svg%3E");
}

/* --- Hero: titolo sitewide (Fraunces) ---
   hero.css impone .hero-title { font-family:'Poppins' } su TUTTE le pagine.
   La regola sotto (.restyled #hero.new-style) copre solo le 4 pagine con banner
   speciale, lasciando le altre ~120 pagine ancora in Poppins. Questa regola
   sitewide applica Fraunces ovunque; il colore resta gestito separatamente
   per hero fotografico (bianco su foto) vs hero testuale (scuro su chiaro),
   così da non intaccare la leggibilità sopra le immagini. */
#hero .hero-title,
#hero .next-hero-title {
  font-family: var(--font-heading) !important;
  font-weight: 500 !important;
}

#hero:not(.has-image) .hero-title,
#hero:not(.has-image) .next-hero-title,
.light-content #hero:not(.has-image) .hero-title,
.light-content #hero:not(.has-image) .next-hero-title {
  color: var(--text-primary) !important;
}

#hero.has-image .hero-title,
#hero.has-image .next-hero-title,
.light-content #hero.has-image .hero-title,
.light-content #hero.has-image .next-hero-title {
  color: #fff !important;
}

/* Sottotitolo hero (hero.css: .hero-subtitle { font-family:'Poppins' }) e
   piede hero (#hero-footer): stesso mix di font del tema originale non ancora
   sostituito, presente su tutte le pagine con hero. Uniformati al body font. */
#hero .hero-subtitle,
#hero .next-hero-subtitle,
#hero-footer {
  font-family: var(--font-body) !important;
}

/* Font residui del tema originale (Poppins/Verdana/Roboto Slab) ancora
   presenti in elementi UI generici (pulsanti, campi form, tooltip, citazioni,
   filtri portfolio, slideshow, testata commenti) sparsi in più file del tema:
   style.css, shortcodes.css, portfolio.css, showcase.css, blog.css, assets.css.
   Uniformati al font body del brand per coerenza sitewide. */
 blockquote span,
[data-tooltip]::before,
.comment-head,
#show-filters,
.slide-title,
.sl-subtitle,
input[type="text"],
input[type="search"],
textarea,
button,
.button,
a.button {
  font-family: var(--font-body) !important;
}

.slide-title {
  font-family: var(--font-heading) !important;
}

/* --- Hero --- */
.restyled #hero.new-style {
  background: radial-gradient(120% 100% at 50% 0%, #FFFFFF 0%, var(--bg-alt) 100%);
  padding: var(--space-hero-top) 0 var(--space-hero-bottom);
  min-height: auto;
}

.restyled #hero.new-style #hero-caption {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 32px;
  text-align: center;
}

.restyled #hero.new-style .hero-subtitle {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 20px;
}

.restyled #hero.new-style .hero-title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(36px, 5.5vw, 60px);
  line-height: 1.15;
  background: linear-gradient(180deg, #1E1B16, #3A352B);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 24px;
}

.restyled #hero.new-style p {
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 620px;
  margin: 0 auto;
}

.restyled #hero.new-style hr {
  display: none;
}

/* --- Sezioni generiche --- */
.restyled .section {
  padding: var(--space-section) 0;
  max-width: 1120px;
  margin: 0 auto;
  padding-left: 32px;
  padding-right: 32px;
}

.restyled .section.alt {
  background: var(--bg-alt);
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

.restyled .section.alt .section-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 32px;
}

.restyled .section-heading {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 64px;
}

.restyled .section-heading h2 {
  font-size: clamp(28px, 3.5vw, 40px);
  margin-bottom: 16px;
}

.restyled .section-heading p {
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* --- Card --- */
.restyled .card {
  background: var(--surface);
  border-radius: 4px;
  padding: 40px;
  box-shadow:
    0 1px 2px rgba(30, 27, 22, 0.04),
    0 8px 24px rgba(30, 27, 22, 0.05),
    0 24px 48px rgba(30, 27, 22, 0.04);
  transition: box-shadow 350ms ease, transform 350ms ease;
}

.restyled .card:hover {
  box-shadow:
    0 2px 4px rgba(30, 27, 22, 0.05),
    0 14px 32px rgba(30, 27, 22, 0.07),
    0 32px 64px rgba(30, 27, 22, 0.06);
  transform: translateY(-4px);
}

.restyled .card h3 {
  font-size: 24px;
  margin-bottom: 14px;
}

.restyled .card p {
  color: var(--text-secondary);
  font-size: 15.5px;
  line-height: 1.65;
}

/* Griglia iniziative (index) */
.restyled .initiatives-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

@media (max-width: 860px) {
  .restyled .initiatives-grid {
    grid-template-columns: 1fr;
  }
}

.restyled .initiative-card {
  display: block;
  background: var(--surface);
  border-radius: 4px;
  overflow: hidden;
  text-decoration: none;
  box-shadow:
    0 1px 2px rgba(30, 27, 22, 0.04),
    0 8px 24px rgba(30, 27, 22, 0.05),
    0 24px 48px rgba(30, 27, 22, 0.04);
  transition: box-shadow 350ms ease, transform 350ms ease;
}

.restyled .initiative-card:hover {
  box-shadow:
    0 2px 4px rgba(30, 27, 22, 0.05),
    0 16px 36px rgba(30, 27, 22, 0.08),
    0 36px 72px rgba(30, 27, 22, 0.07);
  transform: translateY(-6px);
}

.restyled .initiative-card .initiative-media {
  aspect-ratio: 16/10;
  background: linear-gradient(135deg, var(--bg-alt) 0%, #EAE4D6 100%);
  position: relative;
  overflow: hidden;
}

.restyled .initiative-card .initiative-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.restyled .initiative-card .initiative-body {
  padding: 36px;
}

.restyled .initiative-card .initiative-body .kicker {
  margin-bottom: 12px;
}

.restyled .initiative-card h3 {
  font-size: 26px;
  margin-bottom: 12px;
}

.restyled .initiative-card p {
  color: var(--text-secondary);
  font-size: 15.5px;
  line-height: 1.65;
  margin-bottom: 20px;
}

.restyled .initiative-card .cta-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent);
  font-weight: 600;
  font-size: 14px;
  position: relative;
}

.restyled .initiative-card .cta-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0.3);
  transform-origin: left;
  transition: transform 300ms ease;
}

.restyled .initiative-card:hover .cta-link::after {
  transform: scaleX(1);
}

/* --- Bottoni CTA --- */
.restyled .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 32px;
  border-radius: 2px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14.5px;
  text-decoration: none;
  transition: all 300ms ease;
  border: 1px solid transparent;
  cursor: pointer;
}

.restyled .btn-primary {
  background: var(--accent);
  color: #FFFFFF;
}

.restyled .btn-primary:hover {
  background: var(--accent-hover);
}

.restyled .btn-outline {
  background: transparent;
  border-color: var(--border);
  color: var(--text-primary);
}

.restyled .btn-outline:hover {
  background: var(--bg-alt);
  border-color: var(--text-tertiary);
}

.restyled .btn-row {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* --- Liste con bullet eleganti --- */
.restyled .feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 40px;
}

@media (max-width: 700px) {
  .restyled .feature-list {
    grid-template-columns: 1fr;
  }
}

.restyled .feature-list li {
  position: relative;
  padding-left: 28px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.restyled .feature-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.85;
}

/* --- Tabelle programma / corsi --- */
.restyled .program-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border-radius: 4px;
  overflow: hidden;
  box-shadow:
    0 1px 2px rgba(30, 27, 22, 0.04),
    0 8px 24px rgba(30, 27, 22, 0.05);
}

.restyled .program-table th {
  text-align: left;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: var(--bg-alt);
  padding: 16px 24px;
}

.restyled .program-table td {
  padding: 18px 24px;
  border-top: 1px solid var(--border);
  font-size: 15px;
  color: var(--text-primary);
}

.restyled .program-table td.age {
  color: var(--text-secondary);
  white-space: nowrap;
}

.restyled .program-table tbody tr:hover {
  background: var(--bg-alt);
}

/* --- Timeline (fasi progetto) --- */
.restyled .phase-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 780px;
  margin: 0 auto;
}

.restyled .phase-item {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 28px;
  padding: 36px 0;
  border-top: 1px solid var(--border);
}

.restyled .phase-item:first-child {
  border-top: none;
}

.restyled .phase-number {
  font-family: var(--font-heading);
  font-size: 40px;
  font-weight: 500;
  color: var(--accent);
  opacity: 0.85;
  line-height: 1;
}

.restyled .phase-item h3 {
  font-size: 21px;
  margin-bottom: 10px;
}

.restyled .phase-item p {
  color: var(--text-secondary);
  font-size: 15.5px;
  line-height: 1.65;
}

/* --- Info pratiche (box riepilogo) --- */
.restyled .info-box {
  background: var(--surface);
  border-radius: 4px;
  padding: 40px;
  box-shadow:
    0 1px 2px rgba(30, 27, 22, 0.04),
    0 8px 24px rgba(30, 27, 22, 0.05);
}

.restyled .info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px 40px;
}

@media (max-width: 700px) {
  .restyled .info-grid {
    grid-template-columns: 1fr;
  }
}

.restyled .info-item .info-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-secondary);
  margin-bottom: 6px;
}

.restyled .info-item .info-value {
  font-size: 17px;
  color: var(--text-primary);
  font-weight: 500;
}

/* --- Partner strip --- */
.restyled .partner-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  flex-wrap: wrap;
  padding-top: 48px;
  margin-top: 48px;
  border-top: 1px solid var(--border);
}

.restyled .partner-strip .partner-name {
  font-family: var(--font-heading);
  font-size: 19px;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
}

/* --- CTA finale --- */
.restyled .cta-final {
  text-align: center;
  padding: var(--space-section) 32px;
  /* Niente fondo proprio. Il gradiente precedente chiudeva su --bg-alt, lo
     stesso colore del footer: i due blocchi si saldavano in una sola macchia
     e il box sembrava incollato al piede della pagina. Ora il blocco sta
     sullo sfondo del sito e il fondino del footer resta l'unica chiusura. */
  background: transparent;
  margin-bottom: var(--space-section);
}

.restyled .cta-final h2 {
  font-size: clamp(28px, 3.5vw, 38px);
  margin-bottom: 18px;
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}

.restyled .cta-final p {
  color: var(--text-secondary);
  font-size: 16.5px;
  margin-bottom: 36px;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

/* --- Banner homepage "Dalla lettura alla musica" --- */
.restyled-banner {
  background: linear-gradient(135deg, var(--bg-alt, #F4F1EA) 0%, #EAE4D6 100%);
  padding: 80px 32px;
}

.restyled-banner .banner-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 40px;
}

@media (max-width: 760px) {
  .restyled-banner .banner-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

.restyled-banner .kicker {
  display: inline-block;
  font-family: 'General Sans', 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent, #6B2737);
  margin-bottom: 14px;
}

.restyled-banner h3 {
  font-family: 'Fraunces', 'Georgia', serif;
  font-weight: 500;
  font-size: clamp(24px, 3vw, 32px);
  color: var(--text-primary, #1E1B16);
  margin-bottom: 12px;
  line-height: 1.2;
}

.restyled-banner p {
  font-family: 'General Sans', 'Inter', sans-serif;
  color: var(--text-secondary, #6B675E);
  font-size: 15.5px;
  line-height: 1.6;
  max-width: 560px;
}

/* --- Responsive hero/section spacing --- */
@media (max-width: 700px) {
  .restyled #hero.new-style {
    padding: 120px 0 80px;
  }
  .restyled .section {
    padding: 72px 0;
  }
  .restyled .section.alt .section-inner {
    padding: 72px 24px;
  }
  .restyled .card,
  .restyled .info-box {
    padding: 28px;
  }
  .restyled .phase-item {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* Rispetto prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .restyled .card,
  .restyled .initiative-card,
  .restyled .btn {
    transition: none !important;
  }
}

/* ==========================================================================
   FAQ — Accordion
   ========================================================================== */

.restyled .faq-list {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.restyled .faq-category {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 48px 0 18px;
}

.restyled .faq-category:first-child {
  margin-top: 0;
}

.restyled .faq-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.25s ease;
}

.restyled .faq-item:hover {
  border-color: var(--accent);
}

.restyled .faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 26px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.4;
}

.restyled .faq-question .faq-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  position: relative;
}

.restyled .faq-question .faq-icon::before,
.restyled .faq-question .faq-icon::after {
  content: '';
  position: absolute;
  background: var(--accent);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.restyled .faq-question .faq-icon::before {
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  transform: translateY(-50%);
}

.restyled .faq-question .faq-icon::after {
  top: 0;
  left: 50%;
  width: 2px;
  height: 100%;
  transform: translateX(-50%);
}

.restyled .faq-item.open .faq-question .faq-icon::after {
  opacity: 0;
  transform: translateX(-50%) rotate(90deg);
}

.restyled .faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

.restyled .faq-answer-inner {
  padding: 0 26px 24px;
  color: var(--text-secondary);
  font-size: 15.5px;
  line-height: 1.65;
}

.restyled .faq-answer-inner p {
  margin: 0 0 12px;
}

.restyled .faq-answer-inner p:last-child {
  margin-bottom: 0;
}

.restyled .faq-answer-inner a {
  color: var(--accent);
  text-decoration: underline;
}

.restyled .faq-intro {
  max-width: 640px;
  margin: 0 auto 56px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 16.5px;
  line-height: 1.65;
}

@media (max-width: 700px) {
  .restyled .faq-question {
    padding: 18px 20px;
    font-size: 16.5px;
  }
  .restyled .faq-answer-inner {
    padding: 0 20px 20px;
    font-size: 15px;
  }
  .restyled .faq-category {
    margin: 36px 0 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .restyled .faq-item,
  .restyled .faq-answer,
  .restyled .faq-question .faq-icon::before,
  .restyled .faq-question .faq-icon::after {
    transition: none !important;
  }
}

/* ==========================================================================
   ESTENSIONE SITEWIDE — Font, palette chiara e menu vetro su tutte le pagine
   Applicato globalmente (non solo a .restyled), con eccezione per le hero
   fotografiche a piena pagina dove serve testo bianco sopra l'immagine.
   ========================================================================== */

/* Font sitewide */
body {
  font-family: var(--font-body);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
}

/* Palette chiara sitewide: testo scuro di default ovunque nel body,
   incluse le zone marcate "light-content" dal vecchio tema (pensate per
   sfondi scuri). L'eccezione (testo bianco) resta attiva SOLO dentro
   l'area hero fotografica in cima pagina, delimitata da #hero-image-wrapper
   e dal blocco #hero stesso, dove la foto di sfondo giustifica il testo chiaro. */
.light-content h1,
.light-content h2,
.light-content h3,
.light-content h4,
.light-content h5,
.light-content h6,
.light-content p,
.light-content li,
.light-content span:not([data-hover]) {
  color: var(--text-primary);
}

.light-content p {
  color: var(--text-secondary);
}

/* Eccezione: dentro l'hero fotografico (#hero.has-image) e nell'header/menu
   (header) il testo resta bianco/chiaro per leggibilità sopra la foto di
   sfondo o sopra lo sfondo scuro del menu prima dello scroll. Bianco
   esplicito (non "inherit") perché il tema stesso usa "inherit" a catena e
   altrimenti il colore risalirebbe fino al grigio di default del body.
   Limitato a .has-image: alcune pagine (es. index.html) usano un #hero
   puramente testuale, senza foto, che ora siede sullo sfondo beige chiaro
   e deve quindi restare con testo scuro (vedi regola successiva). */
#hero.has-image,
#hero.has-image * {
  color: #fff;
}

/* #hero senza immagine di sfondo: siede sullo sfondo chiaro della pagina,
   quindi il testo deve restare scuro/navy come il resto dei contenuti. */
#hero:not(.has-image),
#hero:not(.has-image) * {
  color: var(--text-primary);
}

/* Sfondo mesh gradient: prima era applicato solo su #hero (quindi visibile
   solo nella prima schermata della pagina). Il tema usa uno scroll virtuale
   (Scrollbar.js): #page-content e #content-scroll restano fissi all'altezza
   del viewport mentre #main (il vero contenuto, alto quanto la pagina
   intera) viene traslato dentro di essi. Il mesh va quindi su #main, non su
   #page-content, altrimenti resterebbe visivamente ancorato solo alla prima
   schermata. Le macchie sono ripetute ogni ~1000px in verticale
   (background-size fisso, non percentuale sull'altezza totale) cosi restano
   leggibili come macchie distinte anche su pagine lunghe migliaia di pixel,
   invece di stirarsi in un'unica sfumatura piatta e diluita. #hero resta
   trasparente cosi il mesh del contenitore sottostante traspare in ogni
   sezione, incluse le pagine iniziative-speciali dove l'hero vive dentro un
   .white-section-container con padding laterale (da cui il gradiente
   appariva piu stretto della pagina): ora il mesh e sul contenitore
   full-width #main, non sull'hero. Nessun impatto sugli hero fotografici
   (.has-image), che restano scuri con foto. */
/* --------------------------------------------------------------------------
   SFONDO UNICO DEL SITO
   --------------------------------------------------------------------------
   Prima ogni livello dipingeva il proprio fondo con valori diversi (main
   #F7F2E7, le .vc_row via data-bgcolor #F1EADA/#F7F2E7/#fff applicati allo
   scroll dal JS del tema, .restyled #F7F2E7, il banner un gradiente
   #F1EADA->#EAE4D6): panna tutti, ma abbastanza diversi da produrre linee
   di stacco orizzontali nette ai bordi delle sezioni.

   Ora il fondo esiste in UN SOLO punto, su <body>, e tutti i contenitori
   sopra sono trasparenti: senza bordi non esistono stacchi possibili.
   Il wash e' un mesh di macchie radiali molto diluite ispirato alle
   locandine Aimart: note fredde (verde acqua/salvia) a sinistra, calde
   (crema, albicocca, oro) a destra, un velo navy in basso a chiudere.
   Le macchie hanno raggi deliberatamente diversi (dal 18% al 72%) e opacita'
   basse (0.045-0.20): tre neutre navy fanno da ombre morbide e danno
   profondita', le altre portano il colore. L'effetto cercato e' quello di
   una carta stampata con ombreggiature leggere, non di un fondo colorato.

   background-attachment: fixed + size 100% 100% = il wash copre esattamente
   il viewport, non si ripete e non scorre: nessuna cucitura anche su pagine
   lunghe migliaia di pixel. Va su <body> e non su #main perche' il tema usa
   uno scroll virtuale che trasla #main con una transform, e una transform
   rompe il posizionamento fixed dello sfondo. */
html {
  background-color: var(--bg-primary);
}

body {
  background-color: var(--bg-primary) !important;
  background-image:
    /* ombre morbide, neutre: danno profondita' senza colorare */
    radial-gradient(38% 30% at 12% 22%,  rgba(20, 33, 61, 0.055) 0%, rgba(20, 33, 61, 0) 100%),
    radial-gradient(46% 34% at 72% 58%,  rgba(20, 33, 61, 0.045) 0%, rgba(20, 33, 61, 0) 100%),
    radial-gradient(30% 24% at 92% 92%,  rgba(20, 33, 61, 0.05)  0%, rgba(20, 33, 61, 0) 100%),
    /* note fredde a sinistra (verde acqua / salvia delle locandine) */
    radial-gradient(26% 20% at 6% 8%,    rgba(118, 172, 166, 0.16) 0%, rgba(118, 172, 166, 0) 100%),
    radial-gradient(58% 46% at 18% 54%,  rgba(140, 184, 166, 0.10) 0%, rgba(140, 184, 166, 0) 100%),
    /* note calde a destra (crema, albicocca, oro) */
    radial-gradient(34% 26% at 88% 12%,  rgba(232, 196, 142, 0.20) 0%, rgba(232, 196, 142, 0) 100%),
    radial-gradient(72% 58% at 78% 34%,  rgba(230, 190, 150, 0.12) 0%, rgba(230, 190, 150, 0) 100%),
    radial-gradient(24% 18% at 62% 88%,  rgba(200, 154, 61, 0.14) 0%, rgba(200, 154, 61, 0) 100%),
    radial-gradient(64% 52% at 96% 70%,  rgba(200, 154, 61, 0.08) 0%, rgba(200, 154, 61, 0) 100%) !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  background-position: center center !important;
  background-attachment: fixed !important;
}

/* Tutti i contenitori di pagina trasparenti, cosi' il wash del body traspare
   ovunque. !important anche perche' il JS del tema (scripts.js) riscrive
   inline il background-color di "main" e "#main-content.solid-color" allo
   scroll leggendo i data-bgcolor delle sezioni. */
#main,
main,
#main-content,
#main-content.solid-color,
#main-page-content,
#page-content,
#content-scroll,
.cd-main-content,
.restyled,
.vc_row,
.vc_row[data-bgcolor],
.white-section,
.dark-section {
  background-color: transparent !important;
  background-image: none !important;
}

#main {
  position: relative;
}

#hero:not(.has-image),
#hero.new-style:not(.has-image),
.restyled #hero.new-style:not(.has-image),
.white-section-container:has(#hero:not(.has-image)),
.white-section-wrapper:has(#hero:not(.has-image)) {
  background-color: transparent !important;
  background-image: none !important;
}

/* Bianco di default pre-scroll SOLO quando l'hero ha davvero una foto di
   sfondo (altrimenti l'header e' gia' su sfondo chiaro fin dall'inizio e
   deve restare navy, vedi regola sulle voci di menu piu' sotto). */
#page-content:has(#hero.has-image) header:not(.menu-scrolled),
#page-content:has(#hero.has-image) header:not(.menu-scrolled) * {
  color: #fff;
}

/* Sezioni ex-scure convertite: garantiamo comunque testo leggibile anche
   se in futuro restano data-bgcolor chiari senza classe white-section */
.vc_row[data-bgcolor] {
  color: var(--text-primary);
}

.vc_row[data-bgcolor] p {
  color: var(--text-secondary);
}

/* Elementi con effetto hover (data-hover) che il tema colora di bianco per
   default — vanno riportati al colore testo scuro OVUNQUE FUORI dall'hero
   fotografico (#hero) e dall'header, dove invece il bianco resta corretto */
.light-content .button-text,
.light-content .button-text span,
.light-content .button-text b,
.light-content .page-title span,
.light-content .next-hero-subtitle,
.light-content .next-hero-title,
.light-content .next-page-title {
  color: var(--text-primary);
}

/* Il tema forza colore bianco su TUTTI i link (<a>) dentro light-content,
   pensato per sfondi scuri. Fuori dall'hero/header va riportato allo scuro,
   così che elementi come <b> ereditino il navy invece del bianco del tema. */
.light-content a {
  color: var(--accent);
}

/* (La regola che dipingeva "main" di panna pieno e' stata rimossa: lo sfondo
   ora vive solo su <body>, vedi "SFONDO UNICO DEL SITO" piu' sopra.) */

/* ==========================================================================
   MENU CON EFFETTO VETRO ALLO SCROLL (glassmorphism)
   Si applica quando la libreria smooth-scrollbar (o lo scroll nativo di
   fallback) supera una soglia; la classe .menu-scrolled viene aggiunta via
   JS in js/scripts.js agganciandosi al callback della Scrollbar.
   ========================================================================== */

header.classic-menu {
  transition: background-color 0.4s ease, backdrop-filter 0.4s ease, box-shadow 0.4s ease;
}

header.classic-menu.menu-scrolled {
  background-color: rgba(247, 242, 231, 0.9) !important;
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 1px 0 rgba(20, 33, 61, 0.08), 0 8px 24px rgba(20, 33, 61, 0.06);
}

/* Scambio logo quando l'header prende il fondino chiaro.
   Il tema NON scambia i due loghi con display ma con l'opacity (il bianco e'
   in position:absolute sopra il nero), e li pilota da classi legate alla
   sezione sotto lo scroll (.white-header, .over-white-section): il nero
   tornava visibile solo una volta usciti dall'area hero, non appena
   compariva il fondino. Nel frattempo il bianco era gia' nascosto e il nero
   ancora a opacity:0 da ".light-content #logo img.black-logo": sulla fascia
   chiara non si vedeva alcun logo.
   Qui agiamo sulla stessa proprieta' che usa il tema, cosi' lo scambio resta
   una dissolvenza e non un salto, e con !important per superare le regole
   .white-header/.over-white-section che hanno specificita' piu' alta. */
header.classic-menu #logo img.black-logo,
header.classic-menu #logo img.white-logo {
  transition: opacity 0.4s ease;
}

header.classic-menu.menu-scrolled #logo img.white-logo {
  opacity: 0 !important;
}

header.classic-menu.menu-scrolled #logo img.black-logo {
  opacity: 1 !important;
  display: inline-block !important;
}

header.classic-menu.menu-scrolled .flexnav > li > a,
header.classic-menu.menu-scrolled .flexnav > li > a span {
  color: var(--text-primary) !important;
}

/* Overlay di transizione tra pagine (tema originale): sfondo scuro puro (#171717)
   sostituito con la palette chiara per non stonare quando resta visibile
   prima che il JS di navigazione lo animi/nasconda. */
.next-project-image-wrapper {
  /* Il pannello a tutto schermo dietro la transizione con zoom fra le pagine.
     Deve essere ESATTAMENTE lo sfondo del sito: era --bg-alt (#F1EADA), un
     gradino piu' scuro di --bg-primary (#F7F2E7), e a ogni cambio pagina si
     vedeva un guizzo di tono. Con lo stesso colore la pagina sembra
     allontanarsi sulla stessa carta invece di attraversare un lampo. */
  background-color: var(--bg-primary) !important;
}

/* Sottomenu a tendina del menu principale (tema originale: sfondo nero fisso
   #000, non pilotato da data-bgcolor). Convertito alla palette chiara per
   coerenza col resto del redesign; testo scuro leggibile sul nuovo sfondo. */
.classic-menu .flexnav li ul,
.classic-menu .flexnav ul li ul li a,
.classic-menu .flexnav ul li ul li ul li a {
  background: var(--surface) !important;
}

/* Ombra sotto il pannello del sottomenu, per staccarlo visivamente dal
   contenuto sottostante (richiesta esplicita). */
.classic-menu .flexnav li ul {
  box-shadow: 0 12px 28px rgba(20, 33, 61, 0.18) !important;
}

/* Font dei link nel sottomenu: +2px rispetto all'originale (13px -> 15px). */
.flexnav li ul li a {
  font-size: 15px !important;
}

.flexnav li ul:after,
.flexnav ul li ul:after {
  border-color: transparent transparent var(--surface) !important;
}

.classic-menu .flexnav li ul li a,
.classic-menu .flexnav li ul li a span,
.classic-menu .flexnav li ul li a div {
  color: var(--text-primary) !important;
}

.classic-menu .flexnav li ul li a:hover {
  color: var(--accent-secondary) !important;
}

/* Logo header: il tema mostra di default il logo bianco (pensato per hero
   fotografico scuro) e lo scambia con lo scuro solo dopo che ScrollMagic
   rileva una sezione .change-header-color (o dopo lo scroll, via
   .menu-scrolled). Le pagine con #hero senza foto (sfondo chiaro fin da
   subito) devono invece mostrare il logo scuro già allo stato iniziale. */
header.classic-menu:has(~ * #hero:not(.has-image)) #logo img.black-logo,
#page-content:has(#hero:not(.has-image)) header.classic-menu #logo img.black-logo {
  opacity: 1 !important;
}

#page-content:has(#hero:not(.has-image)) header.classic-menu #logo img.white-logo {
  opacity: 0 !important;
}

/* Icona menu mobile (burger): stesso problema del logo — di default bianca
   (pensata per hero fotografico scuro) e diventa scura solo dopo lo scroll
   trigger .change-header-color. Sulle pagine con hero testuale (sfondo
   chiaro fin da subito) deve essere scura già allo stato iniziale. */
#page-content:has(#hero:not(.has-image)) .button-icon {
  color: var(--text-primary) !important;
}

/* Tutte le altre icone/freccette dei pulsanti (style.css: .light-content
   .button-icon { color:#fff }) sono bianche di default ovunque nel sito,
   pensate per sezioni a sfondo scuro. Verificato: ogni data-bgcolor reale
   sitewide è chiaro (nessuna sezione ha davvero sfondo scuro, "dark-section"
   è solo un nome di classe residuo del tema). Le icone devono quindi essere
   sempre scure, in ogni punto della pagina, non solo nell'hero. */
.light-content .button-icon,
.light-content .change-header-color .button-icon {
  color: var(--text-primary) !important;
}

.light-content .button-icon i.fa {
  color: var(--text-primary) !important;
}

/* I 3 puntini del burger sono span con background-color (non color) --
   stessa correzione mirata al selettore reale che il tema usa. */
#page-content:has(#hero:not(.has-image)) #menu-burger span {
  background-color: var(--text-primary) !important;
}

/* Lista eventi (.team-member, shortcodes.css): il tema imposta testo
   bianco per .light-content (pensato per sfondo scuro). L'intero sito è
   ora su sfondo chiaro, quindi questa regola va sempre sovrascritta con
   il colore testo scuro del brand. */
.light-content .team-member,
.light-content .team-member span {
  color: var(--text-primary) !important;
}

/* Preloader iniziale (style.css, sezione "03. Page Preloader"): il tema
   originale lo disegna sempre nero (background:#000, testo #fff), pensato
   per un sito a tema scuro. Il nuovo sito è chiaro: il preloader deve
   usare lo sfondo panna e il testo blu navy del brand, sia nella variante
   base che in quella .light-content (presente su ogni pagina). */
.preloader-wrap,
.light-content.preloader-wrap {
  background: var(--bg-primary) !important;
}

.percentage-intro,
.percentage,
.percentag1e::after,
.light-content .percentage,
.light-content .percentage:after,
.light-content .percentage-intro {
  color: var(--text-primary) !important;
}

.loadbar,
.light-content .loadbar {
  background: var(--accent-secondary) !important;
}

.hold-progress-bar,
.light-content .hold-progress-bar {
  background: var(--text-primary) !important;
}

.preloader-intro,
.light-content .preloader-intro {
  color: var(--text-primary) !important;
}

/* Voci del menu principale (.flexnav li a, style.css). Comportamento voluto:
   - Sopra un hero fotografico (#hero.has-image), prima dello scroll: menu
     BIANCO per contrasto sulla foto (l'header non ha ancora sfondo).
   - Appena l'header prende lo sfondo chiaro allo scroll (.menu-scrolled),
     o su pagine senza foto in hero (sfondo chiaro fin da subito): menu NAVY.
   - La voce attiva (.nav-current) resta SEMPRE oro, in entrambi gli stati
     (regola dedicata piu' sotto, con specificita' piu' alta).

   Di default (nessuna foto in hero) il menu e' navy sempre, perche' l'header
   sta su sfondo chiaro fin dall'inizio. Su #hero.has-image invece si parte
   bianco e si passa a navy solo con .menu-scrolled. */
.flexnav li a,
.classic-menu .flexnav li a,
.flexnav li a *,
.classic-menu .flexnav li a * {
  color: var(--text-primary) !important;
}

#page-content:has(#hero.has-image) header.classic-menu:not(.menu-scrolled) .flexnav li a,
#page-content:has(#hero.has-image) header.classic-menu:not(.menu-scrolled) .flexnav li a * {
  color: #fff !important;
}

.light-content .flexnav li:hover a,
.light-content .classic-menu .flexnav:hover li a,
.light-content .classic-menu.white-header .flexnav:hover li a,
#page-content:has(#hero.has-image) header.classic-menu:not(.menu-scrolled) .flexnav li:hover a {
  color: var(--accent-secondary) !important;
}

/* Sezione di menu attiva (10.): oro + sottolineatura sempre visibile sulla
   voce che corrisponde alla pagina corrente (classe "nav-current" aggiunta
   da js/restyling.js), oro + sottolineatura anche on-hover per tutte le
   altre voci. La sottolineatura usa un pseudo-elemento cosi' non sposta il
   testo e resta ancorata sotto la label, non sotto l'intera area cliccabile. */
.flexnav > li > a {
  position: relative;
  display: inline-block;
}
.flexnav > li > a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 2px;
  background: var(--accent-secondary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
.flexnav > li:hover > a::after,
.flexnav > li.nav-current > a::after {
  transform: scaleX(1);
}
.flexnav > li.nav-current > a,
.flexnav > li.nav-current > a *,
.classic-menu .flexnav > li.nav-current > a,
.classic-menu .flexnav > li.nav-current > a *,
header.classic-menu.menu-scrolled .flexnav > li.nav-current > a,
header.classic-menu.menu-scrolled .flexnav > li.nav-current > a span,
header.classic-menu.menu-scrolled .flexnav > li.nav-current > a *,
#page-content:has(#hero.has-image) header.classic-menu:not(.menu-scrolled) .flexnav > li.nav-current > a,
#page-content:has(#hero.has-image) header.classic-menu:not(.menu-scrolled) .flexnav > li.nav-current > a * {
  color: var(--accent-secondary) !important;
}

/* Testo a scorrimento (.content-marquee, shortcodes.css): il tema lo imposta
   sempre bianco su .light-content (presente su ogni pagina), pensato per
   scorrere sopra un'immagine scura. In index.html scorre invece sopra una
   sezione a sfondo chiaro (data-bgcolor #F7F2E7) e risultava illeggibile
   (bianco su crema). Nessuna pagina del sito lo usa sopra una foto scura,
   quindi va reso sempre scuro. */
.light-content .content-marquee {
  color: var(--text-primary) !important;
}



/* Paragrafi con classe .bigger (style.css): il tema li imposta bianchi
   quando dentro .light-content (presente su ogni pagina, sempre) o
   .change-header-color, pensati per stare sopra foto scure. Verificato che
   questa classe non compare mai dentro #hero (area fotografica): è sempre
   usata nel corpo dei contenuti, sotto l'hero, su sfondo chiaro. Corretto
   sitewide senza eccezioni, come per le voci del menu. */
.bigger,
.light-content .bigger,
.change-header-color .bigger {
  color: var(--text-primary) !important;
}

/* style.css impone .light-content b/strong sempre bianchi (regola pensata
   per hero fotografici scuri), ma .light-content e' presente su quasi
   tutte le pagine, anche fuori da qualsiasi area con foto - risultato:
   ogni <b>/<strong> dentro un paragrafo su sfondo chiaro (gradiente
   beige, sezioni bianche) restava bianco e illeggibile mentre il testo
   normale intorno era gia' stato corretto in navy. Riportiamo b/strong a
   navy come default sitewide; l'unica eccezione legittima resta il testo
   sopra foto scure, gestito puntualmente qui sotto. */
.light-content b,
.light-content strong,
.change-header-color b,
.change-header-color strong {
  color: var(--text-primary) !important;
}

/* Eccezione: dentro l'area hero quando ha davvero una foto di sfondo,
   oppure dentro overlay scuri espliciti, il grassetto deve restare
   bianco per restare leggibile sopra l'immagine. */
#hero.has-image b,
#hero.has-image strong,
.has-image .hero-title b,
.has-image .hero-title strong,
.dark-overlay b,
.dark-overlay strong {
  color: #fff !important;
}

/* Il tema originale era scuro: ".light-content" segnava testo bianco su
   sfondo scuro, e solo dentro un ".white-section" esplicito il tema
   invertiva i colori a nero. Il restyling ha reso chiaro lo sfondo di
   TUTTA la pagina, ma la classe .light-content e' rimasta su quasi ogni
   pagina (115/125) senza che ogni sezione avesse anche ".white-section" -
   risultato: titoli, elenchi, link, testo negli accordion e altri elementi
   restavano bianchi e illeggibili sul nuovo sfondo chiaro. Riportiamo tutti
   questi elementi a navy come default sitewide; l'eccezione resta solo
   dentro l'hero quando ha davvero una foto (.has-image) o dentro un
   overlay scuro esplicito. */
.light-content h1,
.light-content h2,
.light-content h3,
.light-content h4,
.light-content h5,
.light-content h6,
.light-content li,
.light-content a,
.light-content blockquote,
.light-content blockquote cite,
.light-content blockquote small,
.light-content .accordion dt span,
.light-content .accordion .accordion-content,
.light-content .team-member,
.light-content .team-member span,
.light-content .clapat-icon,
.light-content a.link {
  color: var(--text-primary) !important;
}

.light-content .accordion {
  border-top-color: var(--border-color, #d8d0c0) !important;
  border-bottom-color: var(--border-color, #d8d0c0) !important;
}

/* Dentro l'hero fotografico o overlay scuri, i colori chiari restano
   corretti: qui ripristiniamo il bianco per gli stessi elementi. */
#hero.has-image h1,
#hero.has-image h2,
#hero.has-image h3,
#hero.has-image h4,
#hero.has-image h5,
#hero.has-image h6,
#hero.has-image a,
.light-content.dark-overlay h1,
.light-content.dark-overlay h2,
.light-content.dark-overlay h3,
.light-content.dark-overlay h4,
.light-content.dark-overlay h5,
.light-content.dark-overlay h6,
.light-content.dark-overlay li,
.light-content.dark-overlay a,
.dark-overlay h1,
.dark-overlay h2,
.dark-overlay h3,
.dark-overlay h4,
.dark-overlay h5,
.dark-overlay h6,
.dark-overlay li,
.dark-overlay a {
  color: #fff !important;
}

/* Il pulsante pieno .btn-primary (sfondo navy, definito piu' sopra in
   questo stesso file) e' un <a> - la regola generica ".light-content a"
   (specificita' 0,2,0: due classi) qui sopra batteva un semplice
   ".btn-primary" (specificita' 0,1,0: una classe) anche con !important su
   entrambe, riportandolo a testo navy identico al suo stesso sfondo navy
   e rendendolo illeggibile (es. "Scopri il progetto"). Serve specificita'
   pari o superiore: ripetiamo la classe per salire a 0,2,0+ in ogni
   combinazione plausibile di contenitore. I pulsanti a sfondo pieno
   devono sempre restare con testo bianco, ovunque si trovino. */
.btn-primary,
.btn-primary *,
.light-content .btn-primary,
.light-content .btn-primary *,
a.btn-primary,
a.btn-primary * {
  color: #fff !important;
}

/* Il tema originale presuppone .light-content = testo chiaro su sfondo
   scuro: i campi del modulo di contatto (nome/email/richiesta) e i loro
   placeholder venivano forzati bianchi (style.css / shortcodes.css). Sul
   nuovo sfondo chiaro il testo digitato e il placeholder restano
   invisibili (bianco su beige). Stesso pattern gia' risolto per
   b/strong, h1-h6, li, a: qui lo correggiamo per gli input di form. */
.light-content input[type="text"],
.light-content input[type="email"],
.light-content input[type="tel"],
.light-content input[type="search"],
.light-content textarea {
  color: var(--text-primary) !important;
  border-bottom-color: var(--border-color, #d8d0c0) !important;
}
.light-content ::placeholder {
  color: var(--text-muted, #7A7974) !important;
  opacity: 1 !important;
}
.light-content :-ms-input-placeholder {
  color: var(--text-muted, #7A7974) !important;
}

/* Il footer (nero, testo bianco) e' pensato dal tema per ricevere il suo
   sfondo da uno style inline "background-color:#222222" scritto pagina per
   pagina - il CSS del tema non definisce mai un default. 119 delle 125
   pagine del sito non hanno quello style inline (probabilmente perso in
   un export), quindi il loro footer restava trasparente: con lo sfondo
   scuro originale del tema non si notava, ma con il nuovo sfondo chiaro
   il footer lasciava intravedere il gradiente sottostante e il testo
   bianco ("Back Top", copyright) diventava quasi invisibile. Fissiamo lo
   sfondo nero qui una volta per tutte, sitewide. */
footer.hidden {
  /* Era #222 nero: retaggio del tema scuro. Ora il footer non ha fondo
     proprio e siede sullo sfondo unico del sito (vedi "SFONDO UNICO DEL
     SITO"); i testi del footer erano gia' impostati in navy, coerenti con
     un piede chiaro. Lo style inline "background-color:#222222" presente su
     alcune pagine viene neutralizzato qui. */
  background-color: transparent !important;
}

/* Il pulsante "Back Top" nel footer riusa la stessa struttura .button-text
   dei pulsanti hover altrove nel sito, che la regola sopra (poco piu' in
   alto nel file) riporta a navy per leggibilita' sullo sfondo chiaro.
   Dentro il footer pero' lo sfondo e' sempre nero (#222), quindi qui il
   testo del pulsante deve restare bianco come il resto del footer. */
footer.hidden .button-text,
footer.hidden .button-text span,
footer.hidden .button-text b,
footer .footer-flat-backtotop,
footer .footer-flat-backtotop * {
  color: var(--text-primary) !important;
}

/* Le sezioni "vc_row" impostano dinamicamente via JS un background-color
   inline chiaro/opaco sul loro .white-section-wrapper / .dark-section-wrapper
   (full-width, avvolge ogni riga di contenuto). Essendo opachi coprono
   interamente il mesh gradient su #main sottostante, cosi il gradiente
   spariva non appena iniziava una nuova sezione (es. form contatti). Resi
   trasparenti per lasciar trasparire il mesh sitewide; il colore di sfondo
   di base resta comunque quello di #main (--bg-primary). */
.white-section-wrapper,
.dark-section-wrapper {
  background-color: transparent !important;
}

/* accademia.html conteneva un intero paragrafo (594 caratteri, sul "Nucleo
   di Valutazione") marcato per errore come <h5 class="has-mask big-title">
   - lo stesso tag usato sitewide per i sottotitoli brevi in Fraunces
   (serif). Risultato: un lungo blocco di testo discorsivo veniva reso
   interamente in font serif invece del sans-serif body, contro la regola
   "graziato solo per i titoli". Convertito in HTML in un <p
   class="big-title-text">; qui gli diamo lo stile giusto di paragrafo
   body (sans-serif, dimensione testo, interlinea leggibile). */
.big-title-text {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.6;
  font-weight: 400;
  color: var(--text-primary);
}

/* Stesso pattern sistemico degli altri fix: il tema imposta
   ".light-content .button-icon { color:#fff }" perche' presuppone sfondo
   scuro. Sono le icone a freccia dentro ai cerchi dei link "Guarda la
   gallery", "Scopri il progetto", ecc: sul nuovo sfondo chiaro restano
   bianco su beige, invisibili. Anche il footer e' ora chiaro (vedi "SFONDO UNICO DEL SITO"), quindi
   "Back to Top" segue la stessa regola navy. */
.light-content .button-icon {
  color: var(--text-primary) !important;
}
#backtotop .button-icon,
footer .button-icon {
  color: var(--text-primary) !important;
}
.light-content .icon-wrap svg,
.light-content .icon-wrap svg * {
  fill: var(--text-primary) !important;
  stroke: var(--text-primary) !important;
}
#backtotop .icon-wrap svg,
#backtotop .icon-wrap svg *,
footer .icon-wrap svg,
footer .icon-wrap svg * {
  fill: var(--text-primary) !important;
  stroke: var(--text-primary) !important;
}
/* I cerchietti che circondano queste icone (border sottile) erano pensati
   per un contorno chiaro su sfondo scuro: sul beige devono usare lo
   stesso navy/muted, altrimenti il cerchio stesso risulta invisibile. */
.light-content .icon-wrap {
  border-color: var(--text-primary) !important;
}
#backtotop .icon-wrap,
footer .icon-wrap {
  border-color: var(--border) !important;
}

/* Cursore personalizzato ("#ball", il cerchio con la crocetta/freccia che
   segue il mouse sui link, immagini cliccabili, gallery): il tema lo
   disegna sempre bianco ("#ball i { color:#fff }") perche' pensato per
   apparire sopra a sfondi scuri o overlay semi-trasparenti scuri. Sul
   nuovo sfondo chiaro diventa invisibile. Il tema predispone una classe
   "dark-icon" per il caso opposto ma non la applica mai dinamicamente,
   quindi forziamo qui il colore leggibile in ogni caso. */
#ball i,
#ball p,
.light-content #ball i,
.light-content #ball p,
#ball.over-movie i,
.light-content #ball.with-icon i {
  color: var(--text-primary) !important;
}

/* Stesso pattern anche sulla freccia diagonale generata via ::after su
   ".next-hero-title" (i link tipo "Contattaci \u2198" a fondo pagina, e i
   titoli con richiamo alla pagina successiva): il tema la rende bianca
   con ".light-content .next-hero-title::after { color:#fff }". */
.light-content .next-hero-title::after,
.next-hero-title::after {
  color: var(--text-primary) !important;
}
.light-content .page-title {
  color: var(--text-primary) !important;
}

/* Corsi Triennali hero: foto chiara (tastiera avorio), testo bianco illeggibile.
   Overlay scuro mirato solo su questa immagine di sfondo specifica, applicato
   tramite background-blend-mode direttamente sull'elemento (piu' affidabile
   di uno pseudo-elemento su questo layout). */
#hero-bg-image[style*="diploma_I-livello.jpg"] {
  background-image: linear-gradient(
    rgba(20, 33, 61, 0.72),
    rgba(20, 33, 61, 0.72)
  ), url("../images/corsi/diploma_I-livello.jpg") !important;
  background-size: cover !important;
  background-position: center center !important;
}

/* ==========================================================================
   HOME/HEADER — Richieste 2026-09-15
   ========================================================================== */

/* 1. Riga verticale divisoria tra il menu e la voce English */
.classic-menu .flexnav li.buy-item {
  position: relative;
  margin-left: 24px;
  padding-left: 24px;
}
.classic-menu .flexnav li.buy-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 18px;
  background: var(--text-primary);
  opacity: 0.35;
}

/* 2. Voci di menu +2px (12px -> 14px) */
.classic-menu .flexnav li a {
  font-size: 14px !important;
}

/* 3. Logo +10% (50px -> 55px), allineato a meta' altezza dell'header */
#header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#logo {
  top: 0 !important;
  display: flex;
  align-items: center;
}
#logo img {
  height: 55px !important;
}
nav {
  display: flex;
  align-items: center;
}

/* 4. Menu mobile: sfondo navy, voci bianche, hover oro, voce attiva oro */
nav.open,
header.classic-menu nav.open,
#app.active,
#app {
  background-color: var(--text-primary) !important;
}
nav.open .flexnav li a,
nav.open .flexnav li a span,
nav.open .flexnav li a div,
nav.open .flexnav li ul li a {
  color: #fff !important;
}
nav.open .flexnav li a:hover,
nav.open .flexnav li a:hover span,
nav.open .flexnav li:hover a,
nav.open .flexnav li:hover a span,
nav.open .flexnav li ul li a:hover {
  color: var(--accent-secondary) !important;
}
nav.open .flexnav li a.active,
nav.open .flexnav li a.active span,
nav.open .flexnav li.active a,
nav.open .flexnav li.active a span,
nav.open .flexnav li ul li a.active {
  color: var(--accent-secondary) !important;
}
/* Logo bianco quando l'header e' in stato "menu aperto" (over-sidebar), per restare leggibile sul nuovo sfondo navy.
   Deve vincere anche sulla regola piu' in alto per le pagine con #hero senza foto (:has(...)),
   quindi ripetiamo qui lo stesso pattern di selettore per pareggiare la specificita' e sfruttare l'ordine. */
header.classic-menu.over-sidebar #logo img.black-logo,
header.classic-menu.over-sidebar:has(~ * #hero:not(.has-image)) #logo img.black-logo,
#page-content:has(#hero:not(.has-image)) header.classic-menu.over-sidebar #logo img.black-logo {
  opacity: 0 !important;
}
header.classic-menu.over-sidebar #logo img.white-logo,
header.classic-menu.over-sidebar:has(~ * #hero:not(.has-image)) #logo img.white-logo,
#page-content:has(#hero:not(.has-image)) header.classic-menu.over-sidebar #logo img.white-logo {
  opacity: 1 !important;
}

/* 5. "Guarda la gallery" e tutti i banner di fine pagina: font dei titoli */
.hero-title,
.next-hero-title,
.page-title {
  font-family: var(--font-heading) !important;
}

/* 6. Rimozione riferimento logo partner BNL (l'elemento HTML va tolto manualmente;
   questa regola è una rete di sicurezza nel caso rimanga un riferimento residuo) */
img[src*="partner-01.png"] {
  display: none !important;
}
img[src*="partner-01.png"] + p,
li:has(img[src*="partner-01.png"]) {
  display: none !important;
}

/* 7. Righe orizzontali (hr.white-line / hr.white-line-alpha): da bianche a navy,
   su TUTTE le pagine (home, corsi, docenti, ecc.) */
.light-content hr.white-line:before,
hr.white-line:before {
  background: var(--text-primary) !important;
}
.light-content hr.white-line-alpha:before,
hr.white-line-alpha:before {
  background: rgba(20, 33, 61, 0.3) !important;
}

/* 8. Footer: colonna unica centrata (dati legali, social, back-to-top e
   copyright tutti impilati e centrati). Markup piatto senza
   .parallax-wrap/.parallax-element sui social, cosi' lo script del tema
   (che scala x2 al mouseenter ogni .parallax-wrap) non li aggancia piu'.
   Il tema originale imposta su "footer": height fissa (140px/120px),
   overflow:hidden e pointer-events:none (pensato per un footer-overlay
   decorativo a riga singola) - tutto neutralizzato qui sotto perche' il
   nostro footer ha contenuto reale e link cliccabili su piu' righe. */
footer {
  /* Nessun fondo proprio: il footer siede sullo sfondo unico del sito
     (vedi "SFONDO UNICO DEL SITO"), separato dal contenuto da un filetto. */
  background: transparent !important;
  border-top: 1px solid var(--border) !important;
  position: relative !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  pointer-events: auto !important;
  padding: 32px 0 !important;
}
#footer-container {
  position: relative;
  height: auto !important;
  overflow: visible !important;
  pointer-events: auto !important;
}
.footer-flat,
.footer-flat:hover {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
  gap: 14px;
  transform: none !important;
  float: none !important;
  pointer-events: auto !important;
  text-align: center;
}
.footer-flat-block {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px;
  margin-top: 20px;
  margin-bottom: 20px;
  text-align: center;
  pointer-events: auto !important;
}
.footer-legal-name {
  font-weight: 700;
  font-size: 14px;
  color: var(--text-primary);
}
.footer-legal-line {
  font-size: 13px;
  color: var(--text-primary);
  opacity: 0.75;
}
.footer-legal-line a {
  color: inherit;
  text-decoration: none;
  pointer-events: auto !important;
}
.footer-legal-line a:hover {
  color: var(--accent-secondary);
  text-decoration: underline;
}
.footer-flat-socials {
  flex-direction: row !important;
  /* baseline e non flex-start: l'etichetta "Seguici su:" e i due link hanno
     corpo diverso, e allineandoli in cima al box il testo piu' piccolo
     risulterebbe alzato rispetto alla linea di scrittura degli altri. */
  align-items: baseline !important;
  gap: 8px;
  white-space: nowrap;
}
.footer-flat-bottom {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px;
  flex-wrap: wrap;
  width: 100%;
  padding-top: 24px;
  border-top: 1px solid var(--border-color, rgba(20, 33, 61, 0.12));
  pointer-events: auto !important;
}
.footer-flat-item {
  display: flex !important;
  align-items: center !important;
  gap: 8px;
  color: var(--text-primary);
  float: none !important;
  transform: none !important;
  position: static !important;
  top: auto !important;
  left: auto !important;
  line-height: normal !important;
  height: auto !important;
  pointer-events: auto !important;
}
.footer-flat-backtotop {
  cursor: pointer;
}
.footer-flat-backtotop i {
  color: var(--text-primary);
  font-size: 14px;
}
.footer-flat-backtotop span {
  font-weight: 600;
  font-size: 13px;
}
.footer-flat-copyright .copyright,
.footer-flat .copyright {
  position: static !important;
  top: auto !important;
  left: auto !important;
  height: auto !important;
  width: auto !important;
  overflow: visible !important;
  font-size: 12px !important;
  line-height: normal !important;
  color: var(--text-primary) !important;
  opacity: 0.75;
  text-align: center !important;
}
.footer-flat .socials-text,
.footer-flat:hover .socials-text {
  display: inline !important;
  float: none !important;
  font-size: 13px !important;
  font-weight: 600;
  line-height: normal !important;
  transform: none !important;
  position: static !important;
}
.footer-flat-socials a,
.footer-flat-socials a:visited,
.footer-flat .socials-sep {
  font-size: 13px !important;
  line-height: normal !important;
}
.footer-flat-socials a,
.footer-flat-socials a:visited {
  color: var(--text-primary);
  transition: color 0.2s ease;
  pointer-events: auto !important;
  cursor: pointer !important;
  text-decoration: none;
}
.footer-flat-socials a:hover {
  color: var(--accent-secondary);
  text-decoration: underline;
}
.footer-flat .socials-sep {
  opacity: 0.4;
}
@media (max-width: 640px) {
  .footer-flat-bottom {
    flex-direction: column;
    gap: 10px;
  }
}

/* 9. Bottone "Invia" (form contatti, home e contatti.html): il tema lo rende
   bianco su bianco perche' la sezione ha classe .light-content ma uno sfondo
   chiaro dichiarato (#F7F2E7 / #F1EADA), non scuro. Forziamo bordo e testo navy
   quando la sezione ha uno di questi sfondi chiari. */
[data-bgcolor="#F7F2E7"] .button-border.outline,
[data-bgcolor="#F1EADA"] .button-border.outline,
[data-bgcolor="#fff"] .button-border.outline,
[data-bgcolor="#eee"] .button-border.outline {
  border-color: var(--text-primary) !important;
  color: var(--text-primary) !important;
}
[data-bgcolor="#F7F2E7"] .button-border.outline input,
[data-bgcolor="#F1EADA"] .button-border.outline input,
[data-bgcolor="#fff"] .button-border.outline input,
[data-bgcolor="#eee"] .button-border.outline input {
  color: var(--text-primary) !important;
}

/* --------------------------------------------------------------------------
   Cerchio di caricamento ("Loading / in corso"): fondino oro
   --------------------------------------------------------------------------
   Il tema colora il cerchio con il valore di body[data-primary-color]
   (#919191, grigio) applicato inline via GSAP, sia come bordo che come
   sfondo. Non cambiamo quell'attributo perche' lo stesso valore serve anche
   al bordo del cursore sugli hover dei bottoni: qui agiamo SOLO sullo stato
   di caricamento, riconoscibile dal fatto che il tema inietta due <p>
   ("Loading" / "in corso") dentro #ball. !important perche' sovrascriviamo
   uno stile inline animato. */
#ball:has(p),
body.show-loader #ball {
  background-color: var(--accent-secondary) !important;
  border-color: var(--accent-secondary) !important;
}

#ball:has(p) p,
body.show-loader #ball p,
.light-content #ball:has(p) p,
.light-content body.show-loader #ball p {
  color: var(--surface) !important;
}

/* --------------------------------------------------------------------------
   Griglia immagini in home (.landing-grid): via la fascia di fondo
   --------------------------------------------------------------------------
   Il tema disegna con ".landing-grid:before" una fascia alta 20vw a tutta
   larghezza dietro ai blocchi immagine: #eee nella variante base e
   rgb(34,34,34) — quasi nera — sotto .light-content, che e' la classe usata
   da tutte le pagine. Sul fondo panna del sito quella fascia e' un blocco
   scuro fuori palette: la rendiamo trasparente cosi' resta lo sfondo pagina. */
.landing-grid:before,
.light-content .landing-grid:before {
  background-color: transparent !important;
}


/* --------------------------------------------------------------------------
   Banner "Dalla lettura alla musica": blocco navy a tutta larghezza
   --------------------------------------------------------------------------
   Unica interruzione voluta nello sfondo del sito. Prima era un gradiente
   panna (#F1EADA -> #EAE4D6) a un passo dal fondo pagina: troppo vicino per
   leggersi come scelta, abbastanza diverso da sembrare un errore di
   allineamento. In navy pieno diventa un blocco di respiro dichiarato. */
.restyled-banner {
  background: var(--text-primary) !important;
  padding: 88px 32px !important;
}

.restyled-banner .kicker,
.restyled-banner .kicker * {
  color: var(--accent-secondary) !important;
}

.restyled-banner h3,
.restyled-banner h3 * {
  color: #FFFDF8 !important;
}

.restyled-banner p,
.restyled-banner p * {
  color: rgba(255, 253, 248, 0.82) !important;
}

/* Bottone oro con testo navy: l'oro del brand con testo bianco non arriva a
   4.5:1, e su un banner che parla di accessibilita' non e' un dettaglio. */
.restyled-banner .btn,
.restyled-banner .btn-primary,
.restyled-banner a.btn-primary {
  background: var(--accent-secondary) !important;
  border-color: var(--accent-secondary) !important;
  color: var(--text-primary) !important;
  padding: 18px 34px !important;
}

.restyled-banner .btn:hover,
.restyled-banner .btn-primary:hover,
.restyled-banner a.btn-primary:hover {
  background: #DCB25A !important;
  border-color: #DCB25A !important;
  color: var(--text-primary) !important;
}

/* --------------------------------------------------------------------------
   Liste a righe (.slide-list): filetti 1px navy
   --------------------------------------------------------------------------
   Il tema (showcase.css) le separa con un bordo da 2px, nero nella variante
   base e bianco sotto .light-content - quest'ultima e' la classe usata da
   tutte le pagine, quindi sul fondo chiaro i filetti erano invisibili.
   Portati a 1px nel navy del brand.
   Anche ".slide-list.above" passa a 1px: il tema lo usa con bordo
   trasparente per non far saltare il layout durante l'hover, e se restasse
   a 2px le righe si sposterebbero di un pixel al passaggio del mouse. */
.slide-list.show-borders,
.light-content .slide-list.show-borders {
  border-top: 1px solid var(--text-primary) !important;
}

.slide-list:last-child,
.light-content .slide-list:last-child {
  border-bottom: 1px solid var(--text-primary) !important;
}

.slide-list.above {
  border-top: 1px solid transparent !important;
  border-bottom: 1px solid transparent !important;
}


/* --------------------------------------------------------------------------
   Liste a righe (.slide-list): tipografia allineata alla scala
   --------------------------------------------------------------------------
   Il tema le imposta a 50px/70px fissi: fuori scala rispetto ai titoli di
   sezione del resto del sito (max 36-40px) e senza adattamento sui formati
   intermedi, dove restavano enormi. Portate sul gradino --fs-h2, con
   line-height proporzionale invece che in px fissi. */
.sl-title,
.light-content .sl-title {
  font-size: var(--fs-h3) !important;
  line-height: var(--lh-heading) !important;
}

/* Stessa misura per gli altri due indici del sito, che il tema dimensiona
   con classi diverse ma che sul sito sono la stessa cosa: l'elenco eventi
   (.team-member, 48px/80px fissi in shortcodes.css) e la griglia dei corsi
   (.item-title, 24px in portfolio.css). Prima erano tre misure scollegate
   per tre elenchi identici nella funzione. */
.team-member,
.light-content .team-member,
.team-member span,
.light-content .team-member span {
  font-size: var(--fs-h3) !important;
  line-height: var(--lh-heading) !important;
}

.item-title {
  font-size: var(--fs-h3) !important;
  line-height: var(--lh-heading) !important;
}

.item-cat {
  font-size: var(--fs-small) !important;
}

.sl-subtitle,
.light-content .sl-subtitle {
  font-size: var(--fs-small) !important;
  line-height: var(--lh-body) !important;
}

/* --------------------------------------------------------------------------
   Figura editoriale a piena colonna (.section-figure)
   --------------------------------------------------------------------------
   Immagine che separa due blocchi di testo dentro una pagina restyled.
   Larghezza e padding laterali identici a .restyled .section, cosi' si
   allinea esattamente ai paragrafi sopra e sotto. Raggio 4px e ombra
   tenue come le altre superfici del sistema (card, info-box). */
.restyled .section-figure {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 32px 110px;
}

.restyled .section-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  /* Angoli vivi: le foto nelle schede docente non sono stondate. */
  border-radius: 0;
  /* Stessa ombra che il tema da' a tutte le <figure> (style.css: "figure {
     box-shadow: 16px 16px 87px -32px #000 }"), qui pero' applicata
     all'IMMAGINE e non al contenitore: vedi la nota qui sotto. */
  box-shadow: 16px 16px 87px -32px rgba(0, 0, 0, 1);
}

/* Il tema mette quell'ombra su OGNI <figure>. Nelle schede docente la
   figure avvolge l'immagine senza spazi, quindi l'ombra segue il bordo
   della foto ed e' corretta. Qui invece la figure porta i padding di
   colonna (32px ai lati, 88px sotto): l'ombra tracciava il contorno del
   CONTENITORE, cioe' un rettangolo piu' largo e molto piu' alto della
   foto, e si leggeva come un pannello beige dietro l'immagine.
   Togliamo l'ombra dal contenitore e la spostiamo sull'immagine. */
.restyled .section-figure {
  box-shadow: none !important;
}

.restyled .section-figure figcaption {
  margin-top: 16px;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--text-tertiary);
  text-align: center;
}

@media (max-width: 760px) {
  .restyled .section-figure {
    padding: 0 24px 72px;
  }
}


/* --------------------------------------------------------------------------
   Titoli: la famiglia deve valere anche sugli <span> interni
   --------------------------------------------------------------------------
   Il tema incapsula il testo dei titoli in uno <span> (serve alle sue
   animazioni di reveal). La regola di base ".restyled span { font-family:
   var(--font-body) }" colpiva quindi il testo VISIBILE dei titoli, mentre
   il Fraunces restava sull'h1/h2 esterno che non contiene testo proprio:
   i titoli uscivano in sans pur avendo la regola serif applicata.
   Esclusi h5/h6, che nel sistema sono occhielli e restano in sans. */
.restyled h1 span,
.restyled h2 span,
.restyled h3 span,
.restyled h4 span,
.restyled .hero-title,
.restyled .hero-title span,
.restyled .page-title span {
  font-family: var(--font-heading) !important;
}

/* --------------------------------------------------------------------------
   Prima sezione sotto l'hero: stacco piu' corto
   --------------------------------------------------------------------------
   Sommando i 120px sotto l'hero ai 110px sopra la sezione, tra il paragrafo
   di apertura e la prima immagine restavano 170px di vuoto ottici. Ora
   l'hero chiude a 96px e la prima sezione apre a 56: il vuoto scende
   a ~92px, abbastanza da non spezzare la pagina e comunque sopra il
   minimo di respiro che il sistema si da' tra due blocchi. */
.restyled #main-page-content > .section:first-child,
.restyled #main-page-content > .section-figure:first-child {
  padding-top: var(--space-after-hero);
}

/* --------------------------------------------------------------------------
   Paragrafi scritti dentro tag di heading
   --------------------------------------------------------------------------
   Nell'export del sito molti paragrafi sono marcati come <h3>/<h4> invece
   che come <p>: la regola sitewide "h1..h6 { font-family: var(--font-heading) }"
   li manda quindi in Fraunces, e intere descrizioni escono in graziato.
   Qui riportiamo al font di testo le famiglie che risultano essere SEMPRE
   prosa (verificato sull'intero sito: 64 blocchi ".bigger" e 21 "h4.has-mask",
   tutti con testo lungo). I titoli veri restano in Fraunces. */
h3.bigger,
h4.bigger,
h5.bigger,
h4.has-mask,
h3.bigger.has-animation,
h4.bigger.has-animation {
  font-family: var(--font-body) !important;
  font-weight: 400 !important;
  font-size: var(--fs-lead) !important;
  line-height: var(--lh-body) !important;
  color: var(--text-secondary) !important;
}

/* Angoli vivi su tutto cio' che contiene una foto. Le card delle iniziative
   hanno "border-radius: 4px" + "overflow: hidden", quindi arrotondavano i due
   angoli superiori dell'immagine: la card intera passa ad angoli vivi, perche'
   una card stondata con la foto squadrata dentro non sarebbe coerente. */
.restyled .initiative-card,
.restyled .initiative-card .initiative-media,
.restyled .initiative-card .initiative-media img {
  border-radius: 0 !important;
}

/* Banner "Dalla lettura alla musica": occhiello senza icona.
   Il pittogramma davanti a "Iniziativa speciale · Accessibilità" e' pensato
   per gli occhielli di sezione sul fondo chiaro; sul navy pieno del banner
   pesa e non aggiunge informazione. La regola vale ovunque compaia il
   banner, non solo in home. */
.restyled-banner .kicker::before,
.restyled .restyled-banner .kicker::before {
  content: none !important;
  display: none !important;
}

/* --------------------------------------------------------------------------
   Transizione fra le pagine: velo navy
   --------------------------------------------------------------------------
   Il tema ha gia' il pannello ".cd-cover-layer" (assets.css): fisso, a tutto
   schermo, z-index 5000, che va in dissolvenza da opacity 0 a 1 quando il
   body prende ".page-is-changing". Il suo background pero' e' "transparent",
   quindi la dissolvenza avviene ma non si vede nulla.

   Qui gli diamo un colore: navy all'8%. Scurire per un istante si legge come
   un gesto voluto; schiarire verso il bianco, su un sito tutto su fondo
   crema, si leggerebbe come uno sfarfallio di caricamento.

   Non tocchiamo durate ne' ritardi: il JS di navigazione (plugins.js) si
   aggancia al "transitionend" di questo elemento per caricare la pagina
   successiva, quindi cambiare i tempi significherebbe cambiare il ritmo
   della navigazione — o, sbagliando, bloccarla. */
.cd-cover-layer {
  background-color: rgba(20, 33, 61, 0.08) !important;
}

/* Lo stato "invisibile" del tema deve restare davvero trasparente, altrimenti
   il velo resterebbe appoggiato sulla pagina anche a transizione conclusa. */
.cd-cover-layer.invisible {
  background-color: transparent !important;
}

/* --------------------------------------------------------------------------
   Footer: mappa del sito
   --------------------------------------------------------------------------
   Quattro colonne sulle macro-sezioni invece dell'elenco completo delle 131
   pagine: diciotto link utili, uno per ogni pagina di secondo livello. Ha due
   effetti: da' a ciascuna di quelle pagine un collegamento da tutte le altre,
   e per un motore conversazionale e' la mappa esplicita di cosa sia
   l'istituzione. Prima il footer aveva solo dati legali e social. */
.footer-sitemap {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px 40px;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto 48px;
  padding: 0 32px 40px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.footer-sitemap-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.footer-sitemap-title {
  font-family: var(--font-body);
  font-size: var(--fs-kicker);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  /* !important perche' il tema colora di scuro tutto il testo dentro footer */
  color: var(--accent-secondary) !important;
  margin-bottom: 4px;
}

.footer-sitemap a {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--text-secondary) !important;
  text-decoration: none;
  pointer-events: auto !important;
  transition: color 0.2s ease;
}

.footer-sitemap a:hover {
  color: var(--text-primary) !important;
}

/* Marcatore sulle voci che portano ancora alla versione italiana, finche' la
   traduzione di quelle sezioni non e' pronta: meglio dirlo che lasciare che
   l'utente ci finisca dentro senza preavviso. */
.footer-lang-it {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 4px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  border: 1px solid var(--border);
  border-radius: 2px;
  color: var(--text-tertiary);
  vertical-align: 1px;
}

@media (max-width: 900px) {
  .footer-sitemap {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 24px;
    padding: 0 24px 32px;
    margin-bottom: 36px;
  }
}

@media (max-width: 520px) {
  .footer-sitemap {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   Mappa del sito nel footer: neutralizzare gli stili che il tema applica a
   TUTTI i <nav>
   --------------------------------------------------------------------------
   scripts.js fa due cose su $("nav"), pensando al solo menu dell'header:
     1) .css('background-color', '#141414')  -> fondo nero
     2) sotto i 1025px, .css({'height': winHeight}) -> altezza = schermo intero
   Sono stili inline, quindi battibili solo con !important. La nostra mappa del
   sito e' un <nav> dentro il footer chiaro: senza questo blocco comparirebbe
   come una fascia nera alta quanto la finestra. */
.footer-sitemap {
  background-color: transparent !important;
  background-image: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  position: static !important;
}

/* --------------------------------------------------------------------------
   Footer: blocco conclusivo con fondino
   --------------------------------------------------------------------------
   Il footer prende --surface, il bianco caldo delle card e degli .info-box
   (#FFFDF8): non il bianco puro, che su un sito interamente su crema
   sfonderebbe. Insieme al banner navy e' la sola interruzione di tono
   voluta nella pagina, e chiude il documento con la stessa superficie che
   il sistema usa per i contenuti.
   Il filetto in alto resta indispensabile: senza, il passaggio dallo sfondo
   pagina (#F7F2E7) al footer (#FFFDF8) sarebbe troppo tenue per leggersi
   come uno stacco. */
footer.hidden,
footer {
  background-color: var(--surface) !important;
  border-top: 1px solid var(--border) !important;
  padding: 0 !important;
}

#footer-container {
  max-width: 1184px;
  margin: 0 auto;
  padding: 72px 32px 40px !important;
}

/* Contenuto allineato a sinistra e in alto: con quattro colonne di altezza
   diversa (Corsi ne ha sei, Iniziative due) il centraggio le farebbe
   "galleggiare" a mezz'aria, ognuna a un'altezza diversa. */
.footer-flat,
.footer-flat:hover {
  align-items: stretch !important;
  text-align: left;
  gap: 0;
}

.footer-sitemap {
  align-items: start;
  padding: 0 0 44px;
  margin: 0 0 40px;
  max-width: none;
}

/* Dati legali e social sulla stessa riga: i dati a sinistra, i social a
   destra, entrambi allineati in alto. */
.footer-flat > .footer-flat-block:not(.footer-flat-socials) {
  align-items: flex-start !important;
  text-align: left;
  margin: 0 !important;
  gap: 5px;
  max-width: 60ch;
}

.footer-flat-socials {
  align-items: flex-start !important;
  justify-content: flex-start !important;
  margin: 24px 0 0 !important;
  gap: 10px;
}

.footer-flat-bottom {
  justify-content: space-between !important;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--border) !important;
}

@media (min-width: 901px) {
  /* Su desktop dati legali e social affiancati */
  .footer-flat,
  .footer-flat:hover {
    display: grid !important;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "mappa  mappa"
      "dati   social"
      "fondo  fondo";
    column-gap: 40px;
  }
  .footer-sitemap { grid-area: mappa; }
  .footer-flat > .footer-flat-block:not(.footer-flat-socials) { grid-area: dati; }
  /* I social chiudono a filo del bordo destro, sulla stessa verticale del
     copyright in fondo: justify-self ancora il blocco a destra anche se la
     colonna "auto" dovesse risultare piu' larga del contenuto. */
  .footer-flat-socials {
    grid-area: social;
    margin-top: 0 !important;
    align-self: start;
    align-items: baseline !important;
    justify-self: end;
    justify-content: flex-end !important;
    text-align: right;
  }
  .footer-flat-bottom { grid-area: fondo; }
}

@media (max-width: 900px) {
  #footer-container { padding: 56px 24px 32px !important; }
  .footer-flat-bottom { flex-direction: column; align-items: flex-start !important; }
}


/* ============================================================
   Sottomenu a tendina: leggibilita' delle voci
   ============================================================
   Il tema colora di oro TUTTI i link del menu mentre il mouse e' sulla
   navigazione (.light-content .classic-menu .flexnav:hover li a). Le voci di
   primo livello non se ne accorgono perche' il loro testo sta dentro uno
   <span> con un colore proprio; le voci del sottomenu invece sono testo nudo
   dentro l'<a> e prendono l'oro. Risultato: la tendina si apriva con le voci
   chiare e poco leggibili sul pannello crema.
   Qui le riportiamo al blu di testo e le mettiamo in semibold (600, lo stesso
   peso delle voci di primo livello), lasciando l'oro al solo :hover/.active
   come segnale di interazione.
   La specificita' e' volutamente alta: deve battere sia la regola :hover del
   tema sia quella con :has(#hero.has-image) che colora di bianco il menu
   sugli hero fotografici. nav:not(.open) tiene fuori il menu mobile a tutto
   schermo, che ha fondo scuro e testo bianco. */
#page-content header.classic-menu nav:not(.open) .flexnav li ul li a,
#page-content header.classic-menu nav:not(.open) .flexnav:hover li ul li a,
#page-content header.classic-menu nav:not(.open) .flexnav li:hover ul li a,
#page-content:has(#hero.has-image) header.classic-menu:not(.menu-scrolled) nav:not(.open) .flexnav li ul li a {
  color: var(--accent-gold-deep) !important;
  font-weight: 600 !important;
  /* il tema tiene i link al 60% e li porta a piena opacita' solo al passaggio
     del mouse: e' l'altra meta' del problema di leggibilita'. L'animazione di
     apertura della tendina non ne risente, perche' agisce sull'<ul>. */
  opacity: 1 !important;
}

#page-content header.classic-menu nav:not(.open) .flexnav li ul li a:hover,
#page-content header.classic-menu nav:not(.open) .flexnav li ul li a.active,
#page-content:has(#hero.has-image) header.classic-menu:not(.menu-scrolled) nav:not(.open) .flexnav li ul li a:hover {
  /* al passaggio del mouse l'oro di palette, piu' chiaro: la voce si schiarisce
     invece di scurirsi, e lo stacco resta percepibile. */
  color: var(--accent-secondary) !important;
}

/* Menu mobile a tutto schermo: fondo scuro, quindi il colore resta quello del
   tema (bianco). Allineiamo solo il peso, per coerenza con il desktop. */
nav.open .flexnav li ul li a {
  font-weight: 600 !important;
  opacity: 1 !important;
}


/* ==========================================================================
   Liste a righe (.slide-list): sottotitolo sotto al titolo + freccia a destra
   ==========================================================================
   Vale per i quattro elenchi costruiti con questo impaginato -- docenti,
   laboratori, perfezionamento, corsi pre-accademici -- in italiano e inglese.

   Com'era: il titolo a sinistra e la materia in piccolo ancorata al bordo
   destro (position:absolute; right:0; top:52px in showcase.css). Su righe
   larghe quasi 1000px le due informazioni finivano a mezzo schermo di
   distanza e su linee di base diverse: si leggevano come due cose separate,
   e le materie lunghe si accartocciavano contro il bordo. Inoltre nulla
   diceva che la riga fosse un link: lo si scopriva solo passandoci sopra.

   Com'e' adesso: la materia scende sotto al titolo, allineata a sinistra con
   esso, e il posto a destra lo prende la freccia -- la stessa dei link a
   fondo pagina (.next-hero-title::after), ruotata di 45 gradi e che si
   raddrizza al passaggio del mouse. Stesso gesto in tutto il sito. */

.slide-list {
  /* riferimento per la freccia: il tema imposta gia' position:relative, ma
     in una media query che non copre tutti i formati */
  position: relative !important;
  /* il tema fissa la larghezza con una calc(): senza border-box il padding
     qui sotto si sommerebbe a quella misura e spingerebbe il bordo destro
     della riga fuori dall'area visibile, portandosi via la freccia */
  box-sizing: border-box !important;
  /* corsia riservata alla freccia: il testo non ci finisce mai sotto */
  padding-right: 76px !important;
}

.sl-subtitle,
.sl-subtitle-dx,
.light-content .sl-subtitle {
  position: static !important;
  right: auto !important;
  top: auto !important;
  text-align: left !important;
  /* aria fra titolo e materia: le due righe sono una coppia, non un blocco
     unico schiacciato */
  margin-top: 10px !important;
}

/* il tema porta la materia da 0.5 a 1 di opacita' al passaggio del mouse:
   il comportamento resta, alzato solo il valore di partenza perche' ora la
   materia e' parte del contenuto della riga e non piu' una nota a margine */
.slide-list .sl-subtitle,
.slide-list .sl-subtitle-dx {
  opacity: 0.65 !important;
}

.slide-list:hover .sl-subtitle,
.slide-list:hover .sl-subtitle-dx {
  opacity: 1 !important;
}

.slide-list::after {
  font-family: FontAwesome;
  content: "\f061";
  font-size: 26px;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  position: absolute;
  right: 8px;
  top: 50%;
  color: var(--text-primary);
  transform: translateY(-50%) rotate(45deg);
  transition: transform .15s cubic-bezier(.215, .61, .355, 1);
  /* la freccia e' decorativa: i clic devono continuare ad arrivare alla riga */
  pointer-events: none;
}

.slide-list:hover::after {
  transform: translateY(-50%) rotate(0deg) translateX(4px);
}

/* Formati stretti: il tema impila gia' titolo e materia, qui bastano una
   freccia piu' piccola e una corsia piu' stretta per non rubare larghezza
   ai nomi lunghi. */
@media (max-width: 900px) {
  .slide-list { padding-right: 46px !important; }
  .slide-list::after { font-size: 20px; right: 0; }
}


/* ==========================================================================
   Tabella partner (.clients-table) su accademia.html / en/academy.html
   ==========================================================================
   Il tema la costruisce con dei float a larghezza 33% e margini negativi
   (shortcodes.css), pensati per la variante con i bordi, dove le celle si
   toccano di proposito. Nella variante "no-borders" usata qui i bordi non ci
   sono, e restava solo l'effetto collaterale: le righe appiccicate fra loro,
   con la didascalia della prima riga a ridosso del logo della seconda.
   Con i float, per giunta, celle di altezza diversa (le didascalie lunghe
   vanno a capo) si incastrano storte invece di allinearsi.

   Qui passa a griglia: colonne uguali, distanze esplicite, righe allineate.
   3 colonne fino a 767px, 2 sotto, 1 sui formati piu' stretti -- gli stessi
   scalini del tema. */
.clients-table.no-borders {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 40px;
  /* l'aria fra una riga di loghi e la successiva: e' la correzione richiesta */
  row-gap: 72px;
  margin-left: 0 !important;
  align-items: start;
}

/* il tema aggiunge un ::after per sganciare i float: dentro a una griglia
   diventerebbe una cella vuota che sfalsa tutto l'allineamento */
.clients-table.no-borders::after {
  display: none !important;
}

.clients-table.no-borders li {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
}

@media (max-width: 767px) {
  .clients-table.no-borders {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 32px;
    row-gap: 56px;
  }
}

@media (max-width: 480px) {
  .clients-table.no-borders {
    grid-template-columns: 1fr;
    row-gap: 48px;
  }
}


/* ==========================================================================
   MOBILE — menu, scala tipografica, respiro dei blocchi
   ==========================================================================
   Aggiunto dopo un controllo sui formati telefono (375/390/430 px).
   Tre problemi trovati, tutti preesistenti e su tutto il sito, non solo
   sulle schede nuove. */


/* --- 1. Il pannello del menu era fuori dallo schermo ----------------------
   Il <nav> mobile e' position:fixed ma senza 'top'. Il JS del tema applica a
   #header-container una transform, e un antenato trasformato diventa il blocco
   contenitore degli elementi fixed: il pannello alto 100vh finiva centrato sui
   60-80px dell'header invece che sulla finestra (top calcolato: -382px su un
   iPhone 14). Le prime voci - Accademia, Corsi, Docenti - restavano sopra il
   bordo superiore, e con il sottomenu Corsi aperto NESSUNA delle sei voci dei
   corsi era raggiungibile.
   La riga che lo causa e' la centratura flex di #header-container, introdotta
   in questo stesso foglio per allineare il logo a meta' altezza: sul desktop
   e' corretta (li' il nav e' position:relative), sotto i 1025px no. */
@media only screen and (max-width: 1024px) {

  /* Ancoraggio alla finestra + copertura totale. 100dvh tiene conto della
     barra indirizzi che compare e scompare: con 100vh restava scoperta una
     striscia chiara in fondo al pannello. L'!important serve perche' il JS
     del tema scrive l'altezza inline. */
  nav {
    top: 0;
    left: 0;
    height: 100dvh !important;
    background-color: var(--text-primary) !important;
  }

  /* Il pannello scorre quando l'elenco supera lo schermo (sottomenu aperti).
     La centratura con 'margin:auto' e' l'unica che non taglia il contenuto in
     eccesso: align-items e table-cell tagliano in alto. */
  /* Lo scorrimento resta dov'e' nel tema, su .nav-height. Quello che cambia e'
     la centratura verticale: il tema impagina .outer/.inner come table e
     table-cell con vertical-align:middle, e appena l'elenco supera l'altezza
     dello schermo la centratura spinge le prime voci sopra il bordo, fuori
     dalla portata dello scorrimento. In flusso normale, invece, si parte
     dall'alto e si scorre. */
  /* Il tema dava a .nav-height 'width: calc(100% + 30px)' con 30px di padding
     a destra, per nascondere la barra di scorrimento: il risultato e' che
     l'asse del menu cadeva 15px a sinistra del centro dello schermo. */
  nav .nav-height {
    height: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  nav .outer { display: block !important; height: auto !important; width: 100%; margin: 0 !important; }

  /* 104px in alto: la fascia occupata da logo e tasto di chiusura resta
     libera, cosi' la prima voce non finisce mai sotto il logo. */
  nav .inner { display: block !important; height: auto !important; padding: 92px 24px 48px !important; }

  /* Voci: piu' grandi e piu' distanziate, per essere comode da toccare.
     Riga da ~62px, ben oltre i 44px minimi consigliati. */
  .classic-menu .flexnav li a {
    font-size: 23px !important;
    line-height: 1.3 !important;
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }

  .classic-menu .flexnav li ul li a {
    font-size: 15px !important;
    line-height: 1.45 !important;
    padding-top: 11px !important;
    padding-bottom: 11px !important;
  }

  /* Separatore prima del cambio lingua: filetto corto e centrato. */
  /* Il tema le da' 24px di margine e 24px di padding a sinistra, uno sfalsamento
     pensato per la barra orizzontale del desktop: qui la spostava di 48px fuori
     asse rispetto alle altre voci. */
  .classic-menu .flexnav li.buy-item {
    position: relative;
    margin: 30px 0 0 0 !important;
    padding: 30px 0 0 0 !important;
  }

  .classic-menu .flexnav li.buy-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 64px;
    height: 1px;
    background: rgba(255, 255, 255, 0.28);
  }

  .classic-menu .flexnav li.buy-item a {
    font-size: 17px !important;
    line-height: 1.3 !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  /* La X di chiusura c'era gia' ma era navy su navy: invisibile. */
  #menu-burger.open span,
  #page-content:has(#hero:not(.has-image)) #menu-burger.open span {
    background-color: #fff !important;
  }

  .button-wrap.right.menu { right: 20px; }

  /* Sottomenu: via il pannello chiaro. Quel fondino e' pensato per la tendina
     del desktop, che si apre sopra la pagina; dentro al pannello scuro del
     telefono diventa un rettangolo che interrompe la lettura. Restano le voci
     sul navy, separate da filetti sottili. */
  .classic-menu .flexnav li ul,
  .classic-menu .flexnav ul li ul li a,
  .classic-menu .flexnav li ul li a {
    background: transparent !important;
  }

  .classic-menu .flexnav li ul {
    box-shadow: none !important;
    margin-bottom: 0 !important;
  }

  /* La punta della tendina del desktop, qui non serve. */
  .flexnav li ul:after,
  .flexnav ul li ul:after {
    display: none !important;
  }

  .classic-menu .flexnav li ul li a,
  .classic-menu .flexnav li ul li a span {
    color: rgba(255, 255, 255, 0.82) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.14) !important;
  }

  .classic-menu .flexnav li ul li:first-child a {
    border-top: 1px solid rgba(255, 255, 255, 0.14) !important;
  }

  .classic-menu .flexnav li ul li a:hover,
  .classic-menu .flexnav li ul li a.active {
    color: #fff !important;
  }

  /* --- Voci che sparivano ------------------------------------------------
     Il tema usa un effetto da desktop: passando il mouse su una voce, tutte
     le altre scendono a opacity 0.3 (.flexnav:hover li a) e virano al colore
     tenue. Su un telefono il :hover si appiccica al primo tocco e non se ne
     va piu': da quel momento restava visibile solo la voce della pagina
     corrente e il menu sembrava vuoto. Qui l'effetto va semplicemente spento,
     perche' senza mouse non ha nessun senso. */
  .flexnav:hover li a,
  .flexnav:hover li a span,
  .flexnav:hover li ul li a,
  .flexnav li a,
  .classic-menu .flexnav:hover li a,
  .classic-menu .flexnav:hover li a span {
    opacity: 1 !important;
  }

  /* Il .light-content davanti serve a pareggiare la specificita' della regola
     che vira tutte le voci all'oro in hover: quando il pannello e' aperto la
     pagina ha proprio quella classe. */
  .classic-menu .flexnav > li > a,
  .classic-menu .flexnav > li > a span,
  .classic-menu .flexnav > li > a div,
  .light-content .classic-menu .flexnav li a,
  .light-content .classic-menu .flexnav li a span,
  .light-content .classic-menu .flexnav:hover li a,
  .light-content .classic-menu .flexnav:hover li a span,
  .light-content .classic-menu .flexnav li:hover a,
  .light-content .classic-menu .flexnav li:hover a span {
    color: #fff !important;
  }

  /* La pagina in cui ci si trova resta in oro, in ogni stato. */
  .classic-menu .flexnav > li.nav-current > a,
  .classic-menu .flexnav > li.nav-current > a span,
  .light-content .classic-menu .flexnav > li.nav-current > a,
  .light-content .classic-menu .flexnav > li.nav-current > a span,
  .light-content .classic-menu .flexnav:hover > li.nav-current > a,
  .light-content .classic-menu .flexnav:hover > li.nav-current > a span,
  .light-content .classic-menu .flexnav > li.nav-current > a div {
    color: var(--accent-secondary) !important;
  }

  /* Sottomenu: restano bianchi attenuati anche in hover. */
  .light-content .classic-menu .flexnav li ul li a,
  .light-content .classic-menu .flexnav:hover li ul li a {
    color: rgba(255, 255, 255, 0.82) !important;
  }

  /* Lo scorrimento del testo in hover (span che trasla del 100%) lascerebbe
     la voce fuori dal suo contenitore al primo tocco. */
  .classic-menu .flexnav li:hover a span {
    transform: none !important;
  }

  /* "English" centrata come tutte le altre voci. */
  .classic-menu .flexnav li.buy-item,
  .classic-menu .flexnav li.buy-item a,
  .classic-menu .flexnav li.buy-item a div,
  .classic-menu .flexnav li.buy-item a span {
    text-align: center !important;
    display: block !important;
    width: 100% !important;
    float: none !important;
  }
}

/* Schermi bassi (iPhone SE e simili): una tacca in meno su corpo e spaziature,
   cosi' l'elenco completo entra senza dover scorrere. */
@media only screen and (max-width: 1024px) and (max-height: 720px) {
  .classic-menu .flexnav li a { font-size: 20px !important; padding-top: 12px !important; padding-bottom: 12px !important; }
  .classic-menu .flexnav li ul li a { font-size: 14px !important; padding-top: 8px !important; padding-bottom: 8px !important; }
  .classic-menu .flexnav li.buy-item { margin: 22px 0 0 0 !important; padding: 22px 0 0 0 !important; }
  nav .inner { padding: 84px 24px 36px !important; }
}


/* --- 2. Blocco "Vedi tutti" in home ---------------------------------------
   La fascia con il link ai Docenti non aveva respiro verticale (altezza 60px
   tutta occupata dal bottone) e il bottone, che sul desktop e' allineato a
   destra in absolute, sotto i 1025px tornava in flusso lasciando 150px di
   vuoto a destra. */
@media only screen and (max-width: 1024px) {
  .see-all-works {
    display: block;
    padding-top: 24px;
    padding-bottom: 24px;
  }
  .see-all-works .button-wrap.right {
    float: none;
    right: auto;
    width: 100%;
  }
  .see-all-works .button-wrap.right .icon-wrap {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }
}

/* --- 2. Scala tipografica sotto i 767px -----------------------------------
   Sul desktop i titoli girano su 20-30 caratteri per riga. Sulla colonna da
   350px le stesse misure scendevano a 11-15 caratteri: un h1 diventava una
   colonna di dieci righe. Qui le misure sono ricalibrate sulla larghezza
   reale, con le interlinee strette in proporzione. */
@media only screen and (max-width: 767px) {

  #hero-caption .hero-title span,
  #hero-caption .hero-title {
    font-size: 36px !important;
    line-height: 1.16 !important;
  }

  #hero-caption .hero-subtitle span,
  #hero-caption .hero-subtitle {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  #main-page-content h1,
  #main-page-content h1 span {
    font-size: 27px !important;
    line-height: 1.26 !important;
  }

  #main-page-content h2,
  #main-page-content h2 span {
    font-size: 23px !important;
    line-height: 1.32 !important;
  }

  #main-page-content h3,
  #main-page-content h3 span {
    font-size: 21px !important;
    line-height: 1.35 !important;
  }

  #main-page-content h5,
  #main-page-content h5 span {
    font-size: 16px !important;
    line-height: 1.55 !important;
  }

  #main-page-content p,
  #main-page-content p.bigger {
    font-size: 16.5px !important;
    line-height: 1.7 !important;
  }

  .next-page-wrap .next-hero-title span {
    font-size: 32px !important;
    line-height: 1.2 !important;
  }

  .next-page-wrap .next-hero-subtitle span {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }
}


/* --- Pallino del menu in sincronia con il logo ----------------------------
   Il logo scambia bianco/nero su .menu-scrolled (fondino chiaro sotto
   l'header) e torna bianco su .over-sidebar (pannello del menu aperto).
   Il burger invece restava bianco sempre: sulla fascia chiara diventava tre
   puntini quasi invisibili. Qui segue le stesse due classi del logo.
   I selettori ripetono il pattern con :has() perche' piu' in alto in questo
   foglio c'e' una regola a tre id che altrimenti vincerebbe. */
header.classic-menu.menu-scrolled #menu-burger span,
#page-content:has(#hero:not(.has-image)) header.classic-menu.menu-scrolled #menu-burger span {
  background-color: var(--text-primary) !important;
}

header.classic-menu.menu-scrolled .button-icon,
#page-content:has(#hero:not(.has-image)) header.classic-menu.menu-scrolled .button-icon {
  color: var(--text-primary) !important;
}

/* Menu aperto: pannello navy, quindi burger bianco - come il logo. */
header.classic-menu.over-sidebar #menu-burger span,
#page-content:has(#hero:not(.has-image)) header.classic-menu.over-sidebar #menu-burger span,
#menu-burger.open span,
#page-content:has(#hero:not(.has-image)) #menu-burger.open span {
  background-color: #fff !important;
}

header.classic-menu.over-sidebar .button-icon,
#page-content:has(#hero:not(.has-image)) header.classic-menu.over-sidebar .button-icon {
  color: #fff !important;
}

#menu-burger span {
  transition: background-color 0.4s ease;
}


/* --- Colori delle voci col pannello aperto -------------------------------
   Con il menu aperto la pagina prende .light-content, e li' il tema (piu'
   alcune regole di questo foglio) vira TUTTE le voci all'oro non appena il
   dito sfiora l'elenco: su desktop e' l'effetto voluto, su telefono il
   :hover resta incollato e si perdeva la distinzione della pagina corrente.
   Questi selettori stanno sopra a quelli in hover per specificita'. */
.light-content nav.open .flexnav li a,
.light-content nav.open .flexnav li a span,
.light-content nav.open .flexnav:hover li a,
.light-content nav.open .flexnav:hover li a span,
.light-content nav.open .flexnav li:hover a,
.light-content nav.open .flexnav li:hover a span,
nav.open .flexnav:hover li a,
nav.open .flexnav li:hover a {
  color: #fff !important;
}

.light-content nav.open .flexnav li ul li a,
.light-content nav.open .flexnav:hover li ul li a,
.light-content nav.open .flexnav li ul li:hover a {
  color: rgba(255, 255, 255, 0.82) !important;
}

.light-content nav.open .flexnav > li.nav-current > a,
.light-content nav.open .flexnav > li.nav-current > a span,
.light-content nav.open .flexnav:hover > li.nav-current > a,
.light-content nav.open .flexnav:hover > li.nav-current > a span,
.light-content nav.open .flexnav > li.nav-current:hover > a,
.light-content nav.open .flexnav > li.nav-current:hover > a span,
nav.open .flexnav > li.nav-current > a,
nav.open .flexnav > li.nav-current > a span {
  color: var(--accent-secondary) !important;
}


/* --- Voci che sparivano: la vera causa ------------------------------------
   Non e' un problema di colore. Toccando una voce del menu, scripts.js lancia
   l'animazione di uscita della pagina:
       $(".menu-timeline .before-span").each(... gsap.to(el, {y:-120, opacity:0}))
   cioe' fa volare via tutte le voci e le porta a opacity 0, scrivendo gli
   stili inline. Se la navigazione ajax non si conclude - o se si riapre il
   menu restando sulla stessa pagina - quegli stili inline restano addosso
   alle voci, che rimangono invisibili. Da qui "a volte spariscono": dipende
   da com'e' andata la transizione precedente.
   Con il pannello aperto rimettiamo le voci al loro posto. !important in un
   foglio di stile batte lo stile inline scritto da GSAP, quindi il reset
   funziona senza toccare il JS del tema. */
@media only screen and (max-width: 1024px) {
  nav.open .menu-timeline .before-span,
  nav.open .menu-timeline .before-span span,
  nav.open .flexnav > li > a > div,
  nav.open .flexnav > li > a > div > span,
  nav.open .flexnav > li > a > span {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
  }
}

/* Su un dispositivo senza mouse gli stati :hover non hanno senso, ma iOS li
   applica al tocco e poi non li toglie piu': l'effetto "accendi una voce e
   spegni le altre", pensato per il desktop, restava incollato. */
@media (hover: none) {
  .flexnav:hover li a,
  .flexnav:hover li a span,
  .flexnav.hover li a,
  .flexnav li:hover a,
  nav.open .flexnav:hover li a,
  .light-content .classic-menu .flexnav:hover li a {
    opacity: 1 !important;
  }

  nav.open .flexnav:hover li a,
  nav.open .flexnav.hover li a,
  nav.open .flexnav li:hover a,
  .light-content nav.open .flexnav:hover li a,
  .light-content nav.open .flexnav li:hover a {
    color: #fff !important;
  }

  .light-content nav.open .flexnav:hover > li.nav-current > a,
  .light-content nav.open .flexnav > li.nav-current:hover > a,
  nav.open .flexnav > li.nav-current > a {
    color: var(--accent-secondary) !important;
  }

  .light-content nav.open .flexnav:hover li ul li a,
  nav.open .flexnav li ul li:hover a {
    color: rgba(255, 255, 255, 0.82) !important;
  }
}


/* --- La voce attiva vince sempre -----------------------------------------
   Le regole che riportano le voci al bianco dopo il tocco sono numerose e
   alcune pareggiavano in specificita' con quella della voce attiva, lasciando
   decidere l'ordine di scrittura. Qui la voce della pagina corrente viene
   fissata per ultima e con tutte le combinazioni possibili di stato
   (:hover del tema, classe .hover aggiunta dal JS, pannello aperto), cosi'
   l'oro e la sottolineatura non possono piu' essere sovrascritti. */
@media only screen and (max-width: 1024px) {
  nav .flexnav > li.nav-current > a,
  nav .flexnav > li.nav-current > a span,
  nav .flexnav > li.nav-current > a div,
  nav.open .flexnav > li.nav-current > a,
  nav.open .flexnav > li.nav-current > a span,
  nav.open .flexnav > li.nav-current > a div,
  nav.open .flexnav:hover > li.nav-current > a,
  nav.open .flexnav:hover > li.nav-current > a span,
  nav.open .flexnav.hover > li.nav-current > a,
  nav.open .flexnav.hover > li.nav-current > a span,
  .light-content nav.open .flexnav > li.nav-current > a,
  .light-content nav.open .flexnav > li.nav-current > a span,
  .light-content nav.open .flexnav > li.nav-current > a div,
  .light-content nav.open .flexnav:hover > li.nav-current > a,
  .light-content nav.open .flexnav:hover > li.nav-current > a span,
  .light-content nav.open .flexnav.hover > li.nav-current > a,
  .light-content nav.open .flexnav.hover > li.nav-current > a span,
  .light-content nav.open .flexnav > li.nav-current:hover > a,
  .light-content nav.open .flexnav > li.nav-current:hover > a span {
    color: var(--accent-secondary) !important;
    opacity: 1 !important;
  }

  /* Sottolineatura della voce corrente: sempre visibile nel pannello. */
  nav.open .flexnav > li.nav-current > a::after,
  .light-content nav.open .flexnav > li.nav-current > a::after,
  .light-content nav.open .flexnav:hover > li.nav-current > a::after,
  .light-content nav.open .flexnav.hover > li.nav-current > a::after {
    opacity: 1 !important;
    transform: none !important;
    background: var(--accent-secondary) !important;
  }
}


/* ==========================================================================
   ELENCO EVENTI (#team-members-list) — gerarchia titolo / data
   ==========================================================================
   Com'era: ogni evento stava in un <ul id="team-members-list"> a se' - dodici
   elementi con lo STESSO id nella stessa pagina, che non e' HTML valido - e
   dentro ciascuno la data veniva prima del titolo, separata da un <br>, con
   la stessa identica misura del titolo. Risultato: due righe grandi uguali,
   la data in evidenza quanto l'evento, e nessuno stacco tra un evento e
   l'altro.
   Ora la struttura e' una sola lista e ogni voce ha titolo sopra e data
   sotto, con la stessa gerarchia dell'elenco docenti: nome grande, qualifica
   piccola. */

.events-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.events-list li {
  display: block;
  border-top: 1px solid var(--border);
}

.events-list li:last-child {
  border-bottom: 1px solid var(--border);
}

.events-list li a {
  display: block;
  padding: 32px 0;
  text-decoration: none;
}

/* Il tema allinea .team-member a destra (e le voci pari in modo alternato):
   con data e titolo su due righe diventava un blocco a bandiera rovesciata,
   con la data staccata a destra e il titolo a sinistra. Qui tutta la riga
   resta allineata a sinistra, come l'elenco docenti. */
.events-list .team-member,
.events-list li,
.events-list li a,
.events-list li:nth-child(even) .team-member,
.light-content .events-list .team-member {
  display: block;
  text-align: left !important;
}

/* Titolo dell'evento: la voce forte della riga. */
.events-list .event-title,
.light-content .events-list .team-member .event-title {
  display: block;
  font-family: var(--font-heading) !important;
  font-size: 30px !important;
  line-height: 1.24 !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--text-primary) !important;
  margin: 0 0 10px !important;
}

/* Data e luogo: riga di servizio, piccola e in secondo piano. Corpo del testo
   (non il serif dei titoli) e maiuscoletto spaziato, cosi' si distingue dal
   titolo anche a colpo d'occhio, prima ancora di leggerla. */
.events-list .event-meta,
.light-content .events-list .team-member .event-meta,
.light-content .team-member span.event-meta {
  display: block;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--text-secondary) !important;
  /* Il tema spinge lo span a destra (nel layout originale la data stava sulla
     stessa riga del titolo, allineata al margine opposto): qui va riportato
     in colonna sotto il titolo. */
  float: none !important;
  clear: both !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
  right: auto !important;
  text-align: left !important;
}

.events-list li a:hover .event-title {
  color: var(--accent-secondary) !important;
}

@media only screen and (max-width: 767px) {
  .events-list li a {
    padding: 24px 0;
  }

  .events-list .event-title,
  .light-content .events-list .team-member .event-title {
    font-size: 21px !important;
    line-height: 1.3 !important;
    margin-bottom: 8px !important;
  }

  .events-list .event-meta,
  .light-content .events-list .team-member .event-meta {
    font-size: 12px !important;
    letter-spacing: 0.06em !important;
  }
}


/* --- Andata a capo dei titoli hero ---------------------------------------
   "di", "e", "of" e simili sono parole corte: se cadono a fine riga il
   browser le manda a capo da sole, lasciando una riga con due lettere.
   Due accorgimenti, indipendenti l'uno dall'altro:
   1) nel testo, uno spazio unificatore (&nbsp;) lega la preposizione alla
      parola che segue, cosi' non puo' restare isolata - vale su qualsiasi
      browser e con qualsiasi font;
   2) qui, text-wrap: balance, che distribuisce le parole fra le righe in
      modo uniforme invece di riempire la prima fino all'orlo. Dove non e'
      supportato semplicemente non fa nulla e resta valido il punto 1. */
.hero-title,
.hero-title span,
.next-hero-title,
.next-hero-title span,
#main-page-content h1,
#main-page-content h2 {
  text-wrap: balance;
}


/* --- Rete di sicurezza: niente contenuto invisibile su telefono ----------
   Il tema nasconde in partenza tutto cio' che deve comparire in dissolvenza
   allo scroll: .vc_row.has-animation e .page-title-wrapper partono da
   opacity 0 e vengono accese da ScrollMagic, #footer-container da GSAP al
   caricamento. Su telefono quella catena non arriva sempre in fondo - e'
   la stessa ragione per cui sparivano le voci del menu - e il blocco
   "Richiedi subito / Informazioni" prima del footer restava semitrasparente,
   quando non del tutto invisibile.
   Qui le animazioni d'ingresso su mobile vengono rinunciate in cambio della
   certezza che il contenuto si veda sempre. Sul desktop restano intatte. */
@media only screen and (max-width: 1024px) {
  .vc_row.has-animation,
  .page-title-wrapper,
  .next-page-wrap,
  .next-page-title,
  #page-nav,
  #footer-container,
  footer .has-animation,
  #main-page-content .has-animation {
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Alcuni di questi elementi vengono anche traslati prima di comparire. */
  .page-title-wrapper,
  .next-page-wrap,
  #footer-container {
    transform: none !important;
  }
}