/* =================================================================
   Public surfaces (landing page + QR menu) — shared base.
   No Tabler here: these pages are for guests on phones, so they stay
   small. Colours come from the BrandStyles view (--brand-50 … 950,
   --brand-accent), so Admin → Settings re-themes them too.
   ================================================================= */

:root {
	--site-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--site-display: "Bahnschrift", "DIN Alternate", "DIN Condensed", "Roboto Condensed", "Arial Narrow", sans-serif-condensed, var(--site-font);
	--site-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, "Liberation Mono", monospace;

	--site-deep: var(--brand-950);
	--site-deep-2: var(--brand-900);
	--site-cream: #f3efe2;
	--site-cream-muted: rgba(243, 239, 226, 0.72);
	--site-ink: #102119;
	--site-ink-muted: #4d5f56;
	--site-paper: #fbfaf5;
	--site-line: rgba(16, 33, 25, 0.1);

	--site-radius: 16px;
	--site-radius-sm: 10px;
	--site-gutter: clamp(16px, 4vw, 40px);
	--site-max: 1120px;
}

*,
*::before,
*::after { box-sizing: border-box; }

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

body {
	margin: 0;
	font-family: var(--site-font);
	font-size: 16px;
	line-height: 1.55;
	color: var(--site-ink);
	background: var(--site-paper);
	-webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }

h1, h2, h3, h4 { margin: 0; line-height: 1.15; }

p { margin: 0; }

:focus-visible {
	outline: 2px solid var(--brand-accent);
	outline-offset: 3px;
	border-radius: 4px;
}

.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;
}

.brand-mark { width: 100%; height: auto; }

.plane-icon { width: 1em; height: 1em; }

/* Display type — condensed, tracked capitals (aviation signage). */
.site-eyebrow {
	font-family: var(--site-display);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--brand-accent);
}

/* Buttons. */
.site-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	min-height: 48px;
	padding: 0.75rem 1.4rem;
	border: 2px solid transparent;
	border-radius: 999px;
	font-family: var(--site-display);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.site-btn:hover { transform: translateY(-1px); }

.site-btn .plane-icon { transform: rotate(45deg); }

.site-btn-accent {
	background: var(--brand-accent);
	color: var(--brand-accent-fg);
}

.site-btn-accent:hover { background: var(--site-cream); color: var(--site-ink); }

.site-btn-ghost {
	border-color: rgba(243, 239, 226, 0.4);
	color: var(--site-cream);
}

.site-btn-ghost:hover { border-color: var(--site-cream); background: rgba(243, 239, 226, 0.08); }

.site-btn-dark {
	background: var(--site-deep);
	color: var(--site-cream);
}

.site-btn-dark:hover { background: var(--brand-800); }

/* Language switch — "MK · EN". */
.site-langs {
	display: inline-flex;
	gap: 0.25rem;
	padding: 0.2rem;
	border-radius: 999px;
	background: rgba(243, 239, 226, 0.1);
}

.site-lang {
	min-width: 2.4rem;
	padding: 0.3rem 0.6rem;
	border-radius: 999px;
	font-family: var(--site-display);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--site-cream-muted);
}

.site-lang:hover { color: var(--site-cream); }

.site-lang.is-current {
	background: var(--site-cream);
	color: var(--site-deep);
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation: none !important; transition: none !important; }
}