/* ============================================================
   restyle.css — Restyling UX (2026-06-17)
   Caricato DOPO main.css. Override per cascade.
   Direzione: UI PULITA E MODERNA. Flat (no ombre/hover-lift),
   Mulish dominante, Playfair SOLO sui titoli pagina grandi,
   MAI uppercase. Specificità: replica prefisso ID di main.css.
   NB regole base (body/h1-h6/a) toccano anche la home (atteso:
   nuova baseline tipografica; struttura home = task dedicato).
   Sezioni: [1] Token+base · [2] Componenti · [3] No-uppercase · [4] FAQ ·
   [5] Programma · [6] Info utili · [7] Header · [8] News · [9] Footer ·
   [10] Container · [11] Polish liste/archivi · [12] Micro-animazioni.
   ============================================================ */

:root {
  /* Palette */
  --vm-orange: #ed832e;
  --vm-orange-dark: #d96f1c;
  --vm-heading: #57581c;
  --vm-ink: #211f1b;
  --vm-muted: #6b6a63;
  --vm-cream: #faf7f1;
  --vm-line: #e7e1d6;
  --vm-white: #ffffff;
  --vm-surface: #f4f3f0; /* grigio caldo leggero (fondi sezione) */
  --vm-ok: #4f7a3a;      /* verde check 'incluso' */
  /* Spacing */
  --sp-xs: 8px;
  --sp-sm: 16px;
  --sp-md: 24px;
  --sp-lg: 40px;
  --sp-xl: 64px;
  /* Tipografia */
  --vm-font-body: 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --vm-font-head: 'Playfair Display', Georgia, serif;
}

/* ---------- [1] Base ---------- */
body {
  font-family: var(--vm-font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--vm-ink);
}

/* Default heading = SANS pulito (Mulish). Il serif si usa con parsimonia,
   solo sui titoli pagina grandi (.single-title/.section-title, blocco sotto). */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--vm-font-body);
  color: var(--vm-heading);
  font-weight: 700;
  line-height: 1.25;
}

/* Titoli pagina: unico uso del serif (display, grande, parsimonioso).
   Specificità ID per battere main.css:1170. */
#main-content #single .single-title,
.single-title,
.section-title {
  font-family: var(--vm-font-head);
  color: var(--vm-heading);
  font-weight: 700;
  font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.3rem);
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
}

/* Link */
a { color: var(--vm-orange); }
a:hover, a:focus { color: var(--vm-orange-dark); }

/* ---------- [2] Componenti ---------- */

/* Bottoni — flat, puliti. Niente uppercase, niente ombra/lift. */
.dark-btn, .light-btn, .white-btn {
  border-radius: 6px;
  letter-spacing: 0;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}
.dark-btn {
  background: var(--vm-orange);
  border-color: var(--vm-orange);
}
.dark-btn:hover {
  background: var(--vm-orange-dark);
  border-color: var(--vm-orange-dark);
}
#main-content a.book_now {
  border-radius: 6px;
  width: fit-content;
  max-width: 100%;
  padding: 12px 28px;
  transition: background-color 180ms ease, color 180ms ease;
}

/* Card CPT — flat. Niente ombra, niente hover-lift. Solo angoli morbidi
   sull'immagine + hover sobrio (titolo arancio). */
.articleWrapper {
  border-radius: 8px;
  overflow: hidden;
  background: transparent;
  box-shadow: none;
  transition: none;
}
.articleWrapper:hover {
  transform: none;
  box-shadow: none;
}
.articleWrapper .info h4 {
  font-family: var(--vm-font-body);
  font-weight: 700;
  color: var(--vm-heading);
  transition: color 180ms ease;
}
.articleWrapper:hover .info h4 { color: var(--vm-orange); }
/* icone social di condivisione sulle card = rumore → nascoste (restano in footer) */
.articleWrapper .share-buttons { display: none; }

/* Tipografia contenuti lunghi — leggibilità, niente fronzoli */
.flex-testo { font-size: 17px; line-height: 1.7; }
.flex-testo > .col-sm-12 {
  max-width: 72ch;
  margin: 0 auto;
  float: none;
}
.flex-testo p { margin-bottom: var(--sp-md); }
.flex-testo blockquote {
  border-left: 3px solid var(--vm-orange);
  background: transparent;
  padding: var(--sp-xs) 0 var(--sp-xs) var(--sp-md);
  font-style: normal;
  color: var(--vm-ink);
}

/* Occhiello / sottotitolo / pretitolo — niente uppercase, niente spaziatura forzata.
   Specificità ID per battere main.css:1162/1180. */
#main-content #single .single-subtitle,
.single-subtitle {
  color: var(--vm-muted);
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
}
#main-content #single .single-date,
.single-date {
  color: var(--vm-orange);
  letter-spacing: 0;
  text-transform: none;
  font-weight: 600;
}

/* ---------- [3] No-uppercase (override regole legacy main.css) ---------- */
/* Direttiva: MAI uppercase. Override mirati su bottoni e nav. */
.dark-btn, .light-btn, .white-btn, #main-content a.book_now {
  text-transform: none;
}
.navbar #navbar li a,
.navbar #navbar .dropdown-menu li a {
  text-transform: none;
  letter-spacing: 0;
}
/* Residui uppercase (QA): brochure "Scarica", notifiche "Chiudi", submit Gravity "Invia".
   NB il submit GF matcha anche `input[type='submit']` (spec 0,3,1) → includerlo per vincere. */
#banner_footer a.submit_btn,
#banner_footer h6.chiudi_btn a,
.gform_wrapper .gform_footer input[type='submit'],
.gform_wrapper .gform_footer .gform_button {
  text-transform: none;
}

/* ---------- [4] FAQ accordion — flat, pulito ---------- */
/* La pagina /faq/ è già flat via main.css (#main-content #faq …): domande con
   underline arancio. Qui: solo icona +/−, font sans, niente uppercase. Reset
   flat anche per accordion fuori da #faq (es. About), dove valgono i default Bootstrap. */
/* lista pulita SENZA box: divider tra le voci, larghe (tutta la colonna),
   allineate a sinistra (override del text-center del template e del .about).
   Specificità 3-ID per battere main.css:1102+. */
#main-content #faq #accordion,
#main-content .about #faq #accordion {
  text-align: left;
  max-width: none;
  margin: 0;
  border-top: 1px solid var(--vm-line);
}
#main-content #faq #accordion .panel {
  margin: 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--vm-line);
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
#main-content #faq #accordion .panel:hover { box-shadow: none; }
#main-content #faq #accordion .panel:last-child { border-bottom: 0; }
#accordion .panel-tt h3.faq-domanda {
  margin: 0;
  font-family: var(--vm-font-body);
  font-weight: 700;
  line-height: 1.4;
  text-transform: none;
}
/* domanda: heading scuro a sx (arancio solo su hover), niente underline arancio */
#main-content #faq #accordion .panel .panel-tt a {
  display: block;
  position: relative;
  color: var(--vm-heading);
  font-family: var(--vm-font-body);
  font-size: 19px;
  font-weight: 700;
  text-transform: none;
  text-decoration: none;
  border-bottom: 0;
  margin: 0;
  padding: 24px 56px 24px 0;
  text-align: left;
  transition: color 140ms ease;
}
#main-content #faq #accordion .panel .panel-tt a:hover { color: var(--vm-orange); }
/* icona +/− arancio flat a destra (no tondo, più pulita) */
#accordion .panel-tt a:after {
  content: '\2212'; /* minus, pannello aperto */
  position: absolute;
  right: 2px;
  top: 24px;
  color: var(--vm-orange);
  font-size: 1.5rem;
  line-height: 1.2;
}
#accordion .panel-tt a.collapsed:after {
  content: '\002B'; /* plus, pannello chiuso */
}
/* risposta: muted, leggibile, padding coerente con la domanda */
#main-content #faq #accordion .panel .body-panel {
  padding: 0 56px 26px 0;
  color: var(--vm-muted);
  font-size: 16px;
  line-height: 1.7;
}

/* ---------- [5] Programma tour (itinerario giorno-per-giorno) ---------- */
/* Specificità ID per battere main.css:1273+. Badge giorno centrato (era allineato
   a mano), label sans raffinata, titolo giorno sans, testo allineato a sinistra. */

/* Badge giorno: cerchio con numero centrato via flex */
#main-content #single .flex-programma .giorno .bullet {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 92px;
  height: 92px;
  margin-bottom: var(--sp-md);
  box-shadow: 0 6px 18px rgba(237, 131, 46, .22);
}
#main-content #single .flex-programma .giorno .bullet .day {
  font-family: var(--vm-font-head); /* numerale serif elegante = unico tocco serif qui */
  font-size: 42px;
  line-height: 1;
  margin: 0;
  font-weight: 700;
}
#main-content #single .flex-programma .giorno .bullet .month {
  font-family: var(--vm-font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: lowercase;
  margin-top: 4px;
  opacity: .92;
}
/* la variante luna_di_miele forzava line-height:95px → romperebbe il flex */
#main-content #single .flex-programma .giorno.luna_di_miele .bullet .day {
  line-height: 1;
}

/* Titolo del giorno: sans pulito (niente serif sui sotto-titoli ripetuti) */
#main-content #single .flex-programma .titolo-giorno {
  font-family: var(--vm-font-body);
  font-weight: 700;
  color: var(--vm-heading);
  font-size: 1.25rem;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: var(--sp-xs);
}

/* Testo programma: allineato a sinistra (no justify = niente buchi), leggibile */
#main-content #single .flex-programma p {
  text-align: left;
  font-size: 17px;
  line-height: 1.7;
  color: var(--vm-ink);
}

/* Separazione tra i giorni: linea sottile + respiro (non prima del primo) */
#main-content #single .flex-programma .giorno {
  margin-bottom: 0;
  padding-bottom: var(--sp-lg);
}
#main-content #single .flex-programma .giorno + .giorno {
  border-top: 1px solid var(--vm-line);
  padding-top: var(--sp-lg);
}

/* ---------- [6] Info utili + citazione (single tour/escursione) ---------- */

/* Blocco "Informazioni utili": card a fondo grigio leggero, contenuta e ordinata.
   I selettori .single-info sono class-level in main.css → override per load-order. */
.single-info {
  background: transparent;
  padding: 0;
  margin: var(--sp-lg) 0;
  font-size: 16px;
  line-height: 1.6;
}
.single-info .col-sm-10 {
  background: var(--vm-surface);
  border-radius: 14px;
  padding: var(--sp-lg) var(--sp-lg);
}
.single-info .info-title {
  font-family: var(--vm-font-body);
  color: var(--vm-heading);
  font-size: 1.35rem;
  font-weight: 700;
  text-transform: none;
  margin: 0 0 var(--sp-sm);
  padding-bottom: var(--sp-sm);
  border-bottom: 1px solid var(--vm-line);
}
.single-info .info-sm-title {
  font-family: var(--vm-font-body);
  color: var(--vm-heading);
  font-size: 1.05rem;
  font-weight: 700;
  text-transform: none;
  margin: var(--sp-md) 0 var(--sp-xs);
}
.single-info .info-txt {
  margin-bottom: var(--sp-xs);
  color: var(--vm-ink);
}

/* Liste incluso/escluso: marker custom (✓ verde / ✕ muted), niente pallini */
.single-info .info-incluso ul,
.single-info .info-escluso ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.single-info .info-incluso li,
.single-info .info-escluso li {
  position: relative;
  padding-left: 28px;
  margin-bottom: var(--sp-xs);
  line-height: 1.5;
}
.single-info .info-incluso li:before {
  content: '\2713'; /* check */
  position: absolute;
  left: 0;
  top: 0;
  color: var(--vm-ok);
  font-weight: 700;
}
.single-info .info-escluso li:before {
  content: '\2715'; /* x */
  position: absolute;
  left: 0;
  top: 0;
  color: var(--vm-muted);
  font-weight: 700;
}

/* Citazione: pullquote editoriale pulito (unico uso serif tra i blocchi flex) */
#main-content #single .flex-citazione {
  font-family: var(--vm-font-head);
  color: var(--vm-heading);
  font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem);
  line-height: 1.4;
  font-style: italic;
  text-align: left;
  border-left: 3px solid var(--vm-orange);
  padding: var(--sp-xs) 0 var(--sp-xs) var(--sp-md);
  margin: var(--sp-md) 0;
}

/* ---------- [7] Header — top-bar slim + barra principale + CTA ---------- */
/* Wrapper header = unico elemento fixed (topbar + mainbar insieme). */
#vm-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 28000001;
  background: var(--vm-white);
  box-shadow: 0 1px 0 var(--vm-line), 0 6px 20px rgba(33, 31, 27, .05);
}
/* la mainbar non è più fixed da sola (lo è il wrapper) */
#vm-header .navbar.vm-mainbar {
  position: static;
  box-shadow: none;
  margin: 0;
  border: 0;
}
/* i pseudo-elementi clearfix di .container diventano flex-item e rompono lo
   spazio (l'::after va flush a destra spingendo il menu a sinistra) → off */
.vm-mainbar-inner:before, .vm-mainbar-inner:after,
.vm-topbar-inner:before, .vm-topbar-inner:after { display: none; }

/* Top-bar slim */
.vm-topbar {
  background: var(--vm-cream);
  border-bottom: 1px solid var(--vm-line);
  font-size: 13px;
  overflow: hidden;
  max-height: 60px;
  transition: max-height 280ms ease, opacity 200ms ease;
}
/* scroll giù: la top-bar collassa, la mainbar risale a filo viewport */
#vm-header.vm-topbar-hidden .vm-topbar {
  max-height: 0;
  opacity: 0;
  border-bottom-color: transparent;
}
.vm-topbar-inner {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 22px;
  min-height: 46px;
}
/* CTA nella top-bar (desktop) */
.vm-cta-top { padding: 7px 16px; }
/* icona WhatsApp accanto alla CTA (come la sticky a fondo pagina) */
.vm-cta-wa-top {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  margin-left: -12px; /* avvicina l'icona alla CTA: coppia visiva */
  border-radius: 50%;
  background: #25d366; /* verde WhatsApp */
  color: #fff;
  font-size: 18px;
  text-decoration: none;
  transition: transform 160ms ease;
}
.vm-cta-wa-top:hover { transform: scale(1.08); color: #fff; }
/* "24/7 support" (link wa.me) ridondante nella top-bar: sostituito dall'icona WhatsApp.
   Resta nel footer (menu_help) intatto. */
.vm-topbar-menu li:has(> a[href*="wa.me"]) { display: none; }

/* Dropdown "Info & servizi" nella top-bar (apre su hover, card pulita) */
.vm-topbar-menu .dropdown { position: relative; }
.vm-topbar-menu .dropdown > a .caret { margin-left: 5px; }
.vm-topbar-menu .dropdown-menu {
  display: none;
  position: absolute;
  right: 0; left: auto; top: 100%;
  margin-top: 8px;
  min-width: 250px;
  list-style: none;
  padding: 8px 0;
  background: var(--vm-white);
  border: 1px solid var(--vm-line);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(33, 31, 27, .12);
  text-align: left;
  z-index: 30000000;
}
/* apertura al click (coerente con la nav principale): Bootstrap toggla .open */
.vm-topbar-menu .dropdown.open .dropdown-menu { display: block; }
/* l'overflow:hidden della top-bar (per il collasso su scroll) tagliava il
   dropdown aperto facendolo sparire sotto la mainbar → mostralo quando aperto */
.vm-topbar:has(.dropdown.open) { overflow: visible; }
.vm-topbar-menu .dropdown-menu > li { margin: 0; }
.vm-topbar-menu .dropdown-menu > li > a {
  display: block;
  padding: 10px 22px;
  color: var(--vm-heading);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.vm-topbar-menu .dropdown-menu > li > a:hover { color: var(--vm-orange); }
.vm-topbar-menu {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  align-items: center;
  gap: 20px;
}
.vm-topbar-menu > li { margin: 0; }
.vm-topbar-menu > li > a,
.vm-topbar .vm-social a {
  color: var(--vm-muted);
  text-decoration: none;
  font-weight: 600;
  transition: color 150ms ease;
}
.vm-topbar-menu > li > a:hover,
.vm-topbar .vm-social a:hover { color: var(--vm-orange); }

/* CTA "Richiedi preventivo" */
.vm-cta {
  display: inline-block;
  white-space: nowrap;
  background: var(--vm-orange);
  color: #fff;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 160ms ease;
}
.vm-cta:hover, .vm-cta:focus { background: var(--vm-orange-dark); color: #fff; }

/* Voci nav principale in UPPERCASE (scelta header). Override del no-uppercase di [3]. */
.navbar #navbar .navbar-nav > li > a {
  text-transform: uppercase;
  letter-spacing: .4px;
  white-space: nowrap;
}

/* Offset contenuto = altezza header (topbar 36 + mainbar 80) */
#main-content { margin-top: 116px; }

/* --- Desktop ≥992: layout flex (logo | nav + CTA), logo pulito --- */
@media (min-width: 992px) {
  .vm-mainbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  #vm-header #navbar.navbar-collapse {
    display: flex !important;
    align-items: center;
    gap: 0;
    margin-left: auto; /* spinge il menu a filo del bordo destro del container */
    float: none;
    width: auto;
    height: auto !important;
    padding: 0;
  }
  #vm-header #navbar .navbar-nav {
    float: none;
    display: flex;
    align-items: center;
    margin: 0;
  }
  /* voci più compatte per stare su una riga con l'uppercase */
  #vm-header #navbar .navbar-nav > li > a {
    padding-left: 11px;
    padding-right: 11px;
  }
  /* ultima voce a filo col bordo destro del container */
  #vm-header #navbar .navbar-nav > li:last-child > a { padding-right: 0; }
  .vm-mainbar-inner .navbar-header {
    display: flex;
    align-items: center;
    float: none;
  }
  /* Logo dentro la riga flex (era position:absolute in main.css → usciva dal flusso).
     Prefisso #vm-header per battere il margin-left:-15px di Bootstrap
     (.navbar>.container .navbar-brand:first-child) → logo a filo del padding
     container come il footer, perfettamente allineati. */
  #vm-header .navbar-brand,
  #vm-header .navbar.small-brand .navbar-brand {
    position: static;
    float: none;
    /* logo.png è tagliato a vivo (216x139): box con la sua proporzione,
       contain, a filo sx. padding:0 annulla i 15px di Bootstrap. */
    width: 100px;
    height: 80px;
    margin: 0;
    padding: 0;
    background-image: url(../img/logo.png);
    background-position: left center;
    background-size: contain;
    background-repeat: no-repeat;
  }
  /* CTA principale: su desktop sta nella top-bar → nascondi quella nel menu */
  #vm-header #navbar .vm-cta { display: none; }
  /* il menu utility (Chi siamo/Contatti/Info&servizi) su desktop è nella top-bar →
     nascondi la copia mobile dentro #navbar */
  #vm-header #navbar .vm-nav-help { display: none; }
  /* Dropdown: bordo + ombra (visibili su fondo bianco) + voci più grandi/leggibili */
  .navbar #navbar .dropdown-menu {
    border: 1px solid var(--vm-line);
    border-radius: 8px;
    box-shadow: 0 12px 32px rgba(33, 31, 27, .12);
    padding: 8px 0;
    margin-top: 8px;
    min-width: 220px;
  }
  .navbar #navbar .dropdown-menu li a {
    font-size: 15px;
    line-height: 1.5;
    padding: 10px 22px;
  }
}

/* --- Mobile ≤991: topbar nascosta, offset ridotto, collapse Bootstrap --- */
@media (max-width: 991px) {
  .vm-topbar { display: none; }
  #main-content { margin-top: 80px; }
  /* Bootstrap mette margin:-15px su .navbar-header (mobile) → annulla il
     padding del container e il logo finisce a filo edge. Azzero a sx per
     dare il margine come al contenuto. */
  #vm-header .navbar-header { margin-left: 0; }
  /* nav non flottata → la CTA (dopo nel DOM) finisce SOTTO le voci */
  #vm-header #navbar .navbar-nav { float: none; margin: 0; }
  /* CTA nel menu mobile: bottone centrato, sotto le voci */
  #vm-header #navbar .vm-cta {
    display: block;
    text-align: center;
    margin: 14px 15px 18px;
    clear: both;
  }
}

/* ---------- [8] News correlate — card pulite ---------- */
#news.related-news {
  padding-top: 64px;
  padding-bottom: 56px;
  border-top: 1px solid var(--vm-line);
}
#news.related-news .related-title {
  font-family: var(--vm-font-head);
  color: var(--vm-heading);
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem);
  font-weight: 700;
  text-align: center;
  margin: 0 0 40px;
}
#news .vm-news-card { margin-bottom: 32px; }
/* thumbnail: rapporto fisso, angoli morbidi, hover sobrio (no lift/ombra) */
#news .vm-news-thumb {
  display: block;
  overflow: hidden;
  border-radius: 10px;
  background: var(--vm-surface);
}
#news .vm-news-thumb img {
  width: 100%;
  aspect-ratio: 37 / 25;
  object-fit: cover;
  display: block;
  transition: transform 500ms ease, opacity 450ms ease;
}
#news a:hover img { opacity: 1; transform: scale(1.04); }
/* testo allineato a sinistra (taglio editoriale pulito) */
#news.related-news .info {
  padding: 18px 2px 0;
  text-align: left;
}
#news .info .date {
  color: var(--vm-muted);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .3px;
  margin-bottom: 8px;
}
#news.related-news .info h4 {
  font-family: var(--vm-font-body);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.35;
  margin: 0 0 10px;
}
#news.related-news .info h4 a {
  color: var(--vm-heading);
  text-decoration: none;
  transition: color 150ms ease;
}
#news.related-news .info h4 a:hover { color: var(--vm-orange); }
#news.related-news .info .post-extr {
  color: var(--vm-muted);
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 14px;
}
/* "Approfondisci" → pulsantino chiaro (no arancio): bordo sottile, testo heading */
#news .info a.more,
#news .info a.more:hover,
#news .info a.more:focus {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid var(--vm-line);
  border-radius: 6px;
  background: transparent;
  color: var(--vm-heading);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  transition: background-color 160ms ease, border-color 160ms ease;
}
#news .info a.more:hover,
#news .info a.more:focus {
  background: var(--vm-surface);
  border-color: var(--vm-muted);
}
#news .info a.more span { transition: transform 180ms ease; }
#news .info a.more:hover span { transform: translateX(3px); }

/* ---------- [9] Footer — strutturato, voci menu esplose ---------- */
.vm-footer {
  margin-top: 80px;
  background: var(--vm-ink);
  color: #cfcabf;
  padding: 56px 0 28px;
  text-align: left;
}
.vm-footer a { color: #cfcabf; text-decoration: none; transition: color 150ms ease; }
.vm-footer a:hover { color: var(--vm-orange); }

/* griglia top: brand | sitemap | utility */
.vm-footer-top {
  display: grid;
  grid-template-columns: 1fr 3fr 1.1fr;
  gap: 44px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}

/* colonna brand */
.vm-footer-brand #logo_footer {
  width: 210px;
  height: 48px;
  text-indent: -900em;
  background: url(../img/logo.png) no-repeat left center / contain;
  display: inline-block;
  margin: 0 0 18px;
  /* logo nasce scuro (testo+montagne neri): lo schiarisco per il fondo scuro */
  filter: brightness(0) invert(1);
}
.vm-footer-payoff {
  font-size: 14px;
  line-height: 1.6;
  color: #a8a299;
  margin: 0 0 20px;
  max-width: 32ch;
}
.vm-footer-ta { margin-bottom: 18px; }
/* il widget TA inietta un container con sfondo bianco fisso (la "banda" a
   destra): forzo trasparente e larghezza auto */
.vm-footer-ta .widCOE2020,
.vm-footer-ta .widCOEClickWrap,
.vm-footer-ta .TA_certificateOfExcellence {
  background: transparent !important;
  width: auto !important;
}
/* badge nasce nero su trasparente: invert -> bianco, combacia col footer */
.vm-footer-ta img {
  max-width: 120px;
  height: auto;
  filter: invert(1);
}
.vm-footer .social-footer {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  gap: 12px;
}
.vm-footer .social-footer li { margin: 0; }
.vm-footer .social-footer li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%;
  font-size: 17px;
}
.vm-footer .social-footer li a:hover {
  background: var(--vm-orange);
  border-color: var(--vm-orange);
  color: #fff;
}

/* sitemap: una colonna per voce top-level del menu ("esploso") */
.vm-footer-sitemap .vm-sitemap {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 32px 24px;
}
.vm-footer-sitemap .vm-sitemap > li {
  flex: 1 1 140px;
  min-width: 140px;
  margin: 0;
}
/* voci top-level senza sotto-menu (Escursioni, Città imperiali) fuori dal
   footer: restano nella nav principale, qui sbilanciano le colonne */
.vm-footer-sitemap .vm-sitemap > li:not(.menu-item-has-children) { display: none; }
/* titolo colonna = voce top-level */
.vm-footer-sitemap .vm-sitemap > li > a {
  display: block;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .4px;
  text-transform: uppercase;
  margin-bottom: 14px;
  cursor: pointer;
}
.vm-footer-sitemap .vm-sitemap > li > a:hover { color: var(--vm-orange); }
/* sotto-voci */
.vm-footer-sitemap .sub-menu {
  list-style: none;
  margin: 0; padding: 0;
}
.vm-footer-sitemap .sub-menu li { margin: 0 0 9px; }
.vm-footer-sitemap .sub-menu li a {
  font-size: 14px;
  line-height: 1.4;
  color: #b8b2a8;
}

/* colonna utility: allineata a destra, a filo del margine container */
.vm-footer-utility { text-align: right; }
.vm-footer-col-title {
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .4px;
  text-transform: uppercase;
  margin: 0 0 14px;
}
.vm-footer-utility .vm-utility-menu {
  list-style: none;
  margin: 0 0 20px; padding: 0;
}
.vm-footer-utility .vm-utility-menu li { margin: 0 0 9px; }
.vm-footer-utility .vm-utility-menu li a { font-size: 14px; color: #b8b2a8; }

/* barra legale */
.vm-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding-top: 24px;
  font-size: 12.5px;
  line-height: 1.6;
  color: #8b857c;
}
.vm-footer-bottom a { color: #8b857c; }
.vm-footer-meta .sep { margin: 0 8px; opacity: .5; }

/* responsive footer: sotto i 992 griglia a coppie di 2 colonne.
   display:contents promuove i 3 gruppi sitemap + la colonna contatti a celle
   dirette della griglia → 2x2: brand / Tour|Il Marocco / Approf|Info&contatti */
@media (max-width: 991px) {
  .vm-footer-top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 34px 24px;
  }
  .vm-footer-brand { grid-column: 1 / -1; }
  .vm-footer-sitemap,
  .vm-footer-sitemap nav,
  .vm-footer-sitemap .vm-sitemap { display: contents; }
  .vm-footer-sitemap .vm-sitemap > li { flex-basis: auto; min-width: 0; }
  .vm-footer-utility { text-align: left; }
}
@media (max-width: 600px) {
  .vm-footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ---------- [10] Container più largo (taglio moderno) ---------- */
/* Bootstrap .container è 1170px fisso ≥1200. Allargo i contenuti a 1240;
   header e footer restano leggermente più larghi (1300). Gli override di
   header/footer hanno specificità maggiore → vincono sul .container globale. */
@media (min-width: 1200px) {
  .container { width: 1240px; }
  #vm-header .container,
  .vm-footer > .container { width: 1300px; }
}

/* ============================================================
   [11] Polish globale — archivi · liste · tassonomie · 404
   Allinea le pagine-lista alla direzione flat delle single.
   ============================================================ */

/* Sottotitolo sezione: il base `.section-subtitle` di main.css è bianco
   (serve a #tour-operator su fondo scuro) → sugli archivi a fondo chiaro è
   invisibile. Default muted; bianco solo sui fondi scuri noti. */
#main-content .section-subtitle {
  color: var(--vm-muted);
  font-size: clamp(1rem, .95rem + .35vw, 1.18rem);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0;
  text-transform: none;
  max-width: 70ch;
  margin-left: auto;
  margin-right: auto;
}
#main-content #tour-operator .section-subtitle,
#main-content #banner .section-subtitle,
#main-content #slider .section-subtitle { color: #fff; }

/* Titolo sezione: lo stacco di 80px (main.css) è troppo → respiro coerente.
   Serif + clamp già da [1]; qui solo margine e letter-spacing azzerato. */
#main-content .section-title,
#main-content #prossimi-viaggi .section-title,
#main-content #news .section-title {
  margin-bottom: var(--sp-lg);
  letter-spacing: 0;
}

/* Card lista (tours/cities/excursions/tax/tag): flat come le single.
   main.css dà fondo bianco + dim opacity su hover (datato) → trasparente,
   hover sobrio (solo titolo arancio). Niente zoom: il badge .bullet sborda
   il wrapper e l'overflow lo taglierebbe. */
#main-content #prossimi-viaggi .articleWrapper {
  background: transparent;
  padding-bottom: 0;
}
#main-content #prossimi-viaggi a img,
#main-content #prossimi-viaggi a:hover img { opacity: 1; }
#main-content #prossimi-viaggi .info { padding: 16px 6px 0; }
#main-content #prossimi-viaggi .info h4 { transition: color 180ms ease; }
#main-content #prossimi-viaggi .articleWrapper:hover .info h4 { color: var(--vm-orange); }
/* respiro verticale fra le righe: 80px perché il badge .bullet sborda -40px in
   cima alla card sotto, mangiando metà del gap */
#main-content #prossimi-viaggi article { margin-bottom: 80px; }

/* 404: contenuto centrato e sobrio */
#main-content #about .content {
  text-align: center;
  font-size: 1.1rem;
  color: var(--vm-muted);
  padding-bottom: var(--sp-xl);
}

/* ============================================================
   [12] Micro-animazioni — reveal on scroll + smooth scroll
   Progressive enhancement: vm-anim.js aggiunge `vm-anim` all'<html> e le
   classi .vm-reveal SOLO se JS attivo (senza JS → tutto visibile). Gli
   elementi sopra-la-piega non vengono animati (no flash). reduced-motion →
   nessuna animazione. NB i blocchi flex/.wow restano gestiti da WOW.js.
   ============================================================ */
.vm-anim .vm-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 620ms cubic-bezier(.22,.61,.36,1),
              transform 620ms cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.vm-anim .vm-reveal.vm-in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .vm-anim .vm-reveal { opacity: 1; transform: none; transition: none; }
}

/* ancore: compensa l'header fisso anche sui salti nativi/tastiera */
html { scroll-padding-top: 128px; }
@media (max-width: 991px) { html { scroll-padding-top: 92px; } }

/* ---------- [13] Sfondi full-bleed responsive (var desktop/mobile) ---------- */
/* Le section hero non passano più da jQuery.Lazy: lo sfondo arriva da --bg
   (slide 1920) con fallback mobile --bg-m (slide_mobile 980) sotto i 768px. */
#banner, #slider, #newsletter, #download {
  background-image: var(--bg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
@media (max-width: 768px) {
  #banner, #slider, #newsletter, #download {
    background-image: var(--bg-m);
  }
}

/* ---------- [14] CTA sticky globale (preventivo + WhatsApp) ---------- */
#vm-sticky-cta {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 27000000; /* sotto #vm-header (28000001) */
  display: flex;
  align-items: center;
  gap: 10px;
}
#vm-sticky-cta .vm-sticky-preventivo {
  background: var(--vm-orange);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  padding: 14px 20px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(33, 31, 27, .18);
  transition: background-color 160ms ease;
}
#vm-sticky-cta .vm-sticky-preventivo:hover { background: var(--vm-orange-dark); color: #fff; }
#vm-sticky-cta .vm-sticky-wa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #25d366; /* verde WhatsApp */
  color: #fff;
  font-size: 26px;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(33, 31, 27, .18);
  transition: transform 160ms ease;
}
#vm-sticky-cta .vm-sticky-wa:hover { transform: scale(1.06); color: #fff; }
@media print { #vm-sticky-cta { display: none; } }
@media (max-width: 575px) {
  #vm-sticky-cta { right: 12px; bottom: 12px; gap: 8px; }
  #vm-sticky-cta .vm-sticky-preventivo { padding: 12px 16px; font-size: 14px; }
  #vm-sticky-cta .vm-sticky-wa { width: 46px; height: 46px; font-size: 23px; }
}

/* ---------- [15] Home — hero sobrio · lanci · intro ---------- */
/* Hero carousel: più sobrio (altezza contenuta, overlay leggibile, titolo serif). */
#home-slider .carousel-cell {
  min-height: 62vh;
  max-height: 680px;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  position: relative;
}
#home-slider .carousel-cell:before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(33,31,27,.15), rgba(33,31,27,.45));
}
#home-slider .cell-content { position: relative; z-index: 2; }
#home-slider .carousel-cell h2 {
  font-family: var(--vm-font-head);
  color: #fff;
  font-size: clamp(1.8rem, 1.2rem + 2.4vw, 3rem);
  line-height: 1.15;
  margin: 0 0 12px;
  text-transform: none;
}
#home-slider .carousel-cell p {
  color: #fff;
  font-size: clamp(1rem, .95rem + .5vw, 1.25rem);
  margin: 0 0 22px;
}

/* Intro presentazione: fascia editoriale premium (fondo crema, misura leggibile,
   kicker, pull-quote serif). Il contenuto è wysiwyg ACF (h2 arancio + p + em). */
#testo_intro { padding: 84px 0; background: var(--vm-cream); }
/* H1 allineato a sinistra sullo stesso blocco del testo (1000px) → stesso asse,
   stretto al kicker sotto come unità-titolo */
#testo_intro .vm-intro-h1{
	font-family:"Playfair Display",Georgia,serif;
	font-weight:700;
	font-size:clamp(28px,3.4vw,40px);
	line-height:1.12;
	color:var(--vm-heading);
	max-width:1000px;
	margin:0 auto 16px;
	text-align:left;
}
#testo_intro .vm-intro-text {
  max-width: 1000px;
  margin: 0 auto;
  text-align: left;
  font-size: clamp(1.02rem, .98rem + .35vw, 1.18rem);
  line-height: 1.75;
  color: var(--vm-ink);
  columns: 2;
  column-gap: 56px;
}
#testo_intro .vm-intro-text p { break-inside: avoid; }
/* kicker e citazione a tutta larghezza sopra le 2 colonne */
#testo_intro .vm-intro-text h2,
#testo_intro .vm-intro-text p:has(em) { column-span: all; }
@media (max-width: 767px) {
  #testo_intro .vm-intro-text { columns: 1; max-width: 64ch; }
}
/* armonizza l'arancio editoriale (#ff9900 inline) col brand */
#testo_intro .vm-intro-text [style*="#ff9900"],
#testo_intro .vm-intro-text [style*="255, 153, 0"] { color: var(--vm-orange) !important; }
/* titolo (h2 arancio uppercase) → kicker raffinato */
#testo_intro .vm-intro-text h2 {
  font-family: var(--vm-font-body);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: 1.8px;
  line-height: 1.3;
  margin: 0 0 44px; /* eyebrow stretto all'H1 sopra, ampio respiro prima del corpo */
}
/* sotto-titoli arancio dentro i p (es. "Cosa facciamo di diverso?") */
#testo_intro .vm-intro-text p > span[style*="#ff9900"] strong,
#testo_intro .vm-intro-text p > span[style*="255, 153, 0"] strong {
  font-family: var(--vm-font-head);
  font-size: 1.35rem;
  font-weight: 700;
}
#testo_intro .vm-intro-text p { margin: 0 0 12px; }
/* spacer wysiwyg (<p>&nbsp;</p>) → respiro contenuto */
#testo_intro .vm-intro-text p:empty { display: none; }
/* citazione (em) → pull-quote serif, staccata */
#testo_intro .vm-intro-text em {
  display: block;
  font-family: var(--vm-font-head);
  font-style: italic;
  font-size: clamp(1.4rem, 1.1rem + 1.1vw, 1.95rem);
  line-height: 1.3;
  color: var(--vm-heading);
  border-left: 3px solid var(--vm-orange);
  padding-left: 22px;
  margin: 18px 0 30px;
}

/* ---------- [16] Banner CTA — foto dentro container + box bianco editoriale ---------- */
/* Prima: testo sulla foto a tutta larghezza (titolo verde illeggibile).
   Ora: la foto vive DENTRO il container (arrotondata), la card bianca la sovrappone
   a sinistra. Lo sfondo passa da #banner a .vm-banner-inner (gli altri
   #slider/#newsletter/#download restano full-bleed da [13]). Specificità #banner
   per battere #banner h4 / #banner p di main.css. */
#banner {
  background-image: none;
  background-color: transparent;
  padding: 24px 0 56px;
}
#banner .vm-banner-inner {
  position: relative;
  background-image: var(--bg);
  background-size: cover;
  background-position: center;
  border-radius: 12px;
  min-height: 460px;
  display: flex;
  align-items: center;
  padding: 40px;
}
#banner .vm-banner-card {
  position: relative;
  z-index: 2;
  background: var(--vm-white);
  max-width: 480px;
  padding: 40px 40px 36px;
  border-radius: 6px;
  box-shadow: 0 22px 50px rgba(33, 31, 27, .22);
  text-align: left;
}
#banner .vm-banner-title {
  font-family: var(--vm-font-head);
  color: var(--vm-heading);
  font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.4rem);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  margin: 0 0 14px;
}
#banner .vm-banner-text {
  color: var(--vm-muted);
  font-size: 1.05rem;
  line-height: 1.6;
  margin: 0 0 24px;
}
#banner a.vm-banner-btn {
  display: inline-block;
  background: var(--vm-orange);
  border-color: var(--vm-orange);
  color: #fff;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  padding: 13px 28px;
  border-radius: 4px;
  width: auto;
}
#banner a.vm-banner-btn:hover,
#banner a.vm-banner-btn:focus {
  background: var(--vm-orange-dark);
  border-color: var(--vm-orange-dark);
  color: #fff;
}
@media (max-width: 767px) {
  #banner { padding: 16px 0 40px; }
  #banner .vm-banner-inner { min-height: 0; padding: 24px; align-items: stretch; }
  #banner .vm-banner-card { max-width: none; width: 100%; padding: 28px 24px; }
}

/* [17] BREADCRUMB --------------------------------------------------------- */
.vm-breadcrumb{
	padding:14px 0;
	background:var(--vm-cream);
	border-bottom:1px solid var(--vm-line);
	font-size:14px;
	color:var(--vm-muted);
}
.vm-breadcrumb a{ color:var(--vm-heading); text-decoration:none; }
.vm-breadcrumb a:hover{ color:var(--vm-orange); }
.vm-breadcrumb .separator{ margin:0 8px; color:var(--vm-line); }
@media print{ .vm-breadcrumb{ display:none; } }

/* [18] CONTATTI — recapiti puliti a sx + form in box sabbia (no bordi) a dx ---- */
.vm-contatti .section-title { margin-bottom: 36px; }
.vm-contatti-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px; /* respiro tra recapiti e form */
  align-items: start;
  margin: 8px 0 64px;
}
/* sx: recapiti, nessun box, testo pulito allineato a sinistra (override inline del contenuto) */
.vm-contatti-info, .vm-contatti-info * { text-align: left !important; }
.vm-contatti-info > *:first-child { margin-top: 0; }
/* dx: form in box sabbia senza bordi, padding generoso */
.vm-contatti-form {
  background: var(--vm-cream);
  border-radius: 14px;
  padding: 44px;
}
.vm-contatti-form-title {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 24px;
  color: var(--vm-heading);
  margin: 0 0 24px;
}
/* input a piena larghezza dentro il box (lo stile bordo/focus arriva da main.css .form .gform_wrapper) */
.vm-contatti-form .gform_wrapper input[type='text'],
.vm-contatti-form .gform_wrapper input[type='email'],
.vm-contatti-form .gform_wrapper input[type='tel'],
.vm-contatti-form .gform_wrapper textarea { width: 100%; }
.vm-contatti-form .gform_wrapper .gform_footer input[type='submit'] { width: 100%; }
@media (max-width: 767px) {
  .vm-contatti-box { grid-template-columns: 1fr; gap: 36px; }
  .vm-contatti-form { padding: 28px 22px; }
}

/* [19] FAQ singolo — respiro sezione (accordion eredita lo stile [4]) */
#main-content .vm-faq-single { padding: 20px 0 60px; }
#main-content .vm-faq-single .section-title { margin-bottom: 28px; }

/* [20] SOCIAL WALL (flow-flow) — adegua al restyle ------------------------- */
/* Card flat con cornice morbida (no ombre, UI pulita), nome sentence-case,
   bottone brand + label IT. Scope #main-content #about per battere il CSS plugin. */
#main-content #about { padding-bottom: 70px; }
#main-content #about .ff-stream { background: transparent; }

/* card: frame leggero, niente ombra/hover-lift */
#main-content #about .ff-item-cont {
	background: #fff;
	border: 1px solid var(--vm-line);
	border-radius: 14px;
	overflow: hidden;
}
#main-content #about .ff-img-holder { border-radius: 0; }

/* respiro interno (l'immagine resta a filo in alto) */
#main-content #about .ff-item-meta { padding: 16px 18px 0; }
#main-content #about .ff-content { padding: 0 18px; color: var(--vm-ink); font-size: 14px; line-height: 1.55; }
#main-content #about .ff-item-bar { margin: 0 18px; padding: 10px 0; border-top: 1px solid var(--vm-line); color: var(--vm-muted); }

/* testata card: nome sentence-case heading brand, nickname ridondante via */
/* .ff-name è l'<a>; il plugin forza il colore link con !important → lo battiamo */
#main-content #about .ff-name {
	text-transform: none;
	font-weight: 700;
	font-size: 15px;
	color: var(--vm-heading) !important;
}
#main-content #about .ff-nickname { display: none; }
#main-content #about .ff-timestamp { color: var(--vm-muted); }

/* "Show more" → bottone brand flat + label IT */
#main-content #about .ff-loadmore-wrapper { margin-top: 36px; }
#main-content #about .ff-loadmore-wrapper .ff-btn {
	display: inline-block;
	background: var(--vm-orange);
	color: #fff;
	border: 0;
	border-radius: 8px;
	padding: 13px 30px;
	font-size: 0; /* nasconde "Show more" del plugin */
	font-weight: 600;
	cursor: pointer;
	transition: background .2s;
}
#main-content #about .ff-loadmore-wrapper .ff-btn:hover { background: var(--vm-orange-dark); }
#main-content #about .ff-loadmore-wrapper .ff-btn::after { content: "Carica altri post"; font-size: 15px; }

/* [21] MODALE GUIDA (lead magnet) ---------------------------------------- */
#hidden_guida { max-width: 560px; }
#hidden_guida .vm-guida-title { margin: 0 0 8px; font-size: 27px; line-height: 1.2; }
#hidden_guida .vm-guida-sub { color: var(--vm-muted); margin: 0 0 22px; }
#hidden_guida .vm-guida-rifiuta { display: block; text-align: center; margin-top: 14px; color: var(--vm-muted); font-size: 14px; text-decoration: underline; }
#hidden_guida .vm-guida-rifiuta:hover { color: var(--vm-ink); }

/* [22] FORM GRAVITY — refinement premium (label sentence-case, input morbidi) -- */
/* Vale per tutti i form .form (Contatti/Prenota/Guida): coerenza + no-uppercase
   (override del blocco "Restyle form Gravity" in main.css, che forzava label uppercase). */
.form .gform_wrapper .gfield_label {
	text-transform: none;
	letter-spacing: 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--vm-muted);
	margin-bottom: 4px;
}
/* "(Obbligatorio)" verboso → asterisco arancio. Solo lo span interno
   .gfield_required_text: il required GF è annidato (outer+inner), targettare
   l'outer raddoppierebbe l'asterisco. */
.form .gform_wrapper .gfield_required_text { font-size: 0; }
.form .gform_wrapper .gfield_required_text::after { content: '*'; font-size: 14px; color: var(--vm-orange); }
/* input: angoli morbidi + bordo linea (altezza/padding/focus ereditati da main.css).
   margin-top:0 → l'input "abbraccia" la sua label (override del 6px di main.css);
   la separazione tra gruppi la dà gfield margin-bottom sotto. */
.form .gform_wrapper input[type='text'],
.form .gform_wrapper input[type='email'],
.form .gform_wrapper input[type='tel'],
.form .gform_wrapper input[type='number'],
.form .gform_wrapper input[type='date'],
.form .gform_wrapper textarea,
.form .gform_wrapper select {
	border-radius: 8px;
	border-color: var(--vm-line);
	margin-top: 0;
}
.form .gform_wrapper input::placeholder,
.form .gform_wrapper textarea::placeholder { color: var(--vm-muted); opacity: .65; font-size: 15px; }
/* ritmo verticale: gruppo (label+input) coeso, più aria tra un campo e l'altro.
   ⚠️ GF 2.8 (tema orbital) rende i campi come <div class="gfield">, NON <li> →
   il selettore DEVE essere .gform_fields .gfield (un li.gfield non matcha mai). */
.form .gform_wrapper .gform_fields .gfield { margin-bottom: 30px; }
.form .gform_wrapper .gform_fields .gfield:last-child { margin-bottom: 0; }
.form .gform_wrapper .gfield--type-checkbox .gfield_label { margin-bottom: 10px; }
.form .gform_wrapper .gform_footer { margin-top: 28px; }
.form .gform_wrapper .gform_footer input[type='submit'],
.form .gform_wrapper .gform_footer .gform_button { border-radius: 8px; }

/* [23] Fix hover bottoni/icone.
   Bootstrap (a:hover{text-decoration:underline}) e il restyle (a:hover{color:arancio})
   colpiscono i bottoni/icone perché le loro :hover non azzeravano text-decoration
   né bloccavano il color. Le icone WhatsApp devono restare bianche, mai arancio. */
.vm-cta:hover, .vm-cta:focus,
.vm-cta-wa-top:hover, .vm-cta-wa-top:focus,
#vm-sticky-cta .vm-sticky-preventivo:hover, #vm-sticky-cta .vm-sticky-preventivo:focus,
#vm-sticky-cta .vm-sticky-wa:hover, #vm-sticky-cta .vm-sticky-wa:focus { text-decoration: none; }
/* icone WhatsApp: bianche su hover/focus (anche il glyph <i>) */
.vm-cta-wa-top:hover, .vm-cta-wa-top:focus,
.vm-cta-wa-top:hover i, .vm-cta-wa-top:focus i,
#vm-sticky-cta .vm-sticky-wa:hover, #vm-sticky-cta .vm-sticky-wa:focus,
#vm-sticky-cta .vm-sticky-wa:hover i, #vm-sticky-cta .vm-sticky-wa:focus i { color: #fff; }
/* link WhatsApp "24/7 support" nel footer: resta chiaro su hover, non arancio */
.vm-footer a[href*="wa.me"]:hover, .vm-footer a[href*="wa.me"]:focus { color: #fff; }

/* ============================================================
   Box "In breve" (TL;DR) — GEO/AI citation
   In cima alle guide (single.php / tmpl_flex.php). UI pulita:
   accent sobrio a sinistra, no ombre, no uppercase.
   ============================================================ */
.vm-in-breve {
  margin: 0 0 var(--sp-lg, 2rem);
  padding: var(--sp-md, 1.25rem) var(--sp-lg, 1.75rem);
  background: var(--vm-cream, #faf7f1);
  border: 1px solid var(--vm-line, #e7e1d6);
  border-radius: 4px;
  text-align: left;
}
.vm-in-breve-tt {
  font-family: var(--vm-font-head, 'Playfair Display', Georgia, serif);
  font-size: 1.25rem;
  color: var(--vm-heading, #57581c);
  margin: 0 0 var(--sp-sm, .5rem);
}
.vm-in-breve-sintesi {
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--vm-ink, #211f1b);
  margin: 0 0 var(--sp-sm, .75rem);
}
.vm-in-breve-punti {
  margin: 0;
  padding-left: 1.25rem;
  color: var(--vm-ink, #211f1b);
}
.vm-in-breve-punti li { margin: 0 0 .35rem; line-height: 1.45; }
.vm-in-breve-punti li:last-child { margin-bottom: 0; }

/* ============================================================
   Box "Consiglio di Antonella" — layout flex "consiglio"
   Accento a sinistra per distinguerlo dal box "In breve" (bordo uniforme).
   ============================================================ */
.vm-consiglio {
  margin: 0 0 var(--sp-lg, 2rem);
  padding: var(--sp-md, 1.25rem) var(--sp-lg, 1.75rem);
  background: var(--vm-cream, #faf7f1);
  border-left: 3px solid var(--vm-heading, #57581c);
  border-radius: 0 4px 4px 0;
  text-align: left;
}
.vm-consiglio-tt {
  font-family: var(--vm-font-head, 'Playfair Display', Georgia, serif);
  font-size: 1.05rem;
  font-style: italic;
  color: var(--vm-heading, #57581c);
  margin: 0 0 var(--sp-sm, .5rem);
}
.vm-consiglio-testo {
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--vm-ink, #211f1b);
  margin: 0;
}

/* ============================================================
   Indice cliccabile (TOC) — auto-estratto dagli H2 del layout testo.
   Compare solo con 2+ titoli. Stile sobrio, coerente al box "In breve".
   ============================================================ */
.vm-toc {
  margin: 0 0 var(--sp-lg, 2rem);
  padding: var(--sp-md, 1.25rem) var(--sp-lg, 1.75rem);
  background: var(--vm-cream, #faf7f1);
  border: 1px solid var(--vm-line, #e7e1d6);
  border-radius: 4px;
  text-align: left;
}
.vm-toc-tt {
  font-family: var(--vm-font-head, 'Playfair Display', Georgia, serif);
  font-size: 1.25rem;
  color: var(--vm-heading, #57581c);
  margin: 0 0 var(--sp-sm, .5rem);
}
.vm-toc-list {
  margin: 0;
  padding-left: 1.25rem;
  color: var(--vm-ink, #211f1b);
}
.vm-toc-list li { margin: 0 0 .35rem; line-height: 1.45; }
.vm-toc-list li:last-child { margin-bottom: 0; }
.vm-toc-list a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.vm-toc-list a:hover, .vm-toc-list a:focus { color: var(--vm-heading, #57581c); }

/* ============================================================
   Link testuali nei blocchi WYSIWYG (testo/citazione) — molti hanno
   uno <span style="color:#0000ff"> incollato da fonti esterne che
   sovrascrive il colore brand: !important necessario per batterlo,
   stesso problema già gestito per l'arancio a "armonizza l'arancio
   editoriale" qui sopra.
   ============================================================ */
.flex-testo a, .flex-citazione a {
  color: var(--vm-orange) !important;
  text-decoration: underline;
  font-weight: bold;
}
.flex-testo a span[style], .flex-citazione a span[style] {
  color: inherit !important;
}
.flex-testo a:hover, .flex-testo a:focus,
.flex-citazione a:hover, .flex-citazione a:focus {
  color: var(--vm-orange-dark) !important;
  text-decoration: none;
}

/* [51] Banner consenso Complianz sopra a tutto (sticky CTA = 27000000, header = 28000001).
   Un consent banner deve stare in cima; altrimenti #vm-sticky-cta lo copre (WA + "Richiedi preventivo"). */
#cmplz-cookiebanner-container,
.cmplz-cookiebanner,
#cmplz-manage-consent {
  z-index: 2147483000 !important;
}

/* [52] Il tema non ha una regola globale .screen-reader-text (solo scoped a .gform_wrapper):
   nel documento Complianz lo span "Consent to service X" restava VISIBILE e schiacciava la
   tabella "Cookie inseriti". Lo nascondo (visually-hidden standard) solo dentro il doc Complianz. */
#cmplz-document .screen-reader-text,
#cmplz-cookies-overview .screen-reader-text {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}