/* Connect IoT Group brand colors, ported from
   connectiotgroup-website/src/app/globals.css */

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&display=swap");

/* :root > * (not :root) avoids a Safari bug where custom properties on the
   root element don't recompute when the palette toggle changes them */
:root > * {
  --md-primary-fg-color: #0353ff; /* Electric Blue */
  --md-primary-fg-color--light: #7fa6ff; /* Blue Glow */
  --md-primary-fg-color--dark: #0245d8;
  --md-accent-fg-color: #e29afd; /* Electric Lavender */
  --md-accent-fg-color--transparent: #e29afd1a;
}

[data-md-color-scheme="default"] {
  --md-default-bg-color: #ececef;
  --md-default-fg-color: #090b1ae0;
}

[data-md-color-scheme="slate"] {
  --md-hue: 244deg; /* shifts slate's derived colors toward Midnight Core */
}

[data-md-color-scheme="default"] .md-header {
  background-color: #03002bf2;
  color: #f7f8ff;
  --md-default-fg-color: #f7f8ff;
  --md-default-fg-color--light: #f7f8ff8f;
  --md-default-fg-color--lighter: #f7f8ff52;
  --md-default-fg-color--lightest: #f7f8ff1f;
  --md-default-bg-color: #03002b;
}

/* .md-sidebar--primary is the persistent desktop sidebar above this
   breakpoint, and an overlay drawer below it — only style the drawer */
@media screen and (max-width: 76.234375em) {
  [data-md-color-scheme="default"] .md-sidebar--primary {
    background-color: #03002bf2;
    color: #f7f8ff;
    --md-default-fg-color: #f7f8ff;
    --md-default-fg-color--light: #f7f8ff8f;
    --md-default-fg-color--lighter: #f7f8ff52;
    --md-default-fg-color--lightest: #f7f8ff1f;
    --md-default-bg-color: #03002b;
  }
}

/* Accent lavender is too low-contrast for the active nav item against the
   light gray canvas; use primary blue there instead */
.md-nav--primary .md-nav__item .md-nav__link--active {
  color: var(--md-primary-fg-color);
  background-color: #0353ff1a;
}

.md-header__button.md-logo img,
.md-nav__button.md-logo img {
  content: url("../assets/logo-colour.svg");
}

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