/*
Theme Name: Redwood
Theme URI: https://example.com
Author: Redwood
Author URI: https://example.com
Description: A bold black-and-red, type-forward display theme for the Redwood cannabis genetics catalogue. Oversized Clash Display wordmarks, a duotone-treated photographic hero, scrolling marquee bands and a full-bleed closing wordmark banner. Data (the Seed post type, its fields, the age gate and the contact form) is owned by the Redwood Core plugin, not this theme. No e-commerce, no cart, no payments.
Version: 2.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: redwood
*/

/* ==========================================================================
   1. DESIGN TOKENS
   Values measured directly off the art-direction reference and adapted.
   Everything visual resolves from here.
   ========================================================================== */
:root {
	/* --- Palette ------------------------------------------------------- */
	--color-bg: #0d0d0d;              /* page ground */
	--color-bg-alt: #141414;          /* alternating band */
	--color-surface: #1a1a1a;         /* cards, panels */
	--color-hairline: rgba(255, 255, 255, 0.12);
	--color-line: rgba(255, 255, 255, 0.40);

	--color-ink: #ffffff;
	--color-ink-muted: #8a8a8a;       /* 5.3:1 on --color-bg */
	--color-light: #ffffff;           /* pill + card fills */
	--color-on-light: #0d0d0d;        /* text on white pills */

	--color-accent: #e5192a;          /* the brand red */
	--color-accent-hot: #ff2f40;      /* hover / lift */
	/* --color-accent measures 4.17:1 on --color-bg: fine for fills, large
	   display type and decoration, but it fails WCAG AA for small text. Any
	   accent text below ~24px uses this lighter tone instead (5.99:1). */
	--color-accent-text: #ff4d5c;
	--color-on-accent: #0d0d0d;       /* black type on the red banner */

	--color-overlay: rgba(8, 8, 8, 0.92);

	/* --- Typography ----------------------------------------------------
	   Clash Display carries every display size, always uppercase, always at
	   line-height 1. Inter Tight handles body copy, labels and UI. */
	--font-display: 'Clash Display', 'Arial Black', 'Helvetica Neue', sans-serif;
	--font-body: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;

	--fs-display: clamp(3.5rem, 11vw, 13rem);      /* hero wordmark */
	--fs-h1: clamp(2.75rem, 7vw, 5.75rem);         /* section heads */
	--fs-h2: clamp(2rem, 4.5vw, 3.5rem);
	--fs-h3: clamp(1.25rem, 2vw, 1.75rem);
	--fs-marquee: clamp(2.25rem, 5vw, 4.5rem);
	--fs-lead: clamp(1.0625rem, 1.3vw, 1.25rem);
	--fs-body: 1rem;
	--fs-nav: 1.125rem;
	--fs-label: 0.75rem;

	--lh-display: 1;
	/* Deliberately looser than the reference's 1.2: that site is almost all
	   display type, whereas this one carries real strain descriptions. */
	--lh-body: 1.55;

	--tracking-display: -0.02em;
	--tracking-label: 0.18em;

	/* --- Layout -------------------------------------------------------- */
	--container-max: 1470px;
	--container-pad: clamp(1.25rem, 4vw, 3.75rem);
	--measure: 62ch;

	--space-3xs: 0.25rem;
	--space-2xs: 0.5rem;
	--space-xs: 0.75rem;
	--space-sm: 1.25rem;
	--space-md: 2rem;
	--space-lg: 3.5rem;
	--space-xl: 6rem;
	--space-section: clamp(4rem, 9vw, 5.625rem);      /* 90px */
	--space-section-lg: clamp(7rem, 14vw, 11.25rem);  /* 180px */

	--radius-pill: 100px;
	--radius: 0;   /* sharp — the reference uses no rounding on cards */

	/* --- Motion -------------------------------------------------------- */
	--ease: cubic-bezier(0.22, 1, 0.36, 1);
	--transition: 0.4s var(--ease);
	--transition-fast: 0.22s var(--ease);

	/* --- Breakpoints (documented; custom properties can't be used inside
	   media query conditions, so these appear literally in main.css) ------
	   48rem   / 768px    cards go multi-column, padding grows
	   64rem   / 1024px   desktop nav AND two-column layouts, one single line
	   Kept from the previous pass: the nav and the layout pivot together,
	   so there is no band where a desktop nav sits over a stacked layout. */
}

/* ==========================================================================
   2. RESET / BASE
   ========================================================================== */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* scroll-behavior stays "smooth" for the no-JS / no-Lenis case. When Lenis
   IS running it MUST be neutralised, or the browser starts its own easing
   animation toward every per-frame window.scrollTo() Lenis issues and the
   page moves in stuttering chunks. assets/css/vendor/lenis.css and the
   html.lenis rule at the top of main.css both handle that with
   !important, which is required because ScrollTrigger writes
   "scroll-behavior: smooth" back as an INLINE style after each refresh.
   Do not remove either of those rules while Lenis is in use. */
html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background-color: var(--color-bg);
	color: var(--color-ink);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

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

a {
	color: inherit;
	text-decoration: none;
}

ul,
ol {
	list-style: none;
	margin: 0;
	padding: 0;
}

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

/* Every heading is the display face, uppercase, set tight. */
h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: 700;
	line-height: var(--lh-display);
	letter-spacing: var(--tracking-display);
	text-transform: uppercase;
	margin: 0 0 var(--space-sm);
	text-wrap: balance;
}

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

:focus-visible {
	outline: 2px solid var(--color-accent-hot);
	outline-offset: 3px;
}

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

/* ==========================================================================
   3. REDUCED MOTION
   Every animation layer (main.js, motion.js) checks this in JS too; this is
   the CSS half of the same contract. The marquee bands are pure CSS, so
   they are stopped here rather than in script.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}