header,header nav.main-nav [popover]{box-shadow:3px 3px 3px -1px rgba(74,73,74,.5)}:root{--header-height:2.5rem;--nav-popover-default-height:14rem;--nav-popover-max-height:calc(100dvh - var(--header-height));--nav-popover-header-height:2rem}#nav-panel{--nav-popover-default-height:12rem}header{position:sticky;top:0;display:flex;gap:.3rem;background:#dfd;border-radius:6px;height:var(--header-height);padding:0 .1rem;width:100%;z-index:1000}header h1{font-size:1em;margin:0}header nav.main-nav>ul{--nav-text-color:#2c2e33;display:flex;gap:.2rem;list-style:none;margin:0;padding-inline:0.1rem}header nav.main-nav>ul>li>:is(button,a[href]){border:none;background:#fff;color:var(--nav-text-color);cursor:pointer;font-size:1rem;font-weight:700;padding:.25rem;text-decoration:none}header nav.main-nav>ul>li>:is(button,a[href]):focus,header nav.main-nav>ul>li>:is(button,a[href]):hover{text-decoration:underline;color:red;background:#fff;outline:#005fcc solid 2px}header nav.main-nav>ul>li>button::after{content:"▾";padding-left:0}header nav.main-nav [popover]{border:1px solid #999;margin:0 auto;height:min(var(--nav-popover-default-height),var(--nav-popover-max-height));padding:.5rem 2rem;top:var(--header-height);width:46em}header nav.main-nav [popover] a[href]:focus,header nav.main-nav [popover] a[href]:hover{text-decoration:underline;color:red;outline:#005fcc solid 2px;background-color:#f0f0f0}header nav.main-nav [popover] h2{font-size:1.1rem;margin:0}header nav.main-nav [popover] ul{font-size:1rem;list-style:none;margin:0;padding:0}header nav.main-nav [popover] ul ul>li{margin-top:.3rem}header nav.main-nav [popover]>ul{display:flex;flex-direction:column;flex-wrap:wrap;gap:1rem;height:calc(100% - var(--nav-popover-header-height))}header nav.main-nav [popover]>ul>li>a[href]{color:#000;font-weight:700}header button.mobile-menu-btn{display:none;background:#fff;border:.125rem solid #556270;padding:.25rem;cursor:pointer}header button.mobile-menu-btn div.icon{height:1.75rem;aspect-ratio:1;background:linear-gradient(#34495e 50%,#0000 0) top/100% 40% repeat-y}header button.mobile-menu-btn:focus{outline:#005fcc solid 2px;background-color:#f0f0f0}header #mobile-nav{border:none;inset:var(--header-height) 0 0;height:var(--nav-popover-max-height);margin:0;padding:0 1rem 2rem;width:20rem;background:#dfd;z-index:999}header #mobile-nav:not([popover]){display:none;position:fixed}header #mobile-nav:not([popover]).open,header #mobile-nav[popover]:popover-open{display:block}header #mobile-nav details ul li,header #mobile-nav>*{margin-bottom:.1rem}header #mobile-nav h2{font-size:1.1rem;margin-block:.7em .4em}header #mobile-nav details{background:#fff;margin-bottom:.5rem;border-radius:4px}header #mobile-nav details summary{background:#fff;padding:.5rem;cursor:pointer;position:relative;display:block;font-weight:700}header #mobile-nav details summary::before{content:"▼"}header #mobile-nav a:focus,header #mobile-nav details summary:focus{outline:#005fcc solid 2px;background:#f0f0f0}header #mobile-nav details[open] summary{background:#f0f0f0;margin-bottom:.5rem}header #mobile-nav details[open] summary::before{content:"▲"}header #mobile-nav details ul{padding-left:1rem}header #mobile-nav a{display:inline-block;padding:.2rem .5rem;width:100%}header :is(button,a,summary):focus{outline:#005fcc solid 2px;background-color:#f0f0f0}@media screen and (max-width:54rem){header{justify-content:space-between}header nav.main-nav{display:none}header button.mobile-menu-btn{display:inline-block}}@supports (-webkit-touch-callout:none) and (not (translate:none)){header #mobile-nav{transform:none;-webkit-overflow-scrolling:touch}header #mobile-nav details summary{-webkit-tap-highlight-color:transparent}}@media screen and (max-width:54rem) and (-webkit-min-device-pixel-ratio:1.5){header #mobile-nav:not([popover]){position:fixed;overflow-y:scroll;-webkit-overflow-scrolling:touch}}