/*
 * Item Stats — site-wide totals (footer).
 *
 * Takes the theme's Bootstrap primary when defined, like the item badge.
 */

.item-stats-totals {
    --item-stats-brand: var(--bs-primary, #d65600);

    /* Always the host site's own typeface, never one of ours. */
    font-family: inherit;
    text-align: center;
    /* No outer margin: the theme decides where the block sits and how far it
       is from its neighbours. */
    margin: 0;
}

.item-stats-totals p {
    margin: 0;
}

.item-stats-totals-counts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: .25rem .75rem;
    font-size: .875rem;
}

.item-stats-totals-stat {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    white-space: nowrap;
}

/* Sized to the text, in the brand colour like the counts. */
.item-stats-totals-icon {
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
    color: var(--item-stats-brand);
}

.item-stats-totals-count {
    color: var(--item-stats-brand);
    /* The <strong> is kept for meaning; the look stays regular weight. */
    font-weight: normal;
}

.item-stats-totals-separator {
    opacity: .5;
}

.item-stats-totals-tagline {
    margin-top: .35rem !important;
    font-size: .8125rem;
    opacity: .8;
}

/* Stack on phones instead of wrapping mid-line around the separator. */
@media (max-width: 575.98px) {
    .item-stats-totals-counts {
        flex-direction: column;
        align-items: center;
    }

    .item-stats-totals-separator {
        display: none;
    }
}