@layer components{.sub-navigation{position:relative;display:flex;align-items:center;width:100%;margin-block:var(--size-500);padding:var(--size-400);border-radius:var(--size-100);background-color:var(--clr-primary-500)}.sub-navigation-mobile{display:flex;align-items:center;color:var(--clr-primary-200)}.sub-navigation-mobile::before{content:"\f0c9"}.sub-navigation-mobile.open::before{content:"\f00d"}.sub-navigation-menu{padding-left:var(--size-200);font-weight:var(--fw-bold)}.sub-navigation-menu.open{display:none}.sub-navigation-mobile.open .sub-navigation-menu{display:none}.sub-navigation-mobile.open .sub-navigation-menu.open{display:block}.sub-navigation-inner{display:none;align-items:center;gap:0}.sub-navigation-inner.open{position:absolute;z-index:10;inset:100% 0 auto 0;display:grid;width:100%;border-radius:0 0 var(--size-100) var(--size-100);background-color:var(--clr-primary-500)}.sub-navigation-item{padding:var(--size-300) var(--size-500)}.sub-navigation-item a{font-weight:var(--fw-bold)}.sub-navigation-item a:hover{text-decoration:underline;text-underline-offset:.3125rem}.sub-navigation-item.active{background-color:var(--clr-primary-100)}.sub-navigation-item.active:first-child{border-radius:var(--size-100) 0 0 var(--size-100)}.sub-navigation-inner.open .sub-navigation-item{padding:var(--size-400);border-top:1px solid var(--clr-primary-100)}.sub-navigation-inner.open .sub-navigation-item a{padding-block:1rem;font-weight:var(--fw-bold)}.sub-navigation-inner.open .sub-navigation-item.active:first-child{border-radius:0}.sub-navigation-inner.open .sub-navigation-item.active:last-child{border-radius:0 0 var(--size-100) var(--size-100)}@media (min-width:50rem){.sub-navigation{padding:0}.sub-navigation-mobile{display:none}.sub-navigation-inner{display:flex}}}