/* i18n.css — language switcher + suggestion banner (spec §5.7–5.8).
   Uses the real CyberRamen design tokens: the spec draft referenced --dim/--bg
   which do not exist here, so this maps to --color-text-muted / --color-bg. */

.cr-lang {
    display: flex;
    gap: .75rem;
    font-family: var(--font-mono);
    font-size: .8rem;
    align-items: center;
}
.cr-lang a {
    color: var(--color-text-muted);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    padding-bottom: 1px;
}
.cr-lang a:hover,
.cr-lang a:focus-visible {
    color: var(--cream);
    border-bottom-color: var(--red);
}
.cr-lang a[aria-current="true"] {
    color: var(--red);
    border-bottom-color: var(--red);
}
.cr-lang a[data-unavailable] {
    opacity: .45;
}

/* Ascending "part of {hub}" link (cluster maillage). */
.cr-part-of {
    font-family: var(--font-mono);
    font-size: .8rem;
    margin: 0 0 1rem;
}
.cr-part-of a {
    color: var(--color-text-muted);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}
.cr-part-of a:hover,
.cr-part-of a:focus-visible {
    color: var(--red);
    border-bottom-color: var(--red);
}

/* Suggestion banner — thin, dismissible, above the page content. */
.cr-lang-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem .9rem;
    font-family: var(--font-mono);
    font-size: .85rem;
    padding: .55rem .9rem;
    margin: 0 0 1rem;
    background: var(--color-bg-elev, var(--color-bg-card));
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--red);
    border-radius: var(--border-radius, 4px);
    color: var(--color-text);
}
.cr-lang-banner-cta {
    color: var(--red);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}
.cr-lang-banner-cta:hover,
.cr-lang-banner-cta:focus-visible {
    border-bottom-color: var(--red);
}
.cr-lang-banner-dismiss {
    margin-left: auto;
    background: none;
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font: inherit;
    padding: .15rem .55rem;
    border-radius: var(--border-radius, 4px);
    cursor: pointer;
}
.cr-lang-banner-dismiss:hover,
.cr-lang-banner-dismiss:focus-visible {
    color: var(--cream);
    border-color: var(--red);
}