/*
 * Compatibility rules between the current root templates and the EDITED
 * visual layer. Keep structural/template changes out of this file.
 */

/*
 * EDITED forced the navbar logo to appear while the loading badge was still
 * visible. Restore the original hand-off to prevent the two logos overlapping.
 */
.hr-load .hr-navbar .hr-logo {
    opacity: 0;
    visibility: hidden;
}

/*
 * Hand the logo over from the loader badge to the real navbar only after the
 * navbar's 300 ms GSAP entrance has finished. The theme adds .hr-slided when
 * that entrance starts, giving CSS a stable synchronization point.
 */
body.hr-load .hr-load-badge {
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}

body.hr-load:has(.hr-navbar.hr-slided) .hr-load-badge {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none;
    transition: opacity 80ms ease, visibility 0s linear 80ms;
}

.hr-load .hr-navbar.hr-slided .hr-logo {
    opacity: 1;
    visibility: visible;
    transition:
        opacity 120ms ease 300ms,
        visibility 0s linear 300ms;
}

.hr-navbar .hr-logo img {
    width: auto;
    max-height: 52px;
}

/*
 * Remove only the decorative rolling pattern above the footer. Targeting the
 * unique ID avoids disabling other .hr-roll components used by the theme.
 */
#slider-roll {
    display: none !important;
}

/*
 * Keep the form-control shape consistent across native fields and the visual
 * wrappers generated by the theme. Hidden fields and range sliders have no
 * rectangular control surface and are intentionally left untouched.
 */
form input:not([type="hidden"]):not([type="range"]),
form select,
form textarea,
form .hr-field-upload .hr-field-inner,
form .ui-select-opener,
form .ui-select-panel {
    border-radius: 9px !important;
}

/*
 * Convert the legacy rotated section headings into regular centered headings.
 * The theme writes an inline margin-top from HrTitleRotate(), so margin must be
 * reset with !important. Hide the responsive duplicate to keep one heading.
 */
.hr-title-v-outer {
    display: block !important;
    position: relative !important;
    width: 100%;
    margin-bottom: 80px !important;
    text-align: center;
}

.hr-title-v-outer .hr-title-v {
    position: static !important;
    inset: auto !important;
    display: block !important;
    margin: 0 !important;
    transform: none !important;
    transform-origin: center !important;
    text-align: center;
}

.hr-title-h-outer {
    display: none !important;
}

@media (max-width: 960px) {
    .hr-title-v-outer {
        margin-bottom: 40px !important;
    }
}

/*
 * Render the navbar phone action as the circular companion to search. Keep the
 * rule scoped to the navbar so footer and in-page call buttons retain labels.
 */
.hr-navbar .hr-btn-call {
    display: block;
    width: 50px !important;
    min-width: 50px !important;
    height: 50px !important;
    margin-left: 15px;
    overflow: hidden;
    border: 2px solid #f4f4f4;
    border-radius: 50% !important;
    background-color: #fff !important;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.6s ease;
}

.hr-navbar .hr-btn-call::before {
    display: none !important;
}

.hr-navbar .hr-btn-call:hover {
    background-color: #f4f4f4 !important;
}

.hr-navbar .hr-btn-call > a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100% !important;
    padding: 0 !important;
    line-height: normal !important;
}

.hr-navbar .hr-btn-call .hr-icon-phone {
    display: block !important;
    width: 16px !important;
    min-width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    background-image: url("../../img/icon-phone-alt.svg") !important;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 14px !important;
}

.hr-navbar .hr-btn-call span:not(.hr-icon) {
    display: none !important;
}

img[src$="/icon-marker.svg"] {
    content: url("../../img/icon-marker.svg");
}

img[src$="/icon-cluster.svg"] {
    content: url("../../img/icon-cluster.svg");
}

.hr-slider-hero .swiper-pagination .swiper-pagination-bullet-active {
    background: var(--green-color);
}

/* Add a neutral edge to regular lazy images, excluding Swiper slides. */
img.hr-lazy.entered.loaded {
    box-sizing: border-box;
    border: 1px solid #ccc;
}

/* The catalogue form artwork is editorial, not a product-card image. */
#split-form .hr-frame .hr-image > img.hr-lazy.entered.loaded {
    border: 0;
}

/* Full-width page banners are editorial imagery, not product-card images. */
.hr-banner.hr-banner-image .hr-image > img.hr-lazy.entered.loaded,
.hr-banner.hr-banner-image .hr-background > img.hr-lazy.entered.loaded {
    border: 0;
}

/* Restore the edge only on loaded product images inside cards. */
.hr-card .hr-image > img.swiper-lazy.swiper-lazy-loaded {
    box-sizing: border-box;
    border: 1px solid #ccc;
}

/* Refine banner boxes without altering their template markup. */
.hr-banner.hr-banner-box .hr-box {
    background-color: #500114;
}

.hr-banner.hr-banner-box .hr-box .hr-ctas .hr-btn {
    background-color: rgba(255, 255, 255, 0.4);
}

#banner-actions .hr-box .hr-ctas .hr-btn {
    border-color: transparent;
}

/* The mobile theme sets 20px on the anchor, so both levels must be covered. */
.hr-sidebar-menu .hr-panel .hr-second-menu li,
.hr-sidebar-menu .hr-panel .hr-second-menu li > a {
    font-size: 18px;
}

.hr-split .hr-square {
    display: none;
}

.hr-split .hr-box {
    max-width: 500px;
}

/* Match the Offers and Products grid headings to the centered home titles. */
#grid-items .hr-head > .hr-title.hr-size-h1,
#grid-terms .hr-head > .hr-title.hr-size-h1 {
    color: #ccc !important;
    font-size: clamp(28px, calc(23.333333px + 0.972222vw), 42px);
    font-weight: 500;
    line-height: 1.25;
    text-align: center;
    text-transform: uppercase;
}

/* Editorial page H1s use the same centered home-heading system. */
.hr-head > .hr-title.hr-color-red.hr-size-h1 {
    color: #ccc !important;
    font-size: clamp(28px, calc(23.333333px + 0.972222vw), 42px);
    font-weight: 500;
    line-height: 1.25;
    text-align: center;
    text-transform: uppercase;
}

.hr-stripes {
    height: 15px;
}

/* Product card category: independent from the parent theme typography. */
.hr-card .hr-bottom .hr-typology {
    color: #a4a4a4;
    font-family: "Gotham", "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

/* Compensa l'altezza della navigazione fissa senza alterare il tema base. */
.hr-stack {
    padding-top: 150px;
    overflow-x: hidden;
}

/* Footer legal information remains centered after the agency-credit removal. */
#copy .hr-bottom > .hr-flex {
    justify-content: center;
}

#copy .hr-copy-legal {
    width: 100%;
    text-align: center;
}

#copy .hr-copy-legal .p-iub {
    margin-bottom: 0;
}

/* Service thumbnails follow the same visual language as the home term cards. */
#grid-thumbs .hr-thumb::before {
    background: var(--red-color);
}

#grid-thumbs .hr-thumb:hover::before {
    opacity: 0.8;
    mix-blend-mode: multiply;
}

#grid-thumbs .hr-thumb .hr-caption .hr-title {
    color: #fff;
    font-family: "Gotham", "Helvetica Neue", Arial, sans-serif;
    font-size: 20px;
    font-weight: 400;
    text-transform: uppercase;
}

@media screen and (min-width: 480px) {
    .hr-footer .hr-widget-menu li a {
        font-size: clamp(12px, calc(8px + 0.833333vw), 24px);
        line-height: 23px;
    }
}

/*
 * Keep the hero pagination anchored near the top on mobile. The parent theme
 * vertically centers it below 640px.
 */
@media (max-width: 640px) {
    .hr-stack {
        padding-top: 105px;
    }

    .hr-slider-hero .swiper-pagination {
        top: 60px;
        bottom: auto;
        height: auto;
        transform: none;
    }

    .hr-slider-hero .swiper-pagination .swiper-pagination-bullet {
        width: 35px !important;
    }

    .hr-slider-hero .swiper-pagination .swiper-pagination-bullet-active {
        width: 50px !important;
    }
}