header {position:fixed; top:50px; left:0; width:100%; z-index:10; transition:var(--transition-default);}
header .header-container {background:var(--neutral-100); border-radius:14px; padding:1rem 0.5rem 1rem 1rem; border:1px solid var(--neutral-300); display:flex; align-items:center; justify-content:space-between; margin-left:-1rem; margin-right:-1rem;}

header .header-container nav {font-size:20px;}
header .header-container ul {list-style:none; display:flex; margin-bottom:0;}
header .header-container ul li {margin-bottom:0;}
header .header-container ul:first-child a {color:var(--primary-400);}
header .header-container ul:first-child a.active,
header .header-container ul:first-child a:hover {color:var(--secondary-400);}
header .header-container ul:last-child {justify-content:center; gap:0.5rem; font-weight:var(--fw-bold); align-items:center;}
header .header-container ul:last-child a svg path {fill:var(--secondary-400); transition:var(--transition-default);}
header .header-container ul:last-child a:hover svg path {fill:var(--primary-400);}

body:has(.scroll-overlay.visible) header {top:20px;}
header .header-container {box-shadow:3px 3px 12px -2px rgba(0,0,0,0.35);}

.scroll-overlay {height:180px; opacity:0; background:var(--neutral-100); background:linear-gradient(180deg,rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%); width:100%; position:fixed; top:0; left:0; z-index:9; transition:opacity 0.9s ease;}
.scroll-overlay.visible {opacity:1;}


/* Mobile Nav */
@media (max-width:786px) {
    header .header-container {flex-wrap:wrap;}
    header .header-container .logo {flex:0 0 180px;}
    header .header-container nav {flex:0 0 100%;}
    header .header-container nav {display:grid; grid-template-rows:0fr; transition:grid-template-rows 500ms;}
    header .header-container nav .nav-container {overflow:hidden;}
    header.show .header-container nav {transition:grid-template-rows 500ms; grid-template-rows:1fr;}
    header .header-container ul:first-child {flex-direction:column; text-align:center; padding-top:3rem;}
    header .header-container ul li {margin-bottom:20px;}
}

/* Desktop Nav */
@media (min-width:787px) {
    header .header-container .logo {flex:0 0 240px;}
    header .header-container nav {flex:1 1 auto;}
    header .header-container ul:first-child {gap:1rem;}
    header .header-container ul:last-child {gap:1rem;}
    header .header-container {padding:1rem;}
    header .header-container .nav-container {display:flex; justify-content:flex-end; gap:1rem; margin-top:-1px;}
}

@media (min-width:860px) {
    header .header-container .nav-container {gap:2rem;}
    header .header-container ul:first-child {gap:2rem;}
}


/* -------------------------
   Hamburger
------------------------- */
.hamburger {border:0; width:44px; height:44px; background:transparent; display:flex; padding:0; justify-content:center; align-items:center; flex-direction:column; transition:var(--transition-default); position:relative; z-index:4; cursor:pointer;}
.hamburger .hamburger-line {width:24px; display:block; height:2px; background:var(--neutral-900); transition:var(--transition-default);}
.hamburger .hamburger-line:first-child {translate:0 -6px;}
.hamburger .hamburger-line:last-child {translate:0 6px;}
.hamburger.is-active .hamburger-line:first-child {translate:0 1px; rotate:45deg;}
.hamburger.is-active .hamburger-line:last-child {translate:0 -1px; rotate:-45deg;}
.hamburger:hover .hamburger-line {background:var(--secondary-400);}

@media (min-width:787px) {
    .hamburger-container {display:none;}
    header .header-container {padding:1rem 1.5rem;}
}