/* SpatialData specification — theme customisation (sphinx-book-theme, built on pydata-sphinx-theme) */

html {
    --pst-color-primary: #1f6f8b;
    --pst-color-secondary: #b45309;
    --pst-color-link: #1f6f8b;
    --pst-color-link-hover: #b45309;
    --pst-font-size-base: 1rem;
    --sd-color-primary: #1f6f8b;
    --sd-color-secondary: #b45309;
}

html[data-theme="dark"] {
    --pst-color-primary: #5fb3cf;
    --pst-color-secondary: #f59e0b;
    --pst-color-link: #5fb3cf;
    --pst-color-link-hover: #f59e0b;
}

/* Announcement banner: keep it quiet */
.bd-header-announcement {
    font-size: 0.85rem;
    background: var(--pst-color-secondary-bg, #fff7ed);
}

/* Tables: compact, spec style */
table.table,
.bd-content table.docutils {
    font-size: 0.9rem;
}

.bd-content table.docutils th {
    background: var(--pst-color-surface);
    white-space: nowrap;
}

.bd-content table.docutils td code,
.bd-content table.docutils th code {
    white-space: nowrap;
}

/* Inline code: slightly tighter */
code.literal {
    padding: 0.05em 0.3em;
    font-size: 0.9em;
}

/* ASCII trees and JSON */
div.highlight pre {
    font-size: 0.85rem;
    line-height: 1.4;
}

/* Custom admonitions ------------------------------------------------------ */

/* Non-normative implementation guidance: clearly "not the format" */
.admonition.implementation-note {
    border-color: var(--pst-color-secondary);
}
.admonition.implementation-note > .admonition-title {
    background-color: rgba(180, 83, 9, 0.12);
}
.admonition.implementation-note > .admonition-title::before {
    content: "\f0eb"; /* lightbulb */
    color: var(--pst-color-secondary);
}

/* Known divergence from NGFF */
.admonition.ngff-divergence {
    border-color: #7c3aed;
}
.admonition.ngff-divergence > .admonition-title {
    background-color: rgba(124, 58, 237, 0.12);
}
.admonition.ngff-divergence > .admonition-title::before {
    content: "\f126"; /* code-branch */
    color: #7c3aed;
}

/* Data model text included in the storage format (_ext/data_model_blocks.py) */
.bd-content div.data-model-text {
    /* a docutils "container" also gets Bootstrap's .container sizing; undo it */
    max-width: none;
    margin: 0 0 1rem;
    padding: 0 0 0 1rem;
    border-left: 3px solid var(--pst-color-primary);
}
.bd-content div.data-model-text::before {
    content: "Data model";
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--pst-color-primary);
    margin-bottom: 0.25rem;
}

/* RFC process figure (contributing guide): the steps flow around it; on narrow screens it stands alone */
.bd-content img.rfc-figure {
    margin: 0.25rem 0 1rem 1.5rem;
}
.bd-content section#versions-and-releases {
    clear: both;
}
@media (max-width: 720px) {
    .bd-content img.rfc-figure {
        float: none;
        display: block;
        margin: 1rem auto;
    }
}

/* Requirement-level keywords ------------------------------------------- */
.rfc {
    font-variant: small-caps;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* Landing page cards */
.sd-card .sd-card-title {
    font-size: 1.1rem;
}
.sd-card-body p:last-child {
    margin-bottom: 0;
}

/* Field lists used for key/value metadata descriptions */
dl.field-list > dt {
    font-family: var(--pst-font-family-monospace);
    font-weight: 600;
    background: var(--pst-color-surface);
    padding: 0.1em 0.4em;
}

/* Version badges in headings */
h1 .sd-badge,
h2 .sd-badge {
    vertical-align: middle;
    font-size: 0.55em;
    margin-left: 0.5em;
}

/* Badges in dark mode: sphinx-design's "dark" and "light" colours vanish on a dark background */
html[data-theme="dark"] .sd-badge.sd-outline-dark {
    border-color: #9ca3af !important;
    color: #e5e7eb !important;
}

html[data-theme="dark"] .sd-badge.sd-bg-light {
    background-color: #374151 !important;
    color: #e5e7eb !important;
}

/* Permalinks on rubrics inside tabs (added by js/tab-permalinks.js) */
.sd-tab-content .rubric > a.headerlink {
    margin-left: 0.3em;
    visibility: hidden;
}
.sd-tab-content .rubric:hover > a.headerlink {
    visibility: visible;
}

/* Figures reused from the SpatialData tutorials: drawn for a light background */
figure.spec-figure img {
    background: #fff;
    border-radius: 0.25rem;
    padding: 0.5rem;
}

/* Logo: the SpatialData icon next to the site title ---------------------- */

.navbar-brand.logo {
    flex-direction: row;
    align-items: center;
    gap: 0.6rem;
}
.navbar-brand.logo img.logo__image {
    height: 2.5rem;
    width: auto;
    margin: 0;
}
.navbar-brand.logo .logo__title {
    text-align: left;
}

/* the same icon in front of the landing page heading */
h1:has(> img.heading-icon) {
    display: flex;
    align-items: center;
    gap: 0.5em;
}
h1 img.heading-icon {
    height: 2.4em;
    width: auto;
    flex-shrink: 0;
}

/* Footnotes at their references (_ext/footnote_previews.py) ----------------- */

/* on screen, each footnote shows on hover or keyboard focus of its reference, and the list of
   footnotes (with its "Notes" section and its entry in the page contents) is hidden; printing
   shows the list instead */
.footnote-anchor {
    position: relative;
}
.footnote-preview {
    display: none;
}
@media screen {
    hr.footnotes,
    aside.footnote-list,
    section.footnote-section,
    body:has(section.footnote-section#notes)
        .bd-toc
        li:has(> a[href="#notes"]) {
        display: none;
    }
    .footnote-anchor:hover > .footnote-preview,
    .footnote-anchor:focus-within > .footnote-preview {
        display: block;
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 1000;
        width: max-content;
        max-width: min(28rem, calc(100vw - 2rem));
        padding: 0.6rem 0.8rem;
        font-size: 0.9rem;
        font-weight: normal;
        line-height: 1.5;
        color: var(--pst-color-text-base);
        background: var(--pst-color-surface);
        border: 1px solid var(--pst-color-border);
        border-radius: 0.375rem;
        box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
        white-space: normal;
    }
}

/* footnotes of a table show as previews too, on screen; the table's scroll container (wide tables
   scroll sideways) would clip them, so they are placed relative to the viewport, at their
   reference. Printing shows them below the table, as table notes; so does the screen of a browser
   without anchor positioning, instead of the previews */
@media screen {
    table .footnote-anchor {
        anchor-name: --footnote-anchor;
        anchor-scope: --footnote-anchor;
    }
    table .footnote-anchor:hover > .footnote-preview,
    table .footnote-anchor:focus-within > .footnote-preview {
        position: fixed;
        position-anchor: --footnote-anchor;
        inset: auto;
        /* below the reference (above, if there is no room), centred on it but kept in the viewport */
        position-area: block-end span-all;
        justify-self: anchor-center;
        position-try-fallbacks: flip-block;
        margin-inline: 0.5rem;
        text-align: left;
    }
}
@supports not ((anchor-name: --a) and (anchor-scope: --a)) {
    table .footnote-preview {
        display: none !important;
    }
    @media screen {
        aside.footnote-list:has(> .table-note) {
            display: block;
        }
    }
}
.bd-content aside.footnote-list:has(> .table-note) {
    margin: -0.5rem 0 1rem;
    font-size: 0.85rem;
    color: var(--pst-color-text-muted);
}

/* Versions in the main navigation (_ext/static_nav.py) ------------------------------ */

/* the versions below the entries of the abstract data model and the storage format: a line of
   text links, the selected one in the colour and weight of the current page */
.bd-sidenav li.spec-versions-row {
    padding-left: 1rem;
}
.bd-sidenav ul.spec-versions {
    display: flex;
    flex-wrap: wrap;
    column-gap: 0.6rem;
    list-style: none;
    margin: 0;
    padding: 0 !important;
}
.bd-sidenav ul.spec-versions a {
    padding: 0.15rem 0;
    color: var(--pst-color-text-muted);
}
.bd-sidenav ul.spec-versions li.selected a {
    color: var(--pst-color-primary);
    font-weight: 600;
}

/* Funding logos on the landing page ------------------------------------- */

.funding-logos {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    align-items: center;
    margin: 1rem 0;
}

/* Icons, written into the pages as SVG by build.py (inline_icons) ---------- */

/* what Font Awesome's script would add, which the site no longer loads */
.svg-inline--fa {
    display: inline-block;
    box-sizing: content-box;
    height: 1em;
    overflow: visible;
    vertical-align: -0.125em;
}
.svg-inline--fa.fa-fw {
    width: 1.25em;
}
.svg-inline--fa.fa-lg {
    font-size: 1.25em;
    line-height: 0.05em;
    vertical-align: -0.2em;
}