/* ==========================================================================
   HTML to WordPress Importer — Front-end Styles
   Full dark theme ported from TouchDial Forum plugin
   ========================================================================== */

/* ---------- Box Sizing Reset ---------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* ---------- CSS Variables (from Forum) ---------- */
:root {
	--td-bg: #1b1b1b;
	--td-text: #e1e1e1;
	--td-primary: #0078d4;
	--td-secondary: #2d2d2d;
	--td-border: #444444;
	--td-meta: #a19f9d;
	--td-tag-bg: #2b3a4a;
	--td-tag-text: #479ef5;
	--td-btn-hover: #0086f0;
	--td-card-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
	--td-font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* ---------- Global Typography (from Forum) ---------- */
* {
	font-family: var(--td-font-family, Consolas, Monaco, monospace) !important;
}

/* ---------- Body & Background ---------- */
body {
	background-color: var(--td-bg) !important;
	color: var(--td-text) !important;
}

body .site,
body .wp-site-blocks,
body main,
body article,
body .entry-content,
body .post-content,
body .page-content {
	background-color: var(--td-bg) !important;
	color: var(--td-text) !important;
}

/* ---------- Header ---------- */
header,
header.wp-block-group,
.wp-block-template-part {
	background-color: var(--td-bg) !important;
	color: var(--td-text) !important;
	padding: 20px 100px !important;
	width: 100% !important;
}

header a {
	color: var(--td-text) !important;
	text-decoration: none !important;
}

header a:hover {
	color: var(--td-primary) !important;
}

/* ---------- Footer ---------- */
footer,
footer.wp-block-template-part,
.site-footer {
	background-color: var(--td-bg) !important;
	color: var(--td-meta) !important;
}

footer a {
	color: var(--td-tag-text) !important;
}

/* ---------- Links ---------- */
.entry-content a,
.post-content a,
.page-content a {
	color: var(--td-primary);
	text-decoration: none;
}

.entry-content a:hover,
.post-content a:hover,
.page-content a:hover {
	color: var(--td-btn-hover);
	text-decoration: underline;
}

/* ---------- Post Title ---------- */
.entry-title,
.wp-block-post-title,
h1.entry-title {
	color: var(--td-text) !important;
	font-weight: 700 !important;
	line-height: 1.1;
	word-break: break-word;
	overflow-wrap: break-word;
}

/* ---------- Post Meta ---------- */
.entry-meta,
.post-meta,
.wp-block-post-date,
.wp-block-post-author,
.wp-block-post-terms {
	color: var(--td-meta) !important;
	font-size: 14px !important;
	line-height: 1.4;
}

.entry-meta a,
.wp-block-post-terms a {
	color: var(--td-tag-text) !important;
	text-decoration: none !important;
}

.entry-meta a:hover,
.wp-block-post-terms a:hover {
	color: var(--td-primary) !important;
}

/* ---------- Tags (from Forum) ---------- */
.tag-links a,
.wp-block-post-terms a,
.tags-links a {
	display: inline-block;
	padding: 3px 12px;
	background: var(--td-tag-bg);
	color: var(--td-tag-text) !important;
	font-size: 11px;
	font-weight: 500;
	border-radius: 4px;
	text-decoration: none !important;
	margin: 2px 3px 2px 0;
}

.tag-links a:hover,
.wp-block-post-terms a:hover,
.tags-links a:hover {
	background: var(--td-primary);
	color: white !important;
}

/* ---------- Dividers / HR ---------- */
hr,
.wp-block-separator {
	border: 0;
	border-top: 1px solid var(--td-border);
	margin: 30px 0;
}

/* ---------- Images ---------- */
.entry-content img,
.post-content img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
	border: 1px solid var(--td-border);
}

/* ---------- Featured Image ---------- */
.wp-block-post-featured-image img,
.post-thumbnail img {
	border-radius: 8px;
	object-fit: cover;
}

/* ---------- Forms & Inputs (from Forum) ---------- */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
textarea,
select {
	width: 100%;
	padding: 10px;
	border: 1px solid var(--td-border);
	border-radius: 4px;
	background: var(--td-bg) !important;
	color: var(--td-text) !important;
	font-family: var(--td-font-family) !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
	border-color: var(--td-primary);
	outline: none;
}

/* Prevent autofill white background (from Forum) */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
	-webkit-text-fill-color: var(--td-text) !important;
	-webkit-box-shadow: 0 0 0px 1000px var(--td-bg) inset !important;
	transition: background-color 5000s ease-in-out 0s;
}

/* Submit buttons */
input[type="submit"],
button[type="submit"],
.wp-block-button__link {
	padding: 10px 20px;
	background: var(--td-primary);
	color: white !important;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-weight: 600;
}

input[type="submit"]:hover,
button[type="submit"]:hover,
.wp-block-button__link:hover {
	background: var(--td-btn-hover);
}

/* ---------- Comments (from Forum) ---------- */
.comments-area,
.wp-block-comments {
	background-color: var(--td-bg) !important;
	color: var(--td-text) !important;
	margin-top: 30px;
}

.comments-title,
.wp-block-comments-title {
	font-size: 18px !important;
	font-weight: 600 !important;
	margin-bottom: 15px !important;
	color: var(--td-text) !important;
}

li.comment {
	display: block !important;
	position: relative !important;
	padding: 25px 0 !important;
	list-style: none !important;
	border-bottom: 1px solid #333 !important;
}

.comment-body {
	background-color: var(--td-secondary) !important;
	border: 1px solid var(--td-border) !important;
	padding: 20px;
	margin-bottom: 20px;
	border-radius: 8px;
}

.comment-content,
.comment-content p {
	color: var(--td-text) !important;
	font-size: 14px !important;
	line-height: 1.6 !important;
	margin: 8px 0 !important;
	word-break: break-word;
	overflow-wrap: break-word;
}

.comment-author cite,
.comment-author .fn,
.wp-block-comment-author-name {
	font-size: 14px !important;
	font-weight: 700 !important;
	font-style: normal;
	color: var(--td-text) !important;
}

.comment-author .avatar {
	display: none !important;
}

.comment-metadata a,
.wp-block-comment-date,
.wp-block-comment-date a,
.wp-block-comment-date time {
	font-size: 10px !important;
	color: #888 !important;
	text-decoration: none !important;
}

/* Comment reply link */
.reply,
.comment-reply-link {
	color: var(--td-primary) !important;
	font-size: 12px;
	text-decoration: none !important;
}

.comment-reply-link:hover {
	color: var(--td-btn-hover) !important;
}

/* Comment form (from Forum) */
#respond {
	background: #222;
	padding: 10px 20px;
	border-radius: 8px;
	margin: 15px auto 0 !important;
	max-width: 95%;
}

#reply-title {
	font-size: 18px;
	font-weight: 600;
	color: var(--td-text) !important;
}

#commentform textarea {
	background: #2d2d2d !important;
	border: 1px solid #444 !important;
	color: #eee !important;
	font-size: 14px !important;
	padding: 15px !important;
	width: 100% !important;
	display: block !important;
	box-sizing: border-box !important;
	height: 120px !important;
}

#commentform label {
	color: var(--td-text) !important;
}

/* Hide unnecessary comment form elements (from Forum) */
.logged-in-as,
.comment-notes,
label[for="comment"] {
	display: none !important;
}

/* ---------- Sidebar / Widgets ---------- */
.widget-area,
.wp-block-widget-group,
aside {
	background-color: var(--td-bg) !important;
	color: var(--td-text) !important;
}

.widget-title,
.wp-block-heading {
	color: var(--td-text) !important;
}

.widget a {
	color: var(--td-text) !important;
}

.widget a:hover {
	color: var(--td-primary) !important;
}

/* ---------- Navigation / Pagination ---------- */
.nav-links a,
.page-numbers,
.wp-block-query-pagination a {
	color: var(--td-text) !important;
	background: var(--td-secondary);
	border: 1px solid var(--td-border);
	padding: 6px 12px;
	border-radius: 4px;
	text-decoration: none;
}

.nav-links a:hover,
.page-numbers:hover,
.wp-block-query-pagination a:hover {
	background: var(--td-primary);
	color: white !important;
	border-color: var(--td-primary);
}

.page-numbers.current {
	background: var(--td-primary);
	color: white !important;
	border-color: var(--td-primary);
}

/* Post navigation (prev/next) */
.post-navigation,
.wp-block-post-navigation-link {
	color: var(--td-text) !important;
}

.post-navigation a,
.wp-block-post-navigation-link a {
	color: var(--td-primary) !important;
}

/* ---------- Search Results ---------- */
.search-form .search-field {
	background: var(--td-bg) !important;
	color: var(--td-text) !important;
	border: 1px solid var(--td-border) !important;
}

/* ---------- Tables ---------- */
table {
	border-collapse: collapse;
	width: 100%;
}

th, td {
	padding: 10px;
	border: 1px solid var(--td-border);
	color: var(--td-text);
}

th {
	background: var(--td-secondary);
}

/* ---------- Blockquotes ---------- */
blockquote {
	border-left: 3px solid var(--td-primary);
	margin: 20px 0;
	padding: 15px 20px;
	background: rgba(0, 120, 212, 0.08);
	color: var(--td-text);
}

blockquote cite {
	display: block;
	margin-top: 10px;
	font-size: 0.85em;
	color: var(--td-meta);
}

/* ---------- Alerts (from Forum) ---------- */
.td-alert,
.htwp-alert {
	padding: 12px;
	border-radius: 4px;
	margin-bottom: 20px;
	font-size: 14px;
}

.td-alert-error,
.htwp-alert-error {
	background: #442222;
	border: 1px solid #ff5555;
	color: #ffaaaa;
}

.td-alert-success,
.htwp-alert-success {
	background: #1b2e1b;
	border: 1px solid #4CAF50;
	color: #a5d6a7;
}

/* ---------- Archive / Category / Tag / Blog Pages ---------- */
body.archive main,
body.archive article,
body.search main,
body.blog main,
body.blog article {
	background-color: var(--td-bg) !important;
	color: var(--td-text) !important;
}

body.archive .entry-title a,
body.search .entry-title a,
body.blog .entry-title a {
	color: var(--td-text) !important;
}

body.archive .entry-title a:hover,
body.search .entry-title a:hover,
body.blog .entry-title a:hover {
	color: var(--td-primary) !important;
}

/* ========================================================================
   Importer-specific styles: Post layout, TOC, Homepage, Admonitions, Code
   ======================================================================== */

/* ---------- Post Content Layout ---------- */
.htwp-post-layout {
	display: flex;
	gap: 40px;
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 20px;
}

.htwp-post-body {
	flex: 1;
	min-width: 0;
	max-width: 750px;
	margin: 0 auto;
	line-height: 1.6;
	font-size: 16px;
	color: var(--td-text);
}

.htwp-post-body h2 {
	margin-top: 2em;
	margin-bottom: 0.6em;
	padding-bottom: 0.3em;
	border-bottom: 1px solid var(--td-border);
	color: var(--td-text);
}

.htwp-post-body h3 {
	margin-top: 1.5em;
	margin-bottom: 0.5em;
	color: var(--td-text);
}

.htwp-post-body p {
	margin: 8px 0;
	color: var(--td-text);
}

.htwp-post-body ul,
.htwp-post-body ol {
	margin-bottom: 1.2em;
	padding-left: 1.5em;
}

.htwp-post-body img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
}

.htwp-post-body a {
	color: var(--td-primary);
}

.htwp-post-body a:hover {
	color: var(--td-btn-hover);
}

.htwp-post-body hr {
	border: 0;
	border-top: 1px solid var(--td-border);
	margin: 30px 0;
}

/* ---------- Table of Contents Sidebar ---------- */
.htwp-post-toc {
	flex: 0 0 220px;
	align-self: flex-start;
	position: sticky;
	top: 80px;
	max-height: calc(100vh - 120px);
	overflow-y: auto;
}

.htwp-toc-inner {
	background: var(--td-secondary);
	border: 1px solid var(--td-border);
	border-radius: 6px;
	padding: 16px;
}

.htwp-toc-title {
	font-size: 0.85em;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--td-meta);
	margin: 0 0 10px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--td-border);
}

.htwp-toc-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.htwp-toc-nav li {
	margin: 0;
	padding: 0;
}

.htwp-toc-nav li a {
	display: block;
	padding: 4px 0;
	font-size: 0.82em;
	color: var(--td-meta);
	text-decoration: none;
	line-height: 1.4;
	border-left: 2px solid transparent;
	padding-left: 8px;
}

.htwp-toc-nav li a:hover {
	color: var(--td-primary);
	border-left-color: var(--td-primary);
}

.htwp-toc-nav li.htwp-toc-h3 a {
	padding-left: 20px;
	font-size: 0.78em;
	color: #777;
}

@media (max-width: 960px) {
	.htwp-post-layout {
		flex-direction: column;
	}

	.htwp-post-toc {
		flex: none;
		position: static;
		max-height: none;
		order: -1;
		margin-bottom: 24px;
	}

	header,
	header.wp-block-group {
		padding: 15px 20px !important;
	}
}

/* ---------- Homepage ---------- */
.htwp-homepage {
	max-width: 800px;
	margin: 0 auto;
	padding: 20px 0;
}

.htwp-home-profile {
	text-align: center;
	margin-bottom: 40px;
}

.htwp-home-avatar {
	margin-bottom: 16px;
}

.htwp-home-avatar img {
	width: 120px;
	height: 120px;
	border-radius: 50%;
	object-fit: cover;
	border: none;
}

.htwp-home-title {
	font-size: 1.6em;
	margin: 8px 0 4px;
	color: var(--td-text);
}

.htwp-home-subtitle {
	font-size: 1.1em;
	color: var(--td-meta);
	margin: 0;
}

/* ---------- Recent Posts List (Card style from Forum) ---------- */
.htwp-recent-posts {
	max-width: 800px;
	margin: 0 auto;
}

.htwp-post-summary {
	display: flex;
	gap: 20px;
	background: var(--td-secondary);
	border: 1px solid var(--td-border);
	border-radius: 4px;
	padding: 20px;
	margin-bottom: 15px;
	box-shadow: var(--td-card-shadow);
	transition: background-color 0.2s, border-color 0.2s;
	cursor: pointer;
}

.htwp-post-summary:hover {
	border-color: var(--td-primary);
	background-color: #353535;
}

.htwp-post-thumb {
	flex: 0 0 220px;
}

.htwp-post-thumb img {
	width: 100%;
	height: 150px;
	object-fit: cover;
	border-radius: 6px;
	border: none;
}

.htwp-post-info {
	flex: 1;
}

.htwp-post-title {
	font-size: 1.2em;
	margin: 0 0 8px;
	line-height: 1.3;
}

.htwp-post-title a {
	text-decoration: none;
	color: var(--td-text);
}

.htwp-post-title a:hover {
	color: var(--td-primary);
}

.htwp-post-meta {
	font-size: 0.85em;
	color: var(--td-meta);
	margin-bottom: 8px;
}

.htwp-post-excerpt {
	font-size: 13px;
	color: var(--td-meta);
	line-height: 1.4;
	margin: 0 0 10px;
	word-break: break-word;
	overflow-wrap: break-word;
}

.htwp-post-tags {
	font-size: 0.85em;
	margin-bottom: 8px;
}

.htwp-post-tags a {
	display: inline-block;
	background: var(--td-tag-bg);
	color: var(--td-tag-text);
	padding: 4px 8px;
	border-radius: 2px;
	text-decoration: none;
	margin: 2px 3px 2px 0;
	font-size: 11px;
	font-weight: 500;
}

.htwp-post-tags a:hover {
	background: var(--td-primary);
	color: #fff;
}

.htwp-read-more {
	font-size: 0.9em;
	font-weight: 600;
	text-decoration: none;
	color: var(--td-primary);
}

.htwp-read-more:hover {
	color: var(--td-btn-hover);
	text-decoration: underline;
}

@media (max-width: 640px) {
	.htwp-post-summary {
		flex-direction: column;
	}

	.htwp-post-thumb {
		flex: none;
	}

	.htwp-post-thumb img {
		height: auto;
		max-height: 200px;
	}
}

/* ---------- Admonition / Collapsible Sections ---------- */
details.htwp-admonition {
	margin: 16px 0;
	border-radius: 6px;
	border: 1px solid var(--td-border);
	overflow: hidden;
	background: var(--td-secondary);
}

details.htwp-admonition > summary {
	padding: 10px 16px;
	cursor: pointer;
	font-size: 0.95em;
	user-select: none;
	list-style: none;
}

details.htwp-admonition > summary::-webkit-details-marker {
	display: none;
}

details.htwp-admonition > summary::before {
	content: "▸ ";
	font-weight: bold;
	margin-right: 4px;
}

details.htwp-admonition[open] > summary::before {
	content: "▾ ";
}

.htwp-admonition-body {
	padding: 12px 16px;
	color: var(--td-text);
}

details.htwp-admonition-note {
	border-color: #448aff;
}

details.htwp-admonition-note > summary {
	background: rgba(68, 138, 255, 0.15);
	color: #82b1ff;
}

details.htwp-admonition-info {
	border-color: #00bcd4;
}

details.htwp-admonition-info > summary {
	background: rgba(0, 188, 212, 0.15);
	color: #4dd0e1;
}

details.htwp-admonition-warning {
	border-color: #ff9800;
}

details.htwp-admonition-warning > summary {
	background: rgba(255, 152, 0, 0.15);
	color: #ffb74d;
}

details.htwp-admonition-tip {
	border-color: #4caf50;
}

details.htwp-admonition-tip > summary {
	background: rgba(76, 175, 80, 0.15);
	color: #81c784;
}

/* ---------- Code Blocks ---------- */
.htwp-post-body pre,
.entry-content pre,
.post-content pre {
	background: #0d1117;
	color: #c9d1d9;
	padding: 16px;
	border-radius: 6px;
	border: 1px solid var(--td-border);
	overflow-x: auto;
	font-size: 0.88em;
	line-height: 1.5;
	margin: 16px 0;
	white-space: pre;
	word-wrap: normal;
}

.htwp-post-body pre code,
.entry-content pre code,
.post-content pre code {
	background: none;
	color: inherit;
	padding: 0;
	font-size: inherit;
	font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace !important;
	white-space: pre;
	word-wrap: normal;
}

/* ---------- Figures ---------- */
.htwp-post-body figure,
.entry-content figure,
.post-content figure {
	margin: 20px 0;
	text-align: center;
}

.htwp-post-body figure img,
.entry-content figure img,
.post-content figure img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
	border: 1px solid var(--td-border);
}

.htwp-post-body figcaption,
.entry-content figcaption,
.post-content figcaption {
	font-size: 0.85em;
	color: var(--td-meta);
	margin-top: 6px;
	font-style: italic;
}
	--htwp-primary: #0078d4;
	--htwp-secondary: #2d2d2d;
	--htwp-border: #444444;
	--htwp-meta: #a19f9d;
	--htwp-tag-bg: #2b3a4a;
	--htwp-tag-text: #479ef5;
	--htwp-card-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
	--htwp-font: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* ---------- Apply Dark Theme to All Posts ---------- */
body.single-post,
body.page {
	background-color: var(--htwp-bg) !important;
	color: var(--htwp-text) !important;
}

/* Theme wrapper overrides */
body.single-post .site,
body.single-post .wp-site-blocks,
body.single-post main,
body.single-post article,
body.page .site,
body.page .wp-site-blocks,
body.page main,
body.page article {
	background-color: var(--htwp-bg) !important;
	color: var(--htwp-text) !important;
}

/* Default entry content styling */
body.single-post .entry-content,
body.single-post .post-content,
body.page .entry-content,
body.page .post-content {
	color: var(--htwp-text);
	font-family: var(--htwp-font);
	font-size: 16px;
	line-height: 1.6;
}

/* Links */
body.single-post .entry-content a,
body.single-post .post-content a,
body.page .entry-content a,
body.page .post-content a {
	color: var(--htwp-primary);
	text-decoration: none;
}

body.single-post .entry-content a:hover,
body.single-post .post-content a:hover,
body.page .entry-content a:hover,
body.page .post-content a:hover {
	color: #0086f0;
	text-decoration: underline;
}

/* Post/Page title */
body.single-post .entry-title,
body.single-post .wp-block-post-title,
body.page .entry-title,
body.page .wp-block-post-title {
	color: var(--htwp-text) !important;
	font-family: var(--htwp-font);
	font-weight: 700;
	line-height: 1.1;
}

/* Post meta (date, author, categories) */
body.single-post .entry-meta,
body.single-post .post-meta,
body.single-post .wp-block-post-date,
body.single-post .wp-block-post-author,
body.single-post .wp-block-post-terms {
	color: var(--htwp-meta) !important;
}

body.single-post .entry-meta a,
body.single-post .wp-block-post-terms a {
	color: var(--htwp-tag-text) !important;
}

/* Header/navigation dark */
body.single-post header,
body.page header,
body.single-post .wp-block-template-part,
body.page .wp-block-template-part {
	background-color: var(--htwp-bg) !important;
	color: var(--htwp-text) !important;
}

body.single-post header a,
body.page header a {
	color: var(--htwp-text) !important;
}

body.single-post header a:hover,
body.page header a:hover {
	color: var(--htwp-primary) !important;
}

/* Footer dark */
body.single-post footer,
body.page footer {
	background-color: var(--htwp-bg) !important;
	color: var(--htwp-meta) !important;
}

body.single-post footer a,
body.page footer a {
	color: var(--htwp-tag-text) !important;
}

/* Comments section dark */
body.single-post .comments-area,
body.single-post .wp-block-comments {
	background-color: var(--htwp-bg) !important;
	color: var(--htwp-text) !important;
}

body.single-post .comment-body {
	background-color: var(--htwp-secondary) !important;
	border: 1px solid var(--htwp-border) !important;
	padding: 20px;
	margin-bottom: 20px;
	border-radius: 8px;
}

body.single-post .comment-content,
body.single-post .comment-content p {
	color: var(--htwp-text) !important;
	line-height: 1.6;
}

body.single-post .comment-author cite,
body.single-post .comment-author .fn {
	color: var(--htwp-text) !important;
	font-weight: 700;
}

body.single-post .comment-metadata a {
	color: var(--htwp-meta) !important;
}

/* Comment form dark */
body.single-post .comment-respond {
	background-color: var(--htwp-bg) !important;
}

body.single-post .comment-respond label {
	color: var(--htwp-text) !important;
}

body.single-post .comment-respond input,
body.single-post .comment-respond textarea {
	background-color: var(--htwp-secondary) !important;
	border: 1px solid var(--htwp-border) !important;
	color: var(--htwp-text) !important;
	border-radius: 4px;
	padding: 8px 12px;
}

body.single-post .comment-respond .submit {
	background-color: var(--htwp-primary) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 4px;
	padding: 8px 20px;
	cursor: pointer;
}

/* Sidebar/widgets dark */
body.single-post .widget-area,
body.single-post .wp-block-widget-group,
body.page .widget-area {
	background-color: var(--htwp-bg) !important;
	color: var(--htwp-text) !important;
}

/* ---------- Post Content Layout ---------- */
.htwp-post-layout {
	display: flex;
	gap: 40px;
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 20px;
}

.htwp-post-body {
	flex: 1;
	min-width: 0;
	max-width: 750px;
	margin: 0 auto;
	line-height: 1.6;
	font-size: 16px;
	color: var(--htwp-text);
	font-family: var(--htwp-font);
}

.htwp-post-body h2 {
	margin-top: 2em;
	margin-bottom: 0.6em;
	padding-bottom: 0.3em;
	border-bottom: 1px solid var(--htwp-border);
	color: var(--htwp-text);
}

.htwp-post-body h3 {
	margin-top: 1.5em;
	margin-bottom: 0.5em;
	color: var(--htwp-text);
}

.htwp-post-body p {
	margin-bottom: 1.2em;
	color: var(--htwp-text);
}

.htwp-post-body ul,
.htwp-post-body ol {
	margin-bottom: 1.2em;
	padding-left: 1.5em;
}

.htwp-post-body img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
}

.htwp-post-body a {
	color: var(--htwp-primary);
}

.htwp-post-body a:hover {
	color: #0086f0;
}

/* Dividers */
.htwp-post-body hr {
	border: 0;
	border-top: 1px solid var(--htwp-border);
	margin: 20px 0;
}

/* ---------- Table of Contents Sidebar ---------- */
.htwp-post-toc {
	flex: 0 0 220px;
	align-self: flex-start;
	position: sticky;
	top: 80px;
	max-height: calc(100vh - 120px);
	overflow-y: auto;
}

.htwp-toc-inner {
	background: var(--htwp-secondary);
	border: 1px solid var(--htwp-border);
	border-radius: 6px;
	padding: 16px;
}

.htwp-toc-title {
	font-size: 0.85em;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--htwp-meta);
	margin: 0 0 10px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--htwp-border);
}

.htwp-toc-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.htwp-toc-nav li {
	margin: 0;
	padding: 0;
}

.htwp-toc-nav li a {
	display: block;
	padding: 4px 0;
	font-size: 0.82em;
	color: var(--htwp-meta);
	text-decoration: none;
	line-height: 1.4;
	border-left: 2px solid transparent;
	padding-left: 8px;
}

.htwp-toc-nav li a:hover {
	color: var(--htwp-primary);
	border-left-color: var(--htwp-primary);
}

.htwp-toc-nav li.htwp-toc-h3 a {
	padding-left: 20px;
	font-size: 0.78em;
	color: #777;
}

@media (max-width: 960px) {
	.htwp-post-layout {
		flex-direction: column;
	}

	.htwp-post-toc {
		flex: none;
		position: static;
		max-height: none;
		order: -1;
		margin-bottom: 24px;
	}
}

/* ---------- Homepage ---------- */
body.page .htwp-homepage {
	max-width: 800px;
	margin: 0 auto;
	padding: 20px 0;
}

.htwp-home-profile {
	text-align: center;
	margin-bottom: 40px;
}

.htwp-home-avatar {
	margin-bottom: 16px;
}

.htwp-home-avatar img {
	width: 120px;
	height: 120px;
	border-radius: 50%;
	object-fit: cover;
}

.htwp-home-title {
	font-size: 1.6em;
	margin: 8px 0 4px;
	color: var(--htwp-text);
}

.htwp-home-subtitle {
	font-size: 1.1em;
	color: var(--htwp-meta);
	margin: 0;
}

/* ---------- Recent Posts List ---------- */
.htwp-recent-posts {
	max-width: 800px;
	margin: 0 auto;
}

.htwp-post-summary {
	display: flex;
	gap: 20px;
	background: var(--htwp-secondary);
	border: 1px solid var(--htwp-border);
	border-radius: 6px;
	padding: 20px;
	margin-bottom: 16px;
	box-shadow: var(--htwp-card-shadow);
	transition: border-color 0.2s, background-color 0.2s;
}

.htwp-post-summary:hover {
	border-color: var(--htwp-primary);
	background-color: #353535;
}

.htwp-post-thumb {
	flex: 0 0 220px;
}

.htwp-post-thumb img {
	width: 100%;
	height: 150px;
	object-fit: cover;
	border-radius: 6px;
}

.htwp-post-info {
	flex: 1;
}

.htwp-post-title {
	font-size: 1.2em;
	margin: 0 0 8px;
	line-height: 1.3;
}

.htwp-post-title a {
	text-decoration: none;
	color: var(--htwp-text);
}

.htwp-post-title a:hover {
	color: var(--htwp-primary);
}

.htwp-post-meta {
	font-size: 0.85em;
	color: var(--htwp-meta);
	margin-bottom: 8px;
}

.htwp-post-excerpt {
	font-size: 0.9em;
	color: var(--htwp-meta);
	line-height: 1.5;
	margin: 0 0 10px;
}

.htwp-post-tags {
	font-size: 0.85em;
	margin-bottom: 8px;
}

.htwp-post-tags a {
	display: inline-block;
	background: var(--htwp-tag-bg);
	color: var(--htwp-tag-text);
	padding: 3px 10px;
	border-radius: 4px;
	text-decoration: none;
	margin: 2px 4px 2px 0;
	font-size: 0.85em;
}

.htwp-post-tags a:hover {
	background: var(--htwp-primary);
	color: #fff;
}

.htwp-read-more {
	font-size: 0.9em;
	font-weight: 600;
	text-decoration: none;
	color: var(--htwp-primary);
}

.htwp-read-more:hover {
	color: #0086f0;
	text-decoration: underline;
}

/* Responsive */
@media (max-width: 640px) {
	.htwp-post-summary {
		flex-direction: column;
	}

	.htwp-post-thumb {
		flex: none;
	}

	.htwp-post-thumb img {
		height: auto;
		max-height: 200px;
	}
}

/* ---------- Admonition / Collapsible Sections ---------- */
details.htwp-admonition {
	margin: 16px 0;
	border-radius: 6px;
	border: 1px solid var(--htwp-border);
	overflow: hidden;
	background: var(--htwp-secondary);
}

details.htwp-admonition > summary {
	padding: 10px 16px;
	cursor: pointer;
	font-size: 0.95em;
	user-select: none;
	list-style: none;
}

details.htwp-admonition > summary::-webkit-details-marker {
	display: none;
}

details.htwp-admonition > summary::before {
	content: "▸ ";
	font-weight: bold;
	margin-right: 4px;
}

details.htwp-admonition[open] > summary::before {
	content: "▾ ";
}

.htwp-admonition-body {
	padding: 12px 16px;
	color: var(--htwp-text);
}

/* Note */
details.htwp-admonition-note {
	border-color: #448aff;
}

details.htwp-admonition-note > summary {
	background: rgba(68, 138, 255, 0.15);
	color: #82b1ff;
}

/* Info */
details.htwp-admonition-info {
	border-color: #00bcd4;
}

details.htwp-admonition-info > summary {
	background: rgba(0, 188, 212, 0.15);
	color: #4dd0e1;
}

/* Warning */
details.htwp-admonition-warning {
	border-color: #ff9800;
}

details.htwp-admonition-warning > summary {
	background: rgba(255, 152, 0, 0.15);
	color: #ffb74d;
}

/* Tip */
details.htwp-admonition-tip {
	border-color: #4caf50;
}

details.htwp-admonition-tip > summary {
	background: rgba(76, 175, 80, 0.15);
	color: #81c784;
}

/* ---------- Code Blocks ---------- */
.htwp-post-body pre,
.entry-content pre,
.post-content pre {
	background: #0d1117;
	color: #c9d1d9;
	padding: 16px;
	border-radius: 6px;
	border: 1px solid var(--htwp-border);
	overflow-x: auto;
	font-size: 0.88em;
	line-height: 1.5;
	margin: 16px 0;
	white-space: pre;
	word-wrap: normal;
}

.htwp-post-body pre code,
.entry-content pre code,
.post-content pre code {
	background: none;
	color: inherit;
	padding: 0;
	font-size: inherit;
	font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
	white-space: pre;
	word-wrap: normal;
}

/* ---------- Figures ---------- */
.htwp-post-body figure,
.entry-content figure,
.post-content figure {
	margin: 20px 0;
	text-align: center;
}

.htwp-post-body figure img,
.entry-content figure img,
.post-content figure img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
	border: 1px solid var(--htwp-border);
}

.htwp-post-body figcaption,
.entry-content figcaption,
.post-content figcaption {
	font-size: 0.85em;
	color: var(--htwp-meta);
	margin-top: 6px;
	font-style: italic;
}

/* ---------- Archive/Category/Tag Pages ---------- */
body.archive,
body.search,
body.blog {
	background-color: var(--htwp-bg) !important;
	color: var(--htwp-text) !important;
}

body.archive main,
body.archive article,
body.search main,
body.blog main {
	background-color: var(--htwp-bg) !important;
	color: var(--htwp-text) !important;
}

body.archive .entry-title a,
body.search .entry-title a,
body.blog .entry-title a {
	color: var(--htwp-text) !important;
}

body.archive .entry-title a:hover,
body.search .entry-title a:hover,
body.blog .entry-title a:hover {
	color: var(--htwp-primary) !important;
}

body.archive .entry-meta,
body.search .entry-meta,
body.blog .entry-meta {
	color: var(--htwp-meta) !important;
}

body.archive header,
body.archive footer,
body.search header,
body.search footer,
body.blog header,
body.blog footer {
	background-color: var(--htwp-bg) !important;
	color: var(--htwp-text) !important;
}