/* ═══════════════════════════════════════════════════════════════════
   HEITONGBYMEOW — MOBILE NAV (standalone)
   ═══════════════════════════════════════════════════════════════════
   The working hamburger menu for pages that do NOT load css/site.css
   (the self-styled blog pages, en/de/fr). Pairs with /js/site.js,
   which toggles .nav--open on <header class="nav">.

   Canonical copy of these rules for site.css pages lives in
   css/site.css — keep the two in sync when the menu changes. The
   focus ring at the foot of this file is mirrored from site.css for
   the same reason, and is not part of the menu.

   IMPORTANT: link this AFTER the page's inline <style> so the
   media-scoped .nav__toggle { display:flex } outranks the page's
   unscoped .nav__toggle { display:none } in the cascade.
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 880px) {
    .nav__inner { flex-wrap: wrap; align-items: center; }
    .nav__links, .nav__lang { display: none; }
    .nav__toggle {
        display: flex;
        min-width: 44px; min-height: 44px;
        align-items: center; justify-content: center;
        margin: -10px -10px -10px 0;
    }
    /* working mobile menu — toggled by /js/site.js via .nav--open */
    .nav--open .nav__links {
        display: flex; flex-direction: column; align-items: flex-start;
        gap: .35rem; width: 100%; order: 3;
        padding: 1rem 0 .5rem; border-top: 1px solid var(--rule, #E5DBCC);
        margin-top: .9rem; font-size: 1.05rem;
    }
    .nav--open .nav__links a { display: block; padding: .55rem 0; width: 100%; }
    .nav--open .nav__lang { display: flex; width: 100%; order: 4; padding: .75rem 0 .35rem; }
    .nav--open .nav__lang button { padding: .35rem .5rem; }
}

/* ─── FOCUS ─────────────────────────────────────────────────────────
   Mirror of the focus ring in css/site.css. The blog pages are self-
   styled and never load site.css, so without this copy a keyboard has
   nothing to follow through their nav, body links or footer.
   Outside the media query above on purpose — this applies at every
   width. Fallback colour matches --ink in site.css, for the same
   reason the rules above fall back on --rule. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
    outline: 2px solid var(--ink, #2A2620);
    outline-offset: 3px;
}