/* Opens the navigation on narrow screens. Only with JavaScript: without it, the navigation is simply always open. */
.hamburger-button {
    display: none;
    padding: var(--spacing-xs);
    color: var(--color-on-surface);
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.hamburger-button:focus-visible {
    outline: 2px solid var(--color-primary);
}

.hamburger-button__icon {
    display: block;
    width: 1.5rem;
    height: 1.5rem;
}

.js-enabled .hamburger-button {
    display: inline-block;
}

@media (min-width: 48rem) {
    .js-enabled .hamburger-button {
        display: none;
    }
}