/* ==========================================================================
   NOVAURA — Base layer
   Reset, element defaults, layout primitives, motion utilities.
   Loaded on every page. Depends on tokens.css.
   ========================================================================== */

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

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

body {
  margin: 0;
  overflow-x: hidden;
  background-color: var(--nva-bg);
  color: var(--nva-ink);
  font-family: var(--nva-font-body);
  font-size: var(--nva-t-body);
  font-weight: var(--nva-w-regular);
  line-height: var(--nva-lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; }
ul[class], ol[class] { list-style: none; }

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

/*
 * Long unbroken strings must not push the page wider than the viewport.
 *
 * The body already sets overflow-x: hidden, but that CONCEALS overflow
 * rather than preventing it — content can be silently clipped off-screen
 * instead of visibly breaking, which hides defects during testing. These
 * rules stop the overflow happening in the first place.
 *
 * Order numbers, referral URLs, tracking codes and long email addresses are
 * the realistic offenders, and they appear in shared components across the
 * account, checkout and Partner areas.
 */
p, li, dd, dt, td, th, figcaption, label, address {
  overflow-wrap: break-word;
}

/* Anything genuinely unbreakable gets broken rather than escaping the page. */
code, kbd, samp, pre {
  overflow-wrap: anywhere;
}

/* Tables cannot be forced wider than their container by a single long cell. */
table { max-width: 100%; }

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

button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

a { color: inherit; text-decoration: none; }

table { border-collapse: collapse; width: 100%; }

/*
 * <mark> — a genuine gap in the reset layer.
 *
 * The HTML spec gives <mark> a yellow background by default. WooCommerce
 * neutralises it in woocommerce-general.css, which inc/woocommerce.php
 * dequeues site-wide, so the browser default showed through anywhere
 * WooCommerce emits one — the guest tracking sentence wraps the order
 * number, date and status in <mark class="order-number|order-date|
 * order-status">, which rendered as three yellow highlights.
 *
 * Reset here rather than per page, so the whole class of issue is closed
 * wherever WooCommerce uses the element.
 */
mark {
  background: transparent;
  color: inherit;
  font-weight: inherit;
}

/* --- Headings ------------------------------------------------------------ */
h1, h2, h3, h4 {
  font-family: var(--nva-font-heading);
  font-weight: var(--nva-w-semi);
  letter-spacing: var(--nva-ls-tight);
  line-height: var(--nva-lh-heading);
}

/* --- Accessibility floor ------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--nva-blue);
  outline-offset: 2px;
}

/* Mouse users don't get the ring; keyboard users always do. */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) { outline: none; }

.nva-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: var(--nva-s-3) var(--nva-s-5);
  background: var(--nva-ink);
  color: var(--nva-on-dark);
  font-size: var(--nva-t-micro);
  font-weight: var(--nva-w-semi);
  text-transform: uppercase;
  letter-spacing: var(--nva-ls-button);
}
.nva-skip-link:focus { left: var(--nva-s-4); top: var(--nva-s-4); }

.nva-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;
}

/* --- Layout primitives --------------------------------------------------- */
.nva-container {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--nva-gutter);
  max-width: var(--nva-w-content);
}
.nva-container--wide   { max-width: var(--nva-w-wide); }
.nva-container--shop   { max-width: var(--nva-w-shop); }
.nva-container--footer { max-width: var(--nva-w-footer); }
.nva-container--help   { max-width: var(--nva-w-help); }
.nva-container--prose  { max-width: var(--nva-w-prose); }

.nva-section { padding-block: var(--nva-section-y); }

/* Pages without a full-bleed hero behind the fixed header need this offset.
   Applied via body class from inc/template-tags.php, never per-page. */
.nva-has-header-offset .nva-main { padding-top: var(--nva-header-offset); }

.nva-rule {
  height: 1px;
  border: 0;
  background-color: var(--nva-line);
  width: 100%;
}
.nva-rule--short  { width: 4rem; }
.nva-rule--accent { background-color: var(--nva-blue); width: 7rem; }

/* --- Type utilities ------------------------------------------------------ */
.nva-eyebrow {
  font-family: var(--nva-font-body);
  font-size: var(--nva-t-micro);
  font-weight: var(--nva-w-semi);
  text-transform: uppercase;
  letter-spacing: var(--nva-ls-eyebrow);
  color: var(--nva-blue);
}
.nva-eyebrow--red  { color: var(--nva-red); }
.nva-eyebrow--wide { letter-spacing: var(--nva-ls-wide); }

.nva-lead {
  font-size: var(--nva-t-lead);
  line-height: var(--nva-lh-relaxed);
  color: var(--nva-ink-muted);
}

.nva-label {
  font-size: var(--nva-t-nano);
  font-weight: var(--nva-w-semi);
  text-transform: uppercase;
  letter-spacing: var(--nva-ls-label);
}

/* Prices and any numeric run — NovaSerif renders these digits in Inter. */
.nva-price {
  font-family: var(--nva-font-heading);
  font-weight: var(--nva-w-medium);
  font-variant-numeric: tabular-nums;
}

/* --- Motion -------------------------------------------------------------- */
@keyframes nva-stagger-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes nva-cart-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.18); }
}

.nva-stagger {
  opacity: 0;
  animation: nva-stagger-up var(--nva-d-reveal) var(--nva-ease) both;
}

/* Scroll reveal — driven by IntersectionObserver in reveal.js.
   Elements are visible by default so a JS failure never hides content. */
.nva-reveal { opacity: 1; }
.js .nva-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--nva-d-reveal) var(--nva-ease),
              transform var(--nva-d-reveal) var(--nva-ease);
}
.js .nva-reveal.is-visible { opacity: 1; transform: none; }

/* --- 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;
    scroll-behavior: auto !important;
  }
  .js .nva-reveal { opacity: 1; transform: none; }
}