/* ========================================================================
   Mews Booking Buttons
   /child-theme/css/mews-booking-buttons.css
   ======================================================================== */

/* ── Design tokens ──────────────────────────────────────────────────────── */
:root {
    --mews-btn-bg:        #AA3914;
    --mews-btn-hover:     #16243f;
    --mews-btn-text:      #fff;
    --mews-accent:        #fff;
    --mews-ease:          0.25s cubic-bezier(0.4, 0, 0.2, 1);
}


/* ========================================================================
   MAIN BUTTON  (shared base — both wrap variants)
   ======================================================================== */
.mews-wrap.mews-wrap--float button, .mews-wrap.mews-wrap--float .mews-sub-btn {
    font-family: "Birthstone", Sans-serif;
    font-size: 24px;
    font-weight: 400;
    min-width: 186.36px;
    justify-content: center;
    text-transform: uppercase;
}

.mews-wrap.mews-wrap--float .mews-sub-btn {
    padding: 15px 20px;
}

.mews-main-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             3px;
    padding:         15px 20px;
    background:      var(--mews-btn-bg);
    color:           var(--mews-btn-text);
    border:          none;
    letter-spacing:  0.06em;
    text-transform:  uppercase;
    cursor:          pointer;
    white-space:     nowrap;
    transition:
        background   var(--mews-ease);
    user-select:     none;
    -webkit-user-select: none;
}

.mews-main-btn:hover,
.mews-main-btn:focus-visible {
    background:  var(--mews-btn-hover);
    box-shadow:  0 12px 40px rgba(0, 0, 0, 0.28);
    outline:     none;
}

/* Arrow icon — rotates when the wrap is open */
.mews-arrow {
    font-style:      normal;
    font-size:       11px;
    line-height:     1;
    color:           var(--mews-accent);
    transition:      transform var(--mews-ease);
    pointer-events:  none;
}

.mews-wrap.mews-open .mews-arrow {
    transform: rotate(180deg);
}


/* ========================================================================
   SUB-BUTTONS  —  shared visual base
   Applied to both <button> (widget mode) and <a> (link mode) elements.
   ======================================================================== */

.mews-sub-btn {
    display:        block;
    width:          100%;
    padding:        30px 10px;
    background:     var(--mews-btn-bg);
    color:          var(--mews-btn-text);
    letter-spacing: 0.04em;
    text-align:     center;
    cursor:         pointer;
    white-space:    nowrap;
    transition:
        background    var(--mews-ease),
        transform     var(--mews-ease);

    /* Reset <a> link defaults */
    text-decoration: none;
    box-sizing:      border-box;
}

.mews-sub-btn:hover,
.mews-sub-btn:focus-visible {
    background:   var(--mews-btn-bg);
    outline:      none;
    color: var(--mews-btn-text);
}

/* ── Link-mode indicator ─────────────────────────────────────────────── */
/* Covers both <a> (float context) and <button data-mews-href> (nav context) */
.mews-sub-btn--link {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
}

/* ── Standalone hotel button — auto width ───────────────────────────── */
.mews-hotel-btn {
    display:  inline-block;
    width:    auto;
}

a.mews-hotel-btn.mews-sub-btn--link {
    display: inline-flex;
}


/* ========================================================================
   SUB-GROUP  —  BASE hidden state
   ======================================================================== */

.mews-sub-group {
    display:        flex;
    flex-direction: column;
    gap:            8px;
    pointer-events: none;
    opacity:        0;
    transition:
        opacity    var(--mews-ease),
        transform  var(--mews-ease);
}

/* Stagger each sub-button's entrance */
.mews-sub-group .mews-sub-btn:nth-child(1) { transition-delay: 0.04s; }
.mews-sub-group .mews-sub-btn:nth-child(2) { transition-delay: 0.08s; }
.mews-sub-group .mews-sub-btn:nth-child(3) { transition-delay: 0.12s; }


/* ========================================================================
   VARIANT A — .mews-wrap--float
   Fixed, bottom-right corner. Sub-buttons expand UPWARD.
   CSS :hover works here because the wrap is never inside an <a> tag.
   ======================================================================== */

.mews-wrap--float {
    position:       fixed;
    bottom:         32px;
    right:          32px;
    z-index:        99999;
    display:        flex;
    flex-direction: column;
    align-items:    flex-end;
    gap:            10px;
}

/* Sub-group slides upward into view */
.mews-wrap--float .mews-sub-group {
    transform: translateY(12px);
}

/* Revealed on hover (desktop) or .mews-open (JS/mobile) */
.mews-wrap--float:hover     .mews-sub-group,
.mews-wrap--float.mews-open .mews-sub-group {
    opacity:        1;
    transform:      translateY(0) !important;
    pointer-events: auto;
}

/* Sub-buttons nudge left on hover */
.mews-wrap--float .mews-sub-btn:hover,
.mews-wrap--float .mews-sub-btn:focus-visible {
    transform: translateX(-4px);
}

@media (max-width: 767px) {
    .mews-wrap--float {
        bottom: 20px;
        right:  16px;
    }

    .mews-wrap--float .mews-main-btn {
        padding:   12px 18px;
        font-size: 13px;
    }

    .mews-wrap--float .mews-sub-btn {
        font-size: 12px;
        padding:10px 16px;
    }
}


/* ========================================================================
   VARIANT B — .mews-wrap--header  (span-based, lives inside nav <li><a>)

   Desktop (≥1025px): sub-buttons drop DOWNWARD as a floating panel,
                       revealed on :hover (CSS) or click (JS .mews-open).
   Mobile  (<1025px): sub-buttons are always visible in-flow beneath the
                       main button; clicking the main button collapses them
                       via JS .mews-collapsed.
   ======================================================================== */

.mews-wrap--header {
    position:       relative;
    display:        inline-block;
    vertical-align: middle;
    margin-top: -3px;
}

/* Reset the base sub-group's opacity/transition — not used for this variant */
.mews-wrap--header .mews-sub-group {
    opacity:    1;
    transition: none;
}

/* ── Desktop: floating dropdown on hover ─────────────────────────────── */
@media (min-width: 1025px) {
    .mews-wrap--header .mews-sub-group {
        display:        none;
        position:       absolute;
        top:            100%;
        padding-top:    8px;   /* visual gap lives here so hover stays active across it */
        right:          0;
        min-width:      180px;
        z-index:        9999;
        flex-direction: column;
        gap:            8px;
        pointer-events: none;
    }

    /* Revealed on :hover (primary) or JS .mews-open (click / keyboard) */
    .mews-wrap--header:hover .mews-sub-group,
    .mews-wrap--header.mews-open .mews-sub-group {
        display:        flex;
        pointer-events: auto;
    }

    .mews-wrap--header .mews-sub-btn:hover,
    .mews-wrap--header .mews-sub-btn:focus-visible {
        transform: translateX(-4px);
    }

    #menu-item-19592 a {
        padding: 0;
    }
}

/* ── Mobile: always-visible, in-flow sub-buttons ─────────────────────── */
@media (max-width: 1024px) {
    .mews-wrap--header {
        display:        flex;
        flex-direction: column;
        align-items:    stretch;
    }

    .mews-wrap--header .mews-sub-group {
        display:        flex;
        position:       static;
        pointer-events: auto;
        flex-direction: column;
        gap:            10px;
        margin-top:     8px;
    }

    /* Collapsed when JS adds .mews-collapsed on main button click */
    .mews-wrap--header.mews-collapsed .mews-sub-group {
        display: none;
    }

    .mews-wrap--header .mews-sub-btn {
        width: 100%;
        padding: 15px 20px;
    }

    #menu-item-19592 a {
        padding: 0 15px 15px 15px;
    }

    .mews-wrap--header .mews-main-btn {
        flex-direction: row-reverse;
        background: transparent;
        justify-content: space-between;
        padding: 15px 0;
    }
}

/*
 * The <a href="#"> that WordPress wraps the menu item in must not
 * intercept clicks or show an underline/colour change.
 */
li.menu-item > a:has(.mews-wrap--header) {
    pointer-events:  none;
    cursor:          default;
    text-decoration: none;
    color:           inherit;
}

/* Re-enable pointer events on our actual interactive elements */
li.menu-item > a:has(.mews-wrap--header) .mews-wrap--header,
li.menu-item > a:has(.mews-wrap--header) .mews-main-btn,
li.menu-item > a:has(.mews-wrap--header) .mews-sub-btn {
    pointer-events: auto;
}