/* ===================================
    Vitali & d'Amore - Studio Legale Associato
====================================== */
/* font */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap');
/* variable */
:root {
    --base-color: #0A2653;
    --dark-gray: #10202F;
    --medium-gray: #0A2653;
    --black: #10202F;
    --very-light-gray: #f3f5f7;
    --alt-font: 'Playfair Display', serif;
    --primary-font: 'DM Sans', sans-serif;
}
body {
    font-size: 16px;
    line-height: 26px;
}
/* custom cursor */
.custom-cursor .circle-cursor-inner {
    background-color: var(--base-color);
    width: 10px;
    height: 10px;
}
.custom-cursor .circle-cursor-inner.cursor-link-hover {
    background-color: var(--base-color);
}
.custom-cursor .circle-cursor-outer {
    border: 1px solid transparent;
}
/* header */
header .navbar-brand img {
    height: 80px;
    max-height: 80px;
}
header .left-nav .navbar-nav:before {
    background-color: var(--white);
    opacity: 0.2;
    transform: translate(-28px, 0px);
    -webkit-transform: translate(-28px, 0px);
    transition: 0s;
}
header.sticky .left-nav .navbar-nav:before {
    transform: translate(-28px, 0px);
    -webkit-transform: translate(-28px, 0px);
}
.navbar .navbar-nav .nav-link {
    font-size: 18px;
    font-weight: 400;
}
.navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li a {
    border-bottom: 1px solid var(--very-light-gray);
    padding: 16px 20px;
    font-weight: 500;
    font-size: 16px;
    color: var(--dark-gray);
}
.navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li a:hover,
.navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li.active:hover > a {
    background-color: var(--base-color);
    color: var(--white);
}
.navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li.active > a {
    color: var(--medium-gray);
}
/* pagination */
.pagination-style-01 .page-item.active .page-link,
.pagination-style-01 .page-item .page-link:hover {
    background: var(--dark-gray);
    color: var(--white);
}
.pagination-style-01 .page-item:first-child .page-link,
.pagination-style-01 .page-item:last-child .page-link {
    background: transparent;
    box-shadow: none !important;
}
.pagination-style-01 .page-item:first-child .page-link:hover,
.pagination-style-01 .page-item:last-child .page-link:hover {
    color: var(--dark-gray);
}
/* input */
.input-small, .textarea-small {
    font-size: 14px;
}
/* bg color */
.bg-blue-whale {
    background-color: #0A2653;
}
.bg-blue-licorice {
    background-color: #173E7C;
}
/* testata delle pagine interne (about, aree di attività, professionisti, contatti, ecc.):
   .bg-dark-gray risolve nel nero del tema, ma la testata deve essere blu navy */
.bg-dark-gray.top-space-margin {
    background-color: #0A2653;
}
/* bg gradient transparent */
.bg-gradient-dark-transparent {
    background: rgba(16, 32, 47, 0.55);
}
/* testo grigio su sfondo blu: il grigio base non ha contrasto sufficiente (WCAG AA),
   variante più chiara solo dove appare su bg-blue-whale/bg-blue-licorice */
.bg-blue-whale .text-base-color,
.bg-blue-whale .text-medium-gray,
.bg-blue-licorice .text-base-color,
.bg-blue-licorice .text-medium-gray {
    color: #B9C8DA;
}
/* la variante chiara sopra vale solo per il testo direttamente sullo sfondo blu:
   dentro una card chiara (es. bio professionisti in .bg-white) va ripristinato
   il grigio normale, altrimenti resta illeggibile su sfondo bianco */
.bg-blue-whale .bg-white .text-base-color,
.bg-blue-whale .bg-white .text-medium-gray,
.bg-blue-licorice .bg-white .text-base-color,
.bg-blue-licorice .bg-white .text-medium-gray {
    color: var(--medium-gray);
}
/* eyebrow: lo span prima di un titolo (h1/h2/h3) è azzurro invece che grigio.
   :not(.alt-font) esclude i badge numerati ("01", "02"...) che precedono i titoli
   nelle card ma non sono eyebrow. */
span.text-base-color:not(.alt-font):has(+ h1, + h2, + h3) {
    color: #173E7C;
}
/* su sfondo scuro/blu serve una variante più chiara per il contrasto */
.bg-dark-gray span.text-base-color:has(+ h1, + h2, + h3),
.bg-blue-whale span.text-base-color:has(+ h1, + h2, + h3),
.bg-blue-licorice span.text-base-color:has(+ h1, + h2, + h3) {
    color: #B9C8DA;
}
/* btn */
.btn.btn-blue-whale {
    background-color: #0A2653;
    color: var(--white);
}
.btn.btn-blue-whale:hover {
    background-color: transparent;
    border-color: #0A2653;
    color: #0A2653;
}
.btn {
    font-family: var(--primary-font);
    font-weight: 500;
    text-transform: inherit;
    letter-spacing: 0px;
}
.btn.btn-link {
    padding: 0 0 2px;
}
.btn.btn-rounded.btn-extra-large {
    padding: 18px 40px;
    font-size: 17px;
}
/* il padding destro maggiore serve solo per lasciare spazio all'icona
   freccia (.with-rounded): senza icona il testo va centrato */
.btn.btn-rounded.with-rounded.btn-extra-large {
    padding-right: 66px;
}
.btn.btn-rounded.btn-large {
    padding: 16px 38px;
    font-size: 16px;
}
.btn.btn-rounded.with-rounded.btn-large {
    padding-right: 55px;
}
.btn.btn-large {
    font-size: 15px;
}
/* page title */
.page-title-large h1 {
    font-size: 4rem;
    line-height: 3.9rem;
}
/* opacity */
.opacity-05 {
    opacity: 0.05;
}
/* footer */
footer .footer-logo img {
    max-height: 90px;
    /* il logo è in blu navy: sul footer scuro va reso bianco */
    filter: brightness(0) invert(1);
}
.footer-dark {
    color: var(--white);
}
.footer-dark p, .footer-dark a {
    color: var(--white);
}
.footer-dark a:hover,
.footer-navbar li a:hover {
    color: #7FA0C4;
}
/* i link della nav footer ereditano --medium-gray da style.css: su bg-blue-whale
   non hanno contrasto sufficiente */
footer .nav-link {
    color: var(--white);
}
/* voci del menu footer una sotto l'altra: style.css mette "footer ul" in grid a 2
   colonne e ".footer-navbar li" in inline-block, pensati per un altro layout */
.footer-navbar {
    display: block;
    margin-bottom: 0;
}
.footer-navbar li {
    display: block;
}
/* sedi del footer affiancate invece che una sotto l'altra */
.footer-offices {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.footer-offices .footer-office {
    flex: 1 1 130px;
}
.is-touchable .cursor-page-inner {
    display: none !important;
}
/* media query responsive */
@media (max-width: 1400px) {
    .xl-min-h-270px {
        min-height: 270px !important;
    }
}
@media (max-width: 1300px) {
    .navbar .navbar-nav .nav-link {
        padding-left: 15px;
        padding-right: 15px;
    }
}
@media (max-width: 1199px) {
    header .left-nav .navbar-nav:before {
        transform: translate(-10px, 0px);
        -webkit-transform: translate(-10px, 0px);
    }
    header.sticky .left-nav .navbar-nav:before {
        transform: translate(-10px, 0px);
        -webkit-transform: translate(-10px, 0px);
    }
    footer .nav-link {
        padding-left: .6rem;
        padding-right: .6rem;
    }
    .navbar .navbar-nav .nav-link {
        padding-left: 10px;
        padding-right: 10px;
    }
}
@media (max-width: 1024px) {
    .navbar .navbar-nav .nav-link {
        padding-left: 8px;
        padding-right: 8px;
    }
}
@media (max-width: 991px) {
    header .widget-text {
        color: var(--dark-gray);
    }
    header .widget-text i {
        color: var(--white);
    }
    .navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li a {
        padding-left: 0;
        padding-right: 0;
    }
    .navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li a:hover,
    .navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li:hover img {
        background-color: transparent;
        color: var(--dark-gray);
        filter: inherit;
    }
    .navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li a:hover,
    .navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li.active:hover > a {
        background-color: transparent;
        color: var(--medium-gray);
    }
}
/* Typography */
h1, .h1 {
    font-size: 55px;
    line-height: 60px;
}
h2, .h2 {
    font-size: 38px;
    line-height: 44px;
}
h3, .h3 {
    font-size: 32px;
    line-height: 38px;
}
h4, .h4 {
    font-size: 28px;
    line-height: 34px;
}
h5, .h5 {
    font-size: 22px;
    line-height: 28px;
}
h6, .h6 {
    font-size: 20px;
    line-height: 26px;
}
@media (max-width: 991px) {
    h1, .h1 { font-size: 46px; line-height: 52px; }
    h2, .h2 { font-size: 34px; line-height: 40px; }
    h3, .h3 { font-size: 28px; line-height: 34px; }
    h4, .h4 { font-size: 25px; line-height: 31px; }
    h5, .h5 { font-size: 21px; line-height: 27px; }
    h6, .h6 { font-size: 19px; line-height: 25px; }
}
@media (max-width: 767px) {
    h1, .h1 { font-size: 38px; line-height: 44px; }
    h2, .h2 { font-size: 30px; line-height: 36px; }
    h3, .h3 { font-size: 25px; line-height: 31px; }
    h4, .h4 { font-size: 22px; line-height: 28px; }
    h5, .h5 { font-size: 20px; line-height: 26px; }
    h6, .h6 { font-size: 18px; line-height: 24px; }
    .page-title-large h1 {
        font-size: 32px;
        line-height: 38px;
    }
}
@media (max-width: 575px) {
    h1, .h1 { font-size: 32px; line-height: 38px; }
    h2, .h2 { font-size: 26px; line-height: 32px; }
    h3, .h3 { font-size: 22px; line-height: 28px; }
    h4, .h4 { font-size: 20px; line-height: 26px; }
    h5, .h5 { font-size: 19px; line-height: 25px; }
    h6, .h6 { font-size: 17px; line-height: 23px; }
}
/* titoli: sempre nel nero/navy del tema, non nel blu primario di .text-dark-gray */
h1.text-dark-gray, h2.text-dark-gray, h3.text-dark-gray, h4.text-dark-gray, h5.text-dark-gray, h6.text-dark-gray,
.h1.text-dark-gray, .h2.text-dark-gray, .h3.text-dark-gray, .h4.text-dark-gray, .h5.text-dark-gray, .h6.text-dark-gray,
h1 a.text-dark-gray, h2 a.text-dark-gray, h3 a.text-dark-gray, h4 a.text-dark-gray, h5 a.text-dark-gray, h6 a.text-dark-gray {
    color: var(--black);
}

/* form fix: style.css applica width:100%/padding/border a ogni <input>, deformando
   anche checkbox/radio (es. il consenso GDPR) in un box largo. Ripristina l'aspetto nativo. */
input[type="checkbox"],
input[type="radio"] {
    width: 1em;
    height: 1em;
    padding: 0;
}

/* accessibilità: style.css rimuove l'outline di default su :focus-visible senza
   fornire un'alternativa (fallisce WCAG 2.4.7 Focus Visible) */
:focus-visible {
    outline: 2px solid #0A2653 !important;
    outline-offset: 2px;
}

/* skip link: nascosto finché non riceve il focus da tastiera */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    z-index: 2000;
    padding: 10px 20px;
    background: #0A2653;
    color: var(--white);
    text-decoration: none;
}
.skip-link:focus {
    top: 0;
}

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

/* WhatsApp floating button */
.btn-whatsapp {
    position: fixed;
    right: 28px;
    bottom: 28px;
    background: #25d366;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 28px;
    z-index: 999;
    box-shadow: 0 4px 16px rgba(37, 211, 102, .45);
    transition: transform .2s ease, box-shadow .2s ease;
    text-decoration: none;
}
.btn-whatsapp::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #25d366;
    animation: whatsapp-pulse 2s ease-out infinite;
    z-index: -1;
}
.btn-whatsapp:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 24px rgba(37, 211, 102, .65);
    color: #fff;
}
/* riquadro del form: .bg-dark-gray risolve nel nero del tema (--dark-gray), ma il
   form deve restare in tono con il blu navy del sito, solo un poco più scuro */
.contact-form-style-03.bg-dark-gray {
    background-color: #082047;
}
/* form contatti su sfondo scuro (.bg-dark-gray): style.css non definisce lo stato
   dark degli input, che restano con sfondo chiaro e testo scuro poco leggibili */
.contact-form-style-03 input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
.contact-form-style-03 textarea,
.contact-form-style-03 select {
    border: 1px solid rgba(255, 255, 255, .2) !important;
    border-radius: 4px;
    background-color: rgba(255, 255, 255, .07) !important;
    color: var(--white) !important;
    padding-left: 20px;
    padding-right: 20px;
}
.contact-form-style-03 input:not([type=checkbox]):not([type=radio]):not([type=hidden]):focus,
.contact-form-style-03 textarea:focus,
.contact-form-style-03 select:focus {
    border: 1px solid rgba(255, 255, 255, .5) !important;
    background-color: rgba(255, 255, 255, .1) !important;
}
/* le <option> del menu a tendina nativo hanno sfondo chiaro imposto dal browser
   (non personalizzabile via CSS): ereditando il colore bianco del select scuro,
   il testo risulta bianco su bianco e le voci non si leggono aprendo la tendina */
.contact-form-style-03 select option {
    color: var(--dark-gray);
    background-color: var(--white);
}
/* fe() usa il pattern Bootstrap .form-floating: il testo visibile sopra al campo
   vuoto è la <label> flottante, non il placeholder nativo. Bootstrap la colora di
   scuro (rgba(var(--bs-body-color-rgb), .65)), invisibile sullo sfondo blu navy */
.contact-form-style-03 .form-floating > label {
    color: rgba(255, 255, 255, .55) !important;
}
.contact-form-style-03 .form-floating > .form-control:focus ~ label,
.contact-form-style-03 .form-floating > .form-control:not(:placeholder-shown) ~ label {
    color: rgba(255, 255, 255, .8) !important;
}
/* style.css forza globalmente il placeholder nativo a nero con !important
   (::-webkit-input-placeholder ecc.), vincendo sulla regola di Bootstrap che nel
   .form-floating lo renderebbe trasparente: qui va neutralizzato, il testo lo
   mostra già la label flottante sopra */
.contact-form-style-03 .form-floating > .form-control::-webkit-input-placeholder {
    color: transparent !important;
}
.contact-form-style-03 .form-floating > .form-control::-moz-placeholder {
    color: transparent !important;
    opacity: 1;
}
.contact-form-style-03 .form-floating > .form-control:-ms-input-placeholder {
    color: transparent !important;
}
.contact-form-style-03 .form-floating > .form-control::placeholder {
    color: transparent !important;
}
/* maschera dietro la label della textarea quando "sale" sopra il bordo */
.contact-form-style-03 .form-floating > textarea:focus ~ label::after,
.contact-form-style-03 .form-floating > textarea:not(:placeholder-shown) ~ label::after {
    background-color: transparent !important;
}
/* .form-floating>.form-control forza height/min-height a ~3.5rem ignorando
   l'attributo rows della textarea: qui la vogliamo più alta per il messaggio */
.contact-form-style-03 .form-floating > textarea.form-control {
    height: 220px !important;
    min-height: 220px !important;
}
.contact-form-style-03 input[type=checkbox] {
    -webkit-appearance: auto;
    appearance: auto;
    border: 1px solid rgba(255, 255, 255, .5) !important;
    background-color: transparent !important;
    width: 1em;
    height: 1em;
    padding: 0;
    flex-shrink: 0;
}
.contact-form-style-03 .form-check-label {
    color: rgba(255, 255, 255, .7);
}
.contact-form-style-03 .form-check-label a {
    color: #7392B7;
    text-decoration: underline;
}
/* responsive.css riduce html{font-size} a 14px/12px da tablet in giù: l'altezza
   di .form-floating (3.5rem) e i suoi padding sono in rem e si rimpiccioliscono
   con lei, mentre il font dei campi resta fissato a 16px in style.css. Risultato
   da mobile: campo troppo basso per il proprio testo, con label/testo tagliati.
   Qui i valori restano ancorati ai px calcolati sulla base desktop (16px). */
@media (max-width: 991px) {
    .form-floating > .form-control,
    .form-floating > .form-select {
        height: 58px;
        min-height: 58px;
    }
    .form-floating > .form-control:not(:placeholder-shown),
    .form-floating > .form-control:focus,
    .form-floating > .form-select {
        padding-top: 26px;
        padding-bottom: 10px;
    }
    .form-floating > label {
        padding: 16px 12px;
    }
    /* Bootstrap allinea checkbox/label con float + margin-left negativo: con
       queste misure ridotte i conti non tornano più facilmente e la label si
       disallinea. Si passa a flex, dove padding e spaziatura sono indipendenti
       e prevedibili. */
    .contact-form-style-03 .form-check {
        display: flex;
        align-items: center;
        gap: 8px;
        padding-left: 0px;
    }
    .contact-form-style-03 .form-check .form-check-input {
        float: none;
        margin-left: 0;
        margin-top: 0;
        flex-shrink: 0;
    }
    .contact-form-style-03 input[type=checkbox] {
        width: 12px;
        height: 12px;
    }
}

/* form di contatto: link interni nel blu navy del tema */
.form-link-blue {
    color: #0A2653;
}
.form-link-blue:hover {
    opacity: 0.75;
}
/* icone pagina contatti */
.icon-accent-blue {
    color: #0A2653;
}
/* recapiti pagina contatti: l'hover di default (a:hover di style.css) usa
   var(--base-color) che qui è grigio; nei contatti deve restare navy */
.contacts-info a:hover {
    color: #0A2653;
}
/* aree di attività: card servizi con numero, sollevamento e inversione colore al hover */
.practice-area-card {
    transition: transform .3s ease, box-shadow .3s ease, background-color .3s ease;
}
.practice-area-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(10, 38, 83, .15);
    background-color: var(--base-color);
}
.practice-area-card:hover h3 a.text-dark-gray,
.practice-area-card:hover p.text-dark-gray,
.practice-area-card:hover .practice-area-card-link {
    color: var(--white) !important;
}
.practice-area-card-link i {
    transition: transform .3s ease;
}
.practice-area-card:hover .practice-area-card-link i {
    transform: translateX(5px);
}

@keyframes whatsapp-pulse {
    0% {
        transform: scale(1);
        opacity: .6
    }
    70% {
        transform: scale(1.5);
        opacity: 0
    }
    100% {
        transform: scale(1.5);
        opacity: 0
    }
}

/* cover hero decoration */
.cover-arches-bg {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 38%;
    max-width: 480px;
    aspect-ratio: 489 / 242;
    background-image: url('/immagini/icon-cover.svg');
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: contain;
    opacity: 0.35;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 40%);
    mask-image: linear-gradient(to right, transparent 0%, #000 40%);
    pointer-events: none;
}
@media (max-width: 991px) {
    .cover-arches-bg {
        width: 55%;
        max-width: 260px;
        opacity: 0.25;
    }
}