/**
 * Small, single-purpose utility classes — spacing/visibility overrides that
 * don't warrant a named component. Reach for a component class first;
 * these are for the last-mile adjustment.
 */

.mt-0 { margin-top: 0; }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.mb-12 { margin-bottom: var(--space-12); }

.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }

.section-intro {
  max-width: 620px;
  margin-bottom: var(--space-12);
}

.section-intro.text-center {
  margin-inline: auto;
}

.section-intro .text-eyebrow {
  display: block;
  margin-bottom: var(--space-3);
}

.section-intro h2 {
  margin-bottom: var(--space-4);
}

.hide-mobile {
  display: none;
}

@media (min-width: 768px) {
  .hide-mobile {
    display: initial;
  }
}

/* .hide-mobile's `display: initial` resolves to `inline`, which is fine for
 * a plain link — but a `.btn` needs `inline-flex` to keep its icon+label on
 * one line, and if the button is a flex item (e.g. inside .flex-between),
 * `inline` gets "blockified" to `block` per the CSS Display spec, breaking
 * the flex layout entirely and dropping the icon to its own line. Higher
 * specificity here (.btn.hide-mobile) wins over the plain rule above
 * regardless of source order. */
@media (min-width: 768px) {
  .btn.hide-mobile {
    display: inline-flex;
  }
}

.hide-desktop {
  display: initial;
}

@media (min-width: 768px) {
  .hide-desktop {
    display: none;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link — keyboard accessibility, hidden until focused */
.skip-link {
  position: absolute;
  top: -48px;
  left: var(--space-4);
  z-index: 100;
  background: var(--color-accent);
  color: #fff;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  font-weight: 600;
  transition: top var(--duration-fast) var(--ease-out);
}

.skip-link:focus {
  top: var(--space-4);
}

/* ---------- Scroll-reveal (replaces WOW.js) ---------- */
/* Respects reduced-motion by simply staying visible with no transition. */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}