/* ============================================================
   Click-Dog — brand theme for Material for MkDocs (docs pages)
   Remaps Material's own design tokens so inner docs pages match
   the marketing landing. Loaded via `extra_css` in mkdocs.yml.
   ============================================================ */

:root {
  --cd-orange: #f2960c;
  --cd-orange-dk: #d97e00;
  --cd-purple: #7c5cff;
  --cd-hc: #2e77e5;
  --cd-font-display: 'Space Grotesk', system-ui, sans-serif;
  --cd-font-body: 'IBM Plex Sans', system-ui, sans-serif;
  --cd-font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

/* ---- typography (applies to both schemes) ---- */
.md-typeset { font-family: var(--cd-font-body); }
.md-typeset h1, .md-typeset h2, .md-typeset h3,
.md-typeset h4, .md-header__topic, .md-nav__title {
  font-family: var(--cd-font-display);
  letter-spacing: -.02em;
  font-weight: 600;
}
.md-typeset h1 { font-weight: 600; letter-spacing: -.03em; }
.md-typeset code, .md-typeset pre, .md-typeset kbd { font-family: var(--cd-font-mono); }

/* ============================================================ LIGHT */
[data-md-color-scheme="default"] {
  --md-primary-fg-color:        #1c1813;   /* header bar = warm near-black */
  --md-primary-fg-color--light: #2a241c;
  --md-primary-fg-color--dark:  #141009;
  --md-primary-bg-color:        #ffffff;
  --md-primary-bg-color--light: rgba(255,255,255,.72);

  --md-accent-fg-color:         var(--cd-orange);
  --md-accent-fg-color--transparent: rgba(242,150,12,.1);

  --md-default-bg-color:        #f7f5f1;   /* warm off-white canvas */
  --md-default-fg-color:        #1c1813;
  --md-default-fg-color--light: #5a544a;
  --md-default-fg-color--lighter: #8b8478;

  --md-typeset-a-color:         var(--cd-orange-dk);
  --md-code-bg-color:           #ffffff;
  --md-code-fg-color:           #2a241c;
  --md-footer-bg-color:         #141009;
  --md-footer-bg-color--dark:   #0c0906;
}
/* content cards/code on light feel crisp */
[data-md-color-scheme="default"] .md-main { background: #f7f5f1; }
[data-md-color-scheme="default"] .md-typeset pre > code,
[data-md-color-scheme="default"] .md-typeset .highlight { border: 1px solid rgba(30,22,10,.10); border-radius: 10px; }

/* ============================================================ DARK (slate) */
[data-md-color-scheme="slate"] {
  --md-hue: 230;
  --md-primary-fg-color:        #101217;
  --md-primary-fg-color--light: #161a21;
  --md-primary-fg-color--dark:  #0a0b0d;
  --md-primary-bg-color:        #e9ebee;

  --md-accent-fg-color:         var(--cd-orange);
  --md-accent-fg-color--transparent: rgba(242,150,12,.14);

  --md-default-bg-color:        #0a0b0d;
  --md-default-fg-color:        #e9ebee;
  --md-default-fg-color--light: #9aa1ad;
  --md-default-fg-color--lighter: #6a717d;

  --md-typeset-a-color:         var(--cd-orange);
  --md-code-bg-color:           #101217;
  --md-code-fg-color:           #e9ebee;
  --md-footer-bg-color:         #0a0b0d;
}
[data-md-color-scheme="slate"] .md-main { background: #0a0b0d; }
[data-md-color-scheme="slate"] .md-typeset pre > code,
[data-md-color-scheme="slate"] .md-typeset .highlight { border: 1px solid rgba(255,255,255,.08); border-radius: 10px; }

/* ============================================================ shared accents */
/* active nav + links pick up brand orange */
.md-nav__link--active, .md-nav__item .md-nav__link--active { color: var(--cd-orange) !important; }
.md-typeset a:hover { color: var(--cd-purple); }

/* Match the landing-page brand lockup: 34px mark, 21px wordmark, and an 8px
   optical gap. Material's logo button supplies part of that gap via padding. */
.md-header__button.md-logo { padding: .2rem; }
.md-header__button.md-logo img, .md-header__button.md-logo svg { height: 34px; width: auto; }
.md-header__topic:not([data-md-component="header-topic"]) {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.025em;
}

/* admonitions: brand the "note"/"tip" accent */
.md-typeset .admonition, .md-typeset details { border-radius: 10px; border-left-width: 3px; }
.md-typeset .admonition.tip, .md-typeset details.tip { border-color: var(--cd-orange); }
.md-typeset .admonition.note, .md-typeset details.note { border-color: var(--cd-hc); }

/* tab + selection */
.md-typeset .tabbed-labels > label:hover { color: var(--cd-orange); }
.md-typeset ::selection { background: var(--cd-orange); color: #fff; }

/* buttons rendered via {.md-button} match the landing's primary */
.md-typeset .md-button--primary {
  background: var(--cd-orange); border-color: var(--cd-orange); color: #241400;
  font-family: var(--cd-font-body); font-weight: 600;
}
.md-typeset .md-button--primary:hover { background: var(--cd-orange-dk); border-color: var(--cd-orange-dk); color: #241400; }

/* table header tint */
.md-typeset table:not([class]) th { background: var(--md-accent-fg-color--transparent); font-family: var(--cd-font-display); }

/* Reference tables (Field | Default | Description): give the field-name column a
   set minimum width so typical identifiers like `whitelist_operations` stay on
   one line. Scoped with :has(code) to first cells that hold an identifier, so it
   only affects reference tables — comparison/prose tables (first column of plain
   text or numbers) keep their natural width. Longer identifiers (e.g.
   `click_dog_*` metric names) wrap at their separators via the <wbr> points
   injected by javascripts/table-wbr.js, rather than at a random character. */
.md-typeset table:not([class]) td:first-child:has(code) { min-width: 13rem; }
.md-typeset table:not([class]) td:first-child code { word-break: normal; overflow-wrap: break-word; }

/* ---- header column alignment ----------------------------------------------
   Line the header controls up with the three columns of the page beneath them:
   wordmark over the nav sidebar, search over the content column, the theme
   toggle's right edge on the content column's right edge, and the repo widget
   over the TOC column. Desktop only (>=60em); below that Material collapses to a
   drawer + search overlay we leave alone. The values below track Material's
   12.1rem sidebar width and content padding — revisit them if those change.
   `!important` beats Material's own more-specific `[dir=ltr] .md-header__*`
   rules at >=76.25em. */
@media screen and (min-width: 60em) {
  /* The title holds an absolutely-positioned wordmark that collapses to zero
     width without flex-grow, so pin it to a fixed width. That width lands the
     search magnifier on the content text column (the "D" of the first heading).
     The zero left margin pairs with the logo button padding for the same 8px
     optical gap as the landing page; the wider minimum preserves alignment. */
  .md-header__title { flex: 0 0 auto; min-width: 9.6rem; margin-left: 0 !important; }
  /* Theme toggle: pushed right, its right edge meeting the content column's
     right edge, just left of the repo widget. */
  .md-header__option { order: 5; margin-left: auto !important; }
  /* Repo widget: a fixed box the width of the TOC sidebar, flush right, so its
     content left-aligns with the TOC column; the margin is the gap to the toggle. */
  .md-header__source { order: 6; width: 12.1rem !important; max-width: 12.1rem !important; margin-left: 1rem !important; }
}

/* Material swaps the logo for the drawer button below 76.25em and removes the
   repository widget below 60em. Keep both destinations available without
   creating a second header row: the drawer moves to the far left, the brand
   mark stays beside it, and the repository collapses to an icon-only action.
   The title remains the flexible item, so it truncates first on narrow phones. */
@media screen and (max-width: 76.234375em) {
  .md-header__button[for="__drawer"] { order: -1; }
  .md-header__button.md-logo { display: block; flex: 0 0 auto; }
  .md-header__source {
    display: block;
    flex: 0 0 2.4rem;
    width: 2.4rem !important;
    max-width: 2.4rem !important;
    margin-left: 0 !important;
  }
  .md-header__source .md-source__repository { display: none; }
  .md-header__source .md-source__icon { width: 2.4rem; }
}

@media screen and (max-width: 59.984375em) {
  .md-header__title { min-width: 0; margin-left: .25rem !important; margin-right: 0 !important; }
}

/* ---- release version pill -------------------------------------------------
   Material renders the latest release tag as a `--version` fact in the repo
   widget's facts row. We keep it there, restyle it as a pill, and (in
   overrides/main.html) replace its text
   with a real <a> to the matching GitHub release — so it links to the release
   rather than the repo home the rest of the widget points at, with native
   middle/right-click and status-bar affordances. Degrades cleanly: no version
   fetched -> no pill. */
.md-header__source .md-source__repository { max-width: none; overflow: visible; }  /* let the full name show in the fixed-width widget */
.md-source__facts { display: flex; align-items: center; gap: .5em; flex-wrap: wrap; }
/* Keep early community metrics out of the header until they are useful social proof. */
.md-source__fact--stars,
.md-source__fact--forks { display: none; }
.md-source__fact--version {
  order: 9;
  display: inline-flex;
  align-items: center;
  padding: 0;                    /* padding is on the inner link, so the whole pill is the hit target */
  border: 1px solid color-mix(in srgb, currentColor 32%, transparent);
  border-radius: 999px;
  font-weight: 600;
  transition: border-color .15s ease, background-color .15s ease;
}
.md-source__fact--version::before { display: none; }   /* hide Material's mask icon; the link renders its own */
.md-source__fact--version:hover,
.md-source__fact--version:focus-within {
  border-color: var(--cd-orange);
  background-color: color-mix(in srgb, var(--cd-orange) 18%, transparent);
}
.cd-version-link {
  display: inline-flex;
  align-items: center;
  gap: .3em;
  padding: 0 .5em;
  border-radius: inherit;
  color: inherit;
  text-decoration: none;
}
.cd-version-link:hover { color: inherit; }
.cd-version-link:focus-visible { outline: 2px solid var(--cd-orange); outline-offset: 2px; }
.cd-version-link svg { width: .85em; height: .85em; fill: currentColor; opacity: .85; }