/* Mobile hamburger menu — pure CSS checkbox toggle (render-mode independent).
   #csfp-nav-toggle is a visually hidden checkbox; <label class="w-nav-button">
   toggles it. When :checked at <=991px we override Webflow's
   ".w-nav[data-collapse='medium'] .w-nav-menu { display:none }" to reveal the menu.
   Desktop (>=992px) is unaffected: the show rule is breakpoint-scoped and
   .w-nav-button (the label) is hidden by csfp.css at >=992px. */

/* Visually hide the checkbox but keep it focusable/checkable and in the a11y tree.
   NOT display:none (would break :checked reachability and remove it from a11y). */
.csfp-nav-toggle {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media screen and (max-width: 991px) {

    #csfp-nav-toggle:checked ~ .w-nav-menu {
        display: block !important;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        width: 100%;
        float: none;
        z-index: 1000;
        background: #e12f29;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    }

    #csfp-nav-toggle:checked ~ .w-nav-menu .w-nav-link {
        display: block;
        width: 100%;
        max-width: none !important;
        text-align: left;
    }

    #csfp-nav-toggle:checked ~ .w-nav-menu .rz-menu,
    #csfp-nav-toggle:checked ~ .w-nav-menu ul.rz-menu {
        display: block;
        width: 100%;
    }

    #csfp-nav-toggle:checked ~ .w-nav-menu .rz-navigation-menu {
        flex-direction: column;
        width: 100%;
    }
}