/* The marketing navbar and drawer (_MarketingNavbar.cshtml), for pages seen while signed out.

   Loaded unminified from _Layout.cshtml, so an edit here is live on the next build without the site.min.css step.
   Colours come from the tokens site.css declares on :root (--purple, --dark-blue-color, --bg-white). */

/* ---------------------------------------------------------------------
   The bar: translucent white over the page, a shadow once the page has scrolled (js/marketing-nav.js)
   --------------------------------------------------------------------- */

.marketing-nav {
    --marketing-nav-tint: rgba(98, 90, 255, .08);
    --marketing-nav-tint-strong: rgba(98, 90, 255, .13);
    background-color: rgba(254, 254, 254, .88);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid transparent;
    transition: border-color .2s ease, box-shadow .2s ease;
}

    .marketing-nav.is-scrolled {
        border-bottom-color: rgba(98, 90, 255, .14);
        box-shadow: 0 10px 28px -16px rgba(47, 46, 65, .35);
    }

    .marketing-nav .navbar-brand img {
        display: block;
    }

/* the destinations: pill links in the brand's dark blue, purple when current or hovered */
.marketing-nav .nav-link {
    color: var(--dark-blue-color);
    font-weight: 500;
    padding: .5rem .9rem;
    border-radius: 999px;
    transition: color .15s ease, background-color .15s ease;
}

    .marketing-nav .nav-link:hover,
    .marketing-nav .nav-link:focus-visible,
    .marketing-nav .nav-link.show {
        color: var(--purple);
        background-color: var(--marketing-nav-tint);
    }

    .marketing-nav .nav-link.active {
        color: var(--purple);
        background-color: var(--marketing-nav-tint-strong);
    }

    .marketing-nav .nav-link:focus-visible {
        outline: 2px solid var(--purple);
        outline-offset: 2px;
    }

/* the "How it works" menu: three two-line items, the page's name over one line on what it covers */
.marketing-nav-menu {
    min-width: 19rem;
    padding: .5rem;
    border: 0;
    border-radius: .75rem;
    box-shadow: 0 18px 40px -18px rgba(47, 46, 65, .45), 0 0 0 1px rgba(47, 46, 65, .06);
    margin-top: .5rem;
}

    .marketing-nav-menu .dropdown-item {
        white-space: normal;
        padding: .6rem .75rem;
        border-radius: .5rem;
        color: var(--dark-blue-color);
    }

        .marketing-nav-menu .dropdown-item small {
            display: block;
            margin-top: .1rem;
            color: var(--bs-secondary-color);
            line-height: 1.35;
        }

        .marketing-nav-menu .dropdown-item:hover,
        .marketing-nav-menu .dropdown-item:focus-visible {
            color: var(--purple);
            background-color: var(--marketing-nav-tint);
        }

        .marketing-nav-menu .dropdown-item.active,
        .marketing-nav-menu .dropdown-item:active {
            color: var(--purple);
            background-color: var(--marketing-nav-tint-strong);
        }

            .marketing-nav-menu .dropdown-item.active small,
            .marketing-nav-menu .dropdown-item:hover small {
                color: inherit;
                opacity: .8;
            }

/* the account actions: a text link and the one button */
.marketing-nav-signin {
    color: var(--dark-blue-color);
    font-weight: 600;
    text-decoration: none;
    padding: .5rem .9rem;
    border-radius: 999px;
}

    .marketing-nav-signin:hover,
    .marketing-nav-signin:focus-visible,
    .marketing-nav-signin.active {
        color: var(--purple);
        background-color: var(--marketing-nav-tint);
    }

.marketing-nav-register {
    padding: .5rem 1.25rem;
}

.marketing-nav .navbar-toggler {
    padding: .4rem .5rem;
    border-color: rgba(98, 90, 255, .3);
}

    .marketing-nav .navbar-toggler:focus {
        box-shadow: 0 0 0 .2rem rgba(98, 90, 255, .25);
    }

/* a phone: the bar never wraps, and the logo and the Sign in link tighten so the three things on it (the logo, Sign in,
   the menu; Register is in the drawer below sm) fit at 320px */
@media (max-width: 991.98px) {
    .marketing-nav > .container-fluid {
        flex-wrap: nowrap;
    }

    .marketing-nav .navbar-brand {
        min-width: 0;
    }
}

@media (max-width: 575.98px) {
    .marketing-nav .navbar-brand {
        margin-right: .5rem;
    }

        .marketing-nav .navbar-brand img {
            width: 136px;
            height: auto;
        }

    /* Register has left the bar, so Sign in is the one action on it and dresses as a button: an outlined pill, filling
       on press. Beside Register, at sm and up, it stays a text link (Ryan, 2026-10-11) */
    .marketing-nav-signin {
        padding: .45rem 1rem;
        color: var(--purple);
        border: 1px solid var(--purple);
        background-color: var(--bg-white);
    }

        .marketing-nav-signin:hover,
        .marketing-nav-signin:focus-visible,
        .marketing-nav-signin:active,
        .marketing-nav-signin.active {
            color: var(--white-color);
            background-color: var(--purple);
            border-color: var(--purple);
        }
}

@media (max-width: 359.98px) {
    .marketing-nav .navbar-brand img {
        width: 120px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .marketing-nav,
    .marketing-nav .nav-link {
        transition: none;
    }
}

/* ---------------------------------------------------------------------
   The drawer the toggler opens below lg
   --------------------------------------------------------------------- */

.marketing-drawer {
    --bs-offcanvas-width: 320px;
}

.marketing-drawer-label {
    margin: 0 0 .25rem;
    padding: 0 .75rem;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}

.marketing-drawer-rule {
    margin: 1rem .75rem;
    opacity: .12;
}

.marketing-drawer-link {
    display: block;
    padding: .55rem .75rem;
    border-radius: .5rem;
    color: var(--dark-blue-color);
    font-weight: 500;
    text-decoration: none;
}

    .marketing-drawer-link:hover,
    .marketing-drawer-link:focus-visible {
        color: var(--purple);
        background-color: rgba(98, 90, 255, .08);
    }

    .marketing-drawer-link.active {
        color: var(--purple);
        background-color: rgba(98, 90, 255, .13);
    }