/*
 * Material layout, adjusted for a site with no top bar (issue #1).
 *
 * Everything here is about Material's own geometry, which is why it is the one
 * stylesheet that does not move to theme/shared/: the selectors are Material's
 * chrome rather than the wiki's own furniture, and the Hugo theme lays itself
 * out instead of inheriting this.
 *
 * Loaded after theme/shared/fox-wiki.css - see extra_css in
 * templates/mkdocs.yml.tmpl.
 */

/*
 * The stub. partials/header.html explains why the element still exists: the JS
 * bundle throws if [data-md-component=header] is missing, and takes the palette
 * toggle, sidebar mounting and scroll-spy down with it.
 *
 * `position: static` matters as much as the zero height. Material's header is
 * sticky, and a sticky zero-height element still creates a containing context
 * and still participates in the scroll calculations that mountHeader feeds.
 */
.md-header.wiki-header--stub {
    position: static;
    height: 0;
    min-height: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    overflow: hidden;
}

/*
 * .md-sidebar's `top: 3rem` is a literal in Material's stylesheet, sized for
 * the header that is no longer drawn. mountSidebar overwrites it with an inline
 * style computed from the measured header height - which is now 0 - so this
 * only has to cover the frame before that runs, and the no-JS case.
 */
.md-sidebar {
    top: 0;
}

/* The content column runs to the top of the viewport, which is the point. */
.md-main__inner {
    margin-top: 0;
}

/*
 * Material already shows the sidebar's own title at screen+ - it is what the
 * site name in the left column has always been. What it hides unconditionally
 * is the mark inside that title, because the header carried one. With no
 * header, this is the only copy.
 *
 * Scoped to the desktop breakpoint deliberately. Below it the same element is
 * the drawer's header bar, where Material gives it a fixed 5.6rem height and
 * positions .md-logo absolutely inside it; restyling it at all widths pulls
 * that layout apart, and the drawer is the one place the title genuinely is a
 * bar. theme/shared/fox-wiki.css already puts `fill: none` back on the mark so
 * the stroked paths do not flood.
 */
@media screen and (min-width: 76.25em) {
    .md-nav--primary .md-nav__title .md-nav__button.md-logo {
        display: inline-block;
        position: static;
        width: 1.3rem;
        height: 1.3rem;
        margin: 0 0.35rem 0 0;
        padding: 0;
        vertical-align: -0.25rem;
    }

    .md-nav--primary .md-nav__title .md-nav__button.md-logo svg {
        width: 100%;
        height: 100%;
    }
}

/*
 * The drawer toggle. Hidden at screen+, where the sidebar is always visible;
 * below that it is the only way to reach the nav, because the hamburger it
 * replaces lived in the header.
 */
.wiki-drawer {
    display: none;
}

@media screen and (max-width: 76.1875em) {
    .wiki-drawer {
        position: fixed;
        top: 0.6rem;
        left: 0.6rem;
        z-index: 5;
        display: flex;
        width: 1.9rem;
        height: 1.9rem;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--hairline);
        border-radius: var(--radius-ui);
        background: var(--snow);
        color: var(--ink);
        cursor: pointer;
        font-size: 0.9rem;
        box-shadow: 0 2px 6px rgba(var(--shadow-ink), 0.12);
    }

    /* Once the drawer is open it covers the button, and Material's own overlay
       is what closes it again. */
    [data-md-toggle="drawer"]:checked ~ .wiki-drawer {
        display: none;
    }

    /* The content column has to clear the floating button. */
    .md-main__inner {
        margin-top: 2.6rem;
    }
}