/* =============================================================
   DENTAL GO — Pagina Contatti (editoriale)
   Foglio dedicato, caricato SOLO su /contatti/.
   Pagina chiara: bianco dominante, titoli e testi navy, Blu Dental Go
   per CTA, link, etichette e dettagli; il modulo vive su una fascia
   off-white (preset .bg-off-white del design system: input bianchi).
   Token, tipografia, occhielli, bottoni, form (.form__*), preset chiari
   e reveal sono quelli di main.css: qui solo la composizione delle
   sezioni. Ogni selettore parte da .ofy-contatti-page.
   ============================================================= */

.ofy-contatti-page {
  --ct-line: rgba(7, 16, 26, 0.12);           /* filetti su fondo chiaro */
  --ct-gap: clamp(32px, 5vw, 80px);           /* colonna titolo / colonna corpo */
  --ct-block: clamp(40px, 5vw, 72px);         /* stacco fra blocchi interni */
  background: var(--color-white);
  color: var(--color-navy);
  padding-top: calc(var(--header-h, 96px) + var(--topbar-h, 40px));
}

/* CTA secondaria in Blu Dental Go: i preset chiari la vogliono navy, qui il
   Master chiede il blu per tutte le CTA (stessi token di main.css). */
.ofy-contatti-page .bg-white,
.ofy-contatti-page .bg-off-white {
  --btn-secondary-tx: var(--color-primary);
  --btn-secondary-bd: var(--color-primary);
  --btn-secondary-hbg: var(--color-primary);
  --btn-secondary-htx: var(--color-white);
  --btn-secondary-hbd: var(--color-primary);
}

/* --------------------------------------------------- sezioni */
.ofy-contatti-page__section { padding-block: var(--section-pad); }

/* Ancora "#raccontaci" (CTA della testata): resta sotto l'header fisso */
.ofy-contatti-page__section--form {
  scroll-margin-top: calc(var(--header-h, 96px) + var(--topbar-h, 40px));
}

/* ---------------------------------------------------- titoli */
.ofy-contatti-page__h2 {
  margin: 0;
  font-size: clamp(2.125rem, 1.4rem + 2.8vw, 3.75rem);
  line-height: 1.06;
  text-wrap: balance;
}

/* ------------------------------------------------- paragrafi */
.ofy-contatti-page__text p {
  max-width: 60ch;
  margin: 0 0 var(--space-5);
}
.ofy-contatti-page__text p:last-child { margin-bottom: 0; }

/* Frasi forti di chiusura (i grassetti del copy) */
.ofy-contatti-page__strong {
  max-width: 24em;
  margin: var(--ct-block) 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2.125rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--text-strong);
  text-wrap: balance;
}
.ofy-contatti-page__strong strong { font-weight: inherit; }

/* Claim della testata: filetto blu a sinistra */
.ofy-contatti-page__strong--rule {
  margin-top: 0;
  padding-left: clamp(20px, 2.5vw, 32px);
  border-left: 3px solid var(--color-primary);
}

/* "Costruiamo strategie digitali nate per i dentisti.": in Blu Dental Go */
.ofy-contatti-page__strong--accent { color: var(--color-primary); }

/* --------------------------------------------------- testata */
.ofy-contatti-page__hero { padding-block: var(--section-pad-sm) var(--section-pad); }
.ofy-contatti-page__title {
  margin: 0;
  max-width: 14em;
  font-size: var(--fs-h1);
  line-height: 1;
  text-wrap: balance;
}
.ofy-contatti-page__hero-body {
  display: grid;
  gap: var(--space-7) var(--ct-gap);
  margin-top: var(--ct-block);
}

/* Le due CTA della testata: modulo (primaria) e WhatsApp (secondaria) */
.ofy-contatti-page__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-7);
}

@media (min-width: 1024px) {
  .ofy-contatti-page__hero-body { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}

/* Due colonne: titolo a sinistra, corpo a destra (una sola sotto i 1024px) */
.ofy-contatti-page__split {
  display: grid;
  gap: clamp(28px, 4vw, 48px) var(--ct-gap);
}
.ofy-contatti-page__split-head .ofy-contatti-page__text { margin-top: var(--space-6); }

@media (min-width: 1024px) {
  .ofy-contatti-page__split {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
  }
  /* Il titolo resta in vista mentre si scorre il corpo della sezione */
  .ofy-contatti-page__split-head {
    position: sticky;
    top: calc(var(--header-h) + var(--topbar-h) + var(--space-6));
  }
}

/* ------------------------------------------- contatti diretti
   Due blocchi affiancati: etichetta (H3) in Blu Dental Go, valore grande
   e cliccabile in navy, link WhatsApp sotto il numero. */
.ofy-contatti-page__channels {
  display: grid;
  gap: 0 var(--ct-gap);
  margin-top: var(--ct-block);
  border-top: 1px solid var(--ct-line);
}
.ofy-contatti-page__channel {
  padding-block: var(--space-6);
  border-bottom: 1px solid var(--ct-line);
}
.ofy-contatti-page__channel-label {
  margin: 0 0 var(--space-3);
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-primary);
}
.ofy-contatti-page__channel-value {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}
/* Telefono ed email: area tocco ≥ 44px, sottolineatura e blu al passaggio */
.ofy-contatti-page__channel-value a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--color-navy);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
  transition: color var(--dur-fast) ease, text-decoration-color var(--dur-fast) ease;
}
.ofy-contatti-page__channel-value a:hover,
.ofy-contatti-page__channel-value a:focus-visible {
  color: var(--color-primary);
  text-decoration-color: currentColor;
}
.ofy-contatti-page__channel-more { margin: var(--space-2) 0 0; }
.ofy-contatti-page__channel-more .btn--link {
  min-height: 44px;
  color: var(--color-primary);
}
.ofy-contatti-page__channel-more .btn--link:hover,
.ofy-contatti-page__channel-more .btn--link:focus-visible { color: var(--color-navy); }

@media (min-width: 640px) {
  .ofy-contatti-page__channels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ------------------------------------------------- modulo
   Campi numerati in sequenza editoriale: numero in Blu Dental Go, domanda
   grande in navy, input bianchi del design system (preset .bg-off-white). */
.ofy-contatti-page__form { min-width: 0; }
.ofy-contatti-page .form { gap: 0; }

/* Specificità > .form__field (flex) e .form__submit di main.css */
.ofy-contatti-page .ofy-contatti-page__field {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: 0 var(--space-4);
  padding-block: clamp(20px, 2.6vw, 32px);
  border-bottom: 1px solid var(--ct-line);
}
.ofy-contatti-page__num {
  padding-top: 0.3em;
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  font-variant-numeric: tabular-nums;
  color: var(--color-primary);
}
.ofy-contatti-page__control {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
}

/* Domanda grande (sovrascrive la label piccola del form globale) */
.ofy-contatti-page .form__label {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--color-navy);
}
.ofy-contatti-page .form__field:focus-within .form__label { color: var(--color-primary); }

/* Textarea: respiro verticale (il .form__input globale è pensato per una riga) */
.ofy-contatti-page textarea.form__input {
  min-height: 140px;
  padding-block: 14px;
  line-height: 1.5;
  resize: vertical;
}

.ofy-contatti-page__privacy { margin-top: var(--space-6); }
.ofy-contatti-page .ofy-contatti-page__submit { margin-top: var(--space-6); }

/* --------------------------------------------- dettagli business
   Elenco di definizioni: etichette in Blu Dental Go, valori navy; su mobile
   etichetta sopra e valore sotto, le email lunghe vanno a capo. */
.ofy-contatti-page__brand {
  margin: 0 0 var(--space-5);
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2.125rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--color-navy);
}
.ofy-contatti-page__details {
  margin: 0;
  border-top: 1px solid var(--ct-line);
}
.ofy-contatti-page__row {
  display: grid;
  gap: var(--space-1) var(--space-6);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--ct-line);
}
.ofy-contatti-page__row dt {
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-primary);
}
.ofy-contatti-page__row dd {
  margin: 0;
  min-width: 0;
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--color-navy);
  overflow-wrap: anywhere;
}
/* Link (PEC, email, telefono): area tocco ≥ 44px senza alterare il ritmo delle righe */
.ofy-contatti-page__row a {
  display: inline-block;
  padding-block: 0.6em;
  margin-block: -0.6em;
  color: var(--color-navy);
  text-decoration: underline;
  text-decoration-color: rgba(42, 106, 220, 0.45);
  text-underline-offset: 0.18em;
  transition: color var(--dur-fast) ease, text-decoration-color var(--dur-fast) ease;
}
.ofy-contatti-page__row a:hover,
.ofy-contatti-page__row a:focus-visible {
  color: var(--color-primary);
  text-decoration-color: currentColor;
}

@media (min-width: 640px) {
  .ofy-contatti-page__row {
    grid-template-columns: minmax(150px, 220px) minmax(0, 1fr);
    align-items: baseline;
  }
}

/* ---------------------------------------------------- mobile */
@media (max-width: 639px) {
  /* CTA della testata una sotto l'altra, a tutta larghezza */
  .ofy-contatti-page__actions { flex-direction: column; }
  .ofy-contatti-page__actions .btn { width: 100%; }
  .ofy-contatti-page .ofy-contatti-page__field { grid-template-columns: 2.25rem minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .ofy-contatti-page__channel-value a,
  .ofy-contatti-page__channel-more .btn--link,
  .ofy-contatti-page__row a { transition: none; }
}

/* Avviso accanto al pulsante WhatsApp (Legal Pack, documento 05 sezione C):
   deve leggersi come una nota, non come copy commerciale. */
.ofy-contatti-page__channel-note {
  max-width: 44ch;
  margin: var(--space-3) 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--text-muted);
}