/*
 * CSS proprio di EdilArt, caricato dopo il tema.
 * In public/theme/ ci va solo roba ThemeForest: qui non si mescolano.
 */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* ==========================================================================
   PALETTE
   Tre colori: arancione del logo, bianco, nero. Il tema porta ovunque il suo
   rosso mattone (#9E4B47, 121 volte in style.css): qui viene neutralizzato
   sugli elementi che si vedono.

   Rosso e verde restano solo per esito e errori dei form: sono segnali, non
   colori del marchio, e servono a distinguersi da soli.
   ========================================================================== */

:root {
    --ea-arancio: #f58c1f;
    --ea-nero: #111010;
    --ea-bianco: #fff;
}

::selection {
    background-color: #f58c1f;
    color: #111010;
}

/* I titoli del tema sono testo trasparente ritagliato su un gradiente rosso.
   Fuori palette e fragile: se il gradiente non si applica, spariscono. */
[class*="baslik"] {
    background-image: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    color: #111010;
}

/* Il footer era rosso mattone. */
.footer {
    background-color: #111010;
}

/* Pulsanti del tema */
.custom-button,
.custom-buttonf {
    background: #f58c1f;
    border-color: #f58c1f;
    color: #111010;
}

.custom-button:hover,
.custom-buttonf:hover {
    background: #fff;
    border-color: #fff;
    color: #111010;
}

/* Quadrati porta-icona del tema */
.iconserv,
.iconsv,
.iconk {
    background: #f58c1f;
    color: #111010;
}

.navbar .navbar-button a {
    border-color: #f58c1f;
    color: #f58c1f;
}

/* ==========================================================================
   TIPOGRAFIA
   Montserrat, self-hostato in public/theme/css/fonts/google (400/600/700,
   subset latin e latin-ext, 318 KB). Niente chiamate a fonts.googleapis.com:
   erano state tolte apposta, trasferivano l'IP di ogni visitatore a Google.
   Il selettore [class*="baslik"] prende le classi dei titoli del tema, che
   sono decine e in turco.
   ========================================================================== */

body,
button,
input,
select,
textarea,
h1, h2, h3, h4, h5, h6,
[class*="baslik"],
[class*="paragraf"] {
    font-family: 'Montserrat', sans-serif;
}

h1, h2, h3, h4, h5, h6,
[class*="baslik"] {
    font-weight: 700;
}

/* ==========================================================================
   TESTATA A DUE FASCE
   Fascia scura con i recapiti e il pulsante del preventivo, sotto il menu.
   Trasparente sopra la foto, diventa piena appena si scorre.
   ========================================================================== */

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 6;
    background: linear-gradient(180deg, rgba(13, 13, 13, .72) 0%, rgba(13, 13, 13, .35) 100%);
    transition: background-color .3s, box-shadow .3s;
}

.site-header--solid {
    background: #111010;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .28);
}

/* --- fascia dei recapiti --- */

.ea-topbar {
    border-bottom: 1px solid rgba(255, 255, 255, .16);
}

.ea-topbar .container {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 30px;
    min-height: 58px;
}

.ea-topbar__contacts {
    display: flex;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap;
}

.ea-topbar__item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 400;
    line-height: 1;
    color: rgba(255, 255, 255, .92);
    text-decoration: none;
    white-space: nowrap;
}

a.ea-topbar__item:hover {
    color: #f58c1f;
    text-decoration: none;
}

.ea-topbar__item i {
    font-size: 19px;
    line-height: 1;
    color: #f58c1f;
}

.ea-topbar__cta {
    display: inline-block;
    flex: 0 0 auto;
    height: 44px;
    line-height: 44px;
    padding: 0 28px;
    border-radius: 999px;
    background: #f58c1f;
    color: #131313;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color .25s, color .25s;
}

.ea-topbar__cta:hover {
    background: #fff;
    color: #131313;
    text-decoration: none;
}

/* --- fascia del menu --- */
/* Il tema mette .navbar in position:fixed con fondo bianco: dentro la testata
   deve stare nel flusso e trasparente. */
.site-header .navbar {
    position: static;
    background: transparent;
    z-index: auto;
}

.site-header .navbar .container {
    display: flex;
    align-items: center;
}

.site-header .navbar .logo {
    padding: 16px 0;
}

/* Su fondo scuro si usa la versione chiara del logo, non un filtro:
   brightness(0) invert(1) spegnerebbe anche l'arancione. */
.site-header .navbar .logo a img {
    height: 62px;
    margin-left: 0;
}

/* Voci a destra, non centrate: il logo resta a sinistra. */
.site-header .navbar .site-menu {
    margin-left: auto;
    margin-right: 0;
}

.site-header .navbar .site-menu ul li {
    padding: 0 0 0 32px;
}

/* Menu orizzontale o hamburger, mai tutti e due.
   Il tema decide con `max-device-width: 1180px`, cioe' la dimensione dello
   schermo fisico e non della finestra: su un portatile piccolo il menu
   spariva anche a finestra intera. Qui decide la finestra. */
@media (min-width: 992px) {
    .site-header .navbar .site-menu {
        display: block;
    }

    .site-header .navbar .hamburger-menu {
        display: none;
    }
}

@media (max-width: 991.98px) {
    .site-header .navbar .site-menu {
        display: none;
    }

    .site-header .navbar .hamburger-menu {
        display: block;
        margin-left: auto;
    }
}

.site-header .navbar .site-menu ul li a,
.site-header .navbar .site-menu ul li a:focus {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: #fff;
    transition: color .25s;
}

.site-header .navbar .site-menu ul li a:hover,
.site-header .navbar .site-menu ul li.active a {
    color: #f58c1f;
    text-decoration: none;
}

.site-header .navbar .hamburger-menu span {
    background: #fff;
}

@media (max-width: 1199.98px) {
    .ea-topbar__item--address {
        display: none;
    }
}

@media (max-width: 991.98px) {
    .ea-topbar .container {
        gap: 16px;
        justify-content: space-between;
    }

    .ea-topbar__contacts {
        gap: 18px;
    }

    .ea-topbar__item span {
        display: none;
    }

    .ea-topbar__item i {
        font-size: 22px;
    }

    .ea-topbar__cta {
        height: 38px;
        line-height: 38px;
        padding: 0 18px;
        font-size: 13px;
    }

    .site-header .navbar .logo a img {
        height: 48px;
    }
}

/* ==========================================================================
   COLORE DEI LINK
   Il bootstrap.min.css del tema e' modificato e contiene `a { color: #fff }`.
   Nel layout viene caricato DOPO style.css (ordine ereditato da functions.php,
   che non si tocca), quindi ogni link senza una regola propria e' bianco: su
   fondo chiaro sparisce. Qui il default sensato; i componenti che vogliono
   davvero il bianco hanno selettori piu' specifici e restano come sono.
   ========================================================================== */

a {
    color: #0d0d0d;
}

a:hover {
    color: #f58c1f;
}

/* ==========================================================================
   FOOTER
   Il tema riserva `padding: 430px` in cima per un'immagine decorativa
   (`img/footer-bg.jpg`) che nel pacchetto non esiste: mezzo schermo di vuoto
   su ogni pagina. Qui torna a un footer normale, a colonne.
   ========================================================================== */

.footer {
    padding: 70px 0 0;
    background-color: #111010;
    background-image: none;
}

.ea-footer__cols {
    padding-bottom: 50px;
}

.ea-footer__brand img {
    height: 58px;
    width: auto;
    margin-bottom: 18px;
}

.ea-footer__title {
    margin: 0 0 18px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #f58c1f;
}

.ea-footer__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ea-footer__list li {
    margin-bottom: 9px;
}

.ea-footer__list a,
.ea-footer__line,
.ea-footer__line a {
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .82);
    text-decoration: none;
    transition: color .25s;
}

.ea-footer__list a:hover,
.ea-footer__line a:hover {
    color: #f58c1f;
    text-decoration: none;
}

.ea-footer__line {
    margin: 0 0 12px;
}

.ea-footer__legal {
    margin: 0 0 4px;
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .55);
}

.ea-footer__social {
    display: flex;
    gap: 14px;
    margin-bottom: 20px;
    font-size: 18px;
}

.ea-footer__social a {
    color: rgba(255, 255, 255, .82);
}

.ea-footer__social a:hover {
    color: #f58c1f;
}

.ea-footer__cta {
    display: inline-block;
    height: 46px;
    line-height: 46px;
    padding: 0 26px;
    border-radius: 999px;
    background: #f58c1f;
    color: #111010;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color .25s;
}

.ea-footer__cta:hover {
    background: #fff;
    color: #111010;
    text-decoration: none;
}

.ea-footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.ea-footer__bottom .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-top: 22px;
    padding-bottom: 22px;
}

.ea-footer__area,
.ea-footer__copy {
    margin: 0;
    font-size: 13px;
    color: rgba(255, 255, 255, .55);
}

.ea-footer__area a {
    color: rgba(255, 255, 255, .55);
}

.ea-footer__area a:hover {
    color: #f58c1f;
}

/* Il separatore e' un elemento a se' e non testo, cosi' la riga puo' andare
   a capo fra un comune e l'altro sugli schermi stretti. */
.ea-footer__area span {
    margin: 0 6px;
}

@media (max-width: 991.98px) {
    .footer {
        padding-top: 50px;
    }

    .ea-footer__cols > div {
        margin-bottom: 34px;
    }

    .ea-footer__bottom .container {
        justify-content: center;
        text-align: center;
    }
}

/* ==========================================================================
   MENU LATERALE
   `.side-widget .address a` nel tema e' un quadratino social da 53x49 con il
   testo bianco: infilarci dentro numero e email li rendeva invisibili e
   tagliati. Qui tornano righe di testo leggibili.
   ========================================================================== */

.side-widget .address {
    font-size: 17px;
}

.side-widget .address > a {
    width: auto;
    height: auto;
    display: block;
    margin: 0 auto;
    line-height: 1.5;
    font-family: 'Montserrat', sans-serif;
    font-size: 17px;
    color: #0d0d0d;
}

.side-widget .address > a:hover {
    color: #f58c1f;
    text-decoration: underline;
}

.side-widget .iconsv {
    width: 54px;
    height: 54px;
    line-height: 38px;
    margin-bottom: 10px;
    padding: 8px;
    font-size: 2.2rem;
}

.side-widget .bosluksv {
    margin-top: 1.6rem;
}

/* ==========================================================================
   TESTATA DELLE PAGINE INTERNE
   Il menu del tema e' position:fixed e opaco: senza qualcosa sotto, i primi
   ~95px di ogni pagina finiscono dietro. Nel tema originale quel qualcosa e'
   il banner .page-header, che il porting non aveva ripreso.
   ========================================================================== */

.page-header {
    height: auto;
    min-height: 380px;
    padding: 210px 0 70px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Il testo del banner e' bianco: su una foto serve qualcosa che lo tenga su. */
.page-header::after {
    background: linear-gradient(90deg, rgba(13, 13, 13, .78) 0%, rgba(13, 13, 13, .4) 100%);
}

/* Senza foto: sfondo pieno, altrimenti sarebbe bianco su bianco. */
.page-header--plain {
    background-image: #111010;
}

.page-header--plain::after {
    background: none;
}

.page-header .container h1 {
    width: 100%;
    display: block;
    margin-bottom: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 64px;
    font-weight: 700;
    line-height: 1.1;
    color: #fff;
}

.page-header__claim {
    max-width: 620px;
    margin: 18px 0 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 19px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .9);
}

.page-header__cta {
    display: inline-block;
    margin-top: 28px;
    padding: 0 40px;
    height: 58px;
    line-height: 58px;
    background: #f58c1f;
    border-radius: 1px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #111010;
    text-decoration: none;
    transition: background-color .3s, color .3s;
}

.page-header__cta:hover {
    background: #fff;
    color: #111010;
    text-decoration: none;
}

/* Pagine senza banner. */
.navbar-spacer {
    height: 168px;
}

@media (max-width: 767.98px) {
    .page-header {
        min-height: 260px;
        padding: 150px 0 45px;
    }

    .page-header .container h1 {
        font-size: 38px;
    }

    .navbar-spacer {
        height: 124px;
    }
}

/* ==========================================================================
   CARD DI SERVIZI E LAVORI
   Nel tema la card sta sotto .component-systemTabs dentro un carosello, e
   .cardContent e' in posizione assoluta *sopra la foto*: l'icona ha
   margin-top:26rem per scavalcarla e il titolo e' bianco. Senza foto restava
   un buco di 260px e il titolo invisibile. Questa funziona in entrambi i casi.
   ========================================================================== */

/* Entrata in CSS puro invece che con WOW: nessuna dipendenza dal JS. */
@keyframes ea-card-in {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

.ea-card {
    animation: ea-card-in .45s ease both;
    display: flex;
    flex-direction: column;
    height: 100%;
    margin-bottom: 24px;
    background: #fff;
    border: 1px solid #e8e3e2;
    border-radius: 1px;
    overflow: hidden;
    text-decoration: none;
    transition: transform .3s, box-shadow .3s, border-color .3s;
}

.ea-card:hover {
    transform: translateY(-4px);
    border-color: #d9cfce;
    box-shadow: 0 12px 28px rgba(13, 13, 13, .1);
    text-decoration: none;
}

.ea-card__media {
    position: relative;
    height: 200px;
    background: #f4f0ef;
    overflow: hidden;
}

.ea-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s;
}

.ea-card:hover .ea-card__media img {
    transform: scale(1.04);
}

/* Senza foto: l'icona al posto dell'immagine, non sopra. */
.ea-card__media--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(140deg, #f7f3f2 0%, #efe7e6 100%);
}

.ea-card__media--empty i {
    font-size: 46px;
    line-height: 1;
    color: #f58c1f;
}

.ea-card__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 20px 20px 22px;
}

.ea-card__title {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
    color: #0d0d0d;
    transition: color .3s;
}

.ea-card:hover .ea-card__title {
    color: #f58c1f;
}

.ea-card__meta {
    margin: 8px 0 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    letter-spacing: .3px;
    color: #8f8785;
}

.ea-card__text {
    margin: 8px 0 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    line-height: 1.55;
    color: #616161;
}

.ea-card:hover /* ==========================================================================
   FORM PREVENTIVO
   Il tema stilava la markup di Contact Form 7, non la nostra: i campi vanno
   ridichiarati da zero. input[type="tel"] il tema non lo prevede affatto.
   ========================================================================== */

.quote-form .row {
    --bs-gutter-x: 20px;
    --bs-gutter-y: 20px;
}

.quote-form input[type="text"],
.quote-form input[type="email"],
.quote-form input[type="tel"],
.quote-form select,
.quote-form textarea {
    width: 100%;
    max-width: 100%;
    display: block;
    height: 64px;
    padding: 0 22px;
    background: #fff;
    border: 1px solid #ddd6d5;
    border-radius: 1px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #0d0d0d;
    transition: border-color .25s, box-shadow .25s;
    appearance: none;
    -webkit-appearance: none;
}

.quote-form textarea {
    height: auto;
    min-height: 180px;
    padding: 20px 22px;
    line-height: 1.6;
    resize: vertical;
}

.quote-form ::placeholder {
    color: #8f8785;
    opacity: 1;
}

.quote-form input:focus,
.quote-form select:focus,
.quote-form textarea:focus {
    border-color: #f58c1f;
    box-shadow: 0 0 0 3px rgba(158, 75, 71, .12);
}

/* La freccia del tema e' posizionata a 34px dall'alto: con select piu' bassi
   finisce fuori. Sostituita, non spostata. */
.quote-form select {
    padding-right: 52px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23f58c1f' stroke-width='2'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 20px center;
    background-size: 14px;
    color: #0d0d0d;
    cursor: pointer;
}

.quote-form select:focus {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23f58c1f' stroke-width='2'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E");
    background-position: right 20px center;
    background-size: 14px;
}

/* Consenso privacy */
.quote-form .privacy-consent {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    line-height: 1.55;
    color: #616161;
    cursor: pointer;
}

.quote-form .privacy-consent input[type="checkbox"] {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 2px 0 0;
    background: #fff;
    border: 1px solid #ddd6d5;
    border-radius: 1px;
    appearance: none;
    -webkit-appearance: none;
    transform: none;
    cursor: pointer;
    transition: background-color .2s, border-color .2s;
}

.quote-form .privacy-consent input[type="checkbox"]:checked {
    background: #f58c1f url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23111010' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.5 3.5L13 5'/%3E%3C/svg%3E") no-repeat center / 12px;
    border-color: #f58c1f;
}

.quote-form .privacy-consent input[type="checkbox"]:focus-visible {
    box-shadow: 0 0 0 3px rgba(158, 75, 71, .18);
}

.quote-form .privacy-consent a {
    color: #f58c1f;
    text-decoration: underline;
}

/* Pulsante: il tema definisce .custom-button per gli <a>, qui e' un <button>. */
.quote-form button[type="submit"] {
    height: 64px;
    line-height: 1;
    padding: 0 46px;
    border: none;
    border-radius: 1px;
    background: #f58c1f;
    color: #111010;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .3px;
    cursor: pointer;
    transition: background-color .3s;
}

.quote-form button[type="submit"]:hover {
    background: #111010;
    color: #fff;
}

/* Errori di validazione */
.quote-form .field-error {
    display: block;
    margin-top: 6px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    color: #b3261e;
}

.quote-form .is-invalid {
    border-color: #b3261e;
}

.quote-form .is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(179, 38, 30, .12);
}

/* Esito dell'invio */
.quote-feedback {
    padding: 18px 22px;
    margin-bottom: 24px;
    border-left: 3px solid #2e7d32;
    background: #edf7ed;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    color: #1e4620;
}

.quote-feedback--error {
    border-left-color: #b3261e;
    background: #fdecea;
    color: #7f1d17;
}

/* Etichette per screen reader: i placeholder da soli non bastano. */
.visually-hidden-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 767.98px) {
    .quote-form input[type="text"],
    .quote-form input[type="email"],
    .quote-form input[type="tel"],
    .quote-form select {
        height: 56px;
        padding: 0 18px;
    }

    .quote-form select {
        padding-right: 46px;
    }

    .quote-form textarea {
        padding: 16px 18px;
    }

    .quote-form button[type="submit"] {
        width: 100%;
        height: 56px;
        padding: 0;
    }
}

/* ==========================================================================
   COME OPERIAMO
   Stepper senza JavaScript: i radio stanno prima nel DOM e il CSS usa
   :checked ~ per accendere l'icona e mostrare il pannello. Funziona anche
   se il JS non gira, e senza dipendere dagli script del tema.
   ========================================================================== */

.ea-fasi {
    padding: 90px 0 100px;
    background: #111010;
}

.ea-fasi__titolo {
    margin: 0 0 60px;
    font-size: 44px;
    font-weight: 700;
    line-height: 1.1;
    text-transform: uppercase;
    color: #fff;
}

.ea-fasi__titolo span {
    display: inline-block;
    padding: 2px 22px 6px;
    border-radius: 999px;
    background: #f58c1f;
    color: #111010;
}

.ea-fasi__radio {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.ea-fasi__icone {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin: 0 0 44px;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.ea-fasi__icone li {
    position: relative;
    flex: 1 1 120px;
    max-width: 170px;
    text-align: center;
}

.ea-fasi__icone label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 96px;
    margin: 0;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 14px;
    color: #fff;
    font-size: 40px;
    cursor: pointer;
    transition: background-color .25s, color .25s, border-color .25s;
}

.ea-fasi__icone label:hover {
    border-color: #f58c1f;
    color: #f58c1f;
}

.ea-fasi__numero {
    display: block;
    margin-top: 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, .45);
}

.ea-fasi__pannelli {
    display: grid;
}

.ea-fasi__pannello {
    grid-area: 1 / 1;
    padding: 34px 38px;
    border-radius: 18px;
    background: #f58c1f;
    color: #111010;
    visibility: hidden;
    opacity: 0;
    transition: opacity .25s;
}

.ea-fasi__pannello h3 {
    margin: 0 0 14px;
    font-size: 22px;
    font-weight: 700;
    text-transform: uppercase;
    color: #111010;
}

.ea-fasi__pannello p {
    margin: 0;
    max-width: 70ch;
    font-size: 16px;
    line-height: 1.7;
    color: #111010;
}

/* Un blocco per fase: il radio n accende l'icona n e il pannello n. */
.ea-fasi__radio:nth-of-type(1):checked ~ .ea-fasi__icone li:nth-child(1) label,
.ea-fasi__radio:nth-of-type(2):checked ~ .ea-fasi__icone li:nth-child(2) label,
.ea-fasi__radio:nth-of-type(3):checked ~ .ea-fasi__icone li:nth-child(3) label,
.ea-fasi__radio:nth-of-type(4):checked ~ .ea-fasi__icone li:nth-child(4) label,
.ea-fasi__radio:nth-of-type(5):checked ~ .ea-fasi__icone li:nth-child(5) label,
.ea-fasi__radio:nth-of-type(6):checked ~ .ea-fasi__icone li:nth-child(6) label {
    background: #f58c1f;
    border-color: #f58c1f;
    color: #111010;
}

.ea-fasi__radio:nth-of-type(1):checked ~ .ea-fasi__icone li:nth-child(1) .ea-fasi__numero,
.ea-fasi__radio:nth-of-type(2):checked ~ .ea-fasi__icone li:nth-child(2) .ea-fasi__numero,
.ea-fasi__radio:nth-of-type(3):checked ~ .ea-fasi__icone li:nth-child(3) .ea-fasi__numero,
.ea-fasi__radio:nth-of-type(4):checked ~ .ea-fasi__icone li:nth-child(4) .ea-fasi__numero,
.ea-fasi__radio:nth-of-type(5):checked ~ .ea-fasi__icone li:nth-child(5) .ea-fasi__numero,
.ea-fasi__radio:nth-of-type(6):checked ~ .ea-fasi__icone li:nth-child(6) .ea-fasi__numero {
    color: #f58c1f;
}

.ea-fasi__radio:nth-of-type(1):checked ~ .ea-fasi__pannelli .ea-fasi__pannello:nth-child(1),
.ea-fasi__radio:nth-of-type(2):checked ~ .ea-fasi__pannelli .ea-fasi__pannello:nth-child(2),
.ea-fasi__radio:nth-of-type(3):checked ~ .ea-fasi__pannelli .ea-fasi__pannello:nth-child(3),
.ea-fasi__radio:nth-of-type(4):checked ~ .ea-fasi__pannelli .ea-fasi__pannello:nth-child(4),
.ea-fasi__radio:nth-of-type(5):checked ~ .ea-fasi__pannelli .ea-fasi__pannello:nth-child(5),
.ea-fasi__radio:nth-of-type(6):checked ~ .ea-fasi__pannelli .ea-fasi__pannello:nth-child(6) {
    visibility: visible;
    opacity: 1;
}

.ea-fasi__radio:focus-visible ~ .ea-fasi__icone label {
    outline: 2px solid #f58c1f;
    outline-offset: 3px;
}

@media (max-width: 767.98px) {
    .ea-fasi {
        padding: 60px 0 70px;
    }

    .ea-fasi__titolo {
        margin-bottom: 40px;
        font-size: 30px;
    }

    .ea-fasi__icone {
        gap: 10px;
    }

    .ea-fasi__icone li {
        flex: 1 1 84px;
    }

    .ea-fasi__icone label {
        height: 74px;
        font-size: 30px;
    }

    .ea-fasi__pannello {
        padding: 24px 22px;
    }
}


/* ==========================================================================
   PAGINE DI TESTO
   Sostenibilita, Lavora con noi, e le due legali.
   ========================================================================== */

.ea-occhiello {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #f58c1f;
}

.paragraf h2 {
    margin: 46px 0 16px;
    font-size: 30px;
    line-height: 1.25;
}

.paragraf h2:first-of-type {
    margin-top: 0;
}

.paragraf h3 {
    margin: 36px 0 12px;
    font-size: 21px;
}

.paragraf p,
.paragraf li {
    font-size: 17px;
    line-height: 1.8;
    color: #3f3f3f;
}

.paragraf ul {
    margin: 0 0 18px;
    padding-left: 22px;
    list-style: disc;
}

.paragraf li {
    margin-bottom: 8px;
}

.paragraf a {
    color: #111010;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.paragraf a:hover {
    color: #f58c1f;
}

.ea-contatto-diretto {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

/* --- pagine dei comuni --- */

.ea-area-services {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0;
    list-style: none;
}

.ea-area-services a {
    display: block;
    padding: 10px 18px;
    border: 1px solid #e2ddda;
    border-radius: 999px;
    font-size: 15px;
    color: #111010;
    transition: background .2s, border-color .2s, color .2s;
}

.ea-area-services a:hover {
    border-color: #f58c1f;
    background: #f58c1f;
    color: #fff;
}

/* --- pagine legali --- */

.ea-legale {
    max-width: 78ch;
}

.ea-legale h2 {
    font-size: 24px;
}

.ea-legale p,
.ea-legale li {
    font-size: 16px;
}

.ea-legale__tabella {
    width: 100%;
    margin: 6px 0 20px;
    border-collapse: collapse;
    font-size: 15px;
}

.ea-legale__tabella th,
.ea-legale__tabella td {
    padding: 12px 14px;
    border: 1px solid #e2ddda;
    text-align: left;
    vertical-align: top;
}

.ea-legale__tabella th {
    background: #f6f2f0;
    font-weight: 700;
}

.ea-legale__tabella code {
    font-size: 14px;
    color: #111010;
}

.ea-legale__data {
    margin-top: 40px;
    padding-top: 18px;
    border-top: 1px solid #e2ddda;
    font-size: 14px;
    color: #7c7c7c;
}

@media (max-width: 767.98px) {
    .paragraf h2 {
        font-size: 24px;
    }

    .paragraf p,
    .paragraf li {
        font-size: 16px;
    }

    .ea-legale__tabella {
        font-size: 14px;
    }

    .ea-legale__tabella th,
    .ea-legale__tabella td {
        padding: 9px 10px;
    }
}

/* Il menu ora ha sette voci: sopra i 992px devono starci senza spezzarsi. */
@media (min-width: 992px) and (max-width: 1399.98px) {
    .site-header .navbar .site-menu ul li {
        padding: 0 0 0 20px;
    }

    .site-header .navbar .site-menu ul li a {
        font-size: 13px;
        letter-spacing: .3px;
    }
}