/* Menus, tidied 2026-11-11 (inc/layout.php: Directory + Community on desktop · inc/appshell.php: the ☰ menu on phones and in the app).
   Loaded after app.css and appshell.css, so these rules win over the older menu styles there. */

/* ── Desktop: Directory, four even columns with fine dividers ─────────────────────────── */
@media (min-width:1021px){
  .mega.mega-v2{width:min(1060px,96vw);grid-template-columns:repeat(4,minmax(0,1fr));gap:0;padding:22px 10px 14px}
  .mega-v2 .mega-col{padding:0 22px;border-left:1px solid var(--line-2)}
  .mega-v2 .mega-col:first-child{border-left:0}
  .mega-v2 .mega-g + .mega-g{margin-top:18px}
  .mega-v2 .mega-col h4{margin:0 0 6px;color:var(--forest);letter-spacing:.07em}
  .mega-v2 .mega-col a{padding:5px 10px;line-height:1.35}
  .mega-v2 .mega-foot{justify-content:flex-start;gap:8px;margin:18px 14px 0;padding-top:12px}
  .mega-v2 .mega-foot > a:not(.btn){display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:10px;font-weight:600;font-size:14px;color:var(--ink-2)}
  .mega-v2 .mega-foot > a:not(.btn):hover{background:var(--paper);color:var(--forest)}
  .mega-v2 .mega-foot > a:not(.btn) i{color:var(--leaf)}
  .mega-v2 .mega-foot .btn{margin-left:auto}

  /* Community: two columns, three headings; opens under the button and grows to the left, so it never leaves the screen */
  .nav-sub.nav-sub-2{left:auto;right:0;transform:none;width:620px;padding:10px 8px 8px;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 6px}
  .nav-drop.open .nav-sub.nav-sub-2{display:grid}
  .nav-sub-2 .ns-col + .ns-col{border-left:1px solid var(--line-2);padding-left:6px}
  .nav-sub-2 h4{font:700 12px/1 var(--ui);text-transform:uppercase;letter-spacing:.07em;color:var(--forest);margin:8px 12px 6px}
  .nav-sub-2 a + h4{margin-top:16px;padding-top:14px;border-top:1px solid var(--line-2)}
  .nav-sub-2 a{padding:8px 12px;align-items:center}
  .nav-sub-2 small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}

/* ── Phones + app: the ☰ menu as eight rows that open one at a time ────────────────────── */
@media (max-width:1020px){
  .abar-menu-pop.amp-v2:not([hidden]){padding:6px 8px 8px}
  .amp-acc{border-bottom:1px solid var(--line-2)}
  .amp-acc > summary{display:flex;align-items:center;gap:12px;min-height:56px;padding:6px 8px;border-radius:14px;cursor:pointer;list-style:none;-webkit-tap-highlight-color:transparent}
  .amp-acc > summary::-webkit-details-marker{display:none}
  .amp-acc > summary:active{background:var(--paper)}
  .amp-acc > summary:focus-visible{outline:2px solid var(--leaf);outline-offset:-2px}
  .amp-ic{flex:none;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--mint);color:var(--forest);font-size:15px}
  .amp-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;line-height:1.3}
  .amp-tx b{font-size:15.5px;font-weight:650;color:var(--ink)}
  .amp-tx small{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .amp-chev{flex:none;font-size:12px;color:var(--muted);margin-right:4px;transition:transform .2s}
  .amp-acc[open] > summary .amp-chev{transform:rotate(180deg)}
  .amp-acc[open] > summary .amp-ic{background:var(--forest);color:var(--lime)}
  .amp-acc[open] > summary .amp-tx small{display:none}
  .amp-acc > .amp-grid{padding:2px 0 12px}
  .amp-v2 .amp-grid a[aria-current]{background:var(--mint)}
  .amp-v2 .amp-foot{border-top:0;margin-top:10px;padding-top:0}
  .amp-help{display:flex;align-items:center;justify-content:center;gap:8px;min-height:40px;margin-top:4px;border-radius:12px;color:var(--muted);font-size:13.5px;font-weight:600;text-decoration:none}
  .amp-help:active{background:var(--paper)}
}