/* Site-level additions on top of the design system's bundle.css. Every value comes from tokens.css. */

html { scroll-padding-top: calc(var(--header-height) + var(--space-6)); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* Skip link: hidden until focused */
.xd-skip { position: absolute; left: var(--space-4); top: -100px; z-index: 20; padding: var(--space-2) var(--space-4); border-radius: var(--radius-full); background: var(--ink); color: var(--surface); font: 500 14px/20px var(--font-sans); text-decoration: none; }
.xd-skip:focus-visible { top: var(--space-3); }

/* Header floats once the page scrolls */
.xd-header { transition: box-shadow .2s ease; }
.xd-header.is-scrolled { box-shadow: var(--shadow-sm); }

/* Replacements for the inline styles the React components use */
.xd-section-flush-top { padding-top: 0; }
.xd-manifesto-field { margin-top: var(--space-8); max-width: 220px; }
.xd-cta-title-spaced { margin-top: var(--space-6); }

/* Contact form states */
.xd-cta-action > .xd-form { width: 100%; }
.xd-form-error { margin: 0; font-size: 14px; line-height: 22px; color: var(--danger); }
.xd-form [aria-invalid="true"] { border-color: var(--danger); }
.xd-btn[disabled] { opacity: 0.6; cursor: progress; }
.xd-form-done:focus { outline: none; }

/* 404 */
.xd-notfound { padding-top: var(--space-32); }
.xd-notfound-body { margin: 0; font-size: 20px; line-height: 32px; color: var(--ink-muted); }
@media (max-width: 720px) {
  .xd-notfound { padding-top: var(--space-16); }
  .xd-notfound-body { font-size: 18px; line-height: 28px; }
}