/**
 * OMI base: design tokens + small utilities.
 *
 * @author Sameer Ali
 */

:root {
	/* Colours (Figma) */
	--omi-color-text: #172c45;
	--omi-color-primary: #2186ff;
	--omi-color-primary-soft: #eaf3ff;
	--omi-color-surface: #f3f4f6;
	--omi-color-border: #d1d5db;
	--omi-color-line: #e5e7eb;
	--omi-color-muted: #6b7280;
	--omi-color-white: #ffffff;

	/* Typography */
	--omi-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

	/*
	 * Layout: site-wide content width. Figma frame is 1360 + 40 gutter;
	 * owner asked for a wider page (2026-10-13) → content up to 1600px
	 * with a 24px side gutter (header, mega menu and all sections).
	 */
	--omi-container: 1600px;
	--omi-gutter: 24px;

	/* Motion */
	--omi-ease: cubic-bezier(.22, .61, .36, 1);
}

@media (max-width: 767px) {
	:root { --omi-gutter: 16px; }
}

/* Shared container for every new section. */
.omi-container {
	box-sizing: border-box;
	width: 100%;
	max-width: calc(var(--omi-container) + var(--omi-gutter) * 2);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--omi-gutter);
	padding-right: var(--omi-gutter);
}

/* Screen-reader only text. */
.omi-header .screen-reader-text,
.omi-offcanvas .screen-reader-text,
.omi-search .screen-reader-text {
	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. */
.omi-skip-link {
	position: absolute;
	left: 16px;
	top: -100px;
	z-index: 100001;
	padding: 10px 16px;
	border-radius: 8px;
	background: var(--omi-color-text);
	color: var(--omi-color-white);
	font: 600 14px/1.2 var(--omi-font);
	text-decoration: none;
}

.omi-skip-link:focus {
	top: 16px;
	color: var(--omi-color-white);
}

.omi-content-anchor {
	outline: none;
}

/* Body scroll lock while the mobile menu is open. */
html.omi-scroll-lock,
html.omi-scroll-lock body {
	overflow: hidden;
}