/* ==========================================================================
   VE Landing Page — global.css
   WebHawk Solutions brand: design tokens, fonts, type scale, shared buttons
   and focus styles. Every section plugin reads these tokens, so brand changes
   are made here only.

   Loaded on the landing page (and by VE Header Footer on other pages).
   Rules are scoped to .ve-page or a .ve-* class.
   ========================================================================== */

/* ---------- Fonts (self-hosted, SIL Open Font License) ----------
   Outfit  → headings        DM Sans → body text, paragraphs, buttons, forms */
@font-face {
	font-family: "VE Outfit";
	src: url("../fonts/outfit-latin-wght-normal.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "VE Outfit";
	src: url("../fonts/outfit-latin-ext-wght-normal.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "VE DM Sans";
	src: url("../fonts/dm-sans-latin-wght-normal.woff2") format("woff2");
	font-weight: 100 1000;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "VE DM Sans";
	src: url("../fonts/dm-sans-latin-wght-italic.woff2") format("woff2");
	font-weight: 100 1000;
	font-style: italic;
	font-display: swap;
}

/* ---------- Design tokens ---------- */
:root {
	/* Colour — WebHawk Solutions (blue from the logo) */
	--ve-bg: #f6f8fb;               /* cool off-white page background */
	--ve-surface: #ffffff;
	--ve-ink: #0f1626;              /* near-black navy for headings and text */
	--ve-ink-soft: #4f5869;         /* secondary text (6.7:1 on --ve-bg) */
	--ve-accent: #0b63e5;           /* PRIMARY: logo royal blue (white text 5.3:1) */
	--ve-accent-hover: #0850bf;
	--ve-accent-2: #3fa9f5;         /* logo highlight blue: glows, gradients, dark backgrounds */
	--ve-accent-text: #0a55c7;      /* blue for small text (6.3:1 on --ve-bg) */
	--ve-on-accent: #ffffff;        /* text on blue buttons */
	--ve-navy: #0a1220;             /* deep background (footer), from the logo's black */
	--ve-lavender: #dce8ff;         /* soft ice-blue wash (name kept for compatibility) */
	--ve-sky: #d3f0ff;              /* soft light-blue wash */
	--ve-line: #e2e7ef;
	--ve-focus: #0f1626;            /* keyboard focus ring: dark, visible on blue and white */

	/* Tints of the primary blue, used for glows, badges and highlights */
	--ve-accent-04: color-mix(in srgb, var(--ve-accent) 4%, transparent);
	--ve-accent-08: color-mix(in srgb, var(--ve-accent) 8%, transparent);
	--ve-accent-12: color-mix(in srgb, var(--ve-accent) 12%, transparent);
	--ve-accent-20: color-mix(in srgb, var(--ve-accent) 20%, transparent);
	--ve-accent-35: color-mix(in srgb, var(--ve-accent) 35%, transparent);
	--ve-accent-50: color-mix(in srgb, var(--ve-accent) 50%, transparent);
	--ve-accent-glow: color-mix(in srgb, var(--ve-accent) 70%, transparent);

	/* Typography */
	--ve-font-display: "VE Outfit", "Outfit", "Segoe UI", system-ui, -apple-system, sans-serif;
	--ve-font-body: "VE DM Sans", "DM Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
	--ve-weight-heading: 600;
	--ve-fs-hero: clamp(2.6rem, 1.5rem + 4.6vw, 6rem);       /* ~42px → 96px */
	--ve-fs-h2: clamp(2rem, 1.4rem + 2.6vw, 4rem);
	--ve-fs-h3: clamp(1.25rem, 1.1rem + 0.7vw, 1.75rem);
	--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 (shadows tinted with the navy ink) */
	--ve-radius-s: 10px;
	--ve-radius-m: 18px;
	--ve-radius-l: 28px;
	--ve-radius-pill: 999px;
	--ve-shadow-1: 0 1px 2px rgba(15, 22, 38, 0.06), 0 4px 14px rgba(15, 22, 38, 0.06);
	--ve-shadow-2: 0 2px 6px rgba(15, 22, 38, 0.06), 0 18px 44px -12px rgba(15, 22, 38, 0.22);
	--ve-shadow-3: 0 4px 10px rgba(15, 22, 38, 0.07), 0 40px 80px -24px rgba(15, 22, 38, 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 inside our sections use Outfit. */
.ve-page [class*="ve-"] .elementor-heading-title {
	font-family: var(--ve-font-display);
	font-weight: var(--ve-weight-heading);
	color: var(--ve-ink);
	letter-spacing: -0.03em;
	line-height: 1.02;
}
/* Words wrapped in <em> inside a heading are highlighted in the brand blue. */
.ve-page [class*="ve-"] .elementor-heading-title em,
.ve-page [class*="ve-"] .elementor-heading-title i {
	font-style: normal;
	color: var(--ve-accent);
}
.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 classes "ve-btn ve-btn--primary" (or "ve-btn ve-btn--ghost") to an
   Elementor Button widget (Advanced > CSS Classes). Selectors are deliberately
   strong (body + Elementor wrappers) so they win over Site Settings > Buttons
   and per-widget colours written by Elementor. */
body.ve-page .elementor-element.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);
}
body.ve-page .elementor-element.ve-btn--primary .elementor-button,
body.ve-page .elementor-element.ve-btn--primary .elementor-button:visited {
	background-color: var(--ve-accent);
	color: var(--ve-on-accent);
	box-shadow: 0 10px 24px -10px var(--ve-accent-glow, rgba(11, 99, 229, .7));
}
body.ve-page .elementor-element.ve-btn--primary .elementor-button:hover,
body.ve-page .elementor-element.ve-btn--primary .elementor-button:focus {
	background-color: var(--ve-accent-hover);
	color: var(--ve-on-accent);
	transform: translateY(-2px);
	box-shadow: 0 16px 30px -12px var(--ve-accent-glow, rgba(11, 99, 229, .7));
}
body.ve-page .elementor-element.ve-btn--ghost .elementor-button,
body.ve-page .elementor-element.ve-btn--ghost .elementor-button:visited {
	background-color: transparent;
	color: var(--ve-ink);
	border-color: var(--ve-line);
}
body.ve-page .elementor-element.ve-btn--ghost .elementor-button:hover,
body.ve-page .elementor-element.ve-btn--ghost .elementor-button:focus {
	background-color: var(--ve-surface);
	border-color: var(--ve-ink);
	color: var(--ve-ink);
}
body.ve-page .elementor-element.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);
}
body.ve-page .elementor-element.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;
	}
	body.ve-page .elementor-element.ve-btn .elementor-button:hover {
		transform: none;
	}
}