/* Shared public top bar — must stay identical on every marketing page. */
.public-nav-inner {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

/* Wordmark is 1895×408 (~149px wide at 32px tall). Never set both
   width and height to values that fight the aspect ratio. */
.public-nav-brand {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.public-nav-logo {
    display: block;
    height: 2rem;
    width: auto;
    max-width: none;
    max-height: 2rem;
    object-fit: contain;
    object-position: left center;
    flex-shrink: 0;
}

.public-nav-logo--full {
    aspect-ratio: 1895 / 408;
}

.public-nav-logo--mark {
    display: none;
    aspect-ratio: 461 / 408;
}

/* 360–479px: keep the name, scale the wordmark uniformly, drop the
   language label so the bar still fits beside Sign in + menu. */
@media (max-width: 479px) {
    .public-nav-logo--full {
        height: 1.5rem;
        max-height: 1.5rem;
    }

    .public-nav .current-language-text {
        display: none;
    }
}

/* <360px: wordmark no longer fits; use the mark only. */
@media (max-width: 359px) {
    .public-nav-logo--full {
        display: none;
    }

    .public-nav-logo--mark {
        display: block;
        height: 2rem;
        max-height: 2rem;
    }
}

/* Desktop inline links + demo from Bootstrap lg (992px). Below that,
   the hamburger dropdown is the only way to reach those items. */
.public-nav-links {
    display: none;
}

.public-nav-toggle {
    display: inline-flex;
}

.public-nav-demo {
    display: none;
}

@media (min-width: 992px) {
    .public-nav-links {
        display: flex;
    }

    .public-nav-toggle {
        display: none;
    }

    .public-nav-demo {
        display: inline-block;
    }

    #mobile-menu {
        display: none !important;
    }
}