/*
 * CareQB brand layer for the user guides.
 *
 * Colors and type come from the marketing site (careqb.pro): navy for the
 * brand, a deeper blue for actions and links, Open Sans throughout. Only CSS
 * variables and standard theme classes are used, so this works under both
 * Zensical and MkDocs Material.
 */

/* Brand tokens ------------------------------------------------------------ */

:root {
  --cq-navy: #000080;
  --cq-blue: #0033cc;
  --cq-blue-hover: #0055ff;
  --cq-ink: #333333;
  --cq-mist: #f8f9fa;
  --cq-line: #e2e8f0;

  /* The Goal bubble: a light tint of the action blue */
  --cq-bubble-bg: #ebefff;
  --cq-bubble-fg: #10194d;
  --cq-chip-bg: #eef1fb;
}

[data-md-color-scheme="default"] {
  --md-primary-fg-color: var(--cq-navy);
  --md-primary-fg-color--light: #3333a6;
  --md-primary-fg-color--dark: #00005c;
  --md-accent-fg-color: var(--cq-blue-hover);
  --md-typeset-color: var(--cq-ink);
  --md-typeset-a-color: var(--cq-blue);
  --md-default-fg-color: var(--cq-ink);
}

[data-md-color-scheme="slate"] {
  /* Navy-tinted dark mode rather than neutral grey */
  --md-hue: 235;
  --md-primary-fg-color: #9db0ff;
  --md-primary-fg-color--light: #c3cfff;
  --md-primary-fg-color--dark: #7088f0;
  --md-accent-fg-color: #c3cfff;
  --md-typeset-a-color: #9db0ff;

  --cq-line: hsla(235, 25%, 70%, 0.16);
  --cq-mist: hsla(235, 30%, 70%, 0.06);
  --cq-bubble-bg: #1b2559;
  --cq-bubble-fg: #e3e8ff;
  --cq-chip-bg: hsla(235, 60%, 75%, 0.12);
}

/* Header ------------------------------------------------------------------ */

.md-header__topic:first-child,
.md-header__title {
  font-weight: 700;
}

[data-md-color-scheme="default"] .md-header__topic:first-child {
  color: var(--cq-navy);
}

/* The theme reserves space on the right for a repository link. There isn't
 * one, so drop the empty slot and let search line up with the content. */
.md-header__source {
  display: none;
}

/* The navy logo disappears on a dark header, so render it in white there */
[data-md-color-scheme="slate"] .md-header__button.md-logo img {
  filter: brightness(0) invert(1);
}

.md-tabs__item--active .md-tabs__link {
  color: var(--md-primary-fg-color);
  font-weight: 600;
}

/* Headings ---------------------------------------------------------------- */

.md-typeset h1,
.md-typeset h2 {
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--md-primary-fg-color);
}

[data-md-color-scheme="slate"] .md-typeset h1,
[data-md-color-scheme="slate"] .md-typeset h2 {
  color: var(--md-default-fg-color);
}

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

/* Section dividers in the guides are plain `---`; keep them quiet */
.md-typeset hr {
  border-bottom-color: var(--cq-line);
}

/* Links ------------------------------------------------------------------- */

.md-typeset a {
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
}

.md-typeset a:hover,
.md-typeset a:focus-visible {
  color: var(--md-accent-fg-color);
  text-decoration-color: currentColor;
}

/* The Goal bubble -----------------------------------------------------------
 *
 * Every guide opens with a `> **Goal:**` line right after its title, written
 * in the scheduler's own words. It's styled like an incoming text message,
 * since that's the medium CareQB lives in. Other blockquotes are notes and
 * tips, and get the quieter style below.
 */

/* [dir] matches the theme's own [dir=ltr] border rule so this wins */
[dir] .md-typeset h1 + blockquote {
  position: relative;
  max-width: 30rem;
  margin: 1.2em 0 1.6em;
  padding: 0.9em 1.2em;
  border: none;
  border-radius: 1.2em 1.2em 1.2em 0.3em;
  background: var(--cq-bubble-bg);
  color: var(--cq-bubble-fg);
  font-size: 0.85rem;
  line-height: 1.55;
}

.md-typeset h1 + blockquote > :first-child {
  margin-top: 0;
}

.md-typeset h1 + blockquote > :last-child {
  margin-bottom: 0;
}

/* "Goal:" reads as the sender label rather than bold body text */
.md-typeset h1 + blockquote > p:first-child > strong:first-child {
  display: block;
  margin-bottom: 0.2em;
  font-size: 0.75em;
  font-weight: 700;
  color: var(--md-primary-fg-color);
}

/* Notes and tips ---------------------------------------------------------- */

[dir] .md-typeset blockquote:not(h1 + blockquote) {
  padding: 0.7em 1em;
  border-left: 3px solid color-mix(in srgb, var(--md-primary-fg-color) 35%, transparent);
  border-radius: 0 0.4em 0.4em 0;
  background: var(--cq-mist);
  color: var(--md-typeset-color);
}

/* Tables ------------------------------------------------------------------ */

.md-typeset table:not([class]) {
  border: 1px solid var(--cq-line);
  border-radius: 0.6em;
  font-size: 0.75rem;
  box-shadow: none;
}

.md-typeset table:not([class]) th {
  background: var(--cq-mist);
  color: var(--md-primary-fg-color);
  font-weight: 700;
}

.md-typeset table:not([class]) td,
.md-typeset table:not([class]) th {
  border-top-color: var(--cq-line);
  padding: 0.75em 1.1em;
}

.md-typeset table:not([class]) tbody tr:hover {
  background: var(--cq-mist);
  box-shadow: none;
}

/* On-screen labels -----------------------------------------------------------
 *
 * The guides bold the app's own wording ("Home → Unfilled shifts → Find
 * fill-in"). Inside tables, that's almost always a click path, so it's set
 * like a UI label to separate it from instructions around it.
 */

.md-typeset td strong {
  padding: 0.1em 0.4em;
  border-radius: 0.3em;
  background: var(--cq-chip-bg);
  color: var(--md-primary-fg-color);
  font-weight: 600;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Sidebar ----------------------------------------------------------------- */

.md-nav__link--active,
.md-nav__item .md-nav__link--active {
  color: var(--md-primary-fg-color);
  font-weight: 600;
}

/* Focus ------------------------------------------------------------------- */

.md-typeset a:focus-visible,
.md-nav__link:focus-visible,
.md-tabs__link:focus-visible {
  outline: 2px solid var(--cq-blue-hover);
  outline-offset: 2px;
  border-radius: 0.2em;
}