/*
 * Bootstrap (imported in assets/app.js) carries the looks; this file only adds
 * what it does not cover. Prefer a Bootstrap class or utility in the templates
 * over a new rule here.
 */

/* The application is text first, so keep the reading width narrow — narrower
   than any Bootstrap breakpoint would give us. */
.container {
    max-width: 880px;
}

/* Language switcher in the header. */
.lang-switch a {
    margin-left: .4rem;
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--bs-secondary-color);
    text-decoration: none;
}

.lang-switch a.is-active {
    color: var(--bs-body-color);
    font-weight: 700;
}

/* Article body: HTML written in the Trix editor, so the images and tables in it
   are not ours to add classes to. */
.article-content img {
    max-width: 100%;
    height: auto;
}

.article-content table {
    width: 100%;
}

/* The Trix editor is a form control of its own; make it look like the Bootstrap
   inputs around it. */
trix-editor {
    min-height: 12rem;
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
}