/*
Theme Name: SEO Tools
Theme URI: https://example.com/seo-tools
Author: Niche Bloggers
Author URI: https://example.com
Description: A professional WordPress theme for running a free SEO tools website. Ships with two working tools - an XML Sitemap Keyword Extractor and an XML Sitemap Generator - a tools directory home page, individual tool pages, and a blog. Clean, fast and built for organic traffic.
Version: 2.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: seo-tools
Tags: two-columns, custom-colors, custom-menu, custom-logo, editor-style, full-width-template, translation-ready, blog
*/

/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
	color-scheme: light;

	--font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-mono: ui-monospace, "SFMono-Regular", "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

	/* Neutrals */
	--bg: #f6f7f9;
	--surface: #ffffff;
	--surface-2: #f9fafb;
	--surface-3: #f2f4f7;
	--border: #e4e7ec;
	--border-2: #d0d5dd;

	--ink: #101828;
	--body: #475467;
	--muted: #667085;
	--faint: #98a2b3;

	/* Brand */
	--brand: #1549c9;
	--brand-dark: #10389c;
	--brand-tint: #eef3ff;
	--brand-line: #c7d7fe;

	/* Status */
	--ok: #067647;
	--ok-bg: #ecfdf3;
	--ok-line: #abefc6;
	--warn: #b54708;
	--warn-bg: #fffaeb;
	--warn-line: #fedf89;
	--bad: #b42318;
	--bad-bg: #fef3f2;
	--bad-line: #fecdca;

	--navy: #0c1524;
	--navy-2: #16213a;

	--r-xs: 4px;
	--r-sm: 6px;
	--r: 8px;
	--r-lg: 12px;

	--sh-1: 0 1px 2px rgba(16, 24, 40, .05);
	--sh-2: 0 2px 4px -1px rgba(16, 24, 40, .06), 0 4px 12px -2px rgba(16, 24, 40, .06);
	--sh-3: 0 8px 24px -6px rgba(16, 24, 40, .12);

	--wrap: 1200px;
	--wrap-narrow: 760px;
	--gutter: clamp(1rem, 4vw, 2rem);
}

/* ==========================================================================
   2. Base
   ========================================================================== */

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

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

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
}

body {
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background: var(--bg);
	color: var(--body);
	font-family: var(--font);
	font-size: 16px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img, svg, video, canvas, iframe { max-width: 100%; }
img, svg, video, canvas { height: auto; display: block; }

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 .5em;
	color: var(--ink);
	font-weight: 700;
	line-height: 1.22;
	letter-spacing: -.018em;
}

h1 { font-size: clamp(1.95rem, 1.45rem + 2.1vw, 2.9rem); line-height: 1.14; letter-spacing: -.028em; }
h2 { font-size: clamp(1.45rem, 1.2rem + 1.1vw, 2rem); letter-spacing: -.022em; }
h3 { font-size: clamp(1.15rem, 1.05rem + .45vw, 1.35rem); }
h4 { font-size: 1.05rem; }

p { margin: 0 0 1.1rem; }
p:last-child { margin-bottom: 0; }

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

strong, b { color: var(--ink); font-weight: 650; }

code, kbd, pre, samp { font-family: var(--font-mono); font-size: .9em; }

code {
	padding: .12em .4em;
	background: var(--surface-3);
	border-radius: var(--r-xs);
	color: var(--ink);
}

pre {
	padding: 1rem 1.15rem;
	background: var(--surface-3);
	border: 1px solid var(--border);
	border-radius: var(--r);
	overflow-x: auto;
}
pre code { background: none; padding: 0; }

hr { border: 0; height: 1px; background: var(--border); margin: 2.5rem 0; }

blockquote {
	margin: 1.5rem 0;
	padding: .25rem 0 .25rem 1.25rem;
	border-left: 3px solid var(--brand);
	color: var(--muted);
}

table { border-collapse: collapse; }

:focus-visible {
	outline: 2px solid var(--brand);
	outline-offset: 2px;
	border-radius: var(--r-xs);
}

.sr-only {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	top: -100px; left: 1rem;
	z-index: 999;
	padding: .65rem 1rem;
	background: var(--brand);
	color: #fff;
	border-radius: var(--r-sm);
	font-weight: 600;
}
.skip-link:focus { top: 1rem; color: #fff; text-decoration: none; }

/* ==========================================================================
   3. Layout
   ========================================================================== */

.wrap {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.wrap--narrow { max-width: var(--wrap-narrow); }

.main { flex: 1 0 auto; }

.section { padding: clamp(2.5rem, 5vw, 4.5rem) 0; }
.section--tight { padding: clamp(1.75rem, 3.5vw, 2.75rem) 0; }
.section--alt { background: var(--surface); border-block: 1px solid var(--border); }

.section-head { max-width: 640px; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p { margin-top: .5rem; color: var(--muted); }

.eyebrow {
	margin: 0 0 .6rem;
	color: var(--brand);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
}

.lede {
	color: var(--muted);
	font-size: clamp(1rem, .96rem + .25vw, 1.12rem);
	line-height: 1.6;
}

/* ==========================================================================
   4. Header
   ========================================================================== */

.site-header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: var(--surface);
	border-bottom: 1px solid var(--border);
}

.site-header__inner {
	display: flex;
	align-items: center;
	gap: 2rem;
	height: 68px;
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	color: var(--ink);
	font-size: 1.06rem;
	font-weight: 700;
	letter-spacing: -.02em;
	white-space: nowrap;
}
.brand:hover { color: var(--ink); text-decoration: none; }

.brand__mark {
	display: grid;
	place-items: center;
	width: 32px; height: 32px;
	flex: none;
	background: var(--brand);
	color: #fff;
	border-radius: var(--r-sm);
}
.brand__mark svg { width: 19px; height: 19px; }
.brand img { max-height: 38px; width: auto; }

.nav { margin-right: auto; }

.nav > ul {
	display: flex;
	align-items: center;
	gap: .25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nav > ul > li { position: relative; }

.nav a {
	display: flex;
	align-items: center;
	gap: .3rem;
	padding: .5rem .7rem;
	border-radius: var(--r-sm);
	color: var(--body);
	font-size: .94rem;
	font-weight: 550;
}
.nav a:hover { color: var(--ink); background: var(--surface-3); text-decoration: none; }

.nav .current-menu-item > a,
.nav .current_page_item > a,
.nav .current-menu-ancestor > a { color: var(--ink); font-weight: 650; }

.nav .menu-item-has-children > a::after {
	content: "";
	width: 6px; height: 6px;
	margin-left: .1rem;
	border-right: 1.6px solid var(--faint);
	border-bottom: 1.6px solid var(--faint);
	transform: rotate(45deg) translate(-2px, -2px);
}

.nav .sub-menu {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	min-width: 230px;
	display: none;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	padding: 6px;
	list-style: none;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--r);
	box-shadow: var(--sh-3);
}
.nav li:hover > .sub-menu,
.nav li:focus-within > .sub-menu { display: flex; }
.nav .sub-menu a { padding: .55rem .7rem; font-size: .92rem; }

.header-actions { display: flex; align-items: center; gap: .5rem; }

.burger {
	display: none;
	width: 40px; height: 40px;
	place-items: center;
	background: none;
	border: 1px solid var(--border);
	border-radius: var(--r-sm);
	color: var(--body);
	cursor: pointer;
}
.burger svg { width: 20px; height: 20px; }

@media (max-width: 900px) {
	.burger { display: grid; }
	.nav {
		position: absolute;
		inset: 68px 0 auto;
		display: none;
		max-height: calc(100vh - 68px);
		overflow-y: auto;
		padding: .75rem var(--gutter) 1.25rem;
		background: var(--surface);
		border-bottom: 1px solid var(--border);
		box-shadow: var(--sh-2);
	}
	.nav.is-open { display: block; }
	.nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
	.nav a { padding: .7rem .5rem; font-size: 1rem; }
	.nav .sub-menu {
		position: static;
		display: flex;
		border: 0;
		box-shadow: none;
		padding: 0 0 .25rem .75rem;
	}
	.nav .menu-item-has-children > a::after { display: none; }
	.header-actions .btn { display: none; }
}

/* ==========================================================================
   5. Buttons
   ========================================================================== */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .45rem;
	padding: .65rem 1.1rem;
	border: 1px solid transparent;
	border-radius: var(--r-sm);
	font: inherit;
	font-size: .94rem;
	font-weight: 600;
	line-height: 1.35;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover { text-decoration: none; }
.btn svg { width: 16px; height: 16px; flex: none; }

.btn--primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn--primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }

.btn--secondary { background: var(--surface); border-color: var(--border-2); color: var(--ink); }
.btn--secondary:hover { background: var(--surface-2); border-color: var(--faint); color: var(--ink); }

.btn--ghost { background: transparent; color: var(--body); }
.btn--ghost:hover { background: var(--surface-3); color: var(--ink); }

.btn--lg { padding: .8rem 1.4rem; font-size: 1rem; }
.btn--sm { padding: .45rem .75rem; font-size: .86rem; }

.btn[disabled],
.btn.is-busy { opacity: .6; cursor: not-allowed; }

.btn-row { display: flex; flex-wrap: wrap; gap: .6rem; }

/* ==========================================================================
   6. Forms
   ========================================================================== */

.field-label {
	display: block;
	margin-bottom: .4rem;
	color: var(--ink);
	font-size: .88rem;
	font-weight: 600;
}

.hint { margin-top: .4rem; color: var(--muted); font-size: .85rem; }

input[type="text"],
input[type="url"],
input[type="search"],
input[type="email"],
input[type="number"],
select,
textarea {
	width: 100%;
	padding: .62rem .8rem;
	background: var(--surface);
	border: 1px solid var(--border-2);
	border-radius: var(--r-sm);
	color: var(--ink);
	font: inherit;
	font-size: .95rem;
	line-height: 1.5;
	transition: border-color .15s ease, box-shadow .15s ease;
}

input::placeholder, textarea::placeholder { color: var(--faint); }

input[type="text"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
	outline: none;
	border-color: var(--brand);
	box-shadow: 0 0 0 3px rgba(21, 73, 201, .12);
}

select {
	appearance: none;
	padding-right: 2.1rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23667085' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right .65rem center;
	background-size: 16px;
}

textarea { min-height: 120px; resize: vertical; font-family: var(--font-mono); font-size: .88rem; }

.check {
	display: flex;
	align-items: flex-start;
	gap: .55rem;
	cursor: pointer;
	font-size: .92rem;
	color: var(--body);
}
.check input[type="checkbox"],
.check input[type="radio"] {
	flex: none;
	width: 17px; height: 17px;
	margin: .18rem 0 0;
	accent-color: var(--brand);
	cursor: pointer;
}
.check span { line-height: 1.45; }
.check strong { display: block; color: var(--ink); font-weight: 600; }
.check small { display: block; color: var(--muted); font-size: .84rem; line-height: 1.4; }

.field-grid {
	display: grid;
	gap: 1rem 1.25rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
}

/* ==========================================================================
   7. Cards & surfaces
   ========================================================================== */

.card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	box-shadow: var(--sh-1);
}

.card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 1.35rem;
	border-bottom: 1px solid var(--border);
}
.card__title { margin: 0; font-size: 1.02rem; font-weight: 650; color: var(--ink); }
.card__meta { color: var(--muted); font-size: .85rem; }
.card__body { padding: clamp(1.15rem, 2.5vw, 1.75rem); }

/* Tools directory */
.tool-grid {
	display: grid;
	gap: 1.15rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}

.tool-card {
	display: flex;
	flex-direction: column;
	padding: 1.5rem;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	box-shadow: var(--sh-1);
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.tool-card:hover { border-color: var(--border-2); box-shadow: var(--sh-2); transform: translateY(-2px); }

.tool-card__icon {
	display: grid;
	place-items: center;
	width: 42px; height: 42px;
	margin-bottom: 1rem;
	background: var(--brand-tint);
	border: 1px solid var(--brand-line);
	border-radius: var(--r);
	color: var(--brand);
}
.tool-card__icon svg { width: 21px; height: 21px; }

.tool-card h3 { margin-bottom: .4rem; font-size: 1.1rem; }
.tool-card h3 a { color: var(--ink); }
.tool-card h3 a:hover { color: var(--brand); text-decoration: none; }
.tool-card p { margin: 0 0 1.1rem; color: var(--muted); font-size: .93rem; }

.tool-card__foot {
	margin-top: auto;
	display: flex;
	align-items: center;
	gap: .35rem;
	color: var(--brand);
	font-size: .9rem;
	font-weight: 600;
}
.tool-card__foot svg { width: 15px; height: 15px; transition: transform .15s ease; }
.tool-card:hover .tool-card__foot svg { transform: translateX(3px); }

.tool-card--soon { opacity: .72; }
.tool-card--soon .tool-card__icon { background: var(--surface-3); border-color: var(--border); color: var(--faint); }

.tag {
	display: inline-block;
	padding: .12rem .45rem;
	border-radius: var(--r-xs);
	background: var(--surface-3);
	color: var(--muted);
	font-size: .72rem;
	font-weight: 650;
	letter-spacing: .03em;
	text-transform: uppercase;
	vertical-align: middle;
}

/* Feature list */
.feature-grid {
	display: grid;
	gap: 1.75rem 2rem;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1040px) {
	.feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
	.feature-grid { grid-template-columns: 1fr; }
}
.feature__icon {
	display: grid;
	place-items: center;
	width: 36px; height: 36px;
	margin-bottom: .85rem;
	border: 1px solid var(--border);
	border-radius: var(--r-sm);
	background: var(--surface);
	color: var(--brand);
}
.feature__icon svg { width: 18px; height: 18px; }
.feature h3 { margin-bottom: .35rem; font-size: 1.02rem; }
.feature p { margin: 0; color: var(--muted); font-size: .93rem; }

/* Numbered steps */
.steps { counter-reset: step; display: grid; gap: 1.75rem 2rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 800px) {
	.steps { grid-template-columns: 1fr; }
}
.step { position: relative; padding-top: 2.6rem; }
.step::before {
	counter-increment: step;
	content: counter(step, decimal-leading-zero);
	position: absolute;
	top: 0; left: 0;
	display: grid;
	place-items: center;
	width: 34px; height: 34px;
	background: var(--ink);
	color: #fff;
	border-radius: var(--r-sm);
	font-family: var(--font-mono);
	font-size: .82rem;
	font-weight: 600;
}
.step h3 { margin-bottom: .3rem; font-size: 1.02rem; }
.step p { margin: 0; color: var(--muted); font-size: .93rem; }

/* ==========================================================================
   8. Alerts
   ========================================================================== */

.notice {
	display: flex;
	align-items: flex-start;
	gap: .65rem;
	padding: .8rem 1rem;
	border: 1px solid var(--border);
	border-radius: var(--r);
	background: var(--surface-2);
	color: var(--body);
	font-size: .92rem;
}
.notice svg { flex: none; width: 17px; height: 17px; margin-top: .18rem; }
.notice__icon { flex: none; margin-top: .18rem; line-height: 0; }
.notice__icon > span { display: none; }

.notice--info { background: var(--brand-tint); border-color: var(--brand-line); color: #1a3a8f; }
.notice--info .notice__icon { color: var(--brand); }
.notice--info .notice__icon > [data-notice="info"] { display: block; }

.notice--success { background: var(--ok-bg); border-color: var(--ok-line); color: #05603a; }
.notice--success .notice__icon { color: var(--ok); }
.notice--success .notice__icon > [data-notice="success"] { display: block; }

.notice--warn { background: var(--warn-bg); border-color: var(--warn-line); color: #93370d; }
.notice--warn .notice__icon { color: var(--warn); }
.notice--warn .notice__icon > [data-notice="warn"] { display: block; }

.notice--error { background: var(--bad-bg); border-color: var(--bad-line); color: #912018; }
.notice--error .notice__icon { color: var(--bad); }
.notice--error .notice__icon > [data-notice="error"] { display: block; }

/* ==========================================================================
   9. Breadcrumbs & page headers
   ========================================================================== */

.crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .3rem .45rem;
	margin-bottom: 1.1rem;
	color: var(--muted);
	font-size: .85rem;
}
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--brand); }
.crumbs span[aria-hidden] { color: var(--faint); }
.crumbs [aria-current] { color: var(--ink); font-weight: 550; }

.page-hero { padding: clamp(2rem, 4vw, 3.25rem) 0 clamp(1.25rem, 2.5vw, 2rem); }
.page-hero .lede { margin-top: .75rem; max-width: 68ch; }

.home-hero {
	padding: clamp(2.75rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3rem);
	text-align: center;
}
.home-hero .lede { margin: 1rem auto 0; max-width: 62ch; }
.home-hero .btn-row { justify-content: center; margin-top: 1.75rem; }

.stat-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0;
	margin-top: 2.5rem;
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	background: var(--surface);
	overflow: hidden;
}
.stat-row > div {
	flex: 1 1 180px;
	padding: 1.1rem 1.25rem;
	border-right: 1px solid var(--border);
	text-align: center;
}
.stat-row > div:last-child { border-right: 0; }
.stat-row strong { display: block; color: var(--ink); font-size: 1.4rem; font-weight: 700; letter-spacing: -.02em; }
.stat-row span { color: var(--muted); font-size: .85rem; }

@media (max-width: 620px) {
	.stat-row > div { flex-basis: 50%; border-bottom: 1px solid var(--border); }
	.stat-row > div:nth-child(2n) { border-right: 0; }
}

/* ==========================================================================
   10. Prose / editor content
   ========================================================================== */

.prose { max-width: 72ch; color: var(--body); }
.prose > * + * { margin-top: 1.1rem; }
.prose h2 { margin-top: 2.25rem; }
.prose h3 { margin-top: 1.75rem; }
.prose ul, .prose ol { padding-left: 1.3rem; margin-block: 1.1rem; }
.prose li + li { margin-top: .35rem; }
.prose img { border-radius: var(--r); }
.prose table { width: 100%; font-size: .93rem; }
.prose th, .prose td { padding: .6rem .8rem; border: 1px solid var(--border); text-align: left; }
.prose th { background: var(--surface-2); color: var(--ink); }
.prose figure { margin: 1.5rem 0; }

/* FAQ */
.faq { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
.faq details + details { border-top: 1px solid var(--border); }
.faq summary {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.05rem 1.35rem;
	color: var(--ink);
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
	content: "";
	flex: none;
	width: 9px; height: 9px;
	margin-top: .45rem;
	border-right: 1.8px solid var(--faint);
	border-bottom: 1.8px solid var(--faint);
	transform: rotate(45deg);
	transition: transform .15s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: .6rem; }
.faq details[open] summary { color: var(--brand); }
.faq__body { padding: 0 1.35rem 1.2rem; color: var(--muted); font-size: .95rem; }
.faq__body p + p { margin-top: .75rem; }

/* ==========================================================================
   11. Blog
   ========================================================================== */

.post-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); }

.post-card {
	display: flex;
	flex-direction: column;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	overflow: hidden;
	box-shadow: var(--sh-1);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.post-card:hover { border-color: var(--border-2); box-shadow: var(--sh-2); }
.post-card__thumb img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.post-card__body { padding: 1.35rem; display: flex; flex-direction: column; flex: 1; }
.post-card h2 { font-size: 1.15rem; margin-bottom: .45rem; }
.post-card h2 a { color: var(--ink); }
.post-card h2 a:hover { color: var(--brand); text-decoration: none; }
.post-card p { color: var(--muted); font-size: .92rem; margin-bottom: 1rem; }

.entry-meta {
	display: flex;
	flex-wrap: wrap;
	gap: .3rem .8rem;
	margin-top: auto;
	color: var(--faint);
	font-size: .83rem;
}
.entry-meta a { color: var(--faint); }

.pagination { margin-top: 2.5rem; }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: .35rem; }
.pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 38px; height: 38px;
	padding: 0 .65rem;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--r-sm);
	color: var(--body);
	font-size: .9rem;
}
.pagination .page-numbers:hover { border-color: var(--border-2); color: var(--ink); text-decoration: none; }
.pagination .page-numbers.current { background: var(--brand); border-color: var(--brand); color: #fff; }

.empty-state {
	padding: 3rem 1.5rem;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	text-align: center;
	color: var(--muted);
}

.searchform { display: flex; gap: .5rem; max-width: 440px; }
.searchform input[type="search"] { flex: 1; }

.error-page { padding: clamp(3rem, 8vw, 5.5rem) 0; text-align: center; }
.error-page__code { color: var(--faint); font-family: var(--font-mono); font-size: clamp(3rem, 10vw, 5rem); font-weight: 700; line-height: 1; letter-spacing: -.04em; }

/* Related tools strip */
.related { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.related__item {
	display: flex;
	gap: .85rem;
	padding: 1.1rem 1.2rem;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--r);
}
.related__item:hover { border-color: var(--border-2); text-decoration: none; }
.related__item svg { flex: none; width: 20px; height: 20px; margin-top: .15rem; color: var(--brand); }
.related__item strong { display: block; color: var(--ink); font-size: .96rem; }
.related__item span { color: var(--muted); font-size: .87rem; }

/* ==========================================================================
   12. Footer
   ========================================================================== */

.site-footer {
	flex: none;
	margin-top: clamp(3rem, 6vw, 5rem);
	background: var(--navy);
	color: #a9b4c7;
}

.site-footer a { color: #a9b4c7; }
.site-footer a:hover { color: #fff; text-decoration: none; }

.site-footer__top {
	display: grid;
	gap: 2rem 3rem;
	grid-template-columns: minmax(220px, 1.4fr) repeat(auto-fit, minmax(150px, 1fr));
	padding: clamp(2.5rem, 5vw, 3.5rem) 0;
}

.site-footer__brand .brand { color: #fff; }
.site-footer__brand .brand__mark { background: #fff; color: var(--navy); }
.site-footer__brand p { margin-top: .9rem; color: #7d8aa1; font-size: .9rem; max-width: 34ch; }

.site-footer h3 {
	margin-bottom: .85rem;
	color: #fff;
	font-size: .82rem;
	font-weight: 650;
	letter-spacing: .07em;
	text-transform: uppercase;
}

.site-footer ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .55rem; }
.site-footer li { font-size: .92rem; }

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .75rem 1.5rem;
	padding: 1.25rem 0;
	border-top: 1px solid var(--navy-2);
	color: #7d8aa1;
	font-size: .87rem;
}
.site-footer__bottom p { margin: 0; }
.site-footer__bottom ul { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }

/* Widgets */
.footer-widgets { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); padding-bottom: 1.5rem; }
.widget__title { color: #fff; font-size: .95rem; }

/* ==========================================================================
   13. Toasts
   ========================================================================== */

.toasts {
	position: fixed;
	right: 1.25rem;
	bottom: 1.25rem;
	z-index: 90;
	display: flex;
	flex-direction: column;
	gap: .5rem;
	pointer-events: none;
}

.toast {
	display: flex;
	align-items: center;
	gap: .55rem;
	padding: .65rem .95rem;
	background: var(--ink);
	color: #fff;
	border-radius: var(--r-sm);
	font-size: .89rem;
	font-weight: 550;
	box-shadow: var(--sh-3);
	animation: toast-in .18s ease-out;
}
.toast svg { width: 16px; height: 16px; flex: none; }
.toast--error { background: var(--bad); }
.toast.is-leaving { animation: toast-out .18s ease-in forwards; }

@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(6px); } }

@media (max-width: 560px) {
	.toasts { left: 1rem; right: 1rem; }
}

/* ==========================================================================
   14. Post extras & comments
   ========================================================================== */

.post-hero-image { margin: 0 0 2rem; }
.post-hero-image img { border-radius: var(--r-lg); width: 100%; }

.comments { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--border); }
.comments__title { font-size: 1.2rem; }
.comment-list { list-style: none; margin: 0 0 2rem; padding: 0; }
.comment-list ol { list-style: none; padding-left: 1.5rem; }
.comment-list .comment-body { padding: 1.1rem 0; border-bottom: 1px solid var(--border); }
.comment-list .comment-author { display: flex; align-items: center; gap: .6rem; color: var(--ink); font-weight: 600; }
.comment-list .comment-author img { border-radius: 50%; }
.comment-list .comment-metadata { color: var(--faint); font-size: .82rem; }
.comment-respond { margin-top: 2rem; }
.comment-form { display: grid; gap: .9rem; }
.comment-form label { display: block; margin-bottom: .3rem; color: var(--ink); font-size: .88rem; font-weight: 600; }
.comment-form .form-submit { margin: 0; }

.widget { color: #a9b4c7; font-size: .92rem; }
.widget__title { margin-bottom: .6rem; }
.widget ul { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }