header {position:fixed; top:0; left:0; width:100%; z-index:100;}
header::after {background-color:#d73626; content:''; height:125px; position:absolute; top:0; left:0; width:100%; clip-path:polygon(0 0, 100% 0, 100% 72%, 0 95%); z-index:-1; background-image:url(../images/background-header.svg); background-repeat:no-repeat; background-position:0% 50%; background-size:200% auto;}
header .header-elements {height:var(--header-height); display:flex; align-items:center; justify-content:space-between;}
header .logo {max-width:100px; height:auto; margin-left:-1rem; margin-top:8px;}

@media (min-width:690px) {
    header .logo {max-width:110px; margin-top:28px;}
    header::after {background-size:cover; background-position:50% 50%; clip-path:polygon(0 0, 100% 0, 100% 72%, 0 100%);}
}

#nav-overlay {position:fixed; top:0; left:0; width:100vw; height:0; background:var(--clr-edn-red); opacity:0; z-index:110; pointer-events:auto; transition:opacity .5s ease-out;}
nav {margin-top:18px;}
ul.nav {font-family:var(--title-font); font-size:24px; display:flex; list-style:none; padding:0; margin:0; gap:14px;}
ul.nav a,
ul.nav button {color:var(--neutral-100); white-space:nowrap; border:0; color:var(--neutral-900); background:var(--clr-edn-yellow); padding:8px 10px 5px 10px; line-height:0.8; display:inline-block; transition:var(--transition-default);}
ul.nav button {font:inherit;}
ul.nav a:hover,
ul.nav a.active,
ul.nav button:hover:not(.bt-book-now) {background:var(--clr-edn-blue); color:var(--neutral-100);}
ul.nav a[data-clr='edn-teal'].active,
ul.nav a[data-clr='edn-teal']:hover {background:var(--clr-edn-teal);}
ul.nav a[data-clr='edn-blue'].active,
ul.nav a[data-clr='edn-blue']:hover {background:var(--clr-edn-blue);}
ul.nav a[data-clr='edn-red'].active,
ul.nav a[data-clr='edn-red']:hover {background:var(--clr-edn-red);}
ul.nav a[data-clr='edn-black'] {background:var(--neutral-900); color:var(--neutral-100); display:inline-flex; height:auto; column-gap:8px;}
ul.nav a[data-clr='edn-black']:hover {color:var(--clr-edn-yellow);}
ul.nav a[data-clr='edn-black']:hover span.icon span.line,
ul.nav a[data-clr='edn-black']:hover span.icon:before,
ul.nav a[data-clr='edn-black']:hover span.icon:after {background:var(--clr-edn-yellow);}
ul.nav button {cursor:pointer; appearance:none; font:inherit; -webkit-appearance:none; line-height:0.8;}
ul.nav button.bt-hamburger span.icon {margin-left:6px; scale:0.8;}

.hamburger-container {display:block; margin-top:12px;}
.hamburger {width:44px; height:44px;}
.hamburger {background-color:var(--clr-edn-yellow); cursor:pointer; color:var(--neutral-900); border:0; transition:var(--transition-default); display:flex; justify-content:center; align-items:center;}
    
.bt-hamburger span.icon {display:inline-block; width:18px; height:18px; position:relative; align-items:center; margin-top:-2px;}
.bt-hamburger span.icon span.line {content:""; width:18px; height:3px; border-radius:2px; transition:all 0.35s ease; background-color:var(--neutral-900); position:absolute; left:0; top:calc(50%); translate:0 -50%;}
.bt-hamburger span.icon::before,
.bt-hamburger span.icon::after {content:""; position:absolute; top:0; left:0; width:18px; height:3px; border-radius:2px; transition:all 0.35s ease; background-color:var(--neutral-900);}
.bt-hamburger span.icon::after {top:auto; bottom:0;}
.bt-hamburger.active span.icon::before,
.bt-hamburger:hover span.icon::before {transform:rotate(45deg) translateX(4px) translateY(-1px);}
.bt-hamburger.active span.icon::after,
.bt-hamburger:hover span.icon::after {transform:rotate(-45deg) translateX(4px) translateY(1px);}
.bt-hamburger.active span.icon span.line:first-child,
.bt-hamburger:hover span.icon span.line:first-child {transform:rotate(-45deg) translateX(-6px) translateY(1px); width:16px;}
.bt-hamburger.active span.icon span.line:last-child,
.bt-hamburger:hover span.icon span.line:last-child {transform:rotate(45deg) translateX(-6px) translateY(-1px); width:16px;}

header:has(.show) #nav-overlay {height:100dvh; opacity:0.8; }

/******************  ENABLE BOOKING NAV ****************** 
ul.nav ul {display:flex; margin:0; list-style:none; row-gap:0.5rem; flex-direction:column;}
nav ul li:has(.bt-book-now) > ul {display:none; position:absolute; margin-top:10px; list-style:none; padding:0; z-index:1000;}
*/


/* Mobile Nav */
@media (max-width:689px) {
    body:has(header.show) {overflow-y:hidden;}
    header.show nav {transform:translateX(0);}
    
    .nav-transition {transition:transform 0.3s ease-out;}

    .site-nav {position:fixed; top:0; right:0; z-index:120; height:100dvh; transform:translateX(100%); width:100%; max-width:480px;
    background:var(--clr-edn-red) url(../images/background-leaves-red.svg) no-repeat top 330px center; 
    background-size:auto calc(100dvh - 330px); margin-top:0; padding:37px 0 0 0; text-align: center;}
    .site-nav a.nav-logo {display: inline-block; margin:0 auto}
    .site-nav .nav-logo {display:block; margin-bottom:105px;}
    .site-nav .nav-logo img {margin:0 auto; max-width:260px;}
    .site-nav ul {flex-direction:column; align-items:center; gap:19px;}
    .site-nav #nav-close {display:flex; margin:0 42px 11px auto;}
    .site-nav ul.nav a {padding:16px 18px 13px 18px;}
    .site-nav ul li {transform:translateY(40px); opacity:0;}
    header.show .site-nav ul li {transform:translateY(0); opacity:1; transition:transform 0.4s ease-out, opacity 0.4s ease-out; transition-delay:.4s;}
    header.show .site-nav>ul>li:nth-child(2) {transition-delay:.6s;} 
    header.show .site-nav>ul>li:nth-child(3) {transition-delay:.8s;}
    header.show .site-nav>ul>li:nth-child(3)>ul>li:nth-child(1) {transition-delay:1s;}
    header.show .site-nav>ul>li:nth-child(3)>ul>li:nth-child(2) {transition-delay:1.2s;}
    header.show .site-nav>ul>li:nth-child(3)>ul>li:nth-child(3) {transition-delay:1.4s;}
    header.show .site-nav>ul>li:nth-child(3)>ul>li:nth-child(4) {transition-delay:1.6s;}

    /******************  ENABLE BOOKING NAV ****************** 
    .site-nav .nav-logo {margin-bottom:1rem;}
    .site-nav .nav-logo img {max-width:160px;}
    .site-nav ul.nav a,
    .site-nav ul.nav button {padding:16px 18px 13px 18px;}
    .site-nav ul.nav button {pointer-events:none; cursor:default;}
    ul.nav ul {row-gap:1rem;}
    nav ul li:has(.bt-book-now) > ul {margin-top:1rem; display:flex;}
    ul.nav .bt-hamburger span.icon {transform:rotate(90deg);}
    ul.nav .bt-hamburger span.icon::before {transform:rotate(45deg) translateX(4px) translateY(-1px);}
    ul.nav .bt-hamburger span.icon::after {transform:rotate(-45deg) translateX(4px) translateY(1px);}
    ul.nav .bt-hamburger span.icon span.line:first-child {transform:rotate(-45deg) translateX(-6px) translateY(1px); width:16px;}
    ul.nav .bt-hamburger span.icon span.line:last-child {transform:rotate(45deg) translateX(-6px) translateY(-1px); width:16px;}
        */

}

@media (max-width:420px) {
    .site-nav #nav-close {margin-right:20px;}
}

/* Desktop Nav */
@media (min-width:690px) {
    .hamburger-container {display:none;}
    .site-nav .nav-logo {display:none;}
    .site-nav #nav-close {display:none !important;}

    /******************  ENABLE BOOKING NAV ******************  
    nav ul li:has(.bt-book-now) > ul {display:flex; background:var(--clr-edn-yellow); padding:10px 10px 30px 10px; clip-path:polygon(0 0, 100% 0, 100% 0%, 0 0%);}
    nav ul li:has(.bt-book-now.active) > ul {clip-path:polygon(0 0, 100% 0, 100% 96%, 0 100%); transition: clip-path 0.3s ease-out;}
   */
}