/* ==========================================================================
   Base - reset, elements, typography defaults
   ========================================================================== */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  font-size: var(--fs-400);
  line-height: var(--lh-normal);
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, picture, svg, video, canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
a:hover { color: var(--c-green-text); }

ul, ol { padding: 0; list-style: none; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }

:focus-visible {
  outline: 3px solid var(--c-green);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--c-green); color: var(--c-ink); }

/* --- Headings ---------------------------------------------------------
   Brand voice = General Sans Bold, sentence case (matches the social tiles
   and the MOORUNGA wordmark). Uppercase is reserved for small UI labels
   (eyebrows, buttons, nav, stat labels) - never the display headlines. */
h1, h2, h3, h4, h5, h6 { line-height: var(--lh-snug); font-weight: var(--weight-heading); text-wrap: balance; }

.display, h1.display {
  font-family: var(--font-display);
  font-weight: var(--weight-heading);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

/* Headline scale helpers */
.h-hero    { font-family: var(--font-display); font-weight: var(--weight-heading); line-height: var(--lh-tight); letter-spacing: var(--tracking-display); font-size: var(--fs-900); text-wrap: balance; }
.h-section { font-family: var(--font-display); font-weight: var(--weight-heading); line-height: var(--lh-tight); letter-spacing: var(--tracking-display); font-size: var(--fs-800); text-wrap: balance; }
.h-3       { font-family: var(--font-display); font-weight: var(--weight-heading); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); font-size: var(--fs-700); text-wrap: balance; }
.h-4       { font-family: var(--font-sans); font-weight: var(--weight-semibold); font-size: var(--fs-600); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); }

p { max-width: var(--measure); text-wrap: pretty; }
p + p { margin-top: var(--sp-4); }

strong, b { font-weight: 700; }

/* Numeric UI uses lining tabular figures so data columns align - fitting for
   a data-led brand (EBVs, stats, lot numbers). */
.stat__value, .ebv-cell__value, .lot-card__badge, .chart-card, .spec-list dd, .data-table {
  font-variant-numeric: tabular-nums lining-nums;
}

hr {
  border: 0;
  height: 1px;
  background: var(--c-border);
  margin: var(--sp-6) 0;
}

/* Accessible visually-hidden */
.screen-reader-text,
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  left: var(--sp-4); top: -100%;
  z-index: var(--z-modal);
  background: var(--c-ink);
  color: var(--c-white);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--radius-sm);
  transition: top var(--dur-fast) var(--ease);
}
.skip-link:focus { top: var(--sp-4); color: var(--c-white); }

/* Honeypot for spam */
.mg-hp { position: absolute; left: -9999px; }