/* uCheck brand theming for the API documentation.
   Palette and fonts taken from https://www.ucheck.co.uk/ (Figtree + Source
   Sans Pro; brand blue #0094dd, dark navy #112E51, orange #f28e00). */

@import url("https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=Source+Sans+Pro:wght@400;700;900&display=swap");

:root {
    /* uCheck brand palette */
    --uc-blue: #0094dd;
    --uc-dark-blue: #112e51;
    --uc-light-blue: #66c5ee;
    --uc-orange: #f28e00;
    --uc-light-orange: #f7bd66;
    --uc-green: #b9c849;
    --uc-gray: #2b2a29;
    --uc-light-gray: #ededed;

    --font-stack: "Figtree", "Source Sans Pro", -apple-system, BlinkMacSystemFont,
        "Segoe UI", Helvetica, Arial, sans-serif;
    --font-stack--headings: "Figtree", "Source Sans Pro", sans-serif;
}

/* Light theme brand colours */
body {
    --color-brand-primary: var(--uc-dark-blue);
    --color-brand-content: var(--uc-blue);
    --color-brand-visited: var(--uc-blue);
}

/* Dark theme brand colours (lighter for contrast) */
body[data-theme="dark"] {
    --color-brand-primary: var(--uc-light-blue);
    --color-brand-content: var(--uc-light-blue);
    --color-brand-visited: var(--uc-light-blue);
}

@media (prefers-color-scheme: dark) {
    body:not([data-theme="light"]) {
        --color-brand-primary: var(--uc-light-blue);
        --color-brand-content: var(--uc-light-blue);
        --color-brand-visited: var(--uc-light-blue);
    }
}

/* Headings in the uCheck dark navy, brand font */
h1, h2, h3, h4, h5, h6,
.sidebar-brand-text {
    font-family: var(--font-stack--headings);
}

h1, h2, h3 {
    color: var(--uc-dark-blue);
}

body[data-theme="dark"] h1,
body[data-theme="dark"] h2,
body[data-theme="dark"] h3 {
    color: var(--uc-light-blue);
}

/* Orange accent for the top heading underline / brand touch */
h1 {
    border-bottom: 3px solid var(--uc-orange);
    padding-bottom: 0.2em;
}

/* Always present the logo on the uCheck dark navy, in both themes, so the
   gradient wordmark reads consistently. */
.sidebar-logo-container {
    background: var(--uc-dark-blue);
    border-radius: 8px;
    padding: 16px 20px;
    margin: 0 auto;
}

.sidebar-logo {
    max-width: 100%;
    margin: 0 auto;
}

/* Admonition + code accents in brand colours */
a.reference:hover {
    color: var(--uc-orange);
}

/* Important note text shown in red, matching the source documents. */
.uc-important {
    color: #e0312b;
    font-weight: 600;
}

/* Center Mermaid diagrams and give them a little breathing room */
.mermaid {
    text-align: center;
    margin: 1.5rem 0;
}

.mermaid svg {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
}

/* Mermaid draws flowchart labels as HTML inside the SVG, so the page's global
   Figtree font cascades onto them. Figtree loads asynchronously, so Mermaid
   measures each node box in the fallback font and then draws the label in the
   (wider) Figtree once it arrives — clipping the text. Pin the label font to an
   always-available system stack so measurement and drawing use identical
   metrics. This changes font-family only (not size), so box sizing is
   unaffected and nothing shrinks. */
.mermaid .nodeLabel,
.mermaid .nodeLabel *,
.mermaid .edgeLabel,
.mermaid .edgeLabel *,
.mermaid .label,
.mermaid .label * {
    font-family: system-ui, -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}