@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Manrope:wght@600;700&display=swap");

:root {
    --juhls-graphite: #252724;
    --juhls-warm-white: #F7F5F0;
    --juhls-sand: #E8E2D8;
    --juhls-warm-gray: #77756F;
    --juhls-orange: #C65E2E;
    --juhls-orange-dark: #9E4724;
}

/* Juhls homepage integrations: keep DWC overlays above content and let cards size the slider. */
.site-header--layer-fix {
    z-index: 10000;
    overflow: visible;
    isolation: isolate;
}

.site-header--layer-fix .dwc-dropdown-content {
    max-inline-size: calc(100vw - 40px);
}

.design-slider--layout-fix,
.design-slider--layout-fix .dwc-slider-wrapper,
.design-slider--layout-fix .splide,
.design-slider--layout-fix .splide__track,
.design-slider--layout-fix .splide__list,
.design-slider--layout-fix .splide__slide {
    min-block-size: 0;
    block-size: auto !important;
}

.design-slider--layout-fix .splide {
    --slide-height-active: auto;
}

.design-slider--layout-fix .dwc-slider-wrapper {
    display: block;
}

.design-slider--layout-fix .splide__track {
    overflow: hidden;
}

.design-slider--layout-fix .splide__list {
    align-items: stretch;
}

.design-slider--layout-fix .splide__slide,
.design-slider--layout-fix .design-card {
    min-block-size: 390px;
}

@media (width <= 767px) {
    .design-slider--layout-fix .splide__slide,
    .design-slider--layout-fix .design-card {
        min-block-size: 0;
    }
}

/* Slider Pro writes 100vh inline; the homepage card carousel uses a compact card height. */
#muligheder .splide {
    --slide-height-active: 390px !important;
    block-size: auto !important;
}

#muligheder .splide__track,
#muligheder .splide__list,
#muligheder .splide__slide {
    block-size: 390px !important;
    height: 390px !important;
}

#muligheder .design-slider__controls {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    padding-block-start: 22px !important;
}

#muligheder .design-slider__controls button {
    inline-size: 48px !important;
    block-size: 48px !important;
    border: 1px solid var(--juhls-orange) !important;
    border-radius: 50% !important;
    background: var(--juhls-orange) !important;
    color: #fff !important;
    opacity: 1 !important;
}

#muligheder .design-slider__controls button:hover {
    background: var(--juhls-orange-dark) !important;
}