/*
Theme Name: KoyuDoku
Theme URI: https://omerify.com
Author: Ömer Serdar Ören
Description: Monochrome, minimalist, fast and SEO friendly WordPress theme.
Version: 0.6.5
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: koyudoku
Domain Path: /languages
Requires at least: 6.5
Requires PHP: 7.4
Tags: blog, custom-theme, responsive, neo-brutalism
*/

/* Generated from assets/css/src/ by bin/build.sh. Edit the parts, not this file. */

/* ==========================================================================
   Design tokens
   Every color, border and shadow used by the theme is defined here. Dark mode
   only overrides the color tokens, so components never need a dark variant.
   ========================================================================== */

:root {
	/* Colors */
	--bg-color: #f3f4f6;         /* Page background. */
	--header-bg: #ffffff;        /* Surfaces: header, cards, tags. */
	--text-color: #1f2937;
	--link-color: #2563eb;       /* Accent. White text on it is about 5.2:1 (WCAG AA). */
	--meta-color: #4b5563;       /* Muted text. */
	--border-color: #1f2937;
	--shadow-color: #1f2937;
	--pattern-color: rgba(31, 41, 55, 0.05); /* Dotted page background. */
	--quote-bg: #e5e7eb;
	--field-bg: var(--bg-color); /* Comment form fields. */

	/* Typography */
	--heading-font: system-ui, -apple-system, sans-serif;
	--body-font: system-ui, -apple-system, sans-serif;

	/* Layout */
	--container: 850px;
	--gutter: 20px;

	/* Borders and hard (blur-free) shadows */
	--border-thick: 4px solid var(--border-color);
	--border-medium: 3px solid var(--border-color);
	--border-thin: 2px solid var(--border-color);
	--border-field: 3px solid var(--border-color); /* Form fields: needs 3:1 contrast (WCAG 1.4.11). */
	--shadow-lg: 8px 8px 0 var(--shadow-color);
	--shadow-md: 6px 6px 0 var(--shadow-color);
	--shadow-sm: 4px 4px 0 var(--shadow-color);
	--shadow-xs: 2px 2px 0 var(--shadow-color);

	color-scheme: light;
}

[data-theme="dark"] {
	--bg-color: #1f2937;
	--header-bg: #111827;
	--text-color: #f3f4f6;
	--link-color: #60a5fa;
	--meta-color: #9ca3af;
	--border-color: #4b5563;
	--shadow-color: #030712;
	--pattern-color: rgba(243, 244, 246, 0.03);
	--quote-bg: #374151;
	--field-bg: var(--header-bg);
	--border-field: 3px solid #9ca3af; /* The regular dark border is too faint for form fields. */

	color-scheme: dark;
}

/* ==========================================================================
   Base: element defaults
   Element rules are wrapped in :where() so they have zero specificity.
   Components can override them with a single class, without !important.
   ========================================================================== */

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

body {
	margin: 0;
	padding: 0;
	background-color: var(--bg-color);
	background-image: radial-gradient(var(--pattern-color) 2px, transparent 2px);
	background-size: 24px 24px;
	color: var(--text-color);
	font-family: var(--body-font);
	line-height: 1.7;
}

/* Smooth color change when the theme is switched. */
body,
header,
footer,
article,
input,
textarea,
button,
pre,
table,
blockquote {
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.15s ease;
}

/* Typography. The font sizes scale down on small screens and cap at the old fixed sizes. */
:where(h1, h2, h3, .site-title) {
	font-family: var(--heading-font);
	font-weight: 900;
	letter-spacing: -1px;
	text-wrap: balance;
}

:where(h1) {
	font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2rem);
}

:where(h2) {
	font-size: clamp(1.35rem, 1.2rem + 0.75vw, 1.5rem);
}

/* Links */
:where(a) {
	color: var(--text-color);
	font-weight: 800;
	text-decoration-thickness: 3px;
	text-decoration-color: var(--link-color);
	transition: 0.1s;
}

:where(a:hover) {
	background: var(--link-color);
	color: var(--header-bg);
	text-decoration: none;
}

/* Media */
:where(img) {
	display: block;
	max-width: 100%;
	height: auto;
}

/* WordPress emoji images must stay inline and flat. */
img.emoji,
img.wp-smiley {
	display: inline;
	width: 1em;
	height: 1em;
	margin: 0 0.1em;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	vertical-align: -0.1em;
}

/* Placeholder text must meet 4.5:1 too; the browser default is too light. */
::placeholder {
	color: var(--meta-color);
	opacity: 1;
}

/* Keyboard focus */
:focus-visible {
	outline: 3px solid var(--link-color);
	outline-offset: 3px;
}

/* ==========================================================================
   Layout: container, site header, logo, footer and footer widgets
   ========================================================================== */

.container {
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 var(--gutter);
}

/* The header is also a .container; it is narrower so its shadow fits inside the page. */
.site-header {
	max-width: calc(var(--container) - 2 * var(--gutter));
	margin: 30px auto;
	padding: 20px 25px;
	border: var(--border-thick);
	box-shadow: var(--shadow-lg);
	background: var(--header-bg);
}

.header-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 15px;
	padding-bottom: 15px;
	border-bottom: var(--border-thick);
}

.search-theme-container {
	display: flex;
	gap: 10px;
}

.logo-link {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
}

.logo-link:hover {
	background: transparent;
}

.logo-link img {
	width: auto;
	height: 35px;
	margin: 0;
	border: none;
	box-shadow: none;
}

.site-title {
	margin: 0;
	color: var(--text-color);
	font-size: 1.6rem;
	line-height: 1;
}

.logo-link:hover .site-title {
	color: var(--link-color);
}

.site-footer {
	margin-top: 60px;
	padding: 30px 0;
	border-top: var(--border-thick);
	color: var(--meta-color);
	font-weight: 900;
	text-align: center;
	text-transform: uppercase;
}

/* Footer widget area */
.footer-widgets {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 30px;
	margin-top: 60px;
	padding: 40px;
	border: var(--border-thick);
	box-shadow: var(--shadow-lg);
	background: var(--header-bg);
}

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

.widget-title {
	margin-bottom: 20px;
	padding-bottom: 10px;
	border-bottom: var(--border-thick);
	font-size: 1.2rem;
}

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

.widget ul li {
	padding: 8px 0;
	border-bottom: 2px dashed var(--border-color);
}

.widget ul li:last-child {
	border-bottom: none;
}

.widget ul li a {
	text-decoration: none;
}

@media (max-width: 768px) {
	.site-header {
		margin: 20px;
	}

	.header-top {
		flex-direction: column;
		align-items: flex-start;
		gap: 15px;
	}

	.search-theme-container {
		justify-content: space-between;
		width: 100%;
	}

	.footer-widgets {
		grid-template-columns: 1fr;
		padding: 20px;
	}
}

/* ==========================================================================
   Navigation: primary menu and dropdowns
   Submenus are controlled by assets/js/src/20-navigation.js, which adds a
   toggle button to each parent item and the .has-js class to the nav.
   ========================================================================== */

.menu {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.menu li a {
	text-decoration: none;
	text-transform: uppercase;
}

.menu-item-has-children {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

/* Without JavaScript the arrow is drawn on the link itself. */
.main-nav:not(.has-js) .menu-item-has-children > a::after {
	content: " ▼";
	content: " ▼" / "";
	font-size: 0.6em;
}

/* Disclosure button added by the script. Its name comes from a screen-reader-only label. */
.submenu-toggle {
	min-width: 28px;
	min-height: 28px;
	padding: 0;
	border: var(--border-thin);
	background: var(--header-bg);
	color: var(--text-color);
	font-size: 0.6rem;
	line-height: 1;
	cursor: pointer;
}

.submenu-toggle::before {
	content: "▼";
	content: "▼" / "";
	display: inline-block;
	transition: transform 0.15s ease;
}

.submenu-toggle[aria-expanded="true"]::before {
	transform: rotate(180deg);
}

.submenu-toggle:hover {
	background: var(--link-color);
	color: var(--header-bg);
}

.sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1000;
	min-width: 180px;
	padding: 0;
	border: var(--border-medium);
	box-shadow: var(--shadow-md);
	background: var(--header-bg);
	list-style: none;
}

.main-nav:not(.has-js) .menu-item-has-children:hover > .sub-menu,
.main-nav:not(.has-js) .menu-item-has-children:focus-within > .sub-menu,
.menu-item-has-children.is-open > .sub-menu {
	display: block;
}

.sub-menu li {
	margin: 0;
	border-bottom: var(--border-thin);
}

.sub-menu a {
	display: block;
	padding: 10px 15px;
	font-size: 0.9rem;
}

/* The link fills the row; the toggle button of a nested parent sits at its end. */
.sub-menu .menu-item-has-children > a {
	flex: 1;
}

/* Nested submenus fly out to the side, so they never cover the items below their parent.
   top: -3px aligns the first nested item with its parent (the submenu border is 3px). */
.sub-menu .sub-menu {
	top: -3px;
	left: 100%;
}

@media (min-width: 769px) {
	/* Point the arrow in the direction the submenu opens. */
	.sub-menu .submenu-toggle::before {
		transform: rotate(-90deg);
	}

	.sub-menu .submenu-toggle[aria-expanded="true"]::before {
		transform: rotate(90deg);
	}
}

@media (max-width: 768px) {
	/* On small screens every level opens inline, below its parent. */
	.sub-menu,
	.sub-menu .sub-menu {
		position: static;
		top: auto;
		left: auto;
		flex-basis: 100%;
		width: 100%;
		margin-top: 10px;
		border-right: none;
		border-bottom: none;
		border-left: none;
		box-shadow: none;
	}
}

/* ==========================================================================
   Components: search, theme toggle, buttons, copy link, pagination,
   post navigation, tags and status screens
   ========================================================================== */

/* Search form (header and Search widget) */
.header-search {
	display: flex;
	border: var(--border-field);
	box-shadow: var(--shadow-sm);
	background: var(--bg-color);
}

.header-search:focus-within {
	transform: translate(-2px, -2px);
	box-shadow: var(--shadow-md);
	outline: 3px solid var(--link-color);
	outline-offset: 2px;
}

.header-search input {
	width: 140px;
	padding: 5px 10px;
	border: none;
	outline: none;
	background: transparent;
	color: var(--text-color);
	font-weight: bold;
	font-size: 16px;
}

.header-search button {
	padding: 5px 12px;
	border: none;
	border-left: var(--border-field);
	background: var(--link-color);
	color: var(--header-bg);
	font-weight: 900;
	cursor: pointer;
}

.header-search button:hover {
	background: var(--text-color);
	color: var(--bg-color);
}

/* Shared "hard shadow" button behavior: pressed look on hover. */
.theme-toggle,
.copy-link-box button,
.comment-form .submit {
	border: var(--border-medium);
	box-shadow: var(--shadow-sm);
	cursor: pointer;
}

.theme-toggle:hover,
.copy-link-box button:hover,
.comment-form .submit:hover {
	transform: translate(2px, 2px);
	box-shadow: var(--shadow-xs);
}

.theme-toggle {
	padding: 5px 10px;
	background: var(--header-bg);
	font-size: 1.2rem;
}

/* Copy post link */
.copy-link {
	margin-top: 40px;
	padding-top: 20px;
	border-top: var(--border-thick);
}

.copy-link-title {
	display: block;
	margin-bottom: 15px;
	color: var(--text-color);
	font-family: var(--heading-font);
	font-size: 1.2rem;
	font-weight: 900;
}

.copy-link-box {
	display: flex;
	align-items: stretch;
	gap: 10px;
	margin-bottom: 25px;
}

.copy-link-box input {
	flex: 1;
	width: 100%;
	min-width: 0;
	padding: 10px 15px;
	border: var(--border-field);
	box-shadow: inset 2px 2px 0 var(--shadow-color);
	background: var(--bg-color);
	color: var(--text-color);
	font-family: var(--body-font);
	font-size: 16px;
	font-weight: bold;
}

.copy-link-box button {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 120px;
	padding: 10px 20px;
	background: var(--link-color);
	color: var(--header-bg);
	font-size: 0.9rem;
	font-weight: 900;
	text-transform: uppercase;
	transition: 0.1s;
}

.copy-link-box button:hover {
	background: var(--text-color);
	color: var(--bg-color);
}

/* Pagination of post lists */
.pagination {
	margin-top: 40px;
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 15px; /* Leaves room for the box shadows. */
	width: 100%;
}

.pagination .page-numbers {
	display: flex;
	align-items: center;
	padding: 8px 15px;
	border: var(--border-medium);
	box-shadow: var(--shadow-sm);
	background: var(--header-bg);
	font-weight: 900;
	text-decoration: none;
}

.pagination .current,
.pagination a:hover {
	transform: translate(2px, 2px);
	box-shadow: var(--shadow-xs);
	background: var(--link-color);
	color: var(--header-bg);
}

/* Previous/next post navigation */
.post-navigation {
	margin-top: 50px;
	padding-top: 40px;
	border-top: var(--border-thick);
}

.post-navigation .nav-links {
	display: flex;
	justify-content: space-between;
	gap: 20px;
}

.post-navigation .nav-previous,
.post-navigation .nav-next {
	display: flex;
	flex: 0 1 calc(50% - 10px);
}

.post-navigation .nav-next {
	margin-inline-start: auto;
}

.post-navigation a {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 20px;
	border: var(--border-thick);
	box-shadow: var(--shadow-md);
	background: var(--header-bg);
	text-decoration: none;
}

.post-navigation a:hover {
	transform: translate(2px, 2px);
	box-shadow: var(--shadow-sm);
	background: var(--link-color);
}

.post-navigation a:hover .nav-label,
.post-navigation a:hover .nav-title {
	color: var(--header-bg);
}

.nav-label {
	margin-bottom: 8px;
	color: var(--meta-color);
	font-family: var(--heading-font);
	font-size: 0.85rem;
	font-weight: 900;
	text-transform: uppercase;
}

.nav-title {
	color: var(--text-color);
	font-family: var(--heading-font);
	font-size: 1.1rem;
	font-weight: 900;
	line-height: 1.4;
}

@media (max-width: 768px) {
	.post-navigation .nav-links {
		flex-direction: column;
	}

	.post-navigation .nav-previous,
	.post-navigation .nav-next {
		flex: 1 1 auto;
		margin-inline-start: 0;
	}
}

/* Tags */
.post-tags {
	margin-top: 40px;
	padding-top: 20px;
	border-top: 3px dashed var(--border-color);
}

.tags-title {
	margin-right: 10px;
	color: var(--meta-color);
	font-family: var(--heading-font);
	font-size: 0.85rem;
	font-weight: 900;
}

.post-tags a {
	display: inline-block;
	margin-right: 8px;
	margin-bottom: 8px;
	padding: 4px 10px;
	border: var(--border-thin);
	box-shadow: 2px 2px 0 var(--shadow-color);
	background: var(--header-bg);
	font-size: 0.85rem;
	font-weight: 800;
	text-decoration: none;
	transition: 0.1s;
}

.post-tags a:hover {
	transform: translate(2px, 2px);
	box-shadow: 0 0 0 var(--shadow-color);
	background: var(--link-color);
	color: var(--header-bg);
}

/* Multi-page posts and archive description */
.page-links {
	margin-top: 20px;
	font-weight: 700;
}

.archive-description {
	margin-top: 10px;
}

/* Archive and search headers */
.search-header {
	margin-bottom: 40px;
	padding-bottom: 20px;
	border-bottom: var(--border-thick);
}

.search-title {
	font-size: 1.8rem;
	word-break: break-word;
}

.search-term {
	color: var(--link-color);
}

/* 404 and "no results" screens */
.error-404,
.no-results {
	padding: 120px 20px;
	text-align: center;
}

.no-results {
	padding: 40px 20px;
}

.error-code {
	margin-bottom: 10px;
	color: var(--link-color);
	font-size: clamp(4rem, 18vw, 6rem);
}

.error-title {
	margin-top: 0;
	margin-bottom: 20px;
}

.error-desc {
	margin-bottom: 40px;
	color: var(--meta-color);
}

.home-link {
	display: inline-block;
	font-weight: bold;
	text-transform: uppercase;
}

/* ==========================================================================
   Content: post list, post meta and everything inside .post-content
   ========================================================================== */

/* Post summary in lists */
.post-summary {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 30px;
	margin-bottom: 40px;
	padding: 25px;
	border: var(--border-thick);
	box-shadow: var(--shadow-lg);
	background: var(--header-bg);
}

.post-summary-content {
	flex: 1;
	min-width: 0;
}

.post-summary-image {
	flex-shrink: 0;
	width: 180px;
}

.post-summary-image img {
	width: 100%;
	height: 180px;
	border: var(--border-medium);
	box-shadow: var(--shadow-md);
	object-fit: cover;
}

.post-summary.sticky .post-meta::before {
	content: "📌 ";
	content: "📌 " / "";
}

.read-more {
	display: inline-block;
	padding: 5px 15px;
	border: var(--border-medium);
	box-shadow: var(--shadow-sm);
	text-decoration: none;
}

@media (max-width: 768px) {
	.post-summary {
		flex-direction: column-reverse;
		gap: 20px;
	}

	.post-summary-image {
		width: 100%;
	}

	.post-summary-image img {
		height: 200px;
	}
}

/* Post meta line */
.post-meta {
	margin-bottom: 15px;
	color: var(--meta-color);
	font-size: 0.85rem;
	font-weight: 900;
	text-transform: uppercase;
}

.post-meta a {
	background: transparent;
	color: inherit;
	text-decoration-thickness: 2px;
}

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

/* The category list renders as plain inline text inside the meta line. */
.post-meta ul.post-categories {
	display: inline;
	margin: 0;
	padding: 0;
	list-style: none;
}

.post-meta ul.post-categories li {
	display: inline;
}

/* Post content */
.post-content {
	overflow-wrap: break-word;
}

blockquote {
	margin: 2rem 0;
	padding: 1.5rem;
	border: var(--border-thick);
	box-shadow: var(--shadow-md);
	background: var(--quote-bg);
	color: var(--text-color);
	font-weight: 700;
}

/* Images get the hard border and shadow; emoji images are excluded. */
.post-content img:not(.emoji, .wp-smiley),
.wp-block-image img:not(.emoji, .wp-smiley) {
	width: auto;
	max-width: 100%;
	margin: 1rem 0;
	border: var(--border-thick);
	border-radius: 0;
	box-shadow: var(--shadow-lg);
}

/* WordPress alignment classes */
.alignleft {
	float: left;
	margin: 0.5rem 1.5rem 0.5rem 0;
}

.alignright {
	float: right;
	margin: 0.5rem 0 0.5rem 1.5rem;
}

.aligncenter {
	display: block;
	margin: 1rem auto;
	text-align: center;
}

/* Classic editor images carry the alignment class on the <img> itself. */
.post-content img.alignleft:not(.emoji, .wp-smiley) {
	float: left;
	margin: 0.5rem 1.5rem 0.5rem 0;
}

.post-content img.alignright:not(.emoji, .wp-smiley) {
	float: right;
	margin: 0.5rem 0 0.5rem 1.5rem;
}

.post-content img.aligncenter:not(.emoji, .wp-smiley) {
	display: block;
	margin: 1rem auto;
}

@media (max-width: 600px) {
	.alignleft,
	.alignright,
	.post-content img.alignleft:not(.emoji, .wp-smiley),
	.post-content img.alignright:not(.emoji, .wp-smiley) {
		display: block;
		float: none;
		margin: 1rem auto;
	}
}

/* Captions */
.wp-caption {
	max-width: 100%;
}

.wp-caption-text,
.wp-element-caption,
.gallery-caption,
.post-content figcaption {
	margin: 0.5rem 0 1.5rem;
	color: var(--meta-color);
	font-size: 0.85rem;
	font-weight: 800;
}

/* Video, embeds and audio */
.post-content video,
.wp-block-video video,
.wp-block-embed iframe {
	width: 100%;
	max-width: 100%;
	height: auto;
	margin: 2rem 0;
	border: var(--border-thick);
	box-shadow: var(--shadow-lg);
	background: #000;
	aspect-ratio: 16 / 9;
}

.post-content audio,
.wp-block-audio audio {
	width: 100%;
	margin: 2rem 0;
}

/* Tables. Horizontal scrolling happens in the .table-wrap added by inc/template-functions.php. */
.table-wrap {
	margin: 2rem 0;
	padding: 0 8px 8px 0;
	overflow-x: auto;
}

.wp-block-table {
	margin: 0;
}

.post-content table {
	width: 100%;
	margin: 0;
	border: var(--border-thick);
	border-collapse: collapse;
	box-shadow: var(--shadow-lg);
	background: var(--bg-color);
	color: var(--text-color);
}

.post-content table th,
.post-content table td {
	padding: 12px 15px;
	border: var(--border-thin);
	text-align: left;
}

.post-content table th {
	background: var(--header-bg);
	font-family: var(--heading-font);
	font-weight: 900;
	text-transform: uppercase;
}

.post-content table tbody tr:nth-child(even) {
	background: var(--header-bg);
}

/* Code */
.post-content pre {
	margin: 2rem 0;
	padding: 1.5rem;
	border: var(--border-thick);
	box-shadow: var(--shadow-lg);
	background: var(--header-bg);
	color: var(--text-color);
	font-family: monospace;
	overflow-x: auto;
}

.post-content code {
	padding: 3px 8px;
	border: var(--border-thin);
	border-radius: 4px;
	background: var(--header-bg);
	color: var(--link-color);
	font-family: monospace;
	font-size: 0.9em;
}

.post-content pre code {
	padding: 0;
	border: none;
	background: transparent;
	color: inherit;
}

/* ==========================================================================
   Comments: list, single comment and the comment form
   ========================================================================== */

.post-comments {
	margin-top: 50px;
	padding: 30px;
	border: var(--border-thick);
	box-shadow: var(--shadow-lg);
	background: var(--header-bg);
}

.comments-title,
.comment-reply-title {
	margin-bottom: 20px;
	padding-bottom: 10px;
	border-bottom: var(--border-thick);
	color: var(--text-color);
	font-family: var(--heading-font);
	font-size: 1.4rem;
	font-weight: 900;
}

.comment-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.comment-list li {
	margin-bottom: 25px;
	padding-bottom: 0;
	border-bottom: none;
}

.comment-body {
	margin-bottom: 15px;
	padding: 20px;
	border: var(--border-medium);
	box-shadow: var(--shadow-sm);
	background: var(--bg-color);
}

/* Comment by the post author */
.comment-list .bypostauthor > .comment-body {
	border-color: var(--link-color);
	box-shadow: 4px 4px 0 var(--link-color);
}

.comment-meta {
	display: flex;
	align-items: center;
	gap: 15px;
	margin-bottom: 15px;
	padding-bottom: 10px;
	border-bottom: var(--border-thin);
}

.comment-meta img.avatar {
	width: 45px;
	height: 45px;
	margin: 0;
	border: var(--border-thin);
	border-radius: 0;
	box-shadow: var(--shadow-xs);
}

.comment-author {
	font-family: var(--heading-font);
	font-size: 1.1rem;
	font-weight: 900;
}

.comment-metadata a {
	color: var(--meta-color);
	font-size: 0.85rem;
	font-weight: bold;
	text-decoration-thickness: 2px;
}

.comment-metadata a:hover {
	color: var(--header-bg);
}

.reply a {
	display: inline-block;
	padding: 5px 15px;
	border: var(--border-thin);
	box-shadow: 3px 3px 0 var(--shadow-color);
	background: var(--header-bg);
	font-family: var(--heading-font);
	font-size: 0.8rem;
	font-weight: 900;
	text-decoration: none;
	text-transform: uppercase;
}

.reply a:hover {
	transform: translate(2px, 2px);
	box-shadow: 1px 1px 0 var(--shadow-color);
	background: var(--link-color);
	color: var(--header-bg);
}

/* Comment form */
.comment-respond {
	margin-top: 40px;
}

.comment-form textarea,
.comment-form input:not([type="checkbox"]) {
	width: 100%;
	margin-bottom: 15px;
	padding: 12px;
	border: var(--border-field);
	background: var(--field-bg);
	color: var(--text-color);
	font-family: var(--body-font);
	font-weight: bold;
	font-size: 16px;
}

.comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 20px;
}

.comment-form-cookies-consent input[type="checkbox"] {
	width: auto;
	margin-top: 5px;
	padding: 0;
	border: var(--border-field);
	cursor: pointer;
}

.comment-form-cookies-consent label {
	color: var(--text-color);
	font-size: 0.9rem;
	font-weight: 800;
	line-height: 1.4;
	cursor: pointer;
}

.comment-form .submit {
	padding: 12px 25px;
	background: var(--link-color);
	color: var(--header-bg);
	font-size: 1rem;
	font-weight: 900;
	text-transform: uppercase;
}

.comment-form .submit:hover {
	background: var(--text-color);
	color: var(--bg-color);
}

/* ==========================================================================
   Jetpack Related Posts compatibility
   Jetpack styles itself with ID selectors, so !important is the only reliable
   way to win here. This is the only place in the theme that needs it.
   ========================================================================== */

#jp-relatedposts {
	margin-top: 50px;
	padding-top: 40px;
	border-top: var(--border-thick);
}

#jp-relatedposts h3.jp-relatedposts-headline {
	color: var(--text-color) !important;
	font-family: var(--heading-font) !important;
	font-weight: 900 !important;
}

#jp-relatedposts a,
#jp-relatedposts a:hover {
	background: transparent !important;
	color: inherit !important;
	text-decoration: none !important;
}

#jp-relatedposts .jp-relatedposts-post {
	border: var(--border-medium) !important;
	border-radius: 0 !important;
	box-shadow: var(--shadow-sm) !important;
	background: var(--header-bg) !important;
	opacity: 1 !important;
	transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

#jp-relatedposts .jp-relatedposts-post:hover {
	transform: translate(2px, 2px) !important;
	box-shadow: var(--shadow-xs) !important;
	opacity: 1 !important;
}

#jp-relatedposts .jp-relatedposts-post .jp-relatedposts-post-title,
#jp-relatedposts .jp-relatedposts-post .jp-relatedposts-post-title a {
	color: var(--text-color) !important;
	font-family: var(--heading-font) !important;
	font-weight: 900 !important;
}

#jp-relatedposts .jp-relatedposts-post:hover .jp-relatedposts-post-title,
#jp-relatedposts .jp-relatedposts-post:hover .jp-relatedposts-post-title a {
	color: var(--link-color) !important;
}

#jp-relatedposts .jp-relatedposts-post .jp-relatedposts-post-context,
#jp-relatedposts .jp-relatedposts-post .jp-relatedposts-post-date {
	color: var(--meta-color) !important;
}

#jp-relatedposts .jp-relatedposts-post img {
	border-radius: 0 !important;
}

/* ==========================================================================
   Utilities and user preferences (loaded last so they always win)
   ========================================================================== */

/* Visually hidden, still available to assistive technology (WordPress standard). */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	word-wrap: normal !important;
}

/* The skip link becomes visible while it has keyboard focus. */
.skip-link:focus {
	position: fixed;
	top: 10px;
	left: 10px;
	z-index: 100000;
	width: auto;
	height: auto;
	margin: 0;
	padding: 10px 16px;
	border: var(--border-medium);
	box-shadow: var(--shadow-sm);
	background: var(--header-bg);
	color: var(--text-color);
	text-decoration: none;
	overflow: visible;
	clip: auto;
	clip-path: none;
}

/* Respect the "reduce motion" system setting. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition: none !important;
		animation: none !important;
		scroll-behavior: auto !important;
	}
}

/* Windows High Contrast and other forced-colors modes: keep focus clearly visible. */
@media (forced-colors: active) {
	:focus-visible {
		outline-color: Highlight;
	}
}