/*
 * ToolsBased — Hand-Drawn Design System
 *
 * Wobbly borders, hard offset shadows, warm paper texture, playful rotation,
 * and press-flat buttons. Light + dark via CSS variables on :root / [data-theme].
 */

:root {
	/* Palette (light) */
	--tb-paper: #fdfbf7;
	--tb-ink: #2d2d2d;            /* soft pencil black */
	--tb-erased: #e5e0d8;         /* old paper */
	--tb-accent: #ff4d4d;         /* red correction marker */
	--tb-accent2: #2d5da1;        /* blue ballpoint */
	--tb-postit: #fff9c4;         /* post-it yellow */
	--tb-card: #ffffff;           /* card surface */
	--tb-ring: rgba(45, 93, 161, 0.2);

	/* Typography — system fonts only, no webfont downloads. */
	--tb-font-head: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--tb-font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	/* Wobbly radii */
	--tb-wobble: 255px 15px 225px 15px / 15px 225px 15px 255px;
	--tb-wobble-md: 95px 15px 100px 15px / 15px 95px 15px 100px;

	/* Hard offset shadows (no blur) */
	--tb-shadow: 4px 4px 0px 0px var(--tb-ink);
	--tb-shadow-lg: 8px 8px 0px 0px var(--tb-ink);
	--tb-shadow-card: 3px 3px 0px 0px rgba(45, 45, 45, 0.1);
	--tb-shadow-hover: 6px 6px 0px 0px var(--tb-ink);
	--tb-shadow-flat: 0px 0px 0px 0px var(--tb-ink);
}

[data-theme="dark"] {
	--tb-paper: #20201f;
	--tb-ink: #e8e4dc;
	--tb-erased: #3a3936;
	--tb-accent: #ff6b6b;
	--tb-accent2: #6b9be0;
	--tb-postit: #4d4a2f;
	--tb-card: #2b2b2a;
	--tb-ring: rgba(107, 155, 224, 0.25);
	--tb-shadow: 4px 4px 0px 0px #000;
	--tb-shadow-lg: 8px 8px 0px 0px #000;
	--tb-shadow-card: 3px 3px 0px 0px rgba(0, 0, 0, 0.4);
	--tb-shadow-hover: 6px 6px 0px 0px #000;
	--tb-shadow-flat: 0px 0px 0px 0px #000;
}

body {
	background-color: var(--tb-paper);
	color: var(--tb-ink);
	font-family: var(--tb-font-body);
	/* Notebook paper grain */
	background-image: radial-gradient(var(--tb-erased) 1px, transparent 1px);
	background-size: 24px 24px;
	background-attachment: fixed;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--tb-font-head);
}

/* Site blocks container keeps paper background clean */
.wp-site-blocks {
	background-color: transparent;
}

/* ---------- Buttons: press-flat, wobbly ---------- */
.tb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 48px;
	padding: 0.55rem 1.4rem;
	background: var(--tb-card);
	color: var(--tb-ink);
	font-family: var(--tb-font-body);
	font-size: 1.125rem;
	line-height: 1;
	border: 3px solid var(--tb-ink);
	border-radius: var(--tb-wobble-md);
	box-shadow: var(--tb-shadow);
	cursor: pointer;
	transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.1s ease, color 0.1s ease;
	user-select: none;
}
.tb-btn:hover {
	background: var(--tb-accent);
	color: #fff;
	box-shadow: 2px 2px 0px 0px var(--tb-ink);
	transform: translate(2px, 2px);
}
.tb-btn:active {
	box-shadow: var(--tb-shadow-flat);
	transform: translate(4px, 4px);
}
.tb-btn:focus-visible {
	outline: 3px solid var(--tb-accent2);
	outline-offset: 2px;
}
.tb-btn--secondary {
	background: var(--tb-erased);
}
.tb-btn--secondary:hover {
	background: var(--tb-accent2);
	color: #fff;
}
.tb-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ---------- Cards / containers ---------- */
.tb-card {
	position: relative;
	background: var(--tb-card);
	border: 3px solid var(--tb-ink);
	border-radius: var(--tb-wobble-md);
	box-shadow: var(--tb-shadow-card);
	padding: 1.5rem;
}
.tb-card--postit {
	background: var(--tb-postit);
}
.tb-card--tack::before {
	content: "";
	position: absolute;
	top: -10px;
	left: 50%;
	transform: translateX(-50%);
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 35%, #ff8888, var(--tb-accent) 60%, #c03030);
	border: 2px solid rgba(0, 0, 0, 0.25);
	box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.3);
}
.tb-card--tape::before {
	content: "";
	position: absolute;
	top: -14px;
	left: 50%;
	transform: translateX(-50%) rotate(-2deg);
	width: 120px;
	height: 28px;
	background: rgba(229, 224, 216, 0.75);
	border-left: 1px dashed rgba(45, 45, 45, 0.2);
	border-right: 1px dashed rgba(45, 45, 45, 0.2);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* ---------- Inputs ---------- */
.tb-input,
.tb-textarea,
.tb-select {
	width: 100%;
	background: var(--tb-card);
	color: var(--tb-ink);
	font-family: var(--tb-font-body);
	font-size: 1.0625rem;
	padding: 0.6rem 0.9rem;
	border: 3px solid var(--tb-ink);
	border-radius: var(--tb-wobble);
	box-shadow: var(--tb-shadow-card);
}
.tb-input::placeholder,
.tb-textarea::placeholder {
	color: color-mix(in srgb, var(--tb-ink) 40%, transparent);
}
.tb-input:focus,
.tb-textarea:focus,
.tb-select:focus {
	outline: none;
	border-color: var(--tb-accent2);
	box-shadow: 0 0 0 3px var(--tb-ring);
}
.tb-textarea {
	min-height: 120px;
	resize: vertical;
}
.tb-label {
	display: block;
	font-family: var(--tb-font-head);
	font-weight: 700;
	margin-bottom: 0.35rem;
}
.tb-field {
	margin-bottom: 1.1rem;
}

/* ---------- Label tags (sticky note) ---------- */
.tb-tag {
	display: inline-block;
	background: var(--tb-postit);
	border: 2px solid var(--tb-ink);
	border-radius: 4px;
	padding: 0.15rem 0.7rem;
	font-family: var(--tb-font-head);
	font-weight: 700;
	box-shadow: 2px 2px 0px 0px var(--tb-ink);
	transform: rotate(-1deg);
}

/* ---------- Ad wrappers ---------- */
.tb-ad {
	position: relative;
	background: color-mix(in srgb, var(--tb-erased) 50%, transparent);
	border: 2px dashed color-mix(in srgb, var(--tb-ink) 45%, transparent);
	border-radius: var(--tb-wobble);
	text-align: center;
	color: color-mix(in srgb, var(--tb-ink) 45%, transparent);
	font-family: var(--tb-font-body);
	min-height: 90px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 1rem 0;
	overflow: hidden;
}
.tb-ad--leaderboard {
	min-height: 90px;
	width: 100%;
}
.tb-ad--sidebar {
	min-height: 280px;
}

/* ---------- Workspace grid (tools) ---------- */
.tb-workspace {
	display: grid;
	gap: 1.5rem;
}
@media (min-width: 992px) {
	.tb-workspace--with-sidebar {
		grid-template-columns: minmax(0, 1fr) 320px;
	}
	.tb-workspace--split {
		grid-template-columns: 1fr 1fr;
	}
}

/* ---------- Rotations & motion ---------- */
.tb-rotate-1 { transform: rotate(1deg); }
.tb-rotate-2 { transform: rotate(-2deg); }
.tb-jiggle { transition: transform 0.1s ease; }
.tb-jiggle:hover { transform: rotate(1deg) scale(1.01); }

@keyframes tb-bounce {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-8px); }
}
.tb-bounce { animation: tb-bounce 3s ease-in-out infinite; }

/* ---------- Result / output ---------- */
.tb-output {
	background: var(--tb-card);
	border: 3px dashed var(--tb-ink);
	border-radius: var(--tb-wobble-md);
	padding: 1.25rem;
	font-family: var(--tb-font-body);
	white-space: pre-wrap;
	word-break: break-word;
	min-height: 60px;
}
.tb-copy {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
}

@media (prefers-reduced-motion: reduce) {
	.tb-bounce { animation: none; }
	.tb-btn, .tb-jiggle { transition: none; }
}

/* ---------- Tool page layout ---------- */
.tb-tool-page {
	width: 100%;
}
.tb-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}
.tb-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	padding: 1rem 0 0;
	font-family: var(--tb-font-body);
	font-size: 1rem;
}
.tb-breadcrumb a {
	color: var(--tb-accent2);
	text-decoration: underline;
	text-decoration-style: dashed;
	text-underline-offset: 4px;
}
.tb-current {
	font-family: var(--tb-font-head);
	font-weight: 700;
}
.tb-tool-header {
	text-align: center;
	padding: 1.75rem 1.5rem;
}
.tb-tool-title {
	font-family: var(--tb-font-head);
	font-size: clamp(1.6rem, 4vw, 2.4rem);
	margin: 0;
}
.tb-tool-tagline {
	font-size: 1.15rem;
	margin: 0.4rem 0 0;
	opacity: 0.8;
}
.tb-tool-body {
	padding: 1.5rem;
}
.tb-tool-root {
	min-height: 200px;
}
.tb-loader {
	text-align: center;
	font-size: 1.2rem;
	font-family: var(--tb-font-head);
	opacity: 0.6;
}
.tb-notice {
	background: var(--tb-postit);
	border-radius: var(--tb-wobble-md);
	padding: 1rem;
}
.tb-tool-desc {
	display: block;
}
.tb-card-title {
	font-family: var(--tb-font-head);
	font-size: 1.5rem;
	margin: 0 0 0.5rem;
}
.tb-privacy-note {
	font-size: 0.95rem;
	opacity: 0.8;
}
.tb-workspace-main {
	min-width: 0;
}
.tb-ad-column {
	display: flex;
	flex-direction: column;
}
.tb-ad-column .tb-ad {
	margin: 0; /* sticky positioning handled by .tb-ad--sidebar if desired */
}
@media (min-width: 992px) {
	.tb-workspace--with-sidebar .tb-ad-column {
		position: sticky;
		top: 24px;
		align-self: start;
	}
}

/* ---------- Toast ---------- */
.tb-toast {
	position: fixed;
	bottom: 24px;
	left: 50%;
	transform: translate(-50%, 20px);
	background: var(--tb-card);
	color: var(--tb-ink);
	font-family: var(--tb-font-body);
	font-size: 1.05rem;
	padding: 0.7rem 1.3rem;
	border: 3px solid var(--tb-ink);
	border-radius: var(--tb-wobble-md);
	box-shadow: var(--tb-shadow);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease, transform 0.25s ease;
	z-index: 9999;
}
.tb-toast--show {
	opacity: 1;
	transform: translate(-50%, 0);
}

/* ---------- Tool sub-views / inner helpers ---------- */
.tb-subhead {
	font-family: var(--tb-font-head);
	font-size: 1.3rem;
	border-bottom: 3px dashed var(--tb-erased);
	padding-bottom: 0.25rem;
	margin-bottom: 0.75rem;
}
.tb-actions {
	display: flex;
	gap: 0.75rem;
	margin: 0.6rem 0;
}
/* Invoice rows */
.tb-inv-rows {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0.6rem 0 1.2rem;
}
.tb-inv-row {
	display: grid;
	grid-template-columns: 1fr 100px 36px;
	gap: 0.4rem;
	align-items: center;
}
.tb-inv-row .tb-input { padding: 0.45rem 0.6rem; font-size: 0.95rem; }
.tb-inv-del { background: transparent; border: none; cursor: pointer; font-size: 1.1rem; padding: 0.2rem; }
.tb-inv-total { font-family: var(--tb-font-head); font-size: 1.1rem; margin: 0.3rem 0; }
.tb-inv-grand { font-weight: 700; border-top: 2px dashed var(--tb-erased); padding-top: 0.4rem; }
/* Range sliders */
.tb-range-row { display: flex; align-items: center; gap: 0.5rem; }
.tb-range { flex: 1; accent-color: var(--tb-accent2); }
.tb-range-readout { font-family: var(--tb-font-head); min-width: 40px; }
/* Color */
.tb-color { width: 44px; height: 44px; padding: 2px; border-radius: var(--tb-wobble-md); cursor: pointer; }
/* Shadow preview */
.tb-shadow-preview {
	width: 100%;
	height: 120px;
	background: var(--tb-card);
	border: 3px solid var(--tb-ink);
	margin-bottom: 0.75rem;
}
.tb-shadow-code {
	display: block;
	font-size: 0.85rem;
	font-family: monospace;
	padding: 0.4rem;
	overflow-x: auto;
	word-break: break-all;
}
/* Case converter rows */
.tb-case-row {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex-wrap: wrap;
	padding: 0.3rem 0;
	border-bottom: 1px dashed var(--tb-erased);
}
.tb-case-label {
	font-family: var(--tb-font-head);
	font-weight: 700;
	min-width: 110px;
}
.tb-case-value {
	flex: 1;
	font-family: monospace;
	font-size: 0.95rem;
	word-break: break-all;
}
/* Frequency bars */
.tb-freq-row {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.2rem 0;
	font-size: 0.95rem;
}
.tb-freq-word {
	font-family: var(--tb-font-head);
	font-weight: 700;
	min-width: 80px;
}
.tb-freq-bar {
	display: inline-block;
	background: var(--tb-accent2);
	color: #fff;
	padding: 0.1rem 0.5rem;
	border-radius: 4px;
	font-size: 0.85rem;
	min-width: 40px;
}
/* Notices / empty states */
.tb-notice {
	background: var(--tb-postit);
	border-radius: var(--tb-wobble-md);
	padding: 1rem;
}
.tb-tool-desc {
	display: block;
}
.tb-card-title {
	font-family: var(--tb-font-head);
	font-size: 1.5rem;
	margin: 0 0 0.5rem;
}

/* ============================================================
   Homepage (SEO / AEO template)
   ============================================================ */
.tb-hero {
	text-align: center;
	margin: 1.5rem 0 2rem;
	padding: 2.5rem 2rem;
}
.tb-hero-title {
	font-family: var(--tb-font-head);
	font-size: clamp(1.8rem, 4.5vw, 3.2rem);
	line-height: 1.1;
	margin: 0 0 1rem;
	text-decoration: underline wavy var(--tb-accent) 3px;
	text-underline-offset: 0.4rem;
}
.tb-hero-lead {
	max-width: 42rem;
	margin: 0 auto 1.5rem;
	font-size: 1.2rem;
	line-height: 1.55;
}
.tb-hero-cta {
	display: flex;
	gap: 1rem;
	justify-content: center;
	flex-wrap: wrap;
}
.tb-stats {
	display: flex;
	gap: 1rem;
	justify-content: center;
	flex-wrap: wrap;
	margin: 0 0 3rem;
}
.tb-stat {
	min-width: 9rem;
	text-align: center;
	padding: 1rem 1.25rem;
	border-radius: var(--tb-wobble);
}
.tb-stat strong {
	display: block;
	font-family: var(--tb-font-head);
	font-size: 2rem;
	line-height: 1;
	color: var(--tb-accent);
}
.tb-stat span {
	font-size: 0.95rem;
}
.tb-section-title {
	font-family: var(--tb-font-head);
	font-size: 2rem;
	line-height: 1.15;
	margin: 2.5rem 0 0.25rem;
}
.tb-section-sub {
	margin: 0 0 1.5rem;
	opacity: 0.85;
}
.tb-cat-card {
	padding: 1.25rem 1.5rem;
	display: flex;
	flex-direction: column;
	break-inside: avoid;
	margin-bottom: 1.5rem;
}
.tb-cat-card:nth-child(odd) {
	transform: rotate(-0.4deg);
}
.tb-cat-card:nth-child(even) {
	transform: rotate(0.4deg);
}
.tb-cat-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	font-family: var(--tb-font-head);
	font-size: 1.35rem;
	margin: 0 0 0.75rem;
	padding-bottom: 0.5rem;
	border-bottom: 2px dashed var(--tb-ink);
}
.tb-cat-count {
	font-size: 0.9rem;
	background: #c62828; /* darker red: white text passes WCAG AA on light & dark themes */
	color: #fff;
	border-radius: 999px;
	padding: 0.1rem 0.6rem;
	flex-shrink: 0;
}
.tb-tool-list {
	list-style: none;
	margin: 0;
	padding: 0;
	columns: 2;
	column-gap: 1rem;
	font-size: 1rem;
}
.tb-tool-list li {
	break-inside: avoid;
	margin-bottom: 0.25rem;
	padding-left: 0;
}
.tb-tool-list a {
	color: var(--tb-ink);
	text-decoration: underline wavy var(--tb-accent2) 1.5px;
	text-underline-offset: 3px;
}
.tb-tool-list a:hover {
	color: var(--tb-accent2);
	text-decoration-color: var(--tb-accent);
}
.tb-tool-tagline {
	opacity: 0.7;
	font-size: 0.9rem;
}
.tb-answer {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: 1.5rem;
	margin: 3rem 0 1rem;
}
.tb-answer-copy p {
	line-height: 1.6;
	margin: 0 0 1rem;
}
.tb-answer-facts ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.tb-answer-facts li {
	margin-bottom: 0.75rem;
	padding: 0.75rem 1rem;
	background: var(--tb-postit);
	border-radius: var(--tb-wobble-md);
}
.tb-why-list {
	list-style: none;
	counter-reset: why;
	margin: 0 0 1rem;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1.25rem;
}
.tb-why-list li {
	counter-increment: why;
	padding: 1.25rem 1.5rem;
}
.tb-why-list li::before {
	content: counter(why);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	margin-right: 0.5rem;
	font-family: var(--tb-font-head);
	color: #fff;
	background: var(--tb-accent2);
	border-radius: 999px;
	font-size: 1.1rem;
}
.tb-why-list h3 {
	display: inline;
	font-family: var(--tb-font-head);
	font-size: 1.2rem;
	margin: 0;
}
.tb-why-list p {
	margin: 0.5rem 0 0;
	line-height: 1.5;
}
.tb-faq details {
	margin: 0 0 0.75rem;
	padding: 0.5rem 1.25rem;
}
.tb-faq summary {
	cursor: pointer;
	list-style-position: inside;
}
.tb-faq summary h3 {
	display: inline;
	font-family: var(--tb-font-head);
	font-size: 1.2rem;
	margin: 0;
}
.tb-faq summary::-webkit-details-marker {
	color: var(--tb-accent);
}
.tb-faq details p {
	margin: 0.5rem 0 0.25rem;
	line-height: 1.6;
}
.tb-privacy-note {
	max-width: 46rem;
	margin: 1.5rem auto 0;
	text-align: center;
	opacity: 0.85;
	font-size: 0.95rem;
	line-height: 1.5;
}
@media (max-width: 720px) {
	.tb-tool-list {
		columns: 1;
	}
	.tb-answer {
		grid-template-columns: 1fr;
	}
	.tb-hero {
		padding: 1.75rem 1.25rem;
	}
}

/* Header nav: the wp:navigation block's own responsive CSS isn't emitted in
   these hand-rolled templates, leaving the menu stuck in its absolute stacked
   (mobile) state. Force a static horizontal row on desktop, center it. */
.tb-header {
	position: relative;
	display: grid !important;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 1rem;
}
.tb-header > :nth-child(1) { justify-self: start; }
.tb-header > :nth-child(2) { justify-self: center; }
.tb-header > :nth-child(3) { justify-self: end; }
.tb-brand { gap: 0.75rem; }
.tb-brand .wp-block-site-logo { margin: 0; }
.tb-brand .wp-block-site-logo img { max-height: var(--tb-logo-h, 60px); width: auto; display: block; }
@media (max-width: 781px) {
	.tb-brand .wp-block-site-logo img { max-height: calc(var(--tb-logo-h, 60px) * 0.75); }
}
body.tb-hide-site-title .tb-brand .wp-block-site-title { display: none; }
.tb-header .wp-block-navigation__responsive-container,
.tb-header .wp-block-navigation__responsive-dialog,
.tb-header .wp-block-navigation__responsive-container-content {
	position: static;
	width: auto;
	height: auto;
	padding: 0;
}
.tb-header .wp-block-navigation__container.is-responsive {
	position: static;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 1.25rem;
	margin: 0;
	transform: none;
	background: none;
	width: auto;
	height: auto;
}
.tb-header .wp-block-navigation__responsive-container-open {
	display: none;
}
.tb-header .wp-block-navigation__responsive-container-content {
	display: flex;
}
@media (max-width: 781px) {
	.tb-header {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
	}
	.tb-header .wp-block-navigation,
	.tb-header .wp-block-navigation__container {
		position: static;
		transform: none;
	}
	.tb-header .wp-block-navigation__responsive-container-open {
		display: flex;
	}
	.tb-header .wp-block-navigation__responsive-container {
		position: fixed;
		inset: 0;
		z-index: 10000;
		width: 100%;
		height: 100%;
		background: rgba(45, 45, 45, 0.4);
		display: none;
	}
	.tb-header .wp-block-navigation__responsive-container.tb-menu-open {
		display: block !important;
	}
	.tb-header .wp-block-navigation__responsive-container-content,
	.tb-header .wp-block-navigation__responsive-dialog {
		position: static;
		width: auto;
		height: auto;
		padding: 0;
	}
	.tb-header .wp-block-navigation__container.is-responsive {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		width: min(78vw, 20rem);
		height: auto;
		padding: 1rem 0;
		background: var(--tb-card);
		border: 3px solid var(--tb-ink);
		border-radius: var(--tb-wobble-md);
		box-shadow: var(--tb-shadow-lg);
	}
	.tb-header .wp-block-navigation__container.is-responsive .wp-block-navigation-item {
		padding: 0.25rem 1.25rem;
	}
	.tb-header .wp-block-navigation__responsive-dialog {
		max-width: min(78vw, 20rem);
		margin: 0 auto;
		height: 100%;
	}
	.tb-header .wp-block-navigation__responsive-container-content {
		min-height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.tb-header .wp-block-navigation__responsive-container-close {
		position: absolute;
		top: 1rem;
		right: 1rem;
	}
}

/* ===== Blog ===== */
.tb-blog-section {
	margin-top: 3rem;
}
.tb-blog-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 1.25rem;
}
.tb-blog-card {
	padding: 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.tb-blog-card h3 {
	margin: 0;
	font-size: 1.15rem;
}
.tb-blog-card h3 a {
	color: var(--tb-ink);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}
.tb-blog-card h3 a:hover {
	text-decoration-style: wavy;
}
.tb-blog-card p {
	margin: 0;
	font-size: 0.95rem;
}
.tb-blog-card p:last-of-type {
	flex-grow: 1;
}
.tb-blog-date {
	font-family: var(--tb-font-hand);
	font-size: 0.85rem;
	opacity: 0.7;
}
.tb-btn--small {
	padding: 0.35rem 0.8rem;
	font-size: 0.85rem;
	align-self: flex-start;
}
.tb-blog-template .tb-hero {
	max-width: 70ch;
}
.tb-blog-featured {
	max-width: 64rem;
	margin-top: 2.5rem;
}
.tb-blog-featured .tb-card {
	padding: 2rem 2.25rem;
}
.tb-featured-title {
	font-size: 2rem;
	margin: 0.25rem 0;
}
.tb-featured-title a {
	color: var(--tb-ink);
	text-decoration: underline;
	text-decoration-thickness: 3px;
	text-underline-offset: 4px;
	text-decoration-color: var(--tb-accent);
}
.tb-featured-title a:hover {
	text-decoration-style: wavy;
	text-decoration-color: var(--tb-accent2);
}
.tb-featured-excerpt {
	font-size: 1.05rem;
	line-height: 1.6;
	max-width: 58ch;
}
.tb-faq-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0.6rem 0 1rem;
}
.tb-faq-chips .tb-tag {
	background: var(--tb-erased);
	font-size: 0.8rem;
	padding: 0.1rem 0.55rem;
}

/* ===== Single post ===== */
.tb-single-post .tb-container {
	max-width: 46rem;
}
.tb-post .tb-tool-title {
	font-size: 2.4rem;
	margin: 0 0 0.25rem;
}
.tb-tag-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-top: 0.75rem;
}
.tb-tag--tool {
	background: var(--tb-postit);
}
.tb-post-content {
	font-size: 1.0625rem;
	line-height: 1.75;
	background: var(--tb-card);
	border: 3px solid var(--tb-ink);
	border-radius: var(--tb-wobble-md);
	box-shadow: var(--tb-shadow-card);
	padding: 2rem 2.25rem;
}
.tb-post-content > :first-child {
	margin-top: 0;
}
.tb-post-content h2 {
	font-size: 1.7rem;
	margin: 2rem 0 0.5rem;
}
.tb-post-content h3 {
	font-size: 1.35rem;
	margin: 1.75rem 0 0.4rem;
}
.tb-post-content p {
	margin: 0 0 1rem;
}
.tb-post-content ul,
.tb-post-content ol {
	padding-left: 1.6rem;
	margin-bottom: 1rem;
}
.tb-post-content li {
	margin-bottom: 0.35rem;
}
.tb-post-content blockquote {
	border-left: 5px solid var(--tb-accent);
	margin: 1.25rem 0;
	padding: 0.25rem 1rem;
	background: var(--tb-erased);
	border-radius: 0 12px 12px 0;
}
.tb-post-content img {
	max-width: 100%;
	height: auto;
	border: 3px solid var(--tb-ink);
	border-radius: var(--tb-wobble);
	box-shadow: var(--tb-shadow-card);
}
.tb-post-content a {
	color: var(--tb-accent2);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.tb-post-content code {
	background: var(--tb-erased);
	padding: 0.1rem 0.35rem;
	border-radius: 6px;
	font-family: monospace;
	font-size: 0.92em;
}
.tb-post-faq {
	max-width: 46rem;
}
.tb-post-faq h2 {
	text-align: center;
}
.tb-back-link {
	text-align: center;
}

/* ===== Blog category slider + pagination ===== */
.tb-cat-slider {
	display: flex;
	gap: 0.6rem;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	padding: 0.5rem 0.25rem 1rem;
	margin: 1.5rem 0 0;
	-webkit-overflow-scrolling: touch;
}
.tb-cat-pill {
	scroll-snap-align: start;
	flex: 0 0 auto;
	font-family: var(--tb-font-body);
	font-size: 1rem;
	color: var(--tb-ink);
	background: var(--tb-card);
	border: 3px solid var(--tb-ink);
	border-radius: var(--tb-wobble-md);
	box-shadow: var(--tb-shadow-card);
	padding: 0.4rem 1rem;
	text-decoration: none;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}
.tb-cat-pill:hover {
	color: var(--tb-ink);
	border-color: var(--tb-accent2);
}
.tb-cat-pill.is-active {
	background: var(--tb-ink);
	color: var(--tb-paper);
}
.tb-pagination {
	margin-top: 2rem;
	text-align: center;
}
.tb-pagination ul.page-numbers {
	list-style: none;
	margin: 0;
	padding: 0;
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
}
.tb-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0.3rem 0.8rem;
	background: var(--tb-card);
	border: 3px solid var(--tb-ink);
	border-radius: var(--tb-wobble-md);
	color: var(--tb-ink);
	text-decoration: none;
	font-size: 1rem;
}
.tb-pagination a.page-numbers:hover {
	border-color: var(--tb-accent2);
}
.tb-pagination .page-numbers.current {
	background: var(--tb-ink);
	color: var(--tb-paper);
}
.tb-pagination .page-numbers.dots {
	border: none;
	box-shadow: none;
	background: transparent;
}

/* ===== All Tools page: full-width catalogue ===== */
body.page-id-624 .wp-block-post-content {
	max-width: 100%;
	padding-left: 24px;
	padding-right: 24px;
}
/* The content wrapper is itself a constrained layout, so its direct
   children (including the tool grid) need releasing too. */
body.page-id-624 .wp-block-post-content > * {
	max-width: 100%;
}
body.page-id-624 .wp-block-post-title {
	max-width: 1240px;
}
/* ===== All Tools live search ===== */.tb-tool-search {
	width: 100%;
	max-width: 560px;
	font-family: var(--tb-font-body);
	font-size: 1.1rem;
	color: var(--tb-ink);
	background: var(--tb-card);
	border: 3px solid var(--tb-ink);
	border-radius: var(--tb-wobble-md);
	box-shadow: var(--tb-shadow-card);
	padding: 0.6rem 1.1rem;
	margin: 0.5rem 0 1rem;
	min-height: 48px;
}
.tb-tool-search:focus {
	outline: 3px solid var(--tb-accent2);
	outline-offset: 2px;
}

/* Back-to-top button — fixed bottom-right, appears after scrolling down. */
.tb-backtop {
	position: fixed;
	right: 1.4rem;
	bottom: 1.4rem;
	z-index: 50;
	width: 3rem;
	height: 3rem;
	border: 2px solid var(--tb-ink);
	border-radius: 50%;
	background: var(--tb-card);
	color: var(--tb-ink);
	font-family: var(--tb-font-head);
	font-size: 1.3rem;
	line-height: 1;
	cursor: pointer;
	box-shadow: var(--tb-shadow-flat);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease, box-shadow 0.2s ease;
}
.tb-backtop.tb-backtop--show {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.tb-backtop:hover {
	box-shadow: var(--tb-shadow);
	transform: translateY(-2px);
}
.tb-backtop:focus-visible {
	outline: 3px solid var(--tb-accent2);
	outline-offset: 2px;
}

/* ---------- Homepage: online tools comparison table ---------- */
.tb-compare-section {
	padding: 1.5rem 1.75rem;
	margin: 2rem 0 1rem;
}
.tb-compare-wrap {
	overflow-x: auto;
}
.tb-compare {
	width: 100%;
	border-collapse: collapse;
	text-align: left;
}
.tb-compare th,
.tb-compare td {
	padding: 0.65rem 0.9rem;
	border-bottom: 2px dashed var(--tb-erased);
	vertical-align: top;
}
.tb-compare thead th {
	font-family: var(--tb-font-head);
	background: var(--tb-postit);
	border-bottom: 3px solid var(--tb-ink);
}
.tb-compare tbody th {
	font-family: var(--tb-font-head);
	font-size: 0.95rem;
}
@media (max-width: 600px) {
	.tb-compare-section {
		padding: 1rem;
	}
	.tb-compare th,
	.tb-compare td {
		padding: 0.5rem 0.6rem;
		font-size: 0.9rem;
	}
}

/* ---------- Homepage: category tabs ---------- */
.tb-tabs {
	margin: 0 0 1rem;
}
.tb-tab-radio {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
}
.tb-tab-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 0 0 1.5rem;
}
.tb-tab-nav label {
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-family: var(--tb-font-head);
	font-size: 1rem;
	min-height: 44px;
	padding: 0.45rem 0.95rem;
	border: 3px solid var(--tb-ink);
	border-radius: var(--tb-wobble-md);
	background: var(--tb-card);
	box-shadow: var(--tb-shadow-card);
	transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.1s ease;
}
.tb-tab-nav label:hover {
	transform: rotate(-1deg);
}
.tb-tab-count {
	font-size: 0.8rem;
	background: var(--tb-accent);
	color: #fff;
	border-radius: 999px;
	padding: 0.05rem 0.5rem;
}
.tb-tab-panel {
	display: none;
}
@media (max-width: 600px) {
	.tb-tab-nav label {
		font-size: 0.9rem;
		padding: 0.4rem 0.7rem;
	}
	.tb-tool-list {
		columns: 1;
	}
}

/* ---------- A11y: tap targets in the site footer ---------- */
.tb-site-footer .wp-block-column a {
	display: inline-block;
	padding: 6px 0;
	min-height: 26px;
}