/* Focus visibility — loaded last so it wins.
 *
 * The codebase sets `outline:none` in fourteen places, several of them inline
 * on the marketing contact fields, where an inline declaration would beat any
 * normal stylesheet rule. A focus indicator that a later rule can switch off
 * is not an indicator, so this one is !important by design: the critique
 * found form fields with no visible focus state at all, and public-sector
 * procurement asks about exactly this.
 *
 * The ring is navy with a 2px offset, so the gap always shows page background
 * — it stays visible over teal buttons and RIBA stage chips alike. Dark
 * surfaces (the marketing page, the nav bar) invert to white.
 */
:root {
  --focus-ring: #1F3864;
  --focus-ring-dark: #FFFFFF;
}

:focus-visible {
  outline: 3px solid var(--focus-ring) !important;
  outline-offset: 2px !important;
  border-radius: 3px;
}

/* Dark grounds: navy on navy is invisible. */
#nav :focus-visible,
#home-screen :focus-visible,
.hs-nav :focus-visible,
.assess-modal :focus-visible,
#auth-modal :focus-visible {
  outline-color: var(--focus-ring-dark) !important;
}

/* Table rows take one tab stop and arrow keys move within (a11y.js), so the
   focused row has to read as the current one, not merely hovered. */
.t-row:focus-visible {
  outline-offset: -3px !important;
  background: #EAF4F4;
}

/* Skip link — the first tab stop on the page, invisible until focused. */
.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 4000;
  background: var(--navy);
  color: #fff;
  padding: 10px 16px;
  border-radius: 5px;
  font-family: 'Figtree', sans-serif;
  font-size:var(--fs-md);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform .16s;
}
.skip-link:focus-visible {
  transform: translateY(0);
}