/*
 * 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);
}

/* Keep the toolbar visible while scrolling through a long article — it sticks
   to the top of the viewport until the editor (its containing block) scrolls
   past, then moves away with the rest of the form. No fixed site header exists
   to offset against, so top: 0 is enough. */
trix-toolbar {
    position: sticky;
    top: 0;
    z-index: 1020;
    background: var(--bs-body-bg);
}

/* Heading buttons added to the Trix toolbar (assets/controllers/trix_controller.js).
   Trix sizes only its own icon buttons, so give these the same box to keep the
   toolbar row even — including at the breakpoint where Trix makes its taller. */
trix-toolbar .trix-button--heading {
    width: 2.6em;
    height: 1.6em;
}

@media (max-width: 768px) {
    trix-toolbar .trix-button--heading {
        height: 2em;
    }
}