/* Shared by the landing page and public account pages. */
.navbar > .container {
    height: 100%;
}

/* Also offset native links arriving from FAQ/contact at a homepage section. */
#features,
#pricing {
    scroll-margin-top: 6rem;
}

/* Collapse before the desktop links compete with the logo and actions. */
.navbar .public-mobile-navigation,
.navbar .mobile-menu-btn {
    display: none;
}

.navbar [hidden] {
    display: none !important;
}

.navbar a:focus-visible,
.navbar button:focus-visible {
    outline: 3px solid #176b40;
    outline-offset: 3px;
}

@media (max-width: 1200px) {
    .navbar .nav-center {
        display: none;
    }

    .navbar {
        position: sticky;
        height: auto;
    }

    .navbar:has(.mobile-menu-btn[aria-expanded="true"]) {
        max-height: 100dvh;
        overflow-y: auto;
    }

    .navbar .navbar-content {
        flex-wrap: wrap;
    }

    .navbar .mobile-menu-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 44px;
        color: #374151;
        font: inherit;
        border: 1px solid #d1d5db;
        border-radius: 8px;
    }

    .navbar .public-mobile-navigation {
        display: flex;
        flex-direction: column;
        flex-basis: 100%;
        width: 100%;
        padding: 8px 0;
        border-top: 1px solid #e5e7eb;
    }

    .navbar .public-mobile-navigation .nav-link {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding: 8px 12px;
    }

    .navbar ~ main,
    .navbar ~ main .hero {
        margin-top: 0;
    }
}

@media (max-width: 768px) {
    #features,
    #pricing {
        scroll-margin-top: 12rem;
    }

    .navbar {
        position: sticky;
        height: auto;
    }

    .navbar > .container {
        padding: 8px 12px 12px;
    }

    .navbar .navbar-content {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 8px;
    }

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

    .navbar .navbar-logo {
        width: auto;
        height: 44px;
        max-width: 100%;
    }

    .navbar .nav-actions {
        display: contents;
    }

    .navbar .nav-actions .language-selector {
        display: block;
        justify-self: end;
    }

    .navbar .language-btn {
        min-height: 44px;
    }

    .navbar .nav-actions .btn {
        min-width: 0;
        min-height: 44px;
        padding: 8px;
        font-size: 13px;
        line-height: 1.4;
        text-align: center;
        white-space: normal;
    }

    .navbar .nav-actions .btn svg {
        display: none;
    }

    .navbar .mobile-menu-btn,
    .navbar .public-mobile-navigation {
        grid-column: 1 / -1;
    }

    /* Sticky navigation occupies its own space, including at text zoom. */
    .navbar ~ main,
    .navbar ~ main .hero {
        margin-top: 0;
    }
}