/* NCoT Wiki - house theme for mkdocs-material =============================
 *
 * This makes wiki.ncot.uk look like ncot.uk. The design system it mirrors
 * lives in the Hugo theme:
 *
 *     /home/james/ncot-website/themes/ncot_tech/assets/css/main.css
 *
 * The token block below is a COPY of the one in that file. The two will drift
 * if only one is edited, so change a colour in both or in neither. If you ever
 * get tired of that, the fix is to serve one shared tokens.css from ncot.uk
 * and link it from both sites.
 *
 * House style, same as the main site: square corners, dense spacing, coloured
 * bands and 2px rules to separate content. There is no border-radius in the
 * main site's CSS and this file only ever sets it back to 0.
 *
 * How the colours actually get applied: mkdocs-material is themed entirely
 * through its own --md-* custom properties, so section 2 maps our tokens onto
 * those. We build on Material's "slate" (dark) scheme rather than declaring a
 * scheme of our own, because Material defines its LIGHT defaults on a selector
 * that includes bare :root - which matches <html> no matter what scheme is
 * set. A scheme named "ncot" would therefore match nothing, and every variable
 * not listed below would silently stay white. Building on slate means a
 * variable we miss falls back to a dark value instead.
 */


/* 1. Tokens ================================================================
 * Copied from main.css. Keep the names; they are referenced throughout. */

:root {
  --primary-color: #ff00e9;
  --secondary-color: #00fbff;
  --highlight-1-color: #f9f871;
  --highlight-2-color: #ff9882;

  --background: #241722;
  --nav-background: #615d7d;
  --card-background: #3a364a;
  --card-background-alt: #2d293c;

  --text-default: #9e99bc;
  --text-secondary: #a8a7af;
  --h1: #64fbd3;
  --h2: #08c7dc;
  --h3: #5190bb;
  --link: #656cff;

  --font-primary: "Roboto", system-ui, sans-serif;
  --font-secondary: 'Share Tech Mono', ui-monospace, monospace;
  --font-tertiary: "Sixtyfour", var(--font-secondary);

  --band-background: #1d1220;
  --band-background-alt: #2a1c28;
  --border-soft: #453f58;

  /* Material interpolates these two into a font stack, so they must be a bare
     quoted family name and nothing else. mkdocs.yml sets "font: false" to stop
     Material loading Roboto from Google itself, which also stops it defining
     these - so if they are removed the stack starts with an invalid identifier
     and everything falls back to the system sans-serif. */
  --md-text-font: "Roboto";
  --md-code-font: "Share Tech Mono";
}


/* 2. Material variable mapping =============================================
 * Only the variables carrying house colour are listed. Anything omitted keeps
 * its slate (dark) value, which is a safe fallback. */

[data-md-color-scheme="slate"] {

  /* Slate derives its greys from a single hue. 309deg is the hue of our
     --background, so the derived surfaces land in the same purple family
     instead of Material's default blue-grey. */
  --md-hue: 309deg;

  /* Page surface and body text. */
  --md-default-bg-color:            var(--background);
  --md-default-bg-color--light:     #241722b3;
  --md-default-bg-color--lighter:   #2417224d;
  --md-default-bg-color--lightest:  #2417221f;
  --md-default-fg-color:            var(--text-default);
  --md-default-fg-color--light:     var(--text-secondary);
  --md-default-fg-color--lighter:   #6f6b86;
  --md-default-fg-color--lightest:  var(--border-soft);

  /* "Primary" is the header and navigation chrome. */
  --md-primary-fg-color:            var(--nav-background);
  --md-primary-fg-color--light:     #7b779b;
  --md-primary-fg-color--dark:      #4a4760;
  --md-primary-bg-color:            #fff;
  --md-primary-bg-color--light:     #e7e5f0;

  /* "Accent" is every hover and focus state. Yellow, as on the main site. */
  --md-accent-fg-color:             var(--highlight-1-color);
  --md-accent-fg-color--transparent: #f9f8711a;
  --md-accent-bg-color:             var(--background);

  /* Prose. */
  --md-typeset-color:               var(--text-default);
  --md-typeset-a-color:             var(--link);
  --md-typeset-mark-color:          #f9f8714d;
  --md-typeset-table-color:         var(--border-soft);
  --md-typeset-table-color--light:  #453f5859;
  --md-typeset-kbd-color:           var(--card-background);
  --md-typeset-kbd-accent-color:    var(--card-background-alt);
  --md-typeset-kbd-border-color:    var(--border-soft);

  /* Code. Matches the main site's pre: the darkest band colour. */
  --md-code-fg-color:               #c9c5dd;
  --md-code-bg-color:               var(--band-background);
  --md-code-hl-color:               #f9f8711a;
  --md-code-hl-color--light:        #f9f87114;

  --md-admonition-fg-color:         var(--text-default);
  --md-admonition-bg-color:         var(--band-background);

  --md-footer-bg-color:             var(--band-background);
  --md-footer-bg-color--dark:       #160e18;
  --md-footer-fg-color:             var(--text-default);
  --md-footer-fg-color--light:      var(--text-secondary);
  --md-footer-fg-color--lighter:    #6f6b86;

  /* The house style separates things with flat 2px rules, so the soft drop
     shadows Material uses for depth are removed rather than recoloured. */
  --md-shadow-z1: none;
  --md-shadow-z2: none;
  --md-shadow-z3: none;
}


/* 3. Syntax highlighting ===================================================
 * Mapped onto the house palette. Slate's own values would work; these just
 * keep code in the same five colours as the rest of the site. */

[data-md-color-scheme="slate"] {
  --md-code-hl-number-color:      var(--highlight-2-color);
  --md-code-hl-special-color:     var(--primary-color);
  --md-code-hl-function-color:    var(--h1);
  --md-code-hl-constant-color:    var(--highlight-2-color);
  --md-code-hl-keyword-color:     var(--secondary-color);
  --md-code-hl-string-color:      var(--highlight-1-color);
  --md-code-hl-name-color:        var(--md-code-fg-color);
  --md-code-hl-operator-color:    var(--h3);
  --md-code-hl-punctuation-color: var(--text-secondary);
  --md-code-hl-comment-color:     #6f6b86;
  --md-code-hl-generic-color:     var(--text-secondary);
  --md-code-hl-variable-color:    var(--h3);
}


/* 4. Typography ============================================================ */

/* Share Tech Mono carries the terminal look and is used for every heading and
   piece of UI chrome; Roboto is for body prose. Material sizes .md-typeset
   headings in rem against a smaller base than the main site uses, so these are
   re-tuned rather than copied from main.css. */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
  font-family: var(--font-secondary);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.15;
}

.md-typeset h1 { color: var(--h1); font-size: 1.85em; }
.md-typeset h2 { color: var(--h2); font-size: 1.4em; }
.md-typeset h3 { color: var(--h3); font-size: 1.15em; }
.md-typeset h4,
.md-typeset h5,
.md-typeset h6 { color: var(--h3); font-size: 1em; }

/* The main site prefixes a section title with a half-block glyph. Delete this
   rule if it reads as too busy on a page with many headings. */
.md-typeset h2::before {
  content: "\258C";
  color: var(--primary-color);
  margin-right: 0.3em;
}

/* An h2 is a section break, so it gets the house 2px rule under it. */
.md-typeset h2 {
  border-bottom: 2px solid var(--border-soft);
  padding-bottom: 0.2em;
}

.md-typeset a { text-decoration: none; }
.md-typeset a:hover,
.md-typeset a:focus-visible {
  color: var(--highlight-1-color);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Code blocks get the main site's cyan left rule. */
.md-typeset pre > code,
.md-typeset .highlight > pre {
  border-left: 2px solid var(--secondary-color);
}

.md-typeset blockquote {
  border-left: 4px solid var(--highlight-2-color);
  background: var(--band-background);
  color: var(--highlight-1-color);
  font-style: italic;
}

.md-typeset table:not([class]) th {
  background: var(--card-background-alt);
  font-family: var(--font-secondary);
  color: var(--h3);
  font-weight: 400;
}

/* Focus ring, same as the main site. */
.md-typeset a:focus-visible,
.md-nav__link:focus-visible,
.md-search__input:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--highlight-1-color);
  outline-offset: 2px;
}


/* 5. Square corners ========================================================
 * Material rounds about thirty things. These are listed one by one rather than
 * blanketed with "* { border-radius: 0 }", because four things in the theme are
 * deliberately circular (the nav collapse arrows, author avatars and tabbed
 * buttons) and must stay that way. */

.md-typeset code,
.md-typeset kbd,
.md-typeset table:not([class]),
.md-typeset .md-button,
.md-typeset .md-tag,
.md-typeset .admonition,
.md-typeset details,
.md-typeset details:not([open]) > summary,
.md-typeset .tabbed-set,
.md-typeset .tabbed-labels > label,
.md-typeset .grid.cards > *,
.md-typeset .grid.cards > * > li,
.md-skip,
.md-clipboard,
.md-pagination > *,
.md-tooltip,
.md-tooltip2__inner,
.md-dialog,
.md-search__form,
.md-search__overlay,
.md-top,
.highlight .gd,
.highlight .gi {
  border-radius: 0;
}

/* The search field squares off differently when the overlay is open. */
[data-md-toggle="search"]:checked ~ .md-header .md-search__form {
  border-radius: 0;
}


/* 6. Header ================================================================ */

.md-header {
  border-bottom: 2px solid var(--secondary-color);
}

/* The wordmark. Copied from main.css (.brand__name / .brand__suffix) so the two
   sites render it identically. */

/* Scaled down from the main site's 1.75rem/36px, because Material's header bar
   is shorter than the main site's and the wordmark has to sit inside it. */
.brand__name {
  font-family: var(--font-tertiary);
  font-size: 1.4rem;
  letter-spacing: -4px;
  color: var(--secondary-color);
  /* Sixtyfour is a display face whose line box is much taller than its
     font-size. Left alone it pushes the wordmark out of Material's header,
     which is shorter than the main site's. */
  line-height: 1;
}

.brand__suffix {
  font-family: var(--font-secondary);
  font-size: 1rem;
  color: #fff;
  margin-left: 5px;
  line-height: 1;
}

/* Material sizes the logo slot for a single small icon and leaves the anchor
   inline. It also sets the image itself to display:block, so without a flex
   context here the favicon and the wordmark stack on top of each other and
   spill out of the header.
   These selectors carry two classes to match the specificity of Material's own
   ".md-header__button.md-logo" rules; a bare ".md-logo" loses to them.

   Scoped to Material's own 76.25em breakpoint. Below it Material deliberately
   hides the header logo and shows it in the nav drawer instead, to leave room
   for the page title - and because this rule has the same specificity as the
   one doing the hiding, an unscoped version would resurrect the logo on a
   phone and squeeze the title down to "NCoT...". */
@media screen and (min-width: 76.25em) {
  .md-header__button.md-logo {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    white-space: nowrap;
    width: auto;
    padding: 0 0.4rem;
    margin: 0;
  }
}

/* Below that breakpoint the same wordmark is rendered in the nav drawer, where
   Material positions it absolutely and sets display:block - which would stack
   the favicon above the text again. Scoped to the same breakpoint from the
   other side: unscoped, it would also show the wordmark in the sidebar on a
   desktop, where the header is already displaying it. */
@media screen and (max-width: 76.234375em) {
  .md-nav--primary .md-nav__title .md-logo {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    white-space: nowrap;
  }

  .md-nav__title .md-nav__button.md-logo img,
  .md-nav__title .md-nav__button.md-logo svg {
    width: 1.8rem;
    height: 1.8rem;
  }
}

/* Material sets the image to height 1.2rem / width auto. Both axes are given a
   value here, or the favicon's natural 96px comes through on the other one.
   Note this is deliberately NOT grouped with a :-webkit-any() variant: one
   unrecognised selector in a group invalidates the whole group, which would
   silently drop this rule. */
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  width: 1.8rem;
  height: 1.8rem;
}

.md-header__title {
  font-family: var(--font-secondary);
  letter-spacing: 0.04em;
}

/* The nav back to the main site, plus the social icons. Mirrors .nav-list on
   the main site: Share Tech Mono, yellow on hover, 2px underline. */
.ncot-header-nav {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  margin-left: auto;
}

.ncot-header-nav a {
  display: flex;
  align-items: center;
  font-family: var(--font-secondary);
  font-size: 0.75rem;
  color: #fff;
  padding: 0.3rem 0.4rem;
  border-bottom: 2px solid transparent;
  text-decoration: none;
}

.ncot-header-nav a:hover,
.ncot-header-nav a:focus-visible {
  color: var(--highlight-1-color);
  border-bottom-color: var(--highlight-1-color);
}

/* Material's icons are inline SVG and inherit currentColor. */
.ncot-header-nav__icon svg {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}

/* Material's header is tight on a phone: it has to hold the drawer toggle, the
   wordmark, the page title and the search icon. Four extra text links push the
   last two off the end, so the whole nav is dropped below Material's own
   60em header breakpoint. The wordmark still links back to the main site. */
@media screen and (max-width: 59.9375em) {
  .ncot-header-nav { display: none; }
}


/* 7. Navigation and search chrome ========================================== */

.md-nav {
  font-family: var(--font-secondary);
}

.md-nav__title {
  font-family: var(--font-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--h2);
}

.md-nav__link:hover,
.md-nav__link:focus-visible {
  color: var(--highlight-1-color);
}

/* Current page, so you can tell where you are. Same cue as the main site. */
.md-nav__link--active,
.md-nav__item .md-nav__link--active {
  color: var(--secondary-color);
}

/* Section labels in the sidebar read as headings, not links. */
.md-nav__item--section > .md-nav__link {
  color: var(--h3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.md-search__form {
  background: var(--band-background);
  border: 2px solid var(--border-soft);
}

.md-search__form:hover {
  background: var(--band-background-alt);
  border-color: var(--secondary-color);
}

[data-md-toggle="search"]:checked ~ .md-header .md-search__form {
  border-color: var(--secondary-color);
}

.md-search__input,
.md-search__input::placeholder {
  font-family: var(--font-secondary);
}

.md-search-result__meta,
.md-search-result__title {
  font-family: var(--font-secondary);
}

.md-search-result__article .md-search-result__title {
  color: var(--h2);
}

/* The table of contents is UI chrome, not prose. */
.md-nav--secondary .md-nav__title,
.md-nav--secondary .md-nav__link {
  font-family: var(--font-secondary);
}


/* 8. Footer ================================================================ */

.md-footer {
  border-top: 2px solid var(--secondary-color);
}

.md-footer-meta {
  font-size: 0.875rem;
}

.md-copyright,
.md-copyright__highlight {
  color: var(--text-default);
}

/* The build date, written by deploy.sh. Matches .site-footer__build. */
.ncot-footer-build {
  font-family: var(--font-secondary);
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.md-social__link svg {
  fill: var(--text-secondary);
}

.md-social__link:hover svg {
  fill: var(--highlight-1-color);
}


/* 9. Print ================================================================= */

@media print {
  .md-typeset h2::before { content: none; }
}