/* Blog/Tailwind header bar (desktop): every top-level item on one line, evenly spaced.
   Mirrors the main-site navbar rules in mortgage-types-nav.css. Selectors are specific enough
   to win over Tailwind utility classes and each page's inline header styles. */
@media (min-width: 1024px) {
    header.site-header > .container {
        column-gap: 12px;
        padding-left: 20px;
        padding-right: 20px;
    }

    header.site-header > .container > .navbar-brand,
    header.site-header > .container > .hidden.lg\:block {
        flex: 0 0 auto;
    }

    header.site-header > .container > nav {
        flex: 1 1 auto;
        justify-content: center;
        gap: 0;
    }

    header.site-header > .container > nav .nav-link {
        white-space: nowrap;
        font-size: 14px;
        margin-left: 6px;
        margin-right: 6px;
    }

    header.site-header > .container .apply-now-btn {
        white-space: nowrap;
        font-size: 14px;
        padding: 10px 16px;
    }
}

@media (min-width: 1280px) {
    header.site-header > .container {
        column-gap: 20px;
        padding-left: 40px;
        padding-right: 40px;
    }

    header.site-header > .container > nav .nav-link {
        font-size: 15px;
        margin-left: 10px;
        margin-right: 10px;
    }

    header.site-header > .container .apply-now-btn {
        font-size: 15px;
        padding: 11px 20px;
    }
}

@media (min-width: 1536px) {
    header.site-header > .container {
        padding-left: 56px;
        padding-right: 56px;
    }

    header.site-header > .container > nav .nav-link {
        font-size: 16px;
        margin-left: 14px;
        margin-right: 14px;
    }

    header.site-header > .container .apply-now-btn {
        font-size: 16px;
    }
}