/* ═══════════════════════════════════════════════════════════
   ELISA CASSI — base
   Token, reset, tipografia, componenti condivisi.
   Nessun !important: la specificità è gestita a mano.
   ═══════════════════════════════════════════════════════════ */

/* --- Font self-hosted (GDPR: nessuna chiamata a Google) --- */

@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/open-sans-latin-300-normal.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/open-sans-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/open-sans-latin-600-normal.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/open-sans-latin-700-normal.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


/* ═══════ TOKEN ═══════ */

:root {
  /* Palette */
  --ec-teal:        #3d7a8a;
  --ec-teal-scuro:  #2c5f6d;
  --ec-oro:         #c9a84c;
  --ec-oro-scuro:   #b8953d;
  --ec-beige:       #f5f0e8;
  --ec-beige-cuneo: rgba(227, 202, 148, 0.7);
  --ec-bordo:       #e8e3da;
  --ec-card:        #fafafa;
  --ec-bianco:      #ffffff;

  /* Testo */
  --ec-testo:       #333333;
  --ec-testo-med:   #555555;
  --ec-testo-chiaro:#888888;

  /* Header */
  --ec-header-h:        88px;
  --ec-header-h-sticky: 66px;
  --ec-header-bg:       var(--ec-bianco);
  --ec-header-bg-solid: var(--ec-bianco);
  --ec-contenuto-max:   1200px;
  /* Larghezza della colonna di testo. Una sola cifra per tutto il sito:
     cambiandola qui si spostano tutte le pagine insieme. */
  --ec-colonna-testo:   80ch;
  --ec-header-cuneo-w:  260px;
  --ec-header-taglio:   48px;

  /* Tipografia */
  --ec-serif: Georgia, 'Times New Roman', serif;
  --ec-sans:  'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Misure */
  --ec-colonna:   80ch;
  --ec-larga:     960px;
  --ec-gutter:    5%;
  --ec-raggio:    8px;
  --ec-tocco:     48px;

  /* Movimento */
  --ec-transizione: 0.25s ease;
}


/* ═══════ RESET ═══════ */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--ec-sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ec-testo);
  background: var(--ec-bianco);
  overflow-x: hidden;
}

/* Blocca lo scroll quando il menu mobile è aperto, senza salto di posizione */
body.ec-nav-aperto { overflow: hidden; }

img,
picture,
video,
iframe { max-width: 100%; height: auto; }

img { display: block; }

h1, h2, h3, h4, h5, h6 { margin: 0 0 0.5em; font-weight: 400; }

p { margin: 0 0 1em; }

a { color: var(--ec-teal); }

button { font: inherit; }

/* Un solo punto per il focus da tastiera, visibile ovunque */
:focus-visible {
  outline: 3px solid var(--ec-oro);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Il focus da mouse non deve disegnare contorni */
:focus:not(:focus-visible) { outline: none; }


/* ═══════ UTILITÀ ═══════ */

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.ec-skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 200;
  padding: 12px 20px;
  background: var(--ec-teal);
  color: var(--ec-bianco);
  text-decoration: none;
  border-radius: 0 0 var(--ec-raggio) var(--ec-raggio);
  transition: top var(--ec-transizione);
}

.ec-skip-link:focus { top: 0; }

.ec-main { display: block; }

/* Le fasce colorate.
   Da mobile occupano tutta la larghezza dello schermo: su 375px un
   margine laterale sarebbe solo spazio sprecato.
   Da desktop rientrano dentro un contenitore da 1200px, largo come
   il footer, e le fasce diventano riquadri su fondo bianco.
   Il breakpoint è lo stesso dell'header, così il sito cambia
   impaginazione in un punto solo. */
@media (min-width: 1081px) {
  .ec-main {
    max-width: var(--ec-contenuto-max);
    /* Il margine sopra stacca la prima fascia dall'header */
    margin: 40px auto 0;
  }
}

.ec-vuoto {
  max-width: var(--ec-colonna);
  margin: 0 auto;
  padding: 60px var(--ec-gutter);
  text-align: center;
  color: var(--ec-testo-med);
}


/* ═══════ COMPONENTI CONDIVISI ═══════
   Erano duplicati in ogni pagina: ora vivono qui.
   ═══════════════════════════════════ */

.ec-btn-gold {
  display: inline-block;
  min-height: var(--ec-tocco);
  padding: 14px 38px;
  background: var(--ec-oro);
  color: var(--ec-bianco);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  border-radius: 3px;
  transition: background var(--ec-transizione);
}

.ec-btn-gold:hover,
.ec-btn-gold:focus-visible { background: var(--ec-oro-scuro); }

.ec-btn-outline {
  display: inline-block;
  min-height: var(--ec-tocco);
  padding: 12px 26px;
  border: 1px solid var(--ec-oro);
  color: var(--ec-oro-scuro);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-radius: 3px;
  transition: background var(--ec-transizione), color var(--ec-transizione);
}

.ec-btn-outline:hover,
.ec-btn-outline:focus-visible {
  background: var(--ec-oro);
  color: var(--ec-bianco);
}

.ec-sep {
  width: 60px;
  height: 2px;
  margin: 20px auto 35px;
  background: var(--ec-oro);
}

.ec-sep-light {
  width: 60px;
  height: 2px;
  margin: 20px auto 35px;
  background: rgba(255, 255, 255, 0.4);
}

.ec-tel {
  display: block;
  margin: 0 0 22px;
  color: var(--ec-oro);
  font-size: clamp(1.125rem, 2.5vw, 1.375rem);
  font-weight: 700;
  text-decoration: none;
}

.ec-tel:hover,
.ec-tel:focus-visible { color: var(--ec-bianco); }

.ec-tel:hover,
.ec-tel:focus-visible { color: var(--ec-bianco); }

/* Blocco contatti finale, riusato da articoli / ricerca / 404 */
.ec-cta {
  padding: clamp(40px, 7vw, 60px) var(--ec-gutter);
  background: var(--ec-teal);
  text-align: center;
}

.ec-cta h2 {
  font-family: var(--ec-serif);
  font-size: clamp(1.375rem, 3.5vw, 1.75rem);
  color: var(--ec-bianco);
}

.ec-cta p {
  max-width: 60ch;
  margin: 0 auto 12px;
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(0.9375rem, 2vw, 1.0625rem);
}


/* ═══════ MOVIMENTO RIDOTTO ═══════ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
    scroll-behavior: auto;
  }
}


/* ═══════ BOTTONE TEAL ═══════ */

.ec-btn-teal {
  display: inline-block;
  min-height: var(--ec-tocco);
  padding: 14px 38px;
  background: var(--ec-teal);
  color: var(--ec-bianco);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  border-radius: 3px;
  transition: background var(--ec-transizione);
}

.ec-btn-teal:hover,
.ec-btn-teal:focus-visible { background: var(--ec-teal-scuro); }


/* ═══════ UTILITÀ DI PAGINA ═══════ */

/* Contenitore degli shortcode Contact Form 7.
   Serve un <div>: un <form> dentro un <p> è markup non valido e il
   browser chiude il paragrafo da solo, spaccando il layout. */
.ec-form-slot { min-height: 40px; }

.ec-oro { color: var(--ec-oro); }

.ec-no-pad-top { padding-top: 0; }


/* ═══════════════════════════════════════════════════════════
   TEMPLATE "TERAPIA"
   Condiviso dalle sei pagine figlie di Terapie. Stava duplicato
   in ognuna: ora è qui una volta sola e il browser lo mette in cache.
   ═══════════════════════════════════════════════════════════ */

/* --- Hero --- */

.ec-ter-hero {
  padding: clamp(40px, 6vw, 60px) var(--ec-gutter);
  background: var(--ec-teal);
  text-align: center;
}

.ec-ter-hero-pretitle {
  margin-bottom: 12px;
  color: var(--ec-oro);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3px;
}

.ec-ter-hero h1 {
  margin-bottom: 10px;
  font-family: var(--ec-serif);
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  font-style: italic;
  line-height: 1.25;
  color: var(--ec-bianco);
}

.ec-ter-hero h2 {
  max-width: 60ch;
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.8);
  font-size: clamp(1rem, 2.2vw, 1.125rem);
  font-weight: 300;
  letter-spacing: 0.5px;
}

/* --- Corpo --- */

.ec-ter-content,
.ec-ter-content-beige {
  padding: clamp(40px, 6vw, 60px) var(--ec-gutter);
}

.ec-ter-content { background: var(--ec-bianco); }
.ec-ter-content-beige { background: var(--ec-beige); }

.ec-ter-inner { max-width: var(--ec-colonna-testo); margin: 0 auto; }

.ec-ter-inner p {
  margin-bottom: 18px;
  color: var(--ec-testo-med);
  font-size: clamp(1rem, 2vw, 1.0625rem);
  line-height: 1.8;
}

.ec-ter-inner h3,
.ec-ter-types-inner h3 {
  margin: 10px 0 16px;
  font-family: var(--ec-serif);
  font-size: clamp(1.375rem, 3.5vw, 1.625rem);
  color: var(--ec-teal);
}

.ec-ter-inner h4 {
  margin: 30px 0 12px;
  font-family: var(--ec-serif);
  font-size: clamp(1.125rem, 2.5vw, 1.25rem);
  color: var(--ec-teal);
}

.ec-ter-inner strong { color: var(--ec-testo); }

/* I link nel testo li governa .ec-link-testo in cima al foglio */

.ec-ter-inner .ec-evidenza {
  margin: 35px 0;
  font-family: var(--ec-serif);
  font-size: clamp(1.0625rem, 2.6vw, 1.25rem);
  font-style: italic;
  line-height: 1.5;
  text-align: center;
  color: var(--ec-teal);
}

/* --- Box elenchi --- */

.ec-ter-box,
.ec-ter-box-white {
  margin: 30px 0;
  padding: clamp(20px, 4vw, 32px);
  border-radius: var(--ec-raggio);
}

.ec-ter-box { background: var(--ec-beige); }
.ec-ter-box-white { background: var(--ec-bianco); }

.ec-ter-box-title {
  margin-bottom: 14px;
  font-family: var(--ec-serif);
  font-size: 1.125rem;
  color: var(--ec-teal);
}

/* Due colonne finché ci stanno, poi una sola: nessun breakpoint fisso */
.ec-ter-box ul,
.ec-ter-box-white ul {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 2 22ch;
  column-gap: 30px;
}

.ec-ter-box li,
.ec-ter-box-white li {
  position: relative;
  margin-bottom: 8px;
  padding-left: 18px;
  color: var(--ec-testo-med);
  font-size: 0.9375rem;
  line-height: 1.7;
  break-inside: avoid;
}

.ec-ter-box li::before,
.ec-ter-box-white li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ec-oro);
}

/* --- Card con filetto oro --- */

.ec-ter-types,
.ec-ter-types-beige { padding: 0 var(--ec-gutter) clamp(40px, 6vw, 60px); }

.ec-ter-types { background: var(--ec-bianco); }
.ec-ter-types-beige { background: var(--ec-beige); }

.ec-ter-types-inner { max-width: var(--ec-colonna-testo); margin: 0 auto; }

.ec-ter-type-card {
  margin-bottom: 24px;
  padding: 16px clamp(18px, 3vw, 24px);
  border-left: 3px solid var(--ec-oro);
  border-radius: 0 6px 6px 0;
  background: var(--ec-card);
}

.ec-ter-content-beige .ec-ter-type-card,
.ec-ter-types-beige .ec-ter-type-card { background: var(--ec-bianco); }

.ec-ter-type-card h4 {
  margin: 0 0 8px;
  font-family: var(--ec-serif);
  font-size: 1.125rem;
  color: var(--ec-teal);
}

.ec-ter-type-card p {
  margin: 0;
  color: var(--ec-testo-med);
  font-size: 0.9375rem;
  line-height: 1.7;
}

/* --- Percorso numerato --- */

.ec-ter-timeline { max-width: var(--ec-colonna-testo); margin: 30px auto; }

.ec-ter-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  margin-bottom: 28px;
  align-items: start;
}

.ec-ter-step-num {
  display: grid;
  place-items: center;
  width: clamp(40px, 8vw, 48px);
  height: clamp(40px, 8vw, 48px);
  border-radius: 50%;
  background: var(--ec-teal);
  color: var(--ec-bianco);
  font-family: var(--ec-serif);
  font-size: clamp(1.0625rem, 2.5vw, 1.25rem);
}

.ec-ter-step h4 {
  margin: 0 0 6px;
  font-family: var(--ec-serif);
  font-size: 1.125rem;
  color: var(--ec-teal);
}

.ec-ter-step p {
  margin: 0;
  color: var(--ec-testo-med);
  font-size: 0.9375rem;
  line-height: 1.7;
}

/* --- Chiusura --- */

.ec-ter-cta {
  padding: clamp(40px, 6vw, 60px) var(--ec-gutter);
  background: var(--ec-teal);
  text-align: center;
}

.ec-ter-cta h3 {
  margin-bottom: 16px;
  font-family: var(--ec-serif);
  font-size: clamp(1.375rem, 3.5vw, 1.75rem);
  color: var(--ec-bianco);
}

.ec-ter-cta p {
  max-width: 60ch;
  margin: 0 auto 12px;
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(0.9375rem, 2vw, 1.0625rem);
  line-height: 1.7;
}


/* ═══════════════════════════════════════════════════════════
   MODULI — Contact Form 7
   Il plugin non porta stile proprio: senza queste regole i campi
   escono col rendering di default del browser. Vale sui tre moduli
   del sito (Contatti, Polistudio, Home).
   ═══════════════════════════════════════════════════════════ */

.ec-form-slot .wpcf7-form p { margin: 0 0 22px; }

.ec-form-slot label {
  display: block;
  margin-bottom: 4px;
  color: var(--ec-testo);
  font-size: 0.9375rem;
  font-weight: 600;
}

/* L'asterisco dei campi obbligatori */
.ec-form-slot .ec-obbl { color: var(--ec-oro-scuro); }

.ec-form-slot .wpcf7-form-control-wrap { display: block; }

.ec-form-slot input[type='text'],
.ec-form-slot input[type='email'],
.ec-form-slot input[type='tel'],
.ec-form-slot input[type='url'],
.ec-form-slot input[type='date'],
.ec-form-slot input[type='number'],
.ec-form-slot select,
.ec-form-slot textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--ec-bordo);
  border-radius: 4px;
  background: var(--ec-bianco);
  color: var(--ec-testo);
  font-family: inherit;
  /* 16px: sotto questa misura iOS ingrandisce da solo la pagina
     quando tocchi il campo, e poi non la rimpicciolisce più. */
  font-size: 1rem;
  line-height: 1.5;
  transition: border-color var(--ec-transizione), box-shadow var(--ec-transizione);
}

.ec-form-slot ::placeholder { color: var(--ec-testo-chiaro); opacity: 1; }

/* Il focus si vede sul bordo e con un alone: l'outline di sistema su
   un campo arrotondato viene squadrato e stona, ma toglierlo senza
   sostituirlo renderebbe il modulo inutilizzabile da tastiera. */
.ec-form-slot input:focus,
.ec-form-slot select:focus,
.ec-form-slot textarea:focus {
  border-color: var(--ec-oro);
  box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.22);
  outline: none;
}

.ec-form-slot textarea {
  min-height: 7em;
  resize: vertical;
}

/* La tendina: tolgo la freccia di sistema e ne disegno una in tinta */
.ec-form-slot select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 38px;
  background-image: linear-gradient(45deg, transparent 50%, var(--ec-testo-med) 50%),
                    linear-gradient(135deg, var(--ec-testo-med) 50%, transparent 50%);
  background-position: right 20px center, right 14px center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  cursor: pointer;
}

/* Consenso al trattamento dati */
.ec-form-slot .wpcf7-acceptance .wpcf7-list-item { margin: 0; }

.ec-form-slot .wpcf7-acceptance label {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding-top: 18px;
  border-top: 1px solid var(--ec-bordo);
  color: var(--ec-testo-med);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.6;
}

.ec-form-slot input[type='checkbox'] {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  accent-color: var(--ec-teal);
}

.ec-form-slot a { color: var(--ec-oro-scuro); text-decoration: underline; }

/* Invio */
.ec-form-slot input[type='submit'],
.ec-form-slot button[type='submit'] {
  display: inline-block;
  min-height: var(--ec-tocco);
  margin-top: 6px;
  padding: 14px 38px;
  border: none;
  border-radius: 3px;
  background: var(--ec-oro);
  color: var(--ec-bianco);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  cursor: pointer;
  transition: background var(--ec-transizione);
}

.ec-form-slot input[type='submit']:hover,
.ec-form-slot button[type='submit']:hover,
.ec-form-slot input[type='submit']:focus-visible,
.ec-form-slot button[type='submit']:focus-visible { background: var(--ec-oro-scuro); }

/* Rotellina di invio */
.ec-form-slot .wpcf7-spinner { margin: 0 0 0 12px; vertical-align: middle; }

/* Messaggi di esito */
.ec-form-slot .wpcf7-response-output {
  margin: 20px 0 0;
  padding: 14px 18px;
  border: 1px solid var(--ec-bordo);
  border-radius: var(--ec-raggio);
  background: var(--ec-bianco);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.ec-form-slot form.sent .wpcf7-response-output { border-color: var(--ec-teal); color: var(--ec-teal); }

.ec-form-slot form.invalid .wpcf7-response-output,
.ec-form-slot form.failed .wpcf7-response-output,
.ec-form-slot form.aborted .wpcf7-response-output { border-color: #b3261e; color: #b3261e; }

/* Errore sul singolo campo */
.ec-form-slot .wpcf7-not-valid { border-color: #b3261e; }

.ec-form-slot .wpcf7-not-valid-tip {
  display: block;
  margin-top: 6px;
  color: #b3261e;
  font-size: 0.8125rem;
}

@media (prefers-reduced-motion: reduce) {
  .ec-form-slot input,
  .ec-form-slot select,
  .ec-form-slot textarea,
  .ec-form-slot input[type='submit'] { transition: none; }
}

/* ═══════════════════════════════════════════════════════════
   LINK DENTRO AL TESTO
   Una regola sola per tutto il sito: home, tredici pagine e
   articoli del blog. Oro e grassetto, sottolineatura in hover.
   Sono esclusi i bottoni, che hanno una classe propria.
   ═══════════════════════════════════════════════════════════ */

.ec-main :is(p, li, td, th, blockquote, dd) a:not(.ec-btn-gold):not(.ec-btn-outline):not(.ec-btn-teal):not(.ec-libro-link):not(.ec-azione) {
  color: var(--ec-oro-scuro);
  font-weight: 700;
  text-decoration: none;
  transition: color var(--ec-transizione);
}

.ec-main :is(p, li, td, th, blockquote, dd) a:not(.ec-btn-gold):not(.ec-btn-outline):not(.ec-btn-teal):not(.ec-libro-link):not(.ec-azione):hover,
.ec-main :is(p, li, td, th, blockquote, dd) a:not(.ec-btn-gold):not(.ec-btn-outline):not(.ec-btn-teal):not(.ec-libro-link):not(.ec-azione):focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}