@import url('https://fonts.googleapis.com/css2?family=Andika:ital,wght@0,400;0,700;1,400;1,700&display=swap');

/* =========================================================================
   FONT UNICO DEL SITO: Andika (Google Fonts).
   Standardizza titoli, testi, menu, moduli — sovrascrive Inter/ABeeZee di HU.
   Le icone Font Awesome sono ripristinate subito dopo (Andika ne romperebbe i glifi).
   ========================================================================= */
body, h1, h2, h3, h4, h5, h6,
p, a, span, div, li, ul, ol, dl, dt, dd, td, th, caption,
input, textarea, select, button, label, legend, blockquote, figcaption,
small, strong, em, b, i.text, .sp-megamenu-parent, .sp-megamenu-parent a,
.sp-megamenu-parent span, [class^="sppb-"], [class*=" sppb-"],
.sp-module, .sp-module-title, .sp-module-content,
.offers-slide__title, .offers-slide__text, .offers-slide__more {
  font-family: 'Andika', sans-serif !important;
}
/* Ripristina il font delle ICONE (Font Awesome) sovrascritto dalla regola sopra */
.fa, .fas, .far, .fab, .fal, .fad,
.fa-solid, .fa-regular, .fa-brands, .fa-light, .fa-duotone,
[class^="fa-"], [class*=" fa-"], i[class*="fa"], span[class*="fa-"] {
  font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", "Font Awesome 5 Free", "Font Awesome 5 Brands", "FontAwesome" !important;
}

/* Asset personalizzati migrati da Helix3 (offerte + gallerie) */
/* === Box Offerte (sostituisce mod_news_pro_gk5) === */
.offers-box { background: #f55d36; border-radius: 4px; overflow: hidden; }
.offers-box.offers-blue { background: #0071bc; }
.offers-box .sp-module-title { color:#fff; text-align:center; padding:14px 12px 0; margin:0; font-size:20px; }
.offers-box .sp-module-content { padding: 16px; }
.offers-slider { position: relative; }
.offers-slide { display:none; }
.offers-slide.is-active { display:block; animation: offersFade .5s ease; }
@keyframes offersFade { from{opacity:0} to{opacity:1} }
.offers-slide__title { display:block; text-align:center; color:#fff; font-size:20px; font-weight:700; line-height:1.2; text-decoration:none; margin-bottom:12px; }
.offers-slide__title:hover { color:#fff; text-decoration:underline; }
.offers-slide__img { display:block; margin-bottom:12px; }
.offers-slide__img img { display:block; width:100%; height:auto; border-radius:3px; }
.offers-slide__text { color:#fff; font-size:14px; line-height:1.5; margin-bottom:8px; }
.offers-slide__text p { color:#fff; margin:0 0 6px; }
.offers-slide__more { display:inline-block; color:#fff; font-weight:600; text-decoration:underline; float:right; }
.offers-slide__more:hover { color:#fff; opacity:.85; }
.offers-nav { text-align:center; clear:both; padding-top:12px; }
.offers-dot { display:inline-block; width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.45); margin:0 4px; cursor:pointer; border:0; padding:0; }
.offers-dot.is-active { background:#fff; }

/* === Gallerie autonome (sostituiscono Unite Gallery) === */
/* max-width 1140 centrato: le gallery (Villaggio/Camping ecc.) stanno NEL container
   come in produzione, non full-width (in HU il modulo è nella posizione full-width
   #sp-gallery-articles). */
.c4s-gal { margin: 18px auto; max-width: 1140px; }
.c4s-gal--grid { display:grid; grid-template-columns: repeat(4,1fr); gap:10px; }
@media(max-width:991px){ .c4s-gal--grid{ grid-template-columns:repeat(3,1fr);} }
@media(max-width:575px){ .c4s-gal--grid{ grid-template-columns:repeat(2,1fr);} }
.c4s-gal__item { display:block; overflow:hidden; border-radius:4px; aspect-ratio:4/3; cursor:pointer; }
.c4s-gal__item img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease; }
.c4s-gal__item:hover img { transform:scale(1.07); }
.c4s-gal--slider { position:relative; overflow:hidden; border-radius:6px; }
.c4s-gal--slider .c4s-gal__track { display:flex; overflow:hidden; }
.c4s-gal--slider .c4s-gal__item { flex:0 0 100%; aspect-ratio:16/9; border-radius:0; }
.c4s-gal__nav { position:absolute; top:50%; transform:translateY(-50%); border:0; background:rgba(0,0,0,.45); color:#fff; width:46px; height:46px; border-radius:50%; cursor:pointer; font-size:20px; line-height:1; z-index:2; }
.c4s-gal__nav:hover { background:rgba(0,0,0,.7); }
.c4s-gal__nav--prev{ left:12px; } .c4s-gal__nav--next{ right:12px; }
/* lightbox */
.c4s-lb { position:fixed; inset:0; background:rgba(0,0,0,.93); z-index:100000; display:none; align-items:center; justify-content:center; }
.c4s-lb.is-open { display:flex; }
.c4s-lb__img { max-width:92vw; max-height:86vh; object-fit:contain; box-shadow:0 6px 50px rgba(0,0,0,.6); }
.c4s-lb__btn { position:absolute; background:none; border:0; color:#fff; cursor:pointer; opacity:.85; line-height:1; }
.c4s-lb__btn:hover { opacity:1; }
.c4s-lb__close { top:14px; right:22px; font-size:46px; }
.c4s-lb__prev,.c4s-lb__next { top:50%; transform:translateY(-50%); font-size:52px; padding:10px 18px; }
.c4s-lb__prev{ left:8px; } .c4s-lb__next{ right:8px; }
.c4s-lb__count { position:absolute; bottom:18px; left:0; right:0; text-align:center; color:#fff; font-size:14px; letter-spacing:.05em; }

/* === Override tema camping (robusto, HU non rigenera custom.css) === */
/* PRIMARIO BLU #0071bc — menu */
.sp-megamenu-parent > li.active > a,
.sp-megamenu-parent > li.active > span,
.sp-megamenu-parent > li:hover > a,
.sp-megamenu-parent > li:hover > span,
.sp-megamenu-parent > li.current > a,
.sp-megamenu-parent .sp-dropdown li.active > a,
.sp-megamenu-parent .sp-dropdown li:hover > a,
#sp-header a:hover { color: #0071bc !important; }
/* link contenuto */
#sp-component a { color: #0071bc; }
#sp-component a:hover, #sp-component a:focus { color: #005a94; }
/* pulsanti primari (SP Page Builder + Bootstrap) */
.sppb-btn-primary, .btn-primary, .sp-btn, .btn.btn-primary {
  background-color: #0071bc !important; border-color: #0071bc !important; color: #fff !important;
}
.sppb-btn-primary:hover, .btn-primary:hover, .sp-btn:hover { background-color: #005a94 !important; border-color: #005a94 !important; }
/* BARRA TOP grigio chiaro, testo scuro (come Helix3) */
#sp-top-bar, #sp-header-topbar { background-color: #f5f5f5 !important; }
#sp-top-bar, #sp-top-bar a, #sp-header-topbar, #sp-header-topbar a,
#sp-top-bar .sp-module, #sp-header-topbar .sp-module { color: #777777 !important; }
#sp-top-bar a:hover, #sp-header-topbar a:hover { color: #0071bc !important; }
/* FOOTER blu — SOLO il footer copyright, NON la sezione Contatti #sp-bottom */
#sp-footer, footer.sp-footer { background-color: #0071bc !important; }
/* Testi bianchi e a peso 400 (in locale erano 300 → poco visibili; in prod sono 400) */
#sp-footer, #sp-footer a, #sp-footer p, #sp-footer span, #sp-footer div, #sp-footer li,
#sp-footer .sp-module-title { color: #ffffff !important; font-weight: 400 !important; }
#sp-footer a:hover { color: rgba(255,255,255,.8) !important; }
/* Più respiro (in locale il padding era 0 → footer appiccicato) + contenuto CENTRATO
   come produzione + stacco di "Regolamento Covid" dai due blocchi sopra. */
#sp-footer { padding: 28px 0 !important; }
#sp-footer .sp-module-content, #sp-footer .custom,
#sp-footer [class*="col-"] { text-align: center !important; }
#sp-footer .row + .row { margin-top: 16px; }

/* Sezione Contatti/Dove Siamo (#sp-bottom): CHIARA come produzione
   (bg #f5f5f5, testo scuro, titoli #777, link blu). */
#sp-bottom { background-color: #f5f5f5 !important; color: #212529 !important; padding: 100px 0; }
#sp-bottom .sp-module-title,
#sp-bottom h1, #sp-bottom h2, #sp-bottom h3 { color: #777777 !important; }
#sp-bottom a { color: #0071bc !important; }
#sp-bottom a:hover { color: #005a94 !important; }
/* Full-width come produzione: i 3 blocchi (Contatti/Dove Siamo/immagine) più larghi
   (col-md-3 ~366px invece di 285px del container 1140). */
#sp-bottom .container, #sp-bottom .container-inner { max-width: 100% !important; }
/* offcanvas (menu mobile) attivo blu */
.offcanvas-menu .offcanvas-inner ul.menu li.active > a { color: #0071bc !important; }

/* ============================================================
   HOME — stile portato da Helix3 (produzione) a Helix Ultimate.
   Le sezioni hanno gli stessi ID della produzione, quindi queste
   regole si agganciano direttamente. Valori presi dai computed
   style reali di www.camping4stagioni.it.
   ============================================================ */

/* --- Sfondi grigi/gradiente delle sezioni home (produzione = #f5f5f5) --- */
#sp-slogan-1 { padding: 50px 0; background: #f5f5f5; }
#sp-blocchi-home-1-villaggio,
#sp-blocchi-home-1-camping { padding: 0 0 50px; background: #f5f5f5; } /* padding-bottom = spaziatura tra le SEZIONI */
/* Spaziatura tra card multiple DENTRO la stessa sezione (Camping + Ristorante):
   in produzione il 2° modulo ha margin-top:50px. */
#sp-blocchi-home-1-villaggio .sp-module + .sp-module,
#sp-blocchi-home-1-camping .sp-module + .sp-module { margin-top: 50px; }
#sp-slogan-2,
#sp-slogan-3 {
  padding: 30px 0 60px;
  background: linear-gradient(180deg, #f5f5f5 0%, #ffffff 100%);
  overflow-x: hidden; /* assorbe i margini negativi -12px della .row full-width */
}

/* Righe immagini (sp-slogan-2 = "IL CAMPING 4 STAGIONI", sp-slogan-3) a TUTTA LARGHEZZA
   come produzione (là non c'è .container). Tolgo il vincolo 1140px del container HU;
   la .row interna (margini -12px + col padding 12px) porta le immagini a filo bordo. */
#sp-slogan-2 .container, #sp-slogan-3 .container,
#sp-slogan-2 .container-inner, #sp-slogan-3 .container-inner {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* --- Titolazioni a peso NORMALE come in produzione ---
   In produzione l'h1 è font-weight:normal; in Helix Ultimate la tipografia le mette a 800.
   Riporto tutti i titoli a peso normale (il menu resta invariato, non è un heading). */
#sp-main h1, #sp-main h2, #sp-main h3, #sp-main h4, #sp-main h5, #sp-main h6,
#sp-main .sppb-addon-title, .sp-module-title,
h1, h2, h3, h4, h5, h6 { font-weight: 400 !important; }

/* --- Sezione Servizi/Tariffe/Prenota con sfondo "montagne" ---
   Path relativo (../../../images) così l'immagine si vede anche in locale,
   dove i path assoluti /images/... non risolvono nella sottocartella. */
#sp-blocchi-home-2 {
  padding: 0 0 100px;
  /* posizione left top come produzione (con center le montagne venivano tagliate) */
  background: #f5f5f5 url('../../../images/sfondo-servizi.png') left top / cover no-repeat;
}
/* I due link "e molto altro ancora..." e "scopri tutte le tariffe" (h2 > a):
   in HU erano 32px e arancioni (preset, perché fuori da #sp-component);
   in produzione sono 16px e scuri #212529. */
#sp-blocchi-home-2 h2 { font-size: 16px !important; }
#sp-blocchi-home-2 h2 a { color: #212529 !important; }
#sp-blocchi-home-2 h2 a:hover { color: #0071bc !important; }

/* Sfondo grigio "montagne" anche DIETRO al video (come produzione).
   Qui l'immagine è ripetuta a dimensione naturale (repeat, 0 0), non cover.
   #sp-slide identifica sia la <section> sia la colonna interna → lo prendono entrambe. */
#sp-slide { background: url('../../../images/sfondo-servizi.png') 0 0 repeat; }

/* Colonna del video a padding 0 (equivale a class "p-0" sulla col-lg-12):
   toglie il bordo bianco attorno al video dato dal gutter di default della colonna. */
#sp-slide.col-lg-12 { padding: 0 !important; }

/* Sfondo "montagne" sulle PAGINE INTERNE (villaggio, camping, gallery, piantina,
   servizi, tariffe, offerte, prenota...): in produzione è su #sp-main-body
   (#f5f5f5 + sfondo-servizi.png, dim. naturale, left top, no-repeat).
   Escludo la home (view-featured), che ha già i suoi sfondi per-sezione. */
body:not(.view-featured) #sp-main-body {
  background: #f5f5f5 url('../../../images/sfondo-servizi.png') left top no-repeat !important;
}

/* Blocco "Info & Prenotazioni" (pagina Offerte = modulo in pos right, dentro #sp-right):
   in produzione NON ha riquadro e i link/icone sono BLU; in HU aveva un bordo #f3f3f3
   (box) e link ARANCIONI (preset). Escludo le offerte (.offers-box) che stanno pure lì. */
#sp-right .sp-module:not(.offers-box) { border: none !important; }
#sp-right .sp-module:not(.offers-box) a,
#sp-right .sp-module:not(.offers-box) i,
#sp-right .sp-module:not(.offers-box) [class*="fa-"] { color: #0071bc !important; }
#sp-right .sp-module:not(.offers-box) a:hover { color: #005a94 !important; }

/* Box offerte su PRENOTA: il box è dentro #sp-component (articolo), quindi i link
   titolo/leggi-tutto delle offerte prendevano il blu di `#sp-component a` e sparivano
   sul fondo blu. Forzo bianco (il testo non-link era già bianco). */
#sp-offerte .offers-slide__title,
#sp-offerte .offers-slide__more { color: #ffffff !important; }
#sp-offerte .offers-slide__title:hover,
#sp-offerte .offers-slide__more:hover { color: #ffffff !important; text-decoration: underline; }

/* ===== Pagina OFFERTE (vista categoria blog): UNA offerta per riga,
   foto a sinistra + titolo/descrizione/link a destra (testo allineato a sinistra).
   Sostituisce la griglia a 3 colonne. ===== */
.layout-blog .article-list .row > [class*="col-"] {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  margin-bottom: 30px;
}
.layout-blog .article-list .article {
  display: flex;
  gap: 24px;
  align-items: center; /* immagine centrata in altezza rispetto al testo */
  text-align: left;
}
.layout-blog .article-list .article-intro-image {
  float: none !important;
  margin: 0 !important;
  flex: 0 0 300px;
  max-width: 300px;
}
.layout-blog .article-list .article-intro-image img { width: 100%; height: auto; border-radius: 4px; }
.layout-blog .article-list .article-body { flex: 1 1 auto; min-width: 0; text-align: left; }
.layout-blog .article-list .article-body h1,
.layout-blog .article-list .article-body h2,
.layout-blog .article-list .article-body h3,
.layout-blog .article-list .readmore { text-align: left !important; }
.layout-blog .article-list .readmore a { display: inline-block; }
/* su mobile impila foto sopra e testo sotto */
@media (max-width: 575px) {
  .layout-blog .article-list .article { flex-direction: column; }
  .layout-blog .article-list .article-intro-image { flex-basis: auto; max-width: 100%; }
}

/* --- Form Prenota arancione --- */
.form-prenota { background: #f55d36; padding: 15px; }
.form-prenota #submit, #userForm #submit { width: 100%; }

/* --- Icone servizi --- */
.servizi { font-size: 12px; line-height: 13px; }
.servizi img { display: inline; }

/* --- VIDEO hero (la struttura HTML è già nel modulo mod-custom145;
       qui c'è solo lo stile. L'avvio del player è nel js/custom.js). --- */
.video-background { position: relative; inset: 0; overflow: hidden; clear: both; background-color: #000; }
.video-overlay {
  position: absolute; inset: 0; overflow: hidden; clear: both;
  background: #000 url('https://i.ytimg.com/vi_webp/ajjzjII7HNs/maxresdefault.webp') center center / cover no-repeat;
}
.video-foreground, .video-background iframe {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; clear: both; pointer-events: none;
}
.video-foreground { left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; }
.video-overlay img { position: absolute; left: 50%; top: 65%; transform: translate(-50%, -50%); }
#mute-unmute { z-index: 98; position: absolute; bottom: 40px; right: 40px; color: #fff; background: transparent; width: auto; height: auto; border: 0; cursor: pointer; }
#mute-unmute::after { font-family: "Font Awesome 5 Free"; font-size: 40px; font-weight: 700; font-style: normal; }
#mute-unmute:not(.mute)::after { content: "\f026"; }
#mute-unmute.mute::after { content: "\f028"; }

/* --- Logo ingrandito (produzione = 40px; ingrandito su richiesta utente) --- */
#sp-header .logo img,
#sp-header a.logo img,
#sp-header img.sp-default-logo,
#sp-header .sp-default-logo { max-height: 56px !important; height: auto; width: auto; }

/* --- TOP BAR a 4 slot uniformi (come produzione Helix3) ---
   In HU la barra è divisa in 2 metà col-lg-6: sinistra = lingue+covid+telefoni,
   destra = contact-info nativo (DUPLICATO) + email + indirizzo.
   Nascondiamo il duplicato e disponiamo i 4 gruppi in 4 colonne uguali. */
#sp-top-bar .sp-contact-info { display: none !important; } /* duplica telefoni/email dei moduli custom */

@media (min-width: 992px) {
  #sp-top-bar .row { align-items: center; }
  #sp-top-bar .sp-column { width: 100%; }

  /* Metà sinistra → 2 slot: [lingue sopra + Covid sotto] | [telefoni] */
  #sp-top-bar .sp-column.text-lg-start {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    text-align: center;
    column-gap: 10px;
  }
  #sp-top-bar .sp-column.text-lg-start > .sp-module { margin: 0; }
  #sp-top-bar .sp-column.text-lg-start > .sp-module:nth-child(1) { grid-column: 1; grid-row: 1; } /* lingue */
  #sp-top-bar .sp-column.text-lg-start > .sp-module:nth-child(2) { grid-column: 1; grid-row: 2; } /* Regolamento Covid */
  #sp-top-bar .sp-column.text-lg-start > .sp-module:nth-child(3) { grid-column: 2; grid-row: 1 / span 2; align-self: center; } /* telefoni */

  /* Metà destra → 2 slot: [email] | [indirizzo] (il contact-info nativo è display:none, non occupa cella) */
  #sp-top-bar .sp-column.text-lg-end {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    text-align: center;
    column-gap: 10px;
  }
  #sp-top-bar .sp-column.text-lg-end > .sp-module { margin: 0; }
}

/* Icone email/indirizzo: BIANCHE sul box colorato + CENTRATE sopra il testo.
   Il box colorato è .sppb-icon > span; il mio override tema (#sp-top-bar a {color:#777})
   le rendeva grigie perché quei <i> non hanno colore inline (il telefono sì).
   La utility Bootstrap .text-lg-end (text-align:right!important) le spostava a destra. */
#sp-top-bar .sppb-icon > span a,
#sp-top-bar .sppb-icon > span i { color: #ffffff !important; }
#sp-top-bar .sp-column.text-lg-end,
#sp-top-bar .sp-column.text-lg-end .sppb-icon { text-align: center !important; }

/* ============================================================
   MOBILE (< 992px)
   ============================================================ */
@media (max-width: 991.98px) {
  /* --- DOPPIO LOGO: quando l'header è sticky, HU forza visibile anche il logo
     desktop (.logo-sticky/.logo-default) su mobile → resta solo il logo-phone. --- */
  #sp-header .logo-image.logo-default,
  #sp-header .logo-image.logo-sticky { display: none !important; }

  /* --- TOP BAR: tutte le icone su UNA sola riga, email/indirizzo più piccole --- */
  #sp-top-bar { padding: 6px 0 !important; }
  #sp-top-bar .container-inner { padding: 0 6px !important; }
  #sp-top-bar .row { flex-wrap: nowrap !important; align-items: center !important; justify-content: center !important; }
  #sp-top-bar .col-lg-6 { flex: 0 0 auto !important; width: auto !important; max-width: none !important; padding: 0 4px !important; }
  #sp-top-bar .sp-column { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 8px !important; }
  #sp-top-bar .sp-module { margin: 0 !important; }
  #sp-top-bar .sppb-icon p { margin: 0 !important; }
  /* --- ICONE OMOGENEE: tutti i box 24x24 (dimensione mail/places), glifo 14px, centrati --- */
  /* box colorati: email/indirizzo = <span>, telefono/mobile = la <i> stessa */
  #sp-top-bar .sppb-icon span[style*="background"],
  #sp-top-bar #mod-custom88 .sppb-icon i {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 5px !important;
    line-height: 1 !important;
    font-size: 14px !important;
    box-sizing: border-box !important;
    vertical-align: middle;
  }
  /* glifo dentro i box email/indirizzo alla stessa dimensione */
  #sp-top-bar .sppb-icon span[style*="background"] i {
    font-size: 14px !important; width: auto !important; height: auto !important; line-height: 1 !important;
  }
  /* spaziatura uniforme tra tutte le icone */
  #sp-top-bar .sp-column { gap: 8px !important; }
  #sp-top-bar #mod-custom88 .sppb-icon { display: flex !important; flex-direction: row !important; gap: 8px !important; align-items: center !important; }
  #sp-top-bar #mod-custom88 .sppb-icon > div { margin: 0 !important; display: inline-flex !important; align-items: center; }
  /* bandiere: una riga, stessa altezza dei box, spaziatura uniforme, centrate verticalmente */
  #sp-top-bar .mod-languages { display: inline-flex !important; align-items: center !important; margin: 0 !important; line-height: 0 !important; }
  #sp-top-bar .mod-languages .visually-hidden { position: absolute !important; }
  #sp-top-bar .mod-languages__list { display: inline-flex !important; flex-wrap: nowrap !important; width: auto; gap: 5px; margin: 0 !important; padding: 0 !important; list-style: none; align-items: center; }
  #sp-top-bar .mod-languages__list li { margin: 0 !important; padding: 0 !important; display: inline-flex; align-items: center; }
  #sp-top-bar .mod-languages__list a { display: inline-flex; align-items: center; }
  #sp-top-bar .mod-languages__list img { height: 22px !important; width: auto !important; display: block; border-radius: 3px; }

  /* --- MENU OFFCANVAS: mostra sempre i SOTTOMENU ---
     In HU i sottomenu (Struttura→Villaggio/Camping/Gallery/Piantina,
     Contatti→Link utili/…) erano nascosti e senza freccia → pagine irraggiungibili.
     Li rendo sempre visibili e indentati. */
  .offcanvas-menu .offcanvas-inner ul ul,
  .offcanvas-menu ul.mod-menu ul { display: block !important; height: auto !important; }
  .offcanvas-menu .offcanvas-inner ul ul > li > a {
    padding-left: 26px !important;
    font-size: .95em;
    opacity: .85;
  }
  /* "Struttura" è un separatore (menu-divider) usato come intestazione di gruppo */
  .offcanvas-menu li.menu-divider > .separator,
  .offcanvas-menu li.menu-divider > span { font-weight: 700; opacity: 1; }
}