/* Brand tweaks for the TRAPPER docs — Phase 5 (Polish).
   Hex values taken from the live Citizen Science frontend's own palette
   (trapper-frontend/.../_default_color_scheme.scss), so the docs site
   matches the actual product rather than a guessed color.

   The CS app's header (black) and left sidebar (green + leaf-pattern
   texture, trapper_sidebar.jpg) are constant across its own light/dark
   toggle — confirmed by toggling it live. So those two chrome pieces
   below are deliberately NOT scoped to [data-md-color-scheme], unlike
   the --md-* palette variables which do need a light/dark variant. */

@import url("https://fonts.googleapis.com/css2?family=Geologica:wght@500;600;700;800&display=swap");

:root {
  --md-primary-fg-color: #3f7a2a;
  --md-primary-fg-color--light: #6fa51e;
  --md-primary-fg-color--dark: #365638;
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: #ecf5e4;

  --md-accent-fg-color: #6bbf44;
  --md-accent-fg-color--transparent: #6bbf441a;
  --md-accent-bg-color: #ffffff;
  --md-accent-bg-color--light: #ffffffb3;
}

[data-md-color-scheme="slate"] {
  --md-accent-fg-color: #a6ce39;
  --md-accent-fg-color--transparent: #a6ce391a;
}

/* Hero block on the homepage — tighten spacing now that there's a real logo
   in the nav too, so the page doesn't show the mark twice in a row. */
.md-typeset .grid.cards {
  margin-top: 1em;
}

.md-typeset .grid.cards > ul > li,
.md-typeset .grid > .card {
  border-color: var(--md-default-fg-color--lightest);
}

/* Geologica for headings/UI chrome, Lato (loaded via theme.font) for body —
   matches the CS frontend's "Geologica, Lato, sans-serif" stack exactly.
   In the CS app itself, Geologica titles are bold (700) but nav *links*
   are regular weight (400) — only the color carries the active/inactive
   distinction there, so .md-nav__link keeps its own weight below instead
   of inheriting the 600 used for real headings/buttons. */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-header__title,
.md-nav__title,
.md-tabs__link,
.md-typeset .md-button {
  font-family: "Geologica", var(--md-text-font, sans-serif);
  font-weight: 600;
}

.md-nav__link {
  font-family: "Geologica", var(--md-text-font, sans-serif);
}

/* Black header + tabs strip — constant across light/dark, matches the CS
   app exactly. Material's generated [data-md-color-primary="green"]
   palette rules set --md-primary-bg-color (the header's own text/icon
   color) to a near-black value for contrast against green — invisible
   once the bg goes black, and too specific to beat with a plain :root
   override. Force it directly, on both bars so there's one solid black
   band instead of a black header sitting on top of a separate white
   tabs strip with near-black (rgba(0,0,0,.87)) text in light mode. */
.md-header,
.md-tabs {
  background-color: #000000;
}

.md-header,
.md-header .md-ellipsis,
.md-header__button,
.md-search__button,
.md-header .md-header__source,
.md-tabs__link {
  color: #ffffff;
}

.md-tabs__link {
  opacity: 0.7;
}

.md-tabs__link:hover,
.md-tabs__link--active {
  opacity: 1;
}

/* The active tab specifically is styled by Material as
   ".md-tabs__item--active .md-tabs__link { color: inherit }" — two
   classes, more specific than the single-class rule above, so it was
   winning the cascade and inheriting the (here, near-black) color of its
   parent instead of staying white. Match its specificity to override it. */
.md-tabs__item--active .md-tabs__link {
  color: #ffffff;
}

/* Same root cause again, this time on hover/focus: Material's own
   ".md-tabs__link:focus, .md-tabs__link:hover { color: inherit }" is two
   pseudo-classes/specificity (0,2,0), beating the single-class rule
   above — inherits .md-tabs's own color: var(--md-default-fg-color),
   black in light mode. Looked fine in dark mode purely by coincidence
   (--md-default-fg-color there happens to be near-white already). */
.md-tabs__link:focus,
.md-tabs__link:hover {
  color: #ffffff;
}

/* The search button's own background is a 5%-black tint (meant to read as
   a subtle darkening against Material's normal light/colored header) — on
   our black header that's invisible, so the search box had no visible
   boundary and read as bare, cramped text. Give it a real light pill and
   a bit more breathing room instead. */
.md-search__button {
  background-color: rgba(255, 255, 255, 0.12);
  padding-left: 2.5rem;
  padding-right: 3rem;
  margin: 0 0.5rem;
}

.md-search__button:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

/* The magnifying-glass icon (::before, drawn via background-color as a
   mask) and the "Ctrl+K" badge (::after) both read var(--md-default-*),
   which is near-black in light mode — invisible icon, and a near-white
   badge bg sitting under already-white badge text. Same class of bug as
   the header text/tabs fixes above; fixed values here instead of fighting
   the variable cascade again, copied from how this already looks
   correctly in dark mode (the look we want always). */
.md-search__button::before {
  background-color: rgba(226, 228, 233, 0.82) !important;
}

.md-search__button::after {
  background: rgba(11, 12, 15, 0.54) !important;
  color: #ffffff !important;
}

/* The search box/results overlay lives inside the permanently-black
   header, so it should look the same regardless of the site's light/dark
   toggle — like dark mode always, since that's what reads correctly
   against black.

   This is NOT classic Material's .md-search markup — Zensical renders the
   actual search UI (combobox, results, filters/tags panel) as a separate
   Shadow DOM component appended directly to <body> (confirmed by walking
   the DOM: document.querySelector('[role=combobox]') finds nothing from
   the light DOM, but there's a single element with a non-null
   .shadowRoot). The classic .md-search / .md-search__button above is
   only the closed-state trigger button; overriding --md-default-* on it
   (an earlier attempt) did nothing because the open overlay isn't a
   descendant of it.

   The shadow component's own <style> reads *different*, Zensical-specific
   custom properties (--color-background, --color-background-subtle,
   --color-foreground, --color-backdrop — space-separated RGB triplets,
   consumed as rgb(var(--x)/var(--alpha-*))) that DO inherit through the
   shadow boundary from the light DOM, since the component doesn't
   redefine them locally. Values below are copied from the live computed
   styles under [data-md-color-scheme="slate"].

   Targeting :root alone doesn't work, even with !important: Zensical's
   own rule is ":root, [data-md-color-scheme=\"default\"] { ... }" — the
   scheme attribute lives on <body>, so in light mode body gets its own
   DIRECT (non-inherited) match via that second selector. A directly
   matching rule on an element always wins over an ancestor's value
   (importance only orders rules competing for the *same* element) — so
   :root's value never reaches body at all. Match their exact attribute
   selector instead, for both schemes, so this is the single rule
   deciding the outcome regardless of which one's active. */
[data-md-color-scheme="default"],
[data-md-color-scheme="slate"] {
  --color-background: 22 23 26 !important;
  --color-background-subtle: 33 34 38 !important;
  --color-foreground: 255 255 255 !important;
  --color-backdrop: 11 12 15 !important;
}

/* Green, leaf-textured left nav — also constant across light/dark in the
   CS app, so this isn't scoped under [data-md-color-scheme] either.

   .md-main__inner is a flex row (content column + sidebars); by default
   .md-sidebar--primary only sizes to its own nav-list height, so on a page
   where that's shorter than the article, the green/textured panel stops
   short and leaves a plain gap below it. Stretch the whole chain to match
   the row height instead. The scrollwrap also gets an inline height from
   Material's sticky-sidebar JS (viewport height, for scroll-tracking), so
   that one needs !important to win over the inline style.

   Material also puts a 30px margin-top on the grid row (breathing room
   below the tabs bar) plus its own 22px padding-top inside the sidebar —
   together that left the green panel floating ~50px below the tabs bar,
   detached-looking. Drop the grid's margin (so the sidebar can sit flush
   under the tabs, matching the CS app) and move that breathing room onto
   the article text only, which still wants it. */
.md-main__inner.md-grid {
  align-items: stretch;
  margin-top: 0;
}

/* On a short page (short article AND a short nav list, e.g. a leaf page
   in a small section), the row itself only grows as tall as its content,
   so the green sidebar stopped short of the viewport bottom even though
   it stretches to match its row (above). .md-main already has
   "flex: 1 1 auto" inside the .md-container flex column (header/tabs →
   main → footer), so it grows to fill the container — but .md-main is
   itself a plain block box (not flex), so its child .md-grid doesn't
   automatically fill *that* extra height either; needs an explicit
   min-height now that .md-main has a real (not content-derived) height. */
.md-container {
  min-height: 100vh;
}

/* .md-main itself is "display: block" with its own CSS height left at
   auto (only stretched indirectly via flex-grow in .md-container) — a
   plain "min-height: 100%" on its child can't resolve against that (the
   classic CSS rule: percentage heights need a parent with a *specified*,
   non-auto height, which flex-grow alone doesn't count as for the next
   generation down). Make .md-main a flex container too so the grid row
   can grow into it directly, sidestepping the percentage-height rule. */
.md-main {
  display: flex;
  flex-direction: column;
}

.md-main__inner.md-grid {
  flex: 1;
}

.md-content__inner {
  padding-top: 1.875rem;
}

.md-sidebar--primary {
  height: auto;
  align-self: stretch;
  padding-top: 0;
  /* sidebar-texture-top.jpg (281px) + sidebar-texture-bottom.jpg (285px)
     = 566px combined — this keeps the row (and everything stretched to
     match it, including the sidebar itself) tall enough that the two
     non-repeating decorative caps below never overlap, even on a very
     short page. flexbox grows .md-main__inner.md-grid's cross-axis to
     fit this automatically since the sidebar is align-items: stretch. */
  min-height: 600px;
}

.md-sidebar--primary .md-sidebar__inner,
.md-sidebar--primary .md-sidebar__scrollwrap {
  height: 100% !important;
  min-height: 100%;
}

/* Extra breathing room above the active section's nav list, and below the
   whole nav before it hits the bottom decorative cap — desktop only
   (76.25em is Material's own breakpoint for the "lifted" sidebar nav, same
   one used internally for navigation.tabs/sections layouts). */
@media screen and (min-width: 76.25em) {
  .md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav {
    margin-top: 2.8rem;
  }

  .md-nav--primary {
    margin-bottom: 8.1rem;
  }
}

.md-sidebar--primary {
  background-color: #5a7837;
  background-image: url("../img/sidebar-texture-top.jpg"), url("../img/sidebar-texture-bottom.jpg");
  background-repeat: no-repeat, no-repeat;
  background-position: top center, bottom center;
  background-size: 100% auto, 100% auto;
}

/* Colors/weights checked directly against the live CS sidebar's computed
   styles (not guessed): default links are lime (#a6ce39, the same green
   as their --trapper-color-link), the CURRENT page is white — opposite of
   what an initial guess would assume — and neither state is ever bold;
   only the project-title-equivalent (.md-nav__title here) is bold/white,
   matching CS's own 700-weight white project name above its nav list. */
.md-sidebar--primary .md-nav__title {
  color: #ffffff;
}

/* !important on the colors below: section-header items (e.g. "Deploy &
   operate") render as a wrapping <div class="md-nav__link md-nav__container">
   around an *inner* <a class="md-nav__link"> (the link to that section's
   own index page) plus a <label> toggle — and Material has its own,
   more specific generated rule for that inner <a> that falls back to
   --md-default-fg-color (near-black in light mode), beating a plain
   descendant-selector override. Same root cause as the active-tab and
   header-text fixes above; happens often enough in this theme's nav
   markup that !important is the pragmatic fix here, not a habit. */
.md-sidebar--primary .md-nav__link {
  color: #a6ce39 !important;
  font-weight: 400;
  font-size: 15px;
}

.md-sidebar--primary .md-nav__item--active > .md-nav__link,
.md-sidebar--primary .md-nav__link:hover,
.md-sidebar--primary .md-nav__link--active {
  color: #ffffff !important;
}

.md-sidebar--primary .md-nav__icon.md-icon::after,
.md-sidebar--primary .md-nav__title .md-nav__icon::after {
  background-color: #a6ce39;
}

.md-sidebar--primary .md-nav__item--active > .md-nav__link .md-nav__icon.md-icon::after {
  background-color: #ffffff;
}