/* ==========================================================================
   ULRICH RACING — Core design system
   Tokens · Reset · Typography · Layout · Utilities · Motion · A11y
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
	/* Color — dark, neutral. White text is 100% white. */
	--c-bg:            #060708;
	--c-bg-2:          #0a0c0f;
	--c-bg-3:          #0f1216;
	--c-text:          #ffffff;                          /* 100% white */
	--c-muted:         rgba(255, 255, 255, 0.72);
	--c-dim:           rgba(255, 255, 255, 0.50);
	--c-faint:         rgba(255, 255, 255, 0.16);
	--c-line:          rgba(255, 255, 255, 0.09);
	--c-line-strong:   rgba(255, 255, 255, 0.18);

	/* Racing red — used for card titles & key accents. */
	--c-red:           #e10600;
	--c-red-soft:      rgba(225, 6, 0, 0.14);

	/* Customizer accent (kept neutral by default). */
	--accent:          #e10600;
	--accent-soft:     rgba(225, 6, 0, 0.12);

	/* Liquid glass */
	--glass-bg:        rgba(255, 255, 255, 0.05);
	--glass-bg-strong: rgba(255, 255, 255, 0.08);
	--glass-border:    rgba(255, 255, 255, 0.12);
	--glass-hl:        rgba(255, 255, 255, 0.22);
	--glass-blur:      16px;
	--glass-sat:       140%;
	--glass-shadow:
		0 1px 0 0 var(--glass-hl) inset,
		0 0 0 1px rgba(255, 255, 255, 0.03) inset,
		0 16px 44px -22px rgba(0, 0, 0, 0.7);

	--grad-line:  linear-gradient(90deg, transparent, var(--c-line-strong), transparent);

	/* Ambient background blobs (very subtle) */
	--blob-1: rgba(110, 120, 140, 0.14);
	--blob-2: rgba(80, 90, 110, 0.12);

	/* Fonts — Bebas Neue display + readable system body + serif italic accent */
	--font-display: "Bebas Neue", "Oswald", Impact, sans-serif;
	--font-sans:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-serif:   "Times New Roman", Times, Georgia, serif;

	/* Spacing — per project rules */
	--pad-x:            0.3rem;        /* mobile global border padding */
	--section-py:       2rem;          /* 2rem top + 2rem bottom → 2+2 between sections */
	--hero-pb:          4rem;          /* hero bottom = double the section padding */
	--gap:              clamp(1rem, 1.6vw, 1.8rem);
	--gap-lg:           clamp(1.4rem, 2.6vw, 3rem);
	--maxw-text:        74ch;
	--maxw-wide:        92rem;         /* rem-based, so it scales linearly with the root font */

	/* Radii */
	--r-sm: 10px;
	--r:    14px;
	--r-lg: 20px;
	--r-xl: 28px;
	--r-pill: 999px;
	--radius: 10px;                   /* base image roundness */
	--img-radius: calc(var(--radius) - 1px);

	/* Shadows */
	--shadow-card:  0 20px 50px -28px rgba(0, 0, 0, 0.85);
	--shadow-hover: 0 30px 70px -30px rgba(0, 0, 0, 0.9);

	/* Motion */
	--ease:      cubic-bezier(0.22, 1, 0.36, 1);
	--ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
	--dur:       0.55s;
	--dur-fast:  0.26s;
	--reveal-blur: 10px;

	/* Layering */
	--z-bg: 0;
	--z-base: 1;
	--z-raised: 10;
	--z-header: 1000;
	--z-overlay: 1100;
	--z-modal: 1200;

	/* Header */
	--header-h: 4rem;
}

/* Fluid type scale — Bebas is condensed, so sizes stay modest */
:root {
	--fs-eyebrow: clamp(0.66rem, 0.62rem + 0.18vw, 0.78rem);
	--fs-small:   clamp(0.8rem, 0.77rem + 0.15vw, 0.92rem);
	--fs-body:    clamp(0.95rem, 0.92rem + 0.18vw, 1.05rem);
	--fs-lead:    clamp(1.05rem, 0.98rem + 0.45vw, 1.35rem);
	--fs-h3:      clamp(1.4rem, 1.2rem + 0.9vw, 2.1rem);
	--fs-h2:      clamp(2rem, 1.5rem + 2.2vw, 3.4rem);
	--fs-h1:      clamp(2.6rem, 1.9rem + 3.2vw, 4.6rem);
	--fs-display: clamp(3.2rem, 2rem + 6vw, 7.5rem);
}

/* Global horizontal padding: 0.3rem mobile baseline, generous inset on desktop
   so section titles/content are never flush to the screen edge. Full-bleed
   visuals (hero, marquee, cars) intentionally ignore this and span edge-to-edge. */
@media (min-width: 600px) { :root { --pad-x: 1.5rem; } }
@media (min-width: 768px) { :root { --pad-x: clamp(2.5rem, 5vw, 6rem); } }

/* Fluid root: the whole rem/ch system scales LINEARLY with screen width from
   ~1080p up to 4K (everything sized in rem/ch tracks this), then caps at 4K. */
html {
	font-size: clamp(15px, 0.42vw + 9.4px, 26px);
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
	-webkit-tap-highlight-color: transparent;
}

/* Anchor offset so in-page links (e.g. #contact) clear the fixed header. */
:target,
[id] { scroll-margin-top: calc(var(--header-h) + 2rem); }

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html, body { height: 100%; }

body {
	background-color: var(--c-bg);
	color: var(--c-text);
	font-family: var(--font-sans);
	font-size: var(--fs-body);
	line-height: 1.6;
	font-weight: 400;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--c-text); outline-offset: 3px; border-radius: 4px; }

/* Ambient backdrop — soft blurred blobs */
body::before {
	content: "";
	position: fixed;
	inset: -20vmax;
	z-index: var(--z-bg);
	pointer-events: none;
	background:
		radial-gradient(40vmax 40vmax at 12% 8%,  var(--blob-1), transparent 60%),
		radial-gradient(46vmax 46vmax at 88% 22%, var(--blob-2), transparent 62%);
	filter: blur(40px) saturate(115%);
	opacity: 0.9;
}
body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: var(--z-bg);
	pointer-events: none;
	background: radial-gradient(120% 120% at 50% 0%, transparent 55%, rgba(0,0,0,0.5) 100%);
}
#page { position: relative; z-index: var(--z-base); }

/* --------------------------------------------------------------------------
   3. TYPOGRAPHY
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	font-weight: 400;                 /* Bebas is single-weight — never bold */
	line-height: 0.95;
	letter-spacing: 0.005em;
	text-wrap: balance;
	color: var(--c-text);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p { color: var(--c-text); }                 /* default text is 100% white */
p.lead, .lead { font-size: var(--fs-lead); color: var(--c-text); line-height: 1.45; max-width: 62ch; font-weight: 400; }
strong, b { color: var(--c-text); font-weight: 600; }

/* Royal serif italic accent — mixes with the Bebas display face */
.serif, em, .title em, .accent-serif, .hero__title em {
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

/* Gradients fully removed — these classes now render solid 100% white. */
.grad, .grad-text, .grad-text-x,
.title .grad, .eyebrow .grad, .hero__title .grad,
.page-hero__title .grad, .brand__text .grad {
	background: none;
	-webkit-text-fill-color: currentColor;
	color: var(--c-text);
}

.title {
	font-family: var(--font-display);
	font-size: var(--fs-h2);
	line-height: 0.95;
	letter-spacing: 0.005em;
}
.title--display {
	font-family: var(--font-display);
	font-size: var(--fs-display);
	line-height: 0.92;
	letter-spacing: 0.01em;
}

/* Eyebrow / kicker label — Bebas, spaced, subtle */
.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	font-family: var(--font-display);
	font-size: var(--fs-eyebrow);
	font-weight: 400;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--c-dim);
}
.eyebrow::before { content: ""; width: 2em; height: 1px; background: var(--c-line-strong); }
.eyebrow--center { justify-content: center; }
.eyebrow--center::before { display: none; }

/* --------------------------------------------------------------------------
   4. LAYOUT  (full-bleed sections, content capped & inset)
   -------------------------------------------------------------------------- */
.container {
	width: 100%;
	padding-inline: var(--pad-x);
	margin-inline: auto;
}
.container--wide   { max-width: var(--maxw-wide); }
.container--narrow { max-width: var(--maxw-text); }

/* Inner pages: titles/prose stay in .container--wide; grids use full width + side padding (matches .news-grid). */
.page-grid,
.news-grid {
	width: 100%;
	padding-inline: var(--pad-x);
}

.section {
	position: relative;
	padding-block: var(--section-py);
	z-index: var(--z-base);
}
.hero + .section,
.hero + .intro-stage > .section:first-child,
.intro-stage > .section:first-child,
.section--flush-top { padding-top: 0; }

.section__head { display: flex; flex-direction: column; gap: 0.8rem; margin-bottom: var(--gap-lg); }
.section__head--center { align-items: center; text-align: center; }
.section__head--split { flex-direction: row; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }

.divider { height: 1px; border: 0; background: var(--grad-line); margin-block: var(--section-py); }

.grid { display: grid; gap: var(--gap); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--auto { grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr)); }

@media (max-width: 900px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }
@media (min-width: 901px) and (max-width: 1200px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }

/* --------------------------------------------------------------------------
   5. UTILITIES
   -------------------------------------------------------------------------- */
.u-center { text-align: center; }
.u-muted { color: var(--c-muted); }
.u-dim { color: var(--c-dim); }
.u-flow > * + * { margin-top: 1em; }
.u-stack { display: flex; flex-direction: column; gap: var(--gap); }
.u-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.u-mt-0 { margin-top: 0 !important; }
.u-pt-0 { padding-top: 0 !important; }
.u-full { width: 100%; }
.u-hidden { display: none !important; }

.screen-reader-text, .sr-only {
	position: absolute !important; 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: 50%; top: -100%; transform: translateX(-50%);
	z-index: var(--z-modal); padding: 0.7rem 1.2rem;
	background: var(--c-text); color: var(--c-bg); border-radius: var(--r-pill);
	font-weight: 600; transition: top var(--dur-fast) var(--ease);
}
.skip-link:focus { top: 1rem; }

.glass {
	background: var(--glass-bg);
	border: 1px solid var(--glass-border);
	-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
	backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
	box-shadow: var(--glass-shadow);
	border-radius: var(--r);
}
.glass--strong { background: var(--glass-bg-strong); }

/* --------------------------------------------------------------------------
   6. MOTION — Bugatti-style de-blur (visible but blurry, then sharp)
   -------------------------------------------------------------------------- */
.deblur { transition: filter 0.8s var(--ease-out), transform 0.9s var(--ease-out); will-change: filter, transform; }
.js .deblur { filter: blur(var(--reveal-blur)); transform: translateY(12px); }
.deblur.is-in { filter: blur(0); transform: none; }

.reveal { transition: filter 0.7s var(--ease-out), opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); transition-delay: var(--reveal-delay, 0s); will-change: filter, opacity, transform; }
.js .reveal { filter: blur(7px); opacity: 0.72; transform: translateY(10px); }
.reveal.is-in { filter: blur(0); opacity: 1; transform: none; }

.reveal-stagger > * { transition: filter 0.6s var(--ease-out), opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); }
.js .reveal-stagger > * { filter: blur(7px); opacity: 0.72; transform: translateY(10px); }
.reveal-stagger.is-in > * { filter: blur(0); opacity: 1; transform: none; }
.reveal-stagger.is-in > *:nth-child(1) { transition-delay: 0.04s; }
.reveal-stagger.is-in > *:nth-child(2) { transition-delay: 0.10s; }
.reveal-stagger.is-in > *:nth-child(3) { transition-delay: 0.16s; }
.reveal-stagger.is-in > *:nth-child(4) { transition-delay: 0.22s; }
.reveal-stagger.is-in > *:nth-child(5) { transition-delay: 0.28s; }
.reveal-stagger.is-in > *:nth-child(6) { transition-delay: 0.34s; }
.reveal-stagger.is-in > *:nth-child(7) { transition-delay: 0.40s; }
.reveal-stagger.is-in > *:nth-child(8) { transition-delay: 0.46s; }

/* Full-page de-blur on load (bugatti.com style). CSS-only so it can never get
   stuck if JS fails. Runs once; auto-clears via animation-fill-mode. */
.js.ur-preload #page,
.js.ur-preload .site-header {
	animation: page-in 1s var(--ease-out) 0.04s both;
}
@keyframes page-in {
	from { filter: blur(20px); opacity: 0; }
	60%  { opacity: 1; }
	to   { filter: blur(0); opacity: 1; }
}

@keyframes marquee-x { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
@keyframes float-y { 0%,100% { transform: translateY(0);} 50% { transform: translateY(-10px);} }
@keyframes pulse-dot { 0%,100% { opacity: 1; transform: scale(1);} 50% { opacity: 0.4; transform: scale(0.7);} }

/* --------------------------------------------------------------------------
   7. ACCESSIBILITY / PREFERENCES
   -------------------------------------------------------------------------- */
@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;
	}
	.deblur, .reveal, .reveal-stagger > * { filter: none !important; opacity: 1 !important; transform: none !important; }
	.js.ur-preload #page, .js.ur-preload .site-header { animation: none !important; }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.glass, .glass--strong { background: rgba(18, 20, 24, 0.92); }
}

/* WordPress core helpers */
.alignleft  { float: left;  margin: 0 1.5rem 1rem 0; }
.alignright { float: right; margin: 0 0 1rem 1.5rem; }
.aligncenter { display: block; margin-inline: auto; }
.wp-caption-text, figcaption { font-size: var(--fs-small); color: var(--c-dim); margin-top: 0.5rem; }
.sticky, .gallery-caption, .bypostauthor { display: block; }