/**
 * Tribal Order Vault theme — global chrome + base.
 * =============================================================================
 * Extends "The Vault Ledger" (the plugin's language) to the whole site: sticky
 * obsidian header with the gold nav, footer, base typography, and the page
 * container system. Global tokens live on :root here; the plugin re-declares the
 * same values scoped to .tov-db so it stays self-contained under any theme.
 * =============================================================================
 */

:root {
	/* The site is committed dark; tell the UA so native controls, scrollbars
	   and autofill tints render in-scheme instead of popping white. */
	color-scheme: dark;

	--tov-bg: #0a0a0b;
	--tov-bg-2: #0d0d0f;
	--tov-surface: #151517;
	--tov-surface-2: #1b1b1f;
	--tov-surface-3: #232329;

	--tov-gold: #d4a24e;
	--tov-gold-bright: #ecc677;
	--tov-gold-deep: #8a6a2f;
	--tov-line: rgba(212, 162, 78, 0.18);
	--tov-line-strong: rgba(212, 162, 78, 0.55);

	--tov-text: #f4f1ea;
	--tov-text-muted: #a19d95;
	/* WCAG AA: #6f6b64 on #0a0a0b was 3.74:1 — below 4.5:1 for the small (9–13px)
	   labels this drives. Nudged to #857f75 (~4.99:1) to pass at those sizes. */
	--tov-text-dim: #857f75;
	--tov-focus: #ecc677;

	--tov-font-display: "Oswald", "Bebas Neue", "Arial Narrow", sans-serif;
	--tov-font-body: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;

	--tov-header-h: 68px;
	--tov-max: 1200px;
	--tov-wide: 1600px;

	--tov-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- base ---------- */
body {
	font-family: var(--tov-font-body);
	font-size: 16px;
	line-height: 1.6;
	color: var(--tov-text);
	background: var(--tov-bg);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

/* faint global grain + top glow so the black is never flat */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	opacity: 0.35;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

.tovt-site {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

a {
	color: var(--tov-gold);
	text-decoration: none;
	transition: color 0.15s var(--tov-ease);
}
a:hover {
	color: var(--tov-gold-bright);
}

h1, h2, h3, h4 {
	font-family: var(--tov-font-display);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: 0.01em;
	color: var(--tov-text);
	margin: 0 0 0.5em;
}

:focus-visible {
	outline: 2px solid var(--tov-focus);
	outline-offset: 2px;
}

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

.tovt-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: 10px 16px;
	background: var(--tov-gold);
	color: var(--tov-bg);
	font-family: var(--tov-font-display);
	font-weight: 600;
}
.tovt-skip:focus {
	left: 8px;
	top: 8px;
}

/* ---------- containers ---------- */
.tovt-container {
	width: 100%;
	max-width: var(--tov-max);
	margin: 0 auto;
	padding: 0 24px;
}
.tovt-prose {
	max-width: 72ch;
}
.tovt-prose p,
.tovt-prose ul,
.tovt-prose ol {
	color: var(--tov-text-muted);
}
.tovt-prose a {
	text-decoration: underline;
	text-underline-offset: 2px;
}

#tovt-main {
	flex: 1 0 auto;
	padding: 40px 0 72px;
}
/* front page (the Database) manages its own width — no container padding */
.home #tovt-main,
.tovt-main--bleed {
	padding: 0 0 40px;
}

/* ---------- header ---------- */
.tovt-header {
	position: sticky;
	top: 0;
	z-index: 40;
	background: rgba(10, 10, 11, 0.86);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--tov-line);
}

.tovt-header__bar {
	display: flex;
	align-items: center;
	gap: 24px;
	height: var(--tov-header-h);
	max-width: var(--tov-wide);
	margin: 0 auto;
	padding: 0 24px;
}

.tovt-brand {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
}
.tovt-brand img,
.tovt-brand .custom-logo {
	height: 44px;
	width: auto;
	max-width: 40vw;
	object-fit: contain;
	display: block;
}
.tovt-wordmark {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	font-family: var(--tov-font-display);
	font-weight: 700;
	font-size: 22px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--tov-text);
}
.tovt-wordmark em {
	font-style: normal;
	color: var(--tov-gold);
}

/* primary nav */
.tovt-nav {
	margin-left: auto;
}
.tovt-nav ul {
	display: flex;
	align-items: center;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.tovt-nav a {
	display: inline-flex;
	align-items: center;
	height: var(--tov-header-h);
	padding: 0 16px;
	font-family: var(--tov-font-display);
	font-weight: 500;
	font-size: 14px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--tov-text-muted);
	position: relative;
}
.tovt-nav a:hover {
	color: var(--tov-text);
}
.tovt-nav .current-menu-item > a,
.tovt-nav .current_page_item > a {
	color: var(--tov-gold);
}
.tovt-nav .current-menu-item > a::after,
.tovt-nav .current_page_item > a::after {
	content: "";
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 0;
	height: 2px;
	background: var(--tov-gold);
}

/* account affordance — the entry point to the Trading Post. Deliberately a
   button rather than another nav link: it is the only call to action in the
   header and must not read as a fourth section tab. */
.tovt-account {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	/* 44px: the house touch target — this is the single entry point to the
	   Trading Post and the 68px header bar has the room. */
	height: 44px;
	padding: 0 18px;
	border: 1px solid var(--tov-line-strong);
	/* 2px: the shared radius scale is 2/5/9/999; 3 was off-scale. */
	border-radius: 2px;
	font-family: var(--tov-font-display);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--tov-gold);
	white-space: nowrap;
	transition: background-color 0.16s var(--tov-ease), color 0.16s var(--tov-ease);
}
.tovt-account:hover,
.tovt-account:focus-visible {
	background: var(--tov-gold);
	color: var(--tov-bg);
}

/* mobile toggle */
.tovt-nav-toggle {
	display: none;
	margin-left: auto;
	width: 44px;
	height: 44px;
	padding: 0;
	color: var(--tov-text);
	background: transparent;
	border: 1px solid var(--tov-line);
	border-radius: 5px;
	cursor: pointer;
}
.tovt-nav-toggle svg {
	width: 22px;
	height: 22px;
	display: block;
	margin: 0 auto;
}

/* ---------- footer ---------- */
.tovt-footer {
	flex: 0 0 auto;
	margin-top: auto;
	padding: 40px 0 32px;
	background: var(--tov-bg-2);
	border-top: 1px solid var(--tov-line);
}
.tovt-footer__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	max-width: var(--tov-wide);
	margin: 0 auto;
	padding: 0 24px;
}
.tovt-footer__brand {
	font-family: var(--tov-font-display);
	font-weight: 700;
	font-size: 18px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--tov-text);
}
.tovt-footer__brand em {
	font-style: normal;
	color: var(--tov-gold);
}
.tovt-footer nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.tovt-footer nav a {
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--tov-text-muted);
}
.tovt-footer nav a:hover {
	color: var(--tov-gold);
}
.tovt-footer__legal {
	width: 100%;
	margin-top: 8px;
	font-size: 12px;
	color: var(--tov-text-dim);
}

/* ---------- buttons / base forms ---------- */
.tovt-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 20px;
	font-family: var(--tov-font-display);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--tov-bg);
	background: var(--tov-gold);
	border: 1px solid var(--tov-gold-deep);
	/* 5px: nearest step on the shared 2/5/9/999 radius scale; 6 was off-scale. */
	border-radius: 5px;
	cursor: pointer;
	transition: background 0.15s var(--tov-ease);
}
.tovt-btn:hover {
	background: var(--tov-gold-bright);
	color: var(--tov-bg);
}
.tovt-btn--ghost {
	color: var(--tov-text);
	background: transparent;
	border-color: var(--tov-line-strong);
}
.tovt-btn--ghost:hover {
	color: var(--tov-gold);
	background: var(--tov-surface);
	border-color: var(--tov-gold);
}

/* ---------- page title / hero ---------- */
.tovt-page-head {
	margin-bottom: 28px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--tov-line);
}
.tovt-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 6px;
	font-family: var(--tov-font-display);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--tov-gold);
}
.tovt-eyebrow::before {
	content: "";
	width: 24px;
	height: 1px;
	background: linear-gradient(90deg, var(--tov-gold), transparent);
}
.tovt-page-title {
	margin: 0;
	font-size: clamp(2rem, 4vw, 3rem);
	text-transform: uppercase;
}

/* ---------- 404 / empty ---------- */
.tovt-notice {
	text-align: center;
	padding: 72px 24px;
}
.tovt-notice h1 {
	font-size: clamp(2.5rem, 8vw, 5rem);
	color: var(--tov-gold);
}

/* ---------- responsive ---------- */
@media (max-width: 860px) {
	.tovt-nav-toggle {
		display: grid;
		place-items: center;
	}
	/* The header bar holds three in-flow children here (.tovt-nav is fixed and
	   out of flow). .tovt-nav-toggle declared a width but no flex shorthand, so
	   it was the only shrinkable item and absorbed the whole overflow — it
	   collapsed to min-content and was pushed past the viewport edge, where
	   body{overflow-x:hidden} clipped it. That left the drawer with no opener
	   on every phone. flex: 0 0 44px is the load-bearing line; the brand
	   becoming shrinkable is what pays for it.

	   No `order` anywhere on purpose: DOM order is brand -> toggle -> account,
	   so visual order and focus order agree at every width. */
	.tovt-header__bar {
		gap: 12px;
		padding: 0 16px;
	}
	.tovt-brand {
		flex: 0 1 auto;
		min-width: 0;
		overflow: hidden;
	}
	.tovt-wordmark {
		font-size: 17px;
		white-space: nowrap;
	}
	.tovt-account {
		height: 44px;
		padding: 0 12px;
		font-size: 12px;
	}
	.tovt-nav-toggle {
		flex: 0 0 44px;
	}
	.tovt-nav {
		position: fixed;
		inset: var(--tov-header-h) 0 auto 0;
		margin: 0;
		background: var(--tov-bg);
		border-bottom: 1px solid var(--tov-line);
		max-height: 0;
		overflow: hidden;
		/* `visibility` — not just max-height — is what takes the collapsed links out
		   of the tab order and the accessibility tree. With clipping alone a keyboard
		   user tabbed off the hamburger into N invisible links inside a 0-height box,
		   while aria-expanded="false" said the menu was closed. Held at 0s until the
		   collapse finishes so the drawer still animates shut. */
		visibility: hidden;
		transition: max-height 0.3s var(--tov-ease), visibility 0s 0.3s;
	}
	.tovt-nav.is-open {
		max-height: 80vh;
		visibility: visible;
		transition: max-height 0.3s var(--tov-ease), visibility 0s 0s;
	}
	.tovt-nav ul {
		flex-direction: column;
		align-items: stretch;
		padding: 8px 0;
	}
	.tovt-nav a {
		height: 52px;
		padding: 0 24px;
	}
	.tovt-nav .current-menu-item > a::after,
	.tovt-nav .current_page_item > a::after {
		left: 24px;
		right: auto;
		width: 20px;
	}
}

@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
	}
}