/* Corrections layered on top of the newest3 theme.
 *
 * Kept in a separate file, loaded after style.css, so the vendored theme stays
 * pristine and every deliberate change to it is visible in one place.
 */

/* ---------------------------------------------------------------- 1. Sticky footer
 *
 * The theme gives .canvas `min-height: 100%`, so the canvas itself does fill
 * the viewport -- but the footer inside it is an ordinary block that ends at
 * content height, leaving the canvas's #f3f3f3 background exposed below it.
 * On a short page (the author page, a 404) that was ~450px of dead grey.
 *
 * .canvas becomes a flex column, and a flexible pseudo-element placed before
 * the footer absorbs whatever space is left over. Using a spacer rather than
 * `margin-top: auto` on the footer matters: auto would override the theme's
 * `margin-top: 50px`, collapsing the light gap above the footer on pages that
 * are already tall. This way tall pages render as they did before.
 */
.canvas {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* The footer is always the last flex item; everything else keeps source order. */
.canvas > footer.footer {
    order: 1;
    flex: 0 0 auto;

    /* Bootstrap 3 gives .container-fluid `margin-left/right: auto`. Under
     * normal block flow those resolve to 0 and the element fills its parent,
     * but a flex item's auto margins absorb the free space instead -- which
     * silently centred the footer at its 1200px content width on viewports
     * wider than that. Explicit full width and zero side margins restore it.
     * Anything else that is BOTH a direct child of .canvas and a
     * .container-fluid would need the same treatment. */
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

/* The spacer. ::after is the last child in the DOM, and with order 0 it sorts
 * before the footer's order 1, so it sits between content and footer. */
.canvas::after {
    content: '';
    order: 0;
    flex: 1 1 auto;
}

/* .canvas-overlay is position:absolute, so it is out of flow and unaffected by
 * the flex container -- but it must not be stretched as a flex item either. */
.canvas > .canvas-overlay {
    flex: 0 0 auto;
}

/* ------------------------------------------------------- 2. Author page bio
 *
 * Two problems, one of them latent in the theme:
 *
 * a) .author-bio is `display: inline-block` at max-width 680px. Two of them
 *    therefore sit SIDE BY SIDE once the container is wider than ~1400px,
 *    interleaving the two paragraphs into something unreadable. Blocks with
 *    auto side margins stack and stay centred at any width.
 *
 * b) .laread-author-detail centres all its text, which is right for the name,
 *    role and location but leaves multi-line prose ragged on both edges.
 *    Left-aligning gives a flush left edge and natural ragged right.
 *
 * Deliberately NOT justified and NOT hyphenated: justification in a 680px
 * column of Russian opens visible gaps between long words, and `hyphens: auto`
 * breaks words mid-line ("разрабаты-вать"), which reads badly.
 */
.laread-author-detail .author-subdetail .author-bio {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}