/* Base element styles. Every value comes from tokens.css. */

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--color-text-primary);
  font: var(--type-body-md);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, ul, ol, figure, blockquote {
  margin: 0;
}

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

button, input, textarea, select {
  font: inherit;
  color: inherit;
}

[hidden] { display: none !important; }

/* Keyboard focus for every link, button and FAQ question (DQ-020, decided by Claude): a brand-green ring just
   outside the element. Fields and option cards keep their own Figma focus states. */
:focus-visible {
  outline: var(--border-width-md) solid var(--color-border-brand);
  outline-offset: var(--border-width-md);
}

/* StandWithUkraine strip (CLAUDE.md §11.13): it sticks to the top, so the header sits right under it and anchor links
   land below it. */
[data-ukraine-banner] + .page { padding-top: 0; }
html:has([data-ukraine-banner]) { scroll-padding-top: var(--ukraine-banner-height); }

@media (min-width: 1024px) {
  html:has([data-ukraine-banner]) { scroll-padding-top: var(--ukraine-banner-height-desktop); }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Page layout (CLAUDE.md §10: 320–1023 Mobile, 1024–1919 Desktop 1440, 1920+ Desktop 1920) ---------- */
.page {
  display: flex;
  flex-direction: column;
  padding: var(--space-4);
}

.page-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
  margin: var(--space-6) 0 var(--space-20);
}

@media (min-width: 1024px) {
  .page {
    box-sizing: content-box;
    max-width: var(--layout-content-1440);
    margin: 0 auto;
    padding: var(--space-12) var(--space-20) var(--layout-page-bottom-desktop);
  }

  .page-main {
    gap: var(--space-40);
    margin: var(--layout-header-gap-desktop) 0 var(--space-40);
  }
}

@media (min-width: 1920px) {
  .page {
    max-width: var(--layout-content-1920);
    padding-inline: 0;
  }
}

/* Shared heading helpers used by sections */
.heading-h2 {
  font: var(--type-heading-h2);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-heading);
  text-wrap: pretty;
}

/* 404 and error pages (DQ-026) */
.status-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  padding-block: var(--space-20);
  font: var(--type-body-lg);
  text-align: center;
}

/* ---------- Admin area (internal, CLAUDE.md §8): tokens only ---------- */
.admin-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--color-bg-surface);
  box-shadow: inset 0 0 0 var(--border-width-sm) var(--color-border-subtle);
}

.admin-narrow {
  width: 100%;
  max-width: var(--form-container-width-1440);
  margin: 0 auto;
}

.admin-title {
  font: var(--form-title-type);
  color: var(--color-text-primary);
}

.admin-text {
  font: var(--form-helper-type);
  color: var(--color-text-secondary);
}

.admin-text a,
.admin-link { color: var(--color-text-brand); }

.admin-error {
  font: var(--form-error-type);
  color: var(--color-text-error);
}

.admin-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* ---------- Motion (CLAUDE.md §13): soft, slow, once. Only opacity and transform. ---------- */
@media (prefers-reduced-motion: no-preference) {
  :root { interpolate-size: allow-keywords; }
  html { scroll-behavior: smooth; }

  /* Hero: headline, subtext, benefits and CTA fade up on load, staggered; the image (LCP) is not animated. */
  [data-reveal="hero"] { animation: fade-up var(--motion-slow) var(--motion-ease) both; }
  .subtitle[data-reveal="hero"] { animation-delay: var(--motion-stagger); }
  .benefits[data-reveal="hero"] { animation-delay: calc(2 * var(--motion-stagger)); }
  .cta[data-reveal="hero"] { animation-delay: calc(3 * var(--motion-stagger)); }
}

/* Scroll reveal: hidden only when scripting runs (site.js adds .is-visible), so no-JS visitors see everything. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  [data-reveal]:not([data-reveal="hero"]):not(.is-visible) {
    opacity: 0;
    transform: translateY(var(--motion-distance));
  }

  [data-reveal]:not([data-reveal="hero"]) {
    transition: opacity var(--motion-slow) var(--motion-ease), transform var(--motion-slow) var(--motion-ease);
    transition-delay: calc(var(--reveal-index, 0) * var(--motion-stagger));
  }

  /* Stagger repeated items by their position (up to 7: steps, cards, FAQ items) */
  [data-reveal="stagger"]:nth-child(2) { --reveal-index: 1; }
  [data-reveal="stagger"]:nth-child(3) { --reveal-index: 2; }
  [data-reveal="stagger"]:nth-child(4) { --reveal-index: 3; }
  [data-reveal="stagger"]:nth-child(5) { --reveal-index: 4; }
  [data-reveal="stagger"]:nth-child(6) { --reveal-index: 5; }
  [data-reveal="stagger"]:nth-child(7) { --reveal-index: 6; }
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(var(--motion-distance)); }
}

@keyframes settle-in {
  from { opacity: 0; transform: scale(0.9); }
}

/* Reduced motion: nothing moves, content just appears (CLAUDE.md §13). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}