header {position:sticky; top:0; left:0; z-index:2; width:100%; background:var(--neutral-100);}
header .container {padding-top:21px; padding-bottom:21px; height:112px;}
header .header-container {display:grid; grid-template-columns:1fr auto; align-items:center; height:100%;}
header .logo img {width:100%; max-width:230px; height:auto; transition:var(--transition-default);}

@media (min-width:576px) {
   header .logo img {max-width:270px;}
}

nav ul {display:flex; column-gap:1rem; list-style:none; margin:0;}
nav ul li {margin:0; position:relative;}
nav ul li a {text-decoration:none; color:var(--primary-700);}
nav ul li a:hover, nav ul li a.active {text-decoration:none; color:var(--primary-400);}
nav ul li a.active {font-weight:var(--fw-bold);}

/* Dropdown menu hidden by default */
nav ul ul {display:none; position:absolute; top:calc(100% + 20px); right:0; background:var(--primary-700); flex-direction:column; padding:1.5rem; z-index:100; border-radius:9px; border-top-right-radius:0; box-shadow:0px 3px 6px rgba(0, 0, 0, 0.2);}
nav ul ul::before {content:""; position:absolute; top:-10px; right:0; width:0; height:0; border-left:10px solid transparent; border-bottom:10px solid var(--primary-700);}
nav ul ul li:not(:last-child) {margin-bottom:0.5rem;}

/* Dropdown links */
nav ul ul li a {color:var(--neutral-100); display:block; position:relative; padding-left:1.25rem;}
nav ul ul li a:hover {background:var(--primary-600);}
nav ul ul.show {display:flex;}
nav ul ul li a::before {content:'-'; position:absolute; top:0; left:0; width:1rem; height:1rem;}

/* Hamburger */
.hamburger {width:48px; height:48px; background:var(--primary-400); border-radius:50%; border:0; cursor:pointer; transition:var(--transition-default); display:flex; justify-content:center; align-items:center; flex-direction:column;}
.hamburger:hover,
.hamburger.is-active {background:var(--primary-700);}
.hamburger.is-active:hover {background:var(--primary-400);}
.hamburger .hamburger-line {width:24px; display:block; height:2px; border-radius:2px; background:var(--neutral-100); transition:var(--transition-default);}
.hamburger .hamburger-line:first-child {translate:0 -4px;}
.hamburger .hamburger-line:last-child {translate:0 4px;}
.hamburger.is-active .hamburger-line:first-child {translate:0 1px; rotate:45deg;}
.hamburger.is-active .hamburger-line:last-child {translate:0 -1px; rotate:-45deg;}

/* Mobile Nav */
@media (min-width:880px) {
    .hamburger-container {display:none;}
    nav ul ul {min-width:330px;}
}

@media (max-width:879px) {
    body:has(header.show) {overflow:hidden;}
    nav {background:var(--secondary-400); position:absolute; z-index:-1; top:-100dvh; left:0; width:100%; height:100dvh; padding:140px 2rem 2rem 2rem; transition:all 0.5s ease-out;}
    nav>ul {display:flex; flex-direction:column; opacity:0; transition:opacity 0.4s ease-out; transition-delay:0.5s;}
    nav>ul>li {margin-bottom:0.75rem;}
    nav>ul a {font-size:1.25rem;}
    nav ul a.dropdown:hover {color:var(--primary-700); cursor:default;}
    nav ul ul {display:block; margin-top:0.5rem; position:relative; top:0; right:auto; padding:0; background:none; box-shadow:none; padding-left:0;}
    nav ul ul::before {display:none;}
    nav ul ul li a {color:var(--primary-700); font-size:1rem;}
    nav.show {top:0;}
    nav.show>ul {opacity:1; transition-delay:0.5s; top:0;}
    nav.hiding>ul {opacity:0; transition-delay:0s;} 
    .nav-container {overflow: hidden;}
    nav ul ul li:not(:last-child) {margin-bottom:0.75rem;}
}