/* General layout rules that belong to no single component. */

/* Running text: 65 characters wide at most, no orphan on the last line. Headings balance their lines. */
p,
li,
blockquote {
    text-wrap: pretty;
}

p,
blockquote {
    max-width: 65ch;
}

/* A centered block of text (empty states) keeps its measure centered too */
:is(.text-center, .empty) p {
    margin-inline: auto;
}

h1,
h2,
h3,
.page-title,
.card-title,
.cb-card__title {
    text-wrap: balance;
}

/* The current language in the top bar: brand is the color of the active item */
.navbar:not(.navbar-vertical) .nav-link.active {
    color: var(--brand);
    font-weight: 600;
}

/* A link styled as a button or a card never underlines: feedback comes from border, fill or shadow */
a:is(.btn, .card, .cb-card) {
    &,
    &:hover,
    &:focus,
    &:active {
        text-decoration: none;
    }
}

/* 150ms on color changes of links and product components; users who ask for reduced motion get none */
@media (prefers-reduced-motion: no-preference) {
    :where(a, .cb-card, .cb-version) {
        transition:
            color 150ms,
            background-color 150ms,
            border-color 150ms,
            box-shadow 150ms;
    }
}