/* ============================================================
   Cristina Dobrigna - clone statico
   Palette e tipografia estratte dal sito originale (Flazio)
   ============================================================ */

/* ------------------------------------------------------------
   Font self-hosted (GDPR): Montserrat + Open Sans serviti dal
   nostro dominio, NON da fonts.googleapis.com / fonts.gstatic.com.
   Evita il trasferimento dell'IP dell'utente a Google (cfr.
   Provv. Garante e giurisprudenza Google Fonts, LG München 2022).
   File woff2 variabili (subset latino) in ../assets/fonts/.
   ------------------------------------------------------------ */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 800;              /* variable font: copre 400..800 */
  font-display: swap;
  src: url('../assets/fonts/montserrat-latin-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../assets/fonts/opensans-latin-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('../assets/fonts/opensans-latin-italic-var.woff2') format('woff2');
}

:root {
  --blue:        #0073b5;   /* blu primario bande/sezioni */
  --blue-dark:   #005c91;
  --navy:        #1f4e79;   /* testo brand / titoli scuri */
  --gray-title:  #808a96;   /* titoli sezione grigi (SERVIZI) */
  --text:        #2b2b2b;
  --text-light:  #ffffff;
  --bg:          #ffffff;
  --black:       #000000;
  --maxw:        1140px;
  --font-head:   'Montserrat', Arial, sans-serif;
  --font-body:   'Open Sans', Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  line-height: 1.6;
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

h1, h2, h3, h4 { font-family: var(--font-head); margin: 0 0 .5em; }

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}

/* ---------- HEADER ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  box-shadow: 0 1px 6px rgba(0,0,0,.08);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  padding-bottom: 10px;
}
.brand { display: flex; align-items: center; gap: 14px; }
.brand-logo { width: 64px; height: 64px; border-radius: 50%; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text strong {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.45rem;
  color: var(--navy);
  letter-spacing: .5px;
}
.brand-text small {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: .72rem;
  color: var(--gray-title);
  letter-spacing: 1px;
}
.site-nav { display: flex; gap: 40px; }
.site-nav a {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: .95rem;
  letter-spacing: 1px;
  color: var(--navy);
  transition: color .2s;
}
.site-nav a:hover { color: var(--blue); }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 8px;
}
.nav-toggle span {
  width: 26px; height: 3px; background: var(--navy); border-radius: 2px;
  transition: .3s;
}

/* ---------- HERO ---------- */
.hero {
  position: relative;
  min-height: 560px;
  display: flex;
  align-items: center;
  background: url('../assets/hero.webp') center/cover no-repeat;
  background-color: #9fb0c0;
  text-align: center;
  color: #fff;
}
.hero-overlay {
  position: absolute; inset: 0;
  background: rgba(30, 50, 80, .12);
}
.hero-content { position: relative; z-index: 1; }
.hero h1 {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 800;
  letter-spacing: 2px;
  text-shadow: 0 2px 12px rgba(0,0,0,.35);
  margin-bottom: .2em;
}
.hero-sub {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.2rem, 3vw, 2.1rem);
  letter-spacing: 1px;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
  margin: 0;
}

/* ---------- CLAIM BAND ---------- */
.claim-band {
  background: var(--blue);
  color: #fff;
  text-align: center;
  padding: 34px 0;
}
.claim-band h2 {
  font-weight: 600;
  font-size: clamp(1.1rem, 2.4vw, 1.7rem);
  margin: 0 0 .3em;
}
.claim-band p { margin: 0; font-size: 1.05rem; font-weight: 600; }
.claim-band a { text-decoration: underline; }

/* ---------- CHI SONO ---------- */
.about { padding: 80px 0; }
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 56px;
  align-items: center;
}
.about-photo img { width: 100%; border-radius: 4px; }
.about-text h2 {
  color: var(--navy);
  font-weight: 600;
  font-size: 1.7rem;
  line-height: 1.3;
  margin-bottom: .8em;
}
.about-text p { margin: 0 0 1em; text-align: justify; }

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-block;
  font-family: var(--font-head);
  font-weight: 500;
  padding: 14px 34px;
  border-radius: 3px;
  cursor: pointer;
  border: 0;
  transition: background .2s, transform .1s;
}
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-dark); }
.btn-send {
  background: #f3f3f3;
  color: #444;
  padding: 15px 60px;
  font-size: 1rem;
}
.btn-send:hover { background: #e6e6e6; }

/* ---------- SECTION TITLES ---------- */
.section-title-gray {
  color: var(--gray-title);
  font-weight: 700;
  font-size: 2.4rem;
  letter-spacing: 1px;
}
.section-title-light {
  color: #fff;
  font-weight: 800;
  font-size: 2.4rem;
  letter-spacing: 1px;
}
.section-subtitle-light {
  color: rgba(255,255,255,.95);
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 1.35rem;
  margin: 0 0 2em;
}
.section-subtitle-blue {
  color: var(--blue);
  font-weight: 600;
  font-size: 1.55rem;
  line-height: 1.3;
}

/* ---------- FORMAZIONE (blue section) ----------
   Tinta unita, senza foto di sfondo: nell'originale la fascia è piatta
   (campionata #0073b5 = --blue). Contiene i 4 blocchi in griglia 2x2. */
.formazione {
  padding: 80px 0 90px;
  background: var(--blue);
  color: #fff;
}
.formazione .section-title-light { margin-bottom: 1.6em; }

.formazione-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 56px;
  row-gap: 0;
}
.formazione-block h3 {
  font-family: var(--font-head);
  font-weight: 400;
  font-size: 1.35rem;
  color: rgba(255,255,255,.95);
  margin: 0 0 1.4em;
}
.formazione-block p { text-align: justify; margin: 0 0 1em; }
.formazione-block p:last-child { margin-bottom: 0; }

/* Riga 2: linea di separazione sottile, una per colonna (come l'originale).
   Su mobile la griglia collassa a 1 colonna e la regola resta valida
   perché separa comunque ogni blocco dal precedente. */
.formazione-block--rule {
  margin-top: 52px;
  padding-top: 46px;
  border-top: 1px solid #ccc;
}

/* ---------- SERVIZI ---------- */
.servizi { padding: 80px 0 90px; }
.servizi-head {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  align-items: center;
  margin: 30px 0 50px;
}
.servizi-head-img img {
  border-radius: 50%;
  aspect-ratio: 1;
  object-fit: cover;
  width: 100%;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
}
.servizi-cols { gap: 56px; }
.servizi-block h4 {
  color: var(--blue);
  font-weight: 600;
  font-size: 1.25rem;
  border-bottom: 2px solid #d7dde3;
  padding-bottom: 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.servizi-block .ico { font-size: 1rem; }
.servizi-block ul { padding-left: 20px; margin: 16px 0 0; }
.servizi-block > ul > li { margin-bottom: 14px; }
.servizi-block ul.sub { margin: 6px 0 6px; list-style: none; padding-left: 14px; }
.servizi-block ul.sub li { margin-bottom: 2px; }

/* ---------- CONTATTO ---------- */
.contatto {
  position: relative;
  padding: 80px 0 90px;
  background: url('../assets/contatto-bg.webp') center/cover no-repeat;
  background-color: #5f8fc0;
  color: #fff;
}
.contatto-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(70,120,170,.92), rgba(40,90,150,.92));
}
.contatto-inner { position: relative; z-index: 1; }
.contatto-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
}
.contact-form label {
  display: block;
  margin-bottom: 18px;
  font-size: .95rem;
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
  width: 100%;
  margin-top: 6px;
  padding: 12px 14px;
  border: 0;
  border-radius: 3px;
  font-family: var(--font-body);
  font-size: 1rem;
  background: #fff;
  color: #333;
}
.contact-form textarea { resize: vertical; }
.consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: .82rem;
  line-height: 1.4;
}
.consent input { margin-top: 3px; }
.consent a { text-decoration: underline; }
.btn-send { margin-top: 22px; }
.btn-send:disabled { opacity: .6; cursor: default; }

/* Campo honeypot: fuori dallo schermo, non display:none (alcuni bot
   ignorano i campi nascosti con display:none ma compilano i visibili). */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* Messaggio di esito invio */
.form-status {
  margin: 14px 0 0;
  padding: 10px 14px;
  border-radius: 4px;
  font-size: .9rem;
  background: rgba(255,255,255,.15);
}
.form-status--success { background: rgba(46, 160, 90, .92); color: #fff; }
.form-status--error   { background: rgba(200, 60, 60, .92); color: #fff; }

.contatto-info .info-block { margin-bottom: 26px; }
.contatto-info h4 {
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: 1px;
  margin-bottom: 6px;
}
.contatto-info p { margin: 0; }
.contatto-info a:hover { text-decoration: underline; }
.contatto-claim {
  margin-top: 34px;
  font-family: var(--font-head);
  font-size: 1.15rem;
  line-height: 1.7;
}

/* ---------- FOOTER ---------- */
.site-footer {
  background: var(--black);
  color: #fff;
  text-align: center;
  padding: 46px 0;
}
.footer-logo { width: 84px; height: 84px; border-radius: 50%; margin: 0 auto 16px; }
.footer-name {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: 1px;
  margin: 0;
}
.footer-role {
  font-family: var(--font-head);
  font-size: .9rem;
  letter-spacing: 1px;
  margin: 4px 0 10px;
  color: #cfcfcf;
}
.footer-legal { font-size: .82rem; color: #b8b8b8; margin: 0; }
.footer-legal a:hover { text-decoration: underline; color: #fff; }

/* Cookie banner rimosso: il sito non installa cookie di profilazione/analytics
   né strumenti di tracciamento di terze parti, quindi non è richiesto alcun
   banner di consenso (Provv. Garante 10/06/2021). */

/* ---------- RESPONSIVE ---------- */
@media (max-width: 860px) {
  .site-nav {
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: #fff;
    flex-direction: column;
    gap: 0;
    padding: 8px 0;
    box-shadow: 0 8px 20px rgba(0,0,0,.1);
    display: none;
  }
  .site-nav.open { display: flex; }
  .site-nav a { padding: 14px 24px; border-bottom: 1px solid #f0f0f0; }
  .nav-toggle { display: flex; }

  .two-col,
  .about-grid,
  .servizi-head,
  .contatto-grid { grid-template-columns: 1fr; gap: 32px; }

  /* Collassata a una colonna, la griglia diventa una pila: ogni blocco
     tranne il primo prende la linea, così il ritmo visivo sopravvive. */
  .formazione-grid { grid-template-columns: 1fr; }
  .formazione-block + .formazione-block {
    margin-top: 40px;
    padding-top: 36px;
    border-top: 1px solid #ccc;
  }

  .about-photo { max-width: 360px; margin: 0 auto; }
  .servizi-head-img { max-width: 340px; margin: 0 auto; }
  .brand-text strong { font-size: 1.15rem; }
  .brand-logo { width: 52px; height: 52px; }
}