/*
 * CGS — Dokka theme.
 *
 * Loaded after Dokka's own style.css, so it works by re-pointing Dokka's custom properties rather
 * than fighting its selectors. Dokka carries light values on `:root` and swaps them on `.theme-dark`
 * (set on <html>), so every color below is defined in both places.
 */

:root {
    /* Brand — the same tokens the SDK's own design system ships with. */
    --cgs-brand: #9747ff;
    --cgs-brand-strong: #370080;
    --cgs-brand-soft: #d4b2ff;
    --cgs-accent: #8febdb;
    --cgs-ink: #27282c;

    /* Top navigation and the surfaces that follow it. */
    --color-dark: #2b0064;
    --dark-mode-and-search-icon-color: #ffffff;

    /* Body text stays neutral — Dokka derives it from --color-dark by default, which would tint
       every brief description purple. */
    --average-color: var(--cgs-ink);
    --brief-color: #5a6472;
    --breadcrumb-font-color: #6b7280;
    --copy-icon-color: rgba(39, 40, 44, 0.55);
    --copy-icon-hover-color: var(--cgs-brand-strong);

    --hover-link-color: var(--cgs-brand);
    --navigation-highlight-color: rgba(151, 71, 255, 0.09);
    --sidemenu-section-active-color: var(--cgs-brand-strong);
    --active-tab-border-color: var(--cgs-brand);
    --active-section-color: var(--cgs-brand-strong);

    --code-background: rgba(151, 71, 255, 0.06);
    --border-color: rgba(39, 40, 44, 0.14);

    --footer-background: #f6f4fa;
    --footer-font-color: #5a6472;

    /* Prose is the point of these pages — give it room and air. */
    --max-width: 1360px;
    --default-font-size: 15.5px;
    --horizontal-spacing-for-content: 24px;
}

.theme-dark {
    --color-dark: #1d1b22;
    --background-color: #17161a;

    --average-color: rgba(255, 255, 255, 0.96);
    --brief-color: hsla(0, 0%, 100%, 0.55);
    --breadcrumb-font-color: #9a94a6;
    --copy-icon-hover-color: var(--cgs-brand-soft);

    --hover-link-color: var(--cgs-brand-soft);
    --navigation-highlight-color: rgba(212, 178, 255, 0.10);
    --sidemenu-section-active-color: #2c1f45;
    --active-tab-border-color: var(--cgs-brand-soft);
    --active-section-color: var(--cgs-brand-soft);

    --code-background: rgba(212, 178, 255, 0.07);
    --border-color: hsla(0, 0%, 100%, 0.16);

    --footer-background: rgba(212, 178, 255, 0.05);
}

/* --- Navigation ------------------------------------------------------------------------------ */

.navigation {
    background: linear-gradient(90deg, #2b0064 0%, #4b1497 100%);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.18);
}

.theme-dark .navigation {
    background: linear-gradient(90deg, #1d1b22 0%, #2b2237 100%);
}

.library-name--link {
    letter-spacing: -0.01em;
    font-weight: 600;
}

/* The module tabs under the header read as a toolbar rather than as body text. */
.tabs-section {
    border-bottom: 1px solid var(--border-color);
}

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

/* Dokka's own `.main-content a:not([data-name])` pins these to `inherit`, so the override has to
   match its specificity — a bare `.content a` loses. */
.main-content a:not([data-name]),
.content a {
    color: var(--cgs-brand-strong);
    text-decoration-color: rgba(151, 71, 255, 0.4);
    text-underline-offset: 2px;
}

.theme-dark .main-content a:not([data-name]),
.theme-dark .content a {
    color: var(--cgs-brand-soft);
    text-decoration-color: rgba(212, 178, 255, 0.4);
}

.main-content a:not([data-name]):hover,
.content a:hover {
    text-decoration-color: currentColor;
}

/* Headers, breadcrumbs and the side menu keep their own colors — only body links are re-tinted. */
.main-content .cover h1 a,
.breadcrumbs a,
.sideMenuPart a {
    color: inherit;
}

/* The left rail marks where you are without shouting about it. */
.sideMenuPart[data-active] > .overview > .sideMenuPart__row {
    border-left: 3px solid var(--cgs-brand);
    padding-left: calc(var(--horizontal-spacing-for-content) - 3px);
}

/* --- Signatures and code --------------------------------------------------------------------- */

.symbol.monospace {
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--cgs-brand);
    border-radius: 6px;
    padding: 12px 14px;
}

.theme-dark .symbol.monospace {
    border-left-color: var(--cgs-brand-soft);
}

/* Fenced samples in KDoc — the `CGS.init(...)` blocks and friends. */
div.sample-container,
pre.runnablesample,
.content pre {
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.content pre {
    padding: 14px 16px;
    overflow-x: auto;
}

.content code:not(pre code) {
    padding: 0.1em 0.35em;
    border-radius: 4px;
    font-size: 0.92em;
}

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

/* Markdown tables in KDoc and module pages. Dokka leaves real <table> elements unstyled — its own
   member lists are `div.table`, so these selectors only ever reach hand-written tables. */
.content table {
    border-collapse: collapse;
    width: 100%;
    margin: 20px 0;
    display: block;
    overflow-x: auto;
}

.content table th,
.content table td {
    border: 1px solid var(--border-color);
    padding: 9px 14px;
    text-align: left;
    vertical-align: top;
    overflow-wrap: normal;
    word-break: normal;
}

.content table th {
    background: var(--code-background);
    font-weight: 600;
}

/* Symbol references and code spans are the narrow columns; let the prose column absorb the wrapping
   instead of breaking `CGS.content` across two lines. */
.content table td a,
.content table td code {
    white-space: nowrap;
}

/* Dokka's markdown parser drops header cells in KDoc and module includes, leaving an empty band
   above the table. Hide the row rather than render a blank one. */
.content thead:has(th:empty) {
    display: none;
}

/* --- Prose ----------------------------------------------------------------------------------- */

.content p,
.content li {
    line-height: 1.62;
}

.content h1,
.content h2,
.content h3 {
    letter-spacing: -0.015em;
}

.content h2 {
    margin-top: 2em;
    padding-bottom: 0.3em;
    border-bottom: 1px solid var(--border-color);
}

.content blockquote {
    border-left: 3px solid var(--cgs-brand-soft);
    background: var(--code-background);
    border-radius: 0 6px 6px 0;
    padding: 2px 16px;
}

/* Deprecation and opt-in banners should be impossible to scroll past. */
.deprecation-content {
    border-left: 3px solid #d4771f;
    border-radius: 0 6px 6px 0;
}

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

.footer {
    border-top: 1px solid var(--border-color);
}

.footer .go-to-top-link {
    color: var(--cgs-brand-strong);
}

.theme-dark .footer .go-to-top-link {
    color: var(--cgs-brand-soft);
}