/* =========================================
   HEADER
========================================= */

.brand-logo{
    width:48px;
    height:48px;
    object-fit:contain;
    flex-shrink:0;
}

.site-header{
    position:absolute;
    top:0;
    left:0;
    right:0;
    z-index:500;
    display:flex;
    align-items:center;
    gap:26px;
    padding:22px clamp(18px,5vw,72px);
    color:#fff;
}

.brand{
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:900;
    line-height:1;
    text-decoration:none;
}

.brand-text{
    font-size:14px;
    letter-spacing:.2px;
    line-height:1;
}

.main-nav{
    margin-left:auto;
    display:flex;
    align-items:center;
    gap:26px;
    font-size:14px;
    font-weight:700;
}

.main-nav a{
    color:inherit;
    text-decoration:none;
    opacity:.92;
    transition:.2s;
}

.main-nav a:hover{
    opacity:1;
    color:#ffd5d0;
}

.nav-call{
    font-weight:800;
    font-size:13px;
    color:#fff;
    text-decoration:none;
}

.book-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:var(--red, #ef2f24);
    color:#fff;
    border-radius:999px;
    padding:12px 22px;
    font-weight:900;
    font-size:13px;
    text-decoration:none;
    box-shadow:0 10px 25px rgba(239,47,36,.25);
    transition:.25s;
    white-space:nowrap;
}

.book-btn:hover{
    background:var(--red-dark, #ba1913);
}

/* =========================================
   PRIVATE CHARTER PAGE HEADER
   This page does not have a dark hero behind
   the navigation, so use a solid light header.
========================================= */

.private-charter-page .site-header{
    position:relative;
    top:auto;
    left:auto;
    right:auto;
    min-height:88px;
    padding:18px clamp(18px,5vw,72px);
    background:#fff;
    color:#111;
    border-bottom:1px solid #ececec;
    box-shadow:0 4px 18px rgba(0,0,0,.05);
}

.private-charter-page .site-header .brand,
.private-charter-page .site-header .brand-text,
.private-charter-page .site-header .main-nav a,
.private-charter-page .site-header .nav-call{
    color:#111;
}

.private-charter-page .site-header .main-nav a:hover,
.private-charter-page .site-header .nav-call:hover{
    color:var(--red, #ef2f24);
}

.private-charter-page .site-header + main .tour-hero{
    padding-top:42px;
}

/* =========================================
   MOBILE
========================================= */

@media (max-width:920px){

    .site-header{
        gap:12px;
    }

    .main-nav,
    .nav-call{
        display:none;
    }

    .private-charter-page .site-header{
        min-height:76px;
    }
}

@media (max-width:560px){

    .site-header{
        padding:16px;
    }

    .brand-logo{
        width:42px;
        height:42px;
    }

    .brand-text{
        font-size:12px;
    }

    .book-btn{
        margin-left:auto;
        padding:10px 14px;
    }

    .private-charter-page .site-header + main .tour-hero{
        padding-top:30px;
    }
}