/* ==================================== */
/* TITOLI DELLA PAGINA E DEI POST       */
/* ==================================== */

/* Rende i titoli dei post sulla homepage blu e centrati */
.c-card__title {
    color: #448AFF; /* Blu Standard del tema TechNews (corrisponde a --color) */
    text-align: center;
}

/* Stile per i titoli dei post singoli (all'interno della pagina del post) */
.content__header h1 {
    color: #448AFF;
    text-align: center;
}

/* Applica la centratura anche al titolo nel template 'page.hbs' */
.page .content__header h1 {
    text-align: center;
}


/* ==================================== */
/* TAG HR RIPULITO E MODIFICATO         */
/* ==================================== */

/* Annulla tutte le modifiche al tag hr */
hr {
  background: initial;
  border: initial;
  height: initial;
  line-height: initial;
  max-width: initial;
  text-align: initial;
}

hr::before {
  content: none;
  /* oppure content: ""; */
}

/* Ora aggiungi i tuoi stili personalizzati */
hr {
  border: none;
  border-top: 1px solid #448AFF; /* esempio: linea grigia */
  margin: 2rem 0;
  /* aggiungi qui tutti gli stili che preferisci */
}

/* ==================================== */
/* FINO A QUI NON MODIFICARE MAI       */
/* ==================================== */





















/* ======================================
    VARIABILI CUSTOM E STILI DI BASE
    ====================================== 
*/

:root {
    --color-cta-primary: #448AFF; /* Blu richiesto per CTA Hero/Finale */
    
    /* Colori Pastello per le schede dei servizi */
    --color-highlight: #FFCBA4;   /* Soft Coral/Pesca (Terapia Individuale) */
    --color-success: #C8E6C9;     /* Soft Sage/Verde Menta (Terapia di Coppia) */
    --color-info: #C6E2FF;        /* Soft Sky Blue/Azzurro (Psicoterapia Online) */
    
    --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); 
    --card-hover-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); 
    --padding-block: 3.5rem; 
}

/* Allineamento e Spaziatura delle Sezioni */
.blocco-hero,
.blocco-approccio,
.blocco-servizi,
.blocco-cta-finale {
    padding: var(--padding-block) 0;
    max-width: var(--main-col-width); 
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem; 
    padding-right: 1rem;
}

/* Aggiunta spaziatura SOTTO il sottotitolo Hero */
.blocco-hero__sottotitolo {
    margin-bottom: 2.5rem; 
}

/* Separatore Personalizzato */
.separator-custom {
    border: none;
    border-top: 1px solid var(--border-color-light);
    margin: 3rem 0;
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
}

/* Stili per Titoli (per coerenza visiva) */
.subtitle-accent {
    font-size: 1.1rem;
    font-weight: var(--font-weight-bold);
    color: var(--color); 
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.title-main {
    margin-top: 0;
    font-size: clamp(1.8rem, 4vw, 2.5rem);
}

.main-color-text {
    color: var(--color) !important;
}

/* ======================================
    DROP CAP PERSONALIZZATO
    ====================================== 
*/

.dropcap-container {
    overflow: hidden; 
    margin-top: 1rem;
    text-indent: 0; 
}
.dropcap-initial {
    float: left;
    font-size: 4.5em; 
    line-height: 0.8;
    margin-right: 0.15em;
    margin-top: 0.1em;
    font-weight: var(--headings-weight); 
    color: var(--color);
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
}
.dropcap-text {
    display: inline;
    margin-top: 0;
}

/* Immagine Approccio */
.blocco-approccio__immagine {
    border-radius: var(--border-radius);
    margin-top: 2.5rem;
    box-shadow: var(--card-shadow);
}


/* ======================================
    BLOCCO SERVIZI (IN COLONNA)
    ====================================== 
*/

.griglia-servizi {
    display: flex;
    flex-direction: column; 
    gap: 2rem; 
    margin-top: 3rem;
}

/* Stile Card Singola */
.servizio-card {
    background-color: var(--white);
    padding: 2rem;
    border-radius: var(--border-radius);
    box-shadow: var(--card-shadow);
    display: flex; 
    flex-direction: column;
    transition: all 0.3s ease-in-out;
    border: 1px solid var(--border-color-light); 
}

.servizio-card:hover {
    box-shadow: var(--card-hover-shadow);
    transform: translateY(-5px); 
}

.servizio-card__titolo {
    font-size: 1.3rem;
    color: var(--headings-color);
    margin-top: 0;
    margin-bottom: 1rem;
    line-height: 1.3;
}

.servizio-card__descrizione {
    flex-grow: 1; 
    margin-bottom: 1.5rem;
}

.servizio-card__cta {
    margin-top: auto; 
    text-align: center;
}

/* Colorazione Card (Bordo Sinistro) - Colori Pastello */
.card-highlight { border-left: 5px solid var(--color-highlight); }
.card-success { border-left: 5px solid var(--color-success); }
.card-info { border-left: 5px solid var(--color-info); }


/* ======================================
    STILI CTA (PULSANTE)
    ====================================== 
*/

.blocco-cta {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: var(--font-weight-bold);
    text-align: center;
    text-decoration: none !important;
    border-radius: 5px;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    border: none;
    line-height: 1.2;
}

/* CTA Principale (Hero e Finale) - Colore #448AFF */
.blocco-cta--large {
    background-color: var(--color-cta-primary);
    font-size: 1.25rem;
    padding: 1.2rem 2.5rem;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}
.blocco-cta--large:hover { 
    background-color: #3870d0;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(68, 138, 255, 0.4);
}

/* Forza il testo bianco per tutti i CTA blu (Hero e Finale) */
.blocco-cta--large,
.blocco-hero .blocco-cta--highlight {
    color: var(--white) !important; 
}

/* Forzo il CTA Hero ad essere blu (necessario a causa della classe --highlight) */
.blocco-hero .blocco-cta--highlight {
     background-color: var(--color-cta-primary);
}
.blocco-hero .blocco-cta--highlight:hover {
     background-color: #3870d0;
}

/* CORREZIONE FINALE: Forza il colore blu principale per il CTA finale */
.blocco-cta-finale .blocco-cta--large {
    background-color: var(--color-cta-primary) !important;
}
.blocco-cta-finale .blocco-cta--large:hover {
    background-color: #3870d0 !important;
}


/* CTA Scheda 1 (Terapia Individuale) - Colore Highlight/Pesca */
.blocco-cta--highlight { 
    background-color: var(--color-highlight); 
}
.servizio-card .blocco-cta--highlight:hover { 
    background-color: #f7a977; 
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(255, 203, 164, 0.4);
}

/* CTA Scheda 2 (Terapia di Coppia) - Colore Success/Menta */
.blocco-cta--success { 
    background-color: var(--color-success); 
}
.blocco-cta--success:hover { 
    background-color: #9cbda2; 
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(200, 230, 201, 0.4);
}

/* CTA Scheda 3 (Psicoterapia Online) - Colore Info/Azzurro Pastello */
.blocco-cta--info { 
    background-color: var(--color-info); 
}
.blocco-cta--info:hover { 
    background-color: #9ab4d6; 
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(198, 226, 255, 0.4);
}

/* MODIFICA RICHIESTA: I pulsanti delle schede devono avere testo bianco */
.servizio-card .blocco-cta--highlight,
.blocco-cta--success,
.blocco-cta--info {
    color: var(--white) !important;
}


/* ======================================
    STILE BLOCKQUOTE PERSONALIZZATO (Citazione)
    ====================================== 
*/

.blocco-cta-finale blockquote {
    padding: 3rem 2rem; 
    border: none;
    position: relative;
    background-color: var(--lighter); 
    margin: 1.5rem auto 2.5rem auto;
    font-size: 1.25rem; 
    line-height: 1.5;
    font-style: italic;
    border-radius: var(--border-radius);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); 
    color: var(--headings-color); 
}

/* Grande apice di citazione al centro */
.blocco-cta-finale blockquote::before {
    content: "\201C"; 
    font-family: serif; 
    font-size: 6rem;
    color: var(--color-cta-primary);
    line-height: 0;
    position: absolute;
    top: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0.1; 
    z-index: 0;
}

/* Stile per il testo all'interno del blockquote */
.blocco-cta-finale blockquote p {
    position: relative;
    z-index: 1; 
}

.blocco-cta-finale blockquote p:first-child strong {
    font-size: 1.4rem;
    font-style: normal;
    color: var(--color-cta-primary);
    display: block;
    margin-bottom: 0.5rem;
}











/* ======================================
    STILI ELENCHI MIGLIORATI
    Solo per sezioni con classe .contenuto-formattato
    ====================================== 
*/

.contenuto-formattato ul,
.contenuto-formattato ol {
    margin: 2rem 0;
    padding-left: 0;
    list-style: none;
}

/* Elenchi puntati */
.contenuto-formattato ul li {
    position: relative;
    padding-left: 2rem;
    margin-bottom: 1.2rem;
    line-height: 1.7;
}

.contenuto-formattato ul li::before {
    content: "●";
    position: absolute;
    left: 0;
    color: var(--color-cta-primary);
    font-size: 1.2em;
    font-weight: bold;
    top: 0.1em;
}

/* Elenchi numerati */
.contenuto-formattato ol {
    counter-reset: lista-numerata;
}

.contenuto-formattato ol li {
    position: relative;
    padding-left: 2.5rem;
    margin-bottom: 1.2rem;
    line-height: 1.7;
    counter-increment: lista-numerata;
}

.contenuto-formattato ol li::before {
    content: counter(lista-numerata) ".";
    position: absolute;
    left: 0;
    color: var(--color-cta-primary);
    font-weight: var(--font-weight-bold);
    font-size: 1.1em;
}

/* Stile per il testo in grassetto all'inizio degli item */
.contenuto-formattato ul li strong:first-child,
.contenuto-formattato ol li strong:first-child {
    color: var(--headings-color);
}

/* Elenchi annidati (secondo livello) */
.contenuto-formattato ul ul,
.contenuto-formattato ol ol,
.contenuto-formattato ul ol,
.contenuto-formattato ol ul {
    margin: 0.5rem 0 0.5rem 1rem;
}

.contenuto-formattato ul ul li::before {
    content: "○";
    font-size: 1em;
}

.contenuto-formattato ol ol li::before {
    content: counter(lista-numerata, lower-alpha) ".";
}




/* =========================================
   STILI DEL FORM DI CONTATTO
   ========================================= */

/* Contenitore del Form */
.form-box {
  background-color: #fcfcfc;
  padding: 2rem; 
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  max-width: 700px;
  margin: 3rem auto;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  position: relative; 
}

/* Righe del form */
.form-row {
  margin-bottom: 1.5rem;
}

/* Etichette */
.form-box label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: bold;
  color: #333;
}

/* Input e Textarea */
.form-box input[type=text], 
.form-box input[type=email], 
.form-box input[type=number], 
.form-box textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-family: inherit;
  font-size: 1rem;
  transition: border-color 0.3s ease;
}

.form-box input:focus, 
.form-box textarea:focus {
  outline: none;
  border-color: #448AFF;
}

/* Pulsante di Invio */
.form-box button[type=submit] {
  background-color: #448AFF;
  color: white;
  padding: 15px 30px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: bold;
  width: 100%;
  transition: background-color 0.3s ease, transform 0.2s;
  margin-top: 1rem;
}

.form-box button[type=submit]:hover {
  background-color: #3870d0;
  transform: translateY(-2px);
}

/* =========================================
   HONEYPOT (ANTISPAM) - FONDAMENTALE
   ========================================= */
.honey-pot {
    opacity: 0;
    position: absolute;
    top: 0;
    left: -9999px;
    height: 0;
    width: 0;
    z-index: -1;
}