/* ==========================================================================
   VE Agency Site — global.css
   Design tokens, fonts, type scale, shared buttons and focus styles.
   Loaded only on the landing page. Every rule is scoped to .ve-page or a
   .ve-* class so other Elementor widgets and pages are unaffected.

   To rebrand: change the values in :root below. Nothing else needs editing.
   ========================================================================== */

/* ---------- Fonts (self-hosted, SIL Open Font License) ---------- */
@font-face {
	font-family: "VE Manrope";
	src: url("../fonts/manrope-latin-wght-normal.woff2") format("woff2");
	font-weight: 200 800;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "VE Instrument Serif";
	src: url("../fonts/instrument-serif-latin-400-normal.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "VE Instrument Serif";
	src: url("../fonts/instrument-serif-latin-400-italic.woff2") format("woff2");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

/* ---------- Design tokens ---------- */
:root {
	/* Colour (demo palette — replace with brand colours) */
	--ve-bg: #faf8f4;
	--ve-surface: #ffffff;
	--ve-ink: #1c1b1f;
	--ve-ink-soft: #5a5760;
	--ve-accent: #ff5a1f;
	--ve-accent-hover: #ec4a10;
	--ve-accent-text: #c8410e;      /* orange for small text: passes 4.5:1 on --ve-bg */
	--ve-on-accent: #1c1b1f;        /* text on orange buttons (dark = higher contrast than white) */
	--ve-lavender: #d9d2fa;
	--ve-sky: #cfe6fa;
	--ve-line: #e7e3dc;
	--ve-focus: #3a5bd9;

	/* Typography */
	--ve-font-display: "VE Instrument Serif", "Iowan Old Style", Georgia, serif;
	--ve-font-body: "VE Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
	--ve-fs-hero: clamp(2.75rem, 1.6rem + 5.6vw, 7rem);     /* ~44px → 112px */
	--ve-fs-h2: clamp(2.25rem, 1.5rem + 3.4vw, 4.75rem);
	--ve-fs-h3: clamp(1.375rem, 1.15rem + 1vw, 2rem);
	--ve-fs-lede: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
	--ve-fs-body: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
	--ve-fs-small: 0.875rem;
	--ve-fs-micro: 0.75rem;

	/* Spacing (8px scale) */
	--ve-space-1: 0.25rem;
	--ve-space-2: 0.5rem;
	--ve-space-3: 0.75rem;
	--ve-space-4: 1rem;
	--ve-space-5: 1.5rem;
	--ve-space-6: 2rem;
	--ve-space-7: 3rem;
	--ve-space-8: 4rem;
	--ve-space-9: 6rem;
	--ve-space-10: 8rem;
	--ve-gutter: clamp(1rem, 0.5rem + 2.5vw, 3rem);
	--ve-section-y: clamp(4rem, 2.5rem + 6vw, 9rem);
	--ve-max: 1320px;

	/* Shape & depth */
	--ve-radius-s: 10px;
	--ve-radius-m: 18px;
	--ve-radius-l: 28px;
	--ve-radius-pill: 999px;
	--ve-shadow-1: 0 1px 2px rgba(28, 27, 31, 0.06), 0 4px 14px rgba(28, 27, 31, 0.06);
	--ve-shadow-2: 0 2px 6px rgba(28, 27, 31, 0.06), 0 18px 44px -12px rgba(28, 27, 31, 0.22);
	--ve-shadow-3: 0 4px 10px rgba(28, 27, 31, 0.07), 0 40px 80px -24px rgba(28, 27, 31, 0.32);

	/* Motion */
	--ve-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--ve-dur-fast: 0.2s;
	--ve-dur: 0.45s;
}

/* ---------- Page base ---------- */
body.ve-page {
	background-color: var(--ve-bg);
	color: var(--ve-ink);
	font-family: var(--ve-font-body);
	font-size: var(--ve-fs-body);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip; /* guards against stray horizontal overflow from 3D transforms */
}

/* Elementor headings and text inside our sections use the token fonts. */
.ve-page [class*="ve-"] .elementor-heading-title {
	font-family: var(--ve-font-display);
	font-weight: 400;
	color: var(--ve-ink);
	letter-spacing: -0.02em;
	line-height: 0.98;
}
.ve-page [class*="ve-"] .elementor-heading-title em,
.ve-page [class*="ve-"] .elementor-heading-title i {
	font-style: italic;
	color: var(--ve-accent-text);
}
.ve-page [class*="ve-"] .elementor-widget-text-editor {
	font-family: var(--ve-font-body);
	color: var(--ve-ink-soft);
}

/* Small uppercase label used above headings. Add class ve-eyebrow to a Text Editor or Heading widget. */
.ve-page .ve-eyebrow,
.ve-page .ve-eyebrow p,
.ve-page .ve-eyebrow .elementor-heading-title {
	font-family: var(--ve-font-body);
	font-size: var(--ve-fs-micro);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	line-height: 1.4;
	color: var(--ve-ink-soft);
	margin: 0;
}

/* ---------- Buttons ----------
   Add class ve-btn ve-btn--primary (or ve-btn--ghost) to an Elementor Button
   widget's Advanced → CSS Classes. Leave the widget's own colour controls at
   their defaults so these styles apply. */
.ve-page .ve-btn .elementor-button {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	min-height: 52px;
	padding: 0.95em 1.6em;
	border-radius: var(--ve-radius-pill);
	border: 1.5px solid transparent;
	font-family: var(--ve-font-body);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1;
	text-decoration: none;
	transition: background-color var(--ve-dur-fast) ease, color var(--ve-dur-fast) ease,
		border-color var(--ve-dur-fast) ease, transform var(--ve-dur) var(--ve-ease), box-shadow var(--ve-dur) var(--ve-ease);
}
.ve-page .ve-btn--primary .elementor-button {
	background-color: var(--ve-accent);
	color: var(--ve-on-accent);
	box-shadow: 0 10px 24px -10px rgba(255, 90, 31, 0.65);
}
.ve-page .ve-btn--primary .elementor-button:hover {
	background-color: var(--ve-accent-hover);
	color: var(--ve-on-accent);
	transform: translateY(-2px);
	box-shadow: 0 16px 30px -12px rgba(255, 90, 31, 0.7);
}
.ve-page .ve-btn--ghost .elementor-button {
	background-color: transparent;
	color: var(--ve-ink);
	border-color: var(--ve-line);
}
.ve-page .ve-btn--ghost .elementor-button:hover {
	background-color: var(--ve-surface);
	border-color: var(--ve-ink);
	color: var(--ve-ink);
}
.ve-page .ve-btn .elementor-button-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* ---------- Focus (keyboard only) ---------- */
.ve-page [class*="ve-"] :focus-visible,
.ve-page .ve-btn .elementor-button:focus-visible {
	outline: 3px solid var(--ve-focus);
	outline-offset: 3px;
	border-radius: var(--ve-radius-s);
}
.ve-page .ve-btn .elementor-button:focus-visible {
	border-radius: var(--ve-radius-pill);
}

/* Visually hidden but available to screen readers. */
.ve-page .ve-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;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.ve-page [class*="ve-"],
	.ve-page [class*="ve-"] * {
		scroll-behavior: auto !important;
	}
	.ve-page .ve-btn .elementor-button:hover {
		transform: none;
	}
}