/* ============================================================
   MXUber header micro-interactions layer
   Global (loaded on every front page, after the chrome layer).
   Ink #0A0A0A, muted #545454, 200ms ease, no blue, no gradients.
   ============================================================ */

/* ------------------------------------------------------------
   1. Nav links — existing underline animation + muted-to-ink
      color transition (200ms)
   ------------------------------------------------------------ */
header .navbar-nav .nav-link {
    color: var(--mx-ink-2, #545454);
    transition: color 0.2s ease;
}

header .navbar-nav .nav-link:hover,
header .navbar-nav .nav-link:focus-visible,
header .navbar-nav .nav-link.active {
    color: var(--mx-ink, #0A0A0A);
}

/* ------------------------------------------------------------
   2. BOOK NOW — press feedback (scale 0.97 on active)
   ------------------------------------------------------------ */
header .mx-cta {
    transition: background-color 0.2s ease, transform 0.15s ease;
}

header .mx-cta:active {
    transform: scale(0.97);
}

/* ------------------------------------------------------------
   3. FOR BUSINESS — border transition, gray to black on hover
   ------------------------------------------------------------ */
header .ticket-btn:not(.mx-cta) {
    border: 1px solid var(--mx-border-2, #A6A6A6) !important;
    transition: border-color 0.2s ease, background-color 0.2s ease,
        color 0.2s ease, transform 0.15s ease;
}

header .ticket-btn:not(.mx-cta):hover {
    border-color: var(--mx-ink, #0A0A0A) !important;
}

header .ticket-btn:not(.mx-cta):active {
    transform: scale(0.97);
}

/* ------------------------------------------------------------
   4. Mobile menu — slide-in drawer from the right,
      300ms cubic-bezier; items stagger in
   ------------------------------------------------------------ */
@media (max-width: 1199.98px) {
    header .top-header .header-middle {
        top: 12px;
        bottom: 12px;
        left: auto;
        right: 12px;
        width: min(340px, calc(100vw - 24px));
        max-height: none;
        display: flex;
        flex-direction: column;
        border-radius: 16px;
        box-shadow: 0 30px 60px -25px rgba(0, 0, 0, 0.28);
        translate: none;
        transform: translateX(calc(100% + 24px));
        opacity: 1;
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
            opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
            visibility 0.3s;
    }

    header .top-header .header-middle.show {
        transform: translateX(0);
    }

    header .top-header .header-middle .menu-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 4px 6px 12px;
        padding-bottom: 12px;
        border-bottom: 1px solid #E9E9E9;
    }

    header .close-menu {
        width: 36px;
        height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        font-size: 20px;
        color: #0A0A0A;
        transition: background-color 0.2s ease;
    }

    header .close-menu:hover {
        background: #F6F6F6;
    }

    header .top-header .header-middle .navbar-nav {
        flex-direction: column;
        gap: 4px;
        padding: 0 6px 6px;
        overflow-y: auto;
    }

    header .top-header .header-middle .navbar-nav .nav-link {
        color: var(--mx-ink, #0A0A0A);
    }

    header .top-header .header-middle.show .navbar-nav .nav-link {
        animation: mx-drawer-item 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    header .top-header .header-middle.show .navbar-nav li:nth-child(1) .nav-link { animation-delay: 0.05s; }
    header .top-header .header-middle.show .navbar-nav li:nth-child(2) .nav-link { animation-delay: 0.08s; }
    header .top-header .header-middle.show .navbar-nav li:nth-child(3) .nav-link { animation-delay: 0.11s; }
    header .top-header .header-middle.show .navbar-nav li:nth-child(4) .nav-link { animation-delay: 0.14s; }
    header .top-header .header-middle.show .navbar-nav li:nth-child(5) .nav-link { animation-delay: 0.17s; }
    header .top-header .header-middle.show .navbar-nav li:nth-child(6) .nav-link { animation-delay: 0.20s; }
    header .top-header .header-middle.show .navbar-nav li:nth-child(7) .nav-link { animation-delay: 0.23s; }

    @keyframes mx-drawer-item {
        from {
            opacity: 0;
            translate: 16px 0;
        }
        to {
            opacity: 1;
            translate: 0 0;
        }
    }

    /* RTL: the drawer slides in from the left */
    body.rtl header .top-header .header-middle {
        right: auto;
        left: 12px;
        transform: translateX(calc(-100% - 24px));
    }

    body.rtl header .top-header .header-middle.show {
        transform: translateX(0);
    }

    body.rtl header .top-header .header-middle.show .navbar-nav .nav-link {
        animation-name: mx-drawer-item-rtl;
    }

    @keyframes mx-drawer-item-rtl {
        from {
            opacity: 0;
            translate: -16px 0;
        }
        to {
            opacity: 1;
            translate: 0 0;
        }
    }
}

/* ------------------------------------------------------------
   5. Header on scroll — subtle shadow under the border.
      Scroll-driven animation where supported (no JS needed);
      drawer-open acts as a visual fallback.
   ------------------------------------------------------------ */
@supports (animation-timeline: scroll()) {
    header::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: -1px;
        height: 1px;
        pointer-events: none;
        box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.16);
        opacity: 0;
        animation: mx-header-shadow linear both;
        animation-timeline: scroll(root);
    }

    @keyframes mx-header-shadow {
        0%, 0.2% {
            opacity: 0;
        }
        1%, 100% {
            opacity: 1;
        }
    }
}

@supports selector(:has(*)) {
    header:has(.header-middle.show)::after {
        opacity: 1;
    }
}

/* ------------------------------------------------------------
   6. Language dropdown — smooth open/close, rotating chevron
   ------------------------------------------------------------ */
header .language-btn {
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

header .language-btn:hover {
    border-color: var(--mx-ink, #0A0A0A) !important;
}

/* chevron (remixicon glyph set by the base theme's ::after) */
header .language-btn::after {
    display: inline-block;
    transition: transform 0.2s ease;
}

header .language-btn[aria-expanded="true"]::after {
    transform: rotate(180deg);
}

/* keep the menu rendered so it can transition in AND out */
header .language-dropdown .dropdown-menu {
    display: block;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    translate: 0 -6px;
    margin-top: 12px !important;
    padding: 8px !important;
    min-width: 150px;
    background: #ffffff !important;
    border: 1px solid #E9E9E9 !important;
    border-radius: 14px;
    box-shadow: 0 22px 44px -20px rgba(0, 0, 0, 0.22);
    transition: opacity 0.2s ease, translate 0.2s ease, visibility 0.2s;
}

header .language-dropdown .dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    translate: 0 0;
}

header .language-dropdown .dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    padding: 8px 10px !important;
    font-size: 14px;
    color: #111111;
    transition: background-color 0.2s ease, color 0.2s ease;
}

header .language-dropdown .dropdown-item:hover,
header .language-dropdown .dropdown-item.active {
    background: var(--mx-surface-2, #F6F6F6) !important;
    color: var(--mx-ink, #0A0A0A) !important;
}

/* ------------------------------------------------------------
   7. Logo — subtle opacity dip on hover
   ------------------------------------------------------------ */
header .logo-box {
    transition: opacity 0.2s ease;
}

header .logo-box:hover {
    opacity: 0.65;
}

/* burger press feedback */
header .navbar-toggler {
    transition: transform 0.15s ease, background-color 0.2s ease;
}

header .navbar-toggler:active {
    transform: scale(0.94);
}