/* comestai.io — correzioni di accessibilità (WCAG 2.1 AA / EN 301 549) */

/* H1 di identificazione pagina, visibile solo agli screen reader */
.cs-sr-h1 {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Bottone "Scarica l'app": contrasto testo bianco >= 4.5:1
   (#4F708F su bianco = 5.19:1; prima #6E89A3 = 3.64:1, non conforme) */
a.elementor-button[href*="download.php"] {
    background-color: #4F708F !important;
}

/* Focus da tastiera visibile sui campi form (prima: outline:0).
   Verde brand: visibile sia su fondo chiaro (contatti) sia scuro (footer). */
.elementor-field-group .elementor-field-textual:focus,
.elementor-field-textual:focus,
input.elementor-field:focus,
textarea.elementor-field:focus,
select.elementor-field:focus {
    outline: 2px solid #8BC53F !important;
    outline-offset: 2px !important;
}

/* ============================================================
   CONTRASTI VERSIONE STANDARD (WCAG 1.4.3)
   Il grigio-blu "secondary" (#6E89A3) e il verde "accent" (#95C11F)
   fallivano su sfondo chiaro. Qui vengono resi piu' scuri (leggibili su
   chiaro); le sezioni a fondo scuro vengono poi ripristinate a colori
   chiari nei blocchi successivi.
   ============================================================ */
.elementor-kit-6 {
    --e-global-color-secondary: #35597E !important; /* era #6E89A3 -> 7.3:1 su bianco */
    --e-global-color-f931d0f:   #35597E !important;
    --e-global-color-accent:    #5E7D14 !important; /* era #95C11F -> 4.75:1 su bianco */
    --e-global-color-8290721:   #5E7D14 !important;
}

/* Nelle sezioni a fondo SCURO (marcate via JS con .cs-dark) i colori
   brand tornano chiari; nelle isole chiare (.cs-light) restano scuri.
   Cosi' accent/secondary hanno sempre contrasto adeguato col loro fondo.
   "text" (--e-global-color-text, alias --e-global-color-dca9200) segue
   la stessa logica: nel kit e' #000000 fisso (bene su fondo chiaro, ma
   invisibile su fondo scuro - es. il testo nero del consenso privacy
   nella newsletter del footer, su sfondo blu navy). */
.cs-dark {
    --e-global-color-accent:    #BFDA79 !important;
    --e-global-color-8290721:   #BFDA79 !important;
    --e-global-color-secondary: #CFD8E0 !important;
    --e-global-color-f931d0f:   #CFD8E0 !important;
    --e-global-color-text:      #CFD8E0 !important;
    --e-global-color-dca9200:   #CFD8E0 !important;
}
.cs-light {
    --e-global-color-accent:    #5E7D14 !important;
    --e-global-color-8290721:   #5E7D14 !important;
    --e-global-color-secondary: #35597E !important;
    --e-global-color-f931d0f:   #35597E !important;
    --e-global-color-text:      #000000 !important;
    --e-global-color-dca9200:   #000000 !important;
}

/* ============================================================
   NEWSLETTER (footer, tutte le pagine): il campo email era su una
   colonna al 75% e il pulsante "Iscriviti" su una colonna al 25%,
   pensate per stare sulla stessa riga - ma nel mezzo si inserisce
   il checkbox di consenso privacy (colonna al 100%), che forza un
   nuovo blocco e lascia il pulsante isolato, stretto, su una riga
   a sé. Impilo campo, checkbox e pulsante su righe piene: più
   leggibile, e il pulsante torna a distendersi su tutta la riga
   (come già previsto dallo stile "align-stretch" del widget).
   ============================================================ */
.elementor-element-6ebee5f .elementor-field-group-email,
.elementor-element-6ebee5f .e-form__buttons {
    width: 100% !important;
}

/* Il kit del tema azzera il padding di tutti i campi testuali
   (.elementor-kit-6 input{padding:0}): sul campo email, arrotondato a
   pillola (border-radius:100px), il testo/placeholder finisce a ridosso
   del bordo curvo. Rimetto un padding orizzontale leggibile. */
.elementor-element-6ebee5f input.elementor-field-textual {
    padding-left: 18px !important;
    padding-right: 18px !important;
}

/* Checkbox di consenso (privacy/newsletter): il tema non mette alcuno
   spazio fra il riquadro e il testo del label, che risultano attaccati. */
.elementor-field-type-acceptance .elementor-field-subgroup .elementor-field-option input,
.elementor-field-type-checkbox .elementor-field-subgroup .elementor-field-option input {
    margin-inline-end: 8px;
}