/* Project overrides, loaded after mvp.min.css.
 *
 * mvp.css is upstream (MVP.css v1.14) and is left untouched so it can be
 * updated wholesale. Everything specific to tesinepronte lives here.
 */

/* --- breadcrumb ---------------------------------------------------------
 * mvp.css styles every <nav> as `display: flex; justify-content:
 * space-between`, which is right for the header menu but stretches the
 * breadcrumb across the full width and pushes the trail to the far right.
 * Reset it back to an inline run of text, as the Limbo template had it.
 */
nav.breadcrumb {
    display: block;
    font-weight: normal;
    margin-bottom: 0.5rem;
    text-align: left;
}

nav.breadcrumb img {
    display: inline;
    margin: 0 0.3rem 0 0;
    vertical-align: baseline;
}

/* --- article titles in listings -----------------------------------------
 * Limbo rendered listing titles as plain <h2> with no anchor, so they were
 * body-coloured, and mvp.css's `article > h2::first-letter` accent on the
 * first letter was visible. Keeping the title clickable (better for both
 * users and crawlers) turns the whole heading link-blue and hides that
 * accent, so the anchor is styled to inherit and the accent is restated.
 */
article > h2 a,
article > h2 a:visited {
    color: var(--color-text);
    text-decoration: none;
    /* text-indent is an INHERITED property, and mvp.css makes every <a> an
     * inline-block -- i.e. its own block container. So the 10px text-indent on
     * `article > h2` (set in the custom block at the end of mvp.min.css) was
     * being applied twice: once to shift this anchor, then again by the anchor
     * to shift its own text. Limbo's markup had a bare text node in the <h2>
     * and so only ever indented once. Reset it to keep the total at 10px. */
    text-indent: 0;
}

article > h2 a:hover {
    color: var(--color-link);
    filter: none;
}

article > h2 a::first-letter {
    color: var(--color-link);
}

/* --- section / category listings ----------------------------------------
 * Limbo rendered these as a bordered table of rows. Reproduce that shape
 * without the bullets mvp.css puts on list items.
 */
ul.categories {
    list-style: none;
    margin: 1rem 0;
    padding: 0;
    text-align: left;
}

ul.categories > li {
    border-bottom: 1px solid var(--color-bg-secondary);
    padding: 0.6rem 0.4rem;
}

ul.categories > li:last-child {
    border-bottom: none;
}

ul.categories .count {
    color: var(--color-text-secondary);
    font-style: italic;
}

ul.categories p {
    margin: 0.2rem 0 0;
}

/* --- floated section/category images ------------------------------------
 * Limbo emitted <img align="left"> alongside the description text.
 */
.section-image {
    max-width: 160px;
    height: auto;
}

.section-image.left {
    float: left;
    margin: 0 1rem 0.5rem 0;
}

.section-image.right {
    float: right;
    margin: 0 0 0.5rem 1rem;
}

/* Stop the float from escaping the header block. */
section > header::after {
    clear: both;
    content: "";
    display: table;
}

@media (max-width: 640px) {
    .section-image.left,
    .section-image.right {
        display: block;
        float: none;
        margin: 0 auto 0.5rem;
    }
}