/* Bilsemester.eu – CSS-baserad mobilmeny */
.bs-mobile-menu {
    display: none;
}

@container bilsemester-shell (max-width: 820px) {
    #meny {
        display: none;
    }

    .bs-mobile-menu {
        display: block;
        position: relative;
        width: 100%;
        margin: 0;
        padding: 0;
        background: #0b0b0b;
        border-bottom: 1px solid #303030;
        font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
        text-align: left;
        z-index: 1900;
    }

    .bs-mobile-menu__toggle {
        position: absolute;
        width: 1px;
        height: 1px;
        opacity: 0;
        pointer-events: none;
    }

    .bs-mobile-menu__button {
        display: flex;
        align-items: center;
        gap: 11px;
        min-height: 50px;
        margin: 0;
        padding: 0 16px;
        color: #fff;
        cursor: pointer;
        user-select: none;
    }

    .bs-mobile-menu__button:hover {
        background: #171717;
    }

    .bs-mobile-menu__icon {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 4px;
        width: 22px;
        height: 22px;
    }

    .bs-mobile-menu__icon span {
        display: block;
        width: 22px;
        height: 2px;
        background: #fff;
        border-radius: 2px;
        transition: transform .18s ease, opacity .18s ease;
    }

    .bs-mobile-menu__label {
        color: #fff;
        font-size: 15px;
        font-weight: 700;
        letter-spacing: .1px;
    }

    .bs-mobile-menu__panel {
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows .2s ease;
    }

    .bs-mobile-menu__panel > ul {
        min-height: 0;
        margin: 0;
        padding: 0;
        overflow: hidden;
        list-style: none;
    }

    .bs-mobile-menu__panel li {
        margin: 0;
        padding: 0;
        list-style: none;
        border-top: 1px solid #292929;
    }

    .bs-mobile-menu__panel a,
    .bs-mobile-menu__panel a:visited {
        display: block;
        width: 100%;
        padding: 12px 16px;
        background: #111;
        color: #e6e6e6 !important;
        font-size: 15px;
        line-height: 1.25;
        text-decoration: none !important;
    }

    .bs-mobile-menu__panel a:hover,
    .bs-mobile-menu__panel a:focus {
        background: #222;
        color: #fff !important;
    }

    .bs-mobile-menu__panel li.is-active > a {
        background: #1b1b1b;
        box-shadow: inset 4px 0 0 #9eabc3;
        color: #fff !important;
        font-weight: 700;
    }

    .bs-mobile-menu__toggle:checked ~ .bs-mobile-menu__panel {
        grid-template-rows: 1fr;
    }

    .bs-mobile-menu__toggle:checked + .bs-mobile-menu__button .bs-mobile-menu__icon span:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
    }

    .bs-mobile-menu__toggle:checked + .bs-mobile-menu__button .bs-mobile-menu__icon span:nth-child(2) {
        opacity: 0;
    }

    .bs-mobile-menu__toggle:checked + .bs-mobile-menu__button .bs-mobile-menu__icon span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
    }

    .bs-mobile-menu__toggle:focus-visible + .bs-mobile-menu__button {
        outline: 2px solid #fff;
        outline-offset: -3px;
    }
}

@supports not (container-type: inline-size) {
    @media (max-width: 844px) {
        #meny {
            display: none;
        }

        .bs-mobile-menu {
            display: block;
            position: relative;
            width: 100%;
            background: #0b0b0b;
            border-bottom: 1px solid #303030;
            font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
            text-align: left;
            z-index: 1900;
        }

        .bs-mobile-menu__toggle {
            position: absolute;
            width: 1px;
            height: 1px;
            opacity: 0;
        }

        .bs-mobile-menu__button {
            display: flex;
            align-items: center;
            gap: 11px;
            min-height: 50px;
            padding: 0 16px;
            color: #fff;
            cursor: pointer;
        }

        .bs-mobile-menu__icon {
            display: flex;
            flex-direction: column;
            gap: 4px;
            width: 22px;
        }

        .bs-mobile-menu__icon span {
            display: block;
            width: 22px;
            height: 2px;
            background: #fff;
        }

        .bs-mobile-menu__panel {
            display: none;
        }

        .bs-mobile-menu__toggle:checked ~ .bs-mobile-menu__panel {
            display: block;
        }

        .bs-mobile-menu__panel ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .bs-mobile-menu__panel li {
            list-style: none;
            border-top: 1px solid #292929;
        }

        .bs-mobile-menu__panel a,
        .bs-mobile-menu__panel a:visited {
            display: block;
            padding: 12px 16px;
            background: #111;
            color: #e6e6e6 !important;
            text-decoration: none !important;
        }
    }
}