/* Definitieve WeerHier-header. Dit bestand staat als laatste en is de centrale bron. */
.topbar{display:flex;align-items:center;gap:12px;min-height:82px;height:auto;padding:10px max(24px,calc((100vw - 1240px)/2));z-index:1000;isolation:isolate;pointer-events:auto}
.topbar>.brand{flex:none;margin:0;font-size:23px;font-weight:900;letter-spacing:-.7px}.topbar>.header-spacer{flex:1}.topbar>.menu-wrap{position:relative;flex:none;margin-left:0;justify-self:end}
.topbar>.back-board,.topbar>.header-install-link,.topbar>.geo-btn,.topbar>.geo-link,.topbar>.header-compass-link,.topbar .menu-btn{flex:none}
.topbar .menu-btn{display:flex;align-items:center;justify-content:center;margin:0}
.topbar a,.topbar button,.topbar .menu-wrap{position:relative;z-index:2;pointer-events:auto;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.topbar a,.topbar button{user-select:none;-webkit-user-select:none}
.main-menu{right:0;top:54px;width:280px;padding:6px;border-radius:16px}
.main-menu a{gap:10px;min-height:48px;padding:7px 9px;border-radius:10px}
.main-menu>a>.menu-icon,.main-menu>a>span{flex:0 0 34px;width:34px;height:34px;border-radius:10px}
.main-menu .menu-icon svg{width:26px;height:26px}
.main-menu b{font-size:13px;line-height:1.2}.main-menu small{margin-top:1px;font-size:9.5px;line-height:1.25}
.legacy-main-menu{position:fixed!important;left:12px!important;right:12px!important;top:68px!important;width:auto!important;max-height:calc(100vh - 80px);overflow:auto;background:#102c43!important;z-index:2147483647!important;box-shadow:0 16px 36px #0008}
.legacy-main-menu[hidden]{display:none!important}
@media(max-width:800px){
  .topbar{display:grid;grid-template-columns:minmax(112px,1fr) repeat(4,44px);grid-template-rows:auto auto;column-gap:6px;row-gap:9px;min-height:66px;padding:9px 12px}
  .topbar>.brand{grid-column:1;grid-row:1;min-width:0}.topbar>.header-spacer{display:none}
  .topbar>.header-install-link{grid-column:2;grid-row:1}.topbar>.geo-btn,.topbar>.geo-link,.topbar>.module-link:not(.geo-link){grid-column:3;grid-row:1}
  .topbar>.header-compass-link{grid-column:4;grid-row:1}.topbar>.menu-wrap{grid-column:5;grid-row:1;margin:0;justify-self:end}
  .topbar>.search-wrap{grid-column:1/-1;grid-row:2;width:100%;margin:0}
  .topbar>.header-install-link,.topbar>.geo-btn,.topbar>.geo-link,.topbar>.module-link:not(.geo-link),.topbar>.header-compass-link,.topbar .menu-btn{width:44px!important;min-width:44px!important;height:44px;padding:0!important;justify-content:center;border-radius:13px}
  .topbar:has(>.header-install-link[hidden]){grid-template-columns:minmax(112px,1fr) repeat(3,44px)}
  .topbar:has(>.header-install-link[hidden])>.geo-btn,.topbar:has(>.header-install-link[hidden])>.geo-link,.topbar:has(>.header-install-link[hidden])>.module-link:not(.geo-link){grid-column:2}
  .topbar:has(>.header-install-link[hidden])>.header-compass-link{grid-column:3}.topbar:has(>.header-install-link[hidden])>.menu-wrap{grid-column:4}
  .topbar.installed-header{grid-template-columns:minmax(112px,1fr) repeat(3,44px)}
  .topbar.installed-header>.geo-btn,.topbar.installed-header>.geo-link,.topbar.installed-header>.module-link:not(.geo-link){grid-column:2}
.topbar.installed-header>.header-compass-link{grid-column:3}.topbar.installed-header>.menu-wrap{grid-column:4}
  .main-menu{position:fixed;left:12px;right:12px;top:68px;width:auto;max-height:calc(100dvh - 80px);overflow:auto;padding:6px}
  .main-menu a{min-height:46px;padding:6px 8px}
}
@media(max-width:430px){
  .topbar{grid-template-columns:minmax(104px,1fr) repeat(4,42px);column-gap:5px;padding-left:10px;padding-right:10px}
  .topbar .brand{gap:7px;font-size:20px;font-weight:900;white-space:nowrap}.topbar .brand>span:last-child{display:inline}.topbar .brand-logo{width:36px;height:36px;flex:none}
  .topbar>.header-install-link,.topbar>.geo-btn,.topbar>.geo-link,.topbar>.module-link:not(.geo-link),.topbar>.header-compass-link,.topbar .menu-btn{width:42px!important;min-width:42px!important;height:42px}
  .topbar:has(>.header-install-link[hidden]){grid-template-columns:minmax(104px,1fr) repeat(3,42px)}
  .topbar.installed-header{grid-template-columns:minmax(104px,1fr) repeat(3,42px)}
}