/* 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 > .mm-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 > .mm-slideshow.mm-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 */
.mm-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. */
.mm-slideshow .mm-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;
}

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

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

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

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

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

@media (prefers-reduced-motion: reduce) {
    .mm-slideshow .mm-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%;
}

/* 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;
}

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

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

.mm-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). */
.mm-gallery--grid .e-gallery-grid {
    display: grid;
    grid-template-columns: repeat(var(--mm-gallery-columns, 4), minmax(0, 1fr));
    gap: var(--mm-gallery-gap, 10px);
}

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

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

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

@media (hover: hover) {
    .mm-gallery a.e-gallery-item img {
        transition: transform 0.4s ease;
    }

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

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

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

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

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

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

.mm-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 }. */
.mm-consent[hidden] {
    display: none;
}

.mm-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;
}

.mm-consent p {
    margin: 0;
}

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

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

.mm-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. */
.mm-separator {
    position: relative;
    display: flex;
    align-items: center;
    min-height: var(--mm-separator-height, 0);
    overflow: hidden;
    color: #fff;
    text-align: center;
}

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

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

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

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

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

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

.mm-tiles .mm-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. */
.mm-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. */
.mm-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). */
.mm-team--board-of-trustees .mm-team__member {
    width: 155px;
    max-width: 155px;
}

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

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

.mm-team .elementor-image-box-img img {
    height: auto;
}

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

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

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

/* ---------------------------------------------------------------- a photo that is gone */
.mm-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. */
.mm-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;
    }
}

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