/*
Theme Name: Neat Pixel
Theme URI: https://staging.neatpixel.agency
Author: Neat Pixel Agency
Author URI: https://neatpixel.agency
Description: Custom classic WordPress theme for Neat Pixel Agency. No page builder dependency.
Version: 0.2.0
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: neatpixel
*/

/* -----------------------------------------------------------------------
   Design tokens
   - Colors/spacing below "old design" are the superseded (pre-Figma-2)
     homepage's tokens, kept only because still-unused-this-milestone
     template-parts (bio/services/projects/experience/contact) reference
     them; do not build new work against that block.
   - Tokens under "new design" are the current Figma's system (confirmed
     via Figma variables: Manrope family, 1216px content / 112px outer
     margin at the 1440px desktop reference).
   ----------------------------------------------------------------------- */
:root {
	/* --- Old design (superseded; retained for now-unused template-parts) --- */
	--color-near-black: #181818;
	--color-border: #262626;
	--color-border-soft: #333333;
	--color-light-gray: #f0f0f0;
	--color-accent: #97dce5;
	--color-amber: #efa233;
	--color-amber-ticker-outer: #f5d800;
	--color-amber-ticker-inner: #ffc300;
	--color-text-primary: #212428;
	--color-text-secondary: #54595f;
	--color-text-muted: #71727c;
	--color-text-faint: #b4bbc4;
	--color-text-service: #afb9c9;

	/* --- New design --- */
	--color-black: #000000;
	--color-white: #ffffff;
	--color-gray-700: #444444;
	--color-white-a20: rgb(255 255 255 / 20%);
	--color-white-a10: rgb(255 255 255 / 10%);

	/* The site's one brand accent (#ff6600) -- was hardcoded as either
	   #ff6600 or rgb(255, 102, 0) in 6 different places across Workflow,
	   Engagement, and the single Case Study template before being
	   tokenized here. -a18 is a pre-baked alpha variant (same pattern as
	   --color-white-a20/-a10 above) for the one spot that needed it
	   (Engagement's card hover glow), not a general-purpose alpha
	   mechanism. Deliberately NOT touched: the same #ff6600 also appears
	   inside several inline SVG data-URI gradients (Workflow's
	   illustration glow, the CTA background/orb) -- those are opaque,
	   self-contained resources embedded as literal text in a url(), so
	   they can't reference page-level CSS custom properties at all; that's
	   a real CSS/SVG limitation, not an oversight. */
	--color-orange: #ff6600;
	--color-orange-a18: rgb(255 102 0 / 18%);

	--font-heading: "Manrope", sans-serif;
	--font-body: "Manrope", sans-serif;

	/* Spacing scale */
	--space-xs: 5px;
	--space-sm: 12px;
	--space-md: 16px;
	--space-lg: 20px;
	--space-xl: 32px;

	/* Layout: 1216px content width + 112px outer margin at the 1440px
	   desktop reference frame (112 + 1216 + 112 = 1440). */
	--container-max: 1200px;
	--container-content: 1216px;
	--container-outer: 112px;
}

/* Breakpoints (plain CSS, no preprocessor):
   mobile <= 767px, tablet 768-1024px, desktop >= 1025px */

/* Text selection highlight, site-wide: brand orange instead of the
   browser's default blue, black text for contrast against it. Two
   separate rules (not a combined selector) because Firefox only
   recognizes ::-moz-selection -- combining them in one selector list
   would invalidate the whole rule in Firefox. */
::selection {
	background: var(--color-orange);
	color: var(--color-black);
}

::-moz-selection {
	background: var(--color-orange);
	color: var(--color-black);
}

/* -----------------------------------------------------------------------
   Foundation: container + reveal-heading utility (new design). Shared by
   every new-homepage section, not just Hero/Header.
   ----------------------------------------------------------------------- */
section {
    border-bottom: 1px solid var(--color-border-soft);
}

.container {
	width: 100%;
	max-width: calc(var(--container-content) + (var(--container-outer) * 2));
	margin-inline: auto;
	padding-inline: 24px;
}

@media (min-width: 1025px) {
	.container {
		padding-inline: var(--container-outer);
	}
}

/* Section Wrapper > Section > Content: the recurring Figma Auto Layout
   structure behind every new-homepage section (Hero, Intro, and onward).
   Section Wrapper is the full-width band (32px side padding, 16px at
   <=320px per the Figma spec); Section caps at the 1200px content grid and
   carries the grid's right border; each Content column carries the grid's
   left border, so two Content children naturally produce the 3-line grid
   (left/center/right) with no separate decorative overlay element. Layout
   direction/alignment inside Content is left to each section's own
   modifier classes — this foundation only owns the grid geometry. */
.section-wrapper {
	width: 100%;
	padding-inline: 32px;
}

@media (max-width: 320px) {
	.section-wrapper {
		padding-inline: 16px;
	}
}

.section {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	display: flex;
	align-self: stretch;
	border-right: 1px solid var(--color-border-soft);
}

.section__content {
	flex: 1 1 0;
	min-width: 0;
	border-left: 1px solid var(--color-border-soft);
	padding-inline: 16px;
}

/* Hidden until JS wraps it into .reveal-word spans and adds the
   .reveal-heading class (which restores opacity — see below): the
   server-rendered heading has no per-word blur/opacity treatment yet, so
   without this it briefly paints as plain, fully sharp text, then gets
   wiped and rebuilt as blurred/invisible — a flash that read as the
   heading "just appearing" and made the actual blur transition below
   easy to miss entirely. */
[data-reveal-heading] {
	opacity: 0;
}

.reveal-heading {
	opacity: 1;
}

.reveal-word {
	display: inline-block;
	filter: blur(8px);
	opacity: 0;
	transform: translateY(0.2em);
	transition: filter 0.6s ease, opacity 0.6s ease, transform 0.6s ease;
	transition-delay: calc(var(--word-index, 0) * 70ms);
	/* No `will-change` here: it forces this element onto its own
	   compositing layer. Note that the active `filter` transition above
	   does this implicitly anyway (a browser optimization, independent of
	   will-change) — so any ancestor's background-clip:text gradient still
	   can't composite through into this element's isolated layer. That's
	   why the gradient-clip is declared directly on .reveal-word itself
	   (see .hero__headline-part--a/--b in layout.css), not only on the
	   ancestor: without it, the word rendered fully transparent and
	   stayed stuck that way until something forced a repaint. */
}

.reveal-heading.is-revealed .reveal-word {
	filter: blur(0);
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.reveal-word {
		transition: none;
		filter: none;
		opacity: 1;
		transform: none;
	}
}

/* -----------------------------------------------------------------------
   Minimal reset
   ----------------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.5;
	color: var(--color-text-primary);
	background: var(--color-black);
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-heading);
	margin: 0 0 var(--space-md);
	line-height: 1.2;
}

/* Typography scale (exact values from the Figma reference; clamp() keeps
   these responsive without extra breakpoints or JS). Hero's own heading
   style lives in layout.css next to the rest of .hero. */
.section-eyebrow {
	font-weight: 300;
	font-size: clamp(22px, 2.5vw, 32px);
	line-height: 1.5;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

p {
	margin: 0 0 var(--space-md);
}

ul,
ol {
	margin: 0;
	padding: 0;
}

button,
input,
textarea,
select {
	font-family: inherit;
	font-size: inherit;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.skip-link.screen-reader-text:focus {
	position: fixed;
	top: var(--space-sm);
	left: var(--space-sm);
	width: auto;
	height: auto;
	clip: auto;
	z-index: 1000;
	background: var(--color-white);
	color: var(--color-black);
	padding: var(--space-sm) var(--space-md);
}