/* ==========================================================
   VANARA HEADER
   File: assets/css/header.css
   ========================================================== */

:root{
    --header-height:82px;
    --header-radius:999px;
    --header-bg-scroll:rgba(11,33,24,.88);
    --header-border:rgba(255,255,255,.12);
    --header-text:#ffffff;
    --header-text-hover:#d9c18d;
    --header-shadow:0 14px 40px rgba(0,0,0,.20);
    --header-transition:.28s cubic-bezier(.22,1,.36,1);
}

.site-header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:1000;
    padding:18px 38px;
    background:transparent;
    color:#fff;
    transition:
        background-color var(--header-transition),
        box-shadow var(--header-transition),
        padding var(--header-transition),
        backdrop-filter var(--header-transition),
        -webkit-backdrop-filter var(--header-transition),
        border-color var(--header-transition);
}

.site-header__inner{
    width:min(1420px,100%);
    height:var(--header-height);
    margin:0 auto;

    display:grid;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    align-items:center;
    gap:28px;
}

.site-header__nav{
    display:flex;
    align-items:center;
    gap:clamp(22px,2.1vw,38px);
    min-width:0;
}

.site-header__nav--left{
    justify-content:flex-start;
}

.site-header__nav--right{
    justify-content:flex-end;
}

.site-header__link{
    position:relative;
    flex:0 0 auto;

    color:var(--header-text);
    text-decoration:none;

    font-family:"Lato",sans-serif;
    font-size:12px;
    font-weight:700;
    line-height:1;
    letter-spacing:.17em;
    text-transform:uppercase;

    transition:
        color var(--header-transition),
        opacity var(--header-transition);
}

.site-header__link:hover,
.site-header__link.is-active{
    color:var(--header-text-hover);
}

.site-header__link::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-9px;

    width:0;
    height:1px;

    background:var(--header-text-hover);
    transition:width var(--header-transition);
}

.site-header__link:hover::after,
.site-header__link.is-active::after{
    width:100%;
}

.site-header__logo{
    position:relative;
    z-index:2;

    display:flex;
    align-items:center;
    justify-content:center;

    width:104px;
    height:104px;

    transition:
        width var(--header-transition),
        height var(--header-transition);

    color:inherit;
    text-decoration:none;
}

.site-header__logo img{
    display:block;

    width:104px !important;
    height:104px !important;
    max-width:104px !important;
    max-height:104px !important;

    object-fit:contain;

    transition:
        width var(--header-transition),
        height var(--header-transition),
        transform var(--header-transition),
        opacity var(--header-transition);
}

.site-header__logo:hover img{
    transform:scale(1.035);
}

.site-header__booking{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;

    min-width:158px;
    height:46px;
    padding:0 24px;
    margin-left:4px;

    border:1px solid rgba(217,193,141,.62);
    border-radius:999px;

    background:rgba(179,139,71,.12);
    color:#fff;
    text-decoration:none;

    font-family:"Lato",sans-serif;
    font-size:11px;
    font-weight:700;
    line-height:1;
    letter-spacing:.18em;
    text-transform:uppercase;

    transition:
        background var(--header-transition),
        color var(--header-transition),
        border-color var(--header-transition),
        transform var(--header-transition);
}

.site-header__booking:hover{
    background:#b38b47;
    color:#173b2d;
    border-color:#b38b47;
    transform:translateY(-2px);
}

.site-header__menu-button{
    display:none;

    width:50px;
    height:50px;
    margin-left:auto;
    padding:0;

    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:6px;

    border:0;
    background:transparent;
    color:#fff;
    cursor:pointer;
}

.site-header__menu-line{
    display:block;
    width:25px;
    height:2px;
    border-radius:999px;
    background:currentColor;
}

/* Scrolled state */

.site-header.is-scrolled{
    padding-top:10px;
    padding-bottom:10px;

    background:rgba(11,33,24,.86);
    box-shadow:var(--header-shadow);

    backdrop-filter:blur(22px);
    -webkit-backdrop-filter:blur(22px);

    border-bottom:1px solid rgba(255,255,255,.06);
}

.site-header.is-scrolled .site-header__inner{
    height:70px;
}

.site-header.is-scrolled .site-header__logo{
    width:88px;
    height:88px;
}

.site-header.is-scrolled .site-header__logo img{
    width:88px !important;
    height:88px !important;
    max-width:88px !important;
    max-height:88px !important;
}

/* Keep the navigation visible at every scroll position */

.site-header.is-hidden{
    transform:none !important;
}

/* Protect the homepage hero from unrelated inherited colors */

.hero .title{
    color:#fff;
}

.hero .title em{
    color:var(--cream,#f7f4ee);
}

/* Tablet / mobile */

@media (max-width:1100px){

    .site-header{
        padding:14px 18px;
    }

    .site-header__inner{
        height:72px;
        grid-template-columns:1fr auto 1fr;
        gap:12px;
    }

    .site-header__nav{
        display:none;
    }

    .site-header__logo{
        grid-column:2;
        width:84px;
        height:84px;
        justify-self:center;
    }

    .site-header__logo img{
        width:84px !important;
        height:84px !important;
        max-width:84px !important;
        max-height:84px !important;
    }

    .site-header__menu-button{
        display:flex;
        grid-column:3;
        justify-self:end;
    }

    .site-header.is-scrolled{
        padding-top:8px;
        padding-bottom:8px;
    }

    .site-header.is-scrolled .site-header__inner{
        height:64px;
    }

    .site-header.is-scrolled .site-header__logo{
        width:72px;
        height:72px;
    }

    .site-header.is-scrolled .site-header__logo img{
        width:72px !important;
        height:72px !important;
        max-width:72px !important;
        max-height:72px !important;
    }
}

@media (max-width:520px){

    .site-header{
        padding-left:14px;
        padding-right:14px;
    }

    .site-header__logo{
        width:76px;
        height:76px;
    }

    .site-header__logo img{
        width:76px !important;
        height:76px !important;
        max-width:76px !important;
        max-height:76px !important;
    }

    .site-header__menu-button{
        width:46px;
        height:46px;
    }

    .site-header.is-scrolled .site-header__logo{
        width:66px;
        height:66px;
    }

    .site-header.is-scrolled .site-header__logo img{
        width:66px !important;
        height:66px !important;
        max-width:66px !important;
        max-height:66px !important;
    }
}

/* Accessibility */

.site-header a:focus-visible,
.site-header button:focus-visible{
    outline:2px solid #d9c18d;
    outline-offset:4px;
}

@media (prefers-reduced-motion:reduce){

    .site-header,
    .site-header *,
    .site-header *::before,
    .site-header *::after{
        transition-duration:.01ms !important;
    }
}