@media (max-width: 1099px) {
    .NavBarButton {
        display: block;
    }
    .searchAndButtonDiv {
        flex-shrink: 1;
        min-width: 0;
    }
    .menuDiv.visible {
        position: fixed;
        display: block;
        top: var(--navbar-height, 57px);
        left: 0;
        right: 0;
        max-height: calc(100vh - var(--navbar-height, 57px));
        overflow-y: auto;
        padding: 1rem;
        background-color: var(--bg-deep);
        border-top: 1px solid var(--border);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
        z-index: 20;
    }
    .menuDiv .sidebarOutlineContainer {
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid var(--border);
    }
    .categories {
        display: none;
    }
    /* mobile already lists every category in the hamburger menu's sidebar tree */
    .categoriesMoreButton, .categoriesDropdown {
        display: none !important;
    }
    /* two-row mobile header: "Devpedia" alone on its own full-width row, then a
       second row with the menu button on the left, the search bar filling the
       middle, and the language switcher on the right */
    .navBar {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .logo {
        flex: 1 0 100%;
        text-align: center;
        font-size: 1.4rem;
    }
    .searchAndButtonDiv {
        flex: 1 0 100%;
        justify-content: space-between;
    }
    .NavBarButton {
        order: -1;
    }
    .navBarSearch {
        order: 0;
        flex: 1 1 auto;
    }
    .langButton {
        order: 1;
    }
    /* the search results dropdown is anchored to searchAndButtonDiv's corner —
       now that the input sits in the middle of a full-width row, center it under
       the input instead of pinning it to the row's trailing edge */
    .searchResults {
        inset-inline-end: auto;
        left: 50%;
        transform: translateX(-50%);
    }
    .childList {
        grid-template-columns: 1fr;
    }
    .readerFloatingBar {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 15;
        padding: 0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom));
        background-color: var(--bg-deep);
        border-top: 1px solid var(--border);
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.4);
    }
    .readerFloatingBar .readerControl {
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
    }
    .readerFloatingBar .readerListenButton,
    .readerFloatingBar .readerRestartButton,
    .readerFloatingBar .readerPrimaryButton,
    .readerFloatingBar .readerReplayButton,
    .readerFloatingBar .readerPreviousButton,
    .readerFloatingBar .readerNextButton,
    .readerFloatingBar .readerRateButton {
        flex: 1 1 auto;
        justify-content: center;
    }
    /* The bar itself is pinned to the bottom of the screen here, so a menu opening downward (the
       desktop default) would land below the viewport -- open upward instead. */
    .readerFloatingBar .readerRateMenu {
        top: auto;
        bottom: calc(100% + 0.4rem);
    }
}

@media (max-width: 480px) {
    /* below this width, the search bar + language button no longer fit alongside
       their full label — drop the language name and keep only the 🌐 icon */
    .langLabel {
        display: none;
    }
}

@media (min-width: 1100px) {
    body {
        padding-inline: 320px;
    }
    /* the navbar "breaks out" of body's padding so it still spans the full width,
       edge to edge, above both sidebars, with its own content free to use that
       full width (categories centered across the whole page, not just the middle column) */
    .navBar {
        box-sizing: border-box;
        width: calc(100% + 640px);
        margin-left: -320px;
    }
    .leftSidebar, .rightSidebar {
        display: block;
        position: fixed;
        top: var(--navbar-height, 57px);
        bottom: 0;
        width: 320px;
        overflow-y: auto;
        padding: 1.25rem 1rem;
        background-color: var(--bg-deep);
    }
    .leftSidebar {
        left: 0;
        border-right: 1px solid var(--border);
    }
    .rightSidebar {
        right: 0;
        border-left: 1px solid var(--border);
    }
    /* Tighter category list on desktop only: base.css's padding is sized for the mobile
       touch target; desktop is mouse-driven, so it can sit closer together. */
    .leftSidebar .sidebarCategoryButton,
    .leftSidebar .sidebarSubjectButton,
    .leftSidebar .sidebarChapterButton {
        padding-block: 0.4rem;
    }
    /* top-level categories specifically were flagged as too spaced out from one
       another: base.css's margin: 0.1rem 0 is shared with subject/chapter
       buttons, so override it here rather than tighten it globally. Reopened a
       little (Louis, 23/08/2026) once the diamond markers made the rows feel
       cramped against each other again. */
    .leftSidebar .sidebarCategoryButton {
        margin-block: 0.3rem;
    }
    .leftSidebar .sidebarChildList,
    .leftSidebar .sidebarChapterList {
        margin-block: 0.15rem 0.25rem;
    }
}