/* ============================================================
   Valdisoleappartamenti.it — base del design system
   Architettura a MODULI DIVI NATIVI: qui NON si tocca la griglia
   di Divi (niente full-bleed forzato), si definiscono solo
   token, tipografia e stati.
   ============================================================ */
:root{
  --vs-blue:#1a6fb4; --vs-blue-dark:#14507e;
  --vs-green:#3d9a33; --vs-green-text:#2b7523; --vs-green-dark:#2f7d27;
  --vs-ink:#172a3a;  --vs-bg:#f6f8fa; --vs-line:#e3e9ee; --vs-grey:#55636f;
}

/* --- base --- */
body,#page-container{background:var(--vs-bg)}
body,#main-content{font-family:'Manrope',system-ui,sans-serif;color:var(--vs-ink)}
/* NIENTE ID in questa regola: `#main-content h3` ha specificità 1,0,1 e batte
   qualunque regola a classi (es. `.vs-realizzati .vs-imm-body h3` = 0,2,1),
   forzando i titoli scuri anche sulle sezioni con fondo scuro. */
.vs-sec h1,.vs-sec h2,.vs-sec h3,.vs-sec h4,
.et-l h1,.et-l h2,.et-l h3,.et-l h4{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:600;letter-spacing:-.01em}
.vs-sec h1,.vs-sec h2,.vs-sec h3,.vs-sec h4{color:var(--vs-ink)}
::selection{background:var(--vs-blue);color:#fff}
a{text-decoration:none}

/* --- GRIGLIA UNICA su tutto il sito ---
   header, footer, home e schede devono allinearsi sullo stesso asse.
   Senza !important le righe del contenuto restano al default Divi (1080px). --- */
.vs-sec > .et_pb_row{max-width:1240px!important;width:90%!important}
.vs-sec .et_pb_row.vs-facts-row,
.vs-sec .et_pb_row.vs-serv-row,
.vs-sec .et_pb_row.vs-metodo-row{max-width:1240px}

/* --- Schede singole costruite col Builder, a piena larghezza ---
   Sui contenuti singoli Divi incapsula tutto in `.container` (max 1080px):
   le sezioni restavano più strette dell'header di ~190px per lato.
   Pattern del playbook live-mcp-deploy §5.
   ATTENZIONE: vale solo dove il contenuto è fatto col Builder e ha sezioni
   proprie. Sugli articoli del blog, che sono testo normale, togliere il
   contenitore lascia le righe larghe quanto lo schermo: illeggibili.
   Divi mette `et_pb_pagebuilder_layout` sul body solo quando il Builder c'è. --- */
.single-immobile #main-content .container,
.single-immobile #left-area,
.single-post.et_pb_pagebuilder_layout #main-content .container,
.single-post.et_pb_pagebuilder_layout #left-area{width:100%!important;max-width:100%!important;
padding:0!important;margin:0!important;float:none!important}
.single-immobile #main-content .container:before,
.single-post.et_pb_pagebuilder_layout #main-content .container:before{display:none}
/* niente chrome di default sul singolo: titolo, meta e commenti */
.single-immobile .et_post_meta_wrapper,
.single-immobile #comment-wrap,
.single-immobile .et_pb_post_title{display:none!important}

/* --- il builder non deve mangiare spazio in cima --- */
#main-content .container:before{display:none}
.et_pb_post .entry-content,.single .et_pb_post{margin-bottom:0}

/* --- pulsanti: niente freccia Divi --- */
.et_pb_button:after{display:none!important}
.et_pb_button{transition:background .15s,color .15s}

/* --- link nei contenuti --- */
.vs-ptext a,.vs-lead a{color:var(--vs-blue);font-weight:600}
.vs-ptext a:hover{color:var(--vs-blue-dark)}

/* --- immagini --- */
.et_pb_image img{border-radius:0}

/* --- accessibilità: focus sempre visibile --- */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--vs-blue);outline-offset:2px}

@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}