/* Keep desktop dropdowns inside one continuous hover/click target. */
.header{overflow:visible}
.nav{align-self:stretch;align-items:center}
.navGroup{height:100%;align-items:center}
.navGroup>a{height:100%;display:flex;align-items:center;position:relative}
.navGroup>a::after{content:'⌄';font-size:12px;margin-left:6px;transform:translateY(-1px)}
.navGroup>.subnav{top:100%;z-index:100;pointer-events:auto}
.navGroup:hover>.subnav,.navGroup:focus-within>.subnav{display:block}

@media(max-width:900px){
 .nav{align-self:auto;align-items:stretch}
 .navGroup{height:auto}
 .navGroup>a{height:auto;justify-content:space-between}
 .navGroup:hover>.subnav,.navGroup:focus-within>.subnav{display:none}
 .navGroup.open>.subnav{display:block}
 .navGroup.open>a::after{transform:rotate(180deg)}
}