/* Own additions on top of the migrated Beaver Builder theme CSS (lib/theme): what the old site did
   with its own scripts 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 photos Beaver Builder put on rows and columns became real
   <img class="mo-cover-img"> elements that these rules merely position. MigrationGuardTests guards that. */

/* ---------------------------------------------------------------- skip link */
.fl-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: #373737;
    font-weight: 600;
}

/* ---------------------------------------------------------------- lazy photos keep their space
   WordPress' own inline CSS (wp-img-auto-sizes-contain) for the photos with sizes="auto"
   (LazyImageSizing): the browser sizes them before the file arrives. */
img:is([sizes=auto i], [sizes^="auto," i]) {
    contain-intrinsic-size: 3000px 1500px;
}

/* ---------------------------------------------------------------- tap areas (at least 44 x 44 px)
   The old site had 40 px items and arrows in the slide-in menu and a 24 x 16 px phone link in the
   mobile header. The menu items grow to 44 px; the phone link gets padding plus an equal negative
   margin, so its tap area grows and nothing moves. The 29 px tab links of the home page stay as they
   were: padding there made the stacked tab labels overlap on a phone.
   A deliberate deviation from the old site (MobileTapTargetTests). */
#rmp-menu-wrap-604 .rmp-menu-item-link,
#rmp-menu-wrap-604 .rmp-submenu .rmp-menu-item-link {
    height: 44px;
    line-height: 44px;
}

#rmp-menu-wrap-604 .rmp-menu-subarrow {
    height: 44px;
    width: 44px;
}

#rmp-menu-wrap-604 .rmp-menu-subarrow * {
    line-height: 44px;
}

.fl-page header a[href^="tel:"] {
    display: inline-block;
    padding: 10px 10px;
    margin-top: -10px;
    margin-right: -10px;
    margin-bottom: -10px;
    margin-left: -10px;
}

/* The 16 to 30 px links of the footer, the team cards and the contact boxes get the same invisible
   tap area on a phone: vertical padding on an inline link does not move a line, and a block link
   pays its padding back with an equal negative margin. */
@media (max-width: 768px) {
    footer.fl-builder-content p a,
    footer.fl-builder-content .uabb-photo-content > a,
    header .uabb-photo-content > a,
    .team-phone a,
    .team-mail a,
    .uabb-infobox-text a {
        padding-top: 14px;
        padding-bottom: 14px;
    }

    /* Each item its own block context: otherwise the negative margins of two neighbouring links
       collapse into one and every item grows by 7 px. */
    footer.fl-builder-content .uabb-creative-menu .menu > li.menu-item {
        display: flow-root;
    }

    /* As specific as the menu rules of Ultimate Addons, which set this padding to 0 per node. */
    footer.fl-builder-content .uabb-creative-menu .menu > li.menu-item > a {
        padding-top: 7px;
        padding-bottom: 7px;
        margin-top: -7px;
        margin-bottom: -7px;
    }
}


/* ---------------------------------------------------------------- narrow phones
   The first Dutch home tab says "ondernemingsrecht." in 35px, which is wider than a 360px phone: on
   the old site the whole page scrolled sideways below 383px. Below 400px the 35px text of the four
   home tabs scales with the screen (9vw is 35px at 390px), so the word stays whole; the tab content
   (a flex item) may shrink, and "anywhere" only breaks a word that still does not fit (hyphens: auto
   would also split words that do fit). A deliberate deviation from the old site. */
.uabb-tabs .uabb-content-wrap {
    min-width: 0;
}

/* Below 360 px the Dutch tab title "SCHEEPVAART- EN LUCHTVAARTRECHT" (348 px on one line, nowrap) pushed
   the page 14 px sideways, on the old site as well. There it may break onto a second line. */
@media (max-width: 359px) {
    :lang(nl) .uabb-tabs-nav .uabb-tab-link,
    :lang(nl) .uabb-tabs-nav .uabb-tab-title {
        white-space: normal;
    }
}

@media (max-width: 400px) {
    .uabb-tabs .uabb-content-wrap .fl-rich-text {
        overflow-wrap: anywhere;
    }

    .uabb-tabs .fl-builder-content :is(.fl-node-0suv4i7azm6h, .fl-node-e5oksv83n72f, .fl-node-ia51hez7kup0, .fl-node-n3zq6rukvoe1) .fl-rich-text,
    .uabb-tabs .fl-builder-content :is(.fl-node-0suv4i7azm6h, .fl-node-e5oksv83n72f, .fl-node-ia51hez7kup0, .fl-node-n3zq6rukvoe1) .fl-rich-text *:not(b, strong) {
        font-size: min(35px, 9vw);
        line-height: 1.2;
    }
}

/* ---------------------------------------------------------------- row and column photos (rule 8)
   Beaver Builder painted the photo of a row (.fl-row-content-wrap) or a column (.fl-col-content) as a
   background (cover, centred). The photo is now the first child of that element and covers it behind
   the content; the overlay of a row (.fl-row-bg-overlay ::after) still lies over it. */
.mo-cover-host {
    position: relative;
}

.mo-cover-host > .mo-cover-img {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center center;
    border-radius: inherit;
    pointer-events: none;
}

.fl-row-content-wrap.mo-cover-host > .fl-row-content,
.fl-col-content.mo-cover-host > :not(.mo-cover-img) {
    position: relative;
    z-index: 1;
}

/* The four rows of the home tabs had a FIXED background (background-attachment: fixed, centred on the
   window): the photo stands still while the page scrolls. A real <img> does the same as a fixed element
   clipped to its row (clip-path clips fixed children too). On a touch screen Beaver Builder switched to
   a scrolling background (.fl-builder-mobile), hence only where a mouse can hover; and bb-layout.css
   made every row background scroll up to 768 px wide (@media (max-width: 768px)), hence the minimum. */
@media (hover: hover) and (min-width: 769px) {
    :is(.fl-node-ljo9d5mahstg, .fl-node-40zmugpj6s2f, .fl-node-1a03yniugzdw, .fl-node-xvnisypm3247) > .fl-row-content-wrap.mo-cover-host {
        clip-path: inset(0);
    }

    :is(.fl-node-ljo9d5mahstg, .fl-node-40zmugpj6s2f, .fl-node-1a03yniugzdw, .fl-node-xvnisypm3247) > .fl-row-content-wrap.mo-cover-host > .mo-cover-img {
        position: fixed;
        inset: 0;
        width: 100vw;
        height: 100vh;
    }
}

/* The shipping row of the expertise tabs had its photo at "100% 30%". */
.fl-node-v6b4mxjaqsyw > .fl-row-content-wrap > .mo-cover-img {
    object-position: 100% 30%;
}

/* ---------------------------------------------------------------- the WPML flags of the mobile menu */
.rmp-menu .wpml-ls-flag {
    width: 18px;
    height: 12px;
    vertical-align: middle;
}

/* ---------------------------------------------------------------- the footer credit
   The inline style the designer's credit block printed in the footer; the copyright line follows the
   footer colour "muted" of /beheer/colors (white, as the old line inherited). */
a.phover:hover {
    color: #ff5b5b !important;
}

#profound-copyright-footer {
    color: var(--mo-footer-muted, #ffffff);
}

/* ---------------------------------------------------------------- the Google map of the contact page
   [[map]] fills the Ultimate Addons map wrapper (780 px high in the theme CSS). */
.uabb-google-map-wrapper .mo-map {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ---------------------------------------------------------------- the fee calculator ([[calculator]])
   The inline style calculator.min.js wrote: the table and its blocks stay hidden until an amount is
   typed; js/mo-calculator.js then fades the table in and shows the blocks that were filled in. */
.calc-table,
.mortgage_block,
.transport_block,
.auction_block {
    display: none;
}

.calc-table.mo-calc-visible {
    display: table;
    animation: mo-fade-in 400ms ease-in;
}

.mo-calc-spacer {
    height: 50px;
}

@keyframes mo-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ---------------------------------------------------------------- team ([[team]])
   The cards of the old team page wear the fl-node classes of one reference card (ShortcodeHelper);
   a last row of two or three cards is centred. A lone last card gets the group of the old page
   around Maddox (mo-team-group--lone), whose Beaver Builder CSS sizes it. The biography scrolls
   inside 175 px, as the longest one (Enrico's) did on the old page. */
.mo-team .mo-team-group {
    justify-content: center;
}

/* A card in a short row keeps its quarter of the row (Beaver Builder stretched a lone column). */
@media (min-width: 769px) {
    .mo-team .mo-team-group:not(.mo-team-group--lone) > .mo-team-member {
        flex: 0 0 25%;
        width: 25%;
    }
}

.mo-team .team-member-info {
    max-height: 175px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* The Dutch biographies are longer: the longest one (Martijn) is 225 px. On the old Dutch page the other
   biographies had a 50 px bottom margin of their own, so all four boxes were 225 px and phone and e-mail
   stood on one line; only Enrico's scrolled (from 220 px). The cards share one reference node here, so
   every Dutch biography box is at most 225 px. */
:lang(nl) .mo-team .team-member-info {
    max-height: 225px;
}

/* Side by side (from 769 px) the four boxes of a row are equally high, as on the old page; stacked on a
   phone each box keeps its own height. */
@media (min-width: 769px) {
    :lang(nl) .mo-team .team-member-info {
        min-height: 225px;
    }
}

/* ---------------------------------------------------------------- the auction slider ([[auctions]])
   The slick slider of tpl-auctions.php, rebuilt by js/mo-site.js: the cards move in a track. The
   wrapper keeps the 50px/60px margins of the section inside the tab, as the empty paragraphs
   WordPress put around it did (AuctionMarkup.WrapperClass). */
.mo-auctions-wrap,
.mo-auctions-wrap > .slider {
    /* The section too: empty (no auction) its own margins would otherwise fall together into one,
       where the old slider's inner list kept them apart. */
    display: flow-root;
}

.mo-slider {
    position: relative;
}

.mo-slider .slick-list {
    overflow: hidden;
}

.mo-slider .slick-track {
    display: flex;
    transition: transform 300ms ease;
}

.mo-slider .slick-slide {
    flex: 0 0 auto;
    box-sizing: border-box;
}

.mo-slider .slick-arrow {
    font-size: 0;
}

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

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

.mo-consent p {
    margin: 0;
}

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

.mo-consent__buttons button {
    min-height: 44px;
    padding: 8px 20px;
    border: 1px solid var(--mo-header-bg, #373737);
    background: var(--mo-header-bg, #373737);
    color: #fff;
    font-size: 16px;
    cursor: pointer;
}

.mo-consent__buttons #mo-consent-decline {
    background: #fff;
    color: var(--mo-header-bg, #373737);
}


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

/* Two classes on purpose (found in the reference CMS): a theme rule like 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. Slideshows are switched off on this site. */
.mo-slideshow .mo-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;
}

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

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

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

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

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

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


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

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

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

/* The Elementor gallery grid of the reference CMS: fixed columns and one aspect ratio (galleries are
   switched off on this site). */
.mo-gallery--grid .e-gallery-grid {
    display: grid;
    grid-template-columns: repeat(var(--mo-gallery-columns, 4), minmax(0, 1fr));
    gap: var(--mo-gallery-gap, 10px);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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


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

/* The placeholder of a live component in the page preview of /beheer. */
.mo-marker-placeholder {
    margin: 12px 0;
    padding: 16px;
    border: 2px dashed var(--mo-header-bg, #373737);
    color: var(--mo-header-bg, #373737);
    font-family: monospace;
    text-align: center;
}


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