/* ======================================================================
   NUTRITIONAL TESTING V2 — SHARED PAGE PRIMITIVES
   Cross-section utilities scoped under .nt2 so they never leak into
   other templates. Loaded by every nt2-* section.

   Everything in this file is wired to the theme's CSS variables from
   layouts/theme.liquid (settings.*):
     Colors: --clr-*
     Fonts:  --font-primary, --font-body
     Type:   --font-size-xs … --font-size-9xl
     Space:  --space-xs … --space-5xl
     Radius: --radius-sm … --radius-4xl

   Change a theme setting → every nt2 section updates. The only
   intentional exceptions are:
     - `9999px` pill shape on buttons / chips / bar track (no theme
       token can express "pill at any width")
     - Small geometric constants (bullet dot, hairline widths) that
       are design primitives, not spacing
   ====================================================================== */


/* ----------------------------------------------------------------------
   SCOPE
   ---------------------------------------------------------------------- */
.nt2 {
  /* Easing for hover transitions on buttons / chips / cards */
  --nt2-ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* Warm neutral derived from theme tokens — one notch deeper than
     --clr-neutral-light so layered cards stay legible side-by-side.
     Shifts automatically if the theme's neutral or primary hue changes. */
  --nt2-bg-warm: color-mix(in srgb, var(--clr-neutral-light) 90%, var(--clr-primary) 10%);

  /* Hairline tones derived from --clr-primary (rgb(73, 71, 62) at the
     default palette) so the rule weights track with any palette change. */
  --nt2-hairline:      color-mix(in srgb, var(--clr-primary) 18%, transparent);
  --nt2-hairline-soft: color-mix(in srgb, var(--clr-primary) 10%, transparent);

  /* Text color only. Background comes from the `bg-*` utility class
     that each section applies via its `background_color` setting —
     hardcoding a background here would override the dropdown. */
  color: var(--clr-text-primary);
}


/* ----------------------------------------------------------------------
   CONTAINER + PROSE COLUMN
   ---------------------------------------------------------------------- */
.nt2-col-prose {
  max-width: 680px;
  margin-inline: auto;
}
.nt2-text-center { text-align: center; }


/* ----------------------------------------------------------------------
   TYPOGRAPHY PRIMITIVES
   Each heading uses a clamp() with theme font-size tokens as floor/
   ceiling — preserving fluid responsive scaling while staying 100%
   connected to theme settings.
   ---------------------------------------------------------------------- */
.nt2-h1,
.nt2-h2,
.nt2-h3 {
  font-family: var(--font-primary);
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: var(--clr-text-primary);
  font-weight: 400;
  margin: 0;
  text-wrap: balance;
}
/* Type ramp aligned with the home page reference:
   home-hero-cta is 5xl (48px) mobile → 6xl (60px) desktop.
   - .nt2-h1 (page hero, one instance) matches that range so the
     nutritional-testing hero reads at the same scale as home.
   - .nt2-h2 (section headings, many) sits a clear step BELOW the
     hero — 3xl (30) → 5xl (48) — same as home's typical section
     headings. This restores hierarchy: hero is visibly larger than
     section heads, section heads larger than sub-heads.
   - .nt2-h3 (sub-heads) unchanged. */
.nt2-h1 {
  font-size: clamp(var(--font-size-5xl), 5vw, var(--font-size-6xl));
  letter-spacing: -0.032em;
}
.nt2-h2 {
  font-size: clamp(var(--font-size-3xl), 4vw, var(--font-size-5xl));
}
.nt2-h3 {
  font-size: clamp(var(--font-size-xl), 2vw, var(--font-size-2xl));
  letter-spacing: -0.015em;
  line-height: 1.2;
}

/* Headlines are one voice: no nested italic/bold inside titles */
.nt2 h1 em, .nt2 h1 i, .nt2 h2 em, .nt2 h2 i, .nt2 h3 em, .nt2 h3 i,
.nt2 h1 strong, .nt2 h1 b, .nt2 h2 strong, .nt2 h2 b, .nt2 h3 strong, .nt2 h3 b {
  font-style: normal;
  font-weight: inherit;
  font-family: inherit;
}

.nt2-lede {
  font-family: var(--font-body);
  font-size: clamp(var(--font-size-lg), 1.5vw, var(--font-size-xl));
  line-height: 1.5;
  color: var(--clr-text-secondary);
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

.nt2-body-copy {
  font-size: var(--font-size-lg);
  line-height: 1.7;
  color: var(--clr-text-secondary);
  text-wrap: pretty;
}
.nt2-body-copy > p { margin: 0; }
.nt2-body-copy > p + p { margin-top: var(--space-md); }


/* ----------------------------------------------------------------------
   DROP STATEMENTS
   Centered pull-quote moment (coral rule). One style per block.
   Three variants: default (coral rule, centered), --inline (left aligned
   within a copy column), --pullquote (sibling of a split column, with a
   vertical coral rule on the left edge).
   ---------------------------------------------------------------------- */
.nt2-drop {
  text-align: center;
  padding-block: var(--space-4xl);
  max-width: 960px;
  margin-inline: auto;
}
@media (min-width: 1024px) {
  .nt2-drop { padding-block: var(--space-5xl); }
}

.nt2-drop::before {
  content: "";
  display: block;
  width: var(--space-2xl);
  height: 1px;
  background: var(--clr-tertiary);
  margin: 0 auto var(--space-xl);
}

.nt2-drop p {
  margin: 0;
  font-family: var(--font-primary);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(var(--font-size-4xl), 4.8vw, var(--font-size-6xl));
  line-height: 1.18;
  letter-spacing: -0.005em;
  color: var(--clr-text-primary);
  text-wrap: balance;
}

.nt2-drop--inline {
  text-align: left;
  max-width: none;
  margin-inline: 0;
  padding-block: var(--space-xl) var(--space-md);
}
@media (min-width: 1024px) {
  .nt2-drop--inline { padding-block: var(--space-2xl) var(--space-lg); }
}
.nt2-drop--inline::before { display: none; }
.nt2-drop--inline p {
  font-size: clamp(var(--font-size-2xl), 3vw, var(--font-size-4xl));
  line-height: 1.2;
}

.nt2-drop--pullquote {
  text-align: left;
  max-width: none;
  margin-inline: 0;
  padding: var(--space-sm) 0 var(--space-sm) var(--space-xl);
  border-left: 3px solid var(--clr-tertiary);
}
.nt2-drop--pullquote::before { display: none; }
.nt2-drop--pullquote p {
  font-size: clamp(var(--font-size-3xl), 3.4vw, var(--font-size-5xl));
  line-height: 1.2;
}


/* ----------------------------------------------------------------------
   SPLIT LAYOUT
   Two-column grid used by hero, truth, credibility, roadmap.
   ---------------------------------------------------------------------- */
.nt2-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  align-items: center;
}
@media (min-width: 1024px) {
  .nt2-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-5xl);
  }
}

.nt2-split__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Copy-first variant leans a little heavier on the text column. Used by
   the roadmap section where the copy is the focal point. */
.nt2-split--copy-first { align-items: start; }
@media (min-width: 1024px) {
  .nt2-split--copy-first {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--space-5xl);
  }
}


/* ----------------------------------------------------------------------
   SECTION CARD
   Large rounded container that floats inside a section. Three flavors:
   default (cream), --warm (deeper cream), --dark (near-black authority).
   ---------------------------------------------------------------------- */
.nt2-section-card {
  background: var(--clr-bg-card-secondary);
  border-radius: var(--radius-2xl);
  padding: var(--space-3xl) var(--space-xl);
}
@media (min-width: 1024px) {
  .nt2-section-card {
    border-radius: var(--radius-3xl);
    padding: var(--space-4xl) var(--space-3xl);
  }
}

.nt2-section-card--warm { background: var(--nt2-bg-warm); }

.nt2-section-card--dark {
  background: var(--clr-bg-accent-dark);
  color: var(--clr-white);
}
.nt2-section-card--dark .nt2-h1,
.nt2-section-card--dark .nt2-h2,
.nt2-section-card--dark .nt2-h3 { color: var(--clr-white); }

.nt2-section-card--dark .nt2-body-copy,
.nt2-section-card--dark .nt2-lede { color: color-mix(in srgb, var(--clr-white) 82%, transparent); }


/* ----------------------------------------------------------------------
   PLACEHOLDER FRAME
   User-supplied imagery goes here. Until then we render an editorial
   dashed frame with a caption describing what belongs in that slot —
   so the page still feels intentional while imagery is pending.
   ---------------------------------------------------------------------- */
.nt2-placeholder {
  position: relative;
  width: 100%;
  background:
    repeating-linear-gradient(
      135deg,
      var(--clr-bg-card-secondary) 0,
      var(--clr-bg-card-secondary) 12px,
      var(--nt2-bg-warm) 12px,
      var(--nt2-bg-warm) 24px
    );
  border: 1px dashed color-mix(in srgb, var(--clr-primary) 32%, transparent);
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl);
  color: var(--clr-text-muted);
}
.nt2-placeholder::before {
  content: "";
  position: absolute;
  inset: var(--space-md);
  border: 1px dashed color-mix(in srgb, var(--clr-primary) 18%, transparent);
  border-radius: calc(var(--radius-xl) - 6px);
  pointer-events: none;
}
.nt2-placeholder::after {
  content: "";
  position: absolute;
  top: var(--space-md);
  left: var(--space-md);
  width: var(--space-xl);
  height: 1px;
  background: color-mix(in srgb, var(--clr-primary) 42%, transparent);
}
.nt2-placeholder__caption {
  position: relative;
  z-index: 1;
  max-width: 440px;
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--font-size-sm);
  line-height: 1.6;
  color: var(--clr-text-muted);
  text-align: center;
  letter-spacing: -0.01em;
}
.nt2-placeholder__caption::before {
  content: "Image placeholder";
  display: block;
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 500;
  font-size: var(--font-size-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--clr-tertiary);
  margin-bottom: var(--space-sm);
}

.nt2-placeholder--16x9 { aspect-ratio: 16 / 9; }
.nt2-placeholder--4x3  { aspect-ratio: 4 / 3; }
.nt2-placeholder--3x4  { aspect-ratio: 3 / 4; }
.nt2-placeholder--1x1  { aspect-ratio: 1 / 1; }

/* When a placeholder sits inside a dark card it needs a dark-friendly
   dashed pattern and lighter caption hue. */
.nt2-section-card--dark .nt2-placeholder {
  background:
    repeating-linear-gradient(
      135deg,
      color-mix(in srgb, var(--clr-white) 2%, transparent) 0,
      color-mix(in srgb, var(--clr-white) 2%, transparent) 12px,
      color-mix(in srgb, var(--clr-white) 5%, transparent) 12px,
      color-mix(in srgb, var(--clr-white) 5%, transparent) 24px
    );
  border-color: color-mix(in srgb, var(--clr-white) 28%, transparent);
}
.nt2-section-card--dark .nt2-placeholder::before { border-color: color-mix(in srgb, var(--clr-white) 14%, transparent); }
.nt2-section-card--dark .nt2-placeholder::after  { background: color-mix(in srgb, var(--clr-white) 42%, transparent); }
.nt2-section-card--dark .nt2-placeholder__caption { color: color-mix(in srgb, var(--clr-white) 70%, transparent); }


/* ----------------------------------------------------------------------
   RESPONSIVE IMAGE INSIDE A PLACEHOLDER / MEDIA SLOT
   Sections render <img> with this class when the author has supplied
   imagery. Falls back to .nt2-placeholder otherwise.
   ---------------------------------------------------------------------- */
.nt2-media-frame {
  width: 100%;
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: block;
}
.nt2-media-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.nt2-media-frame--3x4 { aspect-ratio: 3 / 4; }
.nt2-media-frame--4x3 { aspect-ratio: 4 / 3; }


/* ----------------------------------------------------------------------
   BUTTONS
   This page uses a tight button language: a filled primary and an
   outlined secondary. Buttons use pill shape (9999px) — this is a
   geometric intent, not a theme token.
   ---------------------------------------------------------------------- */
.nt2-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--font-size-base);
  line-height: 1.25;
  letter-spacing: 0;
  text-align: center;
  padding: var(--space-md) var(--space-xl);
  min-height: 52px;
  border: 2px solid transparent;
  border-radius: 9999px; /* pill shape, intentional */
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition:
    transform 0.3s var(--nt2-ease-out),
    box-shadow 0.3s var(--nt2-ease-out),
    background-color 0.2s ease,
    color 0.2s ease;
}
.nt2-btn:hover  { transform: translateY(-2px); }
.nt2-btn:active { transform: translateY(0); }
.nt2-btn:focus-visible {
  outline: 2px solid var(--clr-text-primary);
  outline-offset: var(--space-xs);
}

.nt2-btn--primary {
  background: var(--clr-bg-accent-dark);
  color: var(--clr-white);
  border-color: var(--clr-bg-accent-dark);
}
.nt2-btn--primary:hover {
  box-shadow: 0 10px 24px color-mix(in srgb, var(--clr-bg-accent-dark) 22%, transparent);
}

.nt2-btn--secondary {
  background: transparent;
  color: var(--clr-bg-accent-dark);
  border-color: var(--clr-bg-accent-dark);
  padding: var(--space-md) var(--space-lg);
  min-height: 48px;
}
.nt2-btn--secondary:hover {
  background: var(--clr-bg-accent-dark);
  color: var(--clr-white);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--clr-bg-accent-dark) 16%, transparent);
}

/* When a secondary button lives inside a dark card, invert it so the
   button reads correctly against the near-black background. */
.nt2-section-card--dark .nt2-btn--secondary {
  color: var(--clr-white);
  border-color: var(--clr-white);
}
.nt2-section-card--dark .nt2-btn--secondary:hover {
  background: var(--clr-white);
  color: var(--clr-bg-accent-dark);
}


/* ----------------------------------------------------------------------
   BULLET LIST
   Used by the approach-card section. Left-aligned even though the
   surrounding block is centered — bullet alignment reads better that
   way in editorial layouts.
   ---------------------------------------------------------------------- */
.nt2-bullet-list {
  margin: var(--space-2xl) 0 0;
  padding: 0;
  list-style: none;
  display: inline-flex;
  flex-direction: column;
  gap: var(--space-md);
  text-align: left;
  align-items: flex-start;
}
.nt2-bullet-list li {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  font-family: var(--font-primary);
  font-size: clamp(var(--font-size-xl), 1.8vw, var(--font-size-2xl));
  line-height: 1.2;
  color: var(--clr-text-primary);
  letter-spacing: -0.015em;
}
.nt2-bullet-list li::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--clr-tertiary);
  display: inline-block;
  flex-shrink: 0;
}


/* ----------------------------------------------------------------------
   SECTION SHELL
   Every nt2 section uses .nt2-section as its outer element. Spacing and
   colors come from inline CSS vars emitted by the Liquid template so
   authors can tune them from the page editor.
   ---------------------------------------------------------------------- */
.nt2-section {
  padding-top:    var(--nt2-section-pt, var(--space-3xl));
  padding-bottom: var(--nt2-section-pb, var(--space-3xl));
  background-color: var(--nt2-section-bg, transparent);
  border-radius:    var(--nt2-section-radius, 0);
}

/* Dropping bottom-padding to zero when the section ends with a drop
   statement keeps the inter-section rhythm even. */
.nt2-section--drop-trail { padding-bottom: 0; }


/* ----------------------------------------------------------------------
   REDUCED MOTION
   A final safety net — sections that opt into animation should already
   bail out in JS when prefers-reduced-motion is set, but this clamps
   anything that slips through to an instant state.
   ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .nt2 *,
  .nt2 *::before,
  .nt2 *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}