header {background:var(--neutral-500); color:var(--neutral-900); padding:24px 0; position:sticky; top:0; z-index:100;}
header .container {position:relative; display:flex; justify-content:space-between; align-items:center;}
header .header-logo img {max-width:138px;}
.logo a {display: block;}
.logo img {max-width:100%; height:auto;}

nav ul {display:flex; margin:0; list-style:none; font-size:24px; font-family:var(--serifFontFamily); font-weight:var(--fw-medium);}
nav ul li a {color:var(--neutral-900); text-decoration:none;}
nav ul li a.active,
nav ul li a:hover {color:var(--secondary-400);}
nav ul ul {font-size:20px; font-weight:var(--fw-regular);}
nav ul ul li a {color:var(--neutral-900);}
nav ul ul li a.active,
nav ul ul li a:hover {color:var(--secondary-400);}

nav button.dropdown {color:var(--neutral-900); background:none; border:none; font-size:24px; font-family:var(--serifFontFamily); font-weight:var(--fw-medium); cursor:pointer; transition:var(--transition-default);}
nav button.dropdown:hover,
nav button.dropdown.active {color:var(--secondary-400);}

/* Hamburger */
.hamburger {z-index:4; align-self:start; background:var(--secondary-400); border-radius:7px; position:relative; display:block; letter-spacing:0; line-height:0.5rem; text-align:center; cursor:pointer; padding:8px 11px; transition:var(--transition-default);}
.hamburger .nav-icon {width:28px; margin:0 auto;}
.hamburger span {display:none;}
.hamburger .nav-icon::after, .hamburger .nav-icon::before, .hamburger .nav-icon div {background-color:var(--primary-700); border-radius:2px; content:''; display:block; height:3px; margin:6px 0; transition:all .2s ease-in-out;}
.hamburger .nav-icon:hover::after, .hamburger .nav-icon:hover::before, .hamburger .nav-icon:hover div {background-color:var(--primary-700);}
.hamburger.open .nav-icon div {scale:0;}
.hamburger.open .nav-icon::before {transform:translateY(9px) rotate(135deg); background-color:var(--primary-700);}
.hamburger.open .nav-icon::after {transform:translateY(-9px) rotate(-135deg); background-color:var(--primary-700);}
.hamburger:hover .nav-icon::before,
.hamburger:hover .nav-icon::after,
.hamburger:hover .nav-icon div {background-color:var(--neutral-100);}

/* Mobile Nav */
@media (max-width:879px) {      
    header {padding-bottom:0; height:135px;}
    header .container {flex-wrap:wrap;}
    header .header-logo {margin-bottom:34px;}
    .nav-container {flex:0 0 calc(100% + 4rem); margin-left:-2rem; background-color:var(--neutral-500); overflow:hidden; max-height:0; transition:max-height 0.4s ease; /* filter:drop-shadow(0 4px 8px rgba(0, 0, 0, 0)); */}
    .nav-container.show {max-height:1000px; transition:max-height 1s ease-in-out; /* filter:drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4)); */ box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);}

    nav ul ul {margin-top:1rem; margin-bottom:1rem;}
    nav ul {flex-direction:column;}
    nav > ul > li {margin:0;}
    nav > ul > li > a:hover,
    nav > ul > li > a.active {color:var(--secondary-400);}
    nav button.dropdown,
    nav > ul > li > a {/* background:var(--primary-400); */ padding:1rem 1rem 1rem 2rem; display:block;}
    nav ul .submenu-wrapper {/* background-color:var(--primary-700); */ overflow:hidden; max-height:0; transition:max-height 0.4s ease-in-out;}
    nav ul .submenu-wrapper.show {max-height:1000px;}
    nav ul ul li a {padding-left:2rem; padding-right:2rem; display:block;}
}


/* Desktop Nav */
@media (min-width:880px) {
    .hamburger {display:none;}

    nav ul {column-gap:4rem;}
    nav ul li {margin-bottom:0;}
    nav > ul > li > a {white-space:nowrap; background:none;}
    nav ul .submenu-wrapper {/* filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));*/box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15); position:absolute; width:100%; left:0; background-color:var(--neutral-500); bottom:-24px; translate:0 100%; border-bottom-left-radius:var(--border-radius-large); border-bottom-right-radius:var(--border-radius-large); overflow:hidden; max-height:0; transition:max-height 0.4s ease-in-out;}
    nav ul .submenu-wrapper.column-2 li {flex:0 0 40%;} 
    nav ul .submenu-wrapper.show {max-height:1000px;}
    nav ul ul {display:flex; flex-wrap:wrap; column-gap:2rem; row-gap:2rem; justify-content:center; padding:2rem;}
    nav ul ul li {position:relative;}
    nav ul ul li a {padding-left:2rem; display:inline-block;}
    nav ul ul li a::before {background:url(/images/arrow-secondary-700.svg) no-repeat 50% 50%; content:''; position:absolute; top:0.3rem; left:0; width:20px; height:20px; background-size:contain; rotate:180deg; opacity:0; transition:var(--transition-default);}
    nav ul ul li a.active::before,
    nav ul ul li a:hover::before {opacity:1;}
}

/* Desktop Nav */
@media (min-width:1100px) {
    nav ul {column-gap:5rem;}
}