/* Docs site theme: the web app's own colours and chrome, on top of Material.
 *
 * Navy and amber are sampled from the app (media_preview_generator/web/static/css/
 * style.css: --plex-dark, --plex-gray, --plex-orange). The header is navy with the
 * app's amber hairline in BOTH schemes, so the docs are recognisably the same
 * product. Amber stays a scalpel: brand name, links, active nav, focus. Nothing else.
 *
 * Contrast (WCAG 2.x, opaque colours, measured against the surface each sits on):
 *   light  text #1e293b / #ffffff 14.6:1   link #8f5f00 / #ffffff 5.5:1
 *   dark   text #dddfe8 / #1a1a2e 12.8:1   link #e5a00d / #1a1a2e 7.6:1
 * #e5a00d on white is only 2.2:1, which is why light mode uses the deeper amber.
 */

:root {
  --mpg-navy-950: #0f0f1a;
  --mpg-navy-975: #0b0b14;
  --mpg-navy-900: #1a1a2e;
  --mpg-navy-850: #222237;
  --mpg-amber: #e5a00d;
  --mpg-radius: 8px;
}

/* Colour schemes ----------------------------------------------------------- */

[data-md-color-scheme="default"],
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: var(--mpg-navy-950);
  --md-primary-fg-color--light: var(--mpg-navy-900);
  --md-primary-fg-color--dark: var(--mpg-navy-975);
  --md-primary-bg-color: #ecebf3;
  --md-primary-bg-color--light: #ecebf3b3;

  --md-footer-fg-color: #ecebf3;
  --md-footer-fg-color--light: #b4b6c8;
  --md-footer-fg-color--lighter: #9a9cb4;
  --md-footer-bg-color: var(--mpg-navy-950);
  --md-footer-bg-color--dark: var(--mpg-navy-975);
}

[data-md-color-scheme="default"] {
  --md-default-fg-color: #1e293b;
  --md-default-fg-color--light: #475569;
  --md-default-fg-color--lighter: #94a3b8;
  --md-default-fg-color--lightest: #e2e6ee;
  --md-default-bg-color: #ffffff;

  --md-accent-fg-color: #6b4700;
  --md-accent-fg-color--transparent: #e5a00d1f;
  --md-accent-bg-color: #ffffff;
  --md-accent-bg-color--light: #ffffffb3;

  --md-typeset-color: #1e293b;
  --md-typeset-a-color: #8f5f00;
  --md-typeset-mark-color: #e5a00d4d;
  --md-typeset-table-color: #e2e6ee;
  --md-typeset-table-color--light: #f7f8fa;

  --md-code-fg-color: #1e293b;
  --md-code-bg-color: #f3f4f8;
  --md-code-bg-color--light: #f3f4f8b3;
  --md-code-bg-color--lighter: #f3f4f84d;

  --mpg-surface: #f5f6f9;
  --mpg-border: #e2e6ee;
  --mpg-shot-border: #0f0f1a26;
  --mpg-shot-shadow: 0 1px 2px #0f0f1a14, 0 12px 32px -12px #0f0f1a59;
}

[data-md-color-scheme="slate"] {
  --md-hue: 240deg;
  --md-default-fg-color: #dddfe8;
  --md-default-fg-color--light: #a3a6bd;
  --md-default-fg-color--lighter: #6e7190;
  --md-default-fg-color--lightest: #dddfe81f;
  --md-default-bg-color: var(--mpg-navy-900);
  --md-default-bg-color--light: #1a1a2e8a;
  --md-default-bg-color--lighter: #1a1a2e42;
  --md-default-bg-color--lightest: #1a1a2e12;

  --md-accent-fg-color: #f2b53a;
  --md-accent-fg-color--transparent: #e5a00d24;
  --md-accent-bg-color: var(--mpg-navy-950);
  --md-accent-bg-color--light: #0f0f1ab3;

  --md-typeset-color: #dddfe8;
  --md-typeset-a-color: var(--mpg-amber);
  --md-typeset-mark-color: #e5a00d4d;
  --md-typeset-table-color: #ffffff17;
  --md-typeset-table-color--light: #ffffff08;

  --md-code-fg-color: #d6d8e6;
  --md-code-bg-color: var(--mpg-navy-850);
  --md-code-bg-color--light: #222237e6;
  --md-code-bg-color--lighter: #2222378a;

  --mpg-surface: var(--mpg-navy-850);
  --mpg-border: #ffffff17;
  --mpg-shot-border: #ffffff1a;
  --mpg-shot-shadow: 0 1px 2px #00000040, 0 16px 40px -16px #000000b3;
}

/* Header: navy bar + the app's amber hairline ----------------------------- */

.md-header {
  background-color: var(--mpg-navy-950);
}

.md-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, #e5a00d00 0%, #e5a00da6 18%, #e5a00da6 82%, #e5a00d00 100%);
}

.md-header__topic:first-child {
  color: var(--mpg-amber);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.md-search__form {
  background-color: #ffffff12;
  border-radius: 6px;
}

.md-search__form:hover {
  background-color: #ffffff1f;
}

/* Typography --------------------------------------------------------------- */

.md-typeset {
  line-height: 1.65;
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
  color: var(--md-default-fg-color);
  letter-spacing: -0.015em;
}

.md-typeset h1 {
  font-size: 2em;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 0.9em;
}

.md-typeset h2 {
  font-size: 1.44em;
  font-weight: 600;
  line-height: 1.3;
  margin-top: 2em;
}

.md-typeset h3 {
  font-size: 1.2em;
  font-weight: 600;
  line-height: 1.4;
}

.md-typeset h4 {
  font-size: 1em;
  font-weight: 600;
}

.md-typeset strong {
  font-weight: 600;
}

.md-typeset a:not(.headerlink):not(.md-button):not(.md-content__button) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: color-mix(in srgb, currentcolor 30%, transparent);
}

.md-typeset a:not(.headerlink):not(.md-button):not(.md-content__button):hover {
  text-decoration-color: currentcolor;
}

/* Screenshots: framed like an app window ---------------------------------- */

.md-typeset img[src$=".webp"] {
  display: block;
  margin: 1.5em 0;
  border: 1px solid var(--mpg-shot-border);
  border-radius: 10px;
  box-shadow: var(--mpg-shot-shadow);
}

/* Code --------------------------------------------------------------------- */

.md-typeset code {
  border-radius: 4px;
}

.md-typeset pre > code {
  border: 1px solid var(--mpg-border);
  border-radius: var(--mpg-radius);
}

/* Tables ------------------------------------------------------------------- */

.md-typeset table:not([class]) {
  font-size: 0.7rem;
  line-height: 1.55;
  border: 1px solid var(--mpg-border);
  border-radius: var(--mpg-radius);
}

.md-typeset table:not([class]) th {
  background-color: var(--mpg-surface);
  border-bottom: 1px solid var(--mpg-border);
  color: var(--md-default-fg-color);
  font-weight: 600;
  padding: 0.75em 0.9em;
  vertical-align: bottom;
}

.md-typeset table:not([class]) td {
  border-top: 1px solid var(--mpg-border);
  padding: 0.75em 0.9em;
  vertical-align: top;
}

.md-typeset table:not([class]) tbody tr:first-child td {
  border-top: none;
}

/* The first column labels the row (a setting, a variable, a comparison axis). */
.md-typeset table:not([class]) td:first-child {
  min-width: 9em;
  background-color: var(--mpg-surface);
  color: var(--md-default-fg-color);
  font-weight: 600;
}

.md-typeset table:not([class]) tbody tr:hover {
  background-color: var(--md-typeset-table-color--light);
  box-shadow: none;
}

/* Admonitions: calmer shape, one colour per GitHub alert type ------------- */

.md-typeset .admonition.note,
.md-typeset details.note {
  --mpg-callout: #4d8fe0;
}

.md-typeset .admonition.tip,
.md-typeset details.tip {
  --mpg-callout: #2ea66a;
}

.md-typeset .admonition.important,
.md-typeset details.important {
  --mpg-callout: #8b6cf0;
}

.md-typeset .admonition.warning,
.md-typeset details.warning {
  --mpg-callout: #e07b1a;
}

.md-typeset .admonition.danger,
.md-typeset details.danger {
  --mpg-callout: #e0524a;
}

.md-typeset :is(.admonition, details)[class] {
  border: 1px solid color-mix(in srgb, var(--mpg-callout, #4d8fe0) 30%, var(--mpg-border));
  border-left: 3px solid var(--mpg-callout, #4d8fe0);
  border-radius: 6px;
  box-shadow: none;
  font-size: 0.72rem;
}

.md-typeset :is(.admonition, details)[class] > :is(.admonition-title, summary) {
  background-color: color-mix(in srgb, var(--mpg-callout, #4d8fe0) 10%, transparent);
  font-weight: 600;
}

.md-typeset :is(.admonition, details)[class] > :is(.admonition-title, summary)::before {
  background-color: var(--mpg-callout, #4d8fe0);
}

.md-typeset .admonition.important > .admonition-title::before {
  -webkit-mask-image: var(--md-admonition-icon--info);
  mask-image: var(--md-admonition-icon--info);
}

/* Footer ------------------------------------------------------------------- */

.md-footer-meta {
  border-top: 1px solid #ffffff12;
}

.md-social__link:hover {
  color: var(--mpg-amber);
}