/*
 * SA:GL branding for Material for MkDocs, taken from the sagl.app and
 * sagl.mp sites (xeonr/sagl/website and xeonr/sagl/server-list):
 *
 *   accent      #e28b10, hover #d47e05          server-list theme.less @base-color
 *   backdrop    Los Santos skyline, fixed,      website src/styles.css
 *               under a dark gradient and a 5px blur, on #111
 *   surfaces    rgba(255,255,255,.08) fills, hsla(0,0%,100%,.25) borders, 3px
 *   headings    Bank Gothic Bold                website src/theme/Typography.tsx
 *   wordmark    Pricedown Black                 the GTA logo face
 *
 * Everything hangs off Material's `slate` scheme with `primary: custom` and
 * `accent: custom` rather than a scheme of its own. A custom scheme starts
 * from the *light* defaults and would need every one of Material's ~60 dark
 * variables restated to avoid light-mode leftovers in the corners nobody
 * screenshots; extending slate means only the differences live here.
 *
 * Body copy deliberately stays on Material's own text face. The site sets
 * Aharoni Bold on `body`, which reads fine across a one-screen marketing
 * page and badly across an API reference — the brand is carried by the
 * headings, the accent and the backdrop instead.
 */

@font-face {
  font-family: "Bank Gothic";
  src: url("../assets/fonts/bankgothic-bold.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Pricedown";
  src: url("../assets/fonts/pricedown-black.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --sagl-orange: #e28b10;
  --sagl-orange-dark: #d47e05;
  --sagl-orange-light: #f0a53a;
  /* The fallback inside var() is not optional. Material declares
     --md-text-font-family on `body`, not `:root`, so a bare
     var(--md-text-font-family) here resolves against <html>, where it does
     not exist, and the whole custom property becomes invalid at
     computed-value time — every `font-family: var(--sagl-heading-font)`
     below then silently falls back to the inherited face. */
  --sagl-heading-font: "Bank Gothic",
    var(
      --md-text-font-family,
      -apple-system,
      BlinkMacSystemFont,
      Helvetica,
      Arial,
      sans-serif
    );
  /* The site's own surface recipe: a barely-there white fill with a
     brighter hairline, square-ish at 3px. */
  --sagl-surface: rgba(255, 255, 255, 0.08);
  --sagl-surface-strong: rgba(255, 255, 255, 0.12);
  --sagl-hairline: hsla(0, 0%, 100%, 0.25);
}

/* ---------------------------------------------------------------- palette */

[data-md-color-primary="custom"] {
  --md-primary-fg-color: #16130f;
  --md-primary-fg-color--light: #241e17;
  --md-primary-fg-color--dark: #0d0b09;
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: hsla(0, 0%, 100%, 0.7);
}

[data-md-color-accent="custom"] {
  --md-accent-fg-color: var(--sagl-orange-light);
  --md-accent-fg-color--transparent: rgba(226, 139, 16, 0.1);
  --md-accent-bg-color: #16130f;
  --md-accent-bg-color--light: hsla(0, 0%, 100%, 0.7);
}

[data-md-color-scheme="slate"] {
  /* Warms slate's blue-grey greys towards the sunset in the backdrop.
     Material derives its slate greys from this in hsla(), and extra_css
     loads after the theme, so the later rule at equal specificity wins. */
  --md-hue: 30deg;

  /* Transparent, so the skyline painted on <html> shows through the page,
     the sidebars and the content alike. */
  --md-default-bg-color: transparent;
  --md-default-bg-color--light: hsla(0, 0%, 100%, 0.07);
  --md-default-bg-color--lighter: hsla(0, 0%, 100%, 0.03);
  --md-default-bg-color--lightest: hsla(0, 0%, 100%, 0.01);

  --md-typeset-a-color: var(--sagl-orange-light);
  --md-typeset-mark-color: rgba(226, 139, 16, 0.35);

  --md-code-bg-color: rgba(10, 9, 8, 0.66);
  --md-code-hl-number-color: #f0a53a;
  --md-code-hl-color: rgba(226, 139, 16, 0.2);

  --md-footer-bg-color: rgba(10, 9, 8, 0.72);
  --md-footer-bg-color--dark: rgba(0, 0, 0, 0.45);
}

/* ------------------------------------------------------------- the backdrop
 *
 * The site paints the skyline on <html> and the darkening gradient on
 * <body>, both fixed, so the city stays put while the page scrolls. Doing
 * the same here rather than on .md-main keeps it behind the header and the
 * sidebars too.
 *
 * The gradient is darker than the site's (.86/.88 against .75/.63): that
 * page is a headline over a hero image, this one is a wall of prose and
 * code that has to stay legible on top of it.
 *
 * Note the selectors: Material puts data-md-color-scheme on <body>, not
 * <html>, so the image goes on a bare `html` and the gradient on
 * `body[...]`. Scoping both to [data-md-color-scheme] paints the skyline on
 * the body and leaves the gradient matching nothing at all.
 */

html {
  background-color: #111;
  background-image: url("../assets/skyline.webp");
  background-size: cover;
  background-position: center top;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

body[data-md-color-scheme="slate"] {
  background: linear-gradient(rgba(41, 38, 35, 0.86), rgba(0, 0, 0, 0.88));
  background-attachment: fixed;
  backdrop-filter: blur(5px);
  min-height: 100vh;
}

/* A phone renders a fixed background by repainting it at viewport size on
   every scroll frame, which is expensive and janky; pin it to the page and
   let the gradient carry the look instead. */
@media screen and (max-width: 76.1875em) {
  html {
    background-attachment: scroll;
  }

  body[data-md-color-scheme="slate"] {
    background-attachment: scroll;
  }
}

/* --------------------------------------------------------------- chrome */

.md-header {
  background-color: rgba(10, 9, 8, 0.82);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid hsla(0, 0%, 100%, 0.08);
  box-shadow: none;
}

.md-header--shadow {
  box-shadow: 0 0 0.4rem rgba(0, 0, 0, 0.6);
}

.md-header__title {
  font-family: var(--sagl-heading-font);
  letter-spacing: 0.06em;
}

/* The wordmark, in the game's own logo face. .md-ellipsis is where
   Material puts the site name. */
.md-header__topic:first-child .md-ellipsis {
  font-family: "Pricedown", var(--sagl-heading-font);
  font-size: 1.3rem;
  font-weight: 400;
  letter-spacing: 0.02em;
}

.md-header__button.md-logo img,
.md-nav__button.md-logo img {
  height: 1.5rem;
  width: 1.5rem;
}

.md-search__form {
  background-color: var(--sagl-surface);
  border: 1px solid hsla(0, 0%, 100%, 0.12);
  border-radius: 3px;
}

.md-search__form:hover {
  background-color: var(--sagl-surface-strong);
}

[data-md-toggle="search"]:checked ~ .md-header .md-search__form {
  background-color: rgba(20, 17, 14, 0.96);
  border-color: var(--sagl-hairline);
}

.md-search__output {
  border-radius: 0 0 3px 3px;
}

.md-search__scrollwrap,
.md-search-result__meta {
  background-color: rgba(14, 12, 10, 0.97);
}

[data-md-color-scheme="slate"] .md-search-result mark {
  color: var(--sagl-orange-light);
}

/* The sidebars sit on the backdrop, so they need no fill of their own —
   only a rule to separate them from the prose. */
@media screen and (min-width: 76.25em) {
  .md-sidebar--primary {
    border-right: 1px solid hsla(0, 0%, 100%, 0.07);
  }
}

/* On a phone the primary nav is a drawer over the page, so it does need
   a fill of its own or the prose reads through it. */
@media screen and (max-width: 76.1875em) {
  .md-nav--primary,
  .md-nav--primary .md-nav {
    background-color: rgba(14, 12, 10, 0.98);
  }

  .md-nav--primary .md-nav__title {
    background-color: rgba(10, 9, 8, 0.9);
  }
}

.md-nav__title {
  font-family: var(--sagl-heading-font);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.62rem;
  color: var(--md-default-fg-color--light);
}

/* `navigation.sections` renders each top-level group as a bold label. Set
   in the heading face they read as the section rules they are, and match
   the table of contents on the other side of the page. */
.md-nav--primary .md-nav__item--section > .md-nav__link {
  font-family: var(--sagl-heading-font);
  font-weight: 400;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-size: 0.68rem;
  color: #ffffff;
}

.md-nav__link--active,
.md-nav__link:focus,
.md-nav__link:hover {
  color: var(--sagl-orange-light);
}

/* Material marks the current page with colour alone; a left bar makes it
   findable in a nav this long without relying on it. */
.md-nav--primary .md-nav__item .md-nav__link--active {
  border-left: 2px solid var(--sagl-orange);
  margin-left: -0.6rem;
  padding-left: calc(0.6rem - 2px);
}

.md-footer {
  backdrop-filter: blur(8px);
  border-top: 1px solid hsla(0, 0%, 100%, 0.08);
}

.md-footer-meta {
  backdrop-filter: blur(8px);
}

/* -------------------------------------------------------------- typeset */

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
  font-family: var(--sagl-heading-font);
  font-weight: 400;
  letter-spacing: 0.04em;
  color: #ffffff;
}

/* Bank Gothic has one case and draws as capitals whatever the markup says,
   so the small headings are set in capitals on purpose and the large ones
   are left alone — h1 and h2 run long enough that full caps would shout. */
.md-typeset h1 {
  font-size: 1.8rem;
  letter-spacing: 0.03em;
  margin-bottom: 0.8rem;
}

.md-typeset h2 {
  font-size: 1.25rem;
  margin-top: 1.8em;
}

.md-typeset h3,
.md-typeset h4,
.md-typeset h5 {
  letter-spacing: 0.07em;
}

.md-typeset h5 {
  text-transform: uppercase;
}

.md-typeset a {
  transition: color 0.2s ease;
}

.md-typeset a:hover,
.md-typeset a:focus {
  color: var(--sagl-orange);
}

.md-typeset .headerlink {
  color: var(--md-default-fg-color--lightest);
}

/* Code, tables, admonitions and the rest sit on the backdrop, so they get
   the site's translucent surface rather than an opaque grey. */
.md-typeset code,
.md-typeset pre > code,
.md-typeset .highlight > pre {
  border-radius: 3px;
}

.md-typeset :not(pre) > code {
  background-color: rgba(255, 255, 255, 0.09);
  color: #f3dcc0;
  padding: 0.08em 0.36em;
}

.md-typeset pre > code {
  border: 1px solid hsla(0, 0%, 100%, 0.08);
}

.md-typeset .highlight .filename,
.md-typeset .tabbed-labels {
  font-family: var(--sagl-heading-font);
  letter-spacing: 0.05em;
}

.md-typeset .tabbed-labels > label {
  font-weight: 400;
}

.md-typeset .tabbed-set > input:checked + label {
  color: var(--sagl-orange-light);
}

.md-typeset table:not([class]) {
  background-color: var(--sagl-surface);
  border: 1px solid hsla(0, 0%, 100%, 0.1);
  border-radius: 3px;
}

.md-typeset table:not([class]) th {
  background-color: rgba(255, 255, 255, 0.06);
  font-family: var(--sagl-heading-font);
  font-weight: 400;
  letter-spacing: 0.06em;
  color: #ffffff;
}

.md-typeset table:not([class]) tr:hover {
  background-color: rgba(255, 255, 255, 0.04);
}

.md-typeset .admonition,
.md-typeset details {
  background-color: var(--sagl-surface);
  border: 1px solid hsla(0, 0%, 100%, 0.12);
  border-left-width: 3px;
  border-radius: 3px;
  box-shadow: none;
}

.md-typeset .admonition-title,
.md-typeset summary {
  background-color: rgba(255, 255, 255, 0.05);
  font-family: var(--sagl-heading-font);
  font-weight: 400;
  letter-spacing: 0.05em;
}

.md-typeset blockquote {
  border-left: 3px solid var(--sagl-orange);
  color: var(--md-default-fg-color--light);
}

.md-typeset kbd {
  border-radius: 3px;
}

/* The home page's card grid, given the site's panel treatment. */
.md-typeset .grid.cards > ul > li,
.md-typeset .grid > .card {
  background-color: var(--sagl-surface);
  border: 1px solid var(--sagl-hairline);
  border-radius: 3px;
  box-shadow: none;
  transition: border-color 0.2s ease, background-color 0.2s ease,
    transform 0.2s ease;
}

.md-typeset .grid.cards > ul > li:hover,
.md-typeset .grid > .card:hover {
  background-color: var(--sagl-surface-strong);
  border-color: var(--sagl-orange);
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .md-typeset .grid.cards > ul > li:hover,
  .md-typeset .grid > .card:hover {
    transform: none;
  }
}

/* Screenshots of the game are the one place a hard edge looks wrong
   against the backdrop. */
.md-typeset img:not(.twemoji):not([src$=".svg"]) {
  border-radius: 3px;
  box-shadow: 0 0.2rem 0.6rem rgba(0, 0, 0, 0.5);
}

/* The "Back to top" pill, as a site button. */
.md-top {
  background-color: rgba(20, 17, 14, 0.9);
  border: 1px solid var(--sagl-hairline);
  border-radius: 3px;
  font-family: var(--sagl-heading-font);
  letter-spacing: 0.05em;
  box-shadow: none;
}

.md-top:hover {
  background-color: var(--sagl-orange);
  color: #16130f;
}

/* ------------------------------------------------------------- mermaid */

[data-md-color-scheme="slate"] {
  --md-mermaid-font-family: var(--sagl-heading-font);
  --md-mermaid-node-bg-color: rgba(255, 255, 255, 0.08);
  --md-mermaid-node-fg-color: var(--sagl-orange-light);
  --md-mermaid-label-bg-color: transparent;
  --md-mermaid-label-fg-color: hsla(0, 0%, 100%, 0.92);
  --md-mermaid-edge-color: hsla(0, 0%, 100%, 0.45);
}