/* RJD Engineering Solutions — brand-mark component styles (runtime-only)
 *
 * The canonical lockup SVG already contains the ENGINEERING / SOLUTIONS
 * wordmark baked in with JetBrains Mono typography and teal accent, so
 * this file only sizes / aligns the <img> emitted by brand.lockup().
 *
 * Edit here, then run tools/sync_brand_to_runtime.py to refresh the
 * cache-buster hash so browsers re-fetch the updated file.
 */

.brand-mark {
  display: inline-flex;
  align-items: center;
  color: var(--brand-ink, #1B2A3A);
  text-decoration: none;
  line-height: 0;
}

.brand-mark:hover,
.brand-mark:focus {
  text-decoration: none;
  color: var(--brand-ink, #1B2A3A);
}

.brand-mark__glyph {
  display: block;
  height: 56px;
  width: auto;
  flex: 0 0 auto;
}

/* Compact variant — tight rows (footers, inline links). */
.brand-mark--sm .brand-mark__glyph { height: 36px; }

/* Large variant — login cards and hero logos. */
.brand-mark--lg .brand-mark__glyph { height: 80px; }

/* Dark-surface filter for the default (ink) lockup. When the consumer
 * sits on a dark background and cannot swap to rjd-lockup-reverse.svg,
 * apply this class to invert the ink strokes/text to paper-white. */
.brand-mark--reverse .brand-mark__glyph {
  filter: invert(100%) hue-rotate(180deg) brightness(1.05);
}

/* Auto-invert lockup when dark mode is active (data-theme="dark" on html) */
[data-theme="dark"] .brand-mark__glyph {
  filter: invert(100%) hue-rotate(180deg) brightness(1.05);
}