/* ==========================================================================
   Mobile flyout menu  -  inc/mobile-menu.php, js/mobile-menu.js
   --------------------------------------------------------------------------
   A modal <dialog> at <= 1100px. Full screen on phones; a 440px sheet from
   the right on tablets (769-1100px) with the page dimmed behind it. Square
   corners and the theme's own tokens throughout.
   ========================================================================== */

html.has-flyout-open,
html.has-flyout-open body,
html.has-flyout-open #scrollRoot {
    overflow: hidden;
}

.ub-flyout {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    height: 100dvh;
    max-width: 100%;
    max-height: 100%;
    max-height: 100dvh;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: var(--white, #fff);
    color: var(--text-main, #2c3e50);
    font-family: var(--font-primary, 'Outfit', sans-serif);
    overflow: hidden;
    transform: translateX(100%);
    transition: transform 0.32s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.ub-flyout[open] {
    display: flex;
    flex-direction: column;
}
.ub-flyout.is-open {
    transform: none;
}
.ub-flyout::backdrop {
    background: rgba(20, 8, 32, 0.5);
}

@media (min-width: 769px) {
    .ub-flyout {
        inset: 0 0 0 auto;
        width: min(440px, 100%);
        box-shadow: -12px 0 32px rgba(42, 18, 64, 0.18);
    }
}

/* ---- Top bar ------------------------------------------------------------ */
.ub-flyout__bar {
    flex: 0 0 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px 0 16px;
    background: var(--ub-purple-deep, #2A1240);
}
.ub-flyout__brand {
    display: inline-flex;
    align-items: center;
    color: var(--white, #fff);
    font-weight: 700;
    text-decoration: none;
}
.ub-flyout__brand img {
    display: block;
    height: 40px;
    width: auto;
}
.ub-flyout__close {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--white, #fff);
    font-size: 1.4rem;
    cursor: pointer;
}
.ub-flyout__brand:focus-visible,
.ub-flyout__close:focus-visible {
    outline: 2px solid var(--ub-blue, #00a7e0);
    outline-offset: -2px;
}

/* ---- Screens ------------------------------------------------------------ */
.ub-flyout__screens {
    position: relative;
    flex: 1 1 auto;
    overflow: hidden;
}
.ub-flyout__screen {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: var(--white, #fff);
    padding-bottom: 16px;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), visibility 0s linear 0.3s;
}
.ub-flyout__screen--sub {
    transform: translateX(100%);
    visibility: hidden;
}
.ub-flyout__screen--sub.is-active {
    visibility: visible;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), visibility 0s;
}
.ub-flyout__screens.is-drilled .ub-flyout__screen--root {
    transform: translateX(-30%);
}
.ub-flyout__screens.is-drilled .ub-flyout__screen--sub.is-active {
    transform: none;
}

/* ---- Search ------------------------------------------------------------- */
.ub-flyout__search {
    position: relative;
    margin: 12px 16px;
}
.ub-flyout__search > i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ub-purple, #592d82);
    pointer-events: none;
}
.ub-flyout__search input[type="search"] {
    width: 100%;
    height: 48px;
    margin: 0;
    padding: 0 14px 0 42px;
    border: 1px solid #d3d9de;
    border-radius: 0;
    background: var(--white, #fff);
    color: var(--text-main, #2c3e50);
    font: inherit;
    font-size: 1rem; /* 16px: iOS does not zoom the page on focus */
    -webkit-appearance: none;
    appearance: none;
}
.ub-flyout__search input[type="search"]:focus-visible {
    outline: 2px solid var(--ub-purple, #592d82);
    outline-offset: 0;
    border-color: var(--ub-purple, #592d82);
}

/* ---- Main rows ---------------------------------------------------------- */
.ub-flyout__rows {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid #e6e9ec;
}
.ub-flyout__row {
    display: flex;
    min-height: 52px;
    margin: 0;
    border-bottom: 1px solid #e6e9ec;
}
.ub-flyout__row-link {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    padding: 10px 20px;
    color: var(--text-main, #2c3e50);
    font-size: 1.12rem;
    font-weight: 700;
    line-height: 1.25;
    text-decoration: none;
}
.ub-flyout__drill {
    flex: 0 0 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-left: 1px solid #e6e9ec;
    border-radius: 0;
    background: none;
    color: var(--ub-purple, #592d82);
    font-size: 1rem;
    cursor: pointer;
}
.ub-flyout__row-link:hover,
.ub-flyout__row-link:focus-visible {
    color: var(--ub-purple, #592d82);
}
.ub-flyout__drill:hover {
    background: var(--bg-light, #f4f7f6);
}
.ub-flyout__row-link:focus-visible,
.ub-flyout__drill:focus-visible,
.ub-flyout__back:focus-visible,
.ub-flyout__links a:focus-visible,
.ub-flyout__group a:focus-visible,
.ub-flyout__overview:focus-visible,
.ub-flyout__tile:focus-visible {
    outline: 2px solid var(--ub-purple, #592d82);
    outline-offset: -3px;
}
.ub-flyout__ext {
    margin-left: 8px;
    font-size: 0.75em;
    color: var(--text-light, #5b6a75);
}

/* ---- Quick-link tiles --------------------------------------------------- */
.ub-flyout__eyebrow {
    margin: 0;
    padding: 18px 20px 8px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ub-purple, #592d82);
}
.ub-flyout__tiles {
    list-style: none;
    margin: 0;
    padding: 0 16px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}
.ub-flyout__tiles li {
    margin: 0;
}
.ub-flyout__tile {
    height: 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 6px;
    background: var(--bg-light, #f4f7f6);
    border: 1px solid #e6e9ec;
    color: var(--text-main, #2c3e50);
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.15;
    text-align: center;
    text-decoration: none;
}
.ub-flyout__tile i {
    font-size: 1.15rem;
    color: var(--ub-purple, #592d82);
}
.ub-flyout__tile .ub-flyout__ext {
    display: none;
}
.ub-flyout__tile:hover {
    border-color: var(--ub-purple, #592d82);
}
.ub-flyout__tile.is-highlight {
    background: var(--white, #fff);
    border-color: var(--ub-purple, #592d82);
    color: var(--ub-purple, #592d82);
    font-weight: 700;
}

/* ---- Sub-screens -------------------------------------------------------- */
.ub-flyout__sub-head {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--white, #fff);
    border-bottom: 1px solid #e6e9ec;
}
.ub-flyout__back {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: 52px;
    padding: 0 20px;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--ub-purple, #592d82);
    font: inherit;
    font-size: 0.98rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}
.ub-flyout__title {
    margin: 0;
    padding: 18px 20px 6px;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--ub-purple-deep, #2A1240);
}
.ub-flyout__overview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 52px;
    margin: 10px 16px 4px;
    padding: 8px 16px;
    background: var(--bg-light, #f4f7f6);
    border-left: 3px solid var(--ub-purple, #592d82);
    color: var(--ub-purple, #592d82);
    font-weight: 700;
    text-decoration: none;
}
.ub-flyout__overview .ub-flyout__ext {
    color: var(--ub-purple, #592d82);
    font-size: 0.85rem;
}
.ub-flyout__group {
    margin: 0;
    padding: 22px 20px 6px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-light, #5b6a75);
}
.ub-flyout__group a {
    color: inherit;
    text-decoration: none;
}
.ub-flyout__links {
    list-style: none;
    margin: 0;
    padding: 0;
}
.ub-flyout__links li {
    margin: 0;
}
.ub-flyout__links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 48px;
    padding: 8px 20px;
    border-bottom: 1px solid #f0f2f4;
    color: var(--text-main, #2c3e50);
    font-size: 1.02rem;
    font-weight: 500;
    line-height: 1.3;
    text-decoration: none;
}
.ub-flyout__links a:hover {
    color: var(--ub-purple, #592d82);
}

/* ---- Pinned buttons ----------------------------------------------------- */
.ub-flyout__cta {
    flex: 0 0 auto;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 10px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid #e6e9ec;
    background: var(--white, #fff);
    box-shadow: 0 -6px 18px rgba(42, 18, 64, 0.06);
}
.ub-flyout__cta .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    margin: 0;
    text-align: center;
}

@media (prefers-reduced-motion: reduce) {
    .ub-flyout,
    .ub-flyout__screen {
        transition: none;
    }
}