/*
 * scverse theme – brand tokens mapped onto pydata-sphinx-theme, plus component styling.
 *
 * Rules of the road for editing this file:
 *
 * 1. Never hardcode a hex value here. Use a token from _tokens.css, whose light halves come from the website.
 * 2. Tokens resolve per colour scheme via light-dark(), so component rules are written once and never branch on
 *    the mode. If a component needs a dark-specific rule, the token vocabulary is missing something – add the
 *    token in _tokens.css instead.
 * 3. The raw package accent is decorative only. Text and links use the derived --scverse-color-accent-text, which
 *    the build guarantees meets WCAG AA against the current background. See scverse_doc._color.
 */

@import url("../_tokens.css");

/* Specific enough to beat pydata’s own html[data-theme="…"] token blocks. */
html[data-theme] {
    /* Primary and secondary both follow the package accent; the website has no brand primary of its own. */
    --pst-color-primary: var(--scverse-color-accent-text);
    /* Mixing towards the text colour only raises the contrast accent-text already guarantees. */
    --pst-color-primary-highlight: color-mix(
        in oklch,
        var(--scverse-color-accent-text) 80%,
        var(--scverse-color-text)
    );
    --pst-color-primary-bg: color-mix(
        in oklch,
        var(--scverse-color-accent-decorative) 20%,
        var(--scverse-color-background)
    );
    --sd-color-primary-bg: var(--pst-color-primary-bg);
    --pst-color-secondary: var(--pst-color-primary);
    --pst-color-secondary-highlight: var(--pst-color-primary-highlight);
    --pst-color-secondary-bg: var(--pst-color-primary-bg);
    --sd-color-secondary-bg: var(--pst-color-primary-bg);
    --pst-color-link: var(--pst-color-primary);
    --pst-color-link-hover: var(--pst-color-primary-highlight);
    --pst-color-link-higher-contrast: color-mix(
        in oklch,
        var(--scverse-color-accent-text) 70%,
        var(--scverse-color-text)
    );
    --pst-color-inline-code: var(--scverse-color-code-text);
    --pst-color-background: var(--scverse-color-background);
    --pst-color-text-base: var(--scverse-color-text);
    --pst-color-on-surface: var(--scverse-color-text);
    --pst-color-surface: var(--scverse-color-surface);
    --pst-color-border: var(--scverse-color-border);
    --pst-color-border-muted: var(--scverse-color-border-muted);
    --pst-color-table-row-hover-bg: var(--pst-color-secondary-bg);
    --pst-color-text-muted: var(--scverse-color-text-muted);
    --pst-color-heading: var(--scverse-color-heading);
    --pst-heading-color: var(--scverse-color-heading);
}

html {
    --pst-font-family-base: var(--scverse-font-body);
    --pst-font-family-heading: var(--scverse-font-body);
    --pst-font-family-monospace: var(--scverse-font-mono);
}

/* --- Header ------------------------------------------------------------- */

/* The navbar is empty unless a `navbar_*` option fills it (see theme.toml).
 * Then drop it, let the sidebars stick to the top of the viewport,
 * and make the article header sticky like sphinx-book-theme’s, since it holds the controls instead. */
html:not(:has(.bd-header__inner)) {
    --pst-header-height: 0px;
    /* pydata derives these from the header height */
    --pst-header-article-height: calc(4rem * 2 / 3);
    scroll-padding-top: calc(var(--pst-header-article-height) + 1rem);

    .bd-header {
        display: none;
    }

    /* pydata sizes the logo by the header height */
    .navbar-brand {
        --pst-header-height: auto;
    }

    /* pydata’s overflow-x would make this the sticky header’s scroll container;
     * min-width keeps wide content from pushing off the secondary sidebar instead. */
    .bd-main .bd-content .bd-article-container {
        overflow-x: unset;
        min-width: 0;
    }

    .bd-header-article {
        position: sticky;
        top: 0;
        z-index: 1020; /* Bootstrap’s $zindex-sticky */
        background-color: var(--pst-color-background);
        /* Span the article container’s padding, so content doesn’t peek out beside it */
        margin: -1rem -1rem 0;
        padding-inline: 1rem;
        box-shadow: 0 0.125rem 0.25rem 0 var(--pst-color-shadow); /* pydata’s navbar shadow */
    }
    /* Where supported, only once the page is scrolled */
    @supports (animation-timeline: scroll()) {
        .bd-header-article {
            animation: scverse-header-shadow linear both;
            animation-timeline: scroll();
            animation-range: 0 1rem;
        }
    }
}
@keyframes scverse-header-shadow {
    from {
        box-shadow: none;
    }
}
/* A filled navbar has pydata’s own sidebar toggles. Its JS only binds the first .primary-toggle/.secondary-toggle,
 * so the ones from our toggle-*-sidebar.html components further down would do nothing. */
html:has(.bd-header__inner) .bd-header-article button.sidebar-toggle {
    display: none;
}

.bd-header-article {
    /* pydata pushes __end right with margin-left: auto, but never makes this a flex container */
    .header-article-items,
    .header-article-items__start,
    .header-article-items__end,
    .header-article-item {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    /* Bootstrap’s list margin would push them off-centre */
    ul.bd-breadcrumbs {
        margin: 0;
    }

    /* Space the icon links like the buttons beside them */
    ul.navbar-icon-links {
        column-gap: 0.5rem;
    }

    /* On narrow screens, wrap the breadcrumbs instead of the buttons */
    .header-article-items__start {
        min-width: 0;
    }
    .header-article-items__end {
        flex-shrink: 0;
    }

    /* pydata only styles these inside .bd-header */
    button.sidebar-toggle {
        font-size: var(--pst-font-size-icon);
        color: var(--pst-color-text-muted);
        background-color: inherit;
        border: none;
        padding: 0.5rem;
    }
    /* pydata’s $breakpoint-sidebar-primary (lg) and $breakpoint-sidebar-secondary (xl) */
    @media (min-width: 960px) {
        button.primary-toggle {
            display: none;
        }
    }
    @media (min-width: 1200px) {
        button.secondary-toggle {
            display: none;
        }
    }
}
.bd-main:not(:has(#pst-secondary-sidebar)) button.secondary-toggle {
    display: none;
}

/* ``fa-scverse`` is not a real Font Awesome glyph – the synced logo is masked into it. */
.fa-scverse {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em; /* like Font Awesome’s .svg-inline--fa */
    background-color: currentColor;
    mask: url("../scverse-fa.svg") center / contain no-repeat;
}

.scverse-ecosystem-dropdown {
    .dropdown-menu {
        max-height: 70vh;
        overflow-y: auto;
        border-radius: var(--scverse-radius);
        box-shadow: var(--scverse-shadow);
    }

    :is(h1, h2, h3, h4, h5, h6).dropdown-header {
        margin: 0; /* pydata’s heading margins */
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--pst-color-text-muted);
    }
}

/* Bootstrap’s dropdown link colours, as specific as pydata’s a:visited(:hover), so they win by coming later */
a.dropdown-item {
    color: var(--bs-dropdown-link-color);

    &:hover {
        color: var(--bs-dropdown-link-hover-color);
    }
    &:is(.active, :active) {
        color: var(--bs-dropdown-link-active-color);
    }
}

/* --- Sidebar ------------------------------------------------------------ */

.sidebar-primary-item {
    /* Hide empty sidebar items; this:
     * excludes defined custom elements (which only contain Shadow DOM)
     * includes an empty ad container
     */
    &:has(> :only-child:empty:not(readthedocs-flyout:defined)),
    &:has(> #ethical-ad-placement):not(:has(> #ethical-ad-placement > *)) {
        display: none;
    }

    /* for visual consistency, make the search field fill the sidebar */
    .search-button-field {
        width: 100%;
    }
}

readthedocs-flyout {
    --readthedocs-flyout-background-color: transparent;
    --readthedocs-flyout-font-family: inherit;
    --readthedocs-flyout-divider-color: var(--scverse-color-border);
    --readthedocs-flyout-color: var(--scverse-color-text-muted);
    --readthedocs-flyout-current-version-color: var(
        --scverse-color-accent-text
    );
    --readthedocs-flyout-section-heading-color: var(--scverse-color-text-muted);
    --readthedocs-flyout-link-color: var(--pst-color-link-higher-contrast);
    --readthedocs-flyout-item-link-color: var(--pst-color-link);

    padding: 0;
}

/* --- Search ------------------------------------------------------------- */

readthedocs-search {
    --readthedocs-search-font-family: var(--scverse-font-body);
    --readthedocs-search-code-font-family: var(--scverse-font-mono);
    --readthedocs-search-color: var(--scverse-color-text);
    --readthedocs-search-link-color: var(--pst-color-link);
    --readthedocs-search-content-background-color: var(
        --scverse-color-background
    );
    --readthedocs-search-content-border-color: var(--scverse-color-border);
    --readthedocs-search-filters-border-color: var(--scverse-color-border);
    --readthedocs-search-input-background-color: var(
        --scverse-color-surface-alt
    );
    --readthedocs-search-footer-background-color: var(
        --scverse-color-footer-bg
    );
    --readthedocs-search-footer-color: var(--scverse-color-text-muted);
    --readthedocs-search-footer-code-background-color: var(
        --scverse-color-code-bg
    );
    --readthedocs-search-footer-code-border-color: var(
        --scverse-color-border-muted
    );
    --readthedocs-search-result-background-color: var(
        --scverse-color-background
    );
    --readthedocs-search-result-active-background-color: var(
        --pst-color-primary-bg
    );
    --readthedocs-search-result-border-color: var(--scverse-color-border-muted);
    --readthedocs-search-result-color: var(--scverse-color-text);
    --readthedocs-search-result-heading-color: var(--scverse-color-heading);
    --readthedocs-search-result-subheading-color: var(
        --scverse-color-text-secondary
    );
    --readthedocs-search-result-highlight-color: var(
        --scverse-color-accent-text
    );
    --readthedocs-search-result-icon-color: var(--scverse-color-text-muted);
    --readthedocs-search-badge-background-color: var(--pst-color-primary-bg);
    --readthedocs-search-badge-color: var(--scverse-color-text);
}

/* --- Cards -------------------------------------------------------------- */

/* .bd-content exists to beat sphinx-design in selector specificity */
.bd-content .sd-card {
    border-radius: var(--scverse-radius);
    border-color: var(--pst-color-border);
    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease;

    .sd-card-title {
        color: var(--pst-heading-color);
    }

    &:hover {
        transform: translateY(-2px);
        box-shadow: var(--scverse-shadow);

        .sd-card-title {
            color: var(--scverse-color-accent-text);
        }
    }
}

/* --- Code --------------------------------------------------------------- */

code.literal {
    background-color: var(--scverse-color-code-bg);
    border-radius: calc(var(--scverse-radius) / 2);
}

/* --- Config values ------------------------------------------------------ */

/* Type and default on one line, instead of a grid row each */
dl.confval > dd > dl.field-list:first-child {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 1.5rem;
    margin-block-end: 0.5rem;
    color: var(--pst-color-text-muted);

    > dt {
        padding: 0;
        background: none;
        margin-inline-end: -1rem; /* pull the value up to its label */
    }
    > dd,
    > dd > p {
        margin: 0;
    }
}

/* --- Footer ------------------------------------------------------------- */

.bd-footer {
    background-color: var(--scverse-color-footer-bg);
    border-top: 1px solid var(--pst-color-border);
}

.scverse-footer-brand {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1rem;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    color: var(--pst-color-text-muted);
}