/*
 * ELNIQ GEO — base stylesheet
 * ----------------------------------------------------------------
 * Design tokens (colors / radii / shadows / container widths) are
 * taken verbatim from the design handoff README "Design tokens"
 * section, cross-checked against the .dc.html source files' inline
 * styles. This file intentionally holds ONLY tokens + reset + base
 * typography + WP-default neutralization. Per-template layout CSS
 * (header, footer, hero, cards, etc.) lands in its own file per
 * template family starting Stage 2, so this file doesn't balloon
 * into a single unmaintainable stylesheet.
 */

/* ------------------------------------------------------------ *
 * 1. Self-hosted "Inter Tight" — no runtime call to Google Fonts.
 * ------------------------------------------------------------ */
@font-face {
	font-family: 'Inter Tight';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/inter-tight-latin-400-normal.woff2') format('woff2');
}
@font-face {
	font-family: 'Inter Tight';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/inter-tight-latin-500-normal.woff2') format('woff2');
}
@font-face {
	font-family: 'Inter Tight';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/inter-tight-latin-600-normal.woff2') format('woff2');
}
@font-face {
	font-family: 'Inter Tight';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/inter-tight-latin-700-normal.woff2') format('woff2');
}
@font-face {
	font-family: 'Inter Tight';
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url('../fonts/inter-tight-latin-800-normal.woff2') format('woff2');
}
@font-face {
	font-family: 'Inter Tight';
	font-style: normal;
	font-weight: 900;
	font-display: swap;
	src: url('../fonts/inter-tight-latin-900-normal.woff2') format('woff2');
}

/* ------------------------------------------------------------ *
 * 2. Design tokens as CSS custom properties.
 *    Source of truth: design handoff README + .dc.html inline styles.
 * ------------------------------------------------------------ */
:root {
	/* Text */
	--eg-text-heading: #1F2937;
	--eg-text-body: #1F2937;
	--eg-text-secondary: #4A5565;
	--eg-text-muted: #64748B;
	--eg-text-muted-2: #8A94A6;
	--eg-text-on-dark: #FFFFFF;

	/* Brand blue */
	--eg-blue: #155DFC;
	--eg-blue-hover: #0084D1;
	--eg-blue-gradient: linear-gradient(90deg, #155DFC, #0084D1);
	--eg-blue-tint-bg: #ECF1F6;
	--eg-border-hairline: #DBEAFE;
	--eg-border-light: #E8EDF5;
	--eg-section-bg-light: #F5F8FB;

	/* Module accent colors — status/category tags only, never full
	   section themes (see README "Module accent colors"). */
	--eg-accent-green: #16A34A;   /* Available / positive */
	--eg-accent-purple: #9333EA;  /* Recommendations module */
	--eg-accent-orange: #EA580C;  /* Marketplace module */
	--eg-accent-gray: #64748B;    /* Coming Soon badges */

	/* Dark footer / CTA band */
	--eg-dark-gradient: linear-gradient(180deg, #2547A8 0%, #122764 55%, #070D24 100%);
	--eg-dark-glow: rgba(70, 143, 255, 0.16);

	/* Radii */
	--eg-radius-control: 6px;   /* buttons, inputs */
	--eg-radius-card: 16px;     /* 14–20px range in source; 16px is the common case */
	--eg-radius-card-lg: 20px;
	--eg-radius-pill: 100px;    /* badges, nav toggle, lang switch */

	/* Shadows — soft, blue-tinted */
	--eg-shadow-sm: 0 2px 8px rgba(16, 35, 95, 0.06);
	--eg-shadow-md: 0 8px 32px rgba(21, 93, 252, 0.12);
	--eg-shadow-lg: 0 6px 18px rgba(21, 93, 252, 0.35);
	--eg-shadow-strong: 0 20px 60px rgba(16, 35, 95, 0.26);

	/* Container widths — see per-section max-width in source files */
	--eg-container-xl: 1240px;
	--eg-container-lg: 1200px;
	--eg-container-md: 1100px;
	--eg-container-sm: 1000px;

	/* Fixed header height, used for scroll-margin-top offsets on
	   in-page anchors (e.g. /company/contact/#contact-form) so target
	   sections clear the sticky header without JS scroll polling. */
	--eg-header-height: 72px;

	--eg-font-family: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ------------------------------------------------------------ *
 * 3. Reset.
 * ------------------------------------------------------------ */
*,
*::before,
*::after {
	box-sizing: border-box;
}

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

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

body {
	margin: 0;
	font-family: var(--eg-font-family);
	color: var(--eg-text-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	background-image: url('../images/sky-bg.png');
	background-size: cover;
	background-position: center top;
	background-attachment: fixed;
}

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

figure {
	margin: 0;
}

ul,
ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	font-weight: 700;
	color: var(--eg-text-heading);
}

p {
	margin: 0;
}

a {
	color: var(--eg-blue);
	text-decoration: none;
}
a:hover {
	color: var(--eg-blue-hover);
}

/* Visible focus ring everywhere — WCAG 2.1 AA keyboard-navigation
   requirement from the brief. Never remove outline without replacing
   it; this is the one global override template CSS should not fight. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--eg-blue);
	outline-offset: 2px;
}

/* ------------------------------------------------------------ *
 * 4. Neutralize WordPress / Gutenberg default control styling so
 *    core blocks used on legal/blog pages (buttons, quotes, tables)
 *    don't fight the design system's own button/card components.
 * ------------------------------------------------------------ */
button,
input,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	color: inherit;
}

button {
	cursor: pointer;
	background: none;
	border: none;
	padding: 0;
}

/* wp-block-button default core style, kept minimal + on-brand rather
   than fully stripped, since legal/blog pages do use core buttons. */
.wp-block-button__link {
	font-family: var(--eg-font-family);
	font-weight: 700;
	border-radius: var(--eg-radius-control);
	background: var(--eg-blue-gradient);
	padding: 10px 20px;
}
.wp-block-button__link:hover {
	filter: brightness(1.06);
	box-shadow: var(--eg-shadow-lg);
}

/* ------------------------------------------------------------ *
 * 5. Layout primitives shared by every template family.
 * ------------------------------------------------------------ */
.eg-container {
	max-width: var(--eg-container-xl);
	margin-left: auto;
	margin-right: auto;
	padding-left: 24px;
	padding-right: 24px;
}

.eg-container--lg { max-width: var(--eg-container-lg); }
.eg-container--md { max-width: var(--eg-container-md); }
.eg-container--sm { max-width: var(--eg-container-sm); }

.eg-visually-hidden {
	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 to content" link — visible on keyboard focus only. */
.eg-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999999;
	background: var(--eg-blue);
	color: #fff;
	padding: 12px 20px;
	border-radius: 0 0 var(--eg-radius-control) 0;
	font-weight: 700;
}
.eg-skip-link:focus {
	left: 0;
}

/* Page content area used by page.php / single.php / archive.php /
   404.php until each gets its own richer stylesheet in later stages. */
.eg-content {
	padding-top: calc(var(--eg-header-height) + 48px);
	padding-bottom: 96px;
}
.eg-content h1 {
	font-size: clamp(28px, 4vw, 40px);
	margin-bottom: 16px;
}
.eg-content .eg-prose {
	color: var(--eg-text-secondary);
	font-size: 16px;
	line-height: 1.7;
	max-width: var(--eg-container-sm);
}
.eg-content .eg-prose > * + * {
	margin-top: 1.2em;
}