:root {
    --navmenu-img-h: 3.25rem;
    --navmenu-pad-v: 1.125rem;
}

.topbar,
.topbar.is-scrolled,
.topbar.nav-is-open {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    min-height: var(--topbar-h);
    padding: var(--navmenu-pad-v) max(var(--layout-content-inset), calc((100vw - 74rem) / 2));
    border-bottom-color: var(--motif-nav-border);
    color: var(--motif-nav-text);
    background: color-mix(in oklch, var(--motif-color-canvas-950) 92%, transparent);
    box-shadow: none;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.topbar__brand {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 0.8rem;
    align-items: center;
    order: 1;
    color: var(--motif-nav-wordmark);
    font-family: var(--motif-font-ui);
    text-transform: uppercase;
}

.topbar__brand img {
    grid-row: 1 / 3;
    width: var(--navmenu-img-h);
    height: var(--navmenu-img-h);
    border-radius: 0.75rem;
}

.topbar__brand > span,
.topbar__brand-label {
    align-self: end;
    color: var(--asvm-ink);
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    line-height: 1;
    white-space: nowrap;
}

.topbar__brand::after {
    align-self: start;
    margin-top: -0.125rem;
    color: var(--motif-color-text-muted);
    content: "Costa Rica";
    font-size: 0.58rem;
    font-weight: 400;
    letter-spacing: 0.22em;
    line-height: 1;
}

.topbar__status {
    order: 3;
    max-width: 9rem;
    color: var(--asvm-lilac-light);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    line-height: 1.35;
    text-align: right;
    text-transform: uppercase;
    white-space: normal;
}

.topbar nav {
    order: 2;
    gap: 0.2rem;
    font-family: var(--motif-font-ui);
}

.topbar nav a,
.topbar.is-scrolled nav a,
.topbar.nav-is-open nav a {
    color: var(--motif-nav-text);
    font-size: 0.82rem;
    font-weight: 500;
}

.topbar nav a:hover,
.topbar nav a:focus-visible,
.topbar.is-scrolled nav a:hover,
.topbar.nav-is-open nav a:hover {
    color: var(--motif-nav-text-hover);
    background: var(--motif-background-nav-hover);
}

.topbar nav .asvm-nav-cta,
.topbar.is-scrolled nav .asvm-nav-cta,
.topbar.nav-is-open nav .asvm-nav-cta {
    color: var(--motif-button-primary-text);
    background: var(--motif-button-primary-background);
}

.topbar nav .asvm-nav-cta:hover,
.topbar nav .asvm-nav-cta:focus-visible,
.topbar.is-scrolled nav .asvm-nav-cta:hover,
.topbar.nav-is-open nav .asvm-nav-cta:hover {
    color: var(--motif-control-solid-text-hover);
    background: var(--motif-button-primary-background-hover);
}

@media (max-width: 1239px) {
    :root {
        --navmenu-img-h: 2.75rem;
        --navmenu-pad-v: 0.875rem;
    }

    .topbar,
    .topbar.is-scrolled,
    .topbar.nav-is-open {
        gap: 0.75rem;
        padding-inline: var(--layout-content-inset);
    }

    .topbar__brand > span,
    .topbar__brand-label {
        overflow: hidden;
        font-size: 0.72rem;
        letter-spacing: 0.1em;
        text-overflow: ellipsis;
    }

    .topbar__brand::after {
        font-size: 0.5rem;
    }

    .topbar__status {
        max-width: 7rem;
        font-size: 0.55rem;
        letter-spacing: 0.14em;
        white-space: normal;
    }

    .topbar__toggle {
        order: 2;
    }

    .topbar nav.is-open {
        background: var(--motif-nav-menu-background);
    }

    .topbar nav.is-open a,
    .topbar.is-scrolled nav.is-open a,
    .topbar.nav-is-open nav.is-open a {
        color: var(--motif-nav-text);
    }

    .topbar nav.is-open .asvm-nav-cta {
        margin-top: 0.35rem;
        color: var(--motif-button-primary-text);
        text-align: center;
    }
}

@media (min-width: 901px) and (max-width: 1239px) {
    .topbar nav {
        position: fixed;
        top: var(--topbar-h);
        left: 0;
        z-index: var(--navmenu-z-drawer);
        display: none;
        flex-direction: column;
        align-items: stretch;
        max-width: 100vw;
        max-height: calc(100dvh - var(--topbar-h));
        padding: 0.5rem 0.75rem 1.5rem;
        overflow-y: auto;
        overflow-wrap: normal;
        color: var(--motif-nav-text);
        background: var(--motif-nav-menu-background);
        box-shadow: 4px 0 24px rgb(0 0 0 / 12%);
        white-space: normal;
    }

    .topbar nav.is-open {
        display: inline-flex;
    }

    .topbar nav.is-open a,
    .topbar.is-scrolled nav.is-open a,
    .topbar.nav-is-open nav.is-open a {
        padding: 0.55rem 0.75rem;
        border-radius: var(--navmenu-radius-md);
        color: var(--motif-nav-text);
        font-size: 1rem;
    }

    .topbar__toggle {
        display: block;
        min-width: 44px;
        min-height: 44px;
    }

    .nav-overlay {
        position: fixed;
        inset: 0;
        z-index: var(--navmenu-z-overlay);
        display: none;
        background: rgb(0 0 0 / 40%);
    }

    .nav-overlay.is-open {
        display: block;
    }
}

@media (max-width: 640px) {
    :root {
        --navmenu-pad-v: 0.65rem;
        --topbar-h: 5.625rem;
    }

    .topbar,
    .topbar.is-scrolled,
    .topbar.nav-is-open {
        display: grid;
        grid-template-areas:
            "brand toggle"
            "status status";
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
        row-gap: 0.25rem;
    }

    .topbar__brand {
        grid-area: brand;
    }

    .topbar__status {
        grid-area: status;
        max-width: 7rem;
        justify-self: end;
        white-space: normal;
    }

    .topbar__toggle {
        grid-area: toggle;
    }
}

@media (max-width: 430px) {
    .topbar,
    .topbar.is-scrolled,
    .topbar.nav-is-open {
        gap: 0.5rem;
    }

    .topbar__brand {
        column-gap: 0.5rem;
    }

    .topbar__brand > span,
    .topbar__brand-label {
        font-size: 0.62rem;
        letter-spacing: 0.06em;
    }

    .topbar__brand::after {
        font-size: 0.46rem;
        letter-spacing: 0.1em;
    }

    .topbar__status {
        max-width: 5.5rem;
        font-size: 0.48rem;
        letter-spacing: 0.1em;
    }
}