/* ============================================================
   Phone — GLOBAL styles
   Loaded phone-only via <link media="(max-width: 48em)"> in _Layout.
   Everything here applies at <= 48em automatically; no @media needed.
   Keep phone rules OUT of site.css — this file is the phone-global bucket.
   ============================================================ */

/* ---- Page shell ---- */
/* Trim the heavy desktop side padding on small screens */
main {
    padding-left: 1rem;
    padding-right: 1rem;
}

/* ---- Top navigation: collapse the menu bar into a hamburger drawer ---- */

/* nav becomes the positioning context for the drawer */
nav {
    position: relative;
}

/* Hamburger button — flat, matches the nav aesthetic (hidden on desktop via site.css) */
.nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;            /* sit at the far right of the bar */
    background: none;
    border: none;
    color: var(--ink-2);
    font-size: 1.25rem;
    line-height: 1;
    padding: 0.25em;
    cursor: pointer;
    transition: color 0.15s;
}
.nav-toggle:hover {
    color: var(--ink);
}

/* The collapsible group becomes a full-width vertical drawer below the bar */
.nav-collapse {
    display: none;                /* closed by default */
    position: absolute;
    top: 3.5rem;                  /* height of the nav bar */
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem 1rem 0.75rem;
    background: var(--bg-2);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--sh-card);
    z-index: 100;
}
nav.nav-open .nav-collapse {
    display: flex;
}

/* Stack each top-level item full width */
.nav-collapse > .nav-link,
.nav-collapse > .nav-menu {
    width: 100%;
    padding: 0.625rem 0.25rem;
    border-bottom: 1px solid var(--line-soft);
}
.nav-collapse .nav-menu-btn {
    width: 100%;
    text-align: left;
}

/* Nested dropdowns render inline (accordion), not as floating popovers */
.nav-collapse .nav-dropdown {
    position: static;
    min-width: 0;
    border: none;
    box-shadow: none;
    background: transparent;
    padding-left: 0.75rem;        /* indent submenu under its parent */
}
.nav-collapse .nav-dropdown-right {
    right: auto;
}
.nav-collapse .nav-dropdown-item {
    padding: 0.5rem 0.25rem;
}