/* =========================================================================
   theme.css - base, tokens, buttons, utilities, motion, lessons-baked-in
   References theme.json presets via short aliases.
   ========================================================================= */

:root {
  --brand-dark: var(--wp--preset--color--brand-dark);
  --brand: var(--wp--preset--color--brand);
  --brand-light: var(--wp--preset--color--brand-light);
  --accent: var(--wp--preset--color--accent);
  --accent-light: var(--wp--preset--color--accent-light);
  --ink: var(--wp--preset--color--ink);
  --grey: var(--wp--preset--color--grey);
  --line: var(--wp--preset--color--line);
  --off: var(--wp--preset--color--off-white);
  --white: var(--wp--preset--color--white);
  --r: var(--wp--custom--radius--md);
  --shadow-card: var(--wp--custom--shadow--card);
  --shadow-lift: var(--wp--custom--shadow--lift);
  --t-fast: var(--wp--custom--transition--fast);
  --t-base: var(--wp--custom--transition--base);
  --ls-label: var(--wp--custom--letter-spacing--label);
  --ls-btn: var(--wp--custom--letter-spacing--button);
  --head: var(--wp--preset--font-family--heading);
  --body: var(--wp--preset--font-family--body);
}

/* LESSON: overflow-x: clip (NOT hidden) - 'hidden' silently kills position:sticky */
html { overflow-x: clip; }
body { overflow-x: clip; margin: 0; color: var(--ink); font-family: var(--body); line-height: 1.7; }
*, *::before, *::after { box-sizing: border-box; }
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--brand-light); }

/* Global polish */
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-tap-highlight-color: transparent; overflow-wrap: break-word; }
::selection { background: var(--accent); color: var(--brand-dark); }
h1, h2, .section-title, .hero-headline, .honesty__title, .cta-title { text-wrap: balance; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Layout containers */
.container { max-width: 1200px; margin-inline: auto; padding-inline: clamp(20px, 5vw, 56px); }
.container.narrow, .narrow { max-width: 820px; }

/* Section rhythm */
.section { padding-block: clamp(56px, 8vw, 110px); }
.section-white { background: var(--white); }
.section-off { background: var(--off); }
.section-dark { background: var(--brand-dark); color: var(--white); }

/* Eyebrow + headings */
.eyebrow { font-family: var(--head); font-size: 12px; font-weight: 700; letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--accent); margin: 0 0 14px; display: flex; align-items: center; gap: 12px; }
.eyebrow.center { justify-content: center; }
.eyebrow-line { width: 28px; height: 2px; background: var(--accent); display: inline-block; }
.section-title { font-family: var(--head); font-weight: 800; line-height: 1.12;
  font-size: clamp(1.8rem, 4vw, 2.8rem); color: var(--brand-dark); margin: 0 0 18px; }
.section-title.on-dark { color: var(--white); }
.section-title.center { text-align: center; }
.section-sub, .section-body { font-size: var(--wp--preset--font-size--md); color: var(--grey); line-height: 1.75; }
.section-sub.center { text-align: center; max-width: 680px; margin-inline: auto; }
.section-dark .section-sub, .section-dark .section-body { color: rgba(255,255,255,0.7); }

/* Buttons (one spec, reused) */
.btn, .wp-block-button__link { font-family: var(--head); font-size: 12.5px; font-weight: 800;
  letter-spacing: var(--ls-btn); text-transform: uppercase; text-decoration: none; border-radius: var(--r);
  padding: 16px 34px; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; border: 0;
  transition: background var(--t-base), color var(--t-base), transform var(--t-base); }
.btn-primary { background: var(--accent); color: var(--brand-dark); }
.btn-primary:hover { background: var(--accent-light); }
.btn-secondary { background: transparent; color: var(--white); border: 1.5px solid rgba(255,255,255,0.4); }
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); }

/* Check list */
.check-list { list-style: none; margin: 22px 0; padding: 0; display: grid; gap: 12px; }
.check-list li { position: relative; padding-left: 28px; } /* absolute check so inline links flow normally */
.check-list .check { position: absolute; left: 0; top: 0; color: var(--accent); font-weight: 800; }

/* Card grids + image uniformity (LESSON: aspect-ratio on the CONTAINER) */
.card-grid > li, .card-grid .wp-block-post-template > li { list-style: none; }
.card-img, .card-grid .wp-block-post-featured-image {
  display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--r);
  margin: 0 0 16px; background: var(--line);
}
.card-img a, .card-img img, .card-grid .wp-block-post-featured-image a, .card-grid .wp-block-post-featured-image img {
  width: 100%; height: 100%; display: block; object-fit: cover;
}

/* Motion: reveal (works with plain JS IntersectionObserver in site.js; GSAP optional) */
.reveal, .reveal-left, .reveal-right { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--t-base), transform .7s var(--t-base); }
.reveal-left { transform: translateX(-28px); }
.reveal-right { transform: translateX(28px); }
.reveal.in, .reveal-left.in, .reveal-right.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .05s; } .reveal.d2 { transition-delay: .15s; }
.reveal.d3 { transition-delay: .25s; } .reveal.d4 { transition-delay: .35s; }
/* FAILSAFE: if JS never runs, show everything (no stuck-invisible content) */
.no-js .reveal, .no-js .reveal-left, .no-js .reveal-right { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left, .reveal-right { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* Accessibility utilities */
.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; }
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--brand-dark); color: #fff; padding: 10px 16px; z-index: 100001; }
.skip-link:focus { left: 8px; top: 8px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }