/* -------------------------
  Header
------------------------- */
#site-header {position:fixed; top:0; left:0; width:100vw; z-index:10; min-height:180px;}
#site-header::before {transition:opacity .5s ease-out; opacity:1; content:''; position:absolute; height:100%; z-index:-1; isolation:isolate; inset:0; 
background-color:var(--clr-neutral-100); /* background:linear-gradient(
        180deg,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 255, 1) 80%,
        rgba(255, 255, 255, 0) 100%); */}
#site-header  .header-top {background-color:var(--clr-primary-900); font-size:0.875rem; color:var(--clr-neutral-100); min-height:40px; display:flex; align-items:center;}
#site-header  .header-top ul {list-style:none; margin:0; display:flex; flex-wrap:wrap; column-gap:2rem;}
#site-header  .header-top ul a {color:var(--neutral-100);}
#site-header  .header-top ul a:hover {color:var(--clr-primary-400);}
#site-header  .header-top ul a span:last-child {display:none;}
@media (max-width: 400px) {
    #site-header  .header-top ul a span:first-child {display:none;}
    #site-header  .header-top ul a span:last-child {display:inline-block;}
}



#site-header .header-wrapper {display:flex; column-gap:1rem; justify-content:space-between; padding-top:22px;}
#site-header .header-logo {width:138px; transition:width .5s ease-out; position:realtive; z-index:101}
body.page-1069 #site-header {min-height:220px;}
body.page-1069 #site-header.sticky {min-height:180px;}
body.page-1069 #site-header .header-logo {width:205px;}
body.page-1069 #site-header.sticky .header-logo {width:138px;}

#site-header nav {font-weight:var(--fw-semibold); margin-top:28px;}
#site-header nav ul {display:flex;column-gap:1rem; list-style:none; margin:0;}
#site-header nav>ul {display:flex; column-gap: 2rem; list-style:none; margin:0;}
#site-header nav ul li a {color:var(--clr-primary-900);}
#site-header nav ul li a.active,
#site-header nav ul li a:hover {color:var(--clr-primary-400);}
#site-header nav ul li {position:relative;}
#site-header nav li a.dropdown {position:relative; padding-right:1rem;}
#site-header nav li a.dropdown::before {content:''; position:absolute; width:12px; height:6px; top:50%; right:0; background:url(/images/nav-arrow.svg) no-repeat 50% 50%; background-size: 12px auto;}
#site-header nav .dropdown-nav.show {display:flex;}
#site-header nav .dropdown-nav ul {flex-direction:column}
#site-header nav .btn {background-color:var(--clr-primary-700); color:var(--clr-neutral-100) !important;}
#site-header nav .btn:hover {background-color:var(--clr-secondary-400);}
.header-offset {padding-top:calc(var(--header-offset) + 68px);}


/* Hamburger */
.hamburger {width:48px; height:48px; background:var(--clr-primary-400); border-radius:50%; 
border:0; cursor:pointer; transition:var(--transition-default); display:flex; justify-content:center; 
align-items:center; flex-direction:column; position:relative; z-index:101;}
.hamburger:hover,
.hamburger.is-active {background:var(--clr-primary-900);}
.hamburger.is-active:hover {background:var(--clr-primary-400);}
.hamburger .hamburger-line {width:24px; display:block; height:2px; border-radius:2px; background:var(--clr-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;}


/* Desktop */
@media (min-width: 768px) {
    .hamburger-container {display:none;}
    #site-header nav .dropdown-nav {display:none; position:absolute; top:calc(100% + 20px); left:0; background-color:var(--clr-neutral-100); 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); width:240px; flex-wrap:wrap; gap:0.75rem 2rem;}
    #site-header nav .dropdown-nav li {margin-bottom:0.5rem; line-height:1.2;}
}

/* Mobile */
@media (max-width: 767px) {
    #site-header .header-wrapper {flex-wrap:wrap;}
    #site-header nav {font-size:22px; flex:0 0 100%; display:grid; grid-template-rows:0fr; transition:grid-template-rows 500ms;}
    #site-header nav ul {display:flex; flex-direction:column; row-gap:1rem; margin-bottom:3rem;}
    #site-header nav ul li:has(.btn) {margin-top:.75rem;}
    #site-header nav .dropdown-nav {display:none;}
    #site-header.show::before {height:130%;}
    #site-header nav .dropdown-nav ul {margin-bottom:.5rem; margin-left:1rem; margin-top:.5rem;}
    #site-header nav > div {overflow:hidden;}
    #site-header nav.show {grid-template-rows:1fr;}
}