/* === Mobile overrides (<= 600px) === */
@media (max-width: 600px) {

    /* text + general spacing */
    p {
        text-align: justify;
    }

    .content {
        margin-top: 0 !important;
    }

    /* fixed mobile nav (hidden until active) */
    .main-nav {
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        height: auto;
        display: flex;
        align-items: center;
        flex-direction: column;
        transform: translateY(-100%);
        transition: transform 200ms ease;
        z-index: 3;
    }

    .main-nav.active {
        transform: translateY(0);
    }

    .burger-menu,
    .burger-menu-container {
        display: block;
        z-index: 4;
    }

    .burger-container {
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        height: 4rem;
        display: flex;
        align-items: center;
        padding-left: 1rem;
        background-color: var(--nav-bg);
        color: var(--nav-fg);
        z-index: 2;
    }

    /* center theme picker buttons on mobile */
    .theme-picker {
        margin-left: 0;
        align-self: center;
        justify-content: center;
        margin-block: .5rem;
    }

    .wrapper {
        padding-top: 4rem !important;
    }

    /* hero image */
    #bwImage {
        float: none;
        margin: 0;
        margin-inline: auto;
        --img-width: 100%;
        filter: grayscale(100%);
        transition: none;
        z-index: 1;
    }

    #bwImage:hover {
        filter: grayscale(0);
    }

    #bwImage.img-larger {
        width: var(--img-width);
    }

    /* gallery: remove hover effects */
    .gallery-container img {
        box-shadow: none;
        transition: none;
    }

    .gallery-container img:hover {
        box-shadow: none;
        transform: none;
    }

    /* animations + video */
    .fadeInLeft {
        transform: translateX(-100%);
    }

    .video-container video {
        width: 100%;
    }

    @keyframes fadeInLeft {
        from {
            opacity: 0;
            transform: translateX(-100%);
        }

        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    @keyframes fadeOutLeft {
        from {
            opacity: 1;
            transform: translateX(0);
        }

        to {
            opacity: 0;
            transform: translateX(-100%);
        }
    }

    /* === Howtos page (mobile) === */

    /* make the flex container disappear so children flow vertically */
    .howtos-flex-layout {
        display: contents;
    }

    /* sidebar becomes a simple header block */
    .howto-sidebar {
        position: static;
        top: auto;
        height: auto;
        max-height: none;
        overflow: visible;
        width: 100%;
        max-width: none;
        min-width: 0;
        padding: 0.75rem 0;
        margin: 0 0 .5rem 0;
        box-shadow: none;
        border-radius: 0;
        border: none;
        background: transparent;
    }

    :root.footer-visible .howto-sidebar {
        height: auto;
        max-height: none;
    }

    /* topic buttons: horizontal scroll if needed */
    #howto-list {
        display: flex;
        flex-wrap: nowrap;
        gap: .5rem;
        overflow-x: auto;
        overflow-y: visible;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        padding-bottom: .25rem;
    }

    #howto-list button {
        font-size: 1em;
        padding: 0.25em 0.75em;
        min-width: 0;
        width: auto;
    }

    /* content area: no inner scrolling, just the page */
    .howto-content-area {
        width: 100%;
        max-width: none;
        min-width: 0;
        padding: 0.75rem;
        border-radius: 0;
        box-shadow: none;
        overflow: visible;
    }

    .wrapper:has(.howtos-page) {
        padding-inline: 1rem;
    }

    /* footer stays after content in normal flow */
    footer {
        position: static;
    }
}