/*
    Stylesheet for the pycdlib API reference page.

    The HTML is generated by custom-pydoc.py (a fork of pydoc) and uses a
    fixed set of class names: .heading, .section, .section-title,
    .bigsection, .title, .heading-text, .code, .singlecolumn, .multicolumn,
    .grey, .repr, .white, and a family of .decor variants
    (.title-decor, .index-decor, .functions-decor, .data-decor,
    .pkg-content-decor, .author-decor, .credits-decor, .error-decor).

    The original upstream theme paints each .decor variant in a different
    bright color (pink, orange, green, purple, ...).  This stylesheet
    instead uses a single neutral accent and lets typography and spacing
    carry the structure.  Colors are chosen to match the rest of the
    pycdlib documentation site, which is rendered by GitHub Pages with
    the jekyll-theme-slate theme:

      - body / content background: #f2f2f2
      - body text: #373737
      - headings: #222222
      - links / accent: #0F79D0
      - dark-mode chrome: #212121
*/

:root {
    --bg: #f2f2f2;
    --fg: #373737;
    --heading: #222222;
    --muted: #666666;
    --accent: #0F79D0;
    --accent-soft: #d6e9f8;
    --border: #d4d4d4;
    --surface: #ffffff;
    --code-fg: #222222;
    --code-bg: #ffffff;
    --link: #0F79D0;
    --link-hover: #0a5ba0;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #212121;
        --fg: #d8d8d8;
        --heading: #f2f2f2;
        --muted: #9a9a9a;
        --accent: #4aa3e8;
        --accent-soft: #1a3247;
        --border: #3a3a3a;
        --surface: #2a2a2a;
        --code-fg: #e6e6e6;
        --code-bg: #1a1a1a;
        --link: #4aa3e8;
        --link-hover: #79bdf0;
    }
}

html {
    box-sizing: border-box;
}
*, *::before, *::after {
    box-sizing: inherit;
}

body {
    background-color: var(--bg);
    color: var(--fg);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.55;
    margin: 0 auto;
    padding: 1.5rem clamp(1rem, 4vw, 2.5rem);
    max-width: 1100px;
}

a {
    color: var(--link);
    text-decoration: none;
}
a:hover {
    color: var(--link-hover);
    text-decoration: underline;
}

hr {
    border: 0;
    border-top: 1px solid var(--border);
    margin: 1.5rem 0;
}

p {
    margin: 0.75rem 0;
}

/* Tables: pydoc uses tables for layout; reset to a clean default. */
table {
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
    border: 0;
}

td {
    padding: 0.25rem 0.4rem;
    vertical-align: top;
}

td.singlecolumn {
    width: 100%;
}
td.multicolumn {
    width: 25%;
    vertical-align: top;
}

/* Page heading (module name banner) */
table.heading {
    border-bottom: 1px solid var(--border);
    margin-bottom: 1rem;
}
table.heading td {
    padding: 0.5rem 0;
}
td.title {
    vertical-align: bottom;
}
td.extra {
    vertical-align: bottom;
    text-align: right;
    color: var(--muted);
    font-size: 0.9em;
}

/* Section tables (Classes, Functions, Data, Methods, ...) */
table.section {
    margin: 1.5rem 0;
}
td.section-title {
    border-bottom: 2px solid var(--accent);
    padding: 0.75rem 0 0.5rem 0;
    vertical-align: bottom;
}

/*
   .decor used to paint the colored stripe on the left of every section
   row.  Flatten to a thin neutral accent so the page reads as one
   document instead of a stack of differently-colored boxes.
*/
.decor {
    background: transparent !important;
    color: var(--fg);
}
tr.decor td.section-title {
    background: transparent;
}
td.decor {
    width: 0.5rem;
    border-left: 3px solid var(--accent-soft);
    padding-left: 0;
}

/* .white was originally needed so links stayed readable on dark
   colored banners; now banners are transparent, so just inherit. */
.white {
    color: inherit !important;
}

/* Typography */
.heading-text {
    font-family: inherit;
}
.title {
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--heading);
}
.bigsection {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--heading);
    text-transform: none;
    letter-spacing: 0;
}

/* Code (signatures, identifiers, default values) */
.code, span.code, code, kbd, samp, tt {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo,
                 Consolas, "Liberation Mono", monospace;
    font-size: 0.92em;
    color: var(--code-fg);
}
span.code {
    white-space: pre-wrap;
    word-break: break-word;
}

/* Definition lists hold method signatures (dt) and docstrings (dd) */
dl {
    margin: 0.5rem 0;
}
dl dt {
    margin-top: 0.75rem;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo,
                 Consolas, "Liberation Mono", monospace;
    font-size: 0.95em;
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    overflow-x: auto;
}
dl dd {
    margin: 0.4rem 0 0.4rem 0.5rem;
    color: var(--fg);
    line-height: 1.55;
}
/* Nested definition lists (e.g., Methods inherited from ...) */
dl dl dt {
    background: transparent;
    padding-left: 0;
}

/* Strong used heavily for identifiers; keep them legible but unobtrusive */
strong {
    font-weight: 600;
}

/* Misc text classes */
.grey {
    color: var(--muted);
}
.repr {
    color: var(--accent);
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo,
                 Consolas, "Liberation Mono", monospace;
}

/* Small-screen tweak: drop the section-title left padding so the header
   doesn't feel inset on phones. */
@media (max-width: 600px) {
    body {
        padding: 1rem;
    }
    .title {
        font-size: 1.35rem;
    }
}