/* ========================================
   Custom overrides — colorful header & footer
   Loaded AFTER catppuccin.css (see extra_css in mkdocs.yml).

   Header and footer get DISTINCT Catppuccin accent backgrounds in both
   themes, with high-contrast foregrounds (the stock theme had ~1.4:1
   header contrast and a footer that was nearly invisible against the page).

   Light (Latte):  header = mauve  (#8839ef), footer = blue (#1e66f5)
   Dark  (Mocha):  header = mauve  (#cba6f7), footer = teal (#94e2d5)

   NOTE: catppuccin.css sets .md-header/.md-tabs backgrounds directly
   (mantle/code-bg) and forces header text colors with !important, so we
   must override those elements directly here too — the variables alone
   don't reach the header.
   ======================================== */

/* Light theme — Catppuccin Latte */
[data-md-color-scheme="latte"] {
  /* Header: mauve background, near-white text */
  --md-primary-fg-color: var(--ctp-latte-mauve);
  --md-primary-fg-color--light: var(--ctp-latte-lavender);
  --md-primary-fg-color--dark: color-mix(in srgb, var(--ctp-latte-mauve) 78%, black);
  --md-primary-bg-color: var(--ctp-latte-base);
  --md-primary-bg-color--light: var(--ctp-latte-crust);

  /* Footer: blue background, near-white text */
  --md-footer-bg-color: var(--ctp-latte-blue);
  --md-footer-bg-color--dark: color-mix(in srgb, var(--ctp-latte-blue) 80%, black);
  --md-footer-fg-color: var(--ctp-latte-base);
  --md-footer-fg-color--light: var(--ctp-latte-crust);
  --md-footer-fg-color--lighter: var(--ctp-latte-surface0);

  /* Header bar & tabs on mauve */
  --ctp-hdr: var(--ctp-latte-mauve);
  --ctp-hdr-fg: var(--ctp-latte-base);
}

/* Dark theme — Catppuccin Mocha */
[data-md-color-scheme="mocha"] {
  /* Header: light mauve background, dark text */
  --md-primary-fg-color: var(--ctp-mocha-mauve);
  --md-primary-fg-color--light: var(--ctp-mocha-lavender);
  --md-primary-fg-color--dark: color-mix(in srgb, var(--ctp-mocha-mauve) 72%, black);
  --md-primary-bg-color: var(--ctp-mocha-crust);
  --md-primary-bg-color--light: var(--ctp-mocha-surface0);

  /* Footer: teal background, dark text */
  --md-footer-bg-color: var(--ctp-mocha-teal);
  --md-footer-bg-color--dark: color-mix(in srgb, var(--ctp-mocha-teal) 80%, black);
  --md-footer-fg-color: var(--ctp-mocha-crust);
  --md-footer-fg-color--light: var(--ctp-mocha-base);
  --md-footer-fg-color--lighter: var(--ctp-mocha-surface0);

  /* Header bar & tabs on mauve */
  --ctp-hdr: var(--ctp-mocha-mauve);
  --ctp-hdr-fg: var(--ctp-mocha-crust);
}

/* ---- Header & tabs element rules (override catppuccin.css directly) ---- */

[data-md-color-scheme="latte"] .md-header,
[data-md-color-scheme="latte"] .md-tabs,
[data-md-color-scheme="mocha"] .md-header,
[data-md-color-scheme="mocha"] .md-tabs {
  background-color: var(--ctp-hdr);
}

[data-md-color-scheme="latte"] .md-tabs,
[data-md-color-scheme="mocha"] .md-tabs {
  border-bottom-color: color-mix(in srgb, var(--ctp-hdr) 55%, black);
}

[data-md-color-scheme="latte"] .md-header__title,
[data-md-color-scheme="latte"] .md-header__button,
[data-md-color-scheme="latte"] .md-header__topic,
[data-md-color-scheme="latte"] .md-tabs__link,
[data-md-color-scheme="mocha"] .md-header__title,
[data-md-color-scheme="mocha"] .md-header__button,
[data-md-color-scheme="mocha"] .md-header__topic,
[data-md-color-scheme="mocha"] .md-tabs__link {
  color: var(--ctp-hdr-fg) !important;
}

[data-md-color-scheme="latte"] .md-tabs__link,
[data-md-color-scheme="mocha"] .md-tabs__link {
  opacity: 0.85;
}

[data-md-color-scheme="latte"] .md-tabs__link--active,
[data-md-color-scheme="latte"] .md-tabs__link:hover,
[data-md-color-scheme="mocha"] .md-tabs__link--active,
[data-md-color-scheme="mocha"] .md-tabs__link:hover {
  opacity: 1;
}