/* Quartermaster colours: black, dark grey cards, soft blue accent */
:root {
  --qm-blue: #59aae1;
  --qm-blue-bright: #71c6fa;
  --qm-orange: #f09748;
  --qm-green: #67ce67;
  --qm-black: #000000;
  --qm-card: #1c1c1d;
  --qm-fill: #262628;
}

/* Light mode: dark header like the app, blue accents */
[data-md-color-scheme="default"] {
  --md-primary-fg-color: var(--qm-card);
  --md-primary-fg-color--light: #2c2c2d;
  --md-primary-fg-color--dark: var(--qm-black);
  --md-primary-bg-color: #ffffff;
  --md-accent-fg-color: #2f8ccc;
  --md-typeset-a-color: #2f8ccc;
}

/* Dark mode (default): matches the app */
[data-md-color-scheme="slate"] {
  --md-hue: 240;
  --md-default-bg-color: var(--qm-black);
  --md-default-fg-color--lightest: rgba(255,255,255,.08);
  --md-primary-fg-color: var(--qm-card);
  --md-primary-fg-color--light: #2c2c2d;
  --md-primary-fg-color--dark: var(--qm-black);
  --md-primary-bg-color: #ffffff;
  --md-accent-fg-color: var(--qm-blue-bright);
  --md-typeset-a-color: var(--qm-blue);
  --md-code-bg-color: var(--qm-card);
  --md-footer-bg-color: var(--qm-card);
  --md-footer-bg-color--dark: var(--qm-black);
  --md-admonition-bg-color: var(--qm-card);
}

.md-header, .md-tabs { background-color: var(--md-primary-fg-color); }
.md-tabs__item--active .md-tabs__link { color: var(--qm-blue-bright); opacity: 1; }
.md-nav__link--active { color: var(--md-typeset-a-color) !important; }

.md-typeset h1 { font-weight: 700; letter-spacing: -0.02em; }
.md-typeset .grid.cards > ul > li { border-radius: 14px; }
[data-md-color-scheme="slate"] .md-typeset .grid.cards > ul > li { background: var(--qm-card); border-color: transparent; }
[data-md-color-scheme="slate"] .md-typeset table:not([class]) { background: var(--qm-card); }

/* Buttons: blue pill like Resume / Open */
.md-typeset .md-button { border-radius: 999px; }
.md-typeset .md-button--primary { background-color: var(--qm-blue); border-color: var(--qm-blue); color: #fff; }
.md-typeset .md-button--primary:hover { background-color: var(--qm-blue-bright); border-color: var(--qm-blue-bright); color: #fff; }
.md-typeset .md-button:not(.md-button--primary) { color: var(--md-typeset-a-color); border-color: currentColor; }
/* Material's own hover fills the button with the accent, and the rule above keeps the
   text the same blue, so the label vanished. Keep the outline and tint behind the text. */
.md-typeset .md-button:not(.md-button--primary):is(:hover, :focus-visible) {
  color: var(--md-typeset-a-color);
  background-color: color-mix(in srgb, var(--md-typeset-a-color) 14%, transparent);
  border-color: currentColor;
}

/* App status colours for warnings and tips */
.md-typeset .admonition.warning, .md-typeset details.warning { border-color: var(--qm-orange); }
.md-typeset .warning > .admonition-title, .md-typeset .warning > summary { background-color: rgba(240,151,72,.12); }
.md-typeset .warning > .admonition-title::before, .md-typeset .warning > summary::before { background-color: var(--qm-orange); }
.md-typeset .admonition.tip, .md-typeset details.tip { border-color: var(--qm-green); }
.md-typeset .tip > .admonition-title, .md-typeset .tip > summary { background-color: rgba(103,206,103,.12); }
.md-typeset .tip > .admonition-title::before, .md-typeset .tip > summary::before { background-color: var(--qm-green); }
.md-typeset .admonition.info, .md-typeset details.info,
.md-typeset .admonition.note, .md-typeset details.note { border-color: var(--qm-blue); }
.md-typeset :is(.info, .note) > :is(.admonition-title, summary) { background-color: rgba(89,170,225,.12); }
.md-typeset :is(.info, .note) > :is(.admonition-title, summary)::before { background-color: var(--qm-blue); }

.qm-hero { padding: 1.2rem 0 0.4rem; }
.qm-hero p.tagline { font-size: 1.35rem; opacity: .8; margin-top: -.4rem; }
/* Hero buttons: an even gap between them, and on a phone one full-width button per row. */
.qm-hero p:has(> .md-button) { display: flex; flex-wrap: wrap; gap: .6rem; }
.qm-hero p:has(> .md-button) .md-button { margin: 0; }
@media screen and (max-width: 44.9375em) {
  .qm-hero p:has(> .md-button) { flex-direction: column; align-items: stretch; }
  .qm-hero p:has(> .md-button) .md-button { text-align: center; }
}
.md-typeset table:not([class]) th { white-space: nowrap; }

/* FAQ questions in app blue */
.md-typeset details.question { border-color: var(--qm-blue); }
.md-typeset .question > summary { background-color: rgba(89,170,225,.12); }
.md-typeset .question > summary::before { background-color: var(--qm-blue); }
.md-typeset .question > summary::after { color: var(--qm-blue); }
.md-header__button.md-logo img { border-radius: 22%; height: 1.6rem; width: 1.6rem; }
.md-header__inner { height: 3.2rem; }
.md-header__button.md-logo {
  padding: .2rem;
  margin: 0 .2rem;
}
.md-header__button.md-logo img {
  height: 2rem;
  width: 2rem;
  border-radius: 22%;
}