/**
 * Reset, document defaults, motion and shared utilities.
 *
 * Deliberately small: the design is not built on a utility framework, so this
 * file only sets what every element needs and gets out of the way.
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  height: auto;
  min-height: 100%;
  /* Keep an anchored or focused element clear of the sticky header, so focus
     is never parked underneath it. */
  scroll-padding-top: 96px;
  /* The header is sticky and in flow, and condensing it past 90px of scroll
     makes it ~30px shorter. Chrome's scroll anchoring then moves scrollY by
     the same 30px to keep the content below it still — back under the 90px
     threshold — so the header expands, anchoring moves scrollY again, and the
     page twitches up and down until the visitor scrolls on. Nothing else on
     the page changes height above the viewport, so anchoring has no job here. */
  overflow-anchor: none;
}

body {
  height: auto;
  min-height: 100%;
  margin: 0;
  background: var(--dk-white);
  color: var(--dk-text);
  font-family: var(--dk-font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--dk-blue);
  text-decoration: none;
}

a:hover {
  color: var(--dk-blue-hover);
}

img,
svg {
  display: block;
  max-width: 100%;
}

/**
 * `hidden` must actually hide.
 *
 * The user-agent rule for `[hidden]` is `display: none`, but any author rule
 * that sets `display` — and several components here need `display: flex` — wins
 * on specificity and silently reveals the element again. This is the one place
 * `!important` is the correct tool: `hidden` is not a hint.
 */
[hidden] {
  display: none !important;
}

input,
textarea,
button {
  font-family: inherit;
}

a,
button {
  transition:
    background-color var(--dk-speed-fast) ease,
    color var(--dk-speed-fast) ease,
    border-color var(--dk-speed-fast) ease,
    transform var(--dk-speed-fast) ease;
}

/* A single visible focus ring for every interactive element. Keyboard-only, so
   it never appears on a mouse click but is always there for tab navigation. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--dk-focus-ring, var(--dk-blue));
  outline-offset: 3px;
  border-radius: 1px;
}

/**
 * The brand blue only reaches 2.96:1 against the navy bands, below the 3:1 that
 * WCAG 1.4.11 asks of a focus indicator. Dark surfaces switch the ring to white
 * (17.5:1). The ring is painted only on :focus-visible, so nothing changes for
 * a visitor who is not tabbing — this costs zero pixels at rest.
 */
.dk-dark,
footer {
  --dk-focus-ring: var(--dk-on-dark);
}

/**
 * Windows High Contrast collapses the border colours several controls rely on
 * as their only affordance. Restoring a system-coloured border keeps them
 * visible. `forced-color-adjust: none` is deliberately not used — overriding
 * the user's chosen palette is the problem, not the fix.
 */
@media (forced-colors: active) {
  .dk-iconbtn,
  .dk-social,
  .dk-chip,
  .dk-faq__mark,
  .dk-card__go,
  .dk-fab a {
    border: 1px solid ButtonBorder;
  }
}

/* ---------------------------------------------------------------- motion */

@keyframes dk-fade {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes dk-rise {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/**
 * Scroll-linked reveal.
 *
 * `animation-timeline: view()` ties progress to the element entering the
 * viewport. Where it is unsupported the declaration is dropped and the same
 * animation simply plays once on load — which is the degradation the original
 * design has, so the two behave identically in every browser.
 */
[data-anim] {
  animation: dk-rise 0.7s var(--dk-ease) both;
  animation-timeline: view();
  animation-range: entry 0% cover 22%;
}

.dk-fade-in {
  animation: dk-fade 0.35s ease both;
}

/* ------------------------------------------------------------- utilities */

/**
 * Skip link: off-screen until focused, then pinned to the top-left above the
 * sticky header so a keyboard visitor can jump past the navigation.
 */
.dk-skip {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 12px 18px;
  border-radius: var(--dk-radius-sm);
  background: var(--dk-blue);
  color: var(--dk-on-dark);
  font: 600 14px/1 var(--dk-font-display);
  letter-spacing: var(--dk-track-button);
  text-transform: uppercase;
  transform: translateY(-200%);
  transition: transform var(--dk-speed) ease;
}

.dk-skip:focus-visible {
  transform: none;
  color: var(--dk-on-dark);
}

/** Visually hidden but available to assistive technology. */
.dk-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/** The 64x2 rule under every section heading. */
.dk-rule {
  width: 64px;
  height: 2px;
  background: var(--dk-blue);
  margin: 20px 0 28px;
}

.dk-rule--center {
  margin-left: auto;
  margin-right: auto;
}

/* --------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  [data-anim],
  .dk-fade-in {
    animation: none !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}