/* ============================================================
   Taskip WP Next — Theme CSS
   ============================================================ */

/* ─── Root Tokens ──────────────────────────────────────────── */

:root {
	--tk-container: 1160px;
	--tk-container-wide: 1240px;
	--tk-article-max: 768px;
	--tk-sidebar-width: 300px;
	--tk-header-height: 68px;
}

/* ─── Base ──────────────────────────────────────────────────── */

/* WP core gives every `wp-block-group` `box-sizing: border-box`, but plain
   HTML elements (the `<section>`/`<div>` wrappers our `wp:html` heroes use)
   default to `content-box`. Every section container on the site sets the
   same `max-width` + horizontal padding expecting one consistent content
   width — without this, the content-box ones render ~80px wider than the
   border-box ones despite declaring an identical max-width. */
*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	background: var( --wp--preset--color--white );
}

::selection {
	background: var( --wp--preset--color--primary-border );
}

a {
	color: var( --wp--preset--color--primary-dark );
}

a:hover {
	color: var( --wp--preset--color--dark );
}

/* ─── Focus ─────────────────────────────────────────────────── */

:focus-visible {
	outline: 2px solid var( --wp--preset--color--primary );
	outline-offset: 2px;
}

/* ─── Skip Link ─────────────────────────────────────────────── */

.skip-link {
	position: absolute;
	top: -100px;
	left: 1rem;
	z-index: 999999;
	padding: 0.75rem 1.25rem;
	background: var( --wp--preset--color--dark );
	color: var( --wp--preset--color--white );
	border-radius: 8px;
	font-family: var( --wp--preset--font-family--sans );
	font-weight: 600;
	text-decoration: none;
	transition: top 0.15s ease;
}

.skip-link:focus {
	top: 1rem;
}

/* ─── Header ────────────────────────────────────────────────── */

.tk-header {
	position: relative;
	z-index: 60;
	min-height: var( --tk-header-height );
	padding: 0 !important;
	background: var( --wp--preset--color--white ) !important;
	box-sizing: border-box;
}

/* `.tk-header__actions` (and its own `.wp-block-buttons` child) are real
   Gutenberg blocks sitting inside the header's flex row. WordPress's
   global-styles stylesheet has a low-specificity `:where()` rule —
   `:where(.is-layout-flow) > * { margin-block-start: var(--wp--preset--spacing--xl) }`
   (32px, from this theme's own theme.json root blockGap) — that a block
   picks up the moment anything in its ancestor chain resolves to a
   "flow"-layout container, and only its own `:first-child`/`:last-child`
   are exempted. Because that rule is effectively zero-specificity, it's
   easy for it to win over an unscoped rule depending on markup/DOM
   changes elsewhere on the page, even when it reads as "should be 0px"
   in one particular render. Every child here is meant to sit inline in
   one flex row, never stacked, so force it off explicitly rather than
   rely on the default margin already happening to resolve to 0. */
.tk-header .wp-block-group,
.tk-header .wp-block-buttons {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}

.tk-header__inner {
	max-width: var( --tk-container-wide );
	margin: 0 auto;
	padding: 0.875rem 1.75rem;
	box-sizing: border-box;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
}

.tk-header__logo {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	text-decoration: none;
}

.tk-header__logo img {
	display: block;
	height: 26px;
	width: auto;
}

.tk-header__nav {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.625rem;
}

.tk-header__nav a {
	font: 500 0.90625rem/1 var( --wp--preset--font-family--sans );
	color: var( --wp--preset--color--text-alt );
	text-decoration: none;
}

.tk-header__nav a:hover {
	color: var( --wp--preset--color--dark );
}

.tk-header__nav-current {
	display: flex !important;
	align-items: center;
	gap: 7px;
	font-weight: 600 !important;
	color: var( --wp--preset--color--primary-dark ) !important;
}

.tk-header__nav-dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var( --wp--preset--color--primary );
	display: block;
}

.tk-header__burger {
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border: 1px solid var( --wp--preset--color--border );
	border-radius: 10px;
	background: var( --wp--preset--color--white );
	cursor: pointer;
	padding: 0;
	flex: 0 0 auto;
}

.tk-header__burger span {
	display: block;
	width: 16px;
	height: 1.6px;
	background: var( --wp--preset--color--dark );
	margin: 3px 0;
}

.tk-header__mobile-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	flex-direction: column;
	gap: 2px;
	background: var( --wp--preset--color--white );
	border-top: 1px solid var( --wp--preset--color--border );
	padding: 0.875rem 1.75rem 1.375rem;
}

.tk-header__mobile-menu.is-open {
	display: flex;
}

.tk-header__mobile-menu a {
	font: 500 1rem/1 var( --wp--preset--font-family--sans );
	color: var( --wp--preset--color--text-alt );
	text-decoration: none;
	padding: 0.875rem 0;
	border-bottom: 1px solid var( --wp--preset--color--surface-alt-2 );
}

.tk-header__mobile-cta {
	display: block;
	margin-top: 0.75rem;
	padding: 0.75rem 1rem !important;
	border-bottom: 0 !important;
	border-radius: 10px;
	text-align: center;
	font-weight: 600 !important;
	color: var( --wp--preset--color--primary-ink ) !important;
	background: var( --wp--preset--color--primary );
}

.tk-btn-login .wp-block-button__link {
	background: transparent;
	border: 0;
	color: var( --wp--preset--color--text-alt );
	transition: background-color 0.15s ease, color 0.15s ease;
}

.tk-btn-login .wp-block-button__link:hover {
	background: var( --wp--preset--color--surface-alt );
	color: var( --wp--preset--color--dark );
}

.tk-btn-cta .wp-block-button__link {
	transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.tk-btn-cta .wp-block-button__link:hover {
	background: var( --wp--preset--color--primary-hover );
	transform: translateY( -1px );
	box-shadow: 0 6px 16px rgba( 29, 184, 148, 0.28 );
}

.tk-btn-cta .wp-block-button__link:active {
	transform: translateY( 0 );
	box-shadow: none;
}

@media ( max-width: 899px ) {
	.tk-header__nav {
		display: none;
	}

	.tk-header__burger {
		display: flex;
	}

	/* Hide the whole actions group, not just its buttons — `.tk-header__inner`
	   is `justify-content:space-between`, so a left-as-empty `.tk-header__actions`
	   still counts as a flex item and splits the row into logo/burger/(empty)
	   thirds instead of putting the burger flush at the right edge. Both
	   buttons are reachable instead as `.tk-header__mobile-cta`/the "Log in"
	   link inside `.tk-header__mobile-menu`. */
	.tk-header__actions {
		display: none;
	}
}

/* Header and footer are each a `wp:template-part` sibling of `<main>` inside
   `.wp-site-blocks` (an `is-layout-flow` container), so both pick up core's
   `:where(.is-layout-flow) > * { margin-block-start: var(--wp--preset--spacing--xl) }`
   the same way the blocks inside `.tk-header` do (see above) — leaving a
   32px gap above the footer that isn't part of this design. */
.wp-block-template-part {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}

/* `<main>` (core auto-assigns it `#wp--skip-link--target` for the skip link)
   is that same non-first `.wp-site-blocks` child, so it picks up the same
   32px `margin-block-start` — clear it here too. */
#wp--skip-link--target {
	margin-block-start: 0 !important;
}

/* ─── Footer ────────────────────────────────────────────────── */

.tk-footer {
	background: var( --wp--preset--color--footer-bg );
	color: var( --wp--preset--color--faint );
	padding: clamp( 48px, 7vw, 88px ) clamp( 16px, 4vw, 40px ) 0;
}

.tk-footer a {
	color: inherit;
	text-decoration: none;
}

.tk-footer a:hover {
	color: var( --wp--preset--color--primary );
}

.tk-footer__main {
	max-width: 1320px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	gap: clamp( 32px, 4vw, 56px ) clamp( 28px, 3.5vw, 48px );
}

.tk-footer__col {
	flex: 1 1 200px;
	min-width: 180px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	font: 400 0.9375rem/1 var( --wp--preset--font-family--sans );
}

.tk-footer__brand-col {
	flex: 1 1 300px;
	min-width: 260px;
	gap: 22px;
}

.tk-footer__col--features {
	gap: 16px;
}

.tk-footer__col-heading {
	color: var( --wp--preset--color--white );
	font-family: var( --wp--preset--font-family--sans );
	font-weight: 700;
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin: 0 0 2px;
}

.tk-footer__col-heading--spaced {
	margin-top: 22px;
}

.tk-footer__logo {
	height: 34px;
	width: auto;
	display: block;
}

.tk-footer__tagline {
	max-width: 34ch;
	margin: 0;
	font: 400 0.9375rem/1.75 var( --wp--preset--font-family--sans );
	color: var( --wp--preset--color--faint );
}

.tk-footer__community {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
}

.tk-footer__community-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font: 600 0.90625rem/1 var( --wp--preset--font-family--sans );
	color: var( --wp--preset--color--white );
	border: 1px solid #2a2e2d;
	border-radius: 999px;
	padding: 15px 22px;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.tk-footer__community-btn:hover {
	border-color: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--primary );
}

.tk-footer__badges {
	display: flex;
	gap: 12px;
	margin-top: 6px;
}

.tk-footer__badges img {
	height: 88px;
	width: auto;
	border-radius: 8px;
	display: block;
}

.tk-footer__bottom {
	max-width: 1320px;
	margin: clamp( 44px, 6vw, 72px ) auto 0;
	padding: 26px 0 30px;
	border-top: 1px solid #1a1d1c;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 30px;
	font: 400 0.90625rem/1 var( --wp--preset--font-family--sans );
}

.tk-footer__bottom p {
	margin: 0;
}

.tk-footer__social {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-left: auto;
}

.tk-footer__social a {
	display: flex;
}

/* ─── Blog Hero (index.html) ───────────────────────────────── */

.tk-hero {
	background: var( --wp--preset--color--surface-alt );
	border-bottom: 1px solid var( --wp--preset--color--border );
}

.tk-hero__inner {
	max-width: var( --tk-container-wide );
	margin: 0 auto;
	padding: clamp( 40px, 5.5vw, 68px ) clamp( 16px, 4vw, 40px ) clamp( 32px, 4vw, 44px );
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 320px, 1fr ) );
	gap: clamp( 24px, 4vw, 64px );
	align-items: end;
}

.tk-hero__intro {
	max-width: 620px;
}

.tk-hero__kicker {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 18px;
	font: 700 0.6875rem/1 var( --wp--preset--font-family--sans );
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --wp--preset--color--primary-dark );
}

.tk-hero__kicker-rule {
	width: 22px;
	height: 2px;
	background: var( --wp--preset--color--primary );
	display: block;
}

.tk-hero__title {
	margin: 0;
	font: 800 clamp( 32px, 4.4vw, 54px ) / 1.08 var( --wp--preset--font-family--sans );
	letter-spacing: -0.035em;
	color: var( --wp--preset--color--dark );
}

.tk-hero__subtitle {
	margin: 18px 0 0;
	max-width: 540px;
	font: 400 clamp( 16.5px, 1.4vw, 18.5px ) / 1.7 var( --wp--preset--font-family--serif );
	color: var( --wp--preset--color--muted );
}

.tk-hero__search {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 440px;
	width: 100%;
	justify-self: end;
}

.tk-hero__search-form {
	position: relative;
	display: flex;
	align-items: center;
}

.tk-hero__search-icon {
	position: absolute;
	left: 18px;
	display: flex;
	color: var( --wp--preset--color--subtle );
	pointer-events: none;
}

.tk-hero__search-input {
	width: 100%;
	box-sizing: border-box;
	padding: 17px 18px 17px 48px;
	border: 1px solid var( --wp--preset--color--border-alt );
	border-radius: 12px;
	background: var( --wp--preset--color--white );
	font: 500 0.96875rem/1 var( --wp--preset--font-family--sans );
	color: var( --wp--preset--color--dark );
	outline: none;
	box-shadow: 0 1px 2px rgba( 10, 10, 10, 0.04 );
}

.tk-hero__search-input:focus {
	border-color: var( --wp--preset--color--primary );
	box-shadow: 0 0 0 4px rgba( 29, 184, 148, 0.14 );
}

.tk-hero__popular {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font: 500 0.78125rem/1 var( --wp--preset--font-family--sans );
	color: var( --wp--preset--color--subtle );
}

.tk-hero__popular a {
	color: var( --wp--preset--color--text-alt );
	text-decoration: none;
	border-bottom: 1px solid var( --wp--preset--color--border-alt );
}

.tk-hero__popular a:hover {
	color: var( --wp--preset--color--primary-dark );
	border-color: var( --wp--preset--color--primary );
}

/* ─── Blog Index Grid ──────────────────────────────────────── */

.tk-index__grid-section {
	max-width: var( --tk-container-wide );
	margin: 0 auto;
	padding: 0 clamp( 16px, 4vw, 40px ) clamp( 56px, 7vw, 88px );
}

.tk-index__list-head {
	padding-top: clamp( 28px, 3.5vw, 40px );
	border-top: 1px solid var( --wp--preset--color--border );
	margin-bottom: clamp( 26px, 3.5vw, 40px );
	gap: 12px 20px !important;
}

.tk-index__list-heading {
	margin: 0;
	font: 800 clamp( 22px, 2.2vw, 30px ) / 1.1 var( --wp--preset--font-family--sans ) !important;
	letter-spacing: -0.025em;
	color: var( --wp--preset--color--dark );
}

.tk-index__list .wp-block-query-total {
	font: 500 0.875rem/1 var( --wp--preset--font-family--sans );
	color: var( --wp--preset--color--subtle );
}

.tk-index__list ul.wp-block-post-template {
	list-style: none;
	margin: 0;
	padding: 0;
	gap: clamp( 28px, 3vw, 44px ) clamp( 24px, 2.5vw, 36px ) !important;
}

.tk-load-more {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	margin-top: clamp( 36px, 4.5vw, 56px );
}

.tk-load-more .wp-block-query-pagination-next {
	font: 700 0.90625rem/1 var( --wp--preset--font-family--sans );
	color: var( --wp--preset--color--dark );
	background: var( --wp--preset--color--white );
	border: 1px solid var( --wp--preset--color--border-alt );
	border-radius: 11px;
	padding: 16px 26px;
	text-decoration: none;
	cursor: pointer;
}

.tk-load-more .wp-block-query-pagination-next:hover {
	border-color: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--primary-dark );
}

.tk-load-more.is-loading .wp-block-query-pagination-next {
	opacity: 0.6;
	pointer-events: none;
}

.tk-load-more__progress {
	font: 500 0.78125rem/1 var( --wp--preset--font-family--sans );
	color: var( --wp--preset--color--subtle );
}

/* ─── Category Hero (category.html) ───────────────────────── */

.tk-category-hero {
	background: var( --wp--preset--color--surface-alt );
	border-bottom: 1px solid var( --wp--preset--color--border );
}

.tk-category-hero__inner {
	max-width: var( --tk-container-wide );
	margin: 0 auto;
	padding: clamp( 20px, 2.5vw, 28px ) clamp( 16px, 4vw, 40px ) clamp( 36px, 4.5vw, 52px );
}

.tk-hero-breadcrumb {
	margin-bottom: clamp( 24px, 3vw, 34px );
}

.tk-category-hero__grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 300px, 1fr ) );
	gap: clamp( 20px, 3vw, 48px );
	align-items: end;
}

.tk-category-hero__intro {
	max-width: 620px;
}

.tk-category-hero__title {
	margin: 0 !important;
	font: 800 clamp( 30px, 4vw, 48px ) / 1.1 var( --wp--preset--font-family--sans ) !important;
	letter-spacing: -0.035em;
	color: var( --wp--preset--color--dark );
}

.tk-category-hero__title::after {
	content: " insights & guides";
}

.tk-category-hero__description {
	margin: 16px 0 0 !important;
	max-width: 560px;
	font: 400 clamp( 16.5px, 1.4vw, 18.5px ) / 1.7 var( --wp--preset--font-family--serif ) !important;
	color: var( --wp--preset--color--muted );
}

.tk-category-hero__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-self: end;
	align-items: center;
}

.tk-category-hero__badge {
	font: 600 0.8125rem/1 var( --wp--preset--font-family--sans );
	color: var( --wp--preset--color--muted );
	background: var( --wp--preset--color--white );
	border: 1px solid var( --wp--preset--color--border );
	border-radius: 999px;
	padding: 11px 15px;
}

.tk-category-hero__badges .wp-block-query {
	display: contents;
}

/* ─── Author Hero (author.html) — reuses .tk-category-hero for the
   section/breadcrumb/badges chrome; these are just the profile row and
   bio, which don't fit .tk-category-hero__title's category-only
   `::after { content: " insights & guides" }` suffix. ───────────────── */

.tk-author-hero__profile {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0 0 14px;
}

.tk-author-hero__avatar img {
	display: block;
	border-radius: 50%;
}

.tk-author-hero__name {
	margin: 0 !important;
	font: 800 clamp( 28px, 3.6vw, 44px ) / 1.1 var( --wp--preset--font-family--sans ) !important;
	letter-spacing: -0.035em;
	color: var( --wp--preset--color--dark );
}

.tk-author-hero__bio {
	margin: 0 !important;
	max-width: 560px;
	font: 400 clamp( 16.5px, 1.4vw, 18.5px ) / 1.7 var( --wp--preset--font-family--serif ) !important;
	color: var( --wp--preset--color--muted );
}

/* ─── Topic exploration (category.html) ───────────────────── */

.tk-topic-explore {
	border-top: 1px solid var( --wp--preset--color--border );
	background: var( --wp--preset--color--surface-alt );
}

.tk-topic-explore__inner {
	max-width: var( --tk-container-wide );
	margin: 0 auto;
	padding: clamp( 44px, 5.5vw, 72px ) clamp( 16px, 4vw, 40px );
}

.tk-topic-explore__heading {
	margin: 0 0 6px;
	font: 800 clamp( 21px, 2.1vw, 28px ) / 1.15 var( --wp--preset--font-family--sans );
	letter-spacing: -0.025em;
	color: var( --wp--preset--color--dark );
}

.tk-topic-explore__subtitle {
	margin: 0 0 clamp( 32px, 4vw, 48px );
	font: 400 1.03125rem/1.7 var( --wp--preset--font-family--serif );
	color: var( --wp--preset--color--muted );
}

.tk-topic-explore__grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 280px, 1fr ) );
	gap: clamp( 20px, 3vw, 36px );
	align-items: start;
}


/* ─── Search (search.html) ─────────────────────────────────── */

.tk-search-hero {
	background: var( --wp--preset--color--surface-alt );
	border-bottom: 1px solid var( --wp--preset--color--border );
}

.tk-search-hero__inner {
	max-width: var( --tk-container-wide );
	margin: 0 auto;
	padding: clamp( 20px, 2.5vw, 28px ) clamp( 16px, 4vw, 40px ) clamp( 36px, 4.5vw, 52px );
}

.tk-search-hero__title {
	margin: 0;
	font: 800 clamp( 28px, 3.6vw, 44px ) / 1.1 var( --wp--preset--font-family--sans );
	letter-spacing: -0.035em;
	color: var( --wp--preset--color--dark );
}

.tk-search-hero__subtitle {
	margin: 14px 0 0;
	max-width: 520px;
	font: 400 clamp( 16px, 1.4vw, 18px ) / 1.7 var( --wp--preset--font-family--serif );
	color: var( --wp--preset--color--muted );
}

.tk-search-hero__form {
	position: relative;
	display: flex;
	align-items: center;
	margin-top: clamp( 22px, 3vw, 30px );
}

.tk-search-hero__icon {
	position: absolute;
	left: 20px;
	display: flex;
	color: var( --wp--preset--color--subtle );
	pointer-events: none;
}

.tk-search-hero__input {
	width: 100%;
	box-sizing: border-box;
	padding: 20px 118px 20px 54px;
	border: 1px solid var( --wp--preset--color--border-alt );
	border-radius: 14px;
	background: var( --wp--preset--color--white );
	font: 500 clamp( 16px, 1.4vw, 18px ) / 1 var( --wp--preset--font-family--sans );
	color: var( --wp--preset--color--dark );
	outline: none;
	box-shadow: 0 2px 10px rgba( 10, 10, 10, 0.04 );
}

.tk-search-hero__input:focus {
	border-color: var( --wp--preset--color--primary );
	box-shadow: 0 0 0 4px rgba( 29, 184, 148, 0.14 );
}

.tk-search-hero__submit {
	position: absolute;
	right: 10px;
	font: 700 0.875rem/1 var( --wp--preset--font-family--sans );
	color: var( --wp--preset--color--white );
	background: var( --wp--preset--color--dark );
	border: 0;
	border-radius: 10px;
	padding: 14px 20px;
	cursor: pointer;
}

.tk-search-hero__submit:hover {
	background: #1f2422;
}

.tk-search-hero__try {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 9px;
	margin-top: 16px;
	font: 500 0.8125rem/1 var( --wp--preset--font-family--sans );
	color: var( --wp--preset--color--subtle );
}

.tk-search-hero__try a {
	font-weight: 600;
	color: var( --wp--preset--color--text-alt );
	background: var( --wp--preset--color--white );
	border: 1px solid var( --wp--preset--color--border );
	border-radius: 999px;
	padding: 9px 14px;
	text-decoration: none;
}

.tk-search-hero__try a:hover {
	border-color: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--primary-dark );
}

.tk-search-results {
	max-width: var( --tk-container-wide );
	margin: 0 auto;
	padding: clamp( 28px, 3.5vw, 40px ) clamp( 16px, 4vw, 40px ) clamp( 56px, 7vw, 88px );
}

.tk-search-results__head {
	gap: 10px 18px !important;
	margin-bottom: 20px;
}

.tk-search-results__heading {
	margin: 0 !important;
	font: 800 clamp( 19px, 1.9vw, 24px ) / 1.25 var( --wp--preset--font-family--sans ) !important;
	letter-spacing: -0.02em;
	color: var( --wp--preset--color--dark );
}

.tk-search-results__count {
	font: 600 0.875rem/1 var( --wp--preset--font-family--sans );
	color: var( --wp--preset--color--primary-dark );
	background: var( --wp--preset--color--primary-bg );
	border-radius: 6px;
	padding: 7px 10px;
}

.tk-search-results__list ul.wp-block-post-template {
	list-style: none;
	margin: 0;
	padding: 0;
}

.tk-search-empty {
	padding: clamp( 28px, 4vw, 40px ) 0 0;
}

.tk-search-empty__title {
	margin: 0 0 8px;
	font: 800 clamp( 19px, 1.9vw, 23px ) / 1.25 var( --wp--preset--font-family--sans );
	letter-spacing: -0.02em;
	color: var( --wp--preset--color--dark );
}

.tk-search-empty__body {
	margin: 0 0 clamp( 20px, 2.5vw, 28px );
	font: 400 1.03125rem/1.7 var( --wp--preset--font-family--serif );
	color: var( --wp--preset--color--muted );
}

/* .tk-search-results already centers at --tk-container-wide with the same
   horizontal padding, so the nested "You might find these useful" section
   just needs to fill it rather than applying its own max-width/padding on
   top (which would double the padding and narrow it below the other
   sections on this page). */
.tk-search-results .tk-index__grid-section {
	max-width: none;
	margin: 0;
	padding-left: 0;
	padding-right: 0;
}

.tk-search-results .tk-index__list-head {
	border-top: 0;
}

.tk-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: clamp( 28px, 3.5vw, 44px );
	padding-top: clamp( 24px, 3vw, 32px );
	border-top: 1px solid var( --wp--preset--color--border );
}

.tk-pagination .wp-block-query-pagination-numbers {
	display: flex;
	align-items: center;
	gap: 8px;
}

.tk-pagination .page-numbers,
.tk-pagination .wp-block-query-pagination-previous,
.tk-pagination .wp-block-query-pagination-next {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 14px;
	border-radius: 10px;
	border: 1px solid var( --wp--preset--color--border );
	background: var( --wp--preset--color--white );
	font: 600 0.90625rem/1 var( --wp--preset--font-family--sans );
	color: var( --wp--preset--color--text-alt );
	text-decoration: none;
	transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.tk-pagination .page-numbers:hover,
.tk-pagination .wp-block-query-pagination-previous:hover,
.tk-pagination .wp-block-query-pagination-next:hover {
	border-color: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--primary-dark );
}

.tk-pagination .page-numbers.current {
	background: var( --wp--preset--color--dark );
	border-color: var( --wp--preset--color--dark );
	color: var( --wp--preset--color--white );
}

.tk-pagination .page-numbers.dots {
	border-color: transparent;
	background: transparent;
	color: var( --wp--preset--color--subtle );
	min-width: auto;
	padding: 0 4px;
}

/* ─── Article Reading Layout ──────────────────────────────────
   The sidebar + article two-column wrap lives at the template
   level (a plain core/group), not owned by any one block. */

.tk-single__layout {
	display: flex;
	flex-wrap: wrap;
	gap: clamp( 28px, 3.5vw, 60px );
	max-width: var( --tk-container );
	margin: 0 auto;
	padding: clamp( 36px, 4.5vw, 56px ) clamp( 16px, 4vw, 40px ) 0;
	align-items: flex-start;
}

.tk-single__sidebar {
	flex: 0 0 var( --tk-sidebar-width );
	min-width: 0;
}

@media ( min-width: 940px ) {
	.tk-single__sidebar.is-sticky {
		position: sticky;
		top: 28px;
	}
}

@media ( max-width: 939px ) {
	.tk-single__sidebar {
		flex: 1 1 100%;
		position: static;
	}
}

.tk-single__article {
	flex: 1 1 620px;
	min-width: 0;
	max-width: var( --tk-article-max );
}

.tk-single__hero {
	max-width: var( --tk-container );
	margin: clamp( 28px, 3.5vw, 40px ) auto 0;
	padding: 0 clamp( 16px, 4vw, 40px );
}

.tk-single__hero .wp-block-post-featured-image {
	margin: 0;
	border-radius: 18px;
	overflow: hidden;
	border: 1px solid var( --wp--preset--color--border );
	background: var( --wp--preset--color--surface-alt );
	aspect-ratio: 16 / 8;
}

.tk-single__hero img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.tk-breadcrumb {
	max-width: var( --tk-container );
	margin: 0 auto;
	padding: clamp( 20px, 2.5vw, 30px ) clamp( 16px, 4vw, 40px ) 0;
}

.tk-breadcrumb__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font: 500 var( --wp--preset--font-size--sm ) / 1.6 var( --wp--preset--font-family--sans );
	color: var( --wp--preset--color--subtle );
}

.tk-breadcrumb__list a {
	color: var( --wp--preset--color--subtle );
	text-decoration: none;
}

.tk-breadcrumb__list a:hover {
	color: var( --wp--preset--color--primary-dark );
}

.tk-breadcrumb__current {
	color: var( --wp--preset--color--text-alt );
}

/* ─── 404 (404.html) ────────────────────────────────────────── */

.tk-404-hero {
	background: var( --wp--preset--color--surface-alt );
	border-bottom: 1px solid var( --wp--preset--color--border );
	text-align: center;
}

.tk-404-hero__inner {
	max-width: 640px;
	margin: 0 auto;
	padding: clamp( 56px, 7vw, 96px ) clamp( 16px, 4vw, 40px ) clamp( 48px, 6vw, 72px );
	display: flex;
	flex-direction: column;
	align-items: center;
}

.tk-404-hero__code {
	margin: 0 0 4px;
	font: 800 clamp( 64px, 9vw, 116px ) / 1 var( --wp--preset--font-family--sans );
	letter-spacing: -0.04em;
	color: var( --wp--preset--color--primary );
}

.tk-404-hero__title {
	margin: 0 0 14px;
	font: 800 clamp( 26px, 3.2vw, 38px ) / 1.2 var( --wp--preset--font-family--sans );
	letter-spacing: -0.03em;
	color: var( --wp--preset--color--dark );
}

.tk-404-hero__subtitle {
	margin: 0 0 clamp( 28px, 3.5vw, 36px );
	max-width: 440px;
	font: 400 1.03125rem/1.7 var( --wp--preset--font-family--serif );
	color: var( --wp--preset--color--muted );
}

.tk-404-hero__form {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	max-width: 460px;
	margin-bottom: clamp( 22px, 3vw, 30px );
}

.tk-404-hero__form-icon {
	position: absolute;
	left: 20px;
	display: flex;
	color: var( --wp--preset--color--subtle );
	pointer-events: none;
}

.tk-404-hero__form-input {
	width: 100%;
	box-sizing: border-box;
	padding: 17px 100px 17px 50px;
	border: 1px solid var( --wp--preset--color--border-alt );
	border-radius: 14px;
	background: var( --wp--preset--color--white );
	font: 500 clamp( 15px, 1.3vw, 16px ) / 1 var( --wp--preset--font-family--sans );
	color: var( --wp--preset--color--dark );
	outline: none;
	box-shadow: 0 2px 10px rgba( 10, 10, 10, 0.04 );
}

.tk-404-hero__form-input:focus {
	border-color: var( --wp--preset--color--primary );
	box-shadow: 0 0 0 4px rgba( 29, 184, 148, 0.14 );
}

.tk-404-hero__form-submit {
	position: absolute;
	right: 8px;
	font: 700 0.8125rem/1 var( --wp--preset--font-family--sans );
	color: var( --wp--preset--color--white );
	background: var( --wp--preset--color--dark );
	border: 0;
	border-radius: 10px;
	padding: 12px 16px;
	cursor: pointer;
}

.tk-404-hero__form-submit:hover {
	background: #1f2422;
}

.tk-404-hero__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}

.tk-404-hero__btn {
	font: 700 0.90625rem/1 var( --wp--preset--font-family--sans );
	border-radius: 11px;
	padding: 13px 22px;
	text-decoration: none;
}

.tk-404-hero__btn--primary {
	color: var( --wp--preset--color--white );
	background: var( --wp--preset--color--dark );
}

.tk-404-hero__btn--primary:hover {
	background: #1f2422;
}

.tk-404-hero__btn--secondary {
	color: var( --wp--preset--color--dark );
	background: var( --wp--preset--color--white );
	border: 1px solid var( --wp--preset--color--border-alt );
}

.tk-404-hero__btn--secondary:hover {
	border-color: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--primary-dark );
}

/* ─── Responsive ────────────────────────────────────────────── */

@media ( max-width: 782px ) {
	.tk-header__inner {
		padding: 0.75rem 1.125rem;
	}
}