/* Brand color overrides for the Clifft documentation theme.
 *
 * Sampled from the dense "t" stroke of the wordmark.
 */

:root {
  --clifft-brand-blue: #3C64B4;
  --clifft-brand-blue-dark: #5882d8;
}

/* Light scheme: brand blue accent against neutral white header. */
[data-md-color-scheme="default"] {
  --md-accent-fg-color: var(--clifft-brand-blue);
  --md-accent-fg-color--transparent: rgba(60, 100, 180, 0.1);
  --md-typeset-a-color: var(--clifft-brand-blue);
}

/* Dark scheme: lighter brand blue for legibility on dark backgrounds. */
[data-md-color-scheme="slate"] {
  --md-accent-fg-color: var(--clifft-brand-blue-dark);
  --md-accent-fg-color--transparent: rgba(88, 130, 216, 0.15);
  --md-typeset-a-color: var(--clifft-brand-blue-dark);
}

/* Visually hidden but still readable by screen readers. Used on the home
 * page so the auto-rendered "Clifft" heading does not duplicate the hero
 * logo while still anchoring the document for accessibility and SEO.
 */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Swap the logo to the dark variant in slate (dark) scheme.
 * Targets both the header logo and the drawer/sidebar logo on mobile.
 */
[data-md-color-scheme="slate"] [data-md-component="logo"] img,
[data-md-color-scheme="slate"] .md-logo img {
  content: url("../assets/logos/clifft-mark-dark.png");
}