/* Protequ house livery for MkDocs Material.
   Tokens mirror .github/templates/setup-guide.html: dark #1a1b22 ground,
   cyan #00b0f0 accent ("PQ glow"), frosted hairlines, Inter.
   The palette uses primary/accent = custom (mkdocs.yml) so these win over
   Material's attribute-scoped defaults. */

/* ── Custom palette colors ─────────────────────────────────────────────────── */
[data-md-color-primary="custom"] {
  --md-primary-fg-color:        #00b0f0;
  --md-primary-fg-color--light: #33c1f3;
  --md-primary-fg-color--dark:  #0090c8;
  --md-primary-bg-color:        #ffffff;
  --md-primary-bg-color--light: rgba(255, 255, 255, 0.7);
}
[data-md-color-accent="custom"] {
  --md-accent-fg-color:             #00b0f0;
  --md-accent-fg-color--transparent: rgba(0, 176, 240, 0.1);
  --md-accent-bg-color:             #ffffff;
}

/* Links cyan in both schemes. */
.md-typeset a { color: #00b0f0; }
[data-md-color-scheme="default"] .md-typeset a { color: #0090c8; }

/* ── Dark scheme (default) — the CCTV-wall ground ──────────────────────────── */
[data-md-color-scheme="slate"] {
  --md-hue: 232;
  --md-default-bg-color:          #1a1b22;
  --md-default-bg-color--light:   #23242c;
  --md-default-fg-color:          #f1f3f6;
  --md-default-fg-color--light:   #a3a8b3;
  --md-default-fg-color--lighter: #6c7180;
  --md-code-bg-color:             #14151b;
  --md-code-fg-color:             #e6e9ee;
  --md-typeset-a-color:           #00b0f0;
  --md-accent-fg-color:           #33c1f3;
  --md-footer-bg-color:           #15161c;
  --md-footer-bg-color--dark:     #101116;
}

/* ── Header: dark + frosted + subtle cyan/pink glow (the setup-guide hero) ──── */
[data-md-color-scheme="slate"] .md-header {
  background-color: rgba(26, 27, 34, 0.9);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  background-image:
    radial-gradient(900px 220px at 12% -60%, rgba(0, 176, 240, 0.16), transparent 60%),
    radial-gradient(720px 220px at 96% -60%, rgba(255, 170, 170, 0.09), transparent 64%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: #f1f3f6;
}
[data-md-color-scheme="default"] .md-header {
  background-color: #ffffff;
  color: #191b22;
  border-bottom: 1px solid rgba(20, 22, 34, 0.09);
}
[data-md-color-scheme="default"] .md-header .md-icon { color: #191b22; }

/* Two-tone header title — solid white + solid cyan accent word (no gradient).
   The accent span on the last word is applied by javascripts/pq-title.js. */
.md-header__title { font-weight: 800; letter-spacing: -0.01em; }
[data-md-color-scheme="slate"] .md-header__title .md-ellipsis { color: #ffffff; }
[data-md-color-scheme="default"] .md-header__title .md-ellipsis { color: #191b22; }
.md-header__title .md-ellipsis .pq-accent { color: #00b0f0; }

/* Pulsing cyan glow around the PQ brand mark (matches the pq-web hero mark). */
.md-header__button.md-logo { padding: 0.2rem 0.4rem 0.2rem 0.6rem; }
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 2.1rem; width: auto;
  filter: drop-shadow(0 0 7px rgba(0, 176, 240, 0.7));
  animation: pq-logo-glow 2.4s ease-in-out infinite;
}
@keyframes pq-logo-glow {
  0%, 100% { filter: drop-shadow(0 0 5px rgba(0, 176, 240, 0.5)); }
  50%      { filter: drop-shadow(0 0 12px rgba(0, 176, 240, 0.85)); }
}
@media (prefers-reduced-motion: reduce) {
  .md-header__button.md-logo img,
  .md-header__button.md-logo svg { animation: none; }
}

/* ── Display H1 — solid, bold (no gradient) ────────────────────────────────── */
.md-typeset h1 { font-weight: 800; letter-spacing: -0.02em; }
[data-md-color-scheme="slate"] .md-typeset h1 { color: #ffffff; }
[data-md-color-scheme="default"] .md-typeset h1 { color: #14151b; }

/* ── Nav + TOC: cyan active/hover ──────────────────────────────────────────── */
.md-nav__link--active,
.md-nav__item--active > .md-nav__link { color: #00b0f0 !important; font-weight: 600; }
[data-md-color-scheme="slate"] .md-nav__link:hover,
[data-md-color-scheme="slate"] .md-nav__link:focus { color: #33c1f3; }
/* left cyan rail on the active section-nav item */
.md-nav--primary .md-nav__link--active { border-left: 2px solid #00b0f0; padding-left: 0.6rem; }

/* ── Code + admonitions: rounded, dark, hairline ───────────────────────────── */
.md-typeset pre > code,
.md-typeset .admonition,
.md-typeset details,
.md-typeset .highlight > pre { border-radius: 10px; }
[data-md-color-scheme="slate"] .md-typeset pre > code {
  border: 1px solid rgba(255, 255, 255, 0.06);
}

/* ── Tables: hairline instead of Material's heavy rule ─────────────────────── */
[data-md-color-scheme="slate"] .md-typeset table:not([class]) {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px; overflow: hidden;
}
[data-md-color-scheme="slate"] .md-typeset table:not([class]) th {
  background-color: #23242c; color: #f1f3f6; font-weight: 700;
}

/* ── Search box tint ───────────────────────────────────────────────────────── */
[data-md-color-scheme="slate"] .md-search__form { background-color: rgba(255, 255, 255, 0.07); }
[data-md-color-scheme="slate"] .md-search__form:hover { background-color: rgba(255, 255, 255, 0.11); }