/* Medium/SemiBold for nav and labels; Material only loads Montserrat 300/400/700 */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,500;0,600;1,500&display=swap");

/* ── Brand tokens ──────────────────────────────────── */
:root {
  --a11-green:          #10b981; /* primary accent: buttons, highlights */
  --a11-green-dark:     #05805c; /* accessible green for text on white */
  --a11-green-light:    #34d399; /* hover state on dark backgrounds */
  --a11-navy-950:       #0a0f17; /* page background (dark) */
  --a11-navy-900:       #131c2c; /* raised surfaces, header */
  --a11-navy-800:       #1a2333; /* cards, code blocks */
  --a11-navy-700:       #2e3743; /* borders */
  --a11-slate:          #7a8fa8; /* footer text (dark) */
  --a11-text:           #a5b4c7; /* body and menu text (dark) */

  /* Header is always dark, in both schemes */
  --md-primary-fg-color:        var(--a11-navy-950);
  --md-primary-fg-color--light: var(--a11-navy-900);
  --md-primary-fg-color--dark:  var(--a11-navy-950);
  --md-primary-bg-color:        #ffffff;
  --md-primary-bg-color--light: rgba(255, 255, 255, 0.7);
}

/* Footer is always dark, with slate text.
   Set per scheme so Material's slate defaults don't win. */
[data-md-color-scheme="default"],
[data-md-color-scheme="slate"] {
  --md-footer-bg-color:         var(--a11-navy-950);
  --md-footer-bg-color--dark:   var(--a11-navy-950);
  --md-footer-fg-color:         #ffffff;
  --md-footer-fg-color--light:  var(--a11-slate);
  --md-footer-fg-color--lighter: var(--a11-slate);
}

/* ── Light scheme ──────────────────────────────────── */
[data-md-color-scheme="default"] {
  --md-default-bg-color:          #f8f9fa;
  --md-default-fg-color:          rgba(10, 15, 23, 0.87);
  --md-default-fg-color--light:   rgba(10, 15, 23, 0.60);
  --md-default-fg-color--lighter: rgba(10, 15, 23, 0.32);
  --md-default-fg-color--lightest: rgba(10, 15, 23, 0.08);

  --md-typeset-color:             #1f2937;
  --md-typeset-a-color:           var(--a11-green-dark);
  --md-accent-fg-color:           var(--a11-green);
  --md-accent-fg-color--transparent: rgba(16, 185, 129, 0.1);

  --md-code-bg-color:             #e9edf3;
  --md-code-fg-color:             #1f2937;

  --a11-heading-color:            var(--a11-navy-950);
  --a11-surface-color:            #f3f5f8;
  --a11-border-color:             #e2e6ec;

  --a11-caution-fg-color:         #b45f06;
  --a11-caution-bg-color:         #fbe8c8;
  --a11-note-fg-color:            #2468b0;
  --a11-note-bg-color:            #dbe8f8;
  --a11-tip-fg-color:             var(--a11-green-dark);
  --a11-tip-bg-color:             #d4f0e2;
}

/* ── Dark scheme ───────────────────────────────────── */
[data-md-color-scheme="slate"] {
  --md-hue: 218;
  --md-default-bg-color:          var(--a11-navy-950);
  --md-default-bg-color--light:   rgba(10, 15, 23, 0.54);
  --md-default-bg-color--lighter: rgba(10, 15, 23, 0.26);
  --md-default-bg-color--lightest: rgba(10, 15, 23, 0.07);

  --md-default-fg-color:          rgba(255, 255, 255, 0.90);
  --md-default-fg-color--light:   rgba(255, 255, 255, 0.62);
  --md-default-fg-color--lighter: rgba(255, 255, 255, 0.32);
  --md-default-fg-color--lightest: rgba(255, 255, 255, 0.10);

  --md-typeset-color:             var(--a11-text);
  --md-typeset-a-color:           var(--a11-green);
  --md-accent-fg-color:           var(--a11-green-light);
  --md-accent-fg-color--transparent: rgba(16, 185, 129, 0.12);

  --md-code-bg-color:             var(--a11-navy-800);
  --md-code-fg-color:             #e3e7ee;

  /* Material dims these code tokens to 62% white; lift them so code
     blocks read clearly on navy */
  --md-code-hl-punctuation-color: #bac4d2;
  --md-code-hl-operator-color:    #bac4d2;
  --md-code-hl-variable-color:    #bac4d2;
  --md-code-hl-generic-color:     #bac4d2;
  --md-code-hl-comment-color:     #94a3b8;

  --md-admonition-bg-color:       var(--a11-navy-900);
  --md-typeset-table-color:       rgba(255, 255, 255, 0.10);

  --a11-heading-color:            #ffffff;
  --a11-surface-color:            var(--a11-navy-900);
  --a11-border-color:             var(--a11-navy-700);

  --a11-caution-fg-color:         #f0b45e;
  --a11-caution-bg-color:         #221c13;
  --a11-note-fg-color:            #6aaee8;
  --a11-note-bg-color:            #172a42;
  --a11-tip-fg-color:             var(--a11-green-light);
  --a11-tip-bg-color:             #10261f;
}

/* ── Typography ────────────────────────────────────── */
/* Material enlarges the root font on wide screens (137.5% from 1600px,
   150% from 2000px). Keep text at a fixed size by pinning the root at
   Material's base 125% (1rem = 20px) on every screen width. */
@media screen and (min-width: 100em) {
  html {
    font-size: 125%;
  }
}

@media screen and (min-width: 125em) {
  html {
    font-size: 125%;
  }
}

/* Montserrat everywhere (set in mkdocs.yml).
   Body text: Medium (500), 16px (0.8rem), line-height 1.6 */
.md-typeset {
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.6;
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
  color: var(--a11-heading-color);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.md-typeset h1 {
  font-size: 1.8rem;
  line-height: 1.25;
  margin-bottom: 0.8em;
}

.md-typeset h2 {
  font-size: 1.3rem;
  margin-top: 1.6em;
}

.md-typeset h3 {
  font-size: 1.05rem;
}

.md-typeset strong {
  color: var(--a11-heading-color);
  font-weight: 700;
}

.md-typeset a strong {
  color: inherit;
}

.md-typeset hr {
  border-bottom-color: var(--a11-border-color);
}

/* Green highlight for key words, e.g. <span class="a11-highlight">optimized.</span> */
.md-typeset .a11-highlight {
  color: var(--a11-green);
}

/* ── Header & tabs ─────────────────────────────────── */
/* Flat near-black bar */
.md-header {
  background-color: var(--a11-navy-950);
  border-bottom: 1px solid var(--a11-navy-800);
}

.md-header__title {
  font-weight: 700;
}

/* Slogan centered in the header bar (overrides/main.html): white with the
   last words in brand green, like the a11 website. Desktop only, on
   narrower screens it would collide with the title and search. */
.a11-slogan {
  display: none;
}

@media screen and (min-width: 76.25em) {
  .md-header__inner {
    position: relative;
  }

  .a11-slogan {
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    white-space: nowrap;
    pointer-events: none;
  }

  .a11-slogan__accent {
    color: var(--a11-green);
  }
}

.md-tabs {
  background-color: var(--a11-navy-950);
  border-bottom: 1px solid var(--a11-navy-800);
}

/* Top nav: Montserrat Medium 16px, light slate, green when active */
.md-tabs__link {
  font-size: 0.8rem;
  font-weight: 500;
  opacity: 1;
  color: var(--a11-text);
}

.md-tabs__link:hover,
.md-tabs__item--active .md-tabs__link {
  color: var(--a11-green);
}

/* ── Navigation ────────────────────────────────────── */
.md-nav {
  font-size: 0.8rem;
  font-weight: 500;
}

/* Sidebar & TOC links in light slate on dark */
[data-md-color-scheme="slate"] .md-sidebar .md-nav {
  color: var(--a11-text);
}

.md-nav--primary .md-nav__item,
.md-nav--primary .md-nav__link {
  font-size: 0.8rem;
}

/* Slightly wider sidebar on desktop so 16px items like "Network privacy
   reference" fit on one line. Material defaults: sidebar 12.1rem, content
   capped at 11.5rem via padding. Mobile drawer keeps Material's width,
   its slide-in transform depends on it. */
@media screen and (min-width: 76.25em) {
  .md-sidebar--primary {
    width: 12.5rem;
  }

  [dir=ltr] .md-sidebar--primary .md-sidebar__inner {
    padding-right: calc(100% - 12rem);
  }
}

/* ── Pinned sidebars (desktop) ─────────────────────── */
/* The page grid spans the full window: the nav is pinned to the left
   edge and the TOC to the right edge, each with a thin divider, and the
   content is centered between them. The header, tabs and footer follow
   the same edges so the logo lines up with the nav. Both sidebars are
   13.7rem wide (12.5rem of nav plus 1.2rem outer padding). */
@media screen and (min-width: 76.25em) {
  .md-header__inner.md-grid,
  .md-tabs > .md-grid,
  .md-main__inner.md-grid,
  .md-footer__inner.md-grid,
  .md-footer-meta__inner.md-grid {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }

  .md-header__inner.md-grid,
  .md-tabs > .md-grid,
  .md-footer__inner.md-grid,
  .md-footer-meta__inner.md-grid {
    padding-left: 1.2rem;
    padding-right: 1.2rem;
  }

  /* Dividers drawn on the page body so they always run from the header
     to the footer; Material sizes the sidebars with JS, so a border on
     them would stop wherever their links end */
  .md-main {
    --a11-divider-left: linear-gradient(
      to right,
      transparent calc(13.7rem - 1px),
      var(--a11-border-color) calc(13.7rem - 1px),
      var(--a11-border-color) 13.7rem,
      transparent 13.7rem
    );
    --a11-divider-right: linear-gradient(
      to left,
      transparent calc(13.7rem - 1px),
      var(--a11-border-color) calc(13.7rem - 1px),
      var(--a11-border-color) 13.7rem,
      transparent 13.7rem
    );
    background-image: var(--a11-divider-left), var(--a11-divider-right);
  }

  .md-main:has(.md-sidebar--primary[hidden]) {
    --a11-divider-left: none;
  }

  .md-main:has(.md-sidebar--secondary[hidden]) {
    --a11-divider-right: none;
  }

  /* Move Material's 1.5rem top gap into the columns themselves */
  .md-main__inner {
    margin-top: 0;
  }

  .md-content {
    margin-left: auto;
    margin-right: auto;
    padding-top: 1.5rem;
  }

  .md-sidebar--primary {
    width: 13.7rem;
    padding: 2.7rem 0 1.2rem 1.2rem;
  }

  .md-sidebar--secondary {
    width: 13.7rem;
    padding: 2.7rem 1.2rem 1.2rem 0;
  }

  /* Same gap between the TOC links and its divider as on the nav side */
  [dir=ltr] .md-sidebar--secondary .md-sidebar__inner {
    padding-left: 0.5rem;
  }

  /* No sidebars at all (homepage): the dividers are symmetric, so
     centering the content puts it where it sits on other pages */
  .md-sidebar--primary[hidden] ~ .md-content {
    max-width: 52rem;
  }
}

.md-nav__link--active {
  font-weight: 600;
}

.md-nav__item .md-nav__link--active,
.md-nav__item .md-nav__link--active code {
  color: var(--md-typeset-a-color);
}

.md-nav__link:hover,
.md-nav__link:focus {
  color: var(--md-typeset-a-color);
}

/* ── Links ─────────────────────────────────────────── */
.md-typeset a {
  color: var(--md-typeset-a-color);
}

/* Links sit close to the body text in light mode; the extra weight makes
   them stand out */
[data-md-color-scheme="default"] .md-typeset a {
  font-weight: 600;
}

.md-typeset a:hover,
.md-typeset a:focus {
  color: var(--md-accent-fg-color);
  text-decoration: underline;
}

/* ── Tags — small green uppercase labels ───────────── */
.md-typeset .md-tag {
  background-color: var(--md-accent-fg-color--transparent);
  color: var(--md-typeset-a-color);
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 4px;
}

/* Menu paths like "Assets › Import Package": the inline code chip's
   colors in the body font. Wraps across lines with each fragment keeping
   its padding. */
.md-typeset .a11-menu {
  background-color: var(--md-code-bg-color);
  color: var(--md-code-fg-color);
  border-radius: 0.1rem;
  padding: 0.1em 0.35em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

[data-md-color-scheme="slate"] .md-typeset .a11-menu {
  background-color: rgba(122, 143, 168, 0.08);
  color: #d0d8e3;
  box-shadow: inset 0 0 0 1px rgba(122, 143, 168, 0.22);
}

/* ── Buttons — green with dark text ────────────────── */
.md-typeset .md-button {
  border-radius: 4px;
  border-color: var(--a11-green);
  color: var(--a11-green-dark);
  font-weight: 600;
}

[data-md-color-scheme="slate"] .md-typeset .md-button {
  color: var(--a11-green);
}

.md-typeset .md-button--primary,
[data-md-color-scheme="slate"] .md-typeset .md-button--primary {
  background-color: var(--a11-green);
  border-color: var(--a11-green);
  color: var(--a11-navy-950);
}

.md-typeset .md-button:focus,
.md-typeset .md-button:hover,
[data-md-color-scheme="slate"] .md-typeset .md-button:hover {
  background-color: var(--a11-green-light);
  border-color: var(--a11-green-light);
  color: var(--a11-navy-950);
}

/* ── Code blocks ───────────────────────────────────── */
.md-typeset code {
  border-radius: 4px;
  padding: 0.1em 0.4em;
  font-size: 0.9em;
}

/* Inline code: a quiet outlined chip, a shade brighter than the body
   text, so dense sentences still read as one line */
.md-typeset :not(pre) > code {
  font-size: 0.85em;
  padding: 0.1em 0.35em;
}

[data-md-color-scheme="slate"] .md-typeset :not(pre, a) > code:not(.changelog-version-number) {
  background-color: rgba(122, 143, 168, 0.08);
  color: #d0d8e3;
  box-shadow: inset 0 0 0 1px rgba(122, 143, 168, 0.22);
}

.md-typeset pre {
  border-radius: 8px;
}

.md-typeset pre > code {
  font-size: 0.7rem;
  line-height: 1.6;
}

/* Code annotations & copy button pick up the brand green */
.md-clipboard:hover,
.md-clipboard:focus {
  color: var(--a11-green);
}

/* ── Content width ─────────────────────────────────── */
.md-content {
  max-width: 52rem;
}


/* ── Tables ────────────────────────────────────────── */
.md-typeset table:not([class]) {
  font-size: 0.75rem;
  border: 1px solid var(--a11-border-color);
  border-radius: 8px;
  overflow: hidden;
}

/* Cells use the body text weight; Material's lighter weight made table
   text read darker than the paragraphs around it */
.md-typeset table:not([class]) td {
  font-weight: 500;
}

.md-typeset table:not([class]) th {
  background-color: var(--a11-surface-color);
  color: var(--a11-heading-color);
  font-weight: 600;
}

/* Grouped tables (hooks/ad_networks.py): one <tbody> per network, whose
   name spans its platform rows. Rows within a network get a fainter line
   than the one between networks, and hovering highlights the whole
   network rather than one row. */
.md-typeset table:not([class]) td[rowspan] {
  vertical-align: middle;
}

/* Platform ad network tables (hooks/ad_networks.py) span the content
   width, like the full table, instead of shrinking to their content */
.md-typeset .a11-networks .md-typeset__table {
  display: block;
}

.md-typeset .a11-networks table:not([class]) {
  display: table;
  width: 100%;
}

/* Keep the platform icon and name on one line */
.md-typeset table:not([class]) tbody:has(td[rowspan]) td:has(> .twemoji) {
  white-space: nowrap;
}

.md-typeset table:not([class]) tbody:has(td[rowspan]) tr + tr td {
  border-top-color: color-mix(in srgb, var(--md-typeset-table-color) 40%, transparent);
}

.md-typeset table:not([class]) tbody:has(td[rowspan]) tr:hover {
  background-color: transparent;
  box-shadow: none;
}

.md-typeset table:not([class]) tbody:has(td[rowspan]):hover {
  background-color: var(--md-typeset-table-color--light);
}

/* ── Grid cards ────────────────────────────────────── */
.md-typeset .grid.cards > ul > li {
  border: 1px solid var(--a11-border-color);
  border-radius: 8px;
  font-size: 0.75rem;
}

/* Two cards per row, for sets of four that would otherwise leave one
   card alone on the last row */
.md-typeset .grid.cards.two-col {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media screen and (max-width: 44.984em) {
  .md-typeset .grid.cards.two-col {
    grid-template-columns: 1fr;
  }
}

/* ── Block spacing ─────────────────────────────────── */
/* Code blocks, boxes, tables, tabs and card grids get room from the
   title above them, and more room before the next title so each title
   reads as belonging to the block below it. In rem so blocks with a
   smaller font size space the same as the rest. */
.md-typeset pre,
.md-typeset .admonition,
.md-typeset details,
.md-typeset .tabbed-set,
.md-typeset .grid,
.md-typeset__scrollwrap {
  margin-block: 1.2rem 2rem;
}

/* ── Admonitions ───────────────────────────────────── */
.md-typeset .admonition,
.md-typeset details {
  border-radius: 8px;
  font-size: 0.75rem;
}

/* Caution (warning), Note (info, note) and Recommended (tip) boxes: one
   flat tinted surface
   for title and body, no border, tinted title and icon */
.md-typeset :is(.admonition, details):is(.warning) {
  --a11-box-fg-color: var(--a11-caution-fg-color);
  --a11-box-bg-color: var(--a11-caution-bg-color);
}

.md-typeset :is(.admonition, details):is(.info, .note) {
  --a11-box-fg-color: var(--a11-note-fg-color);
  --a11-box-bg-color: var(--a11-note-bg-color);
}

.md-typeset :is(.admonition, details):is(.tip) {
  --a11-box-fg-color: var(--a11-tip-fg-color);
  --a11-box-bg-color: var(--a11-tip-bg-color);
}

.md-typeset :is(.admonition, details):is(.warning, .info, .note, .tip) {
  background-color: var(--a11-box-bg-color);
  border: none;
  box-shadow: none;
  padding: 0.2rem 1rem 0.1rem;
}

/* On the off-white light page, a tinted outline lifts the boxes off it */
[data-md-color-scheme="default"] .md-typeset :is(.admonition, details):is(.warning, .info, .note, .tip) {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--a11-box-fg-color) 30%, transparent);
}

.md-typeset :is(.warning, .info, .note, .tip) > :is(.admonition-title, summary) {
  background-color: transparent;
  color: var(--a11-box-fg-color);
  font-weight: 600;
  margin: 0 -1rem;
  padding: 0.5rem 1rem 0 2.6rem;
}

.md-typeset :is(.warning, .info, .note, .tip) > :is(.admonition-title, summary)::before {
  background-color: var(--a11-box-fg-color);
  left: 1rem;
  top: 0.6rem;
}

/* Note boxes all use the info icon, including collapsible ??? note */
.md-typeset .note > :is(.admonition-title, summary)::before {
  -webkit-mask-image: var(--md-admonition-icon--info);
  mask-image: var(--md-admonition-icon--info);
}

/* Collapsible chevron and its spacing when closed */
.md-typeset :is(.warning, .info, .note, .tip) > summary::after {
  color: var(--a11-box-fg-color);
  top: 0.6rem;
}

.md-typeset details:is(.warning, .info, .note, .tip):not([open]) > summary {
  padding-bottom: 0.4rem;
}

/* ── Content tabs ──────────────────────────────────── */
.md-typeset .tabbed-labels > label {
  font-weight: 500;
}

/* Material colors the active label, hover and indicator with
   --md-default-fg-color; point it at brand green for the tab bar only */
.md-typeset .tabbed-labels {
  --md-default-fg-color: var(--md-typeset-a-color);
}

/* ── Footer ────────────────────────────────────────── */
.md-copyright {
  font-size: 0.65rem;
}

.md-footer__link:hover {
  color: var(--a11-green);
}

/* ── Search box ────────────────────────────────────── */
.md-search__form {
  border-radius: 20px;
  background-color: rgba(255, 255, 255, 0.08);
}

.md-search__form:hover {
  background-color: rgba(255, 255, 255, 0.14);
}

.md-search__output {
  border-radius: 0 0 12px 12px;
}

[data-md-toggle="search"]:checked ~ .md-header .md-search__form {
  border-radius: 20px 20px 0 0;
}

[data-md-toggle="search"]:checked ~ .md-header .md-search__output {
  border-radius: 0 0 12px 12px;
}

/* ── Utility: bordered images ──────────────────────── */
.border {
  border: 1px solid var(--a11-border-color);
  border-radius: 8px;
  padding: 4px;
  margin: 10px auto;
  max-width: 100%;
}

/* Changelog release header: large version with a small date beneath */
.md-typeset .changelog-version {
  color: var(--a11-heading-color);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin-bottom: 0;
}

/* The line between releases sits closer to the release below it, so it
   reads as that release's start rather than floating between two */
.md-typeset hr:has(+ .changelog-version) {
  margin: 2.8rem 0 1.4rem;
}

.md-typeset hr + .changelog-version {
  margin-top: 0;
}

/* BOM version pill next to the release version, styled like .md-tag */
.md-typeset .changelog-bom {
  display: inline-block;
  margin-left: 0.6em;
  padding: 0.25em 0.75em;
  border-radius: 999px;
  background-color: var(--md-accent-fg-color--transparent);
  color: var(--md-typeset-a-color);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.4;
  vertical-align: middle;
  white-space: nowrap;
}

/* Version numbers in changelog entries (tagged by hooks/changelog.py):
   green text, no code background */
.md-typeset code.changelog-version-number {
  background-color: transparent;
  color: var(--md-typeset-a-color);
  font-weight: 600;
  padding: 0;
}

.md-typeset .changelog-date {
  color: var(--md-default-fg-color--light);
  font-size: 0.7rem;
  margin-top: 0.2em;
}

/* Section labels like **Fixed** or **Updated adapters**: a bold-only
   paragraph directly above a list sits tight against that list */
.md-typeset p:has(> strong:only-child):has(+ ul) {
  margin-bottom: 0.3em;
}

.md-typeset p:has(> strong:only-child) + ul {
  margin-top: 0.3em;
}

/* Changelog entries: bold text inside list items keeps the body text
   color and weight, so only the section labels stand out */
.md-typeset:has(.changelog-version) li strong {
  color: inherit;
  font-weight: inherit;
}