/* ===== Variables ===== */
:root {
	--bg: #ffffff;
	--fg: #1a1a1a;
	--fg-dim: #6b6b6b;
	--accent: #2b6adf;
	--border: #d8d8d8;
	--surface: #f7f7f7;
	--font-mono: "JetBrains Mono", "Courier New", monospace;
}
[data-theme="dark"] {
	--bg: #121212;
	--fg: #e2e2e2;
	--fg-dim: #a1a1a1;
	--accent: #6aa7ff;
	--border: #2a2a2a;
	--surface: #1a1a1a;
}

/* ===== Reset ===== */
* {
	box-sizing: border-box;
}
html,
body {
	height: 100%;
}
html {
	font-size: 16px;
}
body {
	margin: 0;
	color: var(--fg);
	background: var(--bg);
	font-family: var(--font-mono);
	line-height: 1.45;
}
a {
	color: var(--accent);
	text-decoration: none;
}
a:hover {
	opacity: 0.9;
}
img {
	max-width: 100%;
	display: block;
}

/* ===== Layout ===== */
.header {
	position: sticky;
	top: 0;
	z-index: 50;
	border-bottom: 1px solid var(--border);
	background: var(--bg);
}
.header-content {
	max-width: 960px;
	margin: 0 auto;
	padding: 10px 14px;
	display: flex;
	align-items: center;
	gap: 18px;
}
.site-title {
	color: var(--fg);
	font-weight: 700;
}
.prompt {
	color: var(--accent);
}
.header-rail {
	position: absolute;
	right: 10px;
	top: 10px;
}
.theme-toggle {
	font: inherit;
	background: var(--surface);
	color: var(--fg);
	border: 1px solid var(--border);
	padding: 6px 10px;
	cursor: pointer;
}

/* ===== Nav with dropdowns ===== */
.nav {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}
.nav-item {
	position: relative;
}
.nav-link,
.nav-button {
	display: inline-block;
	padding: 6px 10px;
	border: 1px solid transparent;
	color: var(--fg);
	background: transparent;
	cursor: pointer;
}
.nav-button {
	font: inherit;
}
.nav-link:focus-visible,
.nav-button:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

/* submenu (works for .menu and .nav-menu) */
.menu,
.nav-menu {
	position: absolute;
	left: 0;
	top: 100%;
	min-width: 12rem;
	background: var(--bg);
	border: 1px solid var(--border);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
	display: none;
	padding: 6px 0;
	margin: 0;
	z-index: 100;
}
.menu a,
.nav-menu a {
	display: block;
	padding: 7px 10px;
	color: var(--fg);
}
.menu a:hover,
.nav-menu a:hover {
	background: var(--surface);
}
/* open on hover or keyboard focus; no gap */
.nav-item:hover > .menu,
.nav-item:focus-within > .menu {
	display: block;
}
.nav-item:hover > .nav-menu,
.nav-item:focus-within > .nav-menu {
	display: block;
}

/* ===== Page shell ===== */
main {
	max-width: 960px;
	margin: 20px auto;
	padding: 0 14px;
	display: block;
}
.section-box {
	border: 1px solid var(--border);
	background: var(--surface);
	padding: 14px;
	margin: 14px 0;
	border-radius: 8px;
}
footer {
	max-width: 960px;
	margin: 30px auto;
	padding: 0 14px 20px;
	color: var(--fg-dim);
}

/* ===== Home grid (used by second HTML) ===== */
.home-grid {
	max-width: 960px;
	margin: 20px auto;
	padding: 0 14px;
	display: grid;
	grid-template-columns: 1fr 300px;
	gap: 14px;
}
.sidebar .section-box {
	position: sticky;
	top: 62px;
}
.post-list {
	list-style: none;
	padding: 0;
	margin: 0;
}
.post-item {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	padding: 6px 0;
	border-top: 1px solid var(--border);
}
.post-item:first-child {
	border-top: none;
}

/* ===== Small screens ===== */
@media (max-width: 760px) {
	.home-grid {
		grid-template-columns: 1fr;
	}
	.header-content {
		flex-wrap: wrap;
	}
	.header-rail {
		position: static;
		margin-left: auto;
	}
	.menu,
	.nav-menu {
		min-width: 11rem;
	}
}