/* Own additions on top of the migrated WordPress/Elementor theme CSS (lib/theme): what the old
   site did with its own JavaScript or plugins, rebuilt without them, and the CMS components.
   ⛔ No photo from the media library is ever set as a CSS background here (rule 8 of the
   migration): the photo bands, the call-to-action boxes and the galleries use real <img> elements
   that these rules merely position. PhotoBackgroundConventionTests guards that. */

/* ---------------------------------------------------------------- skip link and helpers */
.skip-link.screen-reader-text:focus {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 100000;
    clip: auto;
    width: auto;
    height: auto;
    padding: 12px 16px;
    background: #fff;
    color: #0067ae;
    font-weight: 600;
}

/* ---------------------------------------------------------------- the photo band of a header
   The Elementor background (a photo or a slideshow) of the header band, now a stack of <img>
   elements behind the logo and the search box. */
.mm-header-band {
    position: relative;
    overflow: hidden;
}

.mm-header-band > .vsi-slideshow {
    position: absolute;
    inset: 0;
    z-index: 0;
    margin: 0;
}

.mm-header-band > .elementor-element {
    position: relative;
    z-index: 1;
}

/* The band's height comes from its own Elementor rules (min-height, padding), never from the
   aspect ratio a slideshow gallery inside a page gets. */
.mm-header-band > .vsi-slideshow.vsi-slideshow--content {
    aspect-ratio: auto;
}

/* The logo in the home band: Elementor's custom image size of that widget (150 x 185, cropped),
   so the full-size logo from the media library shows at the same size as the old thumbnail. */
.elementor-11 .elementor-element-1bd21c8 img {
    width: 150px;
    height: 185px;
    object-fit: cover;
}

/* ---------------------------------------------------------------- slideshows */
.vsi-slideshow {
    position: relative;
    overflow: hidden;
}

/* Two classes on purpose: Elementor's ".elementor img { height: auto }" (0,1,1) beats a single
   class, and the photo then keeps its own height and shows its top instead of its centre. */
.vsi-slideshow .vsi-slideshow__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center center;
    opacity: 0;
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.vsi-slideshow__img.is-active {
    opacity: 1;
}

.vsi-slideshow--slide .vsi-slideshow__img {
    opacity: 1;
    transform: translateX(100%);
}

.vsi-slideshow--slide .vsi-slideshow__img.is-active {
    transform: translateX(0);
}

.vsi-slideshow--slide .vsi-slideshow__img.is-leaving {
    transform: translateX(-100%);
}

/* A slideshow gallery placed in a page (not a header band) needs a height of its own. */
.vsi-slideshow--content {
    aspect-ratio: 16 / 7;
}

@media (prefers-reduced-motion: reduce) {
    .vsi-slideshow .vsi-slideshow__img {
        transition: none;
    }
}

/* ---------------------------------------------------------------- the sticky menu bar */
.mm-sticky.mm-sticky--active {
    position: fixed;
    top: 0;
    z-index: 99;
}

body.admin-bar .mm-sticky.mm-sticky--active {
    top: 0;
}

.mm-sticky-spacer[hidden] {
    display: none;
}

/* ---------------------------------------------------------------- the menu
   SmartMenus opened a sub menu on hover with JavaScript; the same, in CSS: on hover and when a
   link inside it has the keyboard focus. */
.elementor-nav-menu--main .elementor-nav-menu li.menu-item-has-children:hover > ul.sub-menu,
.elementor-nav-menu--main .elementor-nav-menu li.menu-item-has-children:focus-within > ul.sub-menu {
    display: block;
}

.elementor-nav-menu--main .elementor-nav-menu ul.sub-menu ul.sub-menu {
    top: 0;
    left: 100%;
}

/* SmartMenus also sized every sub menu to its longest item (at least 10em, on one line while it
   fits); without it Elementor's fixed width of 12em let a long item such as "Contemporary building
   in Curaçao" or "Theme lists and Publications" run past the right edge. The ceiling is 24em
   instead of SmartMenus' 20em, so the longest item of this menu stays on one line. */
.elementor-nav-menu--main .elementor-nav-menu ul.sub-menu {
    width: max-content;
    min-width: 10em;
    max-width: 24em;
}

.elementor-nav-menu--main .elementor-nav-menu ul.sub-menu a {
    white-space: normal;
}

/* In the phone dropdown a sub menu opens with a tap (js/mm.js sets mm-submenu-open). */
.elementor-nav-menu--dropdown li.mm-submenu-open > ul.sub-menu {
    display: block;
}

/* The added language switch at the end of the menu. */
.mm-lang-switch > a {
    font-weight: 600;
}

/* ---------------------------------------------------------------- call-to-action photos
   The call-to-action boxes of the home page had their photo as an inline background; it is a real
   <img> now, covering the same box (the hover zoom of the widget still applies to the box). */
.elementor-cta__bg {
    overflow: hidden;
}

.elementor-cta__bg .mm-cta-bg__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center center;
}

/* The hover zoom of a photo starts and ends gently instead of jumping: the widget's 1.5 s "ease"
   put most of the 20% growth in the first half second. Five classes, like the per-element rule of
   the Elementor post CSS it overrides; this sheet loads after it. */
.elementor-bg-transform .elementor-cta .elementor-cta__bg-wrapper .elementor-cta__bg.elementor-bg {
    transition: transform 3s cubic-bezier(0.45, 0.05, 0.55, 0.95);
}

/* ---------------------------------------------------------------- photo galleries */
.vsi-gallery {
    width: 100%;
}

.vsi-gallery .e-gallery-item {
    display: block;
    overflow: hidden;
}

.vsi-gallery .e-gallery-item img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}

/* The Elementor grid: fixed columns and one aspect ratio (numbers from the old widget). */
.vsi-gallery--grid .e-gallery-grid {
    display: grid;
    grid-template-columns: repeat(var(--vsi-gallery-columns, 4), minmax(0, 1fr));
    gap: var(--vsi-gallery-gap, 10px);
}

.vsi-gallery--grid .e-gallery-item {
    aspect-ratio: var(--vsi-gallery-ratio, 3 / 2);
}

@media (max-width: 1024px) {
    .vsi-gallery--grid .e-gallery-grid {
        grid-template-columns: repeat(var(--vsi-gallery-columns-tablet, 2), minmax(0, 1fr));
        gap: var(--vsi-gallery-gap-tablet, 10px);
    }
}

@media (max-width: 767px) {
    .vsi-gallery--grid .e-gallery-grid {
        grid-template-columns: repeat(var(--vsi-gallery-columns-mobile, 1), minmax(0, 1fr));
        gap: var(--vsi-gallery-gap-mobile, 10px);
    }
}

@media (hover: hover) {
    .vsi-gallery a.e-gallery-item img {
        transition: transform 1.2s cubic-bezier(0.45, 0.05, 0.55, 0.95);
    }

    .vsi-gallery a.e-gallery-item:hover img {
        transform: scale(1.04);
    }
}

/* ---------------------------------------------------------------- lightbox */
.vsi-lightbox {
    position: fixed;
    inset: 0;
    z-index: 100001;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.9);
}

.vsi-lightbox[hidden] {
    display: none;
}

.vsi-lightbox figure {
    margin: 0;
    max-width: 90vw;
    max-height: 90vh;
    text-align: center;
}

.vsi-lightbox img {
    max-width: 90vw;
    max-height: 82vh;
    object-fit: contain;
}

.vsi-lightbox figcaption {
    margin-top: 10px;
    color: #fff;
    font-size: 16px;
}

.vsi-lightbox button {
    position: absolute;
    min-width: 44px;
    min-height: 44px;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 40px;
    line-height: 1;
    cursor: pointer;
}

.mm-lightbox__close {
    top: 12px;
    right: 16px;
}

.mm-lightbox__prev {
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
}

.mm-lightbox__next {
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
}

.mm-lightbox--single .mm-lightbox__prev,
.mm-lightbox--single .mm-lightbox__next {
    display: none;
}

body.mm-lightbox-open,
body.mm-search-open {
    overflow: hidden;
}

/* ---------------------------------------------------------------- cookie notice */
/* ⛔ A block that carries `display` needs its own [hidden] rule: a class selector beats the
   browser's [hidden] { display: none }. */
.vsi-consent[hidden] {
    display: none;
}

.vsi-consent {
    position: fixed;
    right: 16px;
    bottom: 16px;
    left: 16px;
    z-index: 100000;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    max-width: 720px;
    margin: 0 auto;
    padding: 16px 20px;
    background: #fff;
    color: #333;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
    font-size: 16px;
}

.vsi-consent p {
    margin: 0;
}

.vsi-consent__buttons {
    display: flex;
    gap: 8px;
}

.vsi-consent__buttons button {
    min-height: 44px;
    padding: 8px 20px;
    border: 1px solid #0067ae;
    background: #0067ae;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
}

.vsi-consent__buttons #mm-consent-decline {
    background: #fff;
    color: #0067ae;
}

/* ---------------------------------------------------------------- videos
   The YouTube film of a video widget is a plain iframe now; the widget keeps its 16:9 box. */
.elementor-widget-video .elementor-wrapper iframe.elementor-video {
    width: 100%;
    height: 100%;
    border: 0;
}

/* ---------------------------------------------------------------- the account page */
.mm-account-notice {
    font-size: 16px;
}

/* ---------------------------------------------------------------- CMS component blocks
   Photo strips ([[ImageSeparator-{id}]]) and tile blocks ([[TileGallery-{id}]]) an admin can add. */
.vsi-separator {
    position: relative;
    display: flex;
    align-items: center;
    min-height: var(--vsi-separator-height, 0);
    overflow: hidden;
    color: #fff;
    text-align: center;
}

.vsi-separator .container {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 24px;
}

.vsi-separator__text {
    margin: 0 0 8px;
    font-size: 32px;
    font-weight: 600;
}

.vsi-separator__sub {
    margin: 0;
    font-size: 18px;
}

.vsi-tiles .container {
    max-width: 1140px;
    margin: 0 auto;
}

.vsi-tiles .row {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.vsi-tiles .row > [class*="col-"] {
    flex: 1 1 280px;
}

.vsi-tiles .vsi-card__photo {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* ---------------------------------------------------------------- team ([[team:group]])
   The board members as the Elementor image boxes of the old page. */
.vsi-team {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    width: 100%;
}

/* The values every member box of the old Board & Staff page had (post-17.css): 215px wide, text
   aligned to the start, the photo at its own size within the box, 10px under the photo and the
   name in weight 600. The old rules hung on one element id per member; one class serves all. */
.vsi-team__member {
    flex: 0 0 auto;
    width: 215px;
    max-width: 215px;
}

/* The Board of Trustees had narrower boxes than the advisory board (150 to 161px in post-17.css). */
.vsi-team--board-of-trustees .vsi-team__member {
    width: 155px;
    max-width: 155px;
}

.vsi-team .elementor-image-box-wrapper {
    text-align: start;
}

.vsi-team .elementor-image-box-wrapper .elementor-image-box-img {
    width: 100%;
    margin-bottom: 10px;
}

/* Every photo of a group equally high, its width following its own aspect ratio: the highest
   height at which each current photo still fits its box uncut (178px for the advisory board, set
   by its widest photo; 174px for the trustees). A wider photo added later is trimmed at the sides
   (cover), never stretched. */
.vsi-team .elementor-image-box-img img {
    width: auto;
    max-width: 100%;
    height: 178px;
    object-fit: cover;
    object-position: center top;
}

.vsi-team--board-of-trustees .elementor-image-box-img img {
    height: 174px;
}

.vsi-team .elementor-image-box-title {
    font-weight: 600;
}

/* ---------------------------------------------------------------- a news post (NewsPosts.ArticleHtml)
   The post stands in its news page in the place of the list: the date, the photo, the text and the
   way back to the list. */
.mm-news-article {
    width: 100%;
}

.mm-news-article__date {
    margin: 0 0 1em;
    font-size: 0.875em;
    opacity: 0.75;
}

.mm-news-article__photo {
    margin: 0 0 1.5em;
}

.mm-news-article__photo img {
    display: block;
    max-width: 100%;
    height: auto;
}

.mm-news-article__back {
    margin-top: 2em;
}

/* ---------------------------------------------------------------- FAQ ([[faq]]) */
.vsi-faq__item {
    border-bottom: 1px solid #e2e2e2;
    padding: 12px 0;
}

.vsi-faq__question {
    min-height: 44px;
    cursor: pointer;
    font-weight: 600;
}

/* ---------------------------------------------------------------- a photo that is gone */
.vsi-media-missing__box {
    display: inline-block;
    padding: 12px;
    border: 1px dashed #db392c;
    color: #db392c;
    font-size: 14px;
}

/* The placeholder of a live component in the page preview of /beheer. */
.vsi-marker-placeholder {
    margin: 12px 0;
    padding: 16px;
    border: 2px dashed #0067ae;
    color: #0067ae;
    font-family: monospace;
    text-align: center;
}

/* ---------------------------------------------------------------- price lists
   A Dutch compound ("museumrondleiding") is longer than any English word in the old price
   lists; on a 360px phone it pushed the list past the screen edge. Such a word may break. */
.elementor-price-list .elementor-price-list-title,
.elementor-price-list .elementor-price-list-description {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------- phones
   Tap targets of at least 44px and inputs of at least 16px (iOS zooms in on anything smaller). */
.elementor-menu-toggle {
    min-width: 44px;
    min-height: 44px;
}

@media (max-width: 767px) {
    input,
    select,
    textarea,
    .elementor-field-textual {
        font-size: 16px;
    }

    .elementor-nav-menu--dropdown a {
        min-height: 44px;
    }

    .elementor-social-icon {
        min-width: 44px;
        min-height: 44px;
    }

    /* Final check of 16 October 2026 (point B). The header icons (account, cart), the search
       toggle and the buttons get an invisible touch area of at least 44px through an absolutely
       positioned ::after, so nothing visible moves; the footer link lists get real height, because
       their 32px rhythm leaves no room for an invisible area without overlapping the next link. */
    .elementor-location-header a.elementor-icon,
    .elementor-menu-cart__toggle_button,
    .elementor-search-form__toggle,
    .elementor-button,
    .widEXCTALOGO a,
    .woocommerce-breadcrumb a,
    .elementor-image-box-title a,
    .single_add_to_cart_button {
        position: relative;
    }

    .elementor-location-header a.elementor-icon::after,
    .elementor-menu-cart__toggle_button::after {
        content: "";
        position: absolute;
        top: -12px;
        right: -12px;
        bottom: -12px;
        left: -12px;
    }

    .elementor-search-form__toggle::after {
        content: "";
        position: absolute;
        top: -6px;
        right: -6px;
        bottom: -6px;
        left: -6px;
    }

    .elementor-button::after {
        content: "";
        position: absolute;
        top: -4px;
        right: 0;
        bottom: -4px;
        left: 0;
    }

    /* The cart toggle is an .elementor-button too, so its larger area comes after that rule. */
    .elementor-menu-cart__toggle_button.elementor-button::after {
        top: -12px;
        right: -12px;
        bottom: -12px;
        left: -12px;
    }

    /* The logo link inside the TripAdvisor widget and the shop breadcrumb. */
    .widEXCTALOGO a::after {
        content: "";
        position: absolute;
        top: -6px;
        right: 0;
        bottom: -6px;
        left: 0;
    }

    /* The title link of an image box (the gallery overview) and the donation button of a product. */
    .elementor-image-box-title a::after {
        content: "";
        position: absolute;
        top: -13px;
        right: 0;
        bottom: -13px;
        left: 0;
    }

    .single_add_to_cart_button::after {
        content: "";
        position: absolute;
        top: -4px;
        right: 0;
        bottom: -4px;
        left: 0;
    }

    .woocommerce-breadcrumb a::after {
        content: "";
        position: absolute;
        top: -13px;
        right: -2px;
        bottom: -13px;
        left: -2px;
    }

    .elementor-location-footer .elementor-icon-list-item > a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    /* A long word (a Dutch heading, a phone number) breaks instead of pushing the page wider than
       the phone (a long address in an accordion); it only breaks a word that would not fit anyway. */
    .elementor-heading-title,
    .elementor-widget-text-editor,
    .elementor-widget-container p,
    .elementor-widget-container li {
        overflow-wrap: break-word;
    }

    /* The tour names of the booking widget wrap ("Rondleiding op eigen gelegenheid" at 320px). */
    .mm-booking__item {
        white-space: normal;
    }
}

/* Laptops (final check, point B): between the mobile menu (up to 1024px) and 1440px the menu bar
   did not fit, so "Support us", the language switch, account and cart fell outside the window
   (English up to 1279px, Dutch up to 1399px; the old site did the same). Narrower item padding
   only in those ranges; from 1440px and English at 1280px nothing changes. The kit sets this
   padding per header element with five classes, so !important is the one robust override. */
@media (min-width: 1025px) and (max-width: 1279px) {
    .elementor-location-header .elementor-nav-menu--main .elementor-item {
        padding-left: 8px !important;
        padding-right: 8px !important;
        font-size: 13px !important;
    }
}

/* The Dutch labels are longer: on the smallest laptops one step narrower still. */
@media (min-width: 1025px) and (max-width: 1199px) {
    html[lang^="nl"] .elementor-location-header .elementor-nav-menu--main .elementor-item {
        padding-left: 5px !important;
        padding-right: 5px !important;
        font-size: 12px !important;
    }
}

@media (min-width: 1280px) and (max-width: 1439px) {
    html[lang^="nl"] .elementor-location-header .elementor-nav-menu--main .elementor-item {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* The photo of a photo strip: a real <img> covering the strip behind its texts. */
.vsi-separator .vsi-separator__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    z-index: 0;
}