/* =====================================================
   1. GOOGLE FONTS & GLOBAL TYPOGRAPHY
===================================================== */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&family=Frank+Ruhl+Libre:wght@400;700&family=Frank+Ruhl+Libre:wght@400&display=swap');

body { font-family: 'Lato', sans-serif; }

h1, h2 { 
    font-family: 'Frank Ruhl Libre', serif; 
    font-weight: 700; 
}

h3, h4, h5, h6 { 
    font-family: 'Frank Ruhl Libre', serif; 
    font-weight: 400; 
}

/* =====================================================
  1.1. FORMATTAZIONE PULSANTI IUBENDA FOOTER
===================================================== */
/* Contenitore generato da iubenda */
a.iubenda-embed {
    display: block !important;
    width: 100%;
    text-align: center !important;
    background-color: #1e2f42 !important;
    padding: 18px 0 !important;
    color: #ffffff !important;
    font-weight: 500;
    text-decoration: none !important;
}

/* Rimuove eventuali stili bianchi di default */
.iubenda-embed,
.iubenda-embed * {
    background: transparent !important;
    box-shadow: none !important;
}

/* Hover elegante */
a.iubenda-embed:hover {
    opacity: 0.85;
    transition: opacity 0.3s ease;
}

/* =====================================================
   2. NAVBAR & UI ELEMENTS
===================================================== */
.nav-link.navbar-menu-category.fs-sm.dropdown-toggle { 
    font-size: 1rem !important; 
}

.dropdown-item { 
    background: #ffffff; 
    transition: background-color 0.3s ease-in-out; 
}

.dropdown-item:hover { 
    background-color: rgba(201, 212, 224, 0.3); 
}

.result-sorting-bar.details-page.top-image-bg {
    display: none !important;
}


/* =====================================================
   3. PAGINE INFORMATIVE
===================================================== */
.esigenza-line {
    position: relative;
}

.esigenza-line::after {
    content: "";
    display: block;
    width: 100px;
    height: 2px;
    background-color: rgba(93, 124, 163, 1);
    margin: 15px auto 0 auto;
}


/* =====================================================
   4. NEWS & CARD HOVER EFFECT
===================================================== */
#homecontent_container .news .is-card {
    overflow: hidden;
}

#homecontent_container .item-col img,
#homecontent_container .news .is-card img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.5s ease;
    transform: scale(1);
}

#homecontent_container .item-col:hover img,
#homecontent_container .news .is-card:hover img {
    transform: scale(1.05);
}

#homecontent_container .item-col a.button-link {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease !important;
}

#homecontent_container .item-col:hover a.button-link {
    opacity: 1;
    pointer-events: auto;
}


/* =====================================================
   5. NUMBERS SECTION – DARK VERSION (3D EFFECT)
===================================================== */
.numbers .column {
    perspective: 800px;
}

.numbers .column i {
    display: inline-block;
    transform-style: preserve-3d;
    transition: transform 0.6s ease, color 0.3s ease;
    transform: rotateY(0deg);
}

.numbers .column h3 {
    transition: color 0.3s ease;
}

.numbers .column:hover i {
    color: #ffffff !important;
    transform: rotateY(180deg);
}

.numbers .column:hover h3 {
    color: #ffffff !important;
}


/* =====================================================
   6. NUMBERS SECTION – LIGHT VERSION (PREMIUM HOVER)
===================================================== */
.numbers.numbers_light .column {
    transition: 
        transform 0.4s cubic-bezier(.25,.8,.25,1),
        box-shadow 0.4s cubic-bezier(.25,.8,.25,1);
    will-change: transform;
}

.numbers.numbers_light .column h3 {
    transition: color 0.3s ease;
}

.numbers.numbers_light .column:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.18);
}

.numbers.numbers_light .column:hover h3 {
    color: #31557d !important;
}


/* =====================================================
   7. ACCORDION
===================================================== */
#homecontent_container .accordion-header:not(.footer-mobile-header) 
.accordion-button.collapsed::after {
    background-color: #a1a4af !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23373f50'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat;
    background-size: 1rem;
    transition: transform 0.2s ease-in-out;
    background-position: center;
}

#homecontent_container .accordion-body {
    color: #fff !important;
    font-size: 16px !important;
}

#homecontent_container .accordion-body ul { 
    margin-left: 2em !important; 
}

#homecontent_container .accordion-body ul li {
    font-size: 14px !important;
    font-style: italic !important;
}

#homecontent_container .accordion-button.collapsed {
    background: #31557d !important;
    color: #fff !important;
    font-size: 21px !important;
}

#homecontent_container .accordion-button:not(.collapsed) {
    color: #fff !important;
    font-size: 21px !important;
}

#homecontent_container .accordion-button::after {
    width: 2.125rem;
    height: 2.125rem;
    border-radius: 50%;
    background-position: center;
    background-color: #f3f5f9;
}


/* =====================================================
   8. MEDIA QUERIES
===================================================== */

/* ---------- 1800px ---------- */
@media (max-width: 1800px) {
    #homecontent_container .v2 .size-48 {
        font-size: 42px !important;
    }
}

/* ---------- 1024px ---------- */
@media (max-width: 1024px) {
    #homecontent_container .v2 .row.numbers .size-48 {
        font-size: 52px !important;
        margin-top: 1em !important;
    }
}

/* ---------- 768px ---------- */
@media (max-width: 768px) {

    body #homecontent_container {
        margin-top: 60px !important;
    }

    #homecontent_container .v2 .row.numbers .size-48 {
        font-size: 52px !important;
        margin-top: 1em !important;
    }

    /* Linea divisoria mobile */
    #homecontent_container .numbers .column {
        position: relative;
        padding-bottom: 25px;
        margin-bottom: 25px;
    }

    #homecontent_container .numbers .column::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 60px;
        height: 2px;
        background: rgba(100, 132, 167, 0.5);
    }

    #homecontent_container .numbers .column:last-child::after {
        display: none !important;
    }

    #homecontent_container .v2 .size-32 {
        font-size: 32px !important;
    }
}