/* dxp-website-jbn | info: https://css-tricks.com/css-cascade-layers/ */

@layer framework, components, utilities, overrides, cross-browser, theme, custom;
@layer framework.important, framework.bootstrap, framework.fancybox, framework.selector-two, framework.selector-two.bootstrap, framework.datepicker3, framework.local;

@import url('https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/carousel/carousel.css') layer(framework.fancybox);
@import url('https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/carousel/carousel.dots.css') layer(framework.fancybox);
@import url('https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css') layer(framework.fancybox);
@import url('https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker3.min.css') layer(framework.datepicker3);
@import url('https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css') layer(framework.bootstrap);
@import url('https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css') layer(framework.selector-two);
@import url('https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css') layer(framework.selector-two.bootstrap);

@import url('/css/theme.css') layer(theme);
@import url('/css/dxp-forms.css') layer(custom);
@import url('/css/dxp-variables.css') layer(custom);
@import url('/css/components.css') layer(components);

@layer cross-browser {
    .dxp-browser__firefox input[type="password"],
    .dxp-browser__edge input[type="password"] {
        font-family: Arial;
    }
}

@layer framework.local {
    /* most of our normal framework overrides can live here */

    .dxp-component-image figure {
        margin-bottom: 0;
    }

    @media (min-width: 1400px) {
        .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
            max-width: 1140px;
        }
    }

    @media (min-width: 1200px) {
        .container, .container-lg, .container-md, .container-sm, .container-xl {
            max-width: 1140px;
        }
    }
}

@layer framework.important {
    /* add !important styles in a lower layer */
    /* to override any !important framework styles */
    .dxp-component-banner--hide-card .dxp-component-banner__item-title.text-secondary,
    .dxp-component-cta--hide-card .dxp-component-cta__title.text-secondary {
        color: var(--bs-yellow) !important;
    }

    .link-primary:focus,
    .link-primary:hover {
        color: var(--bs-primary) !important;
        text-decoration-color: var(--bs-primary) !important;
    }

    /* | Component | Columns */
    .dxp-component-columns .dxp-component-columns__section > .container > .my-4 {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /* | Component | Icons */
    .dxp-component-icons__item .bi-chevron-right {
        border-top-right-radius: unset !important;
    }

    .dxp-component-form__section .container {
        border-radius: 6px !important;
    }

    .dxp-component-icons__item-icon.align-self-center {
        margin-bottom: 0 !important;
    }

    .accordion-button:focus {
        box-shadow: none !important;
    }

    /* | Footer | Links */
    @media (max-width: 767.98px) {
        .dxp-footer-links .nav-link {
            border-right: none !important;
            margin-bottom: 8px;
        }
    }

    @media (max-width: 991.98px) {
        .dxp-header-navigation__home .visually-hidden,
        .dxp-header-navigation__home .visually-hidden-focusable:not(:focus):not(:focus-within) {
            position: relative !important;
            width: 100% !important;
            height: 100% !important;
            padding: 0 !important;
            margin: 0 !important;
            overflow: hidden !important;
            clip: initial !important;
            white-space: nowrap !important;
            border: 0 !important;
        }

        .dxp-header-navigation:not(.mobile) {
            display: none !important;
        }
    }

    /* | Component | Jobs - Macro */
    .dxp-component-banner__item--macro-job-search > .container > .row {
        margin-top: 5px !important;
        margin-bottom: 5px !important;
    }

    .dxp-component-banner__item--macro-job-search .card .dxp-macro-job-search__title {
        margin-bottom: 1rem !important;
    }

    @media (min-width: 992px) {
        .dxp-component-banner__item--macro-job-search .col-lg-6 {
            max-width: 480px !important;
        }
    }

    input.dxp-form__field::-webkit-input-placeholder,
    select.dxp-form__field::-webkit-input-placeholder,
    textarea.dxp-form__field::-webkit-input-placeholder,
    input.dxp-form__field::placeholder,
    select.dxp-form__field::placeholder,
    textarea.dxp-form__field::placeholder {
        font-weight: 300 !important;
        color: var(--bs-secondary-color) !important;
        opacity: 1;
    }

    /* TODO: Move styling to Blocks component */
    @media (min-width: 992px) {
        .dxp-component-blocks__item--horizontal .card > .row > div:first-of-type {
            height: 100% !important;
        }
    }

    @media (max-width: 991.98px) {
        .dxp-component-blocks__item--horizontal .dxp-component-blocks__item-image {
            border-top-right-radius: var(--bs-border-radius) !important;
            border-top-left-radius: var(--bs-border-radius) !important;
            border-bottom-left-radius: 0 !important;
            position: relative !important;
        }
    }
}

@layer utilities {

    /* Columns */
    @media (min-width: 992px) {
        .dxp-component-icons .row-cols-xl-4 > *,
        .dxp-component-numbers .row-cols-xl-4 > * {
            flex: 0 0 auto;
            width: 20%;
        }

        .dxp-component-icons.dxp-component-icons--slider .carousel__slide {
            /*width: calc(100% / 5) !important;*/
        }
    }
}

@layer custom {
    .dxp-blocks-infographic .dxp-component-blocks__item-image {
        max-height: 250px;
        object-fit: contain;
    }
}

/* responsive video iframe */
iframe[src*="youtube.com"], iframe[src*="vimeo.com"] {
    width: 100%;
    height: 100%;
}

.responsive-video {
    width: 100%;
    aspect-ratio: 16 / 9;
    max-width: 560px;
}

    .responsive-video.aspect-16-9 {
        aspect-ratio: 16 / 9;
    }

    .responsive-video.aspect-4-3 {
        aspect-ratio: 4 / 3;
    }

    .responsive-video.aspect-9-16 {
        aspect-ratio: 9 / 16;
    }