/* Compact, symmetrical navigation for the RollCycling landing page */
.top-menu{
  box-sizing:border-box;
  width:min(94%,820px);
  margin:10px auto 0;
  padding:4px 8px;
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  align-items:center;
  background:rgba(13,31,49,.94);
  border:1px solid rgba(218,165,32,.34);
  border-radius:8px;
  box-shadow:0 3px 10px rgba(0,0,0,.14);
  position:sticky;
  top:6px;
  z-index:99999;
}
.top-menu a{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:30px;
  padding:2px 8px;
  color:#f5f5f5;
  text-decoration:none;
  text-align:center;
  font-size:13px;
  font-weight:600;
  letter-spacing:.15px;
  transition:color .18s ease,background-color .18s ease;
}
.top-menu a+a{border-left:1px solid rgba(255,255,255,.16);}
.top-menu a::after{content:"";position:absolute;left:22%;right:22%;bottom:1px;height:2px;background:rgba(218,165,32,.95);transform:scaleX(0);transition:transform .18s ease;}
.top-menu a:hover,.top-menu a:focus-visible{color:#f1c44f;background:rgba(255,255,255,.045);}
.top-menu a:hover::after,.top-menu a:focus-visible::after,.top-menu a[aria-current="page"]::after{transform:scaleX(1);}
.top-menu a:focus-visible{outline:2px solid rgba(241,196,79,.8);outline-offset:-2px;}
@media(max-width:620px){
  .top-menu{grid-template-columns:repeat(3,minmax(0,1fr));width:calc(100% - 16px);top:4px;padding:3px 6px;}
  .top-menu a{min-height:29px;font-size:12px;padding:2px 4px;}
  .top-menu a:nth-child(4){border-left:0;}
  .top-menu a:nth-child(n+4){border-top:1px solid rgba(255,255,255,.12);}
}