/* Shared motion for the static Arabic header and the Inertia header. */
.bs-header,
.central-marketing-header {
    --nav-ease: cubic-bezier(.22, 1, .36, 1);
    --nav-shadow: 0 24px 60px -16px #34205038, 0 4px 14px #34205008;
    -webkit-backdrop-filter: blur(16px);
}

.site-header.bs-header .bs-mega,
.central-marketing-shell .central-marketing-header .central-marketing-mega {
    inset-block-start: calc(100% + 10px);
    border: 1px solid #e5ddf1;
    border-radius: 24px;
    background: linear-gradient(135deg, #fff, #fdfbff);
    box-shadow: var(--nav-shadow);
    transform-origin: top center;
    animation: none;
}

.site-header.bs-header .bs-mega {
    inset-inline: max(24px, calc((100% - 1240px) / 2));
    max-height: calc(100vh - 132px);
    max-height: calc(100dvh - 112px - env(safe-area-inset-bottom, 0px));
}

.site-header.bs-header .bs-mega > .bs-container { width: calc(100% - 40px); }
.central-marketing-shell .central-marketing-header .central-marketing-mega {
    max-height: calc(100vh - 148px);
    max-height: calc(100dvh - 148px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.bs-header .bs-desktop-nav > :is(button, a),
.bs-header .bs-mega-links > a {
    transition: background-color 180ms ease, color 180ms ease, transform 220ms var(--nav-ease);
}

@media (hover: hover) and (pointer: fine) {
    .bs-header .bs-mega-links > a:hover { transform: translateY(-3px); }
    .bs-header .bs-desktop-nav > :is(button, a):hover { transform: translateY(-1px); }
}

.central-nav-toggle-icon { position: relative; display: block; width: 20px; height: 20px; }
.central-nav-toggle-icon > span {
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 9px;
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform 300ms var(--nav-ease), opacity 160ms ease;
}
.central-nav-toggle-icon > span:first-child { transform: translateY(-6px); }
.central-nav-toggle-icon > span:last-child { transform: translateY(6px); }
[aria-expanded="true"] > .central-nav-toggle-icon > span:first-child { transform: rotate(45deg); }
[aria-expanded="true"] > .central-nav-toggle-icon > span:nth-child(2) { opacity: 0; transform: scaleX(.3); }
[aria-expanded="true"] > .central-nav-toggle-icon > span:last-child { transform: rotate(-45deg); }

.bs-header .bs-menu-toggle,
.central-marketing-header .central-marketing-menu-trigger {
    transition: background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
    -webkit-tap-highlight-color: transparent;
}
.bs-header .bs-menu-toggle[aria-expanded="true"],
.central-marketing-header .central-marketing-menu-trigger[aria-expanded="true"] {
    border-color: #d4c6ef;
    background: #f1ebfa;
    box-shadow: 0 3px 12px #6349bc12;
}

/* Keep the closing card mounted until Vue finishes the transition. */
.central-nav-enter-active { transition: opacity 280ms ease, transform 380ms var(--nav-ease); }
.central-nav-leave-active { transition: opacity 180ms ease, transform 220ms cubic-bezier(.4, 0, 1, 1); pointer-events: none; }
.central-nav-enter-from,
.central-nav-leave-to { opacity: 0; transform: translate3d(0, -18px, 0) scale(.98); }
.central-nav-enter-to,
.central-nav-leave-from { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }

.central-nav-enter-active :is(.bs-mega-links, .bs-mobile-nav > .bs-container, .central-marketing-mega__grid, .central-marketing-mobile-menu__scroll) > * {
    animation: central-nav-item 280ms var(--nav-ease) both;
    animation-delay: 30ms;
}
.central-nav-enter-active :is(.bs-mega-links, .bs-container, .central-marketing-mega__grid, .central-marketing-mobile-menu__scroll) > :nth-child(2) { animation-delay: 50ms; }
.central-nav-enter-active :is(.bs-mega-links, .bs-container, .central-marketing-mega__grid, .central-marketing-mobile-menu__scroll) > :nth-child(3) { animation-delay: 70ms; }
.central-nav-enter-active :is(.bs-mega-links, .bs-container, .central-marketing-mega__grid, .central-marketing-mobile-menu__scroll) > :nth-child(n+4) { animation-delay: 90ms; }
@keyframes central-nav-item { from { opacity: 0; transform: translateY(-7px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 1079px) {
    .site-header.bs-header .bs-mobile-nav {
        inset-block-start: calc(100% + 10px);
        inset-inline: max(12px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
        width: auto;
        max-width: 620px;
        margin-inline-start: auto;
        max-height: calc(100vh - 112px);
        max-height: calc(var(--vp-viewport-height, 100dvh) - var(--vp-header-height, 72px) - 32px - env(safe-area-inset-bottom, 0px));
        padding: 10px 0 max(12px, env(safe-area-inset-bottom, 0px));
        border: 1px solid #e5ddf1;
        border-radius: 22px;
        background: linear-gradient(145deg, #fff, #fcfaff);
        box-shadow: var(--nav-shadow);
        transform-origin: top center;
        -webkit-overflow-scrolling: touch;
    }
    .site-header.bs-header .bs-mobile-nav > .bs-container { width: calc(100% - 20px); }
    .site-header.bs-header .bs-mobile-nav :is(summary, .bs-container > a) {
        padding-inline: 14px;
        border: 0;
        border-radius: 12px;
        margin-block: 2px;
        transition: background-color 180ms ease, color 180ms ease;
    }
    .bs-mobile-nav details[open] > summary { background: #f2ecfb; }
    .bs-mobile-nav summary > span { transition: transform 260ms var(--nav-ease); }
    .bs-mobile-nav details[open] > div { animation: central-nav-item 240ms var(--nav-ease); }
    .site-header.bs-header .bs-menu-toggle { min-width: 44px; width: 44px; height: 44px; border-radius: 13px; }
}

@media (max-width: 1079px) {
    .central-marketing-shell .central-marketing-header .central-marketing-mobile-menu {
        inset-block-start: calc(100% + 10px);
        inset-inline: 0;
        max-width: 620px;
        margin-inline-start: auto;
        overflow: hidden;
        border: 1px solid #e5ddf1;
        border-radius: 22px;
        background: linear-gradient(145deg, #fff, #fcfaff);
        box-shadow: var(--nav-shadow);
        transform-origin: top center;
    }
    .central-marketing-shell .central-marketing-header .central-marketing-mobile-menu__scroll {
        width: calc(100% - 20px);
        max-height: calc(100vh - 112px);
        max-height: calc(100dvh - 104px - env(safe-area-inset-bottom, 0px));
        padding: 10px 0 max(12px, env(safe-area-inset-bottom, 0px));
        -webkit-overflow-scrolling: touch;
    }
    .central-marketing-mobile-menu__heading[aria-expanded="true"] { background: #f2ecfb; }
    .central-marketing-header .central-marketing-menu-trigger { width: 44px; height: 44px; border-radius: 13px; }
    .central-marketing-header :is(.central-marketing-mobile-menu__heading, .central-marketing-mobile-menu__link) { padding-inline: 14px; border: 0; border-radius: 12px; margin-block: 2px; }
}

@media (prefers-reduced-motion: reduce) {
    .bs-header *, .central-marketing-header * {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
    .central-nav-enter-from, .central-nav-leave-to { transform: none; }
}