/* ==========================================================================
   Kick of R&D — Global Base Styles
   --------------------------------------------------------------------------
   Minimal reset + core element styles. No component styles here —
   those live in block-specific or section-specific CSS files.
   ========================================================================== */


/* ── Reset ──────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}


/* ── Body ───────────────────────────────────────────────────────────────── */
body.krd-dark {
  background-color: var(--krd-bg-primary);
  color: var(--krd-text-primary);
  font-family: var(--krd-font-body);
  font-size: var(--krd-fs-body);
  line-height: var(--krd-lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}


/* ── Links ──────────────────────────────────────────────────────────────── */
a {
  color: var(--krd-blue-bright);
  text-decoration-skip-ink: auto;
}

a:hover {
  color: var(--krd-orange);
}


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


/* ── Headings ───────────────────────────────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: var(--krd-font-display);
  line-height: var(--krd-lh-tight);
  font-weight: var(--krd-fw-bold);
  color: var(--krd-text-primary);
}


/* ── Skip Link (A11y) ──────────────────────────────────────────────────── */
.krd-skip-link {
  position: absolute;
  top: -100%;
  left: var(--krd-gutter);
  z-index: calc(var(--krd-z-overlay) + 10);
  padding: 0.75rem 1.5rem;
  background-color: var(--krd-orange);
  color: #fff;
  font-weight: var(--krd-fw-semibold);
  text-decoration: none;
  border-radius: 0 0 var(--krd-radius-md) var(--krd-radius-md);
  transition: top var(--krd-duration-fast) var(--krd-ease-out);
}

.krd-skip-link:focus {
  top: 0;
}


/* ── WordPress alignment classes ────────────────────────────────────────── */
.alignfull {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(-50vw + 50%);
}

.alignwide {
  width: 100%;
  max-width: var(--krd-max-width);
  margin-left: auto;
  margin-right: auto;
}


/* ── Main content wrapper ───────────────────────────────────────────────── */
#main-content {
  min-height: 60vh; /* prevents footer from riding up on short pages */
}


/* ── Selection ──────────────────────────────────────────────────────────── */
::selection {
  background-color: var(--krd-orange);
  color: #fff;
}


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

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