/* ==========================================================================
   D-87228622 - "Book Now" CTA beside the burger in the home page splash header.
   Markup is in header.php, inside .homeSplash__burger-cont. Visibility, label
   and link are controlled from ACF Options -> Book Now Button.
   ========================================================================== */

.homeSplash .homeSplash__booknow {
    position: absolute;
    z-index: 2000;
    top: 30px;
    right: 90px;             /* 15px gutter + 60px burger + 15px gap */

    display: inline-flex;
    align-items: center;
    height: 60px;
    padding: 0 22px;

    font-family: acumin-pro, sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
    text-decoration: none;
    color: #FFFFFF;

    background-color: #8C7857;   /* same gold as the language switcher */
    transition: background-color .3s ease;
}

.homeSplash .homeSplash__booknow:hover,
.homeSplash .homeSplash__booknow:focus {
    color: #FFFFFF;
    text-decoration: none;
    background-color: #726047;
}

/* When the splash drawer opens, main.js puts .isActive on .homeSplash__burger-cont
   and switches it to position:fixed; right:270px. Hide the CTA so it isn't dragged
   across the screen with the container. */
.homeSplash .homeSplash__burger-cont.isActive .homeSplash__booknow {
    display: none;
}

/* Below 767px the splash burger and language switcher are hidden and navigation
   moves to the fixed .mobileNavBurger at the bottom-right. Keep the CTA in the
   header, in the space the burger has vacated, so it stays visible without
   covering the bottom burger. */
@media (max-width: 767px) {
    .homeSplash .homeSplash__booknow {
        top: 20px;
        right: 15px;

        height: 44px;
        padding: 0 16px;

        font-size: 12px;
    }
}