header {display: flex; align-items: center; position:fixed; top:0; left:0; width:100%; height:var(--header-height); z-index:100; color:var(--neutral-100); transition:background-color 0.5s ease-out;}
header.sticky {background-color:var(--primary-500);}

.header-container {display:flex; justify-content: space-between; align-items: flex-end; border-bottom:1px solid var(--neutral-100);}

.logo {text-transform:uppercase;}
.logo-type {line-height:1; font-size:20px; letter-spacing:.4rem; margin-bottom:6px; font-weight:var(--fw-medium); white-space:nowrap;}
.logo-location {line-height:1; font-size:14px; margin-bottom:12px; letter-spacing:.1rem;}

nav {text-transform:uppercase; font-size: 1rem;}
nav ul {display:flex; list-style:none; column-gap:1.25rem; margin:0;}
nav ul li {margin-bottom:0;} 
nav ul li a {display:block;}
nav ul li a, nav ul li button {color:var(--neutral-100); text-decoration:none; white-space:nowrap; position: relative; padding-bottom:8px;}
nav ul li a::after {content:'';background:var(--neutral-100); height:0; width:100%; display:block; transition:height .3s ease-out; position:absolute; bottom:0; left:0;}
nav ul li a:hover::after,
nav ul li a.active::after {height:4px;}
nav ul li button {border:0; background:transparent; font:inherit; cursor:pointer;}

@media (min-width:400px) {
    .logo-type {font-size:22px; letter-spacing:.6rem;}
}

@media (min-width:768px) {
    .logo-type {font-size:26px; letter-spacing:.75rem;}
    .logo-location {font-size:16px;}
}



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

@media (max-width:730px) {
    body:has(header.show) {overflow:hidden; height:100dvh;}
    nav {font-size: 1.4rem; background:var(--primary-400); margin:0; position:absolute; z-index:-1; top:0; left:0; width:calc(100% + 2rem); margin-left:-1rem; display:grid; grid-template-rows:0fr; transition:grid-template-rows 500ms;}
    nav ul {flex-direction:column; margin:2rem; height:100dvh; padding-top:var(--header-height); }
    nav ul li {margin-bottom:1rem; border-bottom:1px solid var(--neutral-100);}
    nav ul li a::after {width:100px;}
    nav .nav-wrapper {overflow:hidden;}
    header.show nav {transition:grid-template-rows 500ms; grid-template-rows:1fr;}
}




/* -------------------------
   Hamburger
------------------------- */
.hamburger {width:48px; height:48px;margin-bottom: 12px; background-color:transparent; border-radius:50%; border:0; cursor:pointer; transition:var(--transition-default); display:flex; justify-content:center; align-items:center; flex-direction:column;}
.hamburger:hover {background-color:#ffffff50;}
.hamburger.is-active {/*background-color:#ffffff50;*/}
.hamburger.is-active:hover {background-color:#ffffff50;}
.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;}