header {padding-top:1rem;}

.header-container {display:grid; grid-template-columns:205px 1fr; row-gap:1rem;}

header ul {list-style:none;}
header ul li {margin-bottom:0;}

.header-links>ul {display:flex; font-size:20px; gap:0.5rem; justify-content:flex-end; margin:0; align-items:center;}
.header-links>ul li a {color:var(--primary-300);}
.header-links>ul li a[href^="tel:"] {font-weight:var(--fw-bold);}
.header-links>ul li a:hover {color:var(--primary-900);}
.header-links .btn {font-size:14px; padding:0.25rem 1rem; background:var(--primary-300); color:var(--neutral-100);}
.header-links>ul li a i {font-size:22px; translate:0 1px;}

.header-container nav {grid-column:1/-1; padding-top:1rem;}
.header-container nav {font-size:22px; border-top:1px solid var(--neutral-400);}
.header-container nav>.container>ul {display:flex; margin:0; column-gap:1rem;}
.header-container nav>.container>ul li {position: relative;}
.header-container nav>.container>ul li a { color:var(--neutral-400);}
.header-container nav>.container>ul li a:hover, .header-container nav>.container>ul li a.active {color:var(--primary-300);}
.header-container nav ul ul {font-size:18px; }
.header-container nav li a.dropdown {position:relative; padding-right:1rem;}
.header-container 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;}


/* Dropdown links */
.header-container nav ul ul li a {color:var(--neutral-400); display:block; position:relative; white-space:wrap;}
.header-container nav ul ul li a:hover {background:var(--primary-600);}
.header-container nav .dropdown-nav.show {display:flex;}

@media (min-width:1080px) {
    .header-container nav {font-size:18px;}
    .header-container nav ul ul {font-size:16px;}
}

@media (min-width:1166px) {
    .header-container nav {font-size:20px;}
    .header-container nav ul ul {font-size:17px;}
}

@media (min-width:1254px) {
    .header-container nav {font-size:22px;}
    .header-container nav ul ul {font-size:18px;}
}


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

/* desktop Nav */
@media (min-width:1080px) {
    .header-container {grid-template-columns:240px 1fr;}
    .hamburger-container {display:none;}
    .header-container nav .container {width:auto; margin:0; padding:0;}
    .header-container nav .container ul {justify-content:flex-end;}
    .header-container nav .dropdown-nav {display:none; position:absolute; top:calc(100% + 20px); left:0; background:var(--primary-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;}
    .header-container nav .dropdown-nav ul {margin-bottom:0; }
    .header-container nav .dropdown-nav.sub-nav-wide ul {flex:0 0 calc(50% - 1rem);}
    .header-container nav .dropdown-nav ul li:not(:last-child) {margin-bottom:0.5rem;}
    .header-container nav .dropdown-nav.sub-nav-wide {width:600px;}
}

/* Mobile Nav */
@media (max-width:1079px) {
    body:has(header.show) {overflow:hidden; height:100vh;}

    .hamburger-container {justify-items:flex-end;}
    .header-container {grid-template-columns:205px 1fr min-content; gap:1rem}

    .header-container .header-links {order:2; z-index:2; align-content:center;}
    .header-container .header-links .btn {display:none;}
    .header-container .logo {order:2; z-index:2;}
    .header-container .hamburger-container {order:3; z-index:2;}
    .header-container nav {order:4; position:absolute; top:0; top:-100vh; left:0; width:100%; padding-top:120px; height:100dvh; background:var(--primary-100); transition:all 0.5s ease-out; z-index:1}
    .header-container nav .container>ul {flex-direction:column; opacity:0; margin-top:1rem; transition:opacity 0.4s ease-out; transition-delay:0.5s; margin-bottom:2rem;}
    .header-container nav .container>ul>li {margin-bottom:0.5rem;}
    .header-container nav>.container>ul li a {white-space:unset;}
    .header-container nav .dropdown-nav {display:none; column-gap:1rem;}
    .header-container nav .dropdown-nav ul {margin:0.5rem 0 0.5rem 0;}
    .header-container nav .dropdown-nav li {margin:0 0 0.5rem 0;}
    .header-container nav .dropdown-nav.sub-nav-wide ul {flex:0 0 calc(50% - 1rem);}
    .header-container nav.show {top:0;}
    .header-container nav.show .container {position: relative;}
    .header-container nav.show::before {content:''; position:absolute; top:120px; left:0; width:100%; height:1.4rem; background: #ECECF5;
background: linear-gradient(180deg,rgba(236, 236, 245, 1) 27%, rgba(236, 236, 245, 0) 100%); z-index:1;}
    .header-container nav.show>.container>ul {opacity:1; transition-delay:0.5s; top:0;}
    .header-container nav.hiding>.container>ul {opacity:0; transition-delay:0s;} 
    .header-container nav.show>.container {overflow-y:scroll; height:100%;}
}

@media (max-width:580px) {
    .header-container nav ul ul {column-gap:0; margin:0;}
    .header-container nav ul ul.sub-nav-wide li {flex:0 0 100%;}
}

@media (max-width:575px) {
    .header-container {grid-template-columns:205px 1fr; gap:0; row-gap:1rem}
    .header-container .header-links {order:1; grid-column: 1/-1;}
    .header-container nav .dropdown-nav {flex-wrap:wrap;}
    .header-container nav .dropdown-nav.sub-nav-wide ul {flex:0 0 100%; margin-bottom:0;}
    .header-container nav .dropdown-nav.sub-nav-wide ul:last-child {margin-bottom:0.5rem;}
    .header-container nav .dropdown-nav.sub-nav-wide ul li:last-child {margin-bottom:0;}

  
}