/* ============================================
   CSS Custom Properties
   ============================================ */

/* Light Mode (Default) */
:root {
	color-scheme: light dark;

	/* Background Colors */
	--color-bg: #fafafa;
	--color-bg-content: #fff;
	--color-bg-secondary: #f4f4f5;
	--color-bg-dark: #18181b;

	/* Text Colors */
	--color-text: #09090b;
	--color-text-secondary: #52525b;
	--color-text-muted: #71717a;
	--color-text-subtle: #a1a1aa;
	--color-text-inverse: #fff;

	/* Border Colors */
	--color-border: #e4e4e7;
	--color-border-hover: #a1a1aa;

	/* Accent Colors */
	--color-highlight: #2563EB;
	--color-mark: #fef08a;

	/* Code Colors */
	--color-code-bg: #f4f4f5;
	--color-code-text: #18181b;

	/* Icon Colors */
	--color-icon: #d4d4d8;
	--color-icon-meta: #a1a1aa;

	/* Typography */
	--font-family-primary: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--font-family-secondary: "JetBrains Mono", SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
	:root {
		/* Background Colors */
		--color-bg: #09090b;
		--color-bg-content: #18181b;
		--color-bg-secondary: #27272a;
		--color-bg-dark: #3f3f46;

		/* Text Colors */
		--color-text: #fafafa;
		--color-text-secondary: #d4d4d8;
		--color-text-muted: #a1a1aa;
		--color-text-subtle: #71717a;

		/* Border Colors */
		--color-border: #3f3f46;
		--color-border-hover: #52525b;

		/* Accent Colors (slightly brighter for dark mode) */
		--color-highlight: #3b82f6;
		--color-mark: #ca8a04;

		/* Code Colors */
		--color-code-bg: #27272a;
		--color-code-text: #e4e4e7;

		/* Icon Colors */
		--color-icon: #52525b;
		--color-icon-meta: #71717a;
	}
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

article,
aside,
dialog,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section {
	display: block;
}

:focus::placeholder {
	color: transparent;
}

/* Structure */
html {
	font-size: 100%;
	-webkit-text-size-adjust: none;
}

body {
	margin: 0;
	font-family: var(--font-family-primary);
	font-size: 16px;
	font-size: 1rem;
	line-height: 1.7;
	word-wrap: break-word;
	background: var(--color-bg);
	-webkit-font-smoothing: antialiased;
}

.container {
	position: relative;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
}

.container--outer {
	margin: 32px auto;
}

.wrapper {
	padding: 32px;
	background: var(--color-bg-content);
}

.flex {
	display: flex;
}

.primary {
	flex: 1 0 70%;
	order: 1;
	min-width: 0;
}

.sidebar {
	flex: 1 0 27%;
	order: 2;
	min-width: 0;
	margin: 0 0 0 3%;
}

.sidebar--left {
	order: 0;
	margin: 0 3% 0 0;
}

.clearfix {
	display: block;
}

.clearfix::after {
	display: block;
	height: 0;
	padding: 0;
	margin: 0;
	clear: both;
	line-height: 0;
	visibility: hidden;
	content: "";
}

input,
button,
select,
optgroup,
textarea {
	margin: 0;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
}

/* Button */
.btn {
	padding: 8px 16px;
	font-weight: 500;
	color: var(--color-text-inverse);
	white-space: pre-line;
	background: var(--color-bg-dark);
	border-radius: 4px;
}

.btn:hover {
	color: var(--color-text-inverse);
	background: var(--color-highlight);
}

.btn:focus-visible {
	outline: 2px solid var(--color-highlight);
	outline-offset: 2px;
}

/* Back to top */
.back-to-top {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 1000;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(6px);
	transition: background-color .2s ease, opacity .2s ease, transform .2s ease;
}

.back-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
}

.back-to-top__icon {
	fill: var(--color-text-inverse);
}

/* Animation */
.menu__item,
.btn {
	transition: background-color .2s ease;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 24px;
	margin: 0 0 1.5rem;
	font-weight: 600;
	line-height: 1.25;
	color: var(--color-text);
}

h1 {
	font-size: 40px;
	font-size: 2.5rem;
}

h2 {
	font-size: 32px;
	font-size: 2rem;
}

h3 {
	font-size: 24px;
	font-size: 1.5rem;
}

h4 {
	font-size: 20px;
	font-size: 1.25rem;
}

h5 {
	font-size: 16px;
	font-size: 1rem;
}

h6 {
	font-size: 16px;
	font-size: 1rem;
}

a {
	color: var(--color-text);
	text-decoration: none;
	transition: color .2s ease;
}

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

hr {
	margin: 0 0 24px;
	border: 0;
	border-top: 1px solid var(--color-border);
}

p {
	margin: 0 0 24px;
	margin: 0 0 1.5rem;
}

b,
strong {
	font: inherit;
	font-weight: 700;
}

i,
em {
	font: inherit;
	font-style: italic;
}

ol,
ul {
	padding: 0;
	margin: 0;
}

small {
	font-size: 14px;
	font-size: .875rem;
}

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

figure {
	margin: 0 0 24px;
	margin: 0 0 1.5rem;
}

figcaption {
	margin-top: 8px;
	margin-top: .5rem;
	color: var(--color-text-muted);
}

figcaption h4 {
	margin: 0;
	color: inherit;
}

pre,
code,
kbd,
samp {
	font-family: var(--font-family-secondary);
	font-size: inherit;
}

pre,
code {
	background-color: var(--color-code-bg);
	border: 1px solid var(--color-border);
}

code {
	padding: 2px 6px;
	color: var(--color-code-text);
	border-radius: 4px;
}

pre {
	display: block;
	padding: 1.5rem;
	margin-bottom: 24px;
	margin-bottom: 1.5rem;
	overflow: auto;
	color: var(--color-code-text);
	border-radius: 4px;
}

pre code {
	padding: 0;
	color: inherit;
	white-space: inherit;
	background: inherit;
	border: 0;
}

kbd {
	padding: 2px 6px;
	color: var(--color-text-inverse);
	background-color: var(--color-bg-dark);
	border-radius: 4px;
}

blockquote {
	display: block;
	padding: 16px 0 16px 24px;
	margin: 0 0 24px;
	margin: 0 0 1.5rem;
	line-height: 1.7;
	border-left: 3px solid var(--color-highlight);
}

blockquote p:last-child {
	margin: 0;
}

blockquote footer {
	text-align: right;
}

sup,
sub {
	font-size: 10px;
	font-size: .625rem;
	font-style: normal;
}

sup {
	vertical-align: super;
}

sub {
	vertical-align: sub;
}

abbr[title] {
	text-decoration: none;
	cursor: help;
	border-bottom: 1px dotted var(--color-text-muted);
}

q {
	font-style: italic;
}

address {
	margin-bottom: 24px;
	margin-bottom: 1.5rem;
	font-family: var(--font-family-secondary);
	line-height: 1.6;
}

dl {
	margin: 0 0 10px 20px;
}

dt,
dd {
	display: list-item;
}

dt {
	font-weight: bold;
	list-style-type: square;
}

dd {
	margin-left: 20px;
	list-style-type: circle;
}

select {
	max-width: 100%;
}

.warning {
	padding: 24px 16px;
	text-align: center;
	border: 1px solid var(--color-border);
}

.warning__icon {
	margin-bottom: 16px;
	fill: var(--color-icon);
}

/* Header */
.header {
	background: var(--color-bg-content);
}

.logo {
	padding: 32px;
}

.logo__link {
	display: inline-block;
}

.logo__item {
	display: inline-block;
	vertical-align: middle;
}

.logo__img {
	max-height: 256px;
}

.logo__text {
	text-transform: none;
}

.logo--mixed .logo__item {
	margin: .5rem auto;
}

.logo--mixed .logo__img {
	max-width: 128px;
	max-height: 128px;
}

.logo--mixed .logo__text {
	padding: 0 1rem;
}

.logo__title {
	font-size: 28px;
	font-size: 1.75rem;
	font-weight: 600;
	line-height: 1;
	color: var(--color-text);
	letter-spacing: -0.02em;
}

.logo__tagline {
	display: inline-block;
	padding-top: 8px;
	margin-top: 8px;
	font-size: 14px;
	font-size: .875rem;
	font-weight: 400;
	line-height: 1;
	color: var(--color-text-muted);
	border-top: 1px solid var(--color-border);
}

.divider {
	height: 2px;
	margin: 0;
	background: var(--color-highlight);
	border: 0;
}

/* Main menu */
.no-js .menu__btn {
	display: none;
}

.menu__btn {
	display: block;
	width: 100%;
	padding: 0;
	font: inherit;
	color: var(--color-text-inverse);
	background: var(--color-bg-dark);
	border: 0;
	outline: 0;
}

.menu__btn-title {
	position: relative;
	display: block;
	padding: 12px 16px;
	padding: .75rem 1rem;
	font-weight: 500;
	text-align: right;
	text-transform: none;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}

:focus > .menu__btn-title {
	box-shadow: inset 0 0 1px 3px var(--color-highlight);
}

button:not(:-moz-focusring):focus > .menu__btn-title {
	box-shadow: none;
}

.menu__btn:focus,
.menu__btn-title:focus {
	outline: 0;
}

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

.menu__list {
	list-style: none;
	background: var(--color-bg-dark);
}

.menu__item:hover {
	background: var(--color-highlight);
}

.menu__item:first-child {
	border: 0;
}

.menu__item--active {
	background: var(--color-highlight);
}

.menu__link {
	display: block;
	padding: 12px 16px;
	padding: .75rem 1rem;
	font-weight: 500;
	color: var(--color-text-inverse);
	text-transform: none;
}

.menu__link:hover {
	color: var(--color-text-inverse);
}

.js .menu__list {
	position: absolute;
	z-index: 1;
	width: 100%;
	visibility: hidden;
	transform: scaleY(0);
	transform-origin: top left;
}

.js .menu__list--active {
	visibility: visible;
	border-top: 1px solid rgba(255, 255, 255, .1);
	border-bottom: 1px solid rgba(255, 255, 255, .1);
	transform: scaleY(1);
}

.menu__list--transition {
	transition: visibility .15s ease, transform .15s ease;
}

@media screen and (min-width: 767px) {
	.menu {
		border-bottom: 2px solid var(--color-highlight);
	}

	.menu__btn {
		display: none;
	}

	.menu__list,
	.js .menu__list {
		position: relative;
		display: flex;
		flex-wrap: wrap;
		visibility: visible;
		border: 0;
		transform: none;
	}

	.menu__item {
		border-left: 1px solid rgba(255, 255, 255, .1);
	}
}

/* Posts/Pages */
.post__header,
.main__header {
	margin-bottom: 24px;
	margin-bottom: 1.5rem;
}

.main__title {
	font-size: 32px;
	font-size: 2rem;
}

.main__content {
	margin-bottom: 24px;
	margin-bottom: 1.5rem;
}

.meta {
	font-size: 14px;
	font-size: .875rem;
	vertical-align: baseline;
}

.meta,
.meta a {
	color: var(--color-text-secondary);
}

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

.meta__item {
	display: inline;
	margin-left: 16px;
}

.meta__item:first-child {
	margin-left: 0;
}

.meta__icon {
	margin-right: 6px;
	vertical-align: middle;
	fill: var(--color-icon-meta);
}

.meta__text {
	vertical-align: middle;
}

.post__title {
	margin: 0;
}

.post__meta {
	padding: 8px 0;
	margin-top: 12px;
	margin-top: .75rem;
	border-top: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
}

.post__lead {
	margin-top: 8px;
	margin-top: .5rem;
	margin-bottom: 0;
	font-size: 18px;
	font-size: 1.125rem;
	font-style: normal;
	color: var(--color-text-secondary);
}

.post__thumbnail {
	max-width: 1030px;
	margin: 0 0 24px;
	margin: 0 0 1.5rem;
}

.post__thumbnail img {
	width: 100%;
}

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

.content a:hover,
.warning a:hover,
.authorbox__description a:hover {
	color: var(--color-highlight);
	text-decoration: underline;
}

.content .alignnone {
	display: block;
	margin: 24px 0;
	margin: 1.5rem 0;
}

.content .aligncenter {
	display: block;
	margin: 24px auto;
	margin: 1.5rem auto;
}

.content .alignleft {
	display: inline;
	float: left;
	margin: 8px 24px 24px 0;
	margin: .5rem 1.5rem 1.5rem 0;
}

.content .alignright {
	display: inline;
	float: right;
	margin: 8px 0 24px 24px;
	margin: .5rem 0 1.5rem 1.5rem;
}

.content ul {
	list-style: square;
}

.content ol {
	list-style: decimal;
}

.content ul,
.content ol {
	margin: 0 0 24px 32px;
}

.content ul ul,
.content ol ol,
.content ol ul,
.content ul ol {
	margin: 0 0 0 32px;
}

.content li {
	margin-bottom: 8px;
}

.post__footer {
	margin-top: 24px;
	margin-top: 1.5rem;
}

/* Post tags */
.tags {
	margin-bottom: 24px;
	margin-bottom: 1.5rem;
	font-size: 13px;
	font-size: .8125rem;
	line-height: 1;
	color: #fff;
}

.tags__list {
	list-style: none;
}

.tags__item {
	float: left;
	margin: 0 8px 8px 0;
	margin: 0 .5rem .5rem 0;
	text-transform: none;
	background: var(--color-bg-dark);
	border-radius: 4px;
}

.tags__item:hover {
	background: var(--color-highlight);
}

.tags__link,
.tags__link:hover {
	display: block;
	padding: 8px 12px;
}

.tags__link:focus-visible {
	outline: 2px solid var(--color-highlight);
	outline-offset: 2px;
}

.tags__badge {
	float: left;
	width: 32px;
	height: 32px;
	padding: 8px;
	margin-right: 8px;
	background: var(--color-highlight);
	border-radius: 4px;
	fill: #fff;
}

/* Table of Contents */
.toc {
	margin-bottom: 24px;
	font-weight: 500;
	color: var(--color-text-secondary);
	background: var(--color-bg-content);
	border: 1px solid var(--color-border);
	border-radius: 4px;
}

.toc__title {
	padding: 8px 16px;
	color: var(--color-text-inverse);
	text-transform: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	background: var(--color-bg-dark);
	border-radius: 4px 4px 0 0;
}

.toc__menu ul {
	margin: 0;
	list-style: none;
}

.toc__menu li li a {
	padding-left: 25px;
}

.toc__menu li li li a {
	padding-left: 45px;
}

.toc__menu li li li li a {
	padding-left: 65px;
}

.toc__menu li li li li li a {
	padding-left: 85px;
}

.toc__menu li li li li li li a {
	padding-left: 105px;
}

.toc__menu li {
	margin: 0;
}

.toc__menu a {
	display: block;
	padding: 8px 16px;
	color: var(--color-highlight);
	border-bottom: 1px solid var(--color-border);
}

.toc__menu a:hover {
	text-decoration: underline;
}

.toc__menu a:focus-visible {
	outline: 2px solid var(--color-highlight);
	outline-offset: -2px;
}

/* Post Container with Sidebar TOC
   The flex container uses align-items: flex-start to prevent
   the article from stretching unnecessarily. However, the TOC
   sidebar needs align-self: stretch for sticky positioning. */
.post-container {
	display: flex;
	gap: 32px;
	align-items: flex-start;
}

.post--with-sidebar {
	flex: 1;
	min-width: 0;
}

.post__toc-sidebar {
	flex: 0 0 280px;
	order: 2;
	/* IMPORTANT: align-self: stretch is required for position: sticky to work.
	   CSS sticky positioning only works when the parent container is taller
	   than the sticky element. Without stretch, the sidebar height equals
	   only the TOC content height, leaving no room for the element to "stick". */
	align-self: stretch;
}

.toc--sticky {
	position: sticky;
	top: 32px;
	max-height: calc(100vh - 64px);
	overflow-y: auto;
	margin-bottom: 0;
}

.toc--sticky::-webkit-scrollbar {
	width: 6px;
}

.toc--sticky::-webkit-scrollbar-track {
	background: transparent;
}

.toc--sticky::-webkit-scrollbar-thumb {
	background: var(--color-border);
	border-radius: 3px;
}

.toc--sticky::-webkit-scrollbar-thumb:hover {
	background: var(--color-text-secondary);
}

/* Responsive: Hide sidebar TOC on smaller screens */
@media screen and (max-width: 1023px) {
	/* CRITICAL FIX: Make primary content full width on tablets
	   The root cause of content overflow was .primary being constrained to 70%
	   even on tablets. With 768px screen width:
	   - (768 - 64px padding) * 0.7 = ~493px for .primary
	   - After 32px gap: ~461px for .post--with-sidebar
	   - Code blocks need 600-800px, causing overflow
	   Solution: Make .primary 100% width on tablets */
	.primary {
		flex: 1 0 100%;
	}

	.post-container {
		flex-direction: column;
	}

	.post--with-sidebar {
		width: 100%;
		max-width: 100%;
	}

	.post__toc-sidebar {
		flex: 1 1 auto;
		order: -1;
		width: 100%;
		max-width: 100%;
	}

	.toc--sticky {
		position: static;
		max-height: none;
		overflow-y: visible;
		margin-bottom: 24px;
	}

	/* Fix content overflow on tablets (last line of defense) */
	.post__content,
	.content {
		max-width: 100%;
		overflow-x: auto;
		overflow-wrap: break-word;
	}

	/* Fix code block overflow on tablets */
	pre {
		max-width: 100%;
		overflow-x: auto;
		word-break: break-all;
		white-space: pre-wrap;
	}

	/* Fix inline code overflow */
	code {
		word-break: break-word;
	}

	/* Fix table overflow on tablets */
	table {
		display: block;
		overflow-x: auto;
		max-width: 100%;
		-webkit-overflow-scrolling: touch;
	}
}

/* Author Box */
.authorbox {
	padding: 32px 0;
	margin-bottom: 32px;
	line-height: 1.6;
	border-top: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
}

.authorbox__avatar {
	float: left;
	padding: 0;
	margin: 0 24px 0 0;
	border: none;
	border-radius: 50%;
	overflow: hidden;
}

.authorbox__header {
	margin-bottom: 12px;
}

.authorbox__name {
	font-size: 18px;
	font-size: 1.125rem;
	font-weight: 600;
}

/* List content */
.list__item {
	padding-bottom: 24px;
	padding-bottom: 1.5rem;
	margin-bottom: 24px;
	margin-bottom: 1.5rem;
	border-bottom: 1px solid var(--color-border);
}

.list__header {
	margin-bottom: 12px;
	margin-bottom: .75rem;
}

.list__title {
	font-size: 22px;
	font-size: 1.375rem;
}

.list__meta {
	margin-top: 5px;
}

.list__thumbnail {
	float: left;
	margin: 0 20px 0 0;
}

.list__thumbnail img {
	width: 100%;
	max-width: 235px;
}

.list__footer-readmore {
	float: right;
	margin-top: 10px;
}

/* Pagination */
.pagination {
	margin-top: 24px;
}

.pagination__item {
	display: inline-block;
	padding: 10px 16px;
	font-weight: 500;
	color: var(--color-text);
	background: var(--color-bg-secondary);
	border-radius: 4px;
}

.pagination__item:hover,
.pagination__item--current {
	color: var(--color-text-inverse);
	background: var(--color-highlight);
}

.pagination__item:focus-visible {
	outline: 2px solid var(--color-highlight);
	outline-offset: 2px;
}

/* Pager (prev/next links) navigation */
.pager {
	justify-content: space-between;
	padding-top: 32px;
	padding-bottom: 32px;
	margin-bottom: 32px;
	border-bottom: 1px solid var(--color-border);
}

.pager__subtitle {
	display: block;
	margin-bottom: 8px;
	font-weight: 500;
	line-height: 1;
	text-transform: none;
	color: var(--color-text-muted);
}

.pager__title {
	margin-bottom: 0;
	overflow: hidden;
	font-size: 14px;
	font-size: .875rem;
}

.pager__item {
	flex: 1 1 50%;
	max-width: 48%;
}

.pager__item--next {
	margin-left: auto;
	text-align: right;
}

.pager__link {
	display: block;
}

/* Images / Video */
img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}

iframe,
embed,
object,
video {
	max-width: 100%;
}

/* Table */
table {
	width: 100%;
	margin-bottom: 24px;
	margin-bottom: 1.5rem;
	border-spacing: 0;
	border-collapse: collapse;
	border-top: 1px solid var(--color-border);
	border-left: 1px solid var(--color-border);
}

td,
th {
	padding: 8px 12px;
	border-right: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
}

th {
	font-weight: 600;
	background: var(--color-bg-secondary);
}

/* Forms */
input {
	padding: 8px 12px;
	font-size: 14px;
	vertical-align: middle;
	background: var(--color-bg-secondary);
	border: 1px solid var(--color-border);
	border-radius: 4px;
	transition: all .2s ease;
}

input[type=text],
input[type=email],
input[type=tel],
input[type=url] {
	width: 60%;
}

input[type=text]:hover,
input[type=email]:hover,
input[type=tel]:hover,
input[type=url]:hover,
textarea:hover {
	border: 1px solid var(--color-border-hover);
}

input[type=submit],
input[type=reset] {
	display: inline-block;
	min-width: 150px;
	padding: 12px 20px;
	font-weight: 500;
	color: var(--color-text-inverse);
	text-transform: none;
	cursor: pointer;
	background: var(--color-bg-dark);
	border: 0;
	border-radius: 4px;
	transition: all .2s ease;
	-webkit-appearance: none;
}

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

textarea {
	width: 96%;
	padding: 8px 12px;
	overflow: auto;
	line-height: 1.6;
	resize: vertical;
	background: var(--color-bg-secondary);
	border: 1px solid var(--color-border);
	border-radius: 4px;
}

/* Widgets */
.widget {
	margin-bottom: 32px;
	overflow: hidden;
}

.widget:last-child {
	margin-bottom: 0;
}

.widget__title {
	position: relative;
	padding-bottom: 8px;
	font-size: 14px;
	font-size: .875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	border-bottom: 2px solid var(--color-highlight);
}

.widget__item {
	display: block;
	padding: 8px 0;
	border-bottom: 1px solid var(--color-border);
}

.widget__item:first-child {
	padding-top: 0;
}

.widget__counter--bubble {
	display: inline-block;
	padding: 0 8px;
	font-size: .75rem;
	color: var(--color-text-muted);
	text-align: center;
	background: var(--color-bg-secondary);
	border-radius: 2em;
}

/* Search widget */
.widget-search__form {
	padding: 16px;
	background: var(--color-bg-secondary);
	border-radius: 4px;
}

.widget-search__submit[type=submit] {
	display: none;
}

.widget-search__field {
	width: 100%;
	padding: 10px 12px;
	font-size: 14px;
	cursor: pointer;
	background: var(--color-bg-content);
	border: 1px solid var(--color-border);
	border-radius: 4px;
	outline-offset: -2px;
	transition: none;
	-webkit-appearance: none;
}

.widget-search__field:active,
.widget-search__field:focus {
	cursor: text;
	outline: 2px solid var(--color-highlight);
}

/* Social widget */
.widget-social__item {
	padding: 0;
	border: 0;
}

.widget-social__link {
	display: block;
	margin: 0 0 8px;
	white-space: normal;
}

.widget-social__link-icon {
	margin: 0 5px 0 0;
	vertical-align: middle;
	fill: #fff;
}

/* Tags Widget */
.widget-taglist__link {
	display: inline-block;
	margin: 0 8px 8px 0;
	font-size: 13px;
	text-transform: none;
}

/* Languages Widget */
.widget-languages__link {
	display: block;
}

.widget-languages__link:hover .widget-languages__link-btn {
	color: var(--color-text-inverse);
	background: var(--color-highlight);
}

.widget-languages__link-btn {
	display: inline-block;
}

/* Footer */
.footer {
	padding: 16px 32px;
	font-size: 14px;
	font-size: .875rem;
	color: var(--color-text-subtle);
	background: var(--color-bg-dark);
	border-top: none;
}

.footer__container {
	flex-flow: row wrap;
	justify-content: space-between;
}

.footer__links {
	order: 1;
}

.footer a {
	color: #fff;
}

.footer a:hover {
	text-decoration: underline;
}

/* Media Queries */
@media screen and (max-width: 1475px) {
	.container--outer {
		width: 95%;
	}
}

@media screen and (max-width: 900px) {
	.container--outer {
		width: 100%;
		margin: 0 auto;
	}

	.wrapper,
	.logo {
		padding: 24px;
	}

	.widget {
		margin-bottom: 24px;
	}

	.footer__container {
		display: block;
	}

	.footer__links {
		padding-bottom: 8px;
		padding-bottom: 0.5rem;
		text-align: center;
	}

	.footer__copyright {
		text-align: center;
	}
}

@media screen and (max-width: 767px) {
	.wrapper {
		display: block;
	}

	.sidebar {
		float: none;
		width: 100%;
		margin: 0;
	}

	.logo {
		text-align: center;
	}

	.logo__link {
		margin: 0 auto;
	}

	.logo__title {
		font-size: 24px;
		font-size: 1.5rem;
	}

	.sidebar {
		margin-top: 24px;
	}

	/* Fix content overflow on mobile */
	.post__content,
	.content {
		max-width: 100%;
		overflow-x: auto;
		word-wrap: break-word;
	}

	/* Fix code block overflow on mobile */
	pre {
		max-width: 100%;
		overflow-x: auto;
		word-break: break-word;
		white-space: pre-wrap;
		font-size: 14px;
	}

	/* Fix inline code overflow on mobile */
	code {
		word-break: break-word;
	}

	/* Fix table overflow on mobile */
	table {
		display: block;
		overflow-x: auto;
		max-width: 100%;
		-webkit-overflow-scrolling: touch;
	}
}

@media screen and (max-width: 620px) {
	input[type=text],
	input[type=email],
	input[type=tel],
	input[type=url] {
		width: 88%;
	}

	.meta__item {
		display: block;
		margin-left: 0;
	}

	.authorbox {
		text-align: center;
	}

	.authorbox__avatar {
		display: inline-block;
		float: none;
		margin: 0 0 16px;
	}

	.pager {
		display: block;
	}

	.pager__item {
		min-width: 100%;
		text-align: center;
	}

	.pager__item--prev {
		padding-bottom: 24px;
	}

	.content ul,
	.content ol {
		margin: 0 0 24px 24px;
	}

	.content ul ul,
	.content ol ol,
	.content ol ul,
	.content ul ol {
		margin: 0 0 0 24px;
	}

	.list__thumbnail {
		max-width: 80px;
	}

	.list__title {
		font-size: 18px;
		font-size: 1.125rem;
	}

	.list__lead {
		font-size: 15px;
		font-size: .9375rem;
	}

	.list__meta {
		display: block;
		font-size: 12px;
		font-size: .75rem;
	}

	/* Ensure content fits on small screens */
	.post__content,
	.content {
		overflow-x: auto;
	}

	/* Ensure code blocks fit on small screens */
	pre {
		max-width: 100%;
		overflow-x: auto;
		white-space: pre-wrap;
	}
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* Related posts */
.related {
	margin-top: 1.5rem;
	padding-top: 1rem;
	border-top: 1px solid #e5e7eb;
}
.related__title {
	margin: 0 0 .5rem 0;
	font-size: 1.1rem;
}
.related__list {
	margin: 0;
	padding-left: 1.1rem;
}
.related__item {
	margin: .25rem 0;
}

/* Search page (Pagefind UI wrapper) */
.search-page__label {
	display: block;
	font-weight: 700;
	margin-bottom: .5rem;
}
.search-page__input {
	width: 100%;
	max-width: 720px;
	padding: .65rem .8rem;
	border: 1px solid #d1d5db;
	border-radius: .6rem;
}
.search-page__input:focus-visible {
	outline: 2px solid rgba(37, 99, 235, .35);
	outline-offset: 2px;
}
.search-page__hint {
	color: #6b7280;
	font-size: .9rem;
	margin-top: .5rem;
}
.search-page__results {
	margin-top: 1rem;
}

/* Search widget hint */
.widget-search__hint {
	margin-top: .5rem;
	font-size: .9rem;
	color: #6b7280;
}