/* Kromia shell: the kromia.ro header, fonts and footer for the wiki and the forum.
   Colours come from /presentation/css/tokens.css (loaded before this file). */

@font-face { font-family: "Solmoe KimDaeGeon"; src: url("/presentation/assets/fonts/solmoe-kimdaegeon-light.woff2") format("woff2"); font-weight: 100 400; font-display: swap; }
@font-face { font-family: "Solmoe KimDaeGeon"; src: url("/presentation/assets/fonts/solmoe-kimdaegeon-medium.woff2") format("woff2"); font-weight: 500 900; font-display: swap; }
@font-face { font-family: "Solmoe KimDaeGeon"; src: url("/presentation/assets/fonts/solmoe-i18n-light.woff2") format("woff2"); font-weight: 100 400; font-display: swap; unicode-range: U+00AB, U+00BB, U+00C0-00C4, U+00C7-00CF, U+00D1-00D6, U+00D9-00DD, U+00DF-00E4, U+00E7-00EF, U+00F1-00F6, U+00F9-00FD, U+0102-0107, U+010C-010F, U+0116-011B, U+011E-011F, U+0130-0131, U+0141-0144, U+0147-0148, U+0150-0151, U+0158-015B, U+015E-0165, U+016E-0171, U+0179-017E, U+0218-021B, U+201E; }
@font-face { font-family: "Solmoe KimDaeGeon"; src: url("/presentation/assets/fonts/solmoe-i18n-medium.woff2") format("woff2"); font-weight: 500 900; font-display: swap; unicode-range: U+00AB, U+00BB, U+00C0-00C4, U+00C7-00CF, U+00D1-00D6, U+00D9-00DD, U+00DF-00E4, U+00E7-00EF, U+00F1-00F6, U+00F9-00FD, U+0102-0107, U+010C-010F, U+0116-011B, U+011E-011F, U+0130-0131, U+0141-0144, U+0147-0148, U+0150-0151, U+0158-015B, U+015E-0165, U+016E-0171, U+0179-017E, U+0218-021B, U+201E; }
@font-face { font-family: "Solmoe Fallback"; src: local("Georgia"); size-adjust: 100.9%; ascent-override: 79.3%; descent-override: 24.8%; line-gap-override: 0%; }
@font-face { font-family: "Onest"; src: url("/presentation/assets/fonts/onest-var.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Onest"; src: url("/presentation/assets/fonts/onest-ext-var.woff2") format("woff2"); font-weight: 300 700; font-display: swap; unicode-range: U+0100-024F; }
@font-face { font-family: "Onest"; src: url("/presentation/assets/fonts/onest-i18n-latin-var.woff2") format("woff2"); font-weight: 300 700; font-display: swap; unicode-range: U+00A0-00A3, U+00A5, U+00A8-00AB, U+00AE-00B4, U+00B6, U+00B8-00D6, U+00D8-00E1, U+00E3-00E6, U+00E8-00E9, U+00EB-00F0, U+00F2-00FB, U+00FD-00FF, U+0131, U+2018, U+201A, U+201E, U+2026, U+2039-203A; }
@font-face { font-family: "Onest"; src: url("/presentation/assets/fonts/onest-i18n-ext-var.woff2") format("woff2"); font-weight: 300 700; font-display: swap; unicode-range: U+0100-0102, U+0104-010B, U+010D-0130, U+0132-0151, U+0154-0160, U+0162-017F, U+0218-021B; }
@font-face { font-family: "Onest Fallback"; src: local("Segoe UI"); size-adjust: 103.7%; ascent-override: 93.6%; descent-override: 29.4%; line-gap-override: 0%; }

/* page */
html.kx-shell, body.kx-shell { background: var(--bg-900); }
body.kx-shell {
	color: var(--text-primary);
	font-family: var(--font-body);
	-webkit-font-smoothing: antialiased;
	background:
		linear-gradient(180deg, rgb(var(--bg-900-rgb) / .55), rgb(var(--bg-900-rgb) / .92) 520px, var(--bg-900) 900px),
		var(--scene) center top / cover no-repeat fixed,
		var(--bg-900);
}

/* header — same layout as .portal-header on kromia.ro */
.kx-header {
	position: relative; z-index: 900;
	height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px;
	padding: 0 max(24px, calc((100% - 1420px) / 2));
	background: #140c09f2; border-bottom: 1px solid #c9a24a40; box-shadow: 0 4px 20px #0006;
	font-family: var(--font-body); box-sizing: border-box;
}
.kx-header *, .kx-mobile * { box-sizing: border-box; }
.kx-brand { display: flex; align-items: center; flex: none; }
.kx-brand img { width: 150px; height: auto; display: block; }
.kx-nav { display: flex; gap: 30px; align-items: center; }
.kx-nav a, .kx-mobile a {
	font: 500 13px var(--font-display); text-transform: uppercase; letter-spacing: 1px;
	text-decoration: none !important; color: var(--text-secondary) !important; white-space: nowrap;
	position: relative; padding: 6px 0; background: none !important;
}
.kx-nav a:hover, .kx-mobile a:hover { color: var(--brass-300) !important; }
.kx-nav a[aria-current="page"] { color: var(--brass-300) !important; }
.kx-nav a[aria-current="page"]::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
	background: linear-gradient(90deg, transparent, var(--crimson-300), transparent);
}
.kx-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; min-width: 150px; }
.kx-lang { position: relative; display: inline-flex; }
.kx-lang select {
	appearance: none; -webkit-appearance: none; margin: 0;
	font: 600 12px var(--font-body); letter-spacing: .5px; line-height: normal;
	padding: 7px 28px 7px 11px; height: auto; min-height: 0; width: auto; max-width: 150px;
	color: var(--brass-300); background: var(--bg-900); border: 1px solid var(--bg-600); border-radius: 6px; cursor: pointer;
	box-shadow: none;
}
.kx-lang::after {
	content: ""; position: absolute; right: 11px; top: 50%; width: 6px; height: 6px; margin-top: -5px;
	border-right: 1.5px solid var(--brass-300); border-bottom: 1.5px solid var(--brass-300);
	transform: rotate(45deg); pointer-events: none;
}
.kx-lang select:hover { border-color: var(--brass-400); }
.kx-lang option { color: var(--text-primary); background: var(--bg-800); }
.kx-burger {
	display: none; width: 42px; height: 42px; padding: 0; margin: 0;
	border: 1px solid var(--bg-600); border-radius: 6px; background: transparent;
	color: var(--brass-300); font-size: 23px; line-height: 1; cursor: pointer;
}
.kx-mobile {
	position: absolute; z-index: 899; left: 0; right: 0; top: 64px;
	background: var(--bg-800); padding: 16px 24px; border-bottom: 1px solid var(--brass-400);
	display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.kx-mobile[hidden] { display: none; }
.kx-mobile a { font-size: 13px; color: var(--brass-300) !important; }

@media (max-width: 1180px) {
	.kx-nav { gap: 21px; }
	.kx-nav a { font-size: 11px; }
	.kx-nav a:first-child { display: none; }
}
@media (max-width: 900px) {
	.kx-header { height: 64px; padding: 0 18px; }
	.kx-brand img { width: 120px; }
	.kx-nav { display: none; }
	.kx-actions { min-width: 0; }
	.kx-lang select { max-width: 132px; padding-inline-start: 9px; }
	.kx-burger { display: block; }
}

/* section banner under the header (title of the wiki / forum) */
.kx-banner {
	position: relative; text-align: center; padding: 30px 20px 26px;
	border-bottom: 1px solid #c9a24a33;
	background: linear-gradient(180deg, rgb(var(--bg-900-rgb) / .1), rgb(var(--bg-900-rgb) / .65));
}
.kx-banner__eyebrow {
	display: block; font: 500 12px var(--font-display); letter-spacing: var(--track-micro);
	text-transform: uppercase; color: var(--brass-300);
}
.kx-banner__title {
	display: block; margin-top: 6px;
	font: 500 clamp(30px, 4.4vw, 52px)/1.05 var(--font-display); letter-spacing: var(--track-display);
	text-transform: uppercase; color: var(--text-primary); text-shadow: var(--title-glow);
}
.kx-banner__lede { display: block; margin-top: 8px; color: var(--text-secondary); font-size: 15px; }

/* footer */
.kx-footer {
	margin-top: 40px; padding: 26px 20px 30px; text-align: center;
	border-top: 1px solid #c9a24a33; background: #0d0806e6;
	font: 400 13px var(--font-body); color: var(--text-secondary);
}
.kx-footer strong { display: block; font: 500 14px var(--font-display); letter-spacing: 2px; color: var(--brass-300); text-transform: uppercase; }
.kx-footer nav { margin-top: 10px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; }
.kx-footer a { color: var(--text-secondary) !important; text-decoration: none !important; }
.kx-footer a:hover { color: var(--brass-300) !important; }