/* Mobile-only bottom navigation.
 *
 * Hidden above 1024px, where the desktop sidebar and two-column layout are in
 * use, so on desktop this costs one hidden element and a stylesheet link.
 *
 * 1024px is deliberately the same breakpoint where the existing top mobile
 * navbar (.c-mobile-nav-wrapper in navbar.css) appears, so the two show and hide
 * together instead of leaving the layout in a half-mobile state.
 *
 * z-index 900 is below the sidebar (1000) and the lightboxes (2000), so the
 * drawer and every modal cover the bar rather than sitting under it.
 */

.c-bottom-nav {
    display: none;
}

@media (max-width: 1024px) {
    :root {
        --bottom-nav-h: 72px;
    }

    .c-bottom-nav {
        display: flex;
        align-items: stretch;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 900;
        background: var(--color-bg-base);
        border-top: 1px solid var(--color-border);
        /* Height was never actually set. --bottom-nav-h was declared here and
         * read only by the .o-main-content padding below, so the bar itself
         * collapsed to its content: one 28px glyph and no vertical padding,
         * about 29px tall. The 72px reserved underneath it was reserving space
         * for a bar that was a third of that size, which is what left the icons
         * sitting against the top edge. Binding the box to the same variable
         * makes the bar and its reserved space impossible to desync. */
        min-height: var(--bottom-nav-h, 72px);
        /* Home-indicator inset on notched phones. */
        padding-bottom: env(safe-area-inset-bottom, 0px);
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.25);
        /* Facebook-style hide-on-scroll. JS toggles .is-hidden; the bar animates
         * rather than snapping, so the transform needs a transition here. */
        transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
        will-change: transform;
    }

    /* Scrolled down: slide the whole box -- padding and shadow included -- below
     * the bottom edge. translateY(100%) is exactly its own rendered height, so
     * nothing of it (bar, shadow or the notch inset) is left peeking. Toggled by
     * the IIFE at the foot of includes/bottom-nav.php. */
    .c-bottom-nav.is-hidden {
        transform: translateY(100%);
    }

    @media (prefers-reduced-motion: reduce) {
        .c-bottom-nav {
            transition: none;
        }
    }

    /* Icon-only bar: no labels, so the whole column is the tap target. Each item
     * is 1/5 of the width and the full bar height, which keeps every control at
     * or above the 44px minimum even though the glyph itself is only 24px. */
    .c-bottom-nav__item {
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 0 2px;
        text-decoration: none;
        color: var(--color-text-secondary);
        background: none;
        border: none;
        font: inherit;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .c-bottom-nav__item i {
        font-size: 1.75rem;
        line-height: 1;
    }

    .c-bottom-nav__item--active {
        color: var(--color-primary);
    }

    /* Anchor for the live unread badge. .c-notif-badge is position:absolute and
     * offsets itself from this box (navbar.css). */
    .c-bottom-nav__icon {
        position: relative;
        display: flex;
    }

    /* The create action. It used to be a 46px div painted as a filled circle
     * with a coloured glow, which crowded a 72px row and read as colliding with
     * the bar's top edge. The circle now lives in the glyph instead
     * (ph-plus-circle), so the bar needs no fixed box, no border-radius, no
     * shadow and no colour override, and all five items share one baseline, one
     * height and one tint.
     *
     * Font size is deliberately not set here. .c-bottom-nav__item i already
     * sizes every glyph to 1.75rem, and an override was the other half of why
     * this one item sat higher than the rest. Colour likewise comes from
     * .c-bottom-nav__item (--color-text-secondary); a --color-primary here is
     * what made this one icon read as blue next to four grey ones.
     *
     * Do not reintroduce a sized circle here. The outline-plus glyph is optically
     * a little smaller than a solid ph-plus at the same 1.75rem, so it is
     * deliberately left un-bumped to stay on one scale with the other four. */
    .c-bottom-nav__create {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Keep the bar from covering the last post's action bar. .o-main-content is
     * a min-height:100vh flex column (layout.css), so bottom padding is safe
     * here and does not disturb the column layout. */
    .o-main-content {
        padding-bottom: calc(var(--bottom-nav-h, 72px) + env(safe-area-inset-bottom, 0px));
    }

    /* bottom-nav.php emits no markup for logged-out visitors, so the reserved
     * height above would be dead space at the foot of every guest page. Reset it
     * by detecting the bar's absence rather than by a body class, so the two
     * cannot drift apart when one file is edited without the other.
     *
     * Written as :not(:has(...)) rather than :has(...) on purpose. If a browser
     * lacks :has(), this whole rule is dropped and the padding above stands,
     * which costs a small gap; the inverse construction would have dropped the
     * padding and let the fixed bar cover the last rows of content. */
    body:not(:has(.c-bottom-nav)) .o-main-content {
        padding-bottom: 0;
    }
}