/*
Theme Name: JPS Theme
Theme URI: https://jps.greatmindsdigital.com/
Author: Great Minds Digital
Description: Custom WordPress theme for JPS Composite Materials. Pixel-perfect implementation of Lovable design.
Version: 0.1.0
Template: hello-elementor
Text Domain: jps-theme
*/

/* ── Design tokens ───────────────────────────────────────────────────────── */

:root {
	/* Typography */
	--font-display: 'Manrope', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
	--font-body:    'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

	/* Color — canonical values confirmed against source computed styles */
	--color-background: #ffffff;
	--color-surface:    #F5F6F8;
	--color-near-black: #0B0B0F;
	--color-border:     #E5E7EB;
}

body {
	font-family: var(--font-body);
}

/* ── Shared typography utilities ────────────────────────────────────────── */
/* Mirror of source index.css @layer components — used across multiple blocks */

/* eyebrow: font-display text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground */
.eyebrow {
	font-family:    var(--font-display);
	font-size:      0.75rem;   /* text-xs = 12px */
	font-weight:    600;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color:          #6b7280;   /* text-muted-foreground = hsl(220 9% 46%) */
	margin:         0;
}

/* display-xl: Manrope 800, clamp(36px,5vw,72px), uppercase, lh:1, ls:-0.02em */
.display-xl {
	font-family:    var(--font-display);
	font-weight:    800;
	line-height:    1;
	letter-spacing: -0.02em;
	font-size:      clamp(2.25rem, 5vw, 4.5rem);
	text-transform: uppercase;
	color:          #0B0B0F;
	margin:         0;
}

/* display-lg: Manrope 700, clamp(28px,3.5vw,48px), lh:1.05, ls:-0.015em */
.display-lg {
	font-family:    var(--font-display);
	font-weight:    700;
	line-height:    1.05;
	letter-spacing: -0.015em;
	font-size:      clamp(1.75rem, 3.5vw, 3rem);
	margin:         0;
}

/* stat-numeral: Manrope 800, lh:0.9, ls:-0.04em, tabular-nums */
.stat-numeral {
	font-family:         var(--font-display);
	font-weight:         800;
	line-height:         0.9;
	letter-spacing:      -0.04em;
	font-variant-numeric: tabular-nums;
}

/* eyebrow-light: same as .eyebrow but white/70 — used on dark backgrounds */
.eyebrow-light {
	font-family:    var(--font-display);
	font-size:      0.75rem;
	font-weight:    600;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color:          rgba(255, 255, 255, 0.70);
	margin:         0;
}

/* link-arrow: font-display text-sm 600 uppercase tracking-[0.14em] primary→accent on hover */
.link-arrow {
	display:         inline-flex;
	align-items:     center;
	gap:             0.5rem;    /* gap-2 */
	font-family:     var(--font-display);
	font-size:       0.875rem;  /* text-sm = 14px */
	font-weight:     600;
	text-transform:  uppercase;
	letter-spacing:  0.14em;
	color:           #0A4DA2;   /* text-primary */
	text-decoration: none;
	transition:      color 0.2s ease; /* transition-colors */
}

.link-arrow:hover {
	color: #1E6FD9; /* text-accent */
}

/* link-arrow-light: same but white, hover opacity-80 */
.link-arrow-light {
	display:         inline-flex;
	align-items:     center;
	gap:             0.5rem;
	font-family:     var(--font-display);
	font-size:       0.875rem;
	font-weight:     600;
	text-transform:  uppercase;
	letter-spacing:  0.14em;
	color:           #ffffff;
	text-decoration: none;
	transition:      opacity 0.2s ease;
}

.link-arrow-light:hover {
	opacity: 0.8;
}

/* data-reveal: shared scroll-reveal used across all blocks */
[data-reveal] {
	opacity:    0;
	transform:  translateY(24px);
	transition: opacity 0.8s cubic-bezier(0.2, 0.7, 0.2, 1),
	            transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
	will-change: opacity, transform;
}

[data-reveal][data-revealed="true"] {
	opacity:   1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	[data-reveal] {
		opacity:    1 !important;
		transform:  none !important;
		transition: none !important;
	}
}

/* ── Layout ──────────────────────────────────────────────────────────────── */

.container-jps {
	margin-inline:  auto;
	max-width:      1400px;
	padding-inline: 1.5rem;
}

@media (min-width: 768px) {
	.container-jps { padding-inline: 2.5rem; }
}

@media (min-width: 1024px) {
	.container-jps { padding-inline: 3.5rem; }
}

/* Push page content below sticky nav on inner pages.
   Applied to <main> so the header itself isn't pushed down.
   Utility bar scrolls away; only the nav bar is sticky. */
body:not(.home) > main {
	padding-top: 7rem; /* --jps-nav-h mobile */
}

@media (min-width: 1024px) {
	body:not(.home) > main {
		padding-top: 8rem; /* --jps-nav-h lg */
	}
}