/* ============================================================
   NOVARA — TYPOGRAPHY
   css/typography.css
   Inter-driven type scale tuned for premium wellness ecommerce.
   ============================================================ */

body {
  font-family: var(--novara-font-body);
  font-size: var(--novara-fs-body);
  font-weight: var(--novara-fw-regular);
  line-height: 1.65;
  color: var(--novara-body);
  background-color: var(--novara-page-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv11', 'ss01', 'ss03';
}

/* ── Heading Size Scale (Inter, semibold-led) ── */
h1, .h1 {
  font-family: var(--novara-font-heading);
  font-weight: 700;
  font-size: var(--novara-fs-h1);
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--novara-ink);
}

h2, .h2 {
  font-family: var(--novara-font-heading);
  font-weight: 600;
  font-size: var(--novara-fs-h2);
  letter-spacing: -0.02em;
  line-height: 1.18;
  color: var(--novara-ink);
}

h3, .h3 {
  font-family: var(--novara-font-heading);
  font-weight: 600;
  font-size: var(--novara-fs-h3);
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--novara-ink);
}

h4, .h4 {
  font-family: var(--novara-font-heading);
  font-weight: 600;
  font-size: var(--novara-fs-h4);
  letter-spacing: -0.005em;
  line-height: 1.35;
  color: var(--novara-ink);
}

h5, .h5 {
  font-family: var(--novara-font-body);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.04em;
  line-height: 1.4;
  color: var(--novara-ink);
}

h6, .h6 {
  font-family: var(--novara-font-body);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--novara-deep-teal);
}

/* ── Hero Headline ── */
.nv-headline-hero,
.novara-headline-hero {
  font-family: var(--novara-font-heading);
  font-weight: 700;
  font-size: var(--novara-fs-hero);
  letter-spacing: -0.03em;
  line-height: 1.04;
  color: var(--novara-ink);
}

/* ── Section Headline ── */
.nv-headline-section,
.novara-headline-section {
  font-family: var(--novara-font-heading);
  font-weight: 600;
  font-size: var(--novara-fs-h2);
  letter-spacing: -0.02em;
  line-height: 1.18;
}

/* ── Eyebrow / Label Text ── */
.nv-eyebrow,
.novara-eyebrow {
  font-family: var(--novara-font-body);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--novara-deep-teal);
  display: inline-block;
}

/* ── Body Text Sizes ── */
.nv-body-lg,
.novara-lead {
  font-size: var(--novara-fs-body-lg);
  line-height: 1.7;
  color: var(--novara-body);
}

.nv-body-sm {
  font-size: var(--novara-fs-body-sm);
  line-height: 1.65;
}

/* ── Button Typography ── */
.btn, button.btn, a.btn {
  font-family: var(--btn-font-family);
  font-weight: var(--btn-font-weight);
  font-size: var(--btn-font-size);
  text-transform: var(--btn-transform);
  letter-spacing: 0.01em;
  line-height: 1;
}

/* ── Pull Quote ── */
.nv-pull-quote {
  font-family: var(--novara-font-heading);
  font-weight: 500;
  font-style: normal;
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.45;
  color: var(--novara-ink);
  padding: 24px 0 24px 28px;
  border-left: 3px solid var(--novara-teal);
  margin: 40px 0;
}

/* ── Stat Number ── */
.nv-stat-number,
.novara-stat-number {
  font-family: var(--novara-font-heading);
  font-weight: 700;
  font-size: clamp(40px, 4.5vw, 64px);
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--novara-deep-teal);
  background: var(--novara-gradient-cta);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.nv-stat-label,
.novara-stat-label {
  font-family: var(--novara-font-body);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--novara-muted);
  margin-top: 8px;
}

/* ── Navigation Typography ── */
.wd-nav.wd-nav-main > li > a {
  font-family: var(--novara-font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--novara-body);
  transition: color var(--novara-transition);
}

.wd-nav.wd-nav-main > li:hover > a,
.wd-nav.wd-nav-main > li.current-menu-item > a,
.wd-nav.wd-nav-main > li.current-menu-ancestor > a {
  color: var(--novara-teal);
}

/* ── Link defaults ── */
a {
  color: var(--wd-link-color);
  transition: color var(--novara-transition);
  text-decoration: none;
}

a:hover, a:focus {
  color: var(--wd-link-color-hover);
}

/* ── Paragraph max-width for readability ── */
p {
  max-width: 70ch;
}

.entry-content p,
.nv-full-width p,
.novara-full-width p {
  max-width: none;
}

strong, b {
  font-weight: 600;
  color: var(--novara-ink);
}

/* ── Responsive Typography Breakpoints ── */
@media (max-width: 768px) {
  body { font-size: 0.9375rem; }
}

/* ── Research Peptide Type Scale (legacy) ── */
.nv-h1 { font-family: var(--novara-font-heading); font-size: var(--novara-fs-h1); font-weight: 700; line-height: 1.1; letter-spacing: -0.025em; }
.nv-h2 { font-family: var(--novara-font-heading); font-size: var(--novara-fs-h2); font-weight: 600; line-height: 1.18; letter-spacing: -0.02em; }
.nv-h3 { font-family: var(--novara-font-heading); font-size: var(--novara-fs-h3); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }

.nv-body-lg { font-size: 1.125rem; line-height: 1.7; }
.nv-body-sm { font-size: 0.9375rem; line-height: 1.65; }
.nv-caption  { font-size: 0.8125rem; color: var(--novara-muted); line-height: 1.5; }

/* CAS number display — monospace badge */
.nv-cas-number {
  font-family: var(--novara-font-mono);
  font-size: 0.75rem;
  color: var(--novara-muted);
  background: var(--novara-surface-alt);
  padding: 2px 8px;
  border-radius: 6px;
  letter-spacing: 0.04em;
}

/* === RESEARCH SUPPLIER TYPOGRAPHY SYSTEM (legacy classes) === */

.nv-text-display {
  font-family: var(--novara-font-heading);
  font-size: var(--novara-fs-hero);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.03em;
}

.nv-text-h1 { font-family: var(--novara-font-heading); font-size: var(--novara-fs-h1); font-weight: 700; line-height: 1.1; letter-spacing: -0.025em; }
.nv-text-h2 { font-family: var(--novara-font-heading); font-size: var(--novara-fs-h2); font-weight: 600; line-height: 1.18; letter-spacing: -0.02em; }
.nv-text-h3 { font-family: var(--novara-font-heading); font-size: var(--novara-fs-h3); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.nv-text-h4 { font-family: var(--novara-font-heading); font-size: var(--novara-fs-h4); font-weight: 600; line-height: 1.35; }

.nv-text-xl   { font-size: 1.25rem; line-height: 1.7; }
.nv-text-lg   { font-size: 1.125rem; line-height: 1.7; }
.nv-text-base { font-size: 1rem; line-height: 1.65; }
.nv-text-sm   { font-size: 0.9375rem; line-height: 1.6; }
.nv-text-xs   { font-size: 0.8125rem; line-height: 1.5; }

.nv-text-eyebrow {
  font-family: var(--novara-font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--novara-deep-teal);
}

.nv-text-cas {
  font-family: var(--novara-font-mono);
  font-size: 0.75rem;
  color: var(--novara-muted);
  background: var(--novara-surface-alt);
  padding: 2px 8px;
  border-radius: 6px;
  letter-spacing: 0.04em;
}

.nv-text-price {
  font-family: var(--novara-font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--novara-ink);
  letter-spacing: -0.01em;
}

.nv-text-price-from {
  font-size: 0.75rem;
  color: var(--novara-muted);
  font-weight: 500;
  display: block;
  margin-bottom: 2px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nv-text-stat-number {
  font-family: var(--novara-font-heading);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--novara-deep-teal);
  line-height: 1;
  letter-spacing: -0.025em;
}

.nv-text-navy   { color: var(--novara-ink); }
.nv-text-teal   { color: var(--novara-teal); }
.nv-text-muted  { color: var(--novara-muted); }
.nv-text-white  { color: #fff; }
.nv-text-warning { color: #9A6A12; }

/* Brand gradient text utility */
.novara-text-gradient {
  background: var(--novara-gradient-cta);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}