/* ==========================================================================
   The Six Kilometer Kingdom — brand layer for the temples section.
   Mirrors the Angkor Now design tokens (src/app.css) at their dark-theme
   values, since this section is intentionally dark-only: warm temple-dark
   surfaces, Cormorant Garamond display, Inter body, sun/sandstone accents.
   ========================================================================== */

:root {
	--font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
	--font-body: 'Inter', ui-sans-serif, system-ui, sans-serif;
	--font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

	/* Dark-theme surfaces (values from app.css [data-theme='dark']) */
	--bg: #070a08;
	--bg-elevated: #0f1411;
	--bg-card: #151d19;
	--bg-deep: #030504;
	--fg: #ecf2ee;
	--fg-2: #cad3cc;
	--fg-3: #89958e;
	--fg-4: #5a6660;
	--line: rgba(220, 240, 230, 0.07);
	--line-strong: rgba(220, 240, 230, 0.16);

	/* Temple-adjacent accents: sandstone motif + sun + turmeric (dark values) */
	--sandstone: #7a5e38;
	--sand-300: #d4b87a;
	--sun-300: #d4a030;
	--sun-tint: #24200f;
	--turmeric: #d4a26a;
	--turmeric-deep: #7a4f18;
	--turmeric-tint: #261d0f;
	--accent: var(--sun-300);
	--accent-hover: #e8c060;

	--radius-card: 0.625rem;
	--radius-pill: 9999px;
	--shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.2), 0 8px 24px rgba(0, 0, 0, 0.35);
}

/* ── Base ─────────────────────────────────────────────────────────────── */
.an-page {
	background: var(--bg);
	color: var(--fg);
	font-family: var(--font-body);
}

.an-wrap {
	max-width: 80rem;
	margin: 0 auto;
	padding-left: 24px;
	padding-right: 24px;
}

/* ── Header (glass-nav clone) ─────────────────────────────────────────── */
.an-header {
	position: sticky;
	top: 0;
	z-index: 900;
	background: color-mix(in srgb, var(--bg) 80%, transparent);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border-bottom: 0.5px solid var(--line);
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.03);
}
.an-header .bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-top: 16px;
	padding-bottom: 16px;
}
.an-brand {
	display: flex;
	align-items: baseline;
	gap: 10px;
	text-decoration: none;
	flex-shrink: 0;
}
.an-brand .name {
	font-family: var(--font-display);
	font-size: 20px;
	font-weight: 500;
	letter-spacing: -0.01em;
	color: var(--fg);
	line-height: 1;
}
.an-brand .tag {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--fg-4);
}
.an-links {
	display: flex;
	align-items: center;
	gap: 24px;
	list-style: none;
	margin: 0;
	padding: 0;
	overflow-x: auto;
	scrollbar-width: none;
	flex: 1;
	min-width: 0;
}
.an-links::-webkit-scrollbar { display: none; }
.an-link {
	font-size: 13px;
	font-weight: 500;
	color: var(--fg-3);
	text-decoration: none;
	transition: color 0.15s;
	white-space: nowrap;
}
.an-link:hover { color: var(--fg); }
.an-link.active { color: var(--accent); }
.an-city {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fg-3);
	text-decoration: none;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-pill);
	padding: 8px 14px;
	white-space: nowrap;
	transition: color 0.15s, border-color 0.15s;
	flex-shrink: 0;
}
.an-city:hover { color: var(--accent); border-color: var(--sandstone); }
@media (max-width: 640px) {
	.an-brand .tag { display: none; }
	.an-header .bar { gap: 14px; }
	.an-city { padding: 6px 10px; }
}

/* ── Footer (mirrors +layout.svelte footer) ───────────────────────────── */
.an-footer {
	background: var(--bg-elevated);
	border-top: 1px solid var(--line);
}
.an-footer .cols {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
	padding-top: 48px;
	padding-bottom: 48px;
}
@media (min-width: 640px) {
	.an-footer .cols { grid-template-columns: repeat(3, 1fr); }
}
.an-footer .brand-name {
	font-family: var(--font-display);
	font-size: 20px;
	font-weight: 500;
	color: var(--fg);
	margin: 0 0 10px;
}
.an-footer .blurb {
	line-height: 1.65;
	font-size: 13px;
	color: var(--fg-3);
	margin: 0;
}
.an-footer .mail {
	display: inline-block;
	margin-top: 14px;
	font-size: 12px;
	color: var(--accent);
	text-decoration: none;
}
.an-foot-head {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--fg-4);
	margin: 0 0 14px;
}
.an-foot-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.an-foot-link {
	color: var(--fg-3);
	text-decoration: none;
	font-size: 13px;
	transition: color 0.15s;
}
.an-foot-link:hover { color: var(--accent); }
.an-legal {
	border-top: 1px solid var(--line);
	padding: 16px;
	text-align: center;
	font-size: 11px;
	color: var(--fg-4);
}
.an-legal p { margin: 0; }

/* ── Telegram FAB (same as app, minus themes) ─────────────────────────── */
.an-fab {
	position: fixed;
	bottom: 24px;
	right: 24px;
	z-index: 300;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: #2aabee;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	box-shadow: 0 4px 16px rgba(42, 171, 238, 0.3);
	transition: transform 0.15s;
}
.an-fab:hover { transform: scale(1.08); }
.an-fab svg { margin-left: -2px; margin-top: 1px; }