/* One menu on every page (WS-697 (4); sitebuild/sitemap_menu.py, src/data/sitemap.json). site.css keeps the header's
   own rules (the navy bar, the groups, the phone sheet); hub-header.css adds Sign in and the search icon; this file adds
   the GPS group's panel: five columns, one per section (Countries, Risks, Goods & Chokepoints, Forecasts, My Strature),
   each with its plain line, the front door above them and the A to Z page below. On the phone the panel opens in the
   sheet as one column per section, headed. W-115: the bar stays 60px on the phone and 72px from 900px. Also the A to Z
   page's grid. Site tokens only; no inline styles (CSP). */
/* the bar's order: the mark, the menu (from 900px), the search icon, then Sign in, Get in touch and the menu button at
   the right; without the icon (its page not built) .mh-right takes the free space itself */
.mh3 .wrap{justify-content:flex-start}
.mh3 .mh-srch,.mh3 .mh-right{margin-left:auto}
.mh3 .mh-srch + .mh-right{margin-left:8px}
@media (min-width:900px){.mh3 .nav{flex:1 1 auto;min-width:0;margin-left:16px}}
.nav .mega-h{font:600 10.5px/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;opacity:.7;margin:14px 0 2px}
.nav .mega .nav-line{font-size:12.5px;line-height:1.4;opacity:.78;margin:0 0 4px;max-width:44ch}
.nav .mega ul{display:grid}
.nav .mega-top a{font-weight:600}
.nav .mega-foot{margin-top:8px;border-top:1px solid rgba(255,255,255,.18);padding-top:4px}
@media (min-width:900px){
  .mh3 .wrap{position:relative}
  .mh3 .nav > ul > li.nav-mega{position:static}
  .mh3 .nav .sub.mega{left:var(--g);right:var(--g);top:calc(100% - 11px);min-width:0;padding:16px 24px 14px}
  .mh3 .nav .mega-cols{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0 24px}
  .mh3 .nav .mega-h{color:var(--graphite);opacity:1;margin:10px 0 4px}
  .mh3 .nav .mega .nav-line{color:var(--graphite);opacity:1;max-width:none;padding-bottom:6px;margin-bottom:4px;
    border-bottom:1px solid var(--hair)}
  .mh3 .nav .mega a{white-space:normal;padding:6px 0}
  .mh3 .nav .mega-top{border-bottom:1px solid var(--hair);padding-bottom:6px}
  .mh3 .nav .mega-foot{border-top-color:var(--hair);margin-top:10px}
  /* the last two groups open leftwards, so no panel reaches past the screen's right edge */
  .mh3 .nav-g-advisory .sub,.mh3 .nav-g-about .sub{left:auto;right:-16px}
}
@media (min-width:900px) and (max-width:1099px){.mh3 .nav .mega-cols{gap:0 16px}}

/* ---------- the A to Z page ---------- */
.az-grid{display:grid;gap:8px 32px;grid-template-columns:minmax(0,1fr)}
@media (min-width:720px){.az-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1080px){.az-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.az-sec h2{font:500 22px/1.25 var(--serif);margin:18px 0 6px;padding-bottom:6px;border-bottom:1.5px solid var(--ink)}
.az-list{list-style:none;margin:0;padding:0}
.az-list li{border-bottom:1px solid var(--hair)}
.az-list a{display:block;padding:9px 0;color:var(--ink)}