/* Measured against the original mobile menu: 32px high, five equal links. */
.xlcm-bottom-nav { display: none; }

@media screen and (max-width: 767px) {
    body.xlc-has-mobile-nav {
        --xlcm-nav-height: 32px;
        --xlcm-nav-inset: env(safe-area-inset-bottom, 0px);
        padding-bottom: calc(var(--xlcm-nav-height) + var(--xlcm-nav-inset)) !important;
    }
    body.xlc-has-mobile-nav.xlc-mobile-live { padding-bottom: 0 !important; }
    body.xlc-has-mobile-nav .back-to-top { bottom: calc(var(--xlcm-nav-height) + var(--xlcm-nav-inset) + 12px); }
    .xlcm-bottom-nav {
        position: fixed;
        inset: auto 0 0;
        z-index: 900;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        height: calc(var(--xlcm-nav-height) + var(--xlcm-nav-inset));
        padding: 0 0 var(--xlcm-nav-inset);
        margin: 0;
        box-sizing: border-box;
        background: #009d35;
        overflow: hidden;
        isolation: isolate;
        box-shadow: 0 -1px 5px #0005;
    }
    .xlcm-bottom-nav a {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        min-width: 0;
        height: var(--xlcm-nav-height);
        padding: 0 4px;
        box-sizing: border-box;
        color: #fff !important;
        font: 700 13px/1 'Barlow Condensed', Barlow, Arial, sans-serif;
        text-decoration: none;
        white-space: nowrap;
        background: transparent !important;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        transform: none;
        -webkit-tap-highlight-color: transparent;
    }
    /* Skew only paint layers; the outer edges and hit areas remain rectangular. */
    .xlcm-bottom-nav a::before {
        content: '';
        position: absolute;
        inset: 0;
        transform: skewX(-29deg);
        background: #009d35;
        pointer-events: none;
    }
    .xlcm-bottom-nav a:first-child::before { left: -12px; }
    .xlcm-bottom-nav a:last-child::before { right: -12px; }
    .xlcm-bottom-nav a span { position: relative; z-index: 1; transform: none; }
    .xlcm-bottom-nav a:not(:last-child)::after {
        content: '';
        position: absolute;
        right: 0;
        top: 3px;
        height: 26px;
        width: 1px;
        background: #d5ffe2;
        transform: skewX(-29deg);
        pointer-events: none;
        z-index: 2;
    }
    .xlcm-bottom-nav a.is-active::before,
    .xlcm-bottom-nav a:active::before { background: #006b28; }
    .xlcm-bottom-nav a:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }
}

@media print {
    .xlcm-bottom-nav { display: none !important; }
}