/* ─────────────────────────────
   PROJECT STYLES — BlackDoctor BrandOS
   ─────────────────────────────

   Project-specific styles. Prefer the design system;
   add here only what it can't express.

   Never edit assets/css/design-system.css (synced by bd-sync,
   overwritten on every npm install). Brand tokens live in
   theme.css; anything else BlackDoctor-specific lives here.
   ───────────────────────────── */

/* ─────────────────────────────
   PAGE TRANSITIONS
   ─────────────────────────────
   bd-soft-nav.js focuses the arriving <main> after every soft navigation
   so keyboard and screen-reader users start in the new page. <main> is a
   landmark, not a control: the ring the browser draws on a focused element
   after a keyboard-initiated navigation would box the whole content column.
   ───────────────────────────── */

main:focus {
  outline: none;
}

/* ─────────────────────────────
   SITE HEADER — the wordmark's shape
   ─────────────────────────────
   The engine's .svg-logo box is 210/101, capped at 300px wide. The header
   sizes the mark by height (--site-header-logo-height, 50px) and lets the
   box derive its width from that ratio, so the 6.9:1 BlackDoctor wordmark
   (1037×150) is boxed at 104px and clipped; at the engine's 50px it would
   also be 346px wide, past the cap. Give the header image the wordmark's
   own ratio and a height chosen by eye — 35px reads as 242px wide, a step
   quieter than the design file's 300 — then step it down at the docs kit's
   mobile breakpoint so the mark and the two header controls fit a 360px
   viewport (32px tall is 221px wide). All three are component-scope knobs,
   so they live here, not in theme.css.
   ───────────────────────────── */

:root {
  --site-header-logo-height: 35px;
}

.svg-logo.site-header-logo-image {
  aspect-ratio: 1037 / 150;
}

@media (max-width: 768px) {
  :root {
    --site-header-logo-height: 32px;
  }
}