/*
|--------------------------------------------------------------------------
| Blog module styles
|--------------------------------------------------------------------------
| Copied in shape from help.css and then changed -- the two modules are
| permanently separate. A layout bug found in one is worth checking in the
| other, but do not try to share these files.
|
| The listing row is the piece that matters: image left, then title, meta
| line, excerpt and a read-more link. That is the shape the existing Roar
| blog uses and readers already recognise it.
*/

/* ----------------------------------------------------------------- layout */

.blog-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: start;
}

@media (min-width: 992px) {
    .blog-layout {
        grid-template-columns: minmax(0, 1fr) 320px;
        gap: 3rem;
    }
}

.blog-main {
    min-width: 0;   /* lets long titles wrap instead of widening the grid track */
}

/* --------------------------------------------------------------- the hero */

/*
 * The hero heading is GENERIC -- "Blog » Topic", not the topic's own name --
 * and the page's real subject lives in the content card below it. That keeps
 * every blog page opening the same way, and stops a long post title competing
 * with the section it belongs to.
 *
 * Spacing only on the separator. The COLOUR comes from the theme's accent
 * convention (h1 span, h2 span are brand green), so setting one here would
 * fight it.
 */
.blog-hero-label-sep {
    margin: 0 .15rem;
}

/* the hub hero's text block: room for its title on one line at full size (see index.inc) */
.blog-hero-inner-wide {
    max-width: 800px;
}

.blog-hero-breadcrumb {
    margin: 1rem 0 0;
    text-align: center;
}

/*
 * A monospace pill, because it is showing a PATH. Reading it as an address is
 * the point -- it tells you where you are in the URL, not just in the site.
 */
.blog-breadcrumb {
    display: inline-block;
    padding: .4rem .85rem;
    border: 1px solid #dfe3e8;
    border-radius: .375rem;
    background: #f6f8fa;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: .8rem;
    word-break: break-word;
}

.blog-breadcrumb a {
    color: inherit;
    text-decoration: none;
}

.blog-breadcrumb a:hover,
.blog-breadcrumb a:focus {
    text-decoration: underline;
}

.blog-breadcrumb-sep {
    margin: 0 .35rem;
    color: #8c959f;
}

/*
 * The card the page's real content sits in, below the generic hero.
 */
.blog-content-card {
    padding: 1rem;
}

@media (min-width: 1200px) {
    .blog-content-card {
        padding: 1.5rem;
    }
}

/*
 * The LISTING card (hub, topic, tag, search) carries the theme's tertiary
 * tan -- the colour the theme's own blog sample sets its white post cards on
 * -- so the white cards stand off it in both the list and the grid view. The
 * pale blues were tried and blended into the grey page. The post page's card
 * stays white: it holds reading text, not cards.
 */
.blog-listing-card {
    background-color: rgba(var(--bs-tertiary-rgb), 1);
}

.blog-content-title {
    margin: 0 0 .35rem;
}

.blog-content-description {
    margin: 0 0 1.25rem;
    color: rgba(0, 0, 0, .68);
}

/* ------------------------------------------------------------- listing bar */

/*
 * The card's header row: the page's own heading on the left, the count and
 * sort pinned to the right on the same line.
 *
 * Count and sort stay TOGETHER -- they are one piece of information (how many
 * posts, in what order), and split apart the reader assembles it twice.
 *
 * They wrap to separate rows below 576px rather than compressing -- a heading
 * and a select sharing a narrow line leaves neither of them readable.
 */
.blog-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: .5rem 1.5rem;
    padding-bottom: .85rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}

/*
 * Heading and description travel together as one block, so the description
 * stays ABOVE the rule with the heading it belongs to rather than being
 * stranded below it in the body.
 */
.blog-card-head-text {
    flex: 1 1 16rem;
    min-width: 0;
}

.blog-card-head .blog-content-title {
    margin: 0;
}

.blog-card-head .blog-content-description {
    margin: .4rem 0 0;
}

/*
 * The controls align to the TOP of that block, level with the heading, not to
 * its centre -- a two-line description would otherwise drag them halfway down
 * and they would read as belonging to the description instead of the list.
 * The nudge optically levels small text against the much larger heading.
 */
.blog-card-head .blog-listing-bar {
    margin-top: .3rem;
}

/*
 * The bar carries no rule or spacing of its own -- the header row it sits in
 * owns both. On its own it is just the two controls, held to the right.
 */
.blog-listing-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem 1rem;
    margin: 0;
}

.blog-listing-count {
    margin: 0;
    font-size: .875rem;
    color: rgba(0, 0, 0, .55);
}

.blog-sort {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
}

/*
 * The label is visible, not hidden: a bare dropdown reading "Newest" gives no
 * clue what it changes until you open it.
 */
.blog-sort-label {
    font-size: .875rem;
    color: rgba(0, 0, 0, .55);
}

.blog-sort-select {
    padding: .35rem 2rem .35rem .6rem;
    font-size: .875rem;
    border: 1px solid rgba(0, 0, 0, .18);
    border-radius: .35rem;
    background-color: #ffffff;
    color: inherit;
    cursor: pointer;
}

.blog-sort-go {
    padding: .35rem .7rem;
    font-size: .875rem;
    border: 1px solid #184f95;
    border-radius: .35rem;
    background: #184f95;
    color: #ffffff;
    cursor: pointer;
}

/* the list / grid toggle after the sort (listing-bar.inc) */
.blog-layout-toggle {
    display: flex;
    gap: .25rem;
}

.blog-layout-toggle[hidden] {
    display: none;
}

.blog-layout-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, .18);
    border-radius: .35rem;
    background: #ffffff;
    color: rgba(0, 0, 0, .55);
    cursor: pointer;
}

.blog-layout-button:hover {
    color: #184f95;
}

.blog-layout-button[aria-pressed="true"] {
    border-color: #184f95;
    background: #184f95;
    color: #ffffff;
}

/* ------------------------------------------------------------- listing row */

/*
 * A size container, so the card below can switch layout on the LIST's own
 * width rather than the window's. The window lies here: between 992px and
 * ~1200px the sidebar takes 320px, so a wide window can still leave a narrow
 * list -- and that is exactly where the image squeezed the text.
 */
.blog-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    container-type: inline-size;
}

/* each row its own white card on the tinted listing card, as the grid tiles are */
.blog-card {
    display: grid;
    grid-template-columns: 1fr;
    gap: .75rem;
    padding: 1rem;
    border-radius: .75rem;
    background: #ffffff;
}

/* image beside the text only when the list has room for both; stacked below that */
@container (min-width: 640px) {
    /* image with "Posted in" under it on the left; title, meta, excerpt and Read more on the right */
    .blog-card {
        grid-template-columns: 260px minmax(0, 1fr);
        grid-template-rows: auto 1fr;
        grid-template-areas:
            "figure body"
            "topic  body";
        gap: .6rem 1.5rem;
    }

    .blog-card-figure {
        grid-area: figure;
    }

    .blog-card-topic {
        grid-area: topic;
        align-self: start;
    }

    .blog-card-body {
        grid-area: body;
    }
}

/*
 * Under the card's image. Stacked (narrow list): one line, "Posted in:" then
 * the pill, left-aligned with the title below it. Side by side: centred under
 * the image, the label on one line and the pill under it -- see the
 * @container rule below.
 */
.blog-card-topic {
    margin: 0;
    font-size: .875rem;
    color: rgba(0, 0, 0, .6);
}

.blog-card-topic-label {
    margin-right: .35rem;
}

@container (min-width: 640px) {
    .blog-card-topic {
        text-align: center;
    }

    .blog-card-topic-label {
        display: block;
        margin: 0 0 .3rem;
    }
}

/* the pill has the image column's full width to itself, so long topic names fit; past that it wraps inside the pill */
.blog-card-topic .blog-topic-pill {
    max-width: 100%;
    margin-bottom: 0;
}

/*
 * align-self: start -- a grid item stretches to the row's height by default,
 * so beside a long excerpt the figure's grey background filled the space
 * under the image. The box is the image's own height instead.
 */
.blog-card-figure {
    align-self: start;
    margin: 0;
    overflow: hidden;
    border-radius: .5rem;
    background: #eef1f4;
}

/*
 * featured_image is stored at OG size (1200x630) because it doubles as the
 * social image. Here it is simply scaled down, which is the direction that
 * works -- a card thumbnail could never have been scaled UP to a social card.
 */
.blog-card-figure img {
    display: block;
    width: 100%;
    aspect-ratio: 1200 / 630;
    object-fit: cover;
}

.blog-card-body {
    min-width: 0;
}

.blog-card-title {
    margin: 0 0 .4rem;
    font-size: 1.3rem;
    line-height: 1.3;
}

.blog-card-title a {
    color: inherit;
    text-decoration: none;
}

.blog-card-title a:hover {
    text-decoration: underline;
}

.blog-card-excerpt {
    margin: .6rem 0 .9rem;
    color: rgba(0, 0, 0, .68);
}

.blog-readmore {
    display: inline-block;
    font-weight: 600;
    text-decoration: none;
}

.blog-readmore:hover {
    text-decoration: underline;
}

/* the grid view's corner arrow, only shown there */
.blog-card-arrow {
    display: none;
}

/* ---------------------------------------------------------- the grid view */

/*
 * The same cards as the list, restyled as tiles when <html> carries
 * blog-grid-view (the toggle in listing-bar.inc). Modelled on the theme's own
 * blog sample (blog/blog_main.inc): image on top at 16:9, then the title with
 * a corner arrow, the whole tile one link. Topic, meta, excerpt and Read more
 * are the list view's; the tile is a picture and a headline.
 *
 * THREE ACROSS AT MOST -- the sidebar takes the fourth column's room -- and
 * fewer as the list narrows: each column is at least a third of the list
 * (so never more than three) and at least 200px (so two on a tablet, one on
 * a phone). Done in the column sizing rather than a container query because
 * the list is its own container, and a container cannot query itself.
 *
 * Specificity note: these beat the list's @container rules for .blog-card
 * because they carry the extra html class, not because of order.
 */
.blog-grid-view .blog-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(max(200px, calc((100% - 2rem) / 3)), 1fr));
    gap: 1rem;
}

/* white, rounded and borderless come from the list card; the tile only changes the shape */
.blog-grid-view .blog-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    overflow: hidden;
    transition: box-shadow .2s ease;
}

.blog-grid-view .blog-card:hover {
    box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .1);
}

/* stretch: the list view's align-self: start would shrink it to nothing in this flex column */
.blog-grid-view .blog-card-figure {
    align-self: stretch;
    border-radius: 0;
}

.blog-grid-view .blog-card-figure img {
    aspect-ratio: 16 / 9;
    transition: transform .4s ease;
}

.blog-grid-view .blog-card:hover .blog-card-figure img {
    transform: scale(1.05);
}

.blog-grid-view .blog-card-topic,
.blog-grid-view .blog-card .blog-post-meta,
.blog-grid-view .blog-card-excerpt,
.blog-grid-view .blog-readmore {
    display: none;
}

/*
 * Modelled on the sample's text box: 132px tall however short the title,
 * with the sample's 1.5rem at the bottom -- which is what gives its tiles
 * their generous space under the headline. The SIDES stay at 1rem, narrower
 * than the sample's 1.5rem, to leave long titles the width. A MINIMUM height,
 * not a fixed one, so a long title grows the tile instead of being cut off.
 */
.blog-grid-view .blog-card-body {
    flex: 1 1 auto;
    min-height: 7.5rem;
    padding: 1rem 1rem 1.5rem;
}

.blog-grid-view .blog-card-title {
    margin: 0;
    font-size: 1rem;
    line-height: 1.25;
}

/*
 * The title link covers the whole tile, as the theme sample's position-cover
 * link does. Nothing between it and the card may be positioned, or the cover
 * shrinks to that element -- which is why the arrow FLOATS rather than being
 * absolutely placed.
 */
.blog-grid-view .blog-card-title a::after {
    content: "";
    position: absolute;
    inset: 0;
}

/*
 * Bold, in the title's colour, as the sample's is. Bootstrap Icons has one
 * weight, so font-weight does nothing -- the stroke in the glyph's own colour
 * is what thickens it.
 */
.blog-grid-view .blog-card-arrow {
    display: block;
    float: right;
    margin: .1rem 0 0 .5rem;
    font-size: 1rem;
    color: inherit;
    -webkit-text-stroke: .06em currentColor;
}

/* ---------------------------------------------------------- the load more */

.blog-load-more-wrap {
    padding-top: 1.5rem;
    margin-top: 1.75rem;
    border-top: 1px solid rgba(0, 0, 0, .08);
    text-align: center;
}

.blog-load-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .6rem 1.4rem;
    border: 1px solid #184f95;
    border-radius: .35rem;
    background: #ffffff;
    color: #184f95;
    font-size: .925rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.blog-load-more:hover {
    background: #184f95;
    color: #ffffff;
    text-decoration: none;
}

/*
 * While a fetch is in flight. Held inert rather than hidden -- a button that
 * disappears under the cursor mid-click is worse than one that waits.
 */
.blog-load-more.is-loading {
    opacity: .6;
    pointer-events: none;
}

/*
 * Announced, never shown. With JavaScript on the new rows appear ABOVE this
 * button in silence, so a screen reader needs telling that anything happened.
 */
.blog-load-status {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.blog-load-count {
    margin: .75rem 0 0;
    font-size: .8rem;
    color: rgba(0, 0, 0, .5);
}

/* ---------------------------------------------------------------- the meta */

/*
 * Date, author and read time. This is what a blog row carries instead of the
 * type glyph help puts on its rows -- with one kind of post, an icon on every
 * row would say nothing.
 */
.blog-post-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1.1rem;
    margin: 0;
    font-size: .875rem;
    color: rgba(0, 0, 0, .6);
}

/*
 * Each item carries its own icon, which is what separates the three -- so
 * there is no separator character between them. The gap above does the
 * spacing, and wrapping drops whole items onto the next line rather than
 * splitting an icon from its text.
 */
.blog-meta-item {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    white-space: nowrap;
}

.blog-meta-item .bi {
    opacity: .75;
}

.blog-topic-pill {
    display: inline-block;
    padding: .15rem .55rem;
    margin-bottom: .45rem;
    border-radius: 999px;
    background: #eaf1fb;
    color: #184f95;
    font-size: .75rem;
    font-weight: 600;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.blog-topic-pill:hover {
    background: #d7e5f8;
    color: #123c73;
}

/* ------------------------------------------------------------- the sidebar */

.blog-sidebar-block {
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: .5rem;
}

/*
 * No icons on these headings -- every sidebar card heading is plain text, so
 * they all look like siblings.
 */
.blog-sidebar-title {
    margin: 0 0 .85rem;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.blog-popular-more {
    display: inline-block;
    margin-top: .85rem;
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
}

.blog-popular-more:hover {
    text-decoration: underline;
}

.blog-input-group {
    display: flex;
}

.blog-input-group input {
    flex: 1 1 auto;
    min-width: 0;
    padding: .5rem .75rem;
    border: 1px solid rgba(0, 0, 0, .18);
    border-right: 0;
    border-radius: .35rem 0 0 .35rem;
}

.blog-input-group-btn {
    flex: 0 0 auto;
    padding: .5rem .85rem;
    border: 1px solid #184f95;
    background: #184f95;
    color: #ffffff;
    border-radius: 0 .35rem .35rem 0;
    cursor: pointer;
}

/* --------------------------------------------------- the live search panel */

/*
 * Sits in normal flow under the input rather than floating over the page.
 * The sidebar is a column of stacked cards, so a dropdown positioned
 * absolutely would cover the Topics card beneath it; pushing the cards down
 * instead keeps everything readable while a search is open.
 *
 * Empty and hidden until blog.js puts something in it.
 */
.blog-search-results {
    display: none;
    margin-top: .75rem;
}

.blog-search-results.is-open {
    display: block;
}

.blog-search-list {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: .35rem;
    overflow: hidden;
}

.blog-search-list li + li {
    border-top: 1px solid rgba(0, 0, 0, .07);
}

.blog-search-result {
    display: block;
    padding: .55rem .7rem;
    color: inherit;
    text-decoration: none;
}

.blog-search-result:hover,
.blog-search-result:focus {
    background: #f6f8fa;
    text-decoration: none;
}

.blog-search-title {
    display: block;
    font-size: .875rem;
    line-height: 1.35;
}

.blog-search-meta {
    display: block;
    margin-top: .15rem;
    font-size: .75rem;
    color: rgba(0, 0, 0, .5);
}

/* "View all results" under the dropdown rows -- help's help-search-more, in the blog's link colour like Read more */
.blog-search-more {
    display: flex;
    align-items: center;
    gap: .35rem;
    padding-top: .6rem;
    font-size: .8rem;
    font-weight: 600;
    text-decoration: none;
}

.blog-search-more:hover,
.blog-search-more:focus {
    text-decoration: underline;
}

.blog-search-empty {
    margin: 0;
    padding: .55rem .7rem;
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: .35rem;
    font-size: .85rem;
    color: rgba(0, 0, 0, .55);
}

.blog-topic-list,
.blog-popular-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

/*
 * A rule between entries, as borders rather than <hr> elements -- identical on
 * screen, but an <hr> inside a list is a thematic break a screen reader
 * announces, and these are one list rather than separate sections.
 */
.blog-topic-list li + li,
.blog-popular-list li + li {
    margin-top: .5rem;
    padding-top: .5rem;
    border-top: 1px solid rgba(0, 0, 0, .07);
}

.blog-topic-list a,
.blog-popular-list a {
    text-decoration: none;
    color: inherit;
}

.blog-topic-list a:hover,
.blog-popular-list a:hover {
    text-decoration: underline;
}

.blog-topic-count {
    color: rgba(0, 0, 0, .45);
}

.blog-topic-icon {
    margin-right: .4rem;
    opacity: .6;
}

.blog-popular-list li {
    font-size: .925rem;
    line-height: 1.35;
}

/*
 * Icon and title on one flex row, aligned to the TOP rather than centred: a
 * title that wraps to three lines would otherwise push its icon into the
 * middle of the block instead of marking where the entry starts.
 */
.blog-popular-list a {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
}

.blog-popular-list .bi {
    flex: 0 0 auto;
    margin-top: .15rem;
    opacity: .6;
}

.blog-popular-text {
    min-width: 0;
}

.blog-sidebar-empty {
    margin: 0;
    color: rgba(0, 0, 0, .5);
    font-size: .9rem;
}

/* ------------------------------------------------------------ the tag cloud */

.blog-tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.blog-tag {
    display: inline-block;
    padding: .2rem .6rem;
    border-radius: 999px;
    font-size: .8rem;
    text-decoration: none;
}

.blog-tag-hint {
    margin: 0 0 .6rem;
    font-size: .78rem;
    color: rgba(0, 0, 0, .45);
}

/*
 * Six steps of one hue, palest to darkest, chosen by blog_tag_heat_step().
 * Lightness carries the meaning, so the ordering is still readable with any
 * form of colour blindness -- which is why the click counts are not printed.
 */
.blog-tag-heat-0 { background: #cde2fb; color: #24292f; }
.blog-tag-heat-1 { background: #9ec5f4; color: #24292f; }
.blog-tag-heat-2 { background: #6da7ec; color: #24292f; }
.blog-tag-heat-3 { background: #256abf; color: #ffffff; }
.blog-tag-heat-4 { background: #184f95; color: #ffffff; }
.blog-tag-heat-5 { background: #0d366b; color: #ffffff; }

/* ------------------------------------------------------------- a post page */

.blog-post-hero-image {
    display: block;
    width: 100%;
    aspect-ratio: 1200 / 630;
    object-fit: cover;
    border-radius: .5rem;
    margin-bottom: 1.5rem;
}

.blog-post-body {
    font-size: 1.02rem;
    line-height: 1.7;
}

.blog-post-body h2,
.blog-post-body h3 {
    margin-top: 2rem;
    margin-bottom: .75rem;
}

.blog-post-body p {
    margin-bottom: 1.1rem;
}

.blog-post-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin: 2rem 0 0;
    padding: 1.25rem 0 0;
    border-top: 1px solid rgba(0, 0, 0, .08);
    list-style: none;
}

/* ------------------------------------------------------------ topics page */

/*
 * The /topics cards, copied from help.css's hub cards under blog- names -- the
 * modules are permanently separate, so nothing is borrowed across.
 *
 * .stretched-link was purged out of main.purge.css, hence our own: the name's
 * ::after covers the card, so the whole card is one real link.
 */
.blog-stretched-link::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    content: "";
}

/*
 * THE TRAP: the theme's .panel is position: relative, which would bound the
 * stretched ::after to the heading and description and leave the icon and the
 * button unclickable. Static here hands the job back to the card.
 */
.blog-category-card .panel {
    position: static;
}

.blog-category-title-link,
.blog-category-title-link:hover,
.blog-category-title-link:focus {
    color: inherit;
    text-decoration: none;
}

/* the positioned ancestor the stretched ::after resolves against */
.blog-category-card {
    transition: transform .25s ease, box-shadow .25s ease;
    height: 100%;
    position: relative;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 2px 6px rgba(16, 24, 40, .06);
    cursor: pointer;
}

.blog-category-card:hover,
.blog-category-card:focus-within {
    transform: translateY(-3px);
    box-shadow: 0 8px 18px rgba(16, 24, 40, .10), 0 18px 40px rgba(16, 24, 40, .10);
}

.blog-category-icon {
    font-size: 2.25rem;
    line-height: 1;
}

/* looks like a button, is a span -- the card's stretched link does the work */
.blog-category-btn {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: .4rem;
    padding: .4rem .85rem;
    border: 1px solid #37a901;
    border-radius: .375rem;
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.2;
    color: #37a901;
    transition: background-color .2s ease, color .2s ease;
}

.blog-category-card:hover .blog-category-btn,
.blog-category-card:focus-within .blog-category-btn {
    background: #37a901;
    color: #ffffff;
}

.blog-category-btn i {
    font-size: .85rem;
}

.blog-category-btn-arrow {
    transition: transform .2s ease;
}

.blog-category-card:hover .blog-category-btn-arrow,
.blog-category-card:focus-within .blog-category-btn-arrow {
    transform: translateX(2px);
}

/* --------------------------------------------------------------- dark mode */

/*
 * The site theme flips these wholesale; only the pieces with their own light
 * background need restating.
 */
.dark .blog-card {
    background: rgba(255, 255, 255, .04);
}

.dark .blog-layout-button {
    border-color: rgba(255, 255, 255, .2);
    background: transparent;
    color: rgba(255, 255, 255, .65);
}

.dark .blog-layout-button[aria-pressed="true"] {
    border-color: #184f95;
    background: #184f95;
    color: #ffffff;
}

.dark .blog-sidebar-block {
    background: rgba(255, 255, 255, .04);
    border-color: rgba(255, 255, 255, .12);
}

.dark .blog-card-excerpt,
.dark .blog-card-topic,
.dark .blog-post-meta,
.dark .blog-topic-count,
.dark .blog-tag-hint,
.dark .blog-sidebar-empty,
.dark .blog-listing-count,
.dark .blog-sort-label {
    color: rgba(255, 255, 255, .65);
}

.dark .blog-post-tags,
.dark .blog-input-group input,
.dark .blog-sort-select {
    border-color: rgba(255, 255, 255, .15);
}

.dark .blog-breadcrumb {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .15);
}

.dark .blog-content-description {
    color: rgba(255, 255, 255, .65);
}

.dark .blog-topic-list li + li,
.dark .blog-popular-list li + li {
    border-top-color: rgba(255, 255, 255, .1);
}

.dark .blog-card-head,
.dark .blog-load-more-wrap {
    border-bottom-color: rgba(255, 255, 255, .12);
    border-top-color: rgba(255, 255, 255, .12);
}

.dark .blog-load-more {
    background: transparent;
    border-color: #4d8bd8;
    color: #9ec5f4;
}

.dark .blog-load-more:hover {
    background: #184f95;
    color: #ffffff;
}

.dark .blog-load-count {
    color: rgba(255, 255, 255, .5);
}

.dark .blog-search-list,
.dark .blog-search-empty {
    border-color: rgba(255, 255, 255, .15);
}

.dark .blog-search-list li + li {
    border-top-color: rgba(255, 255, 255, .1);
}

.dark .blog-search-result:hover,
.dark .blog-search-result:focus {
    background: rgba(255, 255, 255, .06);
}

.dark .blog-search-meta,
.dark .blog-search-empty {
    color: rgba(255, 255, 255, .55);
}

.dark .blog-sort-select {
    background-color: rgba(255, 255, 255, .06);
    color: #ffffff;
}

/* links inside a callout: the theme's green link colour clashes on the tinted alert backgrounds
   (worst on Danger red), so they take Bootstrap's dark blue instead */
.blog-post-body .alert a {
    color: var(--bs-primary-text-emphasis);
}