/* RESET DI BASE E TIPOGRAFIA GENERALE */



*,

*::before,

*::after {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}



html {

    scroll-behavior: smooth;

}



body {

    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    color: #1b1f2a;

    background-color: #ffffff;

    line-height: 1.6;

    font-size: 16px;

}



/* LINK */



a {

    color: #1747a6;

    text-decoration: none;

}



a:hover {

    text-decoration: underline;

}



/* CONTENITORE GENERALE */



.container {

    max-width: 1180px;

    margin: 0 auto;

    padding: 0 1.5rem;

}



/* HEADER E NAVBAR */



.header {

    position: sticky;

    top: 0;

    z-index: 100;

    background-color: #0b1f3b;

    color: #ffffff;

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);

}



.header__inner {

    display: flex;

    align-items: center;

    justify-content: space-between;

    height: 64px;

}



.header__logo .logo {

    font-weight: 700;

    font-size: 1rem;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    color: #ffffff;

}



.header__nav .nav__list {

    list-style: none;

    display: flex;

    gap: 1.5rem;

    font-size: 0.95rem;

}



.header__nav a {

    color: #ffffff;

    font-weight: 500;

    position: relative;

}



.header__nav a::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: -6px;

    width: 0;

    height: 2px;

    background-color: #f5c15b;

    transition: width 0.2s ease-out;

}



.header__nav a:hover::after,

.header__nav a.is-active::after {

    width: 100%;

}



/* BOTTONI */



.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 0.75rem 1.5rem;

    border-radius: 999px;

    font-size: 0.95rem;

    font-weight: 600;

    border: 1px solid transparent;

    cursor: pointer;

    text-decoration: none;

    transition: background-color 0.2s ease-out, color 0.2s ease-out, border-color 0.2s ease-out, transform 0.1s ease-out, box-shadow 0.1s ease-out;

    white-space: nowrap;

}



.btn--primary {

    background-color: #1747a6;

    color: #ffffff;

    border-color: #1747a6;

    box-shadow: 0 10px 18px rgba(23, 71, 166, 0.25);

}



.btn--primary:hover {

    background-color: #123578;

    border-color: #123578;

    transform: translateY(-1px);

    box-shadow: 0 12px 22px rgba(23, 71, 166, 0.3);

}



.btn--secondary {

    background-color: #ffffff;

    color: #1747a6;

    border-color: #d0d4e0;

}



.btn--secondary:hover {

    background-color: #f5f6fb;

    border-color: #b7bdd0;

}



.btn--outline {

    background-color: transparent;

    color: #1747a6;

    border-color: #1747a6;

}



.btn--outline:hover {

    background-color: #1747a6;

    color: #ffffff;

}



/* SEZIONI GENERALI */



main.main-area {

    padding-top: 0;

}



.section {

    padding: 4rem 0;

}



.section--light {

    background-color: #f7f8fb;

}



.section--highlight {

    background: linear-gradient(135deg, #0b1f3b, #193f73);

    color: #ffffff;

}



.section--legal {

    background-color: #f2f3f7;

    padding: 3rem 0;

}



.section--cta {

    background: linear-gradient(135deg, #0b1f3b, #1747a6);

    color: #ffffff;

    padding: 3.5rem 0;

}



.section h2 {

    font-size: 1.7rem;

    margin-bottom: 1.5rem;

    letter-spacing: 0.02em;

}



.section--highlight h2,

.section--cta h2 {

    color: #ffffff;

}



.section__intro {

    max-width: 740px;

    font-size: 1rem;

    color: #4a4f60;

    margin-bottom: 2rem;

}



.section--highlight .section__intro,

.section--cta .section__intro {

    color: #dbe0f0;

}



.section__actions {

    margin-top: 2rem;

}



/* HERO HOME E PAGINE INTERNE */



.hero {

    background: radial-gradient(circle at top left, #1747a6 0%, #0b1f3b 40%, #050a14 100%);

    color: #ffffff;

    padding: 5rem 0 4rem 0;

}



.hero--inner {

    padding: 4rem 0 3rem 0;

    background: linear-gradient(135deg, #0b1f3b, #1d508c);

}



.hero__inner {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 2.5rem;

}



.hero__content {

    max-width: 640px;

}



.hero__content h1 {

    font-size: 2.1rem;

    margin-bottom: 1rem;

    letter-spacing: 0.03em;

}



.hero__content p {

    font-size: 1.03rem;

    color: #e1e5f5;

    margin-bottom: 1.5rem;

}



.hero__actions {

    display: flex;

    flex-wrap: wrap;

    gap: 0.75rem;

}



.hero__image {

    flex: 1;

    min-height: 180px;

    border-radius: 24px;

    background: radial-gradient(circle, rgba(255,255,255,0.18) 0, transparent 60%),

                linear-gradient(135deg, #1d508c, #0d2545);

    box-shadow: 0 18px 35px rgba(0, 0, 0, 0.35);

}









/* CARDS GENERALI */



.cards {

    display: grid;

    gap: 1.75rem;

}



.cards--three {

    grid-template-columns: repeat(3, minmax(0, 1fr));

}



.cards--grid {

    grid-template-columns: repeat(3, minmax(0, 1fr));

}



.card {

    background-color: #ffffff;

    border-radius: 16px;

    padding: 1.5rem;

    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);

    border: 1px solid #e2e6f0;

    transition: transform 0.12s ease-out, box-shadow 0.12s ease-out, border-color 0.12s ease-out;

}



.section--highlight .card {

    background-color: rgba(4, 7, 20, 0.2);

    border-color: rgba(255,255,255,0.12);

}



.card h3 {

    font-size: 1.08rem;

    margin-bottom: 0.75rem;

}



.card p {

    font-size: 0.96rem;

    color: #4a4f60;

}



.section--highlight .card p {

    color: #d8def3;

}



.card__link {

    display: inline-flex;

    margin-top: 0.85rem;

    font-size: 0.9rem;

    font-weight: 600;

    color: #1747a6;

}



.section--highlight .card__link {

    color: #ffdf8a;

}



.card__link::after {

    content: "›";

    margin-left: 0.35rem;

}



.card--post h3 a {

    color: #1b1f2a;

}



.card--post h3 a:hover {

    color: #1747a6;

    text-decoration: none;

}



.card__meta {

    display: inline-block;

    margin-top: 0.85rem;

    font-size: 0.8rem;

    color: #72778a;

    text-transform: uppercase;

    letter-spacing: 0.06em;

}



.card:hover {

    transform: translateY(-3px);

    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.16);

    border-color: #c2c9de;

}



/* FEATURES (PER PERCHE' LO STUDIO) */



.features {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 1.75rem;

}



.feature h3 {

    font-size: 1.05rem;

    margin-bottom: 0.5rem;

}



.feature p {

    font-size: 0.95rem;

    color: #000000;

}



/* GRID 2 COLONNE GENERALI */



.grid {

    display: grid;

    gap: 2rem;

}



.grid--two {

    grid-template-columns: repeat(2, minmax(0, 1fr));

}



.grid__item h3 {

    font-size: 1.08rem;

    margin-bottom: 0.75rem;

}



.grid__item p {

    font-size: 0.96rem;

    margin-bottom: 0.75rem;

    color: #4a4f60;

}



.grid__item ul {

    padding-left: 1.2rem;

    margin-top: 0.25rem;

}



.grid__item li {

    font-size: 0.95rem;

    margin-bottom: 0.4rem;

    color: #4a4f60;

}



/* STEPS / NUMERI */



.steps {

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 1.75rem;

}



.step {

    position: relative;

    background-color: #ffffff;

    border-radius: 16px;

    padding: 1.5rem 1.25rem 1.25rem 1.25rem;

    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);

    border: 1px solid #e2e6f0;

}



.section--highlight .step {

    background-color: rgba(4, 7, 20, 0.25);

    border-color: rgba(255,255,255,0.14);

}



.step__number {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 32px;

    height: 32px;

    border-radius: 999px;

    background-color: #1747a6;

    color: #ffffff;

    font-weight: 700;

    font-size: 0.9rem;

    margin-bottom: 0.9rem;

}



.section--highlight .step__number {

    background-color: #f5c15b;

    color: #0b1f3b;

}



.step h3 {

    font-size: 1.02rem;

    margin-bottom: 0.5rem;

}



.step p {

    font-size: 0.94rem;

    color: #4a4f60;

}



.section--highlight .step p {

    color: #e1e5f7;

}



/* FORM GENERALI */



form {

    width: 100%;

}



.form__row {

    margin-bottom: 1rem;

}



.form__row label {

    display: block;

    font-size: 0.9rem;

    margin-bottom: 0.35rem;

    color: #2e3240;

}



.form__row input[type="text"],

.form__row input[type="email"],

.form__row input[type="tel"],

.form__row textarea {

    width: 100%;

    padding: 0.7rem 0.75rem;

    border-radius: 10px;

    border: 1px solid #cfd3e2;

    font-size: 0.95rem;

    outline: none;

    transition: border-color 0.15s ease-out, box-shadow 0.15s ease-out;

}



.form__row textarea {

    resize: vertical;

    min-height: 120px;

}



.form__row input:focus,

.form__row textarea:focus {

    border-color: #1747a6;

    box-shadow: 0 0 0 2px rgba(23, 71, 166, 0.16);

}



.form__row input[type="checkbox"] {

    width: auto;

    margin-right: 0.4rem;

    accent-color: #1747a6;

}



/* CONTATTO RAPIDO */



.contact-grid {

    display: grid;

    grid-template-columns: 1.3fr 1fr;

    gap: 2rem;

    align-items: flex-start;

}



.contact-grid__info h3 {

    font-size: 1.05rem;

    margin-bottom: 0.5rem;

}



.contact-grid__info p {

    font-size: 0.95rem;

    color: #4a4f60;

}



/* GUIDES FORM */



.guide-form {

    margin-top: 2.5rem;

    padding: 1.75rem;

    border-radius: 16px;

    border: 1px dashed #cfd3e2;

    background-color: #ffffff;

}



/* FAQ */



.faq {

    display: grid;

    gap: 1.25rem;

}



.faq__item h3 {

    font-size: 1.02rem;

    margin-bottom: 0.4rem;

}



.faq__item p {

    font-size: 0.95rem;

    color: #4a4f60;

}



/* CTA BOX */



.cta-box {

    border-radius: 20px;

    padding: 2rem 2rem;

    background: rgba(6, 11, 40, 0.25);

    border: 1px solid rgba(255, 255, 255, 0.3);

    box-shadow: 0 18px 25px rgba(0, 0, 0, 0.3);

}



.cta-box h2 {

    font-size: 1.6rem;

    margin-bottom: 0.75rem;

}



.cta-box p {

    margin-bottom: 1.25rem;

    font-size: 0.98rem;

}



/* SEZIONE AVVERTENZE LEGALI */



.section--legal h2 {

    font-size: 1.2rem;

    margin-bottom: 1rem;

}



.section--legal p {

    font-size: 0.9rem;

    color: #555b6d;

    margin-bottom: 0.75rem;

}



/* FOOTER */



.footer {

    background-color: #050a14;

    color: #ffffff;

    margin-top: 2rem;

    font-size: 0.9rem;

}



.footer__inner {

    display: grid;

    grid-template-columns: 1.4fr 1fr 1.2fr;

    gap: 2rem;

    padding: 2.5rem 1.5rem 1.75rem 1.5rem;

}



.footer__col h3 {

    font-size: 0.98rem;

    margin-bottom: 0.75rem;

    color: #f5f7ff;

}



.footer__col p {

    margin-bottom: 0.75rem;

    color: #c2c7da;

}



.footer__links {

    list-style: none;

}



.footer__links li {

    margin-bottom: 0.4rem;

}



.footer__links a {

    font-size: 0.9rem;

    color: #cfd3e5;

}



.footer__links a:hover {

    color: #ffffff;

}



.footer__note {

    font-size: 0.8rem;

    color: #9da3ba;

    margin-top: 0.5rem;

}



.footer__bottom {

    border-top: 1px solid #161b2b;

    padding: 0.75rem 0;

    background-color: #040711;

}



.footer__bottom-inner {

    display: flex;

    align-items: center;

    justify-content: center;

}



.footer__bottom p {

    font-size: 0.82rem;

    color: #ffffff;

}



/* UTILITA' */



.is-active {

    font-weight: 600;

}



/* RESPONSIVE */



@media (max-width: 992px) {

    .hero__inner {

        flex-direction: column;

    }

    .hero__image {

        width: 200%;

    }

    .cards--three,

    .cards--grid,

    .features,

    .grid--two,

    .steps,

    .contact-grid,

    .footer__inner {

        grid-template-columns: 1fr 1fr;

    }

}



@media (max-width: 768px) {

    .header__inner {

        flex-direction: column;

        align-items: flex-start;

        gap: 0.5rem;

        height: auto;

        padding: 0.6rem 0;

    }



    .header__nav .nav__list {

        flex-wrap: wrap;

        gap: 0.75rem;

        font-size: 0.9rem;

    }



    .hero,

    .hero--inner {

        padding: 3.5rem 0 2.75rem 0;

    }



    .hero__content h1 {

        font-size: 1.7rem;

    }



    .section {

        padding: 3rem 0;

    }



    .cards--three,

    .cards--grid,

    .features,

    .grid--two,

    .steps,

    .contact-grid,

    .footer__inner {

        grid-template-columns: 1fr;

    }



    .cta-box {

        padding: 1.6rem 1.4rem;

    }

}



@media (max-width: 480px) {

    .hero__actions {

        flex-direction: column;

        align-items: flex-start;

    }



    .btn {

        width: 100%;

        justify-content: center;

    }

}

/* Testo più leggibile nelle sezioni con sfondo blu (.section--highlight) */

.section--highlight .grid__item p,

.section--highlight .grid__item li {

    color: #f5f7ff;      /* bianco molto chiaro */

    font-weight: 500;    /* leggermente più spesso */

}



/* Link nel footer in bianco */

.footer__col a,

.footer__col a:visited {

    color: #ffffff;

}



.footer__links a,

.footer__links a:visited {

    color: #ffffff;

}



/* Colore al passaggio del mouse (opzionale, puoi modificarlo) */

.footer__col a:hover,

.footer__links a:hover {

    color: #ffdf8a;

}





/* Testo completamente bianco nella sezione "Perché scegliere lo Studio Legale Colasanti" */

#perche-scegliere,

#perche-scegliere h2,

#perche-scegliere h3,

#perche-scegliere p,

#perche-scegliere li,

#perche-scegliere span {

    color: #ffffff;

}

#perche-scegliere a,

#perche-scegliere strong {

    color: #ffffff;

}



/* Banner cookie – stile armonizzato con il sito */

.cookie-banner {

    position: fixed;

    left: 0;

    right: 0;

    bottom: 0;

    z-index: 9999;

    /* blu scuro principale del sito, pieno e ben visibile */

    background: #0b1f3f;

    color: #ffffff;

    padding: 18px 0;

    font-size: 0.95rem;

    display: none; /* viene reso visibile via JS */

    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.35);

}



.cookie-banner__inner {

    max-width: 1100px;

    margin: 0 auto;

    padding: 0 20px;

    display: flex;

    flex-wrap: wrap;

    gap: 14px;

    align-items: center;

    justify-content: space-between;

}



.cookie-banner__text h2 {

    margin: 0 0 6px 0;

    font-size: 1.05rem;

    font-weight: 700;

    letter-spacing: 0.02em;

}



.cookie-banner__text p {

    margin: 0;

    line-height: 1.5;

}



.cookie-banner__text a {

    color: #ffd666;              /* dorato/ocra in linea con l’accent del sito */

    text-decoration: underline;

    font-weight: 500;

}



.cookie-banner__actions {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    justify-content: flex-end;

}



/* Pulsanti del banner, ben in vista */

.cookie-banner .btn {

    padding: 8px 16px;

    font-size: 0.9rem;

    border-radius: 999px;

    border: 1px solid transparent;

    cursor: pointer;

}



/* "Rifiuta non necessari": bordo chiaro, sfondo trasparente ma ben leggibile */

.cookie-banner .btn--secondary {

    background: transparent;

    color: #ffffff;

    border-color: #ffffff;

}



.cookie-banner .btn--secondary:hover,

.cookie-banner .btn--secondary:focus {

    background: rgba(255, 255, 255, 0.08);

}



/* "Accetta tutti": bottone principale, dorato su blu, molto visibile */

.cookie-banner .btn--primary {

    background: #ffd666;

    color: #0b1f3f;

    font-weight: 600;

    border-color: #ffd666;

}



.cookie-banner .btn--primary:hover,

.cookie-banner .btn--primary:focus {

    background: #ffcd3b;

    border-color: #ffcd3b;

}



/* Adattamento mobile */

@media (max-width: 768px) {

    .cookie-banner__inner {

        flex-direction: column;

        align-items: flex-start;

    }



    .cookie-banner__actions {

        width: 100%;

        justify-content: flex-start;

    }

}