/*
 * Site custom overrides (loaded after the Insur theme CSS).
 * Why: muted theme text (#97a2b7 / body gray) on the dark bars (--insur-black #16243d)
 * is too low-contrast — barely readable on the top bar and footer.
 */

/* --- Top bar: address + email --- */
.main-header__top-address-list li .text p,
.main-header__top-address-list li .text p a {
    color: #cdd6e6;
}

/* --- Language switcher IT | EN (inherited body gray → nearly invisible) --- */
.main-header__top-lang a {
    color: #aebace;
}
.main-header__top-lang a.is-active {
    color: #ffffff;
}
.main-header__top-lang a:hover {
    color: var(--insur-base);
}
.main-header__top-lang span {
    color: #6c7a93;
}

/* --- Footer: contact list, hours, copyright --- */
.footer-widget__contact-list li .text p,
.footer-widget__contact-list li .text p a,
.footer-widget__open-hour-text,
.footer-widget__about-text,
.footer-widget__phone-text p,
.site-footer__bottom-text,
.site-footer__bottom-text a,
.footer-widget__column a {
    color: #c2cce0;
}
.footer-widget__contact-list li .text p a:hover,
.site-footer__bottom-text a:hover,
.footer-widget__column a:hover {
    color: var(--insur-white);
}

/*
 * --- Logo aspect ratio ---
 * The markup forced 166x50 (3.32:1) but the source logo is ~1.4:1 → stretched.
 * Keep the intended 50px height and let width follow the natural ratio.
 */
/* CLS: async.min.js inietta img[async-img]{height:auto} + un placeholder 1px,
   e il content:url() rende l'img un elemento sostituito che, in fase placeholder,
   collassa a 1px → l'header cresceva di ~60px al load del logo.
   Fix: riservo lo spazio sul CONTENITORE (min-height) + dimensioni fisse sull'img
   con !important per vincere la regola iniettata. object-fit:contain = no distorsione. */
.main-menu__logo {
    min-height: 60px;
}
.main-menu__logo img,
.footer-widget__logo img {
    width: 155px !important;
    height: 60px !important;
    max-width: 100%;
    object-fit: contain;
}

/*
 * --- Anchor offset for the contact form ---
 * Deep-link "Preventivo" → /contatti#contatti: keep the form clear of the header.
 */
#contatti {
    scroll-margin-top: 120px;
}

/*
 * --- Partner logo caption (dashboard-managed via image_title) ---
 * Stack the caption under each carousel logo. The theme forces the slide to a
 * flex row, so override direction and keep the logo within the slide width.
 */
.brand-one .swiper-wrapper .swiper-slide {
    display: flex !important;
    flex-direction: column !important;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
}
.brand-one .swiper-wrapper .swiper-slide img {
    max-width: 100%;
    height: auto;
}
.brand-one__caption {
    width: 100%;
    margin: 12px 0 0;
    font-size: 14px;
    line-height: 1.3;
    font-weight: 600;
    color: var(--insur-black);
}

/*
 * --- Native select on the contact form ---
 * Replaces bootstrap-select: styled to match the theme text inputs (60px,
 * same border/shadow/radius) with a custom chevron.
 */
.get-insurance__input-box select.contact-select {
    height: 60px;
    width: 100%;
    border: 1px solid #dfe3e7;
    background-color: #fff;
    box-shadow: 0 5px 20px 0 rgba(0, 0, 0, .05);
    outline: 0;
    font-size: 16px;
    color: var(--insur-gray);
    font-weight: 400;
    padding: 0 50px 0 30px;
    border-radius: var(--insur-bdr-radius);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath fill='none' stroke='%23696e77' stroke-width='2' d='M1 1l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 25px center;
    background-size: 14px 8px;
}
.get-insurance__input-box select.contact-select:focus {
    border-color: var(--insur-base);
}

/*
 * --- Pulsante "Area Clienti" nella barra scura superiore ---
 * Spostato qui dal menu principale: nella navbar era una CTA grande accanto al
 * telefono e spezzava la linearità del menu. Qui è una pillola compatta in
 * colore d'accento (--insur-primary) per contrastare sul fondo --insur-black.
 */
.main-header__top-area-clienti {
    margin-left: 24px;
}
.main-header__top-area-clienti-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 16px;
    border-radius: 30px;
    background-color: var(--insur-primary);
    color: var(--insur-black);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: var(--insur-letter-spacing);
    transition: background-color .3s ease, color .3s ease;
}
.main-header__top-area-clienti-btn:hover,
.main-header__top-area-clienti-btn:visited {
    color: var(--insur-black);
}
.main-header__top-area-clienti-btn:hover {
    background-color: var(--insur-white);
}
.main-header__top-area-clienti-btn i {
    font-size: 12px;
}
/* Stesso pulsante nel menu mobile (la top bar è nascosta sotto i 992px) */
.mobile-nav__area-clienti {
    margin: 20px 0;
}

/*
 * --- Anti-CLS per le immagini lazy (async-img) ---
 * async.min.js inietta img[async-img]{width:auto;height:auto} durante il
 * placeholder: le immagini collassano a ~1px e provocano un salto di layout al
 * caricamento. Riservo lo spazio con aspect-ratio (ricavato dai width/height del
 * markup) sui contenitori immagine principali della home/servizi. object-fit
 * evita distorsioni quando il file caricato ha proporzioni diverse.
 */
.service-one__img img {
    width: 100%;
    height: auto;
    aspect-ratio: 290 / 193;
    object-fit: cover;
}
.about-one__img > img {
    aspect-ratio: 540 / 489;
    object-fit: cover;
}
.testimonial-one__client-img-box > img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}
.brand-one .swiper-wrapper .swiper-slide img {
    aspect-ratio: 167 / 80;
    object-fit: contain;
}