/* Keep the mirrored layout intact, below the single site-wide brand owner. */
@layer webador;
@import url("/cdn/assets.jwwb.nl/assets/website-rendering/main.62bcabea4636ea81a177.css") layer(webador);
@import url("/cdn/primary.jwwb.nl/public/n/t/v/temp-fnnkpklcotqcqpwfabqk/style.css@bust_1788614033.css") layer(webador);

@font-face {
    font-family: "Pojia Sans";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/fonts/pojia-sans.woff2") format("woff2");
}

@font-face {
    font-family: "Pojia Sans";
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url("/fonts/pojia-sans-italic.woff2") format("woff2");
}

:root {
    /* Sampled warm ivory; navy and light Montserrat echo the printed card. */
    --pojia-cream: #fdfcf2;
    --pojia-navy: #11182c;
    --pojia-font: "Pojia Sans", "Helvetica Neue", Arial, sans-serif;
    --pojia-hover: color-mix(in srgb, var(--pojia-navy) 90%, var(--pojia-cream));
    --pojia-shade: color-mix(in srgb, var(--pojia-navy) 6%, var(--pojia-cream));
    --pojia-border: color-mix(in srgb, var(--pojia-navy) 55%, var(--pojia-cream));
    --pojia-divider: color-mix(in srgb, var(--pojia-navy) 18%, var(--pojia-cream));
    --pojia-state-duration: 160ms;
    --pojia-touch-target: 4.4rem;
    --pojia-radius: 2px;
    --pojia-line-width: 1px;
    --pojia-emphasis-line-width: 2px;
    --pojia-focus-offset: 3px;
    color-scheme: light;
}

/* Translate the brand once at every scope where Webador owns a local palette. */
:root,
.jw-section,
.jw-strip,
.jw-box {
    --jw-background-color: var(--pojia-cream);
    --jw-background-color-tint: var(--pojia-cream);
    --jw-content-color: var(--pojia-navy);
    --jw-content-color-link: var(--pojia-navy);
    --jw-content-color-accent: var(--pojia-navy);
    --jw-content-color-error: var(--pojia-navy);
    --jw-content-color-muted: var(--pojia-navy);
    --jw-heading-color: var(--pojia-navy);
    --jw-heading-color-link: var(--pojia-navy);
    --jw-heading-color-accent: var(--pojia-navy);
    --jw-line-color: var(--pojia-border);
    --jw-line-color-tint: var(--pojia-navy);
    --jw-line-color-separator: var(--pojia-divider);
    --jw-accent-container-background-color: var(--pojia-cream);
    --jw-accent-container-background-color-tint: var(--pojia-shade);
    --jw-accent-container-content-color: var(--pojia-navy);
    --jw-secondary-container-background-color: var(--pojia-cream);
    --jw-secondary-container-background-color-tint: var(--pojia-shade);
    --jw-secondary-container-content-color: var(--pojia-navy);
    --jw-secondary-surface-background-color: var(--pojia-cream);
    --jw-secondary-surface-content-color: var(--pojia-navy);
    --jw-input-background-color: var(--pojia-cream);
    --jw-input-content-color: var(--pojia-navy);
    --jw-input-border-color: var(--pojia-border);
    --jw-input-border-color-tint: var(--pojia-navy);
    --jw-swatch--heading-color: var(--pojia-navy);
    --jw-swatch--heading-color--button-text-on: var(--pojia-cream);
    --jw-swatch--heading-color--button-hover: var(--pojia-hover);
    --jw-swatch--paragraph-color: var(--pojia-navy);
    --jw-swatch--paragraph-color--button-text-on: var(--pojia-cream);
    --jw-swatch--paragraph-color--button-hover: var(--pojia-hover);
    --jw-swatch--paragraph-link-color: var(--pojia-navy);
    --jw-swatch--paragraph-link-color--button-text-on: var(--pojia-cream);
    --jw-swatch--paragraph-link-color--button-hover: var(--pojia-hover);
    --jw-swatch--accent-color: var(--pojia-navy);
    --jw-swatch--accent-color--button-text-on: var(--pojia-cream);
    --jw-swatch--accent-color--button-hover: var(--pojia-hover);
    --jw-swatch--header-color: var(--pojia-navy);
    --jw-swatch--header-color--button-text-on: var(--pojia-cream);
    --jw-swatch--header-color--button-hover: var(--pojia-hover);
}

body,
.jw-background,
.block-header,
.jw-mobile-menu,
.jw-menu-clone,
.jw-submenu,
.jw-skip-link,
.block-footer,
.jw-section,
.jw-element-image__image--placeholder,
.jw-album--placeholder .jw-album-image__inner,
.jw-album--placeholder .jw-album-image__image,
.jw-header-image--placeholder,
.jw-mobile-logo--placeholder {
    background-color: var(--pojia-cream);
    color: var(--pojia-navy);
}

body,
.jw-menu,
.jw-header-title,
.jw-header-slogan,
.jw-mobile-text,
:where(h1, h2, h3, h4, h5, h6, input, textarea, select, button) {
    font-family: var(--pojia-font);
    font-weight: 400;
}

body {
    line-height: 1.65;
}

:where(h1, h2, h3, h4, h5, h6),
.jw-header-title,
.jw-header-slogan,
.jw-mobile-text {
    color: var(--pojia-navy);
    line-height: 1.3;
    letter-spacing: 0.035em;
    overflow-wrap: break-word;
}

h1,
h2,
.jw-header-title,
.jw-header-slogan,
.jw-mobile-text {
    font-weight: 300;
}

.jw-header-title {
    font-size: clamp(3.6rem, 3.8vw, 5.4rem);
}

.jw-mobile-text {
    font-size: clamp(2.4rem, 5vw, 3rem);
}

strong,
b {
    font-weight: 500;
}

:where(h1, h2, h3, h4, h5, h6) :is(strong, b) {
    font-weight: inherit;
}

a,
a:hover,
.jw-header-title:hover,
.jw-mobile-text:hover,
.jw-mobile-menu__button {
    color: var(--pojia-navy);
}

.jw-element-imagetext-text a:not(.jw-btn),
.jw-footer-text-content a {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.jw-element-imagetext-text a:not(.jw-btn):hover,
.jw-footer-text-content a:hover {
    text-decoration-thickness: var(--pojia-emphasis-line-width);
}

.jw-menu-link {
    min-height: var(--pojia-touch-target);
    color: var(--pojia-navy);
    letter-spacing: 0.025em;
    transition: background-color var(--pojia-state-duration);
}

.jw-menu-item > .jw-menu-link:hover,
.jw-menu-is-hover > .jw-menu-link,
.jw-menu-is-active > .jw-menu-link,
.jw-mobile-menu__button:hover,
.jw-menu .jw-arrow:hover,
.jw-menu .jw-arrow:active {
    background-color: var(--pojia-shade);
    color: var(--pojia-navy);
}

.jw-menu-is-active > .jw-menu-link {
    text-decoration: underline;
    text-underline-offset: 0.3em;
}

/* The widget's important text colour reads these variables, not a second colour. */
.jw-btn {
    --jw-button-background-color: var(--pojia-navy);
    --jw-button-background-color-hover: var(--pojia-hover);
    --jw-button-content-color: var(--pojia-cream);
    --jw-button-content-color-hover: var(--pojia-cream);
    --jw-button-border-color: var(--pojia-navy);
    --jw-button-border-color-hover: var(--pojia-hover);
    --jw-button-border-width: var(--pojia-line-width);
    --jw-button-border-radius: var(--pojia-radius);
}

.jw-btn,
button[type="submit"],
input[type="submit"],
input[type="button"],
input::file-selector-button {
    background-color: var(--pojia-navy);
    color: var(--pojia-cream);
    border: var(--pojia-line-width) solid var(--pojia-navy);
    border-radius: var(--pojia-radius);
    font: inherit;
    font-weight: 400;
    letter-spacing: 0.025em;
    min-height: var(--pojia-touch-target);
    max-width: 100%;
    white-space: normal;
    transition: background-color var(--pojia-state-duration), border-color var(--pojia-state-duration);
}

.jw-btn-caption {
    min-width: 0;
    white-space: normal;
    overflow-wrap: break-word;
}

.jw-btn:hover,
button[type="submit"]:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input::file-selector-button:hover {
    background-color: var(--pojia-hover);
    border-color: var(--pojia-hover);
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: var(--pojia-emphasis-line-width) solid var(--pojia-navy);
    outline-offset: var(--pojia-focus-offset);
}

:where(input, select, textarea) {
    accent-color: var(--pojia-navy);
    color: var(--pojia-navy);
    background-color: var(--pojia-cream);
    font-size: 1.6rem;
}

.jw-element-form-input-text {
    font-family: var(--pojia-font);
    font-size: 1.6rem;
    border-color: var(--pojia-border);
}

/* Native select arrows follow the text colour instead of the legacy grey SVG. */
.jw-element-form-content select {
    appearance: auto;
    background-image: none;
}

:where(input, textarea)::placeholder {
    color: var(--pojia-navy);
    opacity: 0.7;
}

.jw-element-form-is-error .jw-element-form-input-text,
[aria-invalid="true"] {
    border: var(--pojia-emphasis-line-width) dashed var(--pojia-navy);
}

:where(button, input, select, textarea):disabled,
.jw-btn[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.6;
}

/* Fotorama loads its own unlayered CSS lazily: scope these above its selectors. */
html.fullscreen,
html body.fullscreen,
html .fotorama,
html .fotorama .fotorama__wrap,
html .fotorama .fotorama__stage,
html .fotorama .fotorama__stage__frame,
html .fotorama .fotorama__nav,
html .fotorama .fotorama__thumb {
    background-color: var(--pojia-cream);
}

html .fotorama .fotorama__caption,
html .fotorama .fotorama__caption__wrap,
html .fotorama .fotorama__caption a {
    color: var(--pojia-navy);
    font-family: var(--pojia-font);
    font-weight: 400;
}

html .fotorama .fotorama__caption__wrap {
    background-color: var(--pojia-cream);
}

html .fotorama .fotorama__caption a,
html .fotorama .fotorama__thumb-border,
html .fotorama .fotorama__dot {
    border-color: var(--pojia-navy);
}

html .fotorama .fotorama__arr,
html .fotorama .fotorama__fullscreen-icon {
    background: var(--pojia-cream);
    color: var(--pojia-navy);
    width: var(--pojia-touch-target);
    height: var(--pojia-touch-target);
    border-radius: var(--pojia-radius);
}

html .fotorama .fotorama__arr:hover,
html .fotorama .fotorama__fullscreen-icon:hover {
    background-color: var(--pojia-shade);
}

html .fotorama .fotorama__arr:focus-visible,
html .fotorama .fotorama__fullscreen-icon:focus-visible {
    outline: var(--pojia-emphasis-line-width) solid var(--pojia-navy);
    outline-offset: calc(var(--pojia-emphasis-line-width) * -1);
}

html .fotorama .fotorama__arr {
    margin-top: calc(var(--pojia-touch-target) / -2);
}

html .fotorama .fotorama__arr::before,
html .fotorama .fotorama__fullscreen-icon::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.8rem;
    height: 0.8rem;
    border: solid currentColor;
    border-width: 0 var(--pojia-emphasis-line-width) var(--pojia-emphasis-line-width) 0;
    transform: translate(-50%, -50%) rotate(-45deg);
}

html .fotorama .fotorama__arr--prev::before {
    transform: translate(-50%, -50%) rotate(135deg);
}

html .fotorama .fotorama__fullscreen-icon::before {
    width: 1.4rem;
    height: 1.4rem;
    border-width: var(--pojia-emphasis-line-width);
    transform: translate(-50%, -50%);
}

html .fotorama .fotorama__arr:focus::after,
html .fotorama .fotorama__fullscreen-icon:focus::after,
html .fotorama .fotorama__nav__frame:focus .fotorama__dot::after,
html .fotorama .fotorama__nav__frame:focus .fotorama__thumb::after {
    background-color: color-mix(in srgb, var(--pojia-navy) 12%, transparent);
}

html .fotorama .fotorama__nav__frame:focus-visible .fotorama__thumb::after {
    background-color: transparent;
    border: var(--pojia-emphasis-line-width) solid var(--pojia-navy);
    box-shadow: inset 0 0 0 var(--pojia-emphasis-line-width) var(--pojia-cream);
    box-sizing: border-box;
}

::selection {
    background-color: var(--pojia-navy);
    color: var(--pojia-cream);
}

@media (prefers-reduced-motion: reduce) {
    .jw-menu-link,
    .jw-btn,
    button[type="submit"],
    input[type="submit"],
    input[type="button"],
    input::file-selector-button {
        transition: none;
    }
}