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

/* Admin edit forms (article, web, lokace): the save button stays where users
   expect it — at the end of the form — but fixed to the bottom of the
   viewport so it's always reachable without scrolling all the way down.
   .admin-sticky-form's own padding-bottom keeps the last field from hiding
   behind it. */
.admin-save-toolbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    padding-block: .75rem;
    background: var(--bs-body-bg);
    border-top: var(--bs-border-width) solid var(--bs-border-color);
}

.admin-sticky-form {
    padding-bottom: 4.5rem;
}

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

/* Clamped article content editor (assets/controllers/content_collapse_controller.js):
   collapsed shows ~2 lines of real text with the toolbar hidden (there is no
   room for it), expanded removes the limit and brings the toolbar back. The
   fade hints there is more below without needing the toolbar's height. */
.content-collapse:not(.is-expanded) .content-collapse-body {
    max-height: 10.6rem;
    overflow: hidden;
    position: relative;
}

.content-collapse:not(.is-expanded) .content-collapse-body::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 1.5rem;
    background: linear-gradient(to bottom, transparent, var(--bs-body-bg));
    pointer-events: none;
}

.content-collapse:not(.is-expanded) .content-collapse-body trix-toolbar {
    display: none;
}

/* Leaflet needs an explicit height on its container (assets/controllers/location_map_controller.js) —
   it renders at 0 height otherwise. */
.location-map {
    height: 320px;
    border-radius: var(--bs-border-radius);
}

/* The pin drawn by location_map_controller.js replaces Leaflet's default
   marker image, which also carries its own drop shadow and background. */
.location-map-pin {
    background: none;
    border: none;
}

/* Photo and per-location map side by side on the location list — a fixed,
   shorter height than .location-map so the pair sits in one compact row. */
.location-list-media {
    height: 160px;
}