/*
 * Layout adjustments for translated navigation.
 *
 * The header centres the nav while the logo is absolutely positioned in a
 * 260px lane on the left. That works for short English labels, but longer
 * translations (Swahili, French, Portuguese) widen the centred nav until it
 * slides underneath the logo.
 *
 * These rules reserve the logo lane and let the links size themselves to the
 * space available, so no language can overlap the logo - including any added
 * later. Loaded after afr-nav.css.
 */

/*
 * 1. The logo becomes a real flex item instead of an absolutely positioned
 *    overlay, and the nav takes the space that is left. Overlap then becomes
 *    structurally impossible rather than a matter of guessing label widths.
 */
.afr-navbar-inner {
    justify-content: flex-start;
    gap: 12px;
}

.afr-navbar-inner > .afr-logo {
    position: static;
    width: auto;
    min-width: 230px;
    flex: 0 0 auto;
}

.afr-navbar-inner > .afr-nav {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    justify-content: center;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.afr-navbar-inner > .afr-nav::-webkit-scrollbar {
    display: none;
}

/* The -110px/110px offset existed only to compensate for the absolute logo. */
.afr-navbar-inner .afr-nav-list {
    margin: 0;
}

/*
 * 2. Languages whose navigation labels are markedly longer than English get
 *    tighter links, keyed off the lang attribute so English is untouched.
 *    afr-nav.css sets `.afr-navbar .afr-nav-link { font-size: 15px !important }`,
 *    so these rules match that specificity to take effect.
 */
html[lang="sw"] .afr-navbar .afr-nav-link,
html[lang="fr"] .afr-navbar .afr-nav-link,
html[lang="pt"] .afr-navbar .afr-nav-link {
    padding-inline: clamp(5px, 0.62vw, 13px);
    font-size: clamp(10.5px, 0.84vw, 14px) !important;
    letter-spacing: 0;
    white-space: nowrap;
}

/* Below the desktop breakpoint the drawer takes over, so tighten a little more
   before that point rather than clipping. */
@media (max-width: 1320px) {
    html[lang="sw"] .afr-navbar .afr-nav-link,
    html[lang="fr"] .afr-navbar .afr-nav-link,
    html[lang="pt"] .afr-navbar .afr-nav-link {
        padding-inline: 4px;
        font-size: 10.5px !important;
    }
}

.afr-navbar .afr-nav-link .afr-arrow,
.afr-navbar .afr-nav-link svg {
    flex: 0 0 auto;
}