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

/* ⛔ Het thema laat de regels van een uitschuifmenu invliegen: `.nav-anim > li { opacity: 0 }`, weer
   zichtbaar zodra magnific popup de klasse `mfp-ready` zet. Die plugin is niet overgezet, dus het
   menu schoof open als een leeg blauw vlak: de links stonden er, ze waren aan te klikken, en er was
   niets te zien - ook de sluitknop niet, dus een bezoeker kwam er alleen met de terugknop uit.
   Gemeten in de browser op 18 september 2026 (opacity 0 op elke <li>, de tekst wél in de opmaak).
   Geen script eromheen: een menu dat pas zichtbaar wordt als JavaScript draait, is precies wat hier
   misging. De selector telt een id en verslaat daarmee de regel van het thema. */
#main-menu.mx-mobile-sidebar .nav-anim > li {
    opacity: 1;
    transform: none;
}

/* Wit en groot, zoals op de oude site (daar 24 pixels wit op hetzelfde lichtblauwe paneel). Het
   thema geeft deze links buiten de popup om de donkergrijze tekstkleur van de pagina, en die valt
   op lichtblauw bijna weg. */
#main-menu.mx-mobile-sidebar .nav-sidebar > li > a {
    display: block;
    padding: .6em 0;
    font-size: 1.5rem;
    color: #fff;
}

/* De sluitknop staat rechtsboven in het paneel, op dezelfde plek als het menuknopje dat hem opende. */
#main-menu.mx-mobile-sidebar .nav-sidebar > li.nav-icon {
    text-align: right;
}

#main-menu.mx-mobile-sidebar .nav-sidebar > li.nav-icon > a {
    display: inline-block;
    padding: .2em .1em;
    font-size: 1.75rem;
    color: #fff;
}

/* De sociale iconen zitten in twee <li>'s, want de bovenbalk zet ze daar naast elkaar. Het thema
   kleurt zo'n icoon grijs (#999) en op dit lichtblauwe paneel viel het daarmee bijna weg; de
   scheidingslijnen eromheen maakten er bovendien twee lege regels van. Wit, zonder lijn, dicht op
   elkaar. Ze blijven op twee regels staan: de lijst is een flexkolom, en die maakt van elk item een
   blok - dat is geen fout maar de opmaak van het thema. */
#main-menu.mx-mobile-sidebar .nav-sidebar > li.html_topbar_right,
#main-menu.mx-mobile-sidebar .nav-sidebar > li.header-social-icons {
    border: 0;
}

#main-menu.mx-mobile-sidebar .nav-sidebar > li.html_topbar_right > a,
#main-menu.mx-mobile-sidebar .nav-sidebar > li.header-social-icons a {
    padding: .2em 0;
}

#main-menu.mx-mobile-sidebar i.social-icons,
#main-menu.mx-mobile-sidebar .social-icons a,
#main-menu.mx-mobile-sidebar .social-icons a i {
    /* Het thema zet dit icoon op 60% doorzichtig; naast twee dekwitte iconen las dat als een
       uitgeschakelde knop. */
    opacity: 1;
    color: #fff;
    font-size: 1.5rem;
}

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

/* ⛔ De selector noemt .section mee, en dat is geen opsmuk. Het thema kleurt elk donker vlak met
   `.section.dark { background-color: #666 }`, en dat zijn twee klassen tegen één: met alleen
   .mx-footer-section won het grijs en stond de hele footer van de site in grijs terwijl de
   instelling (en de oude site) blauw zeggen. Gemeten in de browser op 13 september 2026. */
.section.mx-footer-section {
    padding-top: 60px;
    padding-bottom: 60px;
    background-color: var(--mx-footer-bg, #0054a6);
}

/* ⛔ Geen negatieve ondermarge meer. De oude site trok de knop "Contact us" met -30px tegen de kop
   "Let us introduce ourselves" aan; de klant vroeg op 15 september 2026 om ruimte ertussen.
   CustomerFeedbackConventionTests bewaakt dat die -30px niet terugkomt. */
.mx-footer-heading-col {
    margin: 0 0 12px;
}

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

/* De kleuren van deze balk staan in app.css, bij de andere instelbare kleuren. */

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

.mx-slider {
    position: relative;
}

/* ⛔ Het thema houdt een carrousel die flickity nooit heeft aangeraakt in een horizontale
   schuifbalk: `.slider:not(.flickity-enabled) > * { display: inline-block !important }` plus
   `white-space: nowrap` en `overflow-x: scroll` op de carrousel zelf. Die regels dragen !important
   en zijn specifieker dan een enkele klasse, dus zonder de regels hieronder stonden alle vier de
   aanbevelingen op de homepage naast elkaar, half buiten beeld, en deed klikken op een bolletje
   zichtbaar niets. Gemeten in de browser op 13 september 2026. */
/* `overflow: hidden` haalt de schuifbalk van het thema weg (overflow-x: scroll) én knipt de dia af
   die het beeld uit schuift; met `visible` liep die dia over de sectie ernaast heen. */
.mx-slider.slider {
    overflow: hidden;
    white-space: normal;
    position: relative;
}

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

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

/* Een dia die een rij van het thema is, blijft een flexrij: anders werkt `align-center` niet meer
   en staat de aanbeveling links in beeld in plaats van in het midden, precies zoals het thema hem
   met flickity wél centreerde. */
.mx-slider > .row.mx-slider__slide.is-selected {
    display: flex !important;
}

/* ---------- Een dia schuift in beeld en de vorige schuift eruit ----------
   De dia die weggaat houdt .is-leaving en blijft nog een halve seconde staan; hij ligt zolang
   absoluut over de carrousel heen, zodat de hoogte meteen van de nieuwe dia is en de pagina niet
   springt. De selectors tellen drie klassen: de regel van het thema
   (`.slider:not(.flickity-enabled) > *`) draagt !important en telt er twee. */
.mx-slider > .mx-slider__slide.is-leaving {
    display: block !important;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    pointer-events: none;
    animation: mx-slide-out .45s ease forwards;
}

.mx-slider > .row.mx-slider__slide.is-leaving {
    display: flex !important;
}

.mx-slider > .mx-slider__slide.is-entering {
    animation: mx-slide-in .45s ease;
}

/* Terug bladeren (een bolletje links van het huidige) schuift de andere kant op. */
.mx-slider > .mx-slider__slide.is-leaving.is-back {
    animation-name: mx-slide-out-back;
}

.mx-slider > .mx-slider__slide.is-entering.is-back {
    animation-name: mx-slide-in-back;
}

@keyframes mx-slide-in {
    from { transform: translateX(100%); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}

@keyframes mx-slide-out {
    from { transform: translateX(0); opacity: 1; }
    to   { transform: translateX(-100%); opacity: 0; }
}

@keyframes mx-slide-in-back {
    from { transform: translateX(-100%); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}

@keyframes mx-slide-out-back {
    from { transform: translateX(0); opacity: 1; }
    to   { transform: translateX(100%); opacity: 0; }
}

/* Wie beweging heeft uitgezet, krijgt de dia zonder beweging: de vorige verdwijnt meteen in plaats
   van een halve seconde over de nieuwe heen te blijven liggen. */
@media (prefers-reduced-motion: reduce) {
    .mx-slider > .mx-slider__slide.is-leaving,
    .mx-slider > .row.mx-slider__slide.is-leaving {
        display: none !important;
    }

    .mx-slider > .mx-slider__slide.is-entering {
        animation: none;
    }
}

/* ⛔ Het thema zet midden in elke carrousel een draaiende laadcirkel en liet flickity die weghalen
   zodra de dia's stonden. Flickity is er niet meer, dus die cirkel bleef eeuwig draaien midden over
   de aanbevelingen heen (gezien op de homepage, 15 september 2026). Er laadt op deze site niets na,
   dus een laadcirkel is altijd een leugen. */
.loading-spin {
    display: none;
}

/* Het thema zet .flickity-page-dots absoluut onderaan de carrousel; onze bolletjes staan gewoon
   onder de zichtbare dia, want die dia bepaalt hier de hoogte.
   De selector noemt .mx-slider mee: de regel van het thema telt twee klassen
   (`.slider:not(.flickity-enabled) > *`), en tussen twee !important-regels wint de specifiekste.
   Met alleen .mx-slider__dots bleef het bij inline-block. */
.mx-slider > .mx-slider__dots {
    position: static;
    display: flex !important;
    /* ⛔ Het thema zet de bolletjes onder 550 pixels op `pointer-events: none`, want daar bladert
       flickity met een veegbeweging. Flickity is er niet meer en vegen kan hier niet, dus op een
       telefoon stonden er vier bolletjes die niets deden. */
    pointer-events: auto;
    justify-content: center;
    gap: .5rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}

.mx-slider__dots .dot {
    border: 0;
    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;
}

/* ---------- Socialefeed (LinkedIn-posts op de homepage) ---------- */

/* De posts stonden strak tegen het About us-blok aan: de foto van die sectie liep door tot aan de
   eerste kaart, zodat de twee onderdelen één blok leken. Een lijn plus ruimte scheidt ze, in
   dezelfde grijstint als de scheidingslijnen van het thema. De klassenaam staat in
   ShortcodeHelper.SocialFeedClass; SocialFeedShortcodeTests bewaakt dat die twee gelijk blijven. */
.mx-socialfeed {
    margin-top: 3rem;
    padding-top: 2.5rem;
    border-top: 1px solid rgba(0, 0, 0, .1);
    clear: both;
}

/* ---------- Foto's op een archief van materieel ---------- */

/* De materieelarchieven (/category_products/…) toonden elke foto op ware grootte onder elkaar:
   een liggende foto werd 745 pixels hoog, een staande nog hoger, en tussen foto en tekst zat
   niets. Eén vaste hoogte met de foto gecentreerd erin maakt van die stapel één rustige kolom,
   zonder de foto's bij te snijden. */
.mx-media-archive .entry-image {
    margin: 0 0 1.6rem;
}

.mx-media-archive .entry-image img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 420px;
    margin: 0 auto;
}

.mx-media-archive .article-inner {
    padding-bottom: 2rem;
}

/* ---------- Het overgezette overzicht "Maritime Equipment" ---------- */

/* ⛔ Dit blok staat als opgeslagen HTML in de pagina's /maritime-equipment/ en /our-fleet/: het
   komt uit een WordPress-plugin die niet mee is overgezet, dus ook zijn stijlblad ontbreekt. Het
   vak om de foto is 255 pixels hoog (inline style), maar de foto zelf hield haar eigen hoogte en
   liep er dus uit: 414, 182 en 432 pixels onder elkaar, waardoor de ene foto de volgende raakte en
   de rij er rommelig uitzag. Gemeten tegen de oude site op 13 september 2026; die rekte de foto
   plat tot precies 255 pixels. Hier past de foto in datzelfde vak zonder uitgerekt te worden. */
.ma_main_div {
    margin-bottom: 1.5rem;
}

.ma_main_div .ma_thumbnail {
    display: block;
    width: 100%;
    height: 255px;
    object-fit: cover;
}

@media (max-width: 549px) {
    .ma_main_div .ma_thumbnail {
        height: 160px;
    }
}

/* ---------- Fotogalerij van een stuk materieel ---------- */

/* De galerij van de oude site zette de grote foto linksboven in een vak van 400 pixels hoog, met
   de miniaturen ertegenaan. Bij een staande foto stond die dus links met een gat ernaast en bij
   een liggende raakte hij de miniaturen. De foto krijgt hier het hele vak (gecentreerd, hele foto
   in beeld) en de miniaturen staan er met ruimte onder. De selector noemt .mx-equipment mee omdat
   css/equipment.css ná dit stijlblad laadt. */
.mx-equipment .gallery {
    max-width: 760px;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem;
}

.mx-equipment .gallery__img {
    left: 0;
    right: 0;
    width: 100%;
    height: 400px;
    margin: 0 auto;
    object-fit: contain;
}

.mx-equipment .gallery__thumb {
    margin: 0;
    padding-top: 0;
}

.mx-equipment .gallery__thumb__img {
    width: 100px;
    height: 75px;
    object-fit: cover;
}

/* ---------- Categoriefilter boven een vlootcategorie ---------- */

/* Eén keuzelijst die meteen filtert: geen knop ernaast, want een filter dat pas na een tweede
   klik iets doet is op de oude site precies de reden dat niemand hem gebruikte. De keuzelijst
   navigeert; js/site.js doet dat op de change-gebeurtenis. */
.mx-category-filter {
    min-width: 210px;
    max-width: 100%;
    margin: 0;
}

.mx-category-filter-label {
    display: inline-block;
    margin: 0 .5rem 0 0;
    font-size: .85em;
    text-transform: uppercase;
}

/* ---------- Terugknop op een detailpagina ---------- */

.mx-back-link {
    display: inline-block;
    margin: 1.5rem 0 0;
    font-size: .85em;
    text-transform: uppercase;
}

.mx-back-link__arrow {
    margin-right: .35rem;
}

/* ---------- Het filter op de vlootpagina ---------- */

/* ⛔ De pagina "Our Fleet" komt als opgeslagen HTML uit WordPress mee, inclusief de opmaak van een
   filterplugin die niet is overgezet. Wat daarvan overbleef stond op 14 september 2026 zo op het
   scherm: een sorteerkeuze ("Default sorting"), een tweede sorteerkeuze, een knop "Apply Filter" en
   een laadlaag van 193 pixels wit die als een deken over het hele blok lag. De categoriekeuze die er
   wél in zit stond op `visibility: hidden` (de plugin maakte hem zelf zichtbaar), dus juist het
   enige bruikbare onderdeel was onzichtbaar. Gemeten in de browser, niet afgeleid uit de opmaak.

   Het hele blok blijft weg tot js/site.js het heeft opgeruimd en aangesloten (klasse
   mx-fleet-filter): een keuzelijst die zonder script niets doet, is erger dan geen keuzelijst. */
.wpfMainWrapper {
    display: none;
}

.wpfMainWrapper.mx-fleet-filter {
    display: block;
    margin: 0 0 1.5rem;
}

/* De dode sorteerkeuze van de winkel; die hoort hier niet en werkt ook niet. */
form.woocommerce-ordering {
    display: none !important;
}

/* De categoriekeuze weer zichtbaar. De plugin zette `visibility: hidden` op .wpfNotActive en haalde
   dat zelf weg; dat script is er niet meer, dus doen wij het. */
.mx-fleet-filter .wpfFilterWrapper,
.mx-fleet-filter .wpfFilterContent,
.mx-fleet-filter .wpfCheckboxHier,
.mx-fleet-filter select {
    visibility: visible !important;
}

.mx-fleet-filter select {
    max-width: 320px;
    margin: 0;
}

/* ---------- Photos of a parallax block stay visible ---------- */

/* ⛔ Het thema verbergt ELK element met een data-parallax-attribuut (`opacity: 0`) en laat zijn
   eigen script de klasse `parallax-active` erop zetten. Dat script is niet overgezet, dus die klasse
   kwam nooit, en daarmee was elke foto van een parallaxblok onzichtbaar terwijl de HTML, het bestand
   en de alt-tekst er gewoon stonden: het Marnex-logo in de brede strook van de homepage, de vier
   achtergrondfoto's van "We offer" en de hele kopfoto van Brokerage. Gemeten in de browser
   (opacity 0 op .section-bg), niet afgeleid uit de opmaak.

   Dit is dezelfde val als data-animate (zie js/site.js), maar dan zonder script: de regel hieronder
   heeft dezelfde specificiteit als die van het thema en staat in een later stijlblad, dus hij wint.
   Geen JavaScript eromheen, want een foto die pas zichtbaar wordt als een script draait, is precies
   wat hier misging. Het parallax-effect zelf vervalt; liever geen effect dan een onzichtbare foto. */
[data-parallax]:not(.parallax-active),
[data-parallax]:not(.parallax-active) .bg {
    opacity: 1;
}

/* ---------- Het filter boven het overzicht van Sale & Purchase ---------- */

/* Dezelfde regel als bij de vloot: een keuzelijst die zonder script niets doet, hoort er niet te
   staan. js/site.js zet de klasse erop zodra hij hem heeft aangesloten. */
.mx-item-filter {
    display: none;
    margin: 0 0 1.5rem;
}

.mx-item-filter.mx-item-filter-ready {
    display: block;
}

.mx-item-filter select {
    max-width: 320px;
    margin: 0;
}

.mx-item-filter .mx-category-filter-label {
    display: block;
    margin-bottom: .25rem;
}

/* ---------- Prijs, staat en beschikbaarheid van een stuk materieel ---------- */

/* Materieel deelt sinds 16 september 2026 de opmaak van een schip (PostView), dus deze drie velden
   staan in de samenvattingskolom naast de foto's. Ze krijgen een EIGEN klasse: .ma_price uit
   css/equipment.css is 20% breed, en dat was ooit bedoeld voor de oude tabelopmaak. */
.mx-item-price {
    margin: 0 0 .25rem;
}

.mx-item-condition {
    margin: 0 0 .75rem;
    color: var(--mx-ink-soft, #767676);
}

/* ---------- De foto van een kaart is echt een link ---------- */

/* ⛔ De foto in een kaart van de vloot en van Sale & Purchase staat in een <a>, maar het thema zet
   die foto op `position: absolute`. Daarmee is de link zelf 0 pixels hoog en kan er dus niet op
   geklikt worden: gemeten in de browser op 16 september 2026 ("element is not visible" bij een klik
   op de foto), terwijl de opmaak er foutloos uitziet. De klant vroeg juist om een klikbare foto.
   De link vult daarom zijn kader; .box-image is al relatief gepositioneerd. */
.box-image .image-none > a {
    position: absolute;
    inset: 0;
    display: block;
}

/* ---------- De kaart van [[map]] ----------
   ⛔ Hier stond een <iframe> van 425 bij 350 pixels, zoals WordPress hem had achtergelaten. Vaste
   maten: in een kolom van 290 pixels op een telefoon stak die kaart er dus uit. Het frame vult nu
   zijn kolom en houdt een vaste verhouding, zodat hij op elk scherm klopt zonder dat er een
   JavaScript aan te pas komt.

   ⛔ De kaart laadt bij de eerste paginaweergave, ongeacht de cookiekeuze (uitdrukkelijke wens van
   de gebruiker). Er staat hier dus geen laag overheen die pas na toestemming verdwijnt. */
.mx-map {
    margin-bottom: 1.5rem;
}

.mx-map__frame {
    display: block;
    width: 100%;
    /* Dezelfde verhouding als de oude kaart (425 bij 350), maar meebewegend met de kolom. */
    aspect-ratio: 425 / 350;
    border: 1px solid #000;
}

.mx-map__link {
    margin: .4rem 0 0;
    font-size: .85em;
}

/* ---------- Wat alleen op een telefoon fout gaat ----------
   Alles hieronder staat in één blok omdat het één oorzaak heeft: de overgezette pagina's en het
   thema zijn voor een breed scherm bedacht. Gemeten met Scripts/audit-mobile.py op 360, 390 en
   414 pixels; MobileLayoutConventionTests bewaakt de regels. */

@media (max-width: 549px) {
    /* ⛔ De container van het thema houdt op een telefoon 10 pixels ruimte aan, terwijl een `.row`
       erin 15 pixels naar buiten steekt (`margin: 0 -15px`, zodat de 15 pixels padding van de
       kolommen weer wegvallen). Een rij die rechtstreeks in een container staat werd daardoor 400
       pixels breed op een scherm van 390: de aanvraagblokken onder een schip en de 404-pagina
       staken er 5 pixels aan weerskanten uit en de pagina kon horizontaal schuiven. Gemeten met
       Scripts/audit-mobile.py op 390 en 414 pixels.
       Vijftien pixels ruimte laat de negatieve marge precies opgaan, dus de rij past weer én de
       tekst krijgt 5 pixels meer lucht van de schermrand. */
    .container {
        padding-inline: 15px;
    }

    /* ⛔ Een overgezette pagina draagt zijn eigen stijlblok uit WordPress mee, en dat rekent op twee
       kolommen naast elkaar: het citaatblok op /about-us/ schuift met `margin-left: -85px` over de
       foto ernaast heen. Vanaf 550 pixels staan die twee ook echt naast elkaar en hoort dat zo; op
       een telefoon staan ze onder elkaar en hing dat blok 20 pixels buiten beeld, met 85 pixels wit
       voor de rechterrand. `auto` en niet `0`, want een kolom die met `margin: 0 auto` gecentreerd
       staat (de aanbevelingen op de homepage) moet gecentreerd blijven; bij een blok dat zijn kolom
       vult rekent auto af op nul. Die regel uit de import noemt een id en verslaat elke klasse,
       vandaar !important. */
    .col > .col-inner {
        margin-inline: auto !important;
        margin-top: 0 !important;
    }

    /* ⛔ Het thema houdt elke productfoto in een vierkant vak (`.has-equal-box-heights .box-image`
       krijgt `padding-top: 100%`) zodat kaarten naast elkaar even hoog zijn. Deze overzichten staan
       in één kolom, ook op een breed scherm, dus er valt niets gelijk te trekken: onder elke
       liggende scheepsfoto bleef 117 pixels wit staan, en op een archief met zes schepen is dat een
       halve schermhoogte aan niets. Gemeten in de browser op 18 september 2026 (vak 355 hoog, foto
       238). De foto houdt zijn eigen verhouding; hij wordt dus niet bijgesneden. */
    .has-equal-box-heights .box-image {
        padding-top: 0 !important;
    }

    /* Zonder positie zou het vak nul hoog zijn: de foto en de link eromheen liggen er absoluut in.
       De link blijft de hele foto bedekken, want hij is hier het blok eromheen (zie de regel bij
       "De foto van een kaart is echt een link"). */
    .has-equal-box-heights .box-image .image-none > a,
    .has-equal-box-heights .box-image .image-none img {
        position: static;
        inset: auto;
    }

    /* Een staande foto werd door dat vierkante vak juist bijgesneden, en die snee valt weg zodra het
       vak zijn vaste hoogte kwijt is: de vier overzichten met staande foto's werden er 170 pixels
       langer van. De foto blijft daarom nooit hoger dan de kaart breed is - precies het vierkant dat
       het thema tekende - alleen zonder het lege stuk onder een liggende foto. */
    .has-equal-box-heights .box-image .image-none img {
        display: block;
        width: 100%;
        max-height: 90vw;
        object-fit: cover;
    }

    /* ⛔ Het vakje van de spamcontrole is 304 pixels breed en dat staat vast: Google en Cloudflare
       tekenen het in een iframe met een eigen maat. In de kolom van het contactformulier (290 breed
       op een telefoon van 360) stak het er dus uit, tot 6 pixels van de schermrand. Verkleinen is de
       enige manier die beide aanbieders ondersteunen; de hoogte moet mee, anders blijft het gat van
       het onverkleinde vakje staan. */
    .g-recaptcha,
    .cf-turnstile {
        height: 68px;
        transform: scale(.85);
        transform-origin: left top;
    }
}