/* ==========================================================================
   Predico — Material for MkDocs theme overrides
   ========================================================================== */

/* Font stacks — kept identical to the frontend (frontend/src/index.css) so
   the docs and the app render in the same typeface. `theme.font: false` in
   mkdocs.yml disables Material's Google Fonts loader. We override the
   `*-family` vars directly (rather than the bare `--md-text-font` slot) so
   we control the entire stack — Material's default would otherwise append
   its own `-apple-system, …, Arial, sans-serif` fallback after ours. */
:root {
  --md-text-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
                         'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
                         'Helvetica Neue', sans-serif;
  --md-code-font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
                         monospace;
}

/* Brand palette — mirrors the Predico frontend header
   (frontend/src/components/Header.js → `bg-white dark:bg-gray-800`):
   white header + indigo-600 accent in light mode, gray-800 header +
   blue-400 accent in dark mode.
   `primary: custom` in mkdocs.yml is what activates these vars.
   Note: Material repurposes `--md-primary-fg-color` as the header/tab
   BACKGROUND and `--md-primary-bg-color` as the TEXT color on it. */
:root {
  /* Flat surface — matches the frontend light body/shell (#fcfcfc, the
     `surface` token). Header shares the same color, like the frontend. */
  --md-default-bg-color:        #fcfcfc;
  --md-primary-fg-color:        #fcfcfc;  /* header bg — surface */
  --md-primary-fg-color--light: #f9fafb;  /* gray-50 */
  --md-primary-fg-color--dark:  #f3f4f6;  /* gray-100 */
  --md-primary-bg-color:        #1f2937;  /* text color on header — gray-800 */
  --md-primary-bg-color--light: #1f293799;

  /* Link palette — Predico brand teal (#05788a from logo); hover shifts
     to a darker shade for a clear state change within the same family. */
  --md-link-fg-color:           #05788a;  /* brand-600 — default link */
  --md-link-fg-color--hover:    #076273;  /* brand-700 — hover */

  --md-accent-fg-color:         #05788a;  /* hover accent (nav, tables, etc.) */
  --md-accent-fg-color--transparent: #05788a14;
  --md-accent-bg-color:         #ffffff;
  --md-accent-bg-color--light:  #ffffffcc;

  --md-typeset-a-color:         var(--md-link-fg-color);
}

[data-md-color-scheme="slate"] {
  --md-primary-fg-color:        #1f2937;  /* header bg — dark:bg-gray-800 */
  --md-primary-fg-color--light: #374151;  /* gray-700 */
  --md-primary-fg-color--dark:  #111827;  /* gray-900 */
  --md-primary-bg-color:        #f3f4f6;  /* text color on header — gray-100 */

  --md-link-fg-color:           #3aabb8;  /* brand-400 — readable link in dark mode */
  --md-link-fg-color--hover:    #74cdd6;  /* brand-300 — hover */

  --md-accent-fg-color:         #74cdd6;
  --md-accent-fg-color--transparent: #74cdd61f;
  --md-typeset-a-color:         var(--md-link-fg-color);
  --md-default-bg-color:        #0f172a;  /* slate-900 — matches frontend dark body */
}

/* Force link color at the element level so it applies inside <strong>, <em>,
   table cells, etc. Material's default rule only colors `.md-typeset a`
   directly — nested like `<strong><a>…</a></strong>` can inherit the parent's
   emphasis color instead, which was rendering bold links as near-white body
   text. :hover stays the one user-visible state change. */
.md-typeset a,
.md-typeset a code,
.md-typeset strong a,
.md-typeset em a,
.md-typeset a strong,
.md-typeset a em {
  color: var(--md-link-fg-color);
}
.md-typeset a:hover,
.md-typeset a:focus,
.md-typeset a:hover code,
.md-typeset strong a:hover,
.md-typeset em a:hover,
.md-typeset a:hover strong,
.md-typeset a:hover em {
  color: var(--md-link-fg-color--hover);
}

/* Make sure the body always has a scrollbar gutter to avoid layout shift. */
html { overflow-y: scroll; }

/* No image logo — the header shows "Predico" as a text wordmark,
   followed by a smaller "DOCS" chip. The default Material book icon
   is hidden since we render the brand purely as text. */

/* Header polish — light border in both modes, matching the frontend's
   `border-b border-gray-200 dark:border-gray-700` treatment. */
.md-header {
  box-shadow: none;
  border-bottom: 1px solid #e5e7eb;  /* gray-200 */
}
[data-md-color-scheme="slate"] .md-header {
  border-bottom: 1px solid #374151;  /* gray-700 */
}

/* Breathing room above the wordmark so the brand sits lower from the
   viewport edge instead of hugging the very top of the page. */
.md-header__inner {
  padding-top: 0.8rem;
  padding-bottom: 0.4rem;
}

/* Hide the default Material logo icon — the text wordmark is the brand. */
.md-header__button.md-logo {
  display: none;
}

/* Align the wordmark with the tab row below — zero out all inherited
   margins/padding so the title sits flush at the grid's left edge,
   matching the first tab link. */
.md-header__title,
.md-header__title .md-header__ellipsis,
.md-header__title .md-header__topic {
  margin-left: 0;
  padding-left: 0;
}

/* Brand: "Predico" wordmark (from site_name via CSS) + smaller "DOCS" chip. */
.md-header__title,
.md-header__title .md-header__ellipsis,
.md-header__title .md-header__topic {
  display: flex;
  align-items: center;
}
/* Material positions topics absolutely (so the page-title topic can slide
   over the wordmark on scroll). With the new inline-tabs layout the title
   needs a non-zero intrinsic width — switch the first topic to `relative`
   so its content drives the title's width, and hide the second topic
   entirely (it would otherwise collide with the tabs). */
.md-header__title .md-header__topic:first-child {
  position: relative;
  opacity: 1;
  transform: none;
}
.md-header__title .md-header__topic:not(:first-child) {
  display: none;
}
.md-header__title .md-header__topic:first-child .md-ellipsis {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55rem;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--md-primary-bg-color);
  line-height: 1;
}
.md-header__title .md-header__topic:first-child .md-ellipsis::after {
  content: "DOCS";
  align-self: center;
  padding: 0.16rem 0.42rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1;
  color: var(--md-accent-fg-color);
  background: color-mix(in srgb, var(--md-accent-fg-color) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--md-accent-fg-color) 32%, transparent);
  border-radius: 4px;
  text-transform: uppercase;
}

/* Collapsible desktop search — show only the magnifier icon by default;
   expand into a full input on focus. Mobile/tablet keep Material's default
   overlay behavior (which already works that way below 60em). */
@media screen and (min-width: 60em) {
  .md-search__form {
    width: 2.2rem;
    background-color: transparent;
    border-radius: 4px;
    overflow: hidden;
    transition: width 220ms ease, background-color 220ms ease;
  }
  .md-search__form:hover {
    background-color: color-mix(in srgb, var(--md-primary-bg-color) 10%, transparent);
  }
  .md-search__form:focus-within {
    width: 14rem;
    background-color: var(--md-default-bg-color);
  }
  .md-search__input {
    opacity: 0;
    color: var(--md-default-fg-color);
    transition: opacity 180ms ease;
  }
  .md-search__input::placeholder {
    color: transparent;
  }
  .md-search__form:focus-within .md-search__input {
    opacity: 1;
  }
  .md-search__form:focus-within .md-search__input::placeholder {
    color: var(--md-default-fg-color--light);
  }
}

/* Top navigation tabs: rendered INLINE inside the header row (next to the
   "Predico DOCS" wordmark) instead of as a separate row below. The override
   in `overrides/partials/header.html` includes `partials/tabs.html` inside
   `.md-header__inner`; the rules below strip the tabs partial's full-row
   styling so it sits as a regular flex child. */
.md-header__inner > .md-tabs {
  background: transparent;
  box-shadow: none;
  border: 0;
  width: auto;
  margin: 0 auto 0 1.4rem;  /* push search/palette to the right */
  overflow: visible;
  color: var(--md-primary-bg-color);
}
.md-header__inner > .md-tabs > .md-grid {
  margin: 0;
  padding: 0;
  max-width: none;
}
.md-header__inner > .md-tabs .md-tabs__list {
  display: flex;
  margin: 0;
  padding: 0;
  height: auto;
  white-space: nowrap;
  contain: none;
}
.md-header__inner > .md-tabs .md-tabs__item {
  height: auto;
  padding: 0;
  margin: 0;
}
.md-header__inner > .md-tabs .md-tabs__link {
  margin: 0 0.9rem 0 0;
  padding: 0;
  font-size: 0.78rem;
  opacity: 0.72;
  font-weight: 500;
  transition: opacity 140ms ease, border-color 140ms ease;
}
.md-header__inner > .md-tabs .md-tabs__link:hover,
.md-header__inner > .md-tabs .md-tabs__link--active {
  opacity: 1;
}
.md-header__inner > .md-tabs .md-tabs__link--active {
  color: var(--md-accent-fg-color);
}
/* Title no longer needs to grow — tabs sit immediately after it, and the
   `margin-right: auto` on the tabs container pushes search/palette to the
   right edge. */
.md-header__title {
  flex: 0 0 auto;
}

/* Sidebar nav: quieter labels, subtle highlight on active items. */
.md-nav__link {
  transition: color 120ms ease;
}
.md-nav__item .md-nav__link--active,
.md-nav__item .md-nav__link--active code {
  color: var(--md-accent-fg-color);
  font-weight: 600;
}
.md-nav__title {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--md-default-fg-color--light);
  opacity: 0.72;
}

/* Single-sidebar layout on desktop:
   - Primary (left) sidebar shows the active tab's pages, with each page's
     H2/H3 headings nested underneath (via `toc.integrate`).
   - Secondary sidebar is therefore redundant and hidden.
   - Mobile drawer keeps Material's default behavior. */
@media screen and (min-width: 76.25em) {
  .md-sidebar--secondary {
    display: none;
  }
  .md-main__inner .md-content {
    max-width: 52rem;
    margin-right: 6rem !important;
  }
}

/* Typography refinements. */
.md-typeset {
  font-feature-settings: "ss01", "cv11";
}
/* Heading weights match the frontend's @layer base in frontend/src/index.css:
   h1 = 800 (extrabold), h2 = 700 (bold), h3 = 600 (semibold). */
.md-typeset h1 {
  font-weight: 800;
  letter-spacing: -0.01em;
}
.md-typeset h2 {
  font-weight: 700;
  letter-spacing: -0.005em;
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
  padding-bottom: 0.3rem;
}
.md-typeset h3 {
  font-weight: 600;
}
.md-typeset code {
  font-size: 0.88em;
  padding: 0.15em 0.35em;
  border-radius: 4px;
}

/* Tables: modernized — rounded, hover rows, sticky header on wide tables. */
.md-typeset table:not([class]) {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 0 var(--md-default-fg-color--lightest);
}
.md-typeset table:not([class]) th {
  background: var(--md-default-fg-color--lightest);
  font-weight: 600;
  letter-spacing: 0.01em;
}
.md-typeset table:not([class]) tr:hover td {
  background: var(--md-accent-fg-color--transparent);
}

/* Rewards distribution tables: compact rendering for the per-track payment
   tables in `rewards.md`. Re-applies Material's default table chrome (rounded
   corners, header tint, hover row) but with much tighter cell padding and a
   smaller font, since the rowspan layout otherwise stretches each row to
   ~50px tall. League-name cells keep their inline colors via specificity
   (inline styles always win). */
.md-typeset table.rewards-distribution {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 0 var(--md-default-fg-color--lightest);
  border-collapse: collapse;
  width: 100%;
  margin: 1em 0;
  font-size: 0.78rem;
  line-height: 1.35;
}
.md-typeset table.rewards-distribution th,
.md-typeset table.rewards-distribution td {
  padding: 0.32em 0.55em;
  border-top: 0.05rem solid var(--md-typeset-table-color);
  vertical-align: middle;
}
.md-typeset table.rewards-distribution th {
  background: var(--md-default-fg-color--lightest);
  font-weight: 600;
  text-align: left;
  vertical-align: bottom;
}
.md-typeset table.rewards-distribution ul {
  margin: 0.2em 0 0.2em 1em;
  padding: 0;
  list-style: disc;
}
.md-typeset table.rewards-distribution ul li {
  margin: 0;
  padding: 0;
}

/* Admonitions: rounder, softer, slightly more padding. */
.md-typeset .admonition,
.md-typeset details {
  border-radius: 10px;
  border-width: 0 0 0 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.md-typeset .admonition-title,
.md-typeset summary {
  font-weight: 600;
}

/* Grid cards — compact, navigable:
   dense information, leading accent bar (brand teal), tinted title with
   trailing chevron, and a stretched-link overlay so the entire card is
   clickable. */
.md-typeset .grid.cards {
  gap: 0.6rem;
}
.md-typeset .grid.cards > ul {
  grid-gap: 0.6rem;
  gap: 0.6rem;
}
.md-typeset .grid.cards > ul > li {
  position: relative;
  border-radius: 6px;
  border: 1px solid var(--md-default-fg-color--lightest);
  padding: 0.75rem 0.9rem;
  margin: 0;
  background: var(--md-default-bg-color);
  transition:
    background-color 140ms ease,
    border-color 140ms ease;
}
/* Leading brand-teal accent bar. Sits inside the rounded border by 1px so it
   reads as part of the card edge rather than a stripe behind it. */
.md-typeset .grid.cards > ul > li::before {
  content: "";
  position: absolute;
  left: -1px;
  top: -1px;
  bottom: -1px;
  width: 3px;
  background: var(--md-link-fg-color);
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
  opacity: 0.7;
  transition: opacity 140ms ease;
}
.md-typeset .grid.cards > ul > li:hover {
  background: color-mix(in srgb, var(--md-default-fg-color) 3%, transparent);
  border-color: color-mix(in srgb, var(--md-default-fg-color) 18%, transparent);
}
.md-typeset .grid.cards > ul > li:hover::before {
  opacity: 1;
}
/* Hide the `---` divider — the card is dense enough without it. */
.md-typeset .grid.cards > ul > li > hr {
  display: none;
}
/* Single-row variant: force all items onto one row regardless of count. */
.md-typeset .grid.cards.row > ul,
.md-typeset div.grid.cards.row > ul {
  grid-template-columns: repeat(var(--cards-row, 4), minmax(0, 1fr)) !important;
}
.md-typeset .grid.cards.row > ul > li {
  padding: 0.55rem 0.7rem;
  min-width: 0;
}
.md-typeset .grid.cards.row > ul > li > p:first-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.md-typeset .grid.cards > ul > li > p {
  line-height: 1.45;
  margin: 0;
}
.md-typeset .grid.cards > ul > li > p:first-child {
  font-weight: 600;
  font-size: 0.84rem;
  letter-spacing: -0.003em;
  margin-bottom: 0.2rem;
  color: var(--md-default-fg-color);
}
.md-typeset .grid.cards > ul > li > p:first-child strong {
  font-weight: 600;
}
.md-typeset .grid.cards > ul > li > p:not(:first-child) {
  font-size: 0.74rem;
  color: var(--md-default-fg-color--light);
}
/* Default for non-title links (rare). Kept neutral so they don't compete
   with the title. */
.md-typeset .grid.cards > ul > li a {
  color: inherit;
  text-decoration: none;
}
/* Title link: brand-coloured so the card reads as actionable. */
.md-typeset .grid.cards > ul > li > p:first-child a {
  color: var(--md-link-fg-color);
}
.md-typeset .grid.cards > ul > li > p:first-child a:hover,
.md-typeset .grid.cards > ul > li:hover > p:first-child a {
  color: var(--md-link-fg-color--hover);
}
/* Trailing chevron — animates on hover for a clear "go" affordance. */
.md-typeset .grid.cards > ul > li > p:first-child a::after {
  content: " →";
  display: inline-block;
  margin-left: 0.2rem;
  transition: transform 140ms ease;
}
.md-typeset .grid.cards > ul > li:hover > p:first-child a::after {
  transform: translateX(2px);
}
/* Stretched-link: a transparent overlay over the entire card that delegates
   clicks to the title's anchor. Description text becomes non-selectable —
   acceptable trade for whole-card click. */
.md-typeset .grid.cards > ul > li > p:first-child a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.md-typeset .grid.cards > ul > li > p:not(:first-child) {
  position: relative;
  z-index: 2;
  pointer-events: none;
}
.md-typeset .grid.cards > ul > li > p:not(:first-child) a {
  pointer-events: auto;
}
.md-typeset .grid.cards .twemoji,
.md-typeset .grid.cards svg {
  height: 0.95rem;
  width: 0.95rem;
  margin-right: 0.35rem;
  vertical-align: -2px;
  color: var(--md-default-fg-color--light);
  transition: color 140ms ease;
}
.md-typeset .grid.cards > ul > li:hover .twemoji,
.md-typeset .grid.cards > ul > li:hover svg {
  color: var(--md-accent-fg-color);
}

/* Code blocks: gentler contrast, rounded corners.
   Light mode: lift the code background closer to white than Material's default
   gray. Dark mode is left untouched so syntax highlighting stays legible. */
:root {
  --md-code-bg-color: #fafbfc;
}
[data-md-color-scheme="default"] .md-typeset pre > code,
[data-md-color-scheme="default"] .md-typeset .highlight pre,
[data-md-color-scheme="default"] .md-typeset .highlighttable .linenos {
  background-color: #fafbfc;
}
[data-md-color-scheme="default"] .md-typeset .highlighttable .filename,
[data-md-color-scheme="default"] .md-typeset .codehilite .filename,
[data-md-color-scheme="default"] .md-typeset .highlight .filename {
  background-color: #f3f4f6;
}
.md-typeset pre > code {
  border-radius: 8px;
}
.highlight {
  border-radius: 8px;
}

/* "On this page" TOC on the right: less visual noise. */
.md-sidebar--secondary .md-nav__title {
  display: none;
}

/* Footer polish. */
.md-footer-meta {
  background: var(--md-primary-fg-color--dark);
}