/* SPDX-License-Identifier: GPL-3.0-or-later */
/* The Nexus page: graphite with teal, and Inter with heavy titles. Only the Nexus page loads this file, and it loads
   no other stylesheet of the repository: every wiki has a design of its own. The design panel (mkdocs serve) shows the
   variables below: the comment before a rule names its group, the comment after a variable says what it colors. */

/* Nexus's colors: the rest of the design is made from these. */
:root {
  --nexus-primary: #0f0f0f;     /* Main color: table headings */
  --nexus-secondary: #17b6a7;   /* Second color: hover on links and buttons */
  --nexus-ink: #010101;         /* Darkest: the home page's dark sections and its footer */
  --nexus-deep: #010101;        /* Deep: the header, text on a hovered button in a dark section */
  --nexus-soft: #17b6a7;        /* Light: links, the icons on the home page's cards, footer headings and icon */
  --nexus-mist: #c0c0c0;        /* Pale: text on the home page's cards, footer links */
}

/* Corners. */
:root {
  --nexus-radius-medium: 8px;   /* Notes, code blocks, tables, pictures, search results */
}

/* Header: the bar at the top of every page. */
:root {
  --nexus-header-bg: var(--nexus-deep);   /* Header background */
  --nexus-header-fg: #c0c0c0;             /* Header text: the links */
  --nexus-header-hover-fg: #808080;       /* A link in the header under the pointer: dimmed, no box */
}

/* Material's main color. */
[data-md-color-primary="custom"] {
  --md-primary-fg-color: var(--nexus-primary);   /* Buttons and Material's highlights */
  --md-primary-fg-color--light: #ffffff;         /* Lighter main color */
  --md-primary-fg-color--dark: #ffffff;          /* Darker main color */
  --md-primary-bg-color: #c0c0c0;                /* Text on the main color */
  --md-primary-bg-color--light: #c0c0c0;       /* Dimmed text on the main color: the search field's hint */
}

/* Material's hover color. */
[data-md-color-accent="custom"] {
  --md-accent-fg-color: var(--nexus-secondary);  /* Links and buttons under the pointer, the outline on pictures */
  --md-accent-fg-color--transparent: #8080801a;  /* A faint fill behind what is under the pointer */
  --md-accent-bg-color: #808080;                 /* Text on the hover color */
  --md-accent-bg-color--light: #808080;        /* Dimmed text on the hover color */
}

/* The page. */
[data-md-color-scheme="slate"] {
  --md-typeset-a-color: var(--nexus-soft);       /* Links in the text */
  --md-default-bg-color: #010101;                /* Page background */
}

/* Buttons. */
:root {
  --nexus-button-shadow: #00000040;           /* The shadow under a button under the pointer */
}

/* Tables. */
:root {
  --nexus-table-head-bg: var(--nexus-primary);    /* Background of a table's headings */
  --nexus-table-head-fg: #c0c0c0;             /* Text of a table's headings */
}

/* The home page. */
:root {
  --nexus-hero-fg: #17b6a7;                   /* The words at the top: the name and the claim */
  --nexus-section-bg: var(--nexus-ink);           /* Background of the dark sections */
  --nexus-section-fg: #c0c0c0;                /* Text, card titles and links in the dark sections */
  --nexus-section-button: #c0c0c0;            /* Buttons there: outline and text, the fill under the pointer */
}

/* The home page's footer. */
:root {
  --nexus-footer-bg: var(--nexus-ink);            /* Footer background */
  --nexus-footer-fg: #17b6a7;                 /* The name, and a link under the pointer */
  --nexus-footer-notice-bg: #010101;        /* The strip with the notice at the bottom, over the footer */
}


.md-header, .md-tabs {
  background: var(--nexus-header-bg);
  color: var(--nexus-header-fg);
}

/* Buttons as pills. */
.md-typeset .md-button {
  border-radius: 2em;
  padding: 0.55em 1.5em;
  font-weight: 700;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.md-typeset .md-button:hover,
.md-typeset .md-button:focus {
  box-shadow: 0 0.5em 1em var(--nexus-button-shadow);
}

.md-search__form {
  border-radius: 2em;
}

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

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

.md-typeset h3, .md-typeset h4 {
  font-weight: 700;
}

.md-typeset .admonition,
.md-typeset details,
.md-typeset .highlight,
.md-typeset pre,
.md-search__output {
  border-radius: var(--nexus-radius-medium);
}

.md-typeset .admonition,
.md-typeset details {
  overflow: hidden;
}

.md-typeset .highlight,
.md-typeset pre {
  overflow: auto;
}

.md-typeset table:not([class]) {
  border-radius: var(--nexus-radius-medium);
}

.md-typeset img {
  border-radius: var(--nexus-radius-medium);
}

.md-typeset a > img {
  transition: box-shadow 120ms ease, transform 120ms ease;
}

.md-typeset a:hover > img {
  box-shadow: 0 0 0 2px var(--md-accent-fg-color);
  transform: translateY(-1px);
}

.md-typeset table:not([class]) th {
  background-color: var(--nexus-table-head-bg);
  color: var(--nexus-table-head-fg);
}

/* The icon in the header, large. */
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 3.4rem;
  width: auto;
}

.md-header__button.md-logo {
  margin: 0.1rem 0.2rem;
  padding: 0.1rem;
}

/* The links on the right of the header, as plain words; under the pointer the word dims, nothing else. */
.md-header__spacer {
  flex-grow: 1;
}

.md-header__links {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  margin: 0 0.4rem;
}

.md-header__link {
  padding: 0.4rem 0.8rem;
  border-radius: 2em;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--nexus-header-fg);
  transition: color 150ms ease;
}

.md-header__link:hover,
.md-header__link:focus {
  color: var(--nexus-header-hover-fg);
}

/* The home page (docs/index.md on overrides/home.html): full-width sections, as on a product page. */
.md-main__inner:has(> .home) {
  max-width: none;
  margin: 0;
}

/* Material hides the icon on a narrow screen behind the menu button; Home has no menu, so it keeps the icon. */
.md-header:has(~ .md-container .home) .md-header__button.md-logo {
  display: inline-block;
}

.md-typeset .home-hero .headerlink,
.md-typeset .home-card .headerlink {
  display: none;
}

.md-typeset.home__article {
  margin: 0;
}

.home-section__inner {
  max-width: 64rem;
  margin: 0 auto;
  padding: 3.2rem 0.8rem;
}

.md-typeset .home-section h2,
.md-typeset .home-hero__lead,
.md-typeset .home-hero__claim {
  font-size: clamp(1.3rem, 4.2vw, 2.8rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 1.2rem;
  color: inherit;
}

.home-hero__text {
  width: fit-content;
  max-width: 80vw;
  margin: 0 auto;
  padding: 1.6rem 0 3rem;
}

.md-typeset .home-hero__text {
  color: var(--nexus-hero-fg);
}

.md-typeset .home-hero__lead {
  font-weight: 400;
  margin: 0;
}

.md-typeset .home-hero__claim {
  font-weight: 800;
  margin: 0;
}

/* The Nexus icon under the headline (nexus/docs/images/nexus-hero.webp, the owner's drawing at 1024 px). */
.md-typeset .home-hero__icon {
  display: block;
  width: min(60vw, 20rem);
  height: auto;
  margin: 0 auto 2.4rem;
}

/* A dark section with a grid of cards, their titles in white. */
.home-section--dark {
  background: var(--nexus-section-bg);
  color: var(--nexus-section-fg);
}

.home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 2rem 2.4rem;
  margin: 2rem 0 2.4rem;
}

.md-typeset .home-card h4 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.4rem;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--nexus-section-fg);
}

.md-typeset .home-card h4 .twemoji svg {
  width: 1.2em;
  max-height: none;
  fill: var(--nexus-soft);
}

.md-typeset .home-card p {
  margin: 0;
  color: var(--nexus-mist);
}

.md-typeset .home-section--dark a:not(.md-button) {
  color: var(--nexus-section-fg);
  font-weight: 600;
}

.md-typeset .home-section--dark a:not(.md-button):hover {
  color: var(--nexus-soft);
}

.md-typeset .home-section--dark .md-button {
  color: var(--nexus-section-button);
  border-color: var(--nexus-section-button);
}

.md-typeset .home-section--dark .md-button:hover {
  background-color: var(--nexus-section-button);
  border-color: var(--nexus-section-button);
  color: var(--nexus-deep);
}

/* The home page's footer: the name on the left, columns of links on the right. */
.home-footer {
  background: var(--nexus-footer-bg);
  color: var(--nexus-footer-fg);
}

.home-footer__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem;
  padding: 2.4rem 0.8rem;
}

.home-footer__brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 800;
  font-size: 0.9rem;
  color: var(--nexus-footer-fg);
}

.home-footer__columns {
  display: grid;
  grid-template-columns: repeat(4, minmax(7rem, auto));
  gap: 1.2rem 2.4rem;
  font-size: 0.7rem;
}

.home-footer__columns h4 {
  margin: 0 0 0.6rem;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--nexus-soft);
}

.home-footer__columns a {
  display: block;
  margin-bottom: 0.4rem;
  color: var(--nexus-mist);
}

.home-footer__columns a:hover {
  color: var(--nexus-footer-fg);
}

@media screen and (max-width: 44.9375em) {
  .home-footer__columns {
    grid-template-columns: repeat(2, minmax(7rem, 1fr));
  }
}

.home-footer .md-footer-meta {
  background: var(--nexus-footer-notice-bg);
}