/* ==========================================================================
   NRTR website kit — shared page CSS.
   One canonical set of chrome + responsive rules for every page. Link this
   AFTER styles.css. Page-specific extras (if any) go in the page's own <style>.
   ========================================================================== */

html { scroll-behavior: smooth; }
body { margin: 0; background: var(--surface-page); }

/* --- Nav: desktop links vs. mobile burger ------------------------------- */
.nrtr-nav-burger { display: none; }

/* --- Responsive collapse ------------------------------------------------
   Every two-column site layout collapses to one column below the nav
   breakpoint. Listed once, here, so pages can't drift out of sync. */
@media (max-width: 980px) {
  .nrtr-nav-links { display: none !important; }
  .nrtr-nav-burger { display: flex !important; }
  .nrtr-suite-grid,
  .nrtr-footer-grid,
  .nrtr-two,
  .nrtr-svc-grid,
  .nrtr-bio-grid,
  .nrtr-sci-two { grid-template-columns: 1fr !important; }
  /* image-first rows: reset source order so text leads on mobile */
  .nrtr-svc-grid > div,
  .nrtr-bio-grid > div { order: 0 !important; }
  /* sticky group headings (FAQ) release into normal flow */
  .nrtr-two h2 { position: static !important; }
}

@media (max-width: 560px) {
  .nrtr-nav-cta { display: none; }
  /* hero CTA pair stacks full-width */
  .nrtr-hero-cta { flex-direction: column; align-items: stretch; }
  .nrtr-hero-cta > a,
  .nrtr-hero-cta a[role="button"],
  .nrtr-hero-cta button { width: 100%; }
}

/* homepage pillars: 3-up above 900px, single column below (no 2+1 orphan) */
@media (max-width: 900px) { .nrtr-pillars { grid-template-columns: 1fr !important; } }

/* membership "every membership" grid: 3-over-3, collapsing to 2 then 1 */
@media (max-width: 860px) { .nrtr-inc-grid { grid-template-columns: 1fr 1fr !important; } }
@media (max-width: 520px) { .nrtr-inc-grid { grid-template-columns: 1fr !important; } }

/* clinical-tool names never break mid-word */
.nrtr-tool-name { white-space: nowrap; }

/* --- Shared hover / focus feedback (consolidated from per-page styles) --- */
.nrtr-study-card { transition: border-color 200ms var(--ease-standard), box-shadow 200ms var(--ease-standard), transform 200ms var(--ease-standard); }
.nrtr-study-card:hover,
.nrtr-study-card:focus-visible { border-color: var(--terracotta) !important; box-shadow: var(--shadow-md) !important; transform: translateY(-3px); }
.nrtr-study-card:hover .nrtr-study-arrow,
.nrtr-study-card:focus-visible .nrtr-study-arrow { transform: translateX(3px); }

/* research / study text links share one underline-grow gesture */
.nrtr-studylink { transition: color 140ms var(--ease-standard); }
.nrtr-studylink:hover span[data-underline],
.nrtr-studylink:focus-visible span[data-underline] { border-bottom-color: var(--terracotta) !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .nrtr-study-card:hover,
  .nrtr-study-card:focus-visible { transform: none !important; }
}

/* --- Focus ring on dark surfaces ---------------------------------------
   The global terracotta :focus-visible outline is only ~3:1 on espresso/ember.
   Any element whose inline style references a dark-surface token switches its
   focused descendants to a camel outline (well clear of AA on dark). */
[style*="var(--espresso)"] :focus-visible,
[style*="var(--ember)"] :focus-visible,
[style*="var(--surface-dark)"] :focus-visible,
[style*="var(--nav-fill-dark"] :focus-visible {
  outline-color: var(--camel);
}
/* ...but a LIGHT card nested inside a dark section (e.g. the contact form on
   its espresso band) restores the accent outline — camel on linen is < 3:1. */
[style*="var(--espresso)"] [style*="var(--surface-raised)"] :focus-visible,
[style*="var(--ember)"] [style*="var(--surface-raised)"] :focus-visible,
[style*="var(--surface-dark)"] [style*="var(--surface-raised)"] :focus-visible {
  outline-color: var(--accent);
}