/*
  1. Use a more-intuitive box-sizing model.
*/
*,
*::before,
*::after {
  box-sizing: border-box;
}

/*
    2. Remove default margin
  */
* {
  margin: 0;
}

/*
    3. Remove built-in form typography styles
  */
input,
button,
textarea,
select {
  font: inherit;
}

/*
    7. Avoid text overflows
  */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}
html {
    scroll-behavior: var(--dlw-scroll-behavior);
}

body {
    margin: 0;
    padding: 0;
    color: var(--dlw-color--text);
    font-family: var(--dlw-font-family);
    font-size: var(--dlw-font-size, 1rem);
    line-height: var(--dlw-line-height, 1.5);
    accent-color: var(--dlw-color--primary);
    -webkit-font-smoothing: antialiased;
}
/* Targets elements that are scroll into view via eg. anchor tags. Takes into account height of header */
:target {
    scroll-margin-top: var(--set-scroll-margin-top, calc(var(--header--height, 0) + var(--dlw-spacing)));
}

:focus-visible {
    outline: var(--dlw-a11y--outline-width) solid var(--dlw-color--focus);
    outline-offset: var(--dlw-a11y--outline-offset);
}

:where(summary) {
    cursor: pointer;
    list-style: none;
    user-select: none;

    &::-webkit-details-marker {
        display: none;
    }
}

:where(strong) {
    font-weight: var(--dlw-font-weight--bold, bold);
}

:where(figure, figcaption, blockquote) {
    padding: 0;
    margin: 0;
}

:where(p) {
    margin: 0 0 1.5em;
}

:where(dt) {
    font-weight: var(--dlw-font-weight--bold);
}

:where(address) {
    font-style: normal;
}

dialog::backdrop {
    background: rgba(0, 0, 0, 0.3);
}
:where(picture, img) {
    display: block;
    max-width: 100%;
    height: auto;
}

:where(svg) {
    fill: var(--svg-fill, currentColor);
    width: var(--svg-size, 1em);
    height: var(--svg-size, 1em);
    flex-shrink: 0;
    display: block;
    transition: fill var(--dlw-transition--duration) ease;
}

:where(figcaption) {
    text-align: center;
    padding: var(--dlw-spacing--tiny);
    font-size: var(--dlw-font-size--small);    
}


h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
    color: var(--dlw-heading--color, currentColor);
    display: block;
    margin-block-end: 0.3em;
    text-wrap: balance;
}

h1,
.h1 {
    font-size: var(--dlw-font-size--h1);
    line-height: 1;
}

h2,
.h2 {
    font-size: var(--dlw-font-size--h2);
    line-height: 1.2;
}

h3,
.h3 {
    font-size: var(--dlw-font-size--h3);
    line-height: 1.2;
}

h4,
.h4 {
    font-size: var(--dlw-font-size--h4);
    line-height: 1.3;
}

h5,
.h5 {
    font-size: var(--dlw-font-size--h5);
    line-height: 1.3;
    font-weight: var(--dlw-font-weight--bolder);
}

h6,
.h6 {
    font-size: var(--dlw-font-size--h6);
    line-height: 1.3;
}
.u-visually-hidden {
    position: absolute;
    margin: -1px;
    border: 0;
    padding: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
    white-space: nowrap;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
}
.dlw-rich-text {
    :where(ol),
    :where(ul),
    :where(p) {
        margin-block-end: 1em;

        &:last-child {
            margin-block-end: 0;
        }
    }

    :where(a) {
        text-decoration: underline;
    }

    :where(img) {
        display: inline-block;
    }
}
.dlw-wrapper {
    max-width: var(--dlw-wrapper--width, 100%);
    margin-inline: auto;
    width: 100%;
    padding-inline: var(--dlw-wrapper--gutter, 0);

    & & {
        --dlw-wrapper--gutter: 0;
    }
}

.dlw-skip-link {
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    color: #fff;
    background: var(--dlw-color--primary);
    padding: 0.5rem 1rem;
    display: inline-block;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
    text-align: center;
    margin: 0;
    z-index: 10000;
    transform: translateX(-200%);
    text-decoration: none;

    &:hover,
    &:focus,
    &:focus-visible {
        transform: translateX(0);
        text-decoration: none;
        color: #fff;
        outline: none;
    }
}

:root {
    --dlw-breadcrumb--padding: var(--dlw-spacing--small) 0;
    --dlw-breadcrumb--font-size: var(--dlw-font-size--small);
    --dlw-breadcrumb--svg-size: 1.2rem;
    --dlw-breadcrumb--svg-fill: currentColor;
    --dlw-breadcrumb--gap: var(--dlw-spacing--tiny);
}

.dlw-breadcrumb {
    display: block;
    padding: var(--dlw-breadcrumb--padding);
    color: currentColor;
    font-size: var(--dlw-breadcrumb--font-size);
    container: breadcrumb / inline-size;
    
    --svg-size: var(--dlw-breadcrumb--svg-size);
    --svg-fill: var(--dlw-breadcrumb--svg-fill);

    ol {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--dlw-breadcrumb--gap);
        margin: 0;
        padding: 0;
    }

    li {
        display: flex;
        gap: var(--dlw-breadcrumb--gap);
        align-items: center;
    }

    [aria-current="page"] {
        font-weight: var(--dlw-font-weight--bold);
        text-decoration: none;
    }

    @container breadcrumb (width < 25rem) {
        ol li:first-child,
        ol li:last-child {
            display: none;
        }
        
        ol li:nth-last-child(2) svg {
            display: none;
        }
    }
}
.dlw-button-wrapper {    
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--dlw-spacing--small);
}
:root {
    --dlw-content-overview--cell--min-width: 250px;
}

.dlw-content-overview {
    display: block;
    container: content-overview / inline-size;
    padding-block: calc(var(--bg-active) * var(--dlw-spacing-cqi, 0px));

    section,
    .dlw-content-overview__head {
        display: flex;
        gap: var(--dlw-spacing);
    }

    section {
        /* Wrapper */
        flex-direction: column;
    }

    .dlw-content-overview__head {
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    h2 {
        margin: 0;
    }

    .dlw-content-overview__items {
        grid-area: items;
    }

    .dlw-content-overview__cta {
        text-align: center;
    }

    ul {
        list-style: none;
        margin: 0;
        padding: 0;

        /* By default we use an implicit grid with items of at least 250px wide */
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(var(--dlw-content-overview--cell--min-width), 1fr));
        gap: var(--dlw-spacing);
    }
}
.dlw-content-overview {
    &[layout="5columns"] {
        --columns: 5;
    }

    &[layout="4columns"] {
        --columns: 4;
    }

    &[layout="3columns"] {
        --columns: 3;
    }

    /* In case a layout is forced via the 'layout' attribute, we use an explicit grid */
    @container content-overview (width > 60rem) {
        &[layout] ul {
            grid-template-columns: repeat(var(--columns), 1fr);
        }
    }
}
:root {
    --dlw-collapsible__summary--font-size: 1.25rem;
    --dlw-collapsible--separator: 1px solid currentColor;
}

.dlw-collapsibles {
    display: block;
    container: collapsibles / inline-size;

    details {
        border: 1px solid var(--dlw-color--border-2);
        border-radius: var(--dlw-border-radius);
        transition: border-color var(--dlw-transition--duration) ease-out;

        &:has(:focus-visible) {
            outline: var(--dlw-a11y--outline-width) solid var(--dlw-color--focus);
            outline-offset: calc(var(--dlw-border-radius, 0) / 2);
            border-radius: calc(var(--dlw-border-radius, 0));

            summary {
                outline: none;
            }
        }
    }

    details[open] {
        box-shadow: var(--dlw-shadow);
        border-color: var(--dlw-color--border);
        
        svg {
            transform: rotate(180deg);
        }
    }

    summary {
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
        padding: calc(var(--dlw-spacing) - var(--border-width, 0px));
        offset-distance: -10px;
        gap: var(--dlw-spacing);

        h3 {
            margin: 0;
            text-wrap: unset;
            font-size: var(--dlw-collapsible__summary--font-size);
        }

        svg {
            --svg-size: 1.5rem;
            flex-shrink: 0;
            transition: transform var(--dlw-transition--duration) ease-in-out;
            color: var(--dlw-heading--color);
        }
    }

    .dlw-collapsibles__wrapper {
        display: flex;
        flex-direction: column;
        gap: var(--dlw-spacing);
    }

    .dlw-collapsibles__items {
        display: grid;
        gap: var(--dlw-spacing);
    }

    .dlw-collapsibles__body {
        padding: calc(var(--dlw-spacing) - var(--border-width, 0px));
        padding-block-start: 0;
    }
}
@media(prefers-reduced-motion: no-preference) {
    .dlw-collapsibles {
        @supports(block-size: calc-size(auto, size)) {

            details::details-content {
                display: block;
                block-size: 0;
                overflow: hidden;
                transition-property: block-size, content-visibility;
                transition-duration: var(--dlw-transition--duration);
                transition-behavior: allow-discrete;
            }

            details[open]::details-content {
                /* Fallback for browsers that don't support calc-size() function */
                block-size: auto;

                /* calc-size() function allows transition to height: auto; */
                block-size: calc-size(auto, size);
            }
        }

        /* Fake opening/closing animation by transitioning margin */
        @supports not (block-size: calc-size(auto, size)) {
            summary {
                transition: margin var(--dlw-transition--duration) ease-in-out;
                margin-block-end: 0;
            }

            details[open] summary {
                margin-block-end: var(--dlw-spacing--small);
            }
        }
    }
}
.dlw-media {
    display: block;

    img,
    picture,
    svg,
    video {
        display: block;
        height: auto;
        width: 100%;
        object-fit: cover;
        object-position: center center;
    }

    img {
        border-radius: var(--dlw-border-radius);
    }
}
.dlw-text {
    display: block;
}
:root {
    --dlw-text-media--gap: clamp(var(--dlw-spacing), 6cqw, var(--dlw-spacing--huge));
}

.dlw-text-media {
    display: block;
    container: text-media / inline-size;

    &>section {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--dlw-spacing) var(--dlw-text-media--gap);
    }

    .dlw-text-media__body {
        display: flex;
        flex-direction: column;
        gap: var(--dlw-spacing);
        padding: 0;

        p:last-child {
            margin: 0;
        }
    }

    .dlw-text-media__body-wrapper {
        order: 2;
    }

    @container text-media (width > 50rem) {
        .dlw-text-media__body-wrapper {
            order: 0;
        }

        &[direction="inversed"] {
            .dlw-text-media__body-wrapper {
                order: 2;
                padding-block-start: 0;
            }
        }

        &:not([direction="inversed"]) {
            .dlw-text-media__body-wrapper {
                padding-block-end: 0;
            }
        }

        &>section {
            grid-template-columns: repeat(2, 1fr);
            align-items: center;
        }

        .dlw-text-media__body-wrapper {
            align-self: center;
            padding: 0;
        }

        .dlw-text-media__body {
            padding: 0;
        }
    }
}
:root {
	--dlw-usp__items--gap: var(--dlw-spacing-cqi--small);
	--dlw-usp__items--item--min-width: 250px;
}

.dlw-usp {
	display: block;
	container: usp / inline-size;

	.dlw-usp__wrapper {
		display: flex;
		flex-direction: column;
		gap: var(--dlw-spacing-cqi); 
	}

	.dlw-usp__body {
		max-width: 60ch;
	}

	.dlw-usp__items {
		ul {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			gap: var(--dlw-usp__items--gap);
			list-style: none;
			margin: 0;
			padding: 0;
		}

		li {
			flex: 1 1 auto;
		}
	}
}
:root {
    --dlw-card__media--aspect-ratio: 3/2;
    --dlw-card--background: var(--dlw-color--white);
    --dlw-card--border:  1px solid var(--dlw-color--border-3);
}

/* Principles according to https://inclusive-components.design/cards/ */
.dlw-card {
    display: block;
    container: card / inline-size;
    position: relative;
    height: 100%;

    article {
        display: grid;
        grid-template-rows: auto 1fr;
        grid-template-areas: "media" "body";
        gap: var(--dlw-spacing--small);
        height: 100%;
        border-radius: var(--dlw-border-radius);
        overflow: clip; /* For border-radius */
        border: var(--dlw-card--border);
        background: var(--dlw-card--background);
        color: var(--dlw-color--text);

        h3 a {
            text-decoration: none;
        }
    }

    p:last-child {
        margin: 0;
    }

    .dlw-card__media {
        grid-area: media;
        position: relative;
        overflow: hidden;
        align-self: stretch;

        img,
        video,
        picture {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: cover;
            object-position: center;
            aspect-ratio: var(--dlw-card__media--aspect-ratio);
        }
    }

    .dlw-card__body {
        grid-area: body;
        display: flex;
        flex-direction: column;
        gap: var(--dlw-spacing--tiny);
        padding: var(--dlw-spacing--tiny) var(--dlw-spacing--small) var(--dlw-spacing--small);
    }

    /* Part of body, pushed to bottom */
    .dlw-card__footer {
        --svg-size: 1.5rem;
        
        color: var(--dlw-color--primary);
        margin: auto 0 0;
        display: flex;
        padding-block: var(--dlw-spacing--tiny) 0;
    }

    /* Used for links within a hx tag, to enable fully clickable card with useful accessible label */
    .dlw-card__overlay::before {
        content: "";
        inset: 0;
        z-index: 5;
        position: absolute;
    }

    &:focus-within  {
        article {
            outline: var(--dlw-a11y--outline-width) solid var(--dlw-color--focus);
            outline-offset: calc(var(--dlw-border-radius, 0) / 2);
            border-radius: calc(var(--dlw-border-radius, 0) / 2);
    
            a {
                outline: 0;
            }
        }
    }

    &:hover,
    &:focus {  
        .dlw-card__footer {
            svg {
                fill: var(--dlw-color--primary-dark--20);
            }
        }
    }
}

[data-dlw-background] .dlw-card {
    --dlw-color--focus: var(--dlw-color--white);
}
.dlw-badge {
    display: inline-block;
    padding: var(--dlw-spacing--tiny);
    background: var(--dlw-color--primary);
    text-transform: uppercase;
    color: #fff;
    font-weight: var(--dlw-font-weight--bold);
    font-size: var(--dlw-font-size--small);
    border-radius: calc(var(--dlw-border-radius, 0) / 2);
    line-height: 1;
}
.dlw-card {
    .dlw-card__media {
        img,
        video,
        picture {
            transition: transform calc(2 * var(--dlw-transition--duration)) ease;
        }
    }

    @container card (width < 30rem) {
        &:hover,
        &:focus-within {
            img,
            video,
            picture {
                transform: scale(1.05);
            }
        }
    }

    @container card (width >= 30rem) {
        &:hover,
        &:focus-within {
            img,
            video,
            picture {
                transform: scale(1.05);
            }
        }
    }
}
:root {
    --dlw-page-intro--min-height: auto;
    --dlw-page-intro--spacing: clamp(var(--dlw-spacing), 2cqi, var(--dlw-spacing--large));
    --dlw-page-intro__body--max-width: 80ch;

    @media (min-width: 40rem) {
        --dlw-page-intro--background: var(--dlw-color-bg--primary);
        --dlw-page-intro__body--color: #fff;
    }
}

.dlw-page-intro {
    min-height: var(--dlw-page-intro--min-height);
    position: relative;
    z-index: 0;
}

.dlw-page-intro__wrapper {
    display: flex;
    flex-direction: column;
    reading-flow: flex-visual;
}

.dlw-page-intro__body {
    position: relative;
}

.dlw-page-intro__text {
    padding-block: var(--dlw-page-intro--spacing);
}    

.dlw-page-intro__description,
.dlw-page-intro__body h1 {
    width: min(var(--dlw-page-intro__body--max-width), 100%);
}

.dlw-page-intro__cta {
    margin-block-start: var(--dlw-spacing);
}

.dlw-page-intro__media {
    picture,
    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    img {
        object-position: center;
    }
}


@media not (min-width: 40rem) {
    .dlw-page-intro {
        background: none;
    }

    .dlw-page-intro__body {
        display: flex;
        flex-direction: column;
    }

    .dlw-page-intro__media {
        position: static;
        order: -1;
        margin-inline: calc(-1 * var(--dlw-wrapper--gutter, var(--dlw-spacing)));
    }
}   

 /* Image is behind text, so we need different text color and focus styles */
@media (min-width: 40rem) {
    .dlw-page-intro {

        /* Default mask */
        &[mask] .dlw-page-intro__body::before {
            content: "";
            position: absolute;
            z-index: 1;
            inset: 0;
            background: linear-gradient(90deg, var(--dlw-color--text) 0%, rgba(0, 0, 0, 0.1) 75%);
            mix-blend-mode: darken;
        }
    }

    .dlw-page-intro__wrapper {
        flex-direction: column-reverse;
    }

    .dlw-page-intro__body {
        :is(a, button):not(:disabled) {
            --dlw-color--focus: var(--dlw-page-intro__body--color);
        }
        
        background: var(--dlw-page-intro--background);
        padding-block: var(--dlw-spacing);
        color: var(--dlw-page-intro__body--color);

        --dlw-color--focus: currentColor;
        --dlw-heading--color: currentColor;
        --dlw-link--color: currentColor;
        --dlw-link--color--visited: currentColor;
        --dlw-link--color--active: currentColor;
    }

    .dlw-page-intro__text {
        position: relative;
        z-index: 1;
    }

    .dlw-page-intro__media {
        position: absolute;
        inset: 0;
        z-index: 0;
    }
}