/* global.css - platform chrome shared across all pages
   Loaded by Layout.astro before every page-specific stylesheet.
   Keep only styles that apply to every page: tokens, reset, html/body,
   texture, header, footer, focus, utilities, and shared mobile rules.
   Page-specific overrides (e.g. sticky header) live in the page stylesheet. */

:root {
	/* Type scale - Minor Third x1.2 */
	--sz-xs: 0.6875rem; /* 11px */
	--sz-sm: 0.8125rem; /* 13px */
	--sz-base: 0.9375rem; /* 15px */
	--sz-md: 1.0625rem; /* 17px */
	--sz-display: 1.75rem; /* 28px */

	--gold: #ffaa00;
	--gold-dim: #cc8800;
	--green: #7ed17a;

	/* Chrome - warm dark brown (not black - reads as same family as dirt) */
	--bg-chrome: #221608;
	--bg-page: #1a1208;

	/* Cards - slightly lighter/warmer than chrome for elevation */
	--bg-card: #201608;
	--bg-card-hov: #281e0c;

	--bg-panel: #1c1208;

	--border-chrome: #3a2a16;
	--border-dim: #2e2010;
	--border-med: #3e2e18;

	/* Text - three tiers:
     --text-pri:   primary content - names, values, body copy
     --text-label: secondary content - labels, stats, metadata (passes WCAG AA)
     --text-muted: decoration only - separators, dividers (fails AA - never for readable text) */
	--text-pri: #f0e6d0;
	--text-label: #b8a478;
	--text-muted: #6a5838;

	--text-on-gold: #0c0800;

	--font-brand: "Cinzel Decorative", "Cinzel", serif;
	--font-d: "Cinzel", serif;
	--font-b: "Outfit", sans-serif;

	/* Inventory slot colours - NPC Bazaar tool
     Warm translation of vanilla MC slot palette:
       MC interior  #8b8b8b -> warm #3a2810  (medium warm brown - items pop)
       MC shadow    #373737 -> warm #100a04  (deep dark brown - top/left border)
       MC highlight #c6c6c6 -> warm #5a4028  (lighter warm brown - bottom/right) */
	--slot-bg: #3a2810;
	--slot-shadow: #100a04;
	--slot-hi: #5a4028;

	--bg-input: #160e06;
	--border-input: #2a1e0e;

	--block-texture-size: 128px;
	--accent-rail-width: 4px;
	--card-radius: 10px;
	--card-shadow: 0 2px 4px rgba(0, 0, 0, 0.35), 0 4px 8px rgba(0, 0, 0, 0.25);
	--card-shadow-hover: 0 4px 8px rgba(0, 0, 0, 0.45), 0 8px 16px rgba(0, 0, 0, 0.3);
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/* overflow-x: clip (not hidden) avoids breaking position:sticky while preventing
   the 100vw pseudo-element scrollbar-width overflow on Windows.
   scrollbar-gutter: stable reserves the scrollbar track width even when no scrollbar
   is visible, so layout does not shift when switching between pages that scroll and
   pages that do not.
   Track matches --bg-page (#1a1208) so the reserved gutter is invisible when there
   is nothing to scroll. Thumb appears only when content overflows.
   Hardcoded hex used - CSS variables are unreliable in scrollbar pseudo-elements. */
html {
	overflow-x: clip;
	scroll-behavior: smooth;
	scrollbar-gutter: stable;
	background-color: #1a1208; /* --bg-page - makes the reserved gutter invisible when not scrolling */
	scrollbar-color: #7a5820 #201608; /* thumb: card accent, track: --bg-card */
	scrollbar-width: thin;
}

::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

::-webkit-scrollbar-track {
	background: #201608; /* --bg-card */
}

::-webkit-scrollbar-thumb {
	background: #7a5820; /* card accent at rest */
	border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
	background: #ffaa00; /* --gold */
}

body {
	font-family: var(--font-b);
	background-color: var(--bg-page);
	background-image: linear-gradient(rgba(8, 4, 0, 0.25), rgba(8, 4, 0, 0.25)), url("../images/dirt.avif");
	background-repeat: repeat;
	background-size:
		auto,
		var(--block-texture-size) var(--block-texture-size);
	image-rendering: pixelated;
	color: var(--text-pri);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.page-content {
	flex: 1;
}

.angie-card {
	--angie-card-accent: #7a5820;
	background: var(--bg-card);
	border: 1px solid var(--border-dim);
	border-radius: var(--card-radius);
	box-shadow: var(--card-shadow);
	position: relative;
	overflow: hidden;
}

.angie-card::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: var(--accent-rail-width);
	background: var(--angie-card-accent);
	border-radius: var(--card-radius) 0 0 var(--card-radius);
	transition: background 0.2s;
}

.angie-card--interactive {
	transition:
		border-color 0.2s,
		background 0.2s,
		transform 0.18s,
		box-shadow 0.2s;
}

.angie-card--interactive:hover {
	border-color: var(--border-med);
	background: var(--bg-card-hov);
	transform: translateY(-3px);
	box-shadow: var(--card-shadow-hover);
}

.angie-card--interactive:hover::before {
	background: var(--gold);
}

.angie-card--muted {
	opacity: 0.72;
	cursor: default;
}

@media (prefers-reduced-motion: reduce) {
	.angie-card--interactive {
		transition:
			border-color 0.2s,
			background 0.2s;
	}

	.angie-card--interactive:hover {
		transform: none;
	}
}

/* Header - base styles shared by all pages.
   Pages that want a sticky header (e.g. homepage) add position:sticky in their
   own stylesheet. Tool pages use a sticky toolbar instead, so the header scrolls. */
header {
	background: rgba(34, 22, 8, 0.96);
	border-bottom: 1px solid var(--border-chrome);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

.header-inner {
	max-width: 1700px;
	margin: 0 auto;
	padding: 0 1.5rem;
	height: 64px;
	display: flex;
	align-items: center;
	gap: 1.1rem;
}

.logo-name {
	font-family: var(--font-d);
	font-size: var(--sz-display);
	font-weight: 700;
	color: var(--gold);
	letter-spacing: 0.04em;
	text-shadow: 0 0 24px rgba(255, 170, 0, 0.22);
	flex-shrink: 0;
	line-height: 1;
	text-decoration: none;
}

.logo-divider {
	width: 1px;
	height: 24px;
	background: var(--border-med);
	flex-shrink: 0;
}

.header-nav {
	display: flex;
	align-items: center;
	gap: 0.1rem;
}

/* Hamburger button - hidden on desktop, shown on mobile */
.hamburger-btn {
	display: none;
	background: none;
	border: none;
	color: var(--text-pri);
	cursor: pointer;
	padding: 0.6875rem;
	border-radius: 6px;
	line-height: 0;
}
.hamburger-btn:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Mobile nav drawer */
.mobile-nav-drawer {
	display: none;
	background: var(--bg-chrome);
	border-bottom: 1px solid var(--border-chrome);
	padding: 0.75rem 1.5rem;
	flex-direction: column;
	gap: 0.25rem;
}
.mobile-nav-drawer.is-open {
	display: flex;
}
.mobile-nav-drawer .nav-link {
	padding: 0.625rem 0;
}

.nav-link {
	background: transparent;
	border: none;
	padding: 0.4rem 0.9rem;
	font-family: var(--font-b);
	font-size: var(--sz-base);
	font-weight: 500;
	color: var(--text-label);
	cursor: pointer;
	border-radius: 6px;
	transition:
		color 0.15s,
		background 0.15s;
	display: flex;
	align-items: center;
	gap: 0.35rem;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
}

.nav-link:hover {
	color: var(--text-pri);
	background: rgba(255, 255, 255, 0.04);
}

.nav-link.active {
	color: var(--text-pri);
}

.nav-link--planned {
	cursor: default;
}

.soon {
	display: inline-flex;
	align-items: center;
	font-size: var(--sz-xs);
	font-weight: 600;
	color: var(--text-label);
	background: var(--border-dim);
	border-radius: 3px;
	padding: 2px 5px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1;
}

footer {
	background: rgba(34, 22, 8, 0.96);
	border-top: 1px solid var(--border-chrome);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

.footer-inner {
	max-width: 1700px;
	margin: 0 auto;
	padding: 0 1.5rem;
	height: 52px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.footer-left {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	flex-shrink: 0;
}

.footer-logo {
	font-family: var(--font-d);
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--gold);
	letter-spacing: 0.04em;
	line-height: 1;
	text-decoration: none;
}

.footer-logo-sep {
	width: 1px;
	height: 14px;
	background: var(--border-med);
}

.footer-links {
	display: flex;
	align-items: center;
	gap: 0.2rem;
}

.footer-link {
	background: transparent;
	border: none;
	font-family: var(--font-b);
	font-size: var(--sz-xs);
	color: var(--text-label);
	cursor: pointer;
	padding: 0.25rem 0.45rem;
	border-radius: 4px;
	transition: color 0.15s;
	text-decoration: none;
}

.footer-link:hover {
	color: var(--text-pri);
}

.footer-dot {
	font-size: var(--sz-xs);
	color: var(--border-med);
	user-select: none;
	padding: 0 0.05rem;
}

.footer-right {
	font-size: var(--sz-xs);
	color: var(--text-label);
	display: flex;
	align-items: center;
	gap: 0.3rem;
	white-space: nowrap;
	flex-shrink: 0;
}

.footer-right .by {
	font-weight: 500;
}

/* Focus outlines - keyboard nav only, not mouse clicks */
button:focus-visible,
a:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 2px;
	border-radius: 4px;
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (max-width: 640px) {
	/* Header: hide desktop nav and divider; show hamburger instead */
	.header-nav,
	.logo-divider {
		display: none;
	}

	.hamburger-btn {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.header-inner {
		padding: 0 0.75rem;
		height: 52px;
	}

	/* Footer: stack vertically, auto height */
	.footer-inner {
		padding: 0.65rem 0.75rem;
		height: auto;
		flex-direction: column;
		align-items: flex-start;
		gap: 0.35rem;
	}

	.footer-right {
		white-space: normal;
		flex-wrap: wrap;
	}
}