/* Phones: no bottom bar. The sections open from the ☰ button in the header (cadeeli-nav.js) as a
   panel under the header. Loaded last so it wins over the earlier bottom-bar rules; desktop is
   untouched. Colors follow the editorial palette (night blue, ivory, turquoise). */
.mobile-menu-toggle { display:none; }

@media (max-width:820px) {
  /* The space the bottom bar used to reserve goes back to the content and the map. */
  body.site-page { padding-bottom:env(safe-area-inset-bottom,0px); }
  html { scroll-padding-bottom:1rem; }
  body.site-page:not(.app-view-archive) .atlas-shell { height:calc(100svh - var(--site-header-h)); }
  #toast-region[popover] { inset:auto .65rem calc(1rem + env(safe-area-inset-bottom,0px)) .65rem; }
  #toast-region:not([popover]) { bottom:calc(1rem + env(safe-area-inset-bottom,0px)); }
  body.site-page .lang-menu-wrap { bottom:calc(1rem + env(safe-area-inset-bottom,0px)); }
  body.site-page .global-assistant-trigger { bottom:calc(1rem + env(safe-area-inset-bottom,0px)); }

  body.site-page .mobile-menu-toggle { display:inline-grid; place-items:center; flex:none; width:44px; height:44px; margin-left:.25rem; padding:0; border:1px solid rgba(255,255,255,.45); border-radius:99px; background:transparent; color:#fff; cursor:pointer; }
  body.site-page .mobile-menu-toggle:hover { border-color:#49d1d1; color:#49d1d1; }
  body.site-page .mobile-menu-toggle:focus-visible { outline:3px solid #49d1d1; outline-offset:2px; }
  body.site-page .mobile-menu-toggle svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
  body.site-page .mobile-menu-toggle .menu-close { display:none; }
  body.site-page.mobile-menu-open .mobile-menu-toggle .menu-lines { display:none; }
  body.site-page.mobile-menu-open .mobile-menu-toggle .menu-close { display:inline; }

  body.site-page .app-navigation,
  body.site-page.nav-collapsed .app-navigation { display:none; }
  body.site-page.mobile-menu-open .app-navigation,
  body.site-page.mobile-menu-open.nav-collapsed .app-navigation {
    position:fixed; z-index:80; inset:var(--mobile-menu-top,58px) 0 auto 0;
    display:flex; flex-direction:column; align-items:stretch; gap:0;
    width:100%; height:auto; max-height:calc(100svh - var(--mobile-menu-top,58px)); overflow-y:auto;
    padding:.35rem max(1rem,env(safe-area-inset-right,0px)) calc(.75rem + env(safe-area-inset-bottom,0px)) max(1rem,env(safe-area-inset-left,0px));
    border:0; border-bottom:1px solid #d6dcd7; background:#f6f5ef; box-shadow:0 22px 44px rgba(7,23,43,.22);
    transform:none; visibility:visible; pointer-events:auto;
  }
  body.site-page.mobile-menu-open .app-navigation .app-nav-item[data-app-view] {
    display:flex; flex:none; flex-direction:row; align-items:center; justify-content:flex-start; gap:.9rem;
    width:100%; min-width:0; min-height:52px; padding:.7rem .6rem; border:0; border-bottom:1px solid #e1e6e1; border-radius:0;
    background:transparent; box-shadow:none; color:#173c53; font:600 1rem/1.2 var(--font-sans); text-align:left;
  }
  body.site-page.mobile-menu-open .app-navigation .app-nav-item[data-app-view]:last-child { border-bottom:0; }
  body.site-page.mobile-menu-open .app-navigation .app-nav-item svg { display:block; width:22px; height:22px; flex:none; }
  body.site-page.mobile-menu-open .app-navigation .app-nav-item[aria-current="page"] { color:#07172b; background:#e4f2f0; box-shadow:inset 3px 0 #0b8188; }
  body.site-page.mobile-menu-open .app-navigation .app-nav-item:focus-visible { outline:3px solid #0d8793; outline-offset:-3px; }
  /* The menu lives inside the header's stacking context: lift the whole header above the floating
     controls (language circle z 70) and dim the page just below it; a tap outside closes it. */
  body.site-page.mobile-menu-open .site-header { z-index:90; }
  body.site-page.mobile-menu-open::after { content:''; position:fixed; z-index:89; inset:var(--mobile-menu-top,58px) 0 0; background:rgba(7,23,43,.38); }
}