header {background:#88AB1E; background:radial-gradient(circle, rgba(136,171,30,1) 55%, rgba(99,122,50,1) 100%); position:relative; z-index:10;}
.header-container {display:flex; flex-direction:column; position:relative; height:100px; align-items:center; justify-content:center;}

.logo {text-align:center; color:var(--neutral-100);}
header .logo {width:240px;}

nav {margin-top:0.5rem;}
nav ul {display:flex; list-style:none; gap:1rem; margin:0;}
nav ul li a, nav ul li button {color:var(--neutral-100); text-decoration:none; white-space:nowrap;}
nav ul li a.active {color:var(--neutral-900); text-decoration:none;}
nav ul li button {border:0; background:transparent; font:inherit; cursor:pointer;}
nav ul li button:hover {color:var(--blue-400);}

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

@media (max-width:500px) {
    body:has(header.show) {overflow:hidden; height:100dvh;}
    nav {background:var(--primary-500); margin:0; position:absolute; z-index:-1; top:100px; 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;}
    nav .nav-wrapper {overflow:hidden;}
    header.show nav {transition:grid-template-rows 500ms; grid-template-rows:1fr;}
    nav ul li a, nav ul li button {font-size:1.3rem;}
    nav ul li a.active {color:var(--primary-300);}
}

/* -------------------------
   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;}