/**
 * Tripster mobile navigation.
 *
 * Breakpoint lives in the two media queries at the bottom of this file.
 * Change 991px / 992px together if the desktop menu switches elsewhere.
 */

:root {
    /* Brand palette. */
    --frva-adventure-navy: #0b2f4f;
    --frva-campfire-orange: #f26b38;
    --frva-premium-green: #5e9f3a;
    --frva-sunrise-gold: #f4b942;
    --frva-adventure-blue: #0f4c81;
    --frva-warm-white: #faf9f6;
    /* Component tokens. */
    --frva-mnav-width: min(86vw, 21rem);
    --frva-mnav-bg: var(--frva-adventure-navy);
    --frva-mnav-bg-alt: var(--frva-adventure-blue);
    --frva-mnav-fg: var(--frva-warm-white);
    --frva-mnav-muted: rgba(250, 249, 246, 0.62);
    --frva-mnav-hover: var(--frva-sunrise-gold);
    --frva-mnav-active: var(--frva-campfire-orange);
    --frva-mnav-chevron: var(--frva-sunrise-gold);
    --frva-mnav-border: rgba(250, 249, 246, 0.14);
    --frva-mnav-tint: rgba(250, 249, 246, 0.06);
    --frva-mnav-speed: 280ms;
    --frva-mnav-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --frva-mnav-z: 9990;
}

/* Hidden by default; the media query at the bottom turns it on. */
.frva-mnav,
.frva-mnav__burger {
    display: none;
}

/* ---------------------------------------------------------------------
   Burger trigger

   This button sits in the site header, not in the drawer, so it takes the
   navy ink rather than warm white. If your header background is dark,
   switch the color below to var(--frva-warm-white).
   --------------------------------------------------------------------- */

.frva-mnav__burger {
    position: relative;
    flex: 0 0 auto;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    margin: 0;
    background: var(--frva-campfire-orange);
    border: solid 1px var(--frva-warm-white);
    border-radius: 0.5rem;
    color: var(--frva-warm-white);
    cursor: pointer;
    transition: color var(--frva-mnav-speed) var(--frva-mnav-ease);
}

    .frva-mnav__burger:hover {
        color: var(--frva-campfire-orange);
    }

.frva-mnav__burger-bars,
.frva-mnav__burger-bars::before,
.frva-mnav__burger-bars::after {
    position: absolute;
    left: 50%;
    width: 1.375rem;
    height: 2px;
    margin-left: -0.6875rem;
    background: currentColor;
    border-radius: 2px;
    content: '';
}

.frva-mnav__burger-bars {
    top: 50%;
    margin-top: -1px;
}

    .frva-mnav__burger-bars::before {
        top: -0.4375rem;
        left: 0;
        margin-left: 0;
    }

    .frva-mnav__burger-bars::after {
        top: 0.4375rem;
        left: 0;
        margin-left: 0;
    }

/* ---------------------------------------------------------------------
   Drawer shell
   --------------------------------------------------------------------- */

.frva-mnav__backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--frva-mnav-z);
    background: rgba(11, 47, 79, 0.62);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--frva-mnav-speed) var(--frva-mnav-ease), visibility 0s linear var(--frva-mnav-speed);
}

.frva-mnav.is-open .frva-mnav__backdrop {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s, 0s;
}

.frva-mnav__drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: calc(var(--frva-mnav-z) + 1);
    display: flex;
    flex-direction: column;
    width: var(--frva-mnav-width);
    max-width: 100%;
    background: var(--frva-mnav-bg);
    color: var(--frva-mnav-fg);
    box-shadow: -12px 0 32px rgba(11, 47, 79, 0.45);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform var(--frva-mnav-speed) var(--frva-mnav-ease), visibility 0s linear var(--frva-mnav-speed);
}

.frva-mnav.is-open .frva-mnav__drawer {
    transform: translateX(0);
    visibility: visible;
    transition-delay: 0s, 0s;
}

.frva-mnav__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 0.5rem 1rem 1.25rem;
    border-bottom: 1px solid var(--frva-mnav-border);
}

.frva-mnav__head-title {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--frva-mnav-muted);
}

.frva-mnav__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0.5rem;
    color: var(--frva-mnav-fg);
    cursor: pointer;
    transition: color var(--frva-mnav-speed) var(--frva-mnav-ease);
}

    .frva-mnav__close:hover {
        color: var(--frva-mnav-hover);
    }

    .frva-mnav__close:active {
        color: var(--frva-mnav-active);
    }

.frva-mnav__nav {
    flex: 1 1 auto;
    padding-bottom: 2rem;
}

/* ---------------------------------------------------------------------
   Menu items
   --------------------------------------------------------------------- */

.frva-mnav__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.frva-mnav__item {
    margin: 0;
    padding: 0;
    list-style: none;
}

.frva-mnav__row {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid var(--frva-mnav-border);
}

.frva-mnav__link {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.9375rem 1.25rem;
    color: var(--frva-mnav-fg);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.35;
    text-decoration: none;
    transition: color var(--frva-mnav-speed) var(--frva-mnav-ease);
}

    .frva-mnav__link:hover,
    .frva-mnav__link:focus {
        color: var(--frva-mnav-hover);
    }

    .frva-mnav__link:active {
        color: var(--frva-mnav-active);
    }

.frva-mnav__toggle {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    padding: 0;
    background: none;
    border: 0;
    border-left: 1px solid var(--frva-mnav-border);
    color: var(--frva-mnav-chevron);
    cursor: pointer;
    transition: background-color var(--frva-mnav-speed) var(--frva-mnav-ease), color var(--frva-mnav-speed) var(--frva-mnav-ease);
}

    .frva-mnav__toggle:hover {
        background-color: var(--frva-mnav-tint);
    }

    .frva-mnav__toggle:active {
        color: var(--frva-mnav-active);
    }

.frva-mnav__chevron {
    transition: transform var(--frva-mnav-speed) var(--frva-mnav-ease);
}

.frva-mnav__toggle[aria-expanded='true'] .frva-mnav__chevron {
    transform: rotate(180deg);
}

/* Current page: orange rail and orange label. */
.frva-mnav__item.current-menu-item > .frva-mnav__row > .frva-mnav__link,
.frva-mnav__item.current_page_item > .frva-mnav__row > .frva-mnav__link {
    color: var(--frva-mnav-active);
    font-weight: 700;
    box-shadow: inset 3px 0 0 var(--frva-campfire-orange);
}

/* Ancestor of the current page: gold rail, label stays warm white. */
.frva-mnav__item.current-menu-ancestor > .frva-mnav__row > .frva-mnav__link,
.frva-mnav__item.current-menu-parent > .frva-mnav__row > .frva-mnav__link {
    box-shadow: inset 3px 0 0 var(--frva-sunrise-gold);
}

/* Indentation by depth. */
.frva-mnav__item--depth-1 > .frva-mnav__row > .frva-mnav__link {
    padding-left: 2.25rem;
    font-size: 0.9375rem;
    font-weight: 400;
}

.frva-mnav__item--depth-2 > .frva-mnav__row > .frva-mnav__link {
    padding-left: 3.25rem;
    font-size: 0.9375rem;
    font-weight: 400;
}

.frva-mnav__item--depth-3 > .frva-mnav__row > .frva-mnav__link {
    padding-left: 4.25rem;
    font-size: 0.9375rem;
    font-weight: 400;
}

/* ---------------------------------------------------------------------
   Accordion panels

   Levels alternate navy and adventure blue so nesting depth is readable
   without adding rules or borders.
   --------------------------------------------------------------------- */

.frva-mnav__panel {
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: max-height var(--frva-mnav-speed) var(--frva-mnav-ease), visibility 0s linear var(--frva-mnav-speed);
}

    .frva-mnav__panel.is-open {
        visibility: visible;
        transition-delay: 0s, 0s;
    }

.frva-mnav__item--depth-0 > .frva-mnav__panel,
.frva-mnav__item--depth-2 > .frva-mnav__panel {
    background: var(--frva-mnav-bg-alt);
}

.frva-mnav__item--depth-1 > .frva-mnav__panel,
.frva-mnav__item--depth-3 > .frva-mnav__panel {
    background: var(--frva-mnav-bg);
}

/* ---------------------------------------------------------------------
   Focus and motion
   --------------------------------------------------------------------- */

.frva-mnav__link:focus-visible,
.frva-mnav__toggle:focus-visible,
.frva-mnav__close:focus-visible {
    outline: 2px solid var(--frva-sunrise-gold);
    outline-offset: -2px;
}

.frva-mnav__burger:focus-visible {
    outline: 2px solid var(--frva-adventure-blue);
    outline-offset: 2px;
}

@media ( prefers-reduced-motion: reduce ) {
    .frva-mnav__drawer,
    .frva-mnav__backdrop,
    .frva-mnav__panel,
    .frva-mnav__chevron {
        transition-duration: 0.01ms;
    }
}

/* ---------------------------------------------------------------------
   Breakpoint
   --------------------------------------------------------------------- */

@media ( max-width: 991px ) {
    .frva-mnav,
    .frva-mnav__burger {
        display: block;
    }

    /* Hide the desktop menu rendered by kava_main_menu(). */
    .frva-header__inner .main-navigation,
    .frva-header__inner .menu-toggle,
    .frva-header__inner .mobile-menu-toggle {
        display: none;
    }

    /* Logo left, avatar and burger right. */
    .frva-header__inner {
        align-items: center;
        gap: 0.5rem;
    }

        .frva-header__inner > *:first-child {
            margin-right: auto;
        }

    body.frva-mnav-is-open {
        overflow: hidden;
    }
}

@media ( min-width: 992px ) {
    .frva-mnav,
    .frva-mnav__burger {
        display: none;
    }
}