/*
  Shared docs theme ("Glow"). The chrome, type, code, admonition and API
  furniture styling for every nanoblox docs site. Colour comes entirely from
  the --hd-* knobs each project defines in its own stylesheet (see
  projects/hd-admin/docs/stylesheets/hd-admin.css for the reference set), so
  retinting one site never touches this file.

  Synced into each project's docs/_shared/ by build.sh. Edit HERE, not the
  copies
*/
body[data-md-color-scheme="slate"][data-md-color-primary] {
  --md-default-bg-color: #0e1119;
  --md-default-fg-color: rgba(234, 240, 255, 0.92);
  --md-default-fg-color--light: #c3cde6;
  --md-default-fg-color--lighter: #8b9ab3;
  --md-default-fg-color--lightest: #232c3e;
  --md-primary-fg-color: #0e1119;
  --md-primary-fg-color--dark: #1a2560; /* mobile drawer repo card */
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: #c3cde6;
  --md-accent-fg-color: var(--hd-accent);
  --md-accent-fg-color--transparent: rgba(var(--hd-tint), 0.14);
  --md-typeset-a-color: var(--hd-link);
  --md-code-bg-color: #182030;
  --md-code-fg-color: #e6ecff;
  --md-typeset-mark-color: rgba(var(--hd-tint), 0.28);
  --md-admonition-bg-color: #151a24;
  --md-footer-bg-color: #0a0e16;
  --md-footer-bg-color--dark: #070a10;
  --md-shadow-z1: none;
  --md-shadow-z2: 0 8px 30px rgba(0, 0, 0, 0.5);
  --hd-radius: 12px;
  color-scheme: dark;

  /* Luau-flavoured syntax colours */
  --md-code-hl-keyword-color: var(--hd-keyword);
  --md-code-hl-string-color: #a5e6a1;
  --md-code-hl-number-color: #ffcb6b;
  --md-code-hl-comment-color: #6b7894;
  --md-code-hl-function-color: var(--hd-function);
  --md-code-hl-constant-color: #f78c6c;
  --md-code-hl-operator-color: #89ddff;
  --md-code-hl-punctuation-color: #8b9ab3;
  --md-code-hl-special-color: #f07178;
  --md-code-hl-name-color: #e6ecff;
  --md-code-hl-variable-color: #e6ecff;
  --md-code-hl-generic-color: #e6ecff;
}

/* Announcement bar */

html.hda-announce-dismissed .md-banner {
  display: none;
}

.md-banner {
  background: linear-gradient(90deg, var(--hd-bgrad-1), var(--hd-bgrad-2) 60%, var(--hd-bgrad-3));
  color: #c3cde6;
  border-bottom: 1px solid rgba(var(--hd-tint), 0.25);
}

.md-banner a {
  color: var(--hd-pill-text);
  font-weight: 700;
}

.md-banner a:hover {
  color: #ffffff;
}

/* Header + tabs */

/* No "Made with Material for MkDocs" strip */
.md-footer-meta {
  display: none;
}

/* Pull the logo and site title together */
.md-header__button.md-logo {
  padding-right: 0.1rem;
}

.md-header__title {
  margin-left: 0.2rem;
}

.md-header {
  background: linear-gradient(
    90deg,
    var(--hd-grad-1) 0%,
    var(--hd-grad-2) 55%,
    var(--hd-grad-3) 100%
  );
  border-bottom: 1px solid rgba(var(--hd-tint), 0.25);
  box-shadow: 0 4px 24px rgba(var(--hd-strong-tint), 0.15);
}

.md-tabs {
  background: rgba(14, 17, 25, 0.6);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #232c3e;
}

.md-tabs__link--active {
  color: var(--hd-link);
  font-weight: 700;
}

.md-search__form {
  background: rgba(var(--hd-tint), 0.1);
  border: 1px solid rgba(var(--hd-tint), 0.2);
  border-radius: 8px;
}

/* Left nav. Every link gets the same padding so the active pill never shifts
   or clips, the background alone marks it */

/* Mobile drawer. Material paints the logo + title block in the flat primary
   colour, a stark black slab against the drawer. A neutral grey a step above
   the drawer background sits softer than the header gradient here */
@media screen and (max-width: 76.1875em) {
  /* The [for] variant outguns Material's own attribute selector on the outer
     title block; the source card is the repo widget below it */
  .md-nav--primary .md-nav__title,
  .md-nav--primary .md-nav__title[for="__drawer"],
  .md-nav--primary .md-nav__source {
    background: #20242d;
    color: #ffffff;
  }

  .md-nav--primary .md-nav__title,
  .md-nav--primary .md-nav__title[for="__drawer"] {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
}

.md-nav__link {
  border-radius: 8px;
  padding: 0.15em 0.6em;
  /* Plain entries sit a step greyer than the bold group headings */
  color: var(--md-default-fg-color--light);
}

/* Group headings ("Setup", "Using HD Admin") keep the full-strength colour */
.md-nav__item--section > .md-nav__link {
  color: var(--md-default-fg-color);
}

.md-nav__link--active {
  color: var(--hd-link);
  font-weight: 700;
}

/* A loose page following a nav group otherwise inherits the group's full
   section margin and reads as a detached orphan */
@media screen and (min-width: 76.25em) {
  .md-nav__item--section + .md-nav__item:not(.md-nav__item--section) {
    margin-top: -0.6em;
  }
}

/* The sidebar repeats the active tab's name ("Get Started") as its first row,
   which is redundant next to the group headings. Desktop only, the mobile
   drawer needs that row for its back navigation */
@media screen and (min-width: 76.25em) {
  .md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav__link {
    display: none;
  }
}

/* Type */

.md-typeset h1,
.md-typeset h2 {
  color: #ffffff;
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* Code */

.md-typeset code {
  border-radius: 6px;
  padding: 0.15em 0.4em;
}

.md-typeset pre > code {
  border-radius: var(--hd-radius);
  padding: 1em 1.2em;
  border: 1px solid rgba(var(--hd-tint), 0.18);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

/* Admonitions, in the Fusion docs style: full coloured outline with a soft
   outer + inset glow, no title band, and the faintest tint of the type colour
   over the surface (adapted from dphfox/Fusion docs/assets/theme/admonition.css) */

.md-typeset .admonition-title,
.md-typeset summary {
  background: none !important;
}

.md-typeset :is(.admonition, details) {
  --admonition-color: #448aff;
  border-radius: 0.25rem;
  border-width: 0.1rem !important;
  box-shadow: 0 0.25em 1.5em -0.75em var(--admonition-color), inset 0 1em 2em -2.25em
    var(--admonition-color) !important;
  background: linear-gradient(var(--admonition-color) -99999%, transparent 5000%),
    var(--md-admonition-bg-color);
}

.md-typeset :is(.admonition, details) > :is(.admonition-title, summary)::before {
  background-color: currentColor;
}

.md-typeset .note {
  --admonition-color: #448aff;
}
.md-typeset .abstract {
  --admonition-color: #00b0ff;
}
.md-typeset .info {
  --admonition-color: #00b8d4;
}
.md-typeset .tip {
  --admonition-color: #00bfa5;
}
.md-typeset .success {
  --admonition-color: #00c853;
}
.md-typeset .question {
  --admonition-color: #64dd17;
}
.md-typeset .warning {
  --admonition-color: #ff9100;
}
.md-typeset .failure {
  --admonition-color: #ff5252;
}
.md-typeset .danger {
  --admonition-color: #ff1744;
}
.md-typeset .bug {
  --admonition-color: #f50057;
}
.md-typeset .example {
  --admonition-color: #7c4dff;
}
.md-typeset .quote {
  --admonition-color: #9e9e9e;
}

/* Our own type. Material has no colour for it, so give it the brand blue */
.md-typeset .important {
  --admonition-color: #5c7cff;
  border-color: #5c7cff;
}

/* The copy button only appears while hovering a code block (Fusion-style) */

.md-typeset .highlight .md-clipboard {
  opacity: 0;
  transition: opacity 0.2s ease;
}

.md-typeset .highlight:hover .md-clipboard {
  opacity: 0.5;
}

.md-typeset .highlight .md-clipboard:hover {
  opacity: 1;
}

/* Smooth in-page scrolling. landing.js inhibits it for ordinary navigation so
   it only animates anchor jumps */

@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth;
  }

  :root.hda-inhibit-smooth-scrolling {
    scroll-behavior: auto;
  }
}

.md-typeset img {
  border-radius: 0.25rem;
}

/* Content tabs sit on the code-block surface with an accent underline, so
   tabbed code reads as one connected component (Fusion-style) */

.md-typeset .tabbed-labels {
  background-color: var(--md-code-bg-color);
  box-shadow: none;
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}

.js .md-typeset .tabbed-labels::before {
  background-color: transparent;
  height: 100%;
  box-shadow: 0 -0.325rem var(--md-code-bg-color) inset, 0 -0.4rem var(--hd-accent) inset;
}

.md-typeset .tabbed-labels > label {
  color: var(--md-code-fg-color);
  font-weight: 400;
  padding: 0;
  margin: 0.78125em 1.25em 0.625em;
}

.md-typeset .tabbed-set {
  box-shadow: var(--md-shadow-z2);
  border-radius: 0.25rem;
}

.tabbed-set .highlight > pre {
  box-shadow: none;
}

.md-typeset .tabbed-set > input:first-child:checked ~ .tabbed-labels > :first-child,
.md-typeset .tabbed-set > input:nth-child(2):checked ~ .tabbed-labels > :nth-child(2),
.md-typeset .tabbed-set > input:nth-child(3):checked ~ .tabbed-labels > :nth-child(3),
.md-typeset .tabbed-set > input:nth-child(4):checked ~ .tabbed-labels > :nth-child(4),
.md-typeset .tabbed-set > input:nth-child(5):checked ~ .tabbed-labels > :nth-child(5),
.md-typeset .tabbed-set > input:nth-child(6):checked ~ .tabbed-labels > :nth-child(6) {
  color: var(--hd-accent);
  font-weight: 700;
}

/* API reference furniture (Fusion-style): breadcrumbs, inline type signatures
   and the bento card grid on the API index */

.hd-api-breadcrumbs {
  display: flex;
  align-items: center;
  height: 2rem;
  opacity: 0.8;
}

.hd-api-breadcrumbs > *:not(:last-child)::after {
  content: "›";
  margin: 0 0.25rem;
}

/* Buttons in page content. Material paints these with the primary color,
   which is near-black in this theme, so restyle them from the accent knobs */
.md-typeset .md-button {
  border-radius: 10px;
  padding: 0.5em 1.6em;
  font-weight: 700;
  color: var(--hd-link, #7d97ff);
  border: 2px solid rgba(var(--hd-tint, 92, 124, 255), 0.45);
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.md-typeset .md-button:hover,
.md-typeset .md-button:focus {
  background-color: rgba(var(--hd-tint, 92, 124, 255), 0.12);
  color: var(--hd-link, #7d97ff);
  border-color: var(--hd-accent, #5c7cff);
}
.md-typeset .md-button--primary {
  background-color: var(--hd-accent-strong, #335fff);
  border-color: var(--hd-accent-strong, #335fff);
  color: #fff;
}
.md-typeset .md-button--primary:hover,
.md-typeset .md-button--primary:focus {
  background-color: var(--hd-accent, #5c7cff);
  border-color: var(--hd-accent, #5c7cff);
  color: #fff;
}

.hd-api-tag {
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.5em;
  padding: 0.1em 0.6em;
  border-radius: 999px;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hd-api-tag--available {
  background: rgba(0, 200, 83, 0.15);
  color: #4ade80;
  border: 1px solid rgba(0, 200, 83, 0.35);
}

.hd-api-tag--soon {
  background: rgba(var(--hd-tint), 0.12);
  color: var(--hd-pill-text);
  border: 1px solid rgba(var(--hd-tint), 0.3);
}

.hd-api-bento {
  column-width: 12rem;
  column-gap: 0.5rem;
}

.hd-api-bento > * {
  break-inside: avoid;
  background-color: var(--md-admonition-bg-color);
  border: 1px solid rgba(var(--hd-tint), 0.14);
  border-radius: 0.25rem;
  padding: 0.75rem 1rem 0.35rem;
  margin: 0 0 0.5rem;
}

.hd-api-bento > * > h4 {
  font-size: 0.7rem;
  color: var(--md-default-fg-color--lighter);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 0.4em;
}

.hd-api-bento ul {
  list-style: none;
  margin: 0 0 0.6em;
  padding: 0;
}

.hd-api-bento li {
  margin: 0.25em 0;
}

/* Tables + rules */

.md-typeset table:not([class]) {
  border-radius: var(--hd-radius);
  overflow: hidden;
}

.md-typeset hr {
  border-bottom-width: 1px;
}

/* Scrollbars */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-thumb {
  background: #39414f;
  border-radius: 4px;
}