/* ============================================================================
   RAVIX — BASE
   ============================================================================
   CSS reset, body styles, default typography, focus rings, the film grain
   pseudo-element. Loaded after variables.css on every page.

   Nothing in this file references colours or typography directly — all
   values come from CSS custom properties defined in variables.css.
   ============================================================================ */


/* ============================================================================
   MODERN RESET
   ============================================================================ */

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

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

body, h1, h2, h3, h4, h5, h6, p, blockquote, figure, dl, dd, ul, ol {
	margin: 0;
	padding: 0;
}

ul, ol {
	list-style: none;
}

img, picture, video, canvas, svg {
	display: block;
	max-width: 100%;
	height: auto;
}

input, button, textarea, select {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
}

button {
	cursor: pointer;
}

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


/* ============================================================================
   BODY
   ============================================================================
   Cinematic dark canvas. Body sets the base type colour and font; every
   text element either inherits or overrides via a semantic alias.
   ============================================================================ */

body {
	font-family: var(--font-primary);
	font-weight: var(--weight-regular);
	font-size: 15px;
	line-height: 1.6;
	color: var(--text-body);
	background-color: var(--bg-primary);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}


/* ============================================================================
   FILM GRAIN OVERLAY
   ============================================================================
   Subtle texture across the whole site. opacity 0.03 maximum — anything
   stronger fights the design instead of supporting it.
   The AI position section (Section 6) bumps this to 0.05 via its own
   page-level CSS override.
   ============================================================================ */

body::after {
	content: '';
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: var(--z-overlay);
	opacity: 0.03;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	background-size: 200px;
	mix-blend-mode: overlay;
}


/* ============================================================================
   TYPOGRAPHY DEFAULTS
   ============================================================================
   Sensible defaults so unstyled WP content (the_content output, blocks,
   etc.) reads on-brand. Component CSS overrides where needed.
   ============================================================================ */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-primary);
	font-weight: var(--weight-bold);
	color: var(--text-headline);
	line-height: 1.1;
	letter-spacing: -0.01em;
}

h1 { font-size: clamp(40px, 6vw, 72px); }
h2 { font-size: clamp(32px, 4.5vw, 56px); }
h3 { font-size: clamp(24px, 3vw, 36px); }
h4 { font-size: clamp(20px, 2.4vw, 28px); }
h5 { font-size: 18px; }
h6 { font-size: 15px; }

p {
	color: var(--text-body);
	line-height: 1.75;
}

p + p {
	margin-top: 1em;
}

a {
	transition: color var(--duration-fast) var(--ease-default);
}

a:hover {
	color: var(--text-headline);
}

strong, b {
	font-weight: var(--weight-medium);
	color: var(--text-headline);
}

em, i {
	font-style: italic;
}

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


/* ============================================================================
   FOCUS RING — ACCESSIBILITY
   ============================================================================
   Visible only when keyboard navigating. Uses a hairline white outline
   that reads on any background.
   ============================================================================ */

:focus {
	outline: none;
}

:focus-visible {
	outline: 1px solid var(--color-white);
	outline-offset: 3px;
}


/* ============================================================================
   SKIP LINK — ACCESSIBILITY
   ============================================================================ */

.ravix-skip-link {
	position: absolute;
	top: -100px;
	left: 0;
	z-index: 10000;
	padding: var(--space-sm) var(--space-md);
	background-color: var(--color-white);
	color: var(--color-black);
	font-weight: var(--weight-medium);
}

.ravix-skip-link:focus {
	top: 0;
}


/* ============================================================================
   SCREEN-READER UTILITY
   ============================================================================ */

.screen-reader-text {
	position: absolute;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	width: 1px;
	height: 1px;
	overflow: hidden;
	white-space: nowrap;
	word-wrap: normal;
}