/* A quiet plant-catalogue palette, shared by every mobile menu. */
@media screen and (max-width: 768px) {
    nav {
        --menu-header-height: calc(78px + env(safe-area-inset-top));
        --menu-edge: max(24px, 6vw);
        --menu-paper: #f1f2e8;
        --menu-ink: #263d2d;
        --menu-rule: #d8ddce;
        --menu-inset-left: max(var(--menu-edge), env(safe-area-inset-left));
        --menu-inset-right: max(var(--menu-edge), env(safe-area-inset-right));
    }

    body.mobile-menu-open nav {
        background: var(--menu-paper) !important;
        box-shadow: none !important;
    }

    body.mobile-menu-open::before {
        opacity: 1 !important;
        background: #f1f2e8;
        box-shadow: none !important;
    }

    body.mobile-menu-open nav .logo {
        position: relative;
        z-index: 3100;
    }

    .nav-controls {
        align-self: center;
        z-index: 3200 !important;
    }

    .menu-toggle,
    #mobile-menu.is-active {
        position: relative;
        top: auto;
        right: auto;
        flex: 0 0 50px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        margin: 0 !important;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        transform: none !important;
    }

    .menu-toggle .bar {
        width: 24px;
        height: 2px;
        margin: 0 !important;
        border-radius: 0;
        background: var(--menu-ink) !important;
    }

    #mobile-menu.is-active .bar {
        background: var(--menu-ink) !important;
    }

    #mobile-menu.is-active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg) !important;
    }

    #mobile-menu.is-active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg) !important;
    }

    nav .nav-links {
        display: flex !important;
        position: fixed !important;
        inset: var(--menu-header-height) 0 auto !important;
        width: 100% !important;
        height: calc(100vh - var(--menu-header-height)) !important;
        height: calc(100dvh - var(--menu-header-height)) !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 24px var(--menu-inset-right)
            max(24px, env(safe-area-inset-bottom))
            var(--menu-inset-left) !important;
        flex-direction: column;
        justify-content: flex-start !important;
        align-items: stretch !important;
        gap: 0 !important;
        border: 0;
        border-radius: 0;
        background: var(--menu-paper) !important;
        box-shadow: none !important;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        z-index: 3000 !important;
        color: var(--menu-ink);
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-color: #c8cec8 transparent;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-6px) !important;
        transition: opacity 160ms ease, transform 160ms ease,
            visibility 0s linear 160ms !important;
    }

    nav .nav-links.active {
        top: var(--menu-header-height) !important;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none !important;
        transition: opacity 160ms ease, transform 160ms ease,
            visibility 0s !important;
    }

    nav .nav-links::before,
    nav .nav-links::after {
        content: none;
        display: none;
    }

    nav .nav-links > li,
    nav .nav-links.active > li {
        width: 100% !important;
        min-height: 0 !important;
        flex: 0 0 auto;
        margin: 0 !important;
        padding: 0;
        justify-content: flex-start;
        border: 0;
        border-bottom: 1px solid var(--menu-rule);
        border-radius: 0;
        background: transparent;
        opacity: 1;
        transform: none;
        animation: none !important;
        transition: none;
    }

    nav .nav-links > li > a {
        position: relative;
        display: flex !important;
        width: 100%;
        min-height: 68px !important;
        margin: 0 !important;
        padding: 16px 20px 16px 0 !important;
        align-items: center;
        justify-content: flex-start;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        color: var(--menu-ink) !important;
        font-family: var(--display-serif, 'Source Serif 4', Georgia, serif);
        font-size: clamp(1.625rem, 7.2vw, 1.9375rem) !important;
        font-weight: 500 !important;
        font-optical-sizing: auto;
        line-height: 1.2 !important;
        letter-spacing: -0.018em !important;
        text-align: left;
        text-transform: none;
        text-decoration: none !important;
        overflow-wrap: anywhere;
        transition: color 140ms ease;
    }

    nav .nav-links > li > a:hover,
    nav .nav-links > li:not(.lang-switch):not(.mobile-menu-lang) > a.active {
        min-height: 68px;
        background: transparent;
        box-shadow: none;
        color: #32682d !important;
    }

    nav .nav-links > li > a.active {
        font-weight: 600 !important;
    }

    nav .nav-links > li > a.active::after {
        content: '';
        display: block !important;
        position: absolute;
        inset: 50% 2px auto auto;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: currentColor;
        transform: translateY(-50%);
    }

    nav .nav-links > .desktop-lang {
        display: none !important;
    }

    nav .nav-links > li.mobile-menu-lang {
        width: 100% !important;
        margin-top: auto !important;
        padding-top: 24px;
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
        gap: 24px !important;
        border: 0;
        border-radius: 0;
        background: transparent;
        order: 2;
    }

    nav .nav-links > .mobile-menu-lang > a {
        width: auto !important;
        min-width: 0;
        min-height: 44px !important;
        padding: 10px 0 !important;
        border-radius: 0;
        background: transparent;
        color: #5f6c5e !important;
        font-family: 'Open Sans', sans-serif;
        font-size: 0.9375rem !important;
        font-weight: 400 !important;
        letter-spacing: 0 !important;
    }

    nav .nav-links > .mobile-menu-lang > a.active {
        background: transparent;
        color: var(--menu-ink) !important;
        font-weight: 600 !important;
        text-decoration: underline !important;
        text-decoration-thickness: 1px !important;
        text-underline-offset: 6px;
    }

    nav .nav-links > .mobile-menu-lang > a::after,
    nav .nav-links > .mobile-menu-lang > span {
        display: none !important;
    }

    nav .nav-links a:focus-visible,
    .menu-toggle:focus-visible {
        outline: 2px solid #32682d;
        outline-offset: 4px;
    }
}

/* Keep both trucks in view in the mobile menu's full-width photo strip. */
@media screen and (max-width: 768px) and (min-height: 740px) {
    nav .nav-links::after {
        content: '';
        display: block;
        order: 1;
        flex: 0 0 auto;
        width: calc(100% + var(--menu-inset-left) + var(--menu-inset-right));
        height: auto;
        aspect-ratio: 3 / 1;
        margin: auto calc(-1 * var(--menu-inset-right)) 0 calc(-1 * var(--menu-inset-left));
        border: 0;
        border-radius: 0;
        background: url('../img/responsive/vrachtwagens-langs-rivier-1200.webp') center 60% / cover no-repeat;
        box-shadow: none;
        pointer-events: none;
    }

    nav .nav-links > li.mobile-menu-lang {
        margin-top: 0 !important;
        padding-top: 16px;
    }
}

@media screen and (max-width: 768px) and (max-height: 600px) {
    nav .nav-links > li > a {
        min-height: 56px !important;
        padding-block: 12px !important;
    }
}

@media screen and (max-width: 768px) and (prefers-reduced-motion: reduce) {
    nav .nav-links,
    nav .nav-links.active,
    .menu-toggle,
    .menu-toggle .bar {
        transition: none !important;
    }
}