/* Main menu, wide screens: dropdowns + mega menu. Loaded with media=(min-width:1181px); site.js switches it off when the menu is too wide (html.nav-burger). */
.bar{flex-wrap:nowrap;column-gap:32px}
.brand.has-logo{flex:0 0 auto}
.bar{flex-wrap:nowrap}
.menu>li.menu-cta{margin-left:16px}
  .nav{order:2;margin-left:auto;align-self:stretch;display:flex;align-items:center}
  .menu{display:flex;align-items:stretch;align-self:stretch;gap:4px}
  .menu>li>a,.menu>li>.nolink{padding:10px 14px;white-space:nowrap}
  .menu>li{position:relative;display:flex;align-items:center}
  .menu>li.mega{position:static}
  .menu>li>.sub-toggle{width:22px;margin-left:-8px}
  .sub,.mega-panel{display:none;position:absolute;z-index:60;background:var(--dark-2);border:1px solid rgba(255,255,255,.1);border-radius:16px;box-shadow:0 24px 50px rgba(0,0,0,.45)}
  .menu>li>.sub{top:100%;left:0;min-width:240px;padding:8px}
  .sub .sub{top:-9px;left:100%;min-width:240px;padding:8px}
  .sub li{position:relative;display:flex;align-items:center}
  .sub li>a,.sub li>.nolink{flex:1}
  .menu li.open>.sub,.menu li.open>.mega-panel{display:block;animation:pop .18s ease}
  /* without JavaScript: plain hover / focus */
  html:not(.js) .menu li:hover>.sub,html:not(.js) .menu li:focus-within>.sub,
  html:not(.js) .menu li:hover>.mega-panel,html:not(.js) .menu li:focus-within>.mega-panel{display:block}
  .mega-panel{top:100%;left:0;right:0;padding:22px}
  .mega-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:0 20px}
  .mega-col{display:grid;grid-template-rows:auto 1fr;align-content:start;min-width:0}
  .mega-col ul a{padding:6px 10px}
  /* all columns share the same heading row, so the items start at the same height even when a heading wraps to 2 lines */
  @supports (grid-template-rows:subgrid){.mega-col{grid-row:span 2;grid-template-rows:subgrid}}
  @supports not (grid-template-rows:subgrid){.mega-head{min-height:calc(2 * 1.7em + 20px)}}
  .menu-btn{display:none}
.mbar{display:none}
@keyframes pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.lang-switch{margin-left:20px}