/* ============================================================
   Solven Advisory — Global styles
   tokens.css carries the reset and typographic primitives.
   This file adds shared utilities, a11y helpers, and image defaults.
   ============================================================ */

/* ----- Sage discipline -----
   tokens.css colours H3 and .designator in sage-deep, but CLAUDE.md is
   stricter: the chevron is the only sage element on any given screen, and
   the chevron already appears in the header and footer lockups on every
   page. We keep the sans-serif tracked-uppercase treatment but recolour
   to charcoal so we don't break the rule.
*/
h3,
.designator {
  color: var(--color-text);
}

/* ----- Image defaults ----- */
img,
svg {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ----- Focus ring -----
   Visible focus is a WCAG requirement. Charcoal on bone has plenty of
   contrast and keeps the chevron as the only sage element on screen.
*/
:focus-visible {
  outline: 2px solid var(--charcoal);
  outline-offset: 3px;
}

/* ----- Skip link (a11y) -----
   Hidden until focused. Lets keyboard and screen-reader users jump
   past the header straight to the page content.
*/
.skip-link {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background-color: var(--color-bg);
  color: var(--color-text);
  text-decoration: none;
  border: 1px solid var(--charcoal);
  transform: translateY(-200%);
  transition: transform var(--transition-fast);
  z-index: var(--z-modal);
}

.skip-link:focus {
  transform: translateY(0);
}

/* ----- Visually hidden -----
   Hides content visually while keeping it available to screen readers.
*/
.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;
}

/* ----- Containers ----- */
.container-narrow { max-width: var(--container-narrow); margin: 0 auto; }
.container-prose  { max-width: var(--container-prose);  margin: 0 auto; }
.container-wide   { max-width: var(--container-wide);   margin: 0 auto; }

/* ----- Print -----
   The brand was designed for print first. Make sure it survives a Cmd-P.
*/
@media print {
  .site-header nav,
  .skip-link {
    display: none;
  }

  body {
    background-color: #FFFFFF;
  }
}