@layer components {

    /* ── Country navigation ───────────────────────────────────────
     The bar under the topbar on a page about one country, from the
     CountryNav view component. Its inner width matches the country
     hub's, so the links line up with the page below. */
    .c-country-nav {
        border-bottom: 1px solid var(--color-line);
        background: var(--color-surface);
    }

    .c-country-nav__inner {
        max-width: var(--max-content-width);
        margin-inline: auto;
        padding: var(--space-3) clamp(var(--space-4), 4vw, var(--space-7));
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: var(--space-2) var(--space-5);
        font-size: var(--fs-ui-sm);
    }

    .c-country-nav__name {
        font-weight: 600;
        color: var(--color-ink);
    }

    .c-country-nav a {
        color: var(--color-ink-mute);
        text-decoration: none;
    }

    .c-country-nav a:hover,
    .c-country-nav a[aria-current="page"] {
        color: var(--color-ink);
        text-decoration: underline;
        text-underline-offset: 0.2em;
    }

    .c-country-nav a[aria-current="page"] {
        font-weight: 600;
    }
}