/*
 * The capybara brand: violet primary with an amber accent, carried over from
 * the sveltepress `themeColor` this site used to be configured with.
 *
 * sphinx-book-theme sits on pydata-sphinx-theme, which stamps
 * `data-theme` on <html> for both light and dark -- there is no
 * unset third state to cover, so each block is complete on its own.
 */
html[data-theme="light"] {
    --pst-color-primary: #5b21b6;
    --pst-color-link: #5b21b6;
    --pst-color-link-hover: #7c3aed;
    --pst-color-accent: #b45309;
}

html[data-theme="dark"] {
    --pst-color-primary: #c9b6ff;
    --pst-color-link: #c9b6ff;
    --pst-color-link-hover: #ded1ff;
    --pst-color-accent: #f59e0b;
}

/*
 * Each `button-link` is its own paragraph, so the hero's actions would stack.
 * Pull the ones tagged `hero-action` back onto one line, the way the
 * sveltepress hero laid them out; they still wrap on a narrow viewport.
 */
p:has(> .hero-action) {
    display: inline-block;
    margin: 0 0.5rem 0.5rem 0;
}

/*
 * The Discord icon moved from the sidebar into the article header (see
 * `article_header_end` in conf.py), so that header's end slot now holds two
 * items. pydata only styles it for one: the slot itself is a plain block, and
 * its children are `display: flex`, so the second item wraps onto its own
 * line. Make the slot a flex row and space the two the way the icon group
 * spaces the icons inside it.
 */
.header-article-items__end {
    align-items: center;
    display: flex;
    gap: 1.12rem;
}