/**
 * Theme Name:  Nathan Johnson Mastering
 * Theme URI:   https://nathanjohnsonmastering.com/
 * Description: Custom block (FSE) theme — faithful reproduction of the legacy Sonaar/Elementor site. Tokens (Montserrat type ramp, pure-black on white, mint accent) extracted from the live site computed styles, not eyeballed. PHP 8.3+, WordPress 6.5+.
 * Author:      Macadamia
 * Author URI:  https://macadamia.mx/
 * Version:     1.2.0
 * Requires at least: 6.5
 * Requires PHP: 8.1
 * Text Domain: njm
 */

/* Foundation only — visual design is driven by theme.json tokens.
   Self-hosted Montserrat variable woff2 in /assets/fonts/.
   Ground-truth values extracted from https://nathanjohnsonmastering.com/ live computed styles. */

:root { color-scheme: dark; }

/* Override WP's auto-generated font-size CSS vars.
   WP's theme.json merge drops fontSizes that match core slugs (small/medium/large/x-large)
   and falls back to core defaults — see https://core.trac.wordpress.org/ticket/57847.
   Set the ground-truth values extracted from the live site here so they take effect
   regardless of how theme.json gets merged. */
:root {
  --wp--preset--font-size--small:   14px !important;
  --wp--preset--font-size--medium:  14px !important;
  --wp--preset--font-size--large:   18px !important;
  --wp--preset--font-size--x-large: 30px !important;
  --wp--preset--font-size--xx-large: 36px !important;
  --wp--preset--font-size--hero:    34px !important;
}

html { scroll-behavior: smooth; }

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background: #000000;
  font-size: 14px;
  line-height: 28px;
}

/* Custom social-link items (e.g. Airgigs) — match Facebook/SoundBetter sizing
   inside the wp-block-social-links flex row. */
.wp-block-social-links li.njm-social-link a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.625em;
  height: 1.625em;
  color: var(--wp--preset--color--muted);
  border-radius: 50%;
  text-decoration: none;
  transition: color 0.16s ease;
}
.wp-block-social-links li.njm-social-link a:hover {
  color: var(--wp--preset--color--accent);
}
.wp-block-social-links li.njm-social-link svg {
  width: 1.05em;
  height: 1.05em;
}

/* Heading line-heights — match live site computed values */
h1 { font-size: 34px; line-height: 42px; font-weight: 400; text-transform: none; }
h2 { font-size: 36px; line-height: 36px; font-weight: 700; text-transform: uppercase; }
h3 { font-size: 30px; line-height: 30px; font-weight: 700; }
h4 { font-size: 18px; line-height: 24px; font-weight: 500; }

/* "Spec" eyebrow / label utility — Montserrat 700 uppercase mint
   (used for small section labels; kept compatible with existing patterns) */
.njm-spec {
  font-family: var(--wp--preset--font-family--body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.75rem;
  color: var(--wp--preset--color--accent);
}

/* Hairline divider between sections */
.njm-rule { border: 0; border-top: 1px solid var(--wp--preset--color--line); margin: 0; }

/* Anchor offset so the sticky header doesn't cover section tops */
:target { scroll-margin-top: 6rem; }

/* ---------------------------------------------------------------------------
   Motion (gated behind html.js-anim — see functions.php / assets/js/reveal.js)
   --------------------------------------------------------------------------- */
:root {
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Hero cascade — runs on load (above the fold). */
@keyframes njmFadeUp {
	from { opacity: 0; transform: translateY(26px); }
	to   { opacity: 1; transform: translateY(0); }
}
.js-anim #home .wp-block-group > * {
	opacity: 0;
	animation: njmFadeUp 0.7s var(--ease-out) both;
}
.js-anim #home .wp-block-group > *:nth-child(1) { animation-delay: 0.10s; }
.js-anim #home .wp-block-group > *:nth-child(2) { animation-delay: 0.20s; }
.js-anim #home .wp-block-group > *:nth-child(3) { animation-delay: 0.32s; }
.js-anim #home .wp-block-group > *:nth-child(4) { animation-delay: 0.46s; }

/* Scroll reveals — children tagged by reveal.js, staggered via inline delay. */
.js-anim .njm-reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
	will-change: opacity, transform;
}
.js-anim .njm-reveal.is-visible {
	opacity: 1;
	transform: none;
	will-change: auto;
}

/* Refined hover lift on the pricing cards + quotes (composited only). */
.js-anim .wp-block-column,
.js-anim .wp-block-quote {
	transition: transform 0.25s var(--ease-out);
}
.js-anim #pricing .wp-block-column:hover { transform: translateY(-4px); }

/* Scroll-progress hairline — CSS scroll-driven, mint accent. */
.njm-progress {
	position: fixed; inset: 0 0 auto 0;
	height: 2px;
	background: var(--wp--preset--color--accent);
	transform: scaleX(0);
	transform-origin: 0 50%;
	z-index: 200;
	pointer-events: none;
}
@supports (animation-timeline: scroll()) {
	.njm-progress {
		animation: njmProgress auto linear;
		animation-timeline: scroll(root block);
	}
	@keyframes njmProgress { to { transform: scaleX(1); } }
}

@media (prefers-reduced-motion: reduce) {
	.js-anim #home .wp-block-group > *,
	.js-anim .njm-reveal { opacity: 1 !important; transform: none !important; animation: none !important; }
	.njm-progress { display: none; }
}