/**
 * Header Caro state treatment.
 *
 * The Elementor template owns the header content and its transparent surfaces.
 * This stylesheet only expresses the runtime state change supplied by Liquid's
 * native .is-not-stuck/.is-stuck classes.
 */
.caro-header-caro-active #header {
    transition:
        background-color 300ms ease,
        border-color 300ms ease,
        box-shadow 300ms ease,
        backdrop-filter 300ms ease;
}

.caro-header-caro-active #header .cr-header-caro-surface,
.caro-header-caro-active #header .lqd-mobile-sec,
.caro-header-caro-active #header .lqd-mobile-sec-inner {
    background-color: transparent !important;
    background-image: none !important;
}

.caro-header-caro-active #header.is-not-stuck,
.caro-header-caro-active #header:not(.is-stuck) {
    background-color: transparent;
    border-bottom-color: transparent;
    box-shadow: none;
    backdrop-filter: none;
}

.caro-header-caro-active #header.is-stuck {
    background-color: rgba(251, 247, 241, 0.88);
    border-bottom: 1px solid rgba(63, 76, 81, 0.1);
    box-shadow: 0 12px 32px rgba(34, 50, 53, 0.1);
    -webkit-backdrop-filter: blur(16px) saturate(1.12);
    backdrop-filter: blur(16px) saturate(1.12);
}

@media (min-width: 1200px) {
    .caro-header-caro-active #header .cr-header-caro-main {
        --min-height: 80px;
        min-height: 80px;
    }
}

/*
 * Liquid changes from its desktop header system to its mobile header system at
 * 1200px. Elementor's default desktop visibility starts at 1025px, so align
 * Header Caro with Liquid and avoid the unsupported 1025-1199px hybrid state.
 */
@media (max-width: 1199px) {
    .caro-header-caro-active #header .elementor-8233 > .cr-header-caro-surface,
    .caro-header-caro-active #header .elementor-8233 > .lqd-stickybar-wrap {
        display: none !important;
    }

    .caro-header-caro-active #header .lqd-mobile-sec {
        display: flex !important;
    }

    .caro-header-caro-active #header .lqd-mobile-sec,
    .caro-header-caro-active #header .lqd-mobile-sec-inner {
        min-height: 80px !important;
        height: 80px !important;
    }

    .caro-header-caro-active #header .lqd-mobile-sec .navbar-brand img {
        width: 52px !important;
        height: 52px !important;
        max-width: 52px !important;
        object-fit: contain;
    }

    .caro-header-caro-active #header .lqd-mobile-sec .navbar-brand {
        align-items: center;
        padding-top: 14px !important;
        padding-bottom: 14px !important;
    }

    .caro-header-caro-active #header .lqd-mobile-sec .navbar-brand-inner {
        height: 52px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .caro-header-caro-active #header {
        transition-duration: 0.01ms;
    }
}