/*
 * Dark theme on the Catppuccin Mocha palette (as in sofka).
 * Keep --lavender in sync with params.style.vars.highlightColor.
 */
:root {
	--crust: #11111b;
	--mantle: #181825;
	--base: #1e1e2e;
	--surface0: #313244;
	--surface1: #45475a;
	--overlay0: #6c7086;
	--overlay1: #7f849c;
	--subtext0: #a6adc8;
	--text: #cdd6f4;
	--lavender: #b4befe;
	--teal: #94e2d5;
	--yellow: #f9e2af;
	--blue: #89b4fa;
	--peach: #fab387;
	--green: #a6e3a1;
	--red: #f38ba8;

	--font-mono: "JetBrains Mono", SFMono-Regular, Menlo, Consolas, monospace;
	--font-body: Inter, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

	color-scheme: dark;
}

/* Layout: full-width header/footer, footer pinned to the bottom of short pages */
.body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.65;
	color: var(--text);
	background: var(--crust);
}

.container--outer {
	box-shadow: none;
}

.wrapper {
	background: var(--base);
	border: 1px solid var(--surface1);
	border-radius: 6px;
}

/* Monospace for headings, menu, meta and UI chrome */
h1, h2, h3, h4, h5, h6,
.logo, .menu, .meta, .widget__title, .tags, .toc, .btn,
.pager, .pagination, .footer, .authorbox__name,
input, button {
	font-family: var(--font-mono);
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
	color: var(--teal);
}

.content h2, .content h3, .content h4 {
	color: var(--yellow);
}

a {
	color: var(--blue);
}

a:hover {
	color: var(--peach);
}

.content a, .warning a, .authorbox__description a {
	font-weight: 400;
	color: var(--blue);
}

.content a:hover, .warning a:hover, .authorbox__description a:hover {
	color: var(--peach);
}

hr {
	border-top-color: var(--surface1);
}

mark {
	color: var(--crust);
	background-color: var(--yellow);
}

figcaption, abbr[title] {
	color: var(--overlay1);
	border-bottom-color: var(--overlay1);
}

blockquote {
	color: var(--subtext0);
	border-left: 3px solid var(--lavender);
}

code {
	color: var(--peach);
}

pre, code {
	background-color: var(--mantle);
	border: 1px solid var(--surface0);
	border-radius: 4px;
}

pre code {
	border: 0;
}

/* Chroma sets its own background on highlighted blocks; match the frame */
.highlight pre {
	background-color: var(--mantle) !important;
}

pre {
	color: var(--text);
}

kbd {
	color: var(--base);
	background-color: var(--lavender);
	border-radius: 3px;
}

table, td, th {
	border-color: var(--surface1);
}

th {
	font-family: var(--font-mono);
	color: var(--yellow);
}

/* Header */
.header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--mantle);
}

/* One rounded frame around the info panel and the ASCII art */
.header__container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
	width: calc(100% - 50px);
	max-width: 1080px;
	margin: 22px auto 16px;
	border: 1px solid var(--lavender);
	border-radius: 8px;
}

.header__ascii {
	padding: 10px 25px;
	margin: 0;
	font-family: var(--font-mono);
	font-size: .7rem;
	line-height: 1.15;
	color: var(--overlay1);
	background: none;
	border: 0;
}

/* Logo as a sofka-style panel: rounded lavender frame, title set into the top border */
.logo {
	flex: 1 1 auto;
	padding: 18px 20px 14px;
	text-align: left;
}

.logo__link {
	position: absolute;
	top: 0;
	left: 14px;
	padding: 0 8px;
	background: var(--mantle);
	transform: translateY(-50%);
}

.logo__title {
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--teal);
	text-transform: lowercase;
}

.logo__title::before {
	color: var(--lavender);
	content: "~/";
}

.logo__link:hover .logo__title {
	color: var(--lavender);
}

.logo__panel {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 2px 18px;
	margin: 0;
	font-size: .85rem;
	line-height: 1.5;
}

.logo__panel dt {
	color: var(--overlay1);
}

.logo__panel dd {
	margin: 0;
	color: var(--text);
}

.logo__value--name { color: var(--lavender) !important; }
.logo__value--host { color: var(--blue) !important; }
.logo__value--topics { color: var(--peach) !important; }

/* Menu: lavender frame lines, [ bracketed ] lowercase items */
.header__menu {
	background: var(--mantle);
	border-top: 1px solid var(--surface0);
	border-bottom: 1px solid var(--lavender);
}

.header__menu .menu,
.menu {
	border-bottom: 0;
}

.menu__list,
.menu__btn {
	color: var(--text);
	background: var(--mantle);
}

.menu__item {
	border-left: 0;
}

.menu__item:hover,
.menu__item--active {
	background: none;
}

.menu__link {
	font-weight: 400;
	color: var(--subtext0);
	text-transform: lowercase;
}

.menu__text::before {
	color: var(--overlay0);
	content: ":[";
}

.menu__text::after {
	color: var(--overlay0);
	content: "]";
}

.menu__link:hover,
.menu__item--active .menu__link {
	color: var(--lavender);
}

.menu__item--active .menu__link {
	font-weight: 700;
}

.js .menu__btn--active {
	color: var(--lavender);
}

/* Meta, post list, author box */
.meta, .meta a {
	color: var(--overlay1);
}

.meta a:hover {
	color: var(--peach);
}

.meta__icon {
	fill: var(--overlay0);
}

.post__meta,
.list__item,
.authorbox,
.authorbox__avatar,
.pager {
	border-color: var(--surface0);
}

.post__title,
.list__title a {
	color: var(--teal);
}

.list__title a:hover {
	color: var(--lavender);
}

.authorbox__avatar {
	border-radius: 4px;
}

.authorbox__avatar .avatar {
	border-radius: 2px;
}

/* Buttons, tags, pagination: flat [ bracketed ] text */
.btn,
.tags__item,
.pagination__item {
	color: var(--subtext0);
	background: none;
}

.btn:hover,
.tags__item:hover,
.pagination__item:hover,
.pagination__item--current {
	color: var(--lavender);
	background: none;
}

.tags {
	color: var(--subtext0);
}

.tags__badge {
	display: none;
}

.tags__link {
	color: var(--green);
	text-transform: lowercase;
}

.tags__link::before,
.widget-taglist__link::before,
.pagination__item::before {
	color: var(--overlay0);
	content: "[ ";
}

.tags__link::after,
.widget-taglist__link::after,
.pagination__item::after {
	color: var(--overlay0);
	content: " ]";
}

.tags__link:hover {
	color: var(--lavender);
}

/* Table of contents */
.toc {
	color: var(--subtext0);
	background: var(--mantle);
	border-color: var(--surface1);
}

.toc__title {
	color: var(--yellow);
	background: none;
	border-bottom: 1px solid var(--surface1);
}

.toc__menu a {
	color: var(--blue);
	border-bottom-color: var(--surface0);
}

/* Sidebar widgets: teal titles over a thin lavender rule, like sofka panels */
.widget__title {
	padding-bottom: 6px;
	font-size: .9rem;
	color: var(--teal);
	text-transform: lowercase;
	border-bottom: 1px solid var(--lavender);
}

.widget__title::before {
	color: var(--lavender);
	content: "\250C\2500 ";
}

.widget__item {
	border-bottom-color: var(--surface0);
}

.widget__link {
	color: var(--text);
}

.widget__link:hover {
	color: var(--lavender);
}

.widget-taglist__link {
	padding: 2px 0;
	margin: 0 8px 6px 0;
	font-weight: 400;
	color: var(--green);
	text-transform: lowercase;
}

.widget-social__link {
	font-weight: 400;
	color: var(--subtext0);
}

.widget-social__link-icon {
	fill: var(--lavender);
}

.widget-social__link:hover {
	color: var(--lavender);
}

.widget__counter--bubble {
	color: var(--overlay1);
	background: var(--surface0);
}

/* Forms and search */
input,
textarea,
.widget-search__field {
	color: var(--text);
	background: var(--mantle);
	border: 1px solid var(--surface1);
	border-radius: 4px;
}

input:hover,
textarea:hover {
	border-color: var(--overlay0);
}

.widget-search__form {
	padding: 0;
	background: none;
}

.widget-search__field::placeholder {
	color: var(--overlay0);
}

.widget-search__field:active,
.widget-search__field:focus {
	outline: 1px solid var(--lavender);
}

input[type=submit],
input[type=reset] {
	color: var(--base);
	background: var(--lavender);
}

/* Footer */
.footer {
	margin-top: auto;
	color: var(--overlay1);
	background: var(--mantle);
	border-top: 1px solid var(--lavender);
}

.footer a {
	color: var(--subtext0);
}

.footer a:hover {
	color: var(--peach);
	text-decoration: none;
}

/* Small screens: hide the ASCII art, keep header compact */
@media screen and (max-width: 767px) {
	.header__ascii {
		display: none;
	}

	.wrapper {
		border-right: 0;
		border-left: 0;
		border-radius: 0;
	}
}