/* Brand alignment with www.eremex.com.
 *
 * Palette and typography taken from that site's own template CSS:
 *   dark      #001409  (header, hero, footer)
 *   primary   #30A764  (buttons, links)
 *   hover     #39BF74
 *   muted     #73B08E
 *   off-white #FAFFFC / #F4F5F5
 *   font      'Inter', sans-serif
 *
 * Structure follows docs.eremex.ru's extra.css so the two doc sites stay
 * maintainable side by side; only the values differ.
 */

:root {
  --emx-dark: #001409;
  --emx-green: #30A764;
  --emx-green-hover: #39BF74;
  --emx-green-muted: #73B08E;
  --emx-off-white: #FAFFFC;

  --md-text-font: "Inter", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --md-code-font: "JetBrains Mono", "Cascadia Code", "Consolas", "Roboto Mono", monospace;
}

/* The theme sets these per palette from selectors like
   [data-md-color-scheme=slate][data-md-color-primary=black], so a plain :root
   block here loses on specificity. Both attributes plus the element beat it. */
body[data-md-color-scheme][data-md-color-primary] {
  --md-accent-fg-color: var(--emx-green-hover);
  --md-typeset-a-color: var(--emx-green);
}

/* Dark scheme: the muted green reads better on the near-black background. */
body[data-md-color-scheme="slate"][data-md-color-primary] {
  --md-typeset-a-color: var(--emx-green-muted);
}

/* Apply Inter to all elements */
body {
  font-family: var(--md-text-font);
}

h1, h2, h3, h4, h5, h6,
.md-typeset h1, .md-typeset h2, .md-typeset h3,
.md-typeset h4, .md-typeset h5, .md-typeset h6 {
  font-family: var(--md-text-font);
  font-weight: 600;
}

p, li, td, th, div, span,
.md-typeset {
  font-family: var(--md-text-font);
}

.md-nav, .md-tabs, .md-header,
.md-nav__title, .md-nav__item,
.md-search__input, .md-footer {
  font-family: var(--md-text-font);
}

table, th, td {
  font-family: var(--md-text-font);
}

input, textarea, select, button {
  font-family: var(--md-text-font);
}

/* Code blocks (keeping monospace for code) */
code, pre, kbd, samp {
  font-family: var(--md-code-font);
}

/* Header, tabs and the area around the search button take the site's dark
   green-black, the same colour as the eremex.com header and footer. */
.md-header,
.md-search__form,
.md-tabs,
.md-tabs__list,
.md-tabs__item {
  background-color: var(--emx-dark) !important;
}

.md-copyright-container {
  width: 100%;
}

/* Search input styling for the dark header */
.md-search__input {
  color: #FFFFFF !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.md-search__input::placeholder {
  color: #CCCCCC !important;
  opacity: 1 !important;
}

.md-search__input:hover {
  background-color: rgba(255, 255, 255, 0.15) !important;
}

.md-search__input:focus {
  background-color: rgba(255, 255, 255, 0.2) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1) !important;
}

/* The drawer header is only a coloured banner while the nav actually is a
   drawer. Above that breakpoint the same element sits inline at the top of the
   sidebar and the theme gives it the page background, so painting it dark
   unconditionally left a black box behind dark text in the light scheme. */
@media screen and (max-width: 76.234375em) {
  /* palette.css paints this from
     html [data-md-color-primary=black] .md-nav--primary .md-nav__title[for=__drawer],
     so the selector has to carry at least as much weight to swap in the brand
     colour. */
  html body[data-md-color-primary] .md-nav--primary .md-nav__title[for="__drawer"] {
    background-color: var(--emx-dark);
    color: #FFFFFF;
  }
}

/* Sidebar heading. The theme gives it the same 0.7rem as the nav links below
   it, so it only differs by weight and reads as another entry rather than as
   the heading of the list. */
@media screen and (min-width: 76.25em) {
  .md-nav--primary > .md-nav__title[for="__drawer"] {
    font-size: 0.9rem;
    line-height: 1.3;
    padding-bottom: 0.4rem;
  }
}

/* Links and the active nav item pick up the brand green. */
.md-typeset a:hover,
.md-typeset a:focus {
  color: var(--emx-green-hover);
}

.md-nav__link--active,
.md-nav__link:focus,
.md-nav__link:hover {
  color: var(--emx-green) !important;
}

.md-typeset .md-button--primary {
  background-color: var(--emx-green);
  border-color: var(--emx-green);
  color: var(--emx-off-white);
}

.md-typeset .md-button--primary:hover,
.md-typeset .md-button--primary:focus {
  background-color: var(--emx-green-hover);
  border-color: var(--emx-green-hover);
  color: var(--emx-off-white);
}

.md-footer {
  background-color: var(--emx-dark);
}