/*
 * Nest N Thrive: element defaults and primitives.
 *
 * Loads directly after tokens.css and before chrome.css (functions.php).
 * Reads tokens only; a hard-coded colour or font size here fails
 * scripts/lint-css-values.py once it runs with --strict.
 *
 * Part 1 is the element layer that used to live in tokens.css, moved
 * verbatim (same order, same position in the cascade), so no page renders
 * differently. Phase 1.4 restyles it onto the system tokens.
 *
 * Part 2 is the primitive set from report 03 §6.2, scoped under new class
 * names (.c-*) so nothing existing picks it up. The one exception is
 * .btn-buy, which the the_content CTA filter (inc/cta-buttons.php) adds next
 * to the existing .btn; it is not used anywhere else yet.
 *
 * Every primitive renders on /styleguide/ (template-styleguide.php).
 */

@layer base {
/* The hidden attribute always wins. Component display rules (.c-btn's inline-flex)
   were overriding it, so a hidden "Show all rows" toggle showed and did nothing
   (Tyler, 11/1). Important in an early layer beats every later layer's normal rule. */
[hidden] { display: none !important; }


/* ═════════════════ Part 1: element layer (moved from tokens.css) ═════════════════ */


html {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 100%;
  line-height: var(--leading-relaxed);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  transition: background-color var(--duration-base) var(--easing-standard),
              color var(--duration-base) var(--easing-standard);
}

body {
  margin: 0;
  font-size: var(--text-base);
  color: var(--color-text);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}

h1 { font-size: var(--text-5xl); }
h2 { font-size: var(--text-4xl); }
h3 { font-size: var(--text-3xl); }
h4 { font-size: var(--text-2xl); line-height: var(--leading-snug); }
h5 { font-size: var(--text-xl);  line-height: var(--leading-snug); }
h6 { font-size: var(--text-lg);  line-height: var(--leading-snug); }

@media (max-width: 768px) {
  h1 { font-size: var(--text-4xl); }
  h2 { font-size: var(--text-3xl); }
  h3 { font-size: var(--text-2xl); }
}

p {
  margin: 0 0 var(--space-4);
  max-width: var(--max-w-prose);
  text-wrap: pretty;
}

small, .text-meta {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

/* Eyebrow: small all-caps label (retired by the report; Kicker replaces it in 1.4) */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

/* Dark hero bands (.hero-on-dark). The band is dark in BOTH themes, so the
   text stack reads cream regardless of theme. :where() keeps the selector at
   0-1-0 so the template sheets' deliberate accents still win by loading
   later; the eyebrow gets its own 0-2-0 rule. History: the 2026-08-12
   light-mode bug where titles computed rgb(26,26,26) on rgb(31,69,56). */
/* .hero-on-dark rules: unlayered tail (Part 3). */

/* Two-tier honesty badge: eyebrow variant with a leading dot. */
.review-basis {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-weight: var(--weight-semibold);
}
.review-basis::before {
  content: "";
  width: 0.45em;
  height: 0.45em;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.review-basis--tested {
  color: var(--color-brand);
}
.review-basis--researched {
  color: var(--color-text-muted);
}

/* Lead / TL;DR: italic serif (retired by the report in 1.4) */
.lead {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  color: var(--color-text);
  font-weight: var(--weight-regular);
}

a {
  color: var(--color-brand);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--duration-fast) var(--easing-standard);
}

a:hover {
  color: var(--color-brand-deep);
}

/* Focus ring, keyboard users only (:focus-visible). */
:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-sm);
}

/* No persistent outline after a mouse click on links and buttons. */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
  outline: none;
}

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

hr {
  border: 0;
  border-top: var(--border-w) solid var(--color-border);
  margin: var(--space-8) 0;
}

::selection {
  background: var(--color-accent-muted);
  color: var(--color-text);
}

/* ═════════════════ Part 2: primitives (report 03 §6.2) ═════════════════ */

/* ── Type ── */
.c-h1, .c-h2, .c-h3 {
  font-family: var(--serif);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-tight);
  letter-spacing: 0;
  color: var(--fg);
  margin: 0 0 var(--s-4);
  text-wrap: balance;
}
.c-h1 { font-size: var(--t-34); }
.c-h2 { font-size: var(--t-28); }
.c-h3 { font-size: var(--t-20); }
@media (min-width: 768px) {
  .c-h1 { font-size: var(--t-44); }
  .c-h2 { font-size: var(--t-34); }
  .c-h3 { font-size: var(--t-24); }
}

.c-body {
  font-family: var(--sans);
  font-size: var(--t-17);
  line-height: var(--lh-body);
  color: var(--fg);
  max-width: var(--measure);
}
@media (min-width: 768px) {
  .c-body { font-size: var(--t-18); }
}

.c-dek {
  font-family: var(--serif);
  font-weight: var(--weight-regular);
  font-size: var(--t-19);
  line-height: var(--lh-snug);
  color: var(--fg-2);
  margin: 0 0 var(--s-4);
  max-width: var(--measure);
}
@media (min-width: 768px) {
  .c-dek { font-size: var(--t-24); }
}

.c-kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--sans);
  font-size: var(--t-14);
  line-height: var(--lh-snug);
  color: var(--fg-2);
  margin: 0 0 var(--s-3);
}

.c-caption {
  font-family: var(--sans);
  font-size: var(--t-14);
  line-height: var(--lh-snug);
  color: var(--fg-3);
  margin: var(--s-2) 0 0;
}

.c-num {
  font-variant-numeric: tabular-nums;
}

/* ── Links ── */
.c-link,
.c-prose a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: var(--rule-w);
  text-underline-offset: 0.18em;
}
.c-link:hover,
.c-prose a:hover {
  color: var(--link-hover);
}
.c-prose a[rel~="sponsored"] {
  font-weight: var(--weight-semibold);
}

/* ── Buttons ── */
.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 48px;
  padding: var(--s-3) var(--s-5);
  border: var(--rule-w) solid transparent;
  border-radius: var(--r-control);
  font-family: var(--sans);
  font-size: var(--t-15);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-tight);
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.c-btn:focus-visible {
  outline: var(--rule-w-record) solid var(--focus);
  outline-offset: 2px;
}
.c-btn--buy {
  background: var(--color-action);
  color: var(--color-on-action);
}
.c-btn--buy:hover,
.c-btn--buy:focus-visible {
  background: var(--color-action-hover);
  color: var(--color-on-action);
}
.c-btn--quiet {
  background: transparent;
  color: var(--fg);
  border-color: var(--rule-strong);
}
.c-btn--quiet:hover {
  border-color: var(--fg-2);
  color: var(--fg);
}
.c-btn--sm {
  min-height: 40px;
  padding: var(--s-2) var(--s-4);
  font-size: var(--t-14);
}

/* .btn-buy: the body CTA from inc/cta-buttons.php. It sits on the existing
   chrome .btn, so the selector is .btn.btn-buy to outrank chrome.css (which
   loads later) without !important. Same look as .c-btn--buy. */
/* .btn.btn-buy and p.nnt-cta-p: unlayered tail (Part 3). */

/* ── Badges (rectangular, never a pill) ── */
.c-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: var(--s-1) var(--s-2);
  border-radius: var(--r-data);
  font-family: var(--sans);
  font-size: var(--t-13);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-tight);
  background: var(--paper-2);
  color: var(--ink-1);
}
.c-badge--tested {
  background: var(--green-tint);
  color: var(--green-0);
}
/* No dot, no light (WB-2026-10-31-03, Tyler 10/31): the badge is two
   plain words in the badge style, nothing lit or animated. */
.c-badge--researched {
  background: var(--paper-2);
  color: var(--ink-1);
}

/* ── Inputs ── */
.c-label {
  display: block;
  font-family: var(--sans);
  font-size: var(--t-14);
  font-weight: var(--weight-medium);
  color: var(--fg);
  margin: 0 0 var(--s-1);
}
.c-input {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: var(--s-2) var(--s-3);
  border: var(--rule-w) solid var(--rule-strong);
  border-radius: var(--r-control);
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: var(--t-17);
  box-sizing: border-box;
}
.c-input::placeholder {
  color: var(--fg-3);
}
.c-input:focus-visible {
  outline: var(--rule-w-record) solid var(--focus);
  outline-offset: 2px;
  border-color: var(--focus);
}

/* ── Rules ── */
.c-rule {
  border: 0;
  border-top: var(--rule-w) solid var(--rule);
  margin: var(--s-5) 0;
}
.c-rule--strong {
  border-top-color: var(--rule-strong);
}
.c-record {
  background: var(--bg-raised);
  border-top: var(--rule-w-record) solid var(--green-0);
  border-radius: 0;
  padding: var(--s-5);
}

/* ── Photo frame ── */
.c-photo {
  margin: 0;
}
.c-photo img {
  display: block;
  width: 100%;
  height: auto;
  border: var(--rule-w) solid var(--rule);
  border-radius: var(--r-photo);
  background: var(--paper-2);
}
.c-photo-ph {
  display: flex;
  align-items: flex-end;
  aspect-ratio: 4 / 3;
  border: var(--rule-w) solid var(--rule);
  border-radius: var(--r-photo);
  background:
    repeating-linear-gradient(45deg, var(--paper-2) 0 8px, var(--paper-1) 8px 16px);
}
.c-photo-ph > span {
  margin: var(--s-3);
  padding: var(--s-1) var(--s-2);
  background: var(--bg);
  border: var(--rule-w) solid var(--rule);
  font-family: var(--sans);
  font-size: var(--t-13);
  color: var(--fg-2);
}

} /* end @layer base */

/* ═════════════════ Part 3: unlayered on purpose (WB-2026-10-26-05 step 0c) ═════════════════
   Unlayered CSS beats every layer. These rules must keep outranking the
   legacy template sheets the way they did before base moved into
   @layer base: .btn.btn-buy beats chrome.css .btn, the hero inks beat the
   template colours, and the reduced-motion blanket keeps its !important.
   They move into @layer base when Phase 1.4 deletes the legacy sheets. */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.hero-on-dark,
.hero-on-dark :where(h1, h2, h3, h4, p, a, span, time, small, li) {
  color: var(--color-band-ink);
}
.hero-on-dark .eyebrow {
  color: var(--color-band-eyebrow);
}

.btn.btn-buy {
  min-height: 48px;
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-control);
  background: var(--color-action);
  color: var(--color-on-action);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  justify-content: center;
  text-align: center;
}
.btn.btn-buy:hover,
.btn.btn-buy:focus-visible {
  background: var(--color-action-hover);
  color: var(--color-on-action);
}
.btn.btn-buy:focus-visible {
  outline: var(--rule-w-record) solid var(--focus);
  outline-offset: 2px;
}
p.nnt-cta-p {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}