/* ==========================================================================
   ActiveDonor skin for Material for MkDocs
   --------------------------------------------------------------------------
   Goal: make the stock Material theme read as part of the ActiveDonor product —
   white header + signature rainbow strip, leaf-green primary, blue links, soft
   grey page with white card surfaces, and the product's wider accent palette
   (green / blue / teal / purple / amber / red) used for icons, admonitions and
   active states.

   The docs are light-only (ActiveDonor's UI has no dark mode), so mkdocs.yml
   declares a single custom "activedonor" scheme with no toggle. Skin rules are
   still scoped to [data-md-color-scheme="activedonor"] so that re-introducing a
   dark scheme later can't be silently corrupted by these light rules leaking in.

   Colours below are sampled (best-guess) from the product screenshots. Tune the
   tokens in :root once exact brand values are available.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Self-hosted Titillium Web (latin subset, weights 300/400/600/700).
   Files in assets/fonts/ — no third-party Google Fonts request.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Titillium Web";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/titillium-web-300.woff2") format("woff2");
}
@font-face {
  font-family: "Titillium Web";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/titillium-web-400.woff2") format("woff2");
}
@font-face {
  font-family: "Titillium Web";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/titillium-web-600.woff2") format("woff2");
}
@font-face {
  font-family: "Titillium Web";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/titillium-web-700.woff2") format("woff2");
}

:root {
  /* --- Core brand tokens --- */
  --ad-green:       #7CB342;   /* leaf green — primary, totals, positive */
  --ad-green-dark:  #6aa036;   /* hover/active green                     */
  --ad-blue:        #2196F3;   /* link / interactive blue                */
  --ad-blue-dark:   #1976D2;
  --ad-bg:          #eef1f4;   /* soft grey page background              */
  --ad-header-fg:   #4a4a4a;   /* header wordmark + icon grey            */

  /* --- Wider accent palette (mirrors the rainbow strip + UI badges) --- */
  --ad-teal:        #26A69A;
  --ad-cyan:        #29B6F6;
  --ad-indigo:      #5C6BC0;
  --ad-purple:      #7E57C2;
  --ad-amber:       #FFB300;
  --ad-orange:      #FB8C00;
  --ad-red:         #EF5350;

  /* Body = Segoe/system stack; headings = Titillium Web (loaded via extra_css). */
  --md-text-font:    "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --md-code-font:    "Cascadia Code", "Consolas", "SFMono-Regular", monospace;
  --ad-heading-font: "Titillium Web", "Segoe UI", system-ui, sans-serif;
}

/* ==========================================================================
   Header rainbow strip
   ========================================================================== */

/* The signature multi-colour strip, pinned above everything in the header. */
.md-header { position: relative; }
.md-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: #f7f9fa;
  background-image: linear-gradient(
    90deg,
    #34495e, #34495e 25%,
    #9b59b6 0, #9b59b6 35%,
    #3498db 0, #3498db 45%,
    #62cb31 0, #62cb31 55%,
    #ffb606 0, #ffb606 65%,
    #e67e22 0, #e67e22 75%,
    #e74c3c 85%, #e74c3c 0,
    #c0392b 0, #c0392b
  );
  background-position: 50% 100%;
  background-repeat: no-repeat;
  background-size: 100% 6px;
  z-index: 1;
}

/* Hide the footer meta row (copyright + "Made with Material for MkDocs").
   The prev/next navigation footer (.md-footer__inner) is kept. */
.md-footer-meta { display: none; }

/* ==========================================================================
   LIGHT scheme — the full ActiveDonor brand skin
   Every rule is scoped to the custom "activedonor" scheme.
   ========================================================================== */

[data-md-color-scheme="activedonor"] {
  /* White header: primary drives the header bg, its bg-color drives header text. */
  --md-primary-fg-color:        #ffffff;
  --md-primary-fg-color--light: #ffffff;
  --md-primary-fg-color--dark:  #f3f5f7;
  --md-primary-bg-color:        var(--ad-header-fg);
  --md-primary-bg-color--light: var(--ad-header-fg);

  /* Green for hovers/focus/selection, blue for links. */
  --md-accent-fg-color:         var(--ad-green);
  --md-accent-fg-color--transparent: rgba(124, 179, 66, 0.1);
  --md-typeset-a-color:         var(--ad-blue);

  /* Soft grey page (the white content card is set on .md-content below). */
  --md-default-bg-color:        var(--ad-bg);

  color-scheme: light;
}

/* White header with a hairline border instead of the stock coloured bar. */
[data-md-color-scheme="activedonor"] .md-header {
  border-bottom: 1px solid #e3e6ea;
  box-shadow: none;
}
[data-md-color-scheme="activedonor"] .md-header[data-md-state="shadow"] {
  box-shadow: 0 0 0.2rem rgba(0, 0, 0, 0.08), 0 0.2rem 0.4rem rgba(0, 0, 0, 0.06);
}
/* Keep the PNG logo crisp and sensibly sized in the white header. */
[data-md-color-scheme="activedonor"] .md-header__button.md-logo img {
  height: 1.6rem;
  width: auto;
}

/* Horizontal tabs: white bar, grey labels, green active/hover. */
[data-md-color-scheme="activedonor"] .md-tabs {
  background-color: #ffffff;
  color: var(--ad-header-fg);
  border-bottom: 1px solid #e3e6ea;
}
[data-md-color-scheme="activedonor"] .md-tabs__link { opacity: 0.8; transition: color .15s, opacity .15s; }
[data-md-color-scheme="activedonor"] .md-tabs__link--active,
[data-md-color-scheme="activedonor"] .md-tabs__link:hover {
  opacity: 1;
  color: var(--ad-green);
}

/* Content surface: white card floating on the grey page. */
[data-md-color-scheme="activedonor"] .md-main {
  background-color: var(--md-default-bg-color);
}
[data-md-color-scheme="activedonor"] .md-content {
  background-color: #ffffff;
  border: 1px solid #e3e6ea;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  margin: 1rem 0 2rem;
}

/* ==========================================================================
   Typography — Titillium Web headings over a Segoe body
   ========================================================================== */
[data-md-color-scheme="activedonor"] .md-typeset h1,
[data-md-color-scheme="activedonor"] .md-typeset h2,
[data-md-color-scheme="activedonor"] .md-typeset h3,
[data-md-color-scheme="activedonor"] .md-typeset h4 {
  font-family: var(--ad-heading-font);
}
[data-md-color-scheme="activedonor"] .md-typeset h1 {
  font-weight: 300;
  color: #4a4a4a;
  letter-spacing: -0.01em;
}
[data-md-color-scheme="activedonor"] .md-typeset h2 {
  font-weight: 600;
  color: #4a4a4a;
  padding-bottom: 0.2em;
  border-bottom: 2px solid rgba(124, 179, 66, 0.25);  /* subtle green section rule */
}
[data-md-color-scheme="activedonor"] .md-typeset h3 { font-weight: 600; color: #555; }

/* ==========================================================================
   Links & buttons
   ========================================================================== */
[data-md-color-scheme="activedonor"] .md-typeset a:hover {
  color: var(--ad-blue-dark);
  text-decoration: underline;
}
[data-md-color-scheme="activedonor"] .md-typeset .md-button--primary {
  background-color: var(--ad-green);
  border-color: var(--ad-green);
  color: #fff;
}
[data-md-color-scheme="activedonor"] .md-typeset .md-button--primary:hover {
  background-color: var(--ad-green-dark);
  border-color: var(--ad-green-dark);
}

/* ==========================================================================
   Left navigation — hover + active "pill" state
   ========================================================================== */
[data-md-color-scheme="activedonor"] .md-nav__link:hover {
  color: var(--ad-green);
}
/* Active page in the left sidebar: filled green pill (per requested style). */
[data-md-color-scheme="activedonor"] .md-sidebar--primary .md-nav__item .md-nav__link--active,
[data-md-color-scheme="activedonor"] .md-sidebar--primary .md-nav__item .md-nav__link--active code {
  color: #fff;
  background: var(--ad-green);
  padding: 6px 8px;
  border-radius: 6px;
  margin-left: -6px;
}
[data-md-color-scheme="activedonor"] .md-sidebar--primary .md-nav__item .md-nav__link--active:hover {
  color: #fff;
  background: var(--ad-green-dark);
}
/* Table of contents (right): green text + bar, not a full pill. */
[data-md-color-scheme="activedonor"] .md-sidebar--secondary .md-nav__link--active {
  color: var(--ad-green);
  font-weight: 600;
  border-left: 2px solid var(--ad-green);
  padding-left: 0.6rem;
  margin-left: -0.7rem;
}

/* ==========================================================================
   Home page tiles — Chrome-extensions style
   Icon floated top-left, title + grey description to the right, NO bottom
   buttons, and the WHOLE tile is clickable (stretched-link pattern: the single
   title link's ::after covers the tile, so a click anywhere navigates).
   ========================================================================== */
[data-md-color-scheme="activedonor"] .md-typeset .grid.cards > ul > li {
  position: relative;                 /* anchor for the stretched link */
  border: 1px solid #e3e6ea;
  border-radius: 8px;
  padding: 1.1rem 1.2rem;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
[data-md-color-scheme="activedonor"] .md-typeset .grid.cards > ul > li:hover {
  border-color: var(--ad-green);
  box-shadow: 0 6px 18px rgba(124, 179, 66, 0.15);
  transform: translateY(-2px);
}

/* Icon: floated left so the title sits beside it and the description wraps
   around/below it (matches the Chrome Extensions tile). Material sizes the svg
   by em (height: 1.125em), so the icon is sized via font-size on the container
   — ~1.78rem font-size yields a ~2rem icon. */
[data-md-color-scheme="activedonor"] .md-typeset .grid.cards > ul > li > p:first-child .twemoji {
  float: left;
  margin: 0.1rem 0.85rem 0.35rem 0;
  font-size: 1.78rem;
  line-height: 1;
}
[data-md-color-scheme="activedonor"] .md-typeset .grid.cards > ul > li > p:first-child .twemoji svg {
  width: auto;
  height: 2rem;
}

/* Title row + grey description. */
[data-md-color-scheme="activedonor"] .md-typeset .grid.cards > ul > li > p:first-child {
  margin: 0 0 0.25rem;
  min-height: 2rem;                   /* keep the title clear of the icon */
}
[data-md-color-scheme="activedonor"] .md-typeset .grid.cards > ul > li > p:first-child strong {
  font-family: var(--ad-heading-font);
  font-size: 1.05rem;
  font-weight: 600;
}
[data-md-color-scheme="activedonor"] .md-typeset .grid.cards > ul > li > p:not(:first-child) {
  margin: 0;
  color: #5f6368;                     /* muted grey, like the screenshot */
}

/* Title link: dark (not link-blue), no underline; whole tile is the hit area. */
[data-md-color-scheme="activedonor"] .md-typeset .grid.cards > ul > li > p:first-child a,
[data-md-color-scheme="activedonor"] .md-typeset .grid.cards > ul > li > p:first-child a:hover {
  color: #3c4043;
  text-decoration: none;
}
[data-md-color-scheme="activedonor"] .md-typeset .grid.cards > ul > li:hover > p:first-child a {
  color: var(--ad-green);
}
[data-md-color-scheme="activedonor"] .md-typeset .grid.cards > ul > li > p:first-child a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;                         /* stretch the link over the whole tile */
}

/* Per-tile icon colours (8 tiles → 8 accents), like the varied app icons. */
[data-md-color-scheme="activedonor"] .md-typeset .grid.cards > ul > li:nth-child(1) .twemoji { color: var(--ad-green);  }
[data-md-color-scheme="activedonor"] .md-typeset .grid.cards > ul > li:nth-child(2) .twemoji { color: var(--ad-blue);   }
[data-md-color-scheme="activedonor"] .md-typeset .grid.cards > ul > li:nth-child(3) .twemoji { color: var(--ad-teal);   }
[data-md-color-scheme="activedonor"] .md-typeset .grid.cards > ul > li:nth-child(4) .twemoji { color: var(--ad-purple); }
[data-md-color-scheme="activedonor"] .md-typeset .grid.cards > ul > li:nth-child(5) .twemoji { color: var(--ad-amber);  }
[data-md-color-scheme="activedonor"] .md-typeset .grid.cards > ul > li:nth-child(6) .twemoji { color: var(--ad-red);    }
[data-md-color-scheme="activedonor"] .md-typeset .grid.cards > ul > li:nth-child(7) .twemoji { color: var(--ad-cyan);   }
[data-md-color-scheme="activedonor"] .md-typeset .grid.cards > ul > li:nth-child(8) .twemoji { color: var(--ad-indigo); }

/* ==========================================================================
   Admonitions — retinted to the ActiveDonor palette
   ========================================================================== */
[data-md-color-scheme="activedonor"] .md-typeset :is(.admonition, details) {
  border-radius: 6px;
}
/* note / info → blue */
[data-md-color-scheme="activedonor"] .md-typeset :is(.note, .info) {
  border-color: var(--ad-blue);
}
[data-md-color-scheme="activedonor"] .md-typeset :is(.note, .info) > :is(.admonition-title, summary) {
  background-color: rgba(33, 150, 243, 0.1);
}
[data-md-color-scheme="activedonor"] .md-typeset :is(.note, .info) > :is(.admonition-title, summary)::before {
  background-color: var(--ad-blue);
}
/* tip / success → green */
[data-md-color-scheme="activedonor"] .md-typeset :is(.tip, .success, .hint) {
  border-color: var(--ad-green);
}
[data-md-color-scheme="activedonor"] .md-typeset :is(.tip, .success, .hint) > :is(.admonition-title, summary) {
  background-color: rgba(124, 179, 66, 0.12);
}
[data-md-color-scheme="activedonor"] .md-typeset :is(.tip, .success, .hint) > :is(.admonition-title, summary)::before {
  background-color: var(--ad-green);
}
/* warning → amber */
[data-md-color-scheme="activedonor"] .md-typeset .warning {
  border-color: var(--ad-amber);
}
[data-md-color-scheme="activedonor"] .md-typeset .warning > :is(.admonition-title, summary) {
  background-color: rgba(255, 179, 0, 0.12);
}
[data-md-color-scheme="activedonor"] .md-typeset .warning > :is(.admonition-title, summary)::before {
  background-color: var(--ad-amber);
}
/* danger / failure → red */
[data-md-color-scheme="activedonor"] .md-typeset :is(.danger, .failure, .bug) {
  border-color: var(--ad-red);
}
[data-md-color-scheme="activedonor"] .md-typeset :is(.danger, .failure, .bug) > :is(.admonition-title, summary) {
  background-color: rgba(239, 83, 80, 0.1);
}
[data-md-color-scheme="activedonor"] .md-typeset :is(.danger, .failure, .bug) > :is(.admonition-title, summary)::before {
  background-color: var(--ad-red);
}
/* question → purple */
[data-md-color-scheme="activedonor"] .md-typeset :is(.question, .faq) {
  border-color: var(--ad-purple);
}
[data-md-color-scheme="activedonor"] .md-typeset :is(.question, .faq) > :is(.admonition-title, summary) {
  background-color: rgba(126, 87, 194, 0.1);
}
[data-md-color-scheme="activedonor"] .md-typeset :is(.question, .faq) > :is(.admonition-title, summary)::before {
  background-color: var(--ad-purple);
}

/* ==========================================================================
   Tables — tinted header row
   ========================================================================== */
[data-md-color-scheme="activedonor"] .md-typeset table:not([class]) th {
  background-color: rgba(124, 179, 66, 0.08);
  color: #4a4a4a;
  font-family: var(--ad-heading-font);
  font-weight: 600;
}

/* ==========================================================================
   Screenshots wired in by mkdocs_hooks.py from [SCREENSHOT id=…] placeholders.
   Captured by tools/capture-screenshots.mjs.
   ========================================================================== */
.ad-screenshot {
  display: block;
  margin: 1.25em auto;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
}