/*
 * custom.css
 * Aligns the Sphinx docs with the look of the Xplain Data website
 * (dark navigation, cream content area, Epilogue / DM Sans, teal + blue accents).
 * Loaded after the theme CSS and xplain_docs.css, so it only overrides - the theme stays untouched.
 */

/* Self-hosted variable fonts (latin subset, SIL Open Font License) - no requests to Google */
@font-face {
    font-family: "DM Sans";
    font-style: normal;
    font-weight: 100 1000;
    font-display: swap;
    src: url("fonts/DMSans-latin.woff2") format("woff2");
}

@font-face {
    font-family: "Epilogue";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("fonts/Epilogue-latin.woff2") format("woff2");
}

:root {
    --xd-white: #ffffff;
    --xd-teal: #68ccc6;
    --xd-blue: #3e96f8;
    --xd-blue-dark: #2b7fdc;
    --xd-navy: #0e172d;
    --xd-dark: #0f0f0f;
    --xd-dark-teal: #162727;
    --xd-gray: #7e8b99;
    --xd-gray-light: #b3b9c1;
    --xd-cream: #fdfcf6;
    --xd-sand: #ebebe9;
    --xd-text: #2a3242;
    --xd-font-body: "DM Sans", "Helvetica Neue", Arial, sans-serif;
    --xd-font-head: "Epilogue", "DM Sans", "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Base ---------- */

body,
.wy-body-for-nav {
    font-family: var(--xd-font-body);
    color: var(--xd-text);
    background: var(--xd-dark);
}

.wy-nav-content-wrap,
.wy-nav-content {
    background: var(--xd-cream);
}

.wy-nav-content {
    max-width: 1200px;
    padding: 2.5em 3.5em;
}

.rst-content p,
.rst-content li,
.rst-content dd {
    font-size: 16px;
    line-height: 1.65;
}

/* ---------- Headings ---------- */

h1, h2, h3, h4, h5, h6,
.rst-content .toctree-wrapper > p.caption {
    font-family: var(--xd-font-head);
    font-weight: 400;
    color: var(--xd-navy);
    letter-spacing: -0.01em;
}

.rst-content h1 {
    font-size: 2.5em;
    line-height: 1.15;
    margin-bottom: 0.8em;
}

.rst-content h2 {
    font-size: 1.85em;
    line-height: 1.2;
    margin-top: 1.6em;
}

.rst-content h3 {
    font-size: 1.4em;
}

.rst-content h4,
.rst-content h5,
.rst-content h6 {
    font-family: var(--xd-font-body);
    font-weight: 500;
}

/* Links inside headings (e.g. index overview) keep the heading colour */
.rst-content h1 a,
.rst-content h2 a,
.rst-content h3 a {
    color: inherit;
}

.rst-content h1 a:hover,
.rst-content h2 a:hover,
.rst-content h3 a:hover {
    color: var(--xd-blue);
}

/* "Web API" section headings previously had a light blue bar */
#web-api h2 {
    background: transparent;
    color: var(--xd-navy);
    padding: 0 0 0.4em;
    border-bottom: 1px solid var(--xd-sand);
}

/* ---------- Links ---------- */

a,
a:visited {
    color: var(--xd-blue);
}

a:hover {
    color: var(--xd-blue-dark);
}

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

.wy-nav-side {
    background: var(--xd-dark);
    background-image: linear-gradient(180deg, var(--xd-dark) 0%, var(--xd-dark-teal) 100%);
}

.wy-side-nav-search {
    background-color: transparent;
    border-bottom: 1px solid rgba(104, 204, 198, 0.2);
    padding: 1.4em 0.809em 1.2em;
}

.wy-side-nav-search > a img.logo {
    max-width: 75%;
}

.wy-side-nav-search input[type="text"] {
    font-family: var(--xd-font-body);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(104, 204, 198, 0.45);
    border-radius: 0;
    color: var(--xd-white);
    box-shadow: none;
    padding: 7px 12px;
}

.wy-side-nav-search input[type="text"]::placeholder {
    color: var(--xd-gray-light);
}

.wy-side-nav-search input[type="text"]:focus {
    border-color: var(--xd-teal);
    outline: none;
}

.wy-menu-vertical {
    font-family: var(--xd-font-body);
}

/* Section captions: teal, uppercase, tracked - like the website eyebrow labels */
.wy-menu-vertical p.caption,
p.caption {
    color: var(--xd-teal) !important;
    font-family: var(--xd-font-body);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-top: 24px;
}

/* Toctree captions inside the page content (e.g. start page) act as section headings */
.rst-content .toctree-wrapper > p.caption {
    color: var(--xd-navy) !important;
    font-family: var(--xd-font-head);
    font-size: 1.85em;
    font-weight: 400;
    letter-spacing: -0.01em;
    text-transform: none;
    margin-top: 1.6em;
    margin-bottom: 0.6em;
}

.wy-menu-vertical a {
    color: #d5dae0;
    font-weight: 300;
}

.wy-menu-vertical a:hover {
    background-color: rgba(104, 204, 198, 0.1);
    color: var(--xd-white);
}

/* Expanded subtree of the current page: light panel with dark text */
.wy-menu-vertical li.current {
    background: var(--xd-sand);
}

.wy-menu-vertical li.current a {
    color: var(--xd-text);
}

.wy-menu-vertical li.current > a,
.wy-menu-vertical li.on a {
    background: var(--xd-cream);
    color: var(--xd-navy);
    font-weight: 500;
    border: none;
    border-left: 3px solid var(--xd-teal);
}

.wy-menu-vertical li.current > a:hover,
.wy-menu-vertical li.on a:hover {
    background: var(--xd-white);
}

.wy-menu-vertical li.toctree-l2.current > a,
.wy-menu-vertical li.toctree-l2.current li.toctree-l3 > a,
.wy-menu-vertical li.toctree-l3.current > a,
.wy-menu-vertical li.toctree-l3.current li.toctree-l4 > a {
    background: var(--xd-sand);
    color: var(--xd-navy);
}

.wy-menu-vertical li.current a {
    border-right: none;
}

.wy-menu-vertical li.toctree-l2 a,
.wy-menu-vertical li.toctree-l3 a,
.wy-menu-vertical li.toctree-l4 a {
    color: var(--xd-text);
}

.wy-menu-vertical li.current a:hover {
    background: #dfe0dc;
}

/* Mobile top bar */
.wy-nav-top {
    background: var(--xd-dark);
    font-family: var(--xd-font-body);
}

.wy-nav-top a {
    color: var(--xd-white);
}

/* ---------- Breadcrumbs ---------- */

.wy-breadcrumbs {
    font-size: 13px;
    letter-spacing: 0.04em;
    color: var(--xd-gray);
}

.wy-breadcrumbs li a {
    color: var(--xd-blue);
}

.rst-content hr,
.wy-nav-content hr {
    border-top-color: var(--xd-sand);
}

/* ---------- Buttons (prev / next) ---------- */

.btn,
.btn-neutral {
    font-family: var(--xd-font-body);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 0;
    box-shadow: none;
    padding: 12px 16px;
}

.btn-neutral,
.btn-neutral:visited {
    background-color: var(--xd-blue) !important;
    color: var(--xd-white) !important;
    border: 1px solid var(--xd-blue);
}

.btn-neutral:hover {
    background-color: var(--xd-blue-dark) !important;
    color: var(--xd-white) !important;
}

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

.rst-content code,
.rst-content tt,
.rst-content code.literal,
.rst-content tt.literal {
    background: var(--xd-white);
    border: 1px solid var(--xd-sand);
    border-radius: 2px;
    color: var(--xd-navy);
    font-size: 85%;
}

.rst-content div[class^="highlight"],
.rst-content pre.literal-block {
    border: 1px solid var(--xd-sand);
    border-left: 3px solid var(--xd-teal);
    border-radius: 0;
    background: var(--xd-white);
}

.rst-content div[class^="highlight"] pre,
.rst-content pre.literal-block {
    background: var(--xd-white);
}

/* ---------- Tables ---------- */

.rst-content table.docutils,
.wy-table-bordered-all {
    border: 1px solid var(--xd-sand);
}

.rst-content table.docutils thead th,
.rst-content table.docutils th {
    background: var(--xd-navy);
    color: var(--xd-white);
    font-weight: 500;
    border-color: var(--xd-navy);
}

.rst-content table.docutils td {
    border-color: var(--xd-sand);
    background: var(--xd-white);
}

.rst-content table.docutils:not(.field-list) tr:nth-child(2n-1) td,
.wy-table-backed,
.wy-table-odd td,
.wy-table-striped tr:nth-child(2n-1) td {
    background: #f6f5ef;
}

/* ---------- Admonitions ---------- */

.rst-content .admonition,
.rst-content .note,
.rst-content .tip,
.rst-content .hint,
.rst-content .important,
.rst-content .warning,
.rst-content .attention,
.rst-content .caution,
.rst-content .danger,
.rst-content .error {
    background: var(--xd-white);
    border-left: 3px solid var(--xd-blue);
}

.rst-content .admonition-title {
    font-family: var(--xd-font-body);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 13px;
}

.rst-content .note .admonition-title,
.rst-content .hint .admonition-title,
.rst-content .important .admonition-title,
.rst-content .seealso .admonition-title {
    background: var(--xd-blue);
}

.rst-content .tip .admonition-title {
    background: var(--xd-teal);
    color: var(--xd-navy);
}

.rst-content .tip {
    border-left-color: var(--xd-teal);
}

.rst-content .warning,
.rst-content .attention,
.rst-content .caution {
    border-left-color: #ffc65b;
}

/* ---------- API signatures ---------- */

.rst-content dl:not(.docutils) dt,
html.writer-html4 .rst-content dl:not(.docutils) > dt,
html.writer-html5 .rst-content dl[class]:not(.option-list):not(.field-list):not(.footnote):not(.citation):not(.glossary):not(.simple) > dt {
    background: rgba(62, 150, 248, 0.08);
    border-top: 3px solid var(--xd-blue);
    color: var(--xd-navy);
}

/* ---------- Sphinx-panels cards ---------- */

.rst-content .card {
    border-radius: 0;
    border-color: var(--xd-sand);
}

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

footer {
    color: var(--xd-gray);
    font-size: 13px;
}

footer p {
    font-size: 13px !important;
}