/* Save as css/mobile-nav.css.
   This file is loaded last so these mobile rules can override the existing
   header/navigation styles without changing the desktop menu. */

.nav-toggle {
    display: none;
}

@media (max-width: 820px) {
    .site-header {
        position: relative;
        min-height: 72px;
        display: flex;
        align-items: center;
        gap: 12px;
        padding-inline: 16px;
        z-index: 1000;
    }

    .site-header .brand {
        min-width: 0;
        margin-right: auto;
    }

    .site-header .brand-name {
        white-space: nowrap;
    }

    .nav-toggle {
        width: 48px;
        height: 48px;
        flex: 0 0 48px;
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        margin: 0;
        padding: 0;
        border: 2px solid #15345a;
        border-radius: 8px;
        color: #15345a;
        background: transparent;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .nav-toggle:hover,
    .nav-toggle:focus-visible {
        color: #ffffff;
        background: #15345a;
        outline: none;
    }

    .nav-toggle-line {
        width: 23px;
        height: 3px;
        display: block;
        border-radius: 99px;
        background: currentColor;
        transition:
            transform 180ms ease,
            opacity 180ms ease;
    }

    .nav-toggle.is-open .nav-toggle-line:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .nav-toggle.is-open .nav-toggle-line:nth-child(2) {
        opacity: 0;
    }

    .nav-toggle.is-open .nav-toggle-line:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    /* With JavaScript enabled, collapse the links behind the button. */
    .js .site-header .site-nav {
        display: none;
    }

    .site-header .site-nav,
    .js .site-header .site-nav.is-open {
        position: absolute;
        display: flex;
        top: calc(100% + 1px);
        right: 12px;
        left: 12px;
        z-index: 1001;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 10px;
        border: 1px solid rgba(21, 52, 90, .13);
        border-radius: 10px;
        background: #ffffff;
        box-shadow: 0 18px 38px rgba(21, 52, 90, .2);
    }

    .site-header .site-nav a,
    .site-header .site-nav .nav-user {
        width: 100%;
        display: block;
        margin: 0;
        padding: 14px 15px;
        border-radius: 6px;
        text-align: left;
    }

    .site-header .site-nav a {
        color: #15345a;
        text-decoration: none;
    }

    .site-header .site-nav a:hover,
    .site-header .site-nav a:focus-visible {
        color: #15345a;
        background: #fbf6ec;
        outline: none;
    }

    .site-header .site-nav .nav-user {
        margin-bottom: 4px;
        color: #6e7f90;
        font-size: .86rem;
        font-weight: 700;
    }

    .site-header .site-nav .nav-register,
    .site-header .site-nav .nav-logout {
        color: #ffffff;
        background: #fb5b55;
    }

    .site-header .site-nav .nav-register:hover,
    .site-header .site-nav .nav-register:focus-visible,
    .site-header .site-nav .nav-logout:hover,
    .site-header .site-nav .nav-logout:focus-visible {
        color: #ffffff;
        background: #e84d48;
    }

    .site-header .header-location {
        display: none;
    }
}

@media (max-width: 390px) {
    .site-header .brand-name {
        font-size: .9rem;
    }

    .site-header .brand-mark img {
        width: 44px;
        height: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nav-toggle-line {
        transition: none;
    }
}