/*
 * Inner Glass: base layer.
 * Tokens, fonts, reset, typography, layout primitives, ambient backdrop, reveal.
 * Customizer overrides --ig-accent, --ig-bg, --ig-glass, --ig-container and --ig-blob inline on :root.
 */

/* Self-hosted Montserrat variable (wght 100-900). Estonian needs latin (õäöü €) and latin-ext (šž). */
@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/montserrat-latin-ext.woff2") format("woff2");
	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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/montserrat-latin.woff2") format("woff2");
	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;
}
/* Metric-matched fallback so the swap does not shift layout. */
@font-face {
	font-family: "Montserrat Fallback";
	src: local("Arial");
	size-adjust: 113.8%;
	ascent-override: 84.7%;
	descent-override: 21.9%;
	line-gap-override: 0%;
}

/* -------------------------------------------------------------------------
 * Tokens (light)
 * ---------------------------------------------------------------------- */
:root {
	color-scheme: light;

	--ig-font: "Montserrat", "Montserrat Fallback", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	--ig-bg: #f7f4ee;
	--ig-bg-2: color-mix(in srgb, var(--ig-bg) 86%, var(--ig-accent));
	--ig-surface: #fff;
	--ig-text: #1d2a24;
	--ig-muted: #56635d;
	--ig-accent: #5f8a73;
	--ig-accent-ink: #fff;
	--ig-accent-2: #d99a7a;
	--ig-accent-3: #a79bd6;
	--ig-line: rgb(29 42 36 / 0.13);
	/* rgb channels, used as rgb(var(--ig-shade) / .2) */
	--ig-shade: 22 38 30;

	/* Derived from the accent so a Customizer colour keeps working in both modes. */
	--ig-accent-strong: color-mix(in srgb, var(--ig-accent) 62%, var(--ig-text));
	--ig-accent-soft: color-mix(in srgb, var(--ig-accent) 16%, transparent);
	--ig-btn-bg: color-mix(in srgb, var(--ig-accent) 82%, var(--ig-text));
	--ig-btn-hover: color-mix(in srgb, var(--ig-accent) 66%, var(--ig-text));
	--ig-focus: var(--ig-accent-strong);
	--ig-tint: color-mix(in srgb, var(--ig-text) 6%, transparent);
	--ig-tint-2: color-mix(in srgb, var(--ig-text) 11%, transparent);
	--ig-ok: #2f6b4a;
	--ig-ok-soft: color-mix(in srgb, #2f6b4a 12%, transparent);
	--ig-err: #a63d3d;
	--ig-err-soft: color-mix(in srgb, #a63d3d 10%, transparent);

	/* Ambient pastel blobs: sage, peach, lavender, sand. */
	--ig-blob: 1;
	--ig-blob-1: 169 196 178;
	--ig-blob-2: 233 191 166;
	--ig-blob-3: 201 193 234;
	--ig-blob-4: 239 220 184;
	--ig-blob-alpha: 1;

	/* Liquid glass. --ig-glass is the Customizer multiplier (0 off, 1 default, 1.5 max). */
	--ig-glass: 1;
	--ig-glass-blur: calc(6px + 16px * var(--ig-glass));
	--ig-glass-filter: blur(var(--ig-glass-blur)) saturate(calc(1 + 0.7 * var(--ig-glass)));
	--ig-glass-fill: color-mix(in srgb, var(--ig-surface) calc(70% - 20% * var(--ig-glass)), transparent);
	--ig-glass-fill-strong: color-mix(in srgb, var(--ig-surface) calc(86% - 14% * var(--ig-glass)), transparent);
	--ig-glass-solid: color-mix(in srgb, var(--ig-surface) 94%, var(--ig-bg));
	--ig-glass-border: rgb(255 255 255 / calc(0.5 * var(--ig-glass)));
	--ig-glass-hi: rgb(255 255 255 / calc(0.85 * var(--ig-glass)));
	--ig-glass-sheen: linear-gradient(145deg, rgb(255 255 255 / calc(0.32 * var(--ig-glass))) 0%, rgb(255 255 255 / 0) 42%);

	--ig-radius-s: 12px;
	--ig-radius-m: 20px;
	--ig-radius-l: 28px;
	--ig-radius-pill: 999px;

	--ig-space-1: 0.25rem;
	--ig-space-2: 0.5rem;
	--ig-space-3: 0.75rem;
	--ig-space-4: 1rem;
	--ig-space-5: 1.5rem;
	--ig-space-6: 2rem;
	--ig-space-7: clamp(2.5rem, 1.75rem + 2.5vw, 3.5rem);
	--ig-space-8: clamp(3.5rem, 2rem + 6vw, 7rem);

	--ig-container: 72rem;
	--ig-narrow: 46rem;
	--ig-gutter: clamp(1rem, 0.5rem + 2.5vw, 2rem);
	--ig-header-h: 4.25rem;
	--ig-adminbar: var(--wp-admin--admin-bar--height, 0px);

	--ig-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--ig-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
	--ig-ease-spring: cubic-bezier(0.32, 0.72, 0, 1);
	--ig-dur-press: 100ms;
	--ig-dur-fast: 160ms;
	--ig-dur: 240ms;
	--ig-dur-slow: 320ms;
}

/* Tokens (dark). A head script sets data-theme before first paint. */
:root[data-theme="dark"] {
	color-scheme: dark;

	--ig-bg: #121815;
	--ig-surface: #26332c;
	--ig-text: #eaf0ec;
	--ig-muted: #a3b1a9;
	--ig-accent: #86b79e;
	--ig-accent-ink: #0e1511;
	--ig-accent-2: #e0a98c;
	--ig-accent-3: #b9aee6;
	--ig-line: rgb(255 255 255 / 0.13);
	--ig-shade: 0 0 0;

	--ig-accent-strong: color-mix(in srgb, var(--ig-accent) 78%, #fff);
	--ig-accent-soft: color-mix(in srgb, var(--ig-accent) 20%, transparent);
	--ig-btn-bg: var(--ig-accent);
	--ig-btn-hover: color-mix(in srgb, var(--ig-accent) 84%, #fff);
	--ig-ok: #8fd0a9;
	--ig-ok-soft: color-mix(in srgb, #8fd0a9 14%, transparent);
	--ig-err: #f0a0a0;
	--ig-err-soft: color-mix(in srgb, #f0a0a0 12%, transparent);

	--ig-blob-1: 74 112 92;
	--ig-blob-2: 140 92 70;
	--ig-blob-3: 98 88 150;
	--ig-blob-4: 120 104 70;
	--ig-blob-alpha: 0.55;

	--ig-glass-fill: color-mix(in srgb, var(--ig-surface) calc(62% - 18% * var(--ig-glass)), transparent);
	--ig-glass-fill-strong: color-mix(in srgb, var(--ig-surface) calc(86% - 14% * var(--ig-glass)), transparent);
	--ig-glass-border: rgb(255 255 255 / calc(0.1 * var(--ig-glass)));
	--ig-glass-hi: rgb(255 255 255 / calc(0.2 * var(--ig-glass)));
	--ig-glass-sheen: linear-gradient(145deg, rgb(255 255 255 / calc(0.07 * var(--ig-glass))) 0%, rgb(255 255 255 / 0) 42%);
}

/* Browsers without color-mix (before 2023) get solid values for the derived tokens. */
@supports not (color: color-mix(in srgb, red, blue)) {
	:root {
		--ig-bg-2: #e9e9dc;
		--ig-accent-strong: #456b57;
		--ig-accent-soft: rgb(95 138 115 / 0.16);
		--ig-tint: rgb(29 42 36 / 0.06);
		--ig-tint-2: rgb(29 42 36 / 0.11);
		--ig-btn-bg: #53795d;
		--ig-btn-hover: #456b57;
		--ig-glass-fill: rgb(255 255 255 / 0.55);
		--ig-glass-fill-strong: rgb(255 255 255 / 0.8);
		--ig-glass-solid: #fbfaf6;
		--ig-ok-soft: rgb(47 107 74 / 0.12);
		--ig-err-soft: rgb(166 61 61 / 0.1);
	}
	:root[data-theme="dark"] {
		--ig-bg-2: #1a221e;
		--ig-accent-strong: #b6d5c4;
		--ig-accent-soft: rgb(134 183 158 / 0.2);
		--ig-tint: rgb(255 255 255 / 0.07);
		--ig-tint-2: rgb(255 255 255 / 0.12);
		--ig-btn-hover: #a7cbb7;
		--ig-glass-fill: rgb(38 51 44 / 0.5);
		--ig-glass-fill-strong: rgb(38 51 44 / 0.8);
		--ig-glass-solid: #212c26;
	}
}

/* -------------------------------------------------------------------------
 * Reset and page
 * ---------------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}
html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	background: var(--ig-bg);
	scroll-padding-top: calc(var(--ig-header-h) + var(--ig-adminbar) + 1.5rem);
}
body {
	margin: 0;
	background: transparent;
	color: var(--ig-text);
	font-family: var(--ig-font);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.65;
	font-kerning: normal;
	overflow-wrap: break-word;
	hyphens: auto; /* Estonian compounds are long; the html lang attribute picks the dictionary */
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
body.ig-body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
}
.ig-main {
	flex: 1 0 auto;
	display: block;
}
/* Fixed, static wash behind the page: gives every glass layer something to refract. */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(44vmax 38vmax at 10% 6%, rgb(var(--ig-blob-1) / 0.6), transparent 70%),
		radial-gradient(38vmax 32vmax at 94% 16%, rgb(var(--ig-blob-3) / 0.5), transparent 70%),
		radial-gradient(42vmax 34vmax at 82% 96%, rgb(var(--ig-blob-2) / 0.45), transparent 70%),
		radial-gradient(34vmax 30vmax at 6% 90%, rgb(var(--ig-blob-4) / 0.4), transparent 70%);
	opacity: calc(0.7 * var(--ig-blob) * var(--ig-blob-alpha));
}

img,
svg,
video,
canvas {
	max-width: 100%;
}
img,
video {
	height: auto;
}
svg {
	flex: none;
}
::selection {
	background: color-mix(in srgb, var(--ig-accent) 30%, transparent);
}
:focus-visible {
	outline: 2px solid var(--ig-focus);
	outline-offset: 3px;
}

/* -------------------------------------------------------------------------
 * Typography
 * ---------------------------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	font-weight: 560;
	line-height: 1.15;
	letter-spacing: -0.02em;
	text-wrap: balance;
}
h1 {
	font-size: clamp(2.125rem, 1.55rem + 2.4vw, 3.5rem);
	line-height: 1.08;
	letter-spacing: -0.03em;
}
h2 {
	font-size: clamp(1.625rem, 1.3rem + 1.35vw, 2.5rem);
}
h3 {
	font-size: clamp(1.125rem, 1.07rem + 0.25vw, 1.3125rem);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.01em;
}
h4 {
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -0.005em;
}
h5,
h6 {
	font-size: 0.8125rem;
	font-weight: 650;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
p,
dl,
figure,
blockquote,
pre {
	margin: 0;
}
:where(ul, ol) {
	margin: 0;
	padding-left: 1.25rem;
}
p {
	text-wrap: pretty;
}
strong,
b {
	font-weight: 650;
}
small {
	font-size: 0.875em;
}
a {
	color: var(--ig-accent-strong);
	text-decoration-line: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
	text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
	transition:
		color var(--ig-dur-fast) var(--ig-ease-out),
		text-decoration-color var(--ig-dur-fast) var(--ig-ease-out);
}
a:hover {
	color: var(--ig-text);
	text-decoration-color: currentColor;
}
hr {
	height: 1px;
	margin: var(--ig-space-6) 0;
	border: 0;
	background: var(--ig-line);
}
abbr[title] {
	text-decoration-thickness: 1px;
}
code,
kbd,
samp,
pre {
	font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
	font-size: 0.9em;
}
address {
	font-style: normal;
}

/* -------------------------------------------------------------------------
 * Layout primitives
 * ---------------------------------------------------------------------- */
.ig-container {
	width: 100%;
	max-width: var(--ig-container);
	margin-inline: auto;
	padding-inline: var(--ig-gutter);
}
.ig-container--narrow {
	max-width: var(--ig-narrow);
}
.ig-section {
	position: relative;
	padding-block: var(--ig-space-8);
}
.ig-section--tint {
	background: color-mix(in srgb, var(--ig-bg-2) 72%, transparent);
}
.ig-section__title {
	margin-bottom: var(--ig-space-5);
}
.ig-section__lead {
	max-width: 60ch;
	color: var(--ig-muted);
	font-size: clamp(1.0625rem, 1rem + 0.45vw, 1.3125rem);
	line-height: 1.6;
}
.ig-stack > * + * {
	margin-top: var(--ig-space-4);
}
.ig-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	margin: 0;
	color: var(--ig-accent-strong);
	font-size: 0.75rem;
	font-weight: 650;
	line-height: 1.4;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}
/* break-word does not shrink min-content, so a long word still widens a grid or flex track at large text sizes. */
:is(h1, h2, h3, h4, h5, h6, .ig-eyebrow, .ig-btn) {
	overflow-wrap: anywhere;
}
.ig-eyebrow::before {
	content: "";
	flex: none;
	width: 1.5rem;
	height: 1px;
	background: currentColor;
}
.ig-muted {
	color: var(--ig-muted);
}

/* WP layout classes add block-gap margins that fight grid/flex gaps. */
:is(.ig-grid, .ig-split, .ig-steps, .ig-price, .ig-hero__inner, .ig-hero__panel, .ig-footer__grid, .ig-header__inner, .ig-brand) > * {
	margin-block: 0;
}

.screen-reader-text,
.ig-sr {
	position: absolute !important; /* must beat plugin resets */
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}
.ig-hp {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.ig-skip {
	position: fixed;
	top: calc(var(--ig-adminbar) + 0.75rem);
	left: 0.75rem;
	z-index: 1000;
	padding: 0.75rem 1.25rem;
	border-radius: var(--ig-radius-pill);
	background: var(--ig-btn-bg);
	color: var(--ig-accent-ink);
	font-weight: 600;
	text-decoration: none;
	transform: translateY(-200%);
	transition: transform var(--ig-dur-fast) var(--ig-ease-out);
}
.ig-skip:focus {
	transform: none;
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
 * Scroll reveal. Hidden only when theme.js runs (it adds .ig-reveal-on after the first screen is measured; the head script's .js must not hide anything); JS removes the class after the fade.
 * ---------------------------------------------------------------------- */
.ig-reveal-on .ig-reveal:not(.is-in) {
	opacity: 0;
	transform: translateY(8px);
}
.ig-reveal-on .ig-reveal {
	transition:
		opacity var(--ig-dur-slow) var(--ig-ease-out),
		transform var(--ig-dur-slow) var(--ig-ease-out);
}

@media (prefers-reduced-motion: reduce) {
	/* a11y override: must win over component transitions and keyframes. */
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		transition-delay: 0s !important;
		scroll-behavior: auto !important;
	}
	.ig-reveal-on .ig-reveal:not(.is-in) {
		opacity: 1;
		transform: none;
	}
}