/* ==========================================================================
   AndroidBytes — design tokens
   ========================================================================== */
:root {
	--bg: oklch(0.99 0.003 90);
	--surface-alt: oklch(0.97 0.003 90);
	--border: oklch(0.9 0.005 90);
	--border-soft: oklch(0.93 0.005 90);
	--text: oklch(0.18 0.01 90);
	--text-secondary: oklch(0.48 0.01 90);
	--text-tertiary: oklch(0.55 0.01 90);
	--link: oklch(0.5 0.14 250);
	--link-hover: oklch(0.4 0.14 250);
	--brand-green: oklch(0.62 0.15 145);
	--brand-green-btn: oklch(0.5 0.15 145); /* darker than --brand-green so white button text clears WCAG AA (4.5:1) */

	/* category hue system — chip bg: oklch(0.94 0.05 H), chip text: oklch(0.4 0.14 H) */
	--hue-games: 145;
	--hue-apps: 250;
	--hue-tips: 30;
	--hue-overig: 300;
	--hue-nieuws: 350;
	--hue-antwoorden: 200;

	--radius-chip: 6px;
	--radius-pill: 999px;
	--radius-card-sm: 8px;
	--radius-card: 10px;
	--radius-card-lg: 14px;

	--content-max: 1200px;
	--gap-section: 24px;
	--card-pad: 14px;

	--focus-ring: 0 0 0 3px oklch(0.62 0.15 145 / 0.45);
}

@media (min-width: 600px) {
	:root { --gap-section: 28px; }
}

/* ==========================================================================
   Reset & base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; min-width: 0; }

html { -webkit-text-size-adjust: 100%; }

html, body { max-width: 100%; overflow-x: hidden; } /* safety net: legacy shortcode markup has no responsive CSS of its own */

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: 'Inter', system-ui, -apple-system, sans-serif;
	font-size: 15.5px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	overflow-wrap: break-word;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; }

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

button, input, select, textarea { font-family: inherit; font-size: inherit; }

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

:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; }

.screen-reader-text {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	width: 1px; height: 1px;
	overflow: hidden;
}

.skip-link.screen-reader-text {
	z-index: 100000;
}
.skip-link.screen-reader-text:focus {
	position: fixed !important;
	clip: auto !important;
	width: auto; height: auto;
	top: 6px; left: 6px;
	padding: 10px 16px;
	background: var(--text);
	color: #fff;
	border-radius: var(--radius-card-sm);
}

/* ==========================================================================
   Layout helpers
   ========================================================================== */
.ab-wrap {
	max-width: var(--content-max);
	margin: 0 auto;
	padding: 0 20px;
}

@media (min-width: 600px) {
	.ab-wrap { padding: 0 24px; }
}

.ab-site { min-height: 100vh; display: flex; flex-direction: column; }
.ab-site-content { flex: 1; padding: var(--gap-section) 0; }
.ab-site-content > .ab-wrap { padding-top: 0; padding-bottom: 0; }

/* ==========================================================================
   Chips
   ========================================================================== */
.ab-chip {
	display: inline-flex;
	align-items: center;
	padding: 3px 9px;
	border-radius: var(--radius-chip);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .2px;
	white-space: nowrap;
}

.ab-chip--games      { background: oklch(0.94 0.05 var(--hue-games));      color: oklch(0.4 0.14 var(--hue-games)); }
.ab-chip--apps        { background: oklch(0.94 0.05 var(--hue-apps));       color: oklch(0.4 0.14 var(--hue-apps)); }
.ab-chip--tips        { background: oklch(0.94 0.05 var(--hue-tips));       color: oklch(0.4 0.14 var(--hue-tips)); }
.ab-chip--overig      { background: oklch(0.94 0.05 var(--hue-overig));     color: oklch(0.4 0.14 var(--hue-overig)); }
.ab-chip--nieuws      { background: oklch(0.94 0.05 var(--hue-nieuws));     color: oklch(0.4 0.14 var(--hue-nieuws)); }
.ab-chip--antwoorden  { background: oklch(0.94 0.05 var(--hue-antwoorden)); color: oklch(0.4 0.14 var(--hue-antwoorden)); }
.ab-chip--tag         { background: var(--surface-alt); color: var(--text-secondary); }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
	position: sticky;
	top: 0;
	z-index: 30;
	background: oklch(0.995 0.002 90 / 0.92);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--border);
}

.ab-header-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 12px 0;
}

.ab-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	flex: none;
}

.site-logo {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: none;
}

.site-logo svg,
.site-logo img { width: 32px; height: 32px; border-radius: var(--radius-card-sm); flex: none; }

.ab-brand-name {
	font-weight: 800;
	font-size: 18px;
	color: var(--text);
	letter-spacing: -0.3px;
	white-space: nowrap;
}

.main-navigation {
	flex: 1;
	min-width: 0;
}

.main-navigation ul {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 22px;
	flex-wrap: wrap;
}

/* Woord Snack sub-nav: right-aligned on desktop (matches its old top-right position), still tucks into the same off-canvas panel on mobile */
.main-navigation--end ul { justify-content: flex-end; }
@media (max-width: 780px) {
	.main-navigation--end ul { justify-content: flex-start; }
}

.main-navigation a {
	font-size: 14px;
	font-weight: 600;
	color: var(--text-secondary);
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

.main-navigation a:hover,
.main-navigation a:focus-visible { color: var(--text); text-decoration: none; }

.main-navigation .ab-nav-antwoorden > a { color: oklch(0.5 0.14 var(--hue-antwoorden)); }

.ab-header-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: none;
}

.ab-icon-btn {
	width: 40px;
	height: 40px;
	min-width: 44px;
	min-height: 44px;
	border-radius: 50%;
	border: none;
	background: var(--surface-alt);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--text);
}
.ab-icon-btn:hover { background: var(--border-soft); }
.ab-icon-btn svg { width: 18px; height: 18px; }

.menu-toggle { display: none; }

/* Search panel (toggled) */
.ab-search-panel {
	display: none;
	border-top: 1px solid var(--border);
	padding: 14px 0;
}
.ab-search-panel.is-open { display: block; }
.ab-search-panel form {
	display: flex;
	align-items: center;
	gap: 10px;
	border: 1px solid var(--border);
	border-radius: var(--radius-card);
	padding: 10px 16px;
}
.ab-search-panel input[type="search"] {
	border: none;
	outline: none;
	flex: 1;
	background: transparent;
	font-size: 14px;
	color: var(--text);
}
.ab-search-panel button { border: none; background: none; color: var(--link); font-weight: 700; font-size: 13px; cursor: pointer; min-height: 44px; }

/* Mobile nav collapse */
@media (max-width: 780px) {
	.menu-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		border: none;
		background: var(--surface-alt);
		border-radius: 50%;
		cursor: pointer;
		flex: none;
	}
	.menu-toggle .ab-icon-close,
	.menu-toggle.is-active .ab-icon-open { display: none; }
	.menu-toggle.is-active .ab-icon-close { display: block; }

	.main-navigation {
		position: fixed;
		inset: 0 0 0 auto;
		top: var(--ab-header-h, 60px);
		width: min(320px, 84vw);
		height: calc(100vh - var(--ab-header-h, 60px));
		background: var(--bg);
		border-left: 1px solid var(--border);
		transform: translateX(100%);
		transition: transform .25s ease;
		overflow-y: auto;
		padding: 20px;
	}
	.main-navigation.is-open { transform: translateX(0); }
	.main-navigation ul { flex-direction: column; align-items: stretch; gap: 4px; }
	.main-navigation a { min-height: 48px; padding: 4px 0; border-bottom: 1px solid var(--border-soft); }

	@media (prefers-reduced-motion: reduce) {
		.main-navigation { transition: none; }
	}
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
	border-top: 1px solid var(--border);
	margin-top: var(--gap-section);
	padding: 28px 0;
	background: var(--surface-alt);
}

.ab-footer-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
}

.ab-footer-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 12.5px;
	color: var(--text-tertiary);
}
.ab-footer-brand .site-logo svg,
.ab-footer-brand .site-logo img { width: 24px; height: 24px; }
.ab-footer-brand strong { font-weight: 700; font-size: 14px; color: var(--text-secondary); }

.ab-footer-links {
	display: flex;
	gap: 16px;
	font-size: 13px;
	font-weight: 600;
	flex-wrap: wrap;
}

.ab-footer-social {
	display: flex;
	gap: 14px;
}
.ab-footer-social a {
	width: 32px; height: 32px; min-width: 44px; min-height: 44px;
	display: inline-flex; align-items: center; justify-content: center;
	color: var(--text-tertiary);
}

.site-footer .main-navigation,
.site-footer .social-navigation { display: none; } /* superseded by .ab-footer-links / .ab-footer-social markup */

/* ==========================================================================
   Popular-answers pill strip
   ========================================================================== */
.ab-pill-strip {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: var(--gap-section);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 4px;
}
.ab-pill-strip-label {
	flex: none;
	font-size: 13px;
	font-weight: 700;
	color: var(--text-secondary);
}
.ab-pill {
	flex: none;
	padding: 8px 14px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	border-radius: var(--radius-pill);
	font-size: 13px;
	font-weight: 700;
}

/* ==========================================================================
   Cards & grids
   ========================================================================== */
.ab-card { display: block; }
.ab-card-media {
	border-radius: var(--radius-card);
	overflow: hidden;
	margin-bottom: 10px;
	background: var(--surface-alt);
}
.ab-card-media img { width: 100%; height: 100%; object-fit: cover; }
.ab-card-title {
	font-weight: 700;
	font-size: 14px;
	color: var(--text);
	line-height: 1.3;
	margin: 6px 0 0;
}
.ab-card:hover .ab-card-title { text-decoration: underline; }
.ab-card-meta { font-size: 11.5px; color: var(--text-tertiary); margin-top: 6px; }
.ab-card-excerpt { font-size: 13.5px; color: var(--text-secondary); margin-top: 8px; line-height: 1.5; }

.ab-hero-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	margin-bottom: var(--gap-section);
}
.ab-hero-secondary { display: flex; flex-direction: column; gap: 16px; }
.ab-hero-secondary .ab-card { display: flex; gap: 12px; }
.ab-hero-secondary .ab-card-media { width: 120px; height: 88px; flex: none; margin-bottom: 0; }
.ab-hero-primary .ab-card-media { height: 220px; }
.ab-hero-primary .ab-card-title { font-weight: 800; font-size: 20px; letter-spacing: -0.3px; }

@media (min-width: 780px) {
	.ab-hero-grid { grid-template-columns: 1.4fr 1fr; }
	.ab-hero-primary .ab-card-media { height: 280px; }
	.ab-hero-primary .ab-card-title { font-size: 22px; }
}

.ab-main-layout { display: grid; grid-template-columns: 1fr; gap: var(--gap-section); }

@media (min-width: 960px) {
	.ab-main-layout { grid-template-columns: 1fr 300px; align-items: start; }
	.ab-main-layout .ab-sidebar { order: 2; }
	.ab-main-layout .ab-primary { order: 1; }
}

.ab-section-title { font-weight: 800; font-size: 15px; color: var(--text); margin: 0 0 14px; letter-spacing: -0.1px; }

.ab-article-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ab-related-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 600px) { .ab-related-grid { grid-template-columns: repeat(3, 1fr); } }

/* Card thumbnails had no set height, so they fell back to the featured
   image's natural/intrinsic size (huge). Fix them to the compact size the
   design intended, cropped via object-fit so any source image works. */
.ab-article-grid .ab-card-media { height: 110px; }
.ab-related-grid .ab-card-media { height: 120px; }
@media (min-width: 480px) {
	.ab-article-grid .ab-card-media { height: 130px; }
}
.ab-article-grid .ab-card-title { font-size: 13px; }
.ab-article-grid .ab-card-meta { margin-top: 4px; }

/* ==========================================================================
   Sidebar
   ========================================================================== */
.ab-sidebar { display: flex; flex-direction: column; gap: 16px; }
.ab-widget {
	border: 1px solid var(--border);
	border-radius: var(--radius-card);
	padding: 16px;
}
.ab-widget-title {
	font-size: 12px;
	font-weight: 800;
	color: var(--text-secondary);
	letter-spacing: .3px;
	margin: 0 0 12px;
	text-transform: uppercase;
}
.ab-widget-links { display: flex; flex-direction: column; gap: 10px; font-size: 13px; font-weight: 600; }
.ab-widget-chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* ==========================================================================
   Breadcrumb
   ========================================================================== */
.ab-breadcrumb { font-size: 13px; color: var(--text-tertiary); margin-bottom: 16px; }
.ab-breadcrumb a { color: var(--link); font-weight: 600; }
.ab-breadcrumb .is-current { color: oklch(0.5 0.14 var(--hue-antwoorden)); font-weight: 600; }

/* ==========================================================================
   Article body
   ========================================================================== */
.ab-article-head { margin-bottom: 20px; }
.ab-article-head h1 {
	font-weight: 800;
	font-size: 26px;
	line-height: 1.2;
	letter-spacing: -0.4px;
	margin: 10px 0 14px;
	color: var(--text);
}
@media (min-width: 600px) {
	.ab-article-head h1 { font-size: 32px; }
}
.ab-article-meta { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-secondary); flex-wrap: wrap; }
.ab-article-meta .ab-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--brand-green); flex: none; }
.ab-article-meta strong { color: var(--text); font-weight: 600; }

.ab-article-body { font-size: 15.5px; line-height: 1.75; color: oklch(0.25 0.01 90); }
.ab-article-body h2,
.ab-article-body h3 { font-weight: 800; color: var(--text); margin: 28px 0 12px; }
.ab-article-body h3 { font-size: 19px; }
.ab-article-body p { margin: 0 0 16px; }
.ab-article-body ul,
.ab-article-body ol { margin: 0 0 20px; padding-left: 20px; list-style: revert; }
.ab-article-body img { border-radius: var(--radius-card); margin: 16px 0; }

.ab-tag-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); }

/* ==========================================================================
   Antwoorden template
   ========================================================================== */
.ab-answer-intro { font-size: 14px; color: var(--text-secondary); margin-bottom: 20px; line-height: 1.6; }

.answer-callout {
	background: oklch(0.94 0.05 var(--hue-antwoorden));
	border: 1px solid oklch(0.85 0.08 var(--hue-antwoorden));
	border-radius: var(--radius-card-lg);
	padding: 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 20px;
}
.answer-callout__label {
	font-size: 12px;
	font-weight: 700;
	color: oklch(0.4 0.14 var(--hue-antwoorden));
	letter-spacing: .3px;
	margin-bottom: 6px;
	text-transform: uppercase;
}
.answer-callout__value {
	font-weight: 800;
	font-size: clamp(22px, 5vw, 30px);
	color: oklch(0.22 0.14 var(--hue-antwoorden));
	letter-spacing: -0.5px;
	overflow-wrap: break-word;
}
.answer-callout .search-btn,
.answer-callout a.search-btn {
	flex: none;
	padding: 12px 20px;
	min-height: 44px;
	border-radius: var(--radius-pill);
	background: oklch(0.4 0.14 var(--hue-antwoorden));
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	border: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.answer-callout .search-btn:hover { background: oklch(0.34 0.14 var(--hue-antwoorden)); color: #fff; text-decoration: none; }

.answer-search {
	border: 1px solid var(--border);
	border-radius: var(--radius-card);
	padding: 10px 12px;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 28px;
}
.answer-search input[type="text"] {
	min-width: 120px;
}
.answer-search input[type="text"] {
	border: none;
	outline: none;
	flex: 1;
	background: transparent;
	font-size: 14px;
	color: var(--text);
	min-height: 44px;
}
.answer-search input[type="submit"] {
	flex: none;
	border: none;
	border-radius: var(--radius-pill);
	background: var(--surface-alt);
	color: oklch(0.5 0.14 var(--hue-antwoorden));
	font-weight: 700;
	font-size: 13px;
	padding: 10px 16px;
	min-height: 44px;
	cursor: pointer;
}
.answer-search input[type="submit"]:hover { background: var(--border-soft); }

/* Stacked variant: used where a form has an extra control (e.g. a checkbox)
   that shouldn't squeeze into the single-row .answer-search layout. */
.answer-search--stacked form,
form.answer-search--stacked {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	margin-top: 10px;
}
.ab-checkbox-label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: var(--text-secondary);
	cursor: pointer;
}
.ab-checkbox-label input[type="checkbox"] { margin: 0; }

/* Results card: same cyan "antwoorden" family as .answer-callout, sized for a
   list of candidate answers rather than a single highlighted value. */
.answer-results {
	background: oklch(0.94 0.05 var(--hue-antwoorden));
	border: 1px solid oklch(0.85 0.08 var(--hue-antwoorden));
	border-radius: var(--radius-card-lg);
	padding: 16px 20px;
	margin: 16px 0;
}
.answer-results h3 {
	margin: 0 0 10px;
	font-size: 14px;
	font-weight: 800;
	color: oklch(0.3 0.14 var(--hue-antwoorden));
}
.answer-results table { margin-bottom: 0; background: transparent; }
.answer-results td { border-bottom-color: oklch(0.85 0.08 var(--hue-antwoorden) / .6); }

.ab-answer-section-title { font-weight: 800; font-size: 15px; color: var(--text); margin: 0 0 12px; }

.qa-list {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--border);
	border-radius: var(--radius-card);
	overflow: hidden;
	margin-bottom: 28px;
}
.qa-list li,
.qa-list__item {
	padding: 12px 16px;
	min-height: 44px;
	display: flex;
	align-items: center;
	font-size: 13.5px;
	color: var(--text-secondary);
	border-top: 1px solid var(--border-soft);
}
.qa-list li:first-child,
.qa-list__item:first-child { border-top: none; }
.qa-list li a { color: inherit; }
.qa-list__item--current,
.qa-list li.qa-list__item--current {
	font-weight: 700;
	color: oklch(0.22 0.14 var(--hue-antwoorden));
	background: oklch(0.97 0.02 var(--hue-antwoorden));
}

.ab-comments-jump {
	border-top: 1px solid var(--border);
	padding-top: 18px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	font-size: 13.5px;
}
.ab-comments-jump strong { font-weight: 700; color: var(--text-secondary); }
.ab-comments-jump a { font-weight: 700; color: oklch(0.5 0.14 var(--hue-antwoorden)); }

/* Legacy shortcode output (bare tables/forms from ab-shortcodes for games other
   than the 3 flagship antwoorden templates) — light-touch cleanup only. */
.ab-article-body table,
.entry-content table {
	width: 100%;
	table-layout: fixed; /* legacy shortcode tables have no CSS of their own — this is what stops long, unpredictable cell content (long questions, long answers) from forcing the table wider than its container */
	border-collapse: collapse;
	margin: 0 0 20px;
}
.ab-article-body table td,
.ab-article-body table th,
.entry-content table td,
.entry-content table th {
	padding: 8px 10px;
	border-bottom: 1px solid var(--border-soft);
	text-align: left;
	overflow-wrap: break-word;
	word-break: break-word;
}

/* Baseline styling for the many unclassed <input>/<form> elements the legacy
   shortcodes print directly (only .answer-search/.comment-form inputs are
   more specific and win over this). Without this, plain <input type=text>
   renders at the browser's tiny default size. */
input[type="text"],
input[type="search"],
input[type="email"],
input[type="number"] {
	box-sizing: border-box;
	width: 100%;
	max-width: 360px;
	padding: 10px 14px;
	border: 1px solid var(--border);
	border-radius: var(--radius-card-sm);
	font-size: 14px;
	min-height: 44px;
	margin-bottom: 8px;
}
input[type="checkbox"] {
	width: 16px;
	height: 16px;
	vertical-align: middle;
	margin-right: 6px;
}
form { max-width: 100%; }

/* ==========================================================================
   Parent-theme fallback templates (page.php, archive.php, search.php, 404.php,
   image.php) — not rebuilt in this pass, so these target the PARENT's own
   unchanged markup/classes to give them the same content width, padding and
   typography as the custom templates instead of rendering unstyled.
   ========================================================================== */
#primary.content-area {
	max-width: var(--content-max);
	margin: 0 auto;
	padding: 0 20px;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--gap-section);
}
@media (min-width: 600px) { #primary.content-area { padding: 0 24px; } }
@media (min-width: 960px) {
	#primary.content-area { grid-template-columns: 1fr 300px; align-items: start; }
}
#primary .entry-header .entry-title {
	font-weight: 800;
	font-size: 26px;
	line-height: 1.2;
	letter-spacing: -0.4px;
	margin: 16px 0;
	color: var(--text);
}
@media (min-width: 600px) {
	#primary .entry-header .entry-title { font-size: 32px; }
}
#secondary.widget-area,
.content-bottom-widgets {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
#secondary.widget-area .widget,
.content-bottom-widgets .widget-area {
	border: 1px solid var(--border);
	border-radius: var(--radius-card);
	padding: 16px;
}
#secondary.widget-area .widget-title {
	font-size: 12px;
	font-weight: 800;
	color: var(--text-secondary);
	letter-spacing: .3px;
	margin: 0 0 12px;
	text-transform: uppercase;
}

/* ==========================================================================
   Comments (parent comments.php markup, restyled only)
   ========================================================================== */
.comments-area { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--border); }
.comments-title { font-weight: 800; font-size: 18px; color: var(--text); margin: 0 0 16px; }
.comment-list,
.comment-list .children { list-style: none; margin: 0; padding: 0; }
.comment-list .children { padding-left: 24px; }
.comment-list > li + li,
.comment-list .children > li { margin-top: 16px; }
.comment-body {
	border: 1px solid var(--border);
	border-radius: var(--radius-card);
	padding: 14px 16px;
}
.comment-author.vcard { display: flex; align-items: center; gap: 10px; font-style: normal; }
.comment-author .avatar { border-radius: 50%; }
.comment-author .fn { font-weight: 700; font-size: 13.5px; color: var(--text); }
.comment-metadata { font-size: 12px; color: var(--text-tertiary); margin: 2px 0 8px; }
.comment-metadata a { color: inherit; }
.comment-content p { margin: 0 0 10px; font-size: 14px; line-height: 1.6; color: var(--text); }
.reply { margin-top: 8px; }
.comment-reply-link { font-size: 12.5px; font-weight: 700; color: var(--link); }
.comment-reply-title { font-weight: 800; font-size: 17px; margin: 24px 0 12px; }
.comment-form label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--text-secondary); }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	max-width: 100%;
	border: 1px solid var(--border);
	border-radius: var(--radius-card-sm);
	padding: 10px 12px;
	margin-bottom: 14px;
	color: var(--text);
	background: var(--bg);
}
.comment-form textarea { min-height: 120px; }
.comment-navigation { font-size: 13px; font-weight: 600; display: flex; justify-content: space-between; margin: 12px 0; }

/* ==========================================================================
   Buttons (generic, used by legacy shortcode forms too)
   ========================================================================== */
.search-btn,
button[type="submit"],
input[type="submit"] {
	border-radius: var(--radius-pill);
	border: none;
	background: var(--brand-green-btn);
	color: #fff;
	font-weight: 700;
	font-size: 13px;
	padding: 10px 18px;
	min-height: 44px;
	cursor: pointer;
}
.search-btn:hover,
button[type="submit"]:hover,
input[type="submit"]:hover { opacity: .9; }