/* Site-specific additions on top of the bundled theme CSS (wwwroot/css/site.css).
   Everything in here replaces a piece of behaviour the old site needed jQuery or a plugin for:
   the mobile menu overlay, the lightbox and the two small blocks the CMS renders itself.
   Generated CSS belongs in site.css — this file is hand-written and reviewed. */

/* ---------- Mobile menu (was: magnific popup off-canvas) ---------- */

#main-menu.mx-mobile-sidebar {
    position: fixed;
    inset: 0;
    z-index: 1001;
    display: none;
    overflow-y: auto;
    padding: 3rem 1rem;
    background-color: var(--mx-mobile-menu-bg, #00bdf2);
}

.mx-menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    background-color: rgba(0, 0, 0, .4);
}

html.mx-menu-is-open #main-menu.mx-mobile-sidebar,
html.mx-menu-is-open .mx-menu-overlay {
    display: block;
}

html.mx-menu-is-open {
    overflow: hidden;
}

#main-menu.mx-mobile-sidebar .nav-sidebar > li > a {
    display: block;
    padding: .6em 0;
    font-size: 1.1em;
}

/* ---------- Lightbox (was: magnific popup) ---------- */

.mx-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background-color: rgba(0, 0, 0, .85);
}

.mx-lightbox--open {
    display: flex;
}

.mx-lightbox__img {
    max-width: 100%;
    max-height: 100%;
}

.mx-lightbox__close {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    border: 0;
    background: none;
    color: #fff;
    font-size: 2.5rem;
    line-height: 1;
    cursor: pointer;
}

html.mx-lightbox-is-open {
    overflow: hidden;
}

/* ---------- Photo list of a vessel ---------- */

.mx-photo-strip__extra {
    display: inline-block;
    width: 120px;
    margin: .5rem .5rem 0 0;
    vertical-align: top;
}

/* ---------- Contact form ---------- */

.mx-contactform__honey {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.mx-contactform__ok,
.mx-contactform__error {
    display: block;
    margin: 0 0 1rem;
    padding: .8rem 1rem;
    border: 2px solid #46b450;
    border-radius: 3px;
}

.mx-contactform__error {
    border-color: #dc3232;
}

.mx-contactform .validation-message {
    display: block;
    color: #dc3232;
    font-size: .85em;
}

/* ---------- 404 ---------- */

.mx-notfound__links {
    margin-left: 1.2em;
}

/* ---------- "Website hidden" badge (SiteNoIndex setting) ---------- */

.mx-hidden-badge {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1500;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .8rem;
    border-radius: 999px;
    background-color: #b20000;
    color: #fff;
    font-size: .8rem;
}

.mx-hidden-badge__dot {
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background-color: #fff;
}

/* ---------- Footer details the theme options used to set ---------- */

.mx-footer-section {
    padding-top: 60px;
    padding-bottom: 60px;
    background-color: var(--mx-footer-bg, #0054a6);
}

.mx-footer-heading-col {
    margin: 0 0 -30px;
}

/* De kop boven de footer ("Let us introduce ourselves") stond op de oude site in een tekstblok van
   2rem. Het thema schaalt een h3 mee met de lettergrootte van zijn container, dus zonder deze regel
   is die kop 20px in plaats van 40px: dezelfde woorden, half zo groot, en een footer die 50 pixels
   lager uitvalt. Gemeten in de browser tegen de oude site. */
.mx-footer-heading-col .text {
    font-size: 2rem;
}

.mx-footer-gap {
    padding-top: 30px;
}

.mx-footer-address p {
    text-align: left;
}

@media (max-width: 849px) {
    .mx-footer-address p {
        text-align: center;
    }
}

/* The footer menu is a list of links, never a bulleted list. */
.footer-wrapper .ux-menu-link {
    list-style: none;
}

.absolute-footer {
    background-color: var(--mx-footer-bottom-bg, #efefef);
}

/* ---------- Carrousel (was: flickity via jQuery) ---------- */

.mx-slider {
    position: relative;
}

.mx-slider > .mx-slider__slide {
    display: none;
}

.mx-slider > .mx-slider__slide.is-selected {
    display: block;
}

.mx-slider__dots {
    display: flex;
    justify-content: center;
    gap: .5rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}

.mx-slider__dots .dot {
    width: .65rem;
    height: .65rem;
    border-radius: 50%;
    background-color: currentColor;
    opacity: .3;
    cursor: pointer;
}

.mx-slider__dots .dot.is-selected {
    opacity: 1;
}

/* ---------- Fotobanner boven een blogartikel ---------- */

/* De oude site zette hier een CSS-achtergrondfoto neer met een zwarte sluier eroverheen. Een foto
   in CSS is onzichtbaar voor Google, kan geen alt dragen en is niet te vervangen vanuit /beheer,
   dus het is een echte <img> geworden die op dezelfde manier het vlak vult. De maten komen van de
   oude pagina: 300 pixels hoog, beeldvullend vanaf de bovenrand, sluier op 50% zwart. */
.mx-postbanner .page-title-inner {
    min-height: 300px;
}

.mx-postbanner__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: cover;
    object-position: 50% 0;
}

.mx-postbanner .title-overlay {
    background-color: rgba(0, 0, 0, .5);
}

/* De kop in de winkelbalk boven een vlootcategorie. Op de oude site stond daar een breadcrumb met
   de categorienaam; hier staat de H1 die elke archiefpagina hoort te hebben, en die moet dus de
   maat van die breadcrumb aannemen in plaats van die van een paginakop. */
.mx-archive-title {
    margin: 0;
    font-size: .85em;
    line-height: 1.4;
}

/* De specificatielijst in de samenvatting van een schip. Op de oude site stond die samenvatting in
   <p class="box-excerpt is-small"> met een <ul> erin, en dat is geen geldige HTML: de browser sloot
   de alinea en zette de lijst ERNAAST, zodat de specificaties niet de kleine letter van een
   samenvatting kregen maar de gewone. Deze site zet de lijst wel netjes binnen het samenvattingsblok,
   dus die maat moet hier met de hand terug. Zonder deze regel is een kaart in een vlootcategorie
   bijna honderd pixels korter dan op de oude site, met exact dezelfde woorden erin. */
.box-excerpt.is-small > ul {
    font-size: 1rem;
    line-height: 1.6;
}