/* Accessible keyboard focus for the legal pages, which retain their own layout stylesheet. */
:root {
  --legal-focus: #aa431b;
}

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--legal-focus);
  outline-offset: 4px;
}

.legal-page,
.legal-page .container {
  min-width: 0;
}

.legal-hero h1,
.legal-content h2,
.legal-content h3,
.legal-content p,
.legal-content li,
.legal-content a,
.legal-content code {
  overflow-wrap: anywhere;
  hyphens: auto;
}

@media (max-width: 600px) {
  .legal-hero h1 {
    font-size: clamp(2rem, 11.5vw, 2.75rem);
  }

  .legal-content h2 {
    font-size: clamp(1.45rem, 8vw, 1.875rem);
  }
}