/*
 * 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);
}

/* --- Navbar ------------------------------------------------------------- */

.bd-header ul.navbar-nav > li.nav-item {
    /* Like the website: the current link is plain text, marked only by its accent underline. */
    &.current > .nav-link {
        color: var(--scverse-color-text);
    }

    &.current > .nav-link::before,
    & > .nav-link:hover::before {
        border-bottom-color: var(--scverse-color-accent-decorative);
    }
}

.navbar-brand img {
    max-height: 2.2rem;
}

/* Sized like the real glyphs beside it:
 * https://github.com/pydata/pydata-sphinx-theme/blob/main/src/pydata_sphinx_theme/assets/styles/components/_icon-links.scss
 */
.navbar-icon-links .fa-scverse {
    display: inline-block;
    font-size: var(--pst-font-size-icon);
    width: 1em;
    height: 1em;
    vertical-align: middle;
    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);
    }

    .dropdown-header {
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--pst-color-text-muted);
    }
}

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

/* pydata hides the sidebar when it has no toctree (e.g. the root page), but the version selector should stay */
@media (min-width: 960px) {
    .bd-sidebar-primary.hide-on-wide:has(readthedocs-flyout) {
        display: flex;
    }
}
.sidebar-primary-item:has(> :only-child:empty) {
    display: none;
}
.sidebar-primary-item 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-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;
}

/* --- 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);
}

/* --- 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);
}