/* ═══════════════════════════════════════════════════════════════════
   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.

   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; }
}