/* =========================================================================
   Studio Focus - contenuto delle pagine.
   Riscrive il corpo del tema legacy (framework.css, style-*.css,
   placeholders-*.css) senza toccarne i file: caricato dopo, vince lui.
   Dipende dai token definiti in site.css.
   ========================================================================= */

/* ---------- 1. Pagina ---------------------------------------------------- */
body {
  /* Via la texture ripetuta: il contenuto respira su una tinta unita */
  background: var(--sf-surface-2) !important;
  color: var(--sf-text);
  font-family: var(--sf-font);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Decorazioni del tema vecchio che non servono piu */
.noise,
.extraDecoBar,
.extra1,
.extra2,
.skitter__deco-1,
.skitter__deco-2,
#bannerBarTop,
#bannerBarBottom,
.red_box_h3-deco01,
.red_box_h3-deco02,
.red_box_h3-deco03,
.h3_separator,
.date_and_comments { display: none !important; }

#container { background: transparent; }

/* ---------- 2. Tipografia ------------------------------------------------ */
/* Il tracking cambia con la dimensione: stretto sui titoli grandi,
   neutro sul testo corrente. Un valore unico sarebbe sbagliato da
   qualche parte. */
.sf-hero__title,
h1.pagename,
h3.pagename {
  font-family: var(--sf-font-display);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.005em;
  color: var(--sf-ink);
}
h1.pagename, h3.pagename { font-size: clamp(1.8rem, 3.6vw, 2.6rem); margin: 0 0 1.25rem; }

#mainContent .red_box h3 .h3_txt { display: inline; }

/* Il contenuto legacy porta font-family e font-size inline su ogni span.
   Li si neutralizza qui, una volta, invece di ripulire 428 pagine. */
#mainContent,
#mainContent [style*="font-family"],
#mainContent font,
#custom_contact_info,
#box_contact,
#box_contact div,
#box_contact span,
#box_contact a { font-family: var(--sf-font) !important; }
#mainContent .red-box-content [style*="font-size"] { font-size: inherit !important; }
#mainContent .red-box-content [style*="color: #666666"],
#mainContent .red-box-content [style*="color: #333333"],
#mainContent .red-box-content [style*="color: #000000"] { color: inherit !important; }

#mainContent .red-box-content {
  /* Il tema legacy assegna Arial direttamente a questo blocco: senza la
     dichiarazione esplicita l'eredita da #mainContent non basta. */
  font-family: var(--sf-font) !important;
  font-size: .97rem;
  line-height: 1.75;
  color: var(--sf-text);
}
#mainContent .red-box-content p,
#mainContent .red-box-content div { margin-bottom: .85rem; }
#mainContent .red-box-content p:last-child { margin-bottom: 0; }
#mainContent .red-box-content strong,
#mainContent .red-box-content b { font-weight: 700; color: var(--sf-ink); }
#mainContent .red-box-content a {
  color: var(--sf-accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(138, 111, 20, .35);
  transition: border-color var(--sf-t-fast) var(--sf-ease-out),
              color var(--sf-t-fast) var(--sf-ease-out);
}
#mainContent .red-box-content a:hover { color: var(--sf-accent-hi); border-bottom-color: var(--sf-accent-hi); text-decoration: none; }
#mainContent .red-box-content h1 {
  font-family: var(--sf-font-display);
  font-size: clamp(1.2rem, 2vw, 1.45rem) !important;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--sf-ink);
  margin: 1.5rem 0 .75rem !important;
}

/* ---------- 3. Fascia di testa ------------------------------------------
   La foto ha senso sulla home, dove porta il messaggio di apertura. Sulle
   pagine interne e solo un diaframma fra il menu e il contenuto.
   ---------------------------------------------------------------------- */
/* Niente foto: sulle pagine interne la fascia sparisce del tutto, sulla home
   resta come fondo pieno per il messaggio di apertura. Lo slideshow non viene
   mostrato da nessuna parte. */
body:not(.home_page) #containerBanner,
body:not(.home_page) .wrapperBanner { display: none !important; }
body:not(.home_page) #contentBox { padding-top: clamp(1.75rem, 4vw, 2.75rem); }

#containerBanner .skitter,
#containerBanner .container_skitter,
#containerBanner > .container { display: none !important; }
#containerBanner::after { display: none !important; }


#containerBanner {
  position: relative;
  padding: 0;
  background: var(--sf-ink);
  /* Lo slideshow posiziona le sue voci in assoluto e ne imposta la larghezza
     via JS: senza questo, una misura piu larga del viewport allarga la pagina
     e compare una barra di scorrimento orizzontale. */
  overflow: hidden;
}
#containerBanner .container,
#containerBanner .container_deco,
#containerBanner .row,
#containerBanner [class^="col-"] {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
/* Le immagini del banner sono strisce da 980x158 (rapporto 6:1). Alzare la
   fascia oltre la loro altezza naturale a piena larghezza le sgrana: 190px
   sulle pagine interne, 340px sulla home dove serve spazio per il testo. */
#containerBanner .skitter,
#containerBanner .skitter.skitter-large {
  width: 100% !important;
  height: clamp(130px, 13vw, 190px) !important;
  margin: 0 !important;
  background: var(--sf-ink) !important;
  border: 0 !important;
  box-shadow: none !important;
}
body.home_page #containerBanner .skitter,
body.home_page #containerBanner .skitter.skitter-large {
  height: clamp(260px, 24vw, 340px) !important;
}
#containerBanner .skitter ul { margin: 0; padding: 0; list-style: none; }
#containerBanner .skitter li,
#containerBanner .skitter li > a {
  display: block;
  margin: 0;
  width: 100% !important;
  height: 100% !important;
}
#containerBanner .skitter > ul,
#containerBanner .skitter > ul > li:first-child { width: 100% !important; height: 100% !important; }
/* Senza altezza esplicita l'immagine resta ai suoi 158px e sotto rimane una
   fascia vuota. */
#containerBanner .skitter img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  object-fit: cover;
  object-position: center;
}

/* Skitter costruisce a runtime una propria impalcatura e le scrive addosso
   misure fisse (width/height in linea, calcolate al caricamento). Vanno
   riportate a piena fascia, altrimenti resta scoperto il fondo a destra. */
#containerBanner .container_skitter,
#containerBanner .image_main,
#containerBanner .skitter .box_clone,
#containerBanner .skitter .image_number {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
}
#containerBanner .image_main {
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}
/* Comandi e didascalie dello slideshow: qui non hanno contenuto */
#containerBanner .label_skitter,
#containerBanner .info_slide,
#containerBanner .prev_button,
#containerBanner .next_button { display: none !important; }
/* Il testo sopra la foto resta leggibile su qualunque fotogramma */
#containerBanner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(26, 36, 63, .35) 0%, rgba(26, 36, 63, .18) 100%);
}
/* Sulla home il testo sta sopra la foto: serve piu velo, e la sfumatura
   raccorda con il fondo di pagina. */
body.home_page #containerBanner::after {
  background:
    linear-gradient(100deg, rgba(26, 36, 63, .92) 0%, rgba(26, 36, 63, .74) 34%,
                    rgba(26, 36, 63, .28) 62%, rgba(26, 36, 63, .12) 100%),
    linear-gradient(180deg, rgba(26, 36, 63, .30) 0%, rgba(26, 36, 63, 0) 40%);
}
/* Il testo occupa la meta scura: oltre resta la foto in chiaro */
body.home_page .sf-hero__title { max-width: min(20ch, 100%); }
body.home_page .sf-hero__lead { max-width: min(56ch, 100%); }

/* L'hero sta nel flusso, non in sovrapposizione assoluta: in assoluto, quando
   il testo cresce piu della fascia, sborda verso l'alto e finisce sotto
   l'header. Cosi e la fascia ad adattarsi al testo. */
body.home_page #containerBanner {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(320px, 34vw, 460px);
}
/* La foto passa dietro, a coprire tutta la fascia */
body.home_page #containerBanner > .container {
  position: absolute !important;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 1;
}
body.home_page #containerBanner .skitter,
body.home_page #containerBanner .skitter.skitter-large { height: 100% !important; }

.sf-hero {
  position: relative;
  z-index: 10;
  width: 100%;
  padding: clamp(2.5rem, 7vw, 4.5rem) 0 clamp(2rem, 5vw, 3.25rem);
}
.sf-hero__eyebrow {
  display: inline-block;
  margin-bottom: .7rem;
  padding: .35rem .8rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .18);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, .3);
  color: #fff;
  font: 600 .74rem/1 var(--sf-font);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.sf-hero__title {
  margin: 0 0 .6rem;
  font-size: clamp(1.9rem, 4.4vw, 3rem);
  color: #fff;
  text-shadow: 0 2px 20px rgba(12, 18, 34, .52);
  max-width: min(20ch, 100%);
}
.sf-hero__lead {
  margin: 0 0 1.3rem;
  max-width: min(52ch, 100%);
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, .93);
  text-shadow: 0 1px 12px rgba(12, 18, 34, .58);
}
.sf-hero__actions { display: flex; flex-wrap: wrap; gap: .7rem; }

/* ---------- 4. Corpo -----------------------------------------------------
   Impianto ripreso da focusconsulting.it: fasce a piena larghezza che si
   alternano, angoli vivi, filetti d'oro spessi. Niente schede arrotondate
   che galleggiano su un fondo.
   ---------------------------------------------------------------------- */
#contentBox {
  background: transparent !important;
  padding: 0 !important;
}
#mainContent {
  float: none !important;
  width: 100% !important;
  padding: 0 !important;
  font-size: 1rem !important;
}
#mainContent > .overlay,
#contentBox > .overlay,
#red_box_container .slice > .overlay,
#red_box_container .overlay { display: none !important; }

#red_box_container,
#dinamic_red_box_container { padding: 0 !important; }

/* La fascia: sfondo pieno da bordo a bordo, contenuto incolonnato al centro */
#red_box_container .slice {
  border: 0 !important;
  margin: 0 !important;
  padding: clamp(2.5rem, 6vw, 4.5rem) 0;
  background: var(--sf-surface) !important;
}
/* Il primo figlio del contenitore e un .container vuoto: le fasce partono
   dal secondo, quindi pari = prima, terza, quinta. */
#red_box_container .slice:nth-child(2n) { background: var(--sf-surface-2) !important; }

.red_box_frame,
.red_box_frame .red_box_frame-deco01,
.red_box_frame .red-box-inner {
  float: none !important;
  width: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
/* Titolo e testo condividono una colonna centrata: righe di lunghezza
   leggibile senza che il blocco resti appeso a sinistra. */
.red_box_frame .red-box-inner {
  max-width: var(--sf-measure);
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Titolo di sezione: niente filo a tutta larghezza, una barra d'oro corta */
#mainContent .red_box h3,
#mainContent .red_box_frame h3 {
  position: relative;
  margin: 0 0 1.75rem;
  padding: 0 0 1.1rem;
  border: 0 !important;
  font-family: var(--sf-font-display);
  font-size: clamp(1.45rem, 2.6vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.015em;
  color: var(--sf-ink);
}
#mainContent .red_box h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 56px;
  height: 4px;
  background: var(--sf-gold);
}
#mainContent .red_box h3.h3_no_title { display: none; }

/* Larghezza di colonna coerente con l'header */
#contentBox > .container,
#red_box_container .container,
#red_box_container .slice .container {
  width: 100% !important;
  max-width: var(--sf-shell) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: clamp(1rem, 4vw, 2rem) !important;
  padding-right: clamp(1rem, 4vw, 2rem) !important;
}

/* Briciole di pane e utilita di pagina */
#path {
  max-width: var(--sf-shell);
  margin: 0 auto 1.5rem;
  padding: 0 clamp(1rem, 4vw, 2rem);
  border: 0 !important;
  background: transparent !important;
  font-size: .84rem;
  color: var(--sf-text-mute);
}
#path a { color: var(--sf-accent); text-decoration: none; }
#path a:hover { text-decoration: underline; }

.red_box img, .wide_image {
  max-width: 100%;
  height: auto;
  border: 0 !important;
  padding: 0 !important;
  border-radius: var(--sf-radius-sm);
}

/* Elenchi puntati leggibili anche dove il CMS usava <div> */
#mainContent .red-box-content ul { padding-left: 1.2rem; margin: 0 0 1rem; }
#mainContent .red-box-content li { margin-bottom: .35rem; }

/* ---------- 5. Accessibilita -------------------------------------------- */
@media (prefers-contrast: more) {
  #mainContent .red-box-content a { border-bottom-width: 2px; }
  #mainContent .red_box h3::after { height: 5px; }
}

/* ---------- 6. Stampa ---------------------------------------------------- */
@media print {
  .sf-header, .sf-drawer, .sf-scrim, .sf-skip, #containerBanner, .sf-hero { display: none !important; }
  #red_box_container .slice { padding: 1rem 0; background: #fff !important; }
  body { background: #fff !important; }
}

/* ---------- 7. Contenimento orizzontale ---------------------------------
   Il tema legacy usa griglie Bootstrap con .row a margine negativo dentro
   contenitori a larghezza piena: basta un discendente piu largo del viewport
   per far comparire una barra di scorrimento orizzontale su tutta la pagina.

   Si usa `clip`, non `hidden`: `overflow: hidden` su html o body creerebbe un
   contenitore di scorrimento e romperebbe il `position: sticky` dell'header.
   ---------------------------------------------------------------------- */
html { overflow-x: clip; }
body { overflow-x: clip; max-width: 100%; }

/* Nessuna riga della griglia legacy puo sporgere dal proprio contenitore */
#contentBox .row,
#red_box_container .row,
#dinamic_red_box_container .row { margin-left: 0 !important; margin-right: 0 !important; }
#contentBox [class^="col-"],
#contentBox [class*=" col-"] { padding-left: 0 !important; padding-right: 0 !important; }

/* Tabelle e blocchi di codice larghi scorrono dentro di se, non trascinano
   la pagina */
#mainContent .red-box-content table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
}
#mainContent .red-box-content img,
#mainContent .red-box-content iframe { max-width: 100%; }
#mainContent .red-box-content iframe { border: 0; }

#custom_contact_info { margin-left: 0 !important; margin-right: 0 !important; }
#custom_contact_info > div[style*="margin-left"] { margin-left: 0 !important; }
#box_contact {
  padding-top: 0 !important;
  line-height: 1.75 !important;
  font-size: 1rem;
  color: var(--sf-text);
}
#box_contact a { color: var(--sf-accent); }
#box_contact span[style*="opacity"] {
  color: var(--sf-text-mute) !important;
  filter: none !important;
  opacity: 1 !important;
}

/* ---------- 8. Contatti -------------------------------------------------
   Un blocco solo: invito a scrivere e recapiti. Il riquadro dati del vecchio
   CMS e il modulo erano due sezioni per la stessa cosa.
   ---------------------------------------------------------------------- */

/* Il riquadro dati del tema: i suoi contenuti sono ora nel blocco qui sotto */
#custom_contact_info,
#box_contact { display: none !important; }

.sf-contact {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: clamp(1.75rem, 4vw, 3rem);
  /* Stessa colonna di lettura del resto della pagina: in fondo a «Chi siamo»
     il blocco sta fuori dal contenitore incolonnato del tema. */
  max-width: var(--sf-measure);
  margin: 2rem auto 1rem;
  padding: clamp(2rem, 4.5vw, 3.25rem);
  background: var(--sf-surface);
  border-top: 4px solid var(--sf-gold);
  box-shadow: var(--sf-shadow-1);
}
@media (max-width: 780px) {
  .sf-contact { grid-template-columns: 1fr; }
}

.sf-contact__title {
  margin: 0 0 .75rem;
  font-family: var(--sf-font-display);
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.015em;
  color: var(--sf-ink);
}
.sf-contact__lead {
  margin: 0 0 1.5rem;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--sf-text);
}
.sf-contact__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.sf-contact__note {
  margin: 1.25rem 0 0;
  font-size: .92rem;
  color: var(--sf-text-mute);
}

/* I recapiti: una colonna a se, staccata da un filo */
.sf-contact__card {
  padding-left: clamp(1.25rem, 3vw, 2rem);
  border-left: 1px solid var(--sf-line);
}
@media (max-width: 780px) {
  .sf-contact__card {
    padding-left: 0;
    padding-top: 1.5rem;
    border-left: 0;
    border-top: 1px solid var(--sf-line);
  }
}
.sf-contact__name {
  margin: 0 0 1.1rem;
  font-family: var(--sf-font-display);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--sf-ink);
}
.sf-contact__list { margin: 0; font-size: .95rem; line-height: 1.55; }
.sf-contact__list dt {
  margin-top: .85rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sf-text-mute);
}
.sf-contact__list dt:first-child { margin-top: 0; }
.sf-contact__list dd { margin: .15rem 0 0; color: var(--sf-text); }
.sf-contact__list a { color: var(--sf-accent); text-decoration: none; }
.sf-contact__list a:hover { text-decoration: underline; }
.sf-contact__map {
  display: inline-block;
  margin-top: 1.4rem;
  font-weight: 700;
  font-size: .95rem;
  color: var(--sf-accent);
  text-decoration: none;
}
.sf-contact__map:hover { text-decoration: underline; }

/* Decorazioni orfane del modulo rimosso */
#custom_form_int {
  display: block !important;
  position: static !important;
  min-height: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
}
.contact_sxbar,
.span-label-radio,
.submit_send,
#contact_sxbar_pin { display: none !important; }
#custom_form_int > div[style*="form_int_letter"],
#custom_form_int > div[style*="float:right"] { display: none !important; }

/* Il testo giustificato su una colonna stretta apre buchi enormi fra le
   parole: l'allineamento a sinistra e piu leggibile sotto i 700px. */
@media (max-width: 700px) {
  #mainContent [style*="justify"],
  #mainContent .red-box-content p,
  #mainContent .red-box-content div { text-align: left !important; }
}

/* ---------- 9. Tabelle ---------------------------------------------------
   Le tabelle del contenuto legacy e quelle scritte a mano. Su schermo
   stretto scorrono dentro il loro riquadro, senza allargare la pagina.
   ---------------------------------------------------------------------- */
.sf-tabella {
  width: 100%;
  margin: 1.5rem 0;
  border-collapse: collapse;
  font-size: .93rem;
  line-height: 1.5;
  background: var(--sf-surface);
  box-shadow: var(--sf-shadow-1);
}
.sf-tabella th,
.sf-tabella td {
  padding: .65rem .85rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--sf-line);
}
.sf-tabella thead th {
  font-family: var(--sf-font);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #fff;
  background: var(--sf-ink);
  border-bottom: 0;
}
.sf-tabella tbody tr:last-child td { border-bottom: 0; }
.sf-tabella tbody tr:nth-child(even) { background: var(--sf-surface-2); }
.sf-tabella code {
  font-family: Consolas, "Courier New", monospace;
  font-size: .88em;
  color: var(--sf-accent);
  background: rgba(234, 199, 83, .16);
  padding: .1rem .35rem;
  border-radius: 3px;
}
@media (max-width: 640px) {
  .sf-tabella { display: block; overflow-x: auto; white-space: nowrap; }
  .sf-tabella td:last-child { white-space: normal; min-width: 200px; }
}

/* I sottotitoli di secondo livello degli articoli (### nel Markdown):
   senza una regola propria si confondevano col testo corrente. */
#mainContent .red-box-content h3,
#mainContent .red-box-content h4 {
  font-family: var(--sf-font-display);
  font-weight: 700;
  line-height: 1.3;
  color: var(--sf-ink);
  margin: 1.6rem 0 .6rem;
}
#mainContent .red-box-content h3 { font-size: clamp(1.15rem, 1.9vw, 1.35rem); }
#mainContent .red-box-content h4 { font-size: 1.05rem; }