/* ============================================================
   BIMoQ Help: brand theme (matches bimoq.com)
   Colours: electric blue #1100FF, navy #191933, light grey #F2F2F2
   Fonts: Stack Sans Notch (titles), Stack Sans Text (text)
   ============================================================ */

@font-face {
  font-family: "Stack Sans Notch";
  src: url("../fonts/StackSansNotch.ttf") format("truetype");
  font-weight: 200 700;
  font-display: swap;
}
@font-face {
  font-family: "Stack Sans Text";
  src: url("../fonts/StackSansText.ttf") format("truetype");
  font-weight: 200 700;
  font-display: swap;
}

:root,
[data-md-color-primary=custom] {
  --bimoq-blue: #1100FF;
  --bimoq-blue-dark: #0B00C4;
  --bimoq-navy: #191933;
  --bimoq-grey: #F2F2F2;
  --bimoq-line: #DCDCE2;

  --md-text-font: "Stack Sans Text";
  --md-primary-fg-color: var(--bimoq-blue);
  --md-primary-fg-color--light: #4A3DFF;
  --md-primary-fg-color--dark: var(--bimoq-blue-dark);
  --md-primary-bg-color: #FFFFFF;
  --md-primary-bg-color--light: #FFFFFFB3;
  --md-accent-fg-color: var(--bimoq-blue-dark);
  --md-accent-fg-color--transparent: #1100FF1A;
  --md-typeset-a-color: var(--bimoq-blue);
  --md-default-fg-color: var(--bimoq-navy);
  --md-footer-bg-color: var(--bimoq-navy);
  --md-footer-bg-color--dark: #11112A;
}

/* Text font everywhere, Notch for headings (like the main site) */
body, input, .md-typeset { font-family: "Stack Sans Text", "Helvetica Neue", Arial, sans-serif; }
.md-typeset { color: var(--bimoq-navy); }

.md-typeset h1,
.md-typeset h2,
.md-header__title {
  font-family: "Stack Sans Notch", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: -0.02em;
  color: #000;
}
.md-typeset h1 { font-weight: 500; font-size: 2.3em; line-height: 1.05; margin-bottom: .8em; }
.md-typeset h2 { font-weight: 500; font-size: 1.45em; margin-top: 1.8em; }
.md-typeset h3 { font-weight: 700; color: var(--bimoq-navy); }

/* Header: light ribbon like bimoq.com */
.md-header {
  background-color: var(--bimoq-grey);
  color: var(--bimoq-navy);
  box-shadow: 0 1px 0 var(--bimoq-line);
}
.md-header--shadow { box-shadow: 0 1px 0 var(--bimoq-line), 0 4px 14px rgba(25,25,51,.06); }
.md-header__button.md-logo img,
.md-header__button.md-logo svg { height: 1.5rem; width: auto; }
.md-header__title { font-weight: 500; }
.md-header__topic:first-child { font-weight: 500; }

/* Search box on the light header */
@media screen and (min-width: 60em) {
  .md-search__form { background-color: #FFFFFF; border: 1px solid var(--bimoq-line); border-radius: 10px; }
  .md-search__form:hover { background-color: #FFFFFF; border-color: #B9B9C6; }
  .md-search__input { color: var(--bimoq-navy); }
  .md-search__input::placeholder { color: #5A5A70; }
  .md-search__input + .md-search__icon { color: var(--bimoq-navy); }
}

/* Mobile drawer title bar */
@media screen and (max-width: 76.234375em) {
  .md-nav--primary .md-nav__title[for=__drawer] { background-color: var(--bimoq-grey); color: var(--bimoq-navy); }
}

/* Navigation */
.md-nav__link--active,
.md-nav__item .md-nav__link--active { color: var(--bimoq-blue); font-weight: 700; }
.md-nav__title { color: var(--bimoq-navy); }

/* Links */
.md-typeset a { text-underline-offset: 3px; }
.md-typeset a:hover { color: var(--bimoq-blue-dark); text-decoration: underline; }

/* Numbered steps: blue numbers */
.md-typeset ol li::marker { color: var(--bimoq-blue); font-weight: 700; }

/* Inline code */
.md-typeset code { border-radius: 6px; }

/* Quotes used as captions above screenshots */
.md-typeset blockquote {
  border-left: 0;
  border-inline-start: 0;
  padding: 0;
  margin: 1.6em 0 .6em;
  color: #5A5A70;
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.md-typeset img { border-radius: 12px; border: 1px solid var(--bimoq-line); }

/* Admonitions (tip / warning) */
.md-typeset .admonition, .md-typeset details { border-radius: 12px; border-width: 1px; box-shadow: none; }
.md-typeset .admonition.tip, .md-typeset details.tip { border-color: var(--bimoq-blue); }
.md-typeset .tip > .admonition-title, .md-typeset .tip > summary { background-color: #1100FF12; }
.md-typeset .tip > .admonition-title::before, .md-typeset .tip > summary::before { background-color: var(--bimoq-blue); }

/* Home page cards */
.md-typeset .grid.cards > ul > li,
.md-typeset .grid.cards > ol > li {
  border-radius: 16px;
  border: 1px solid var(--bimoq-line);
  background: #F7F7F7;
  padding: 1rem 1.1rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.md-typeset .grid.cards > ul > li:hover,
.md-typeset .grid.cards > ol > li:hover {
  border-color: var(--bimoq-blue);
  box-shadow: 0 10px 28px rgba(17,0,255,.12);
}
.md-typeset .grid.cards .lg { color: var(--bimoq-blue); }

/* Tables */
.md-typeset table:not([class]) { font-size: .8rem; border-radius: 12px; border: 1px solid var(--bimoq-line); }
.md-typeset table:not([class]) th { background: var(--bimoq-grey); color: var(--bimoq-navy); }

/* Footer */
.md-footer { color: #E3E1FF; }
.md-footer-meta { background-color: #11112A; }