/*
 * KDLX blog shortcodes.
 *
 * Reuses the kdlx-* pattern classes from patterns.css; this file only
 * carries layout helpers unique to the shortcode output
 * (inc/blog-features/shortcodes.php). Loaded on singular views.
 */

/* Generic two-column layout used by review box and CTA shortcodes. */
.kdlx-sc-columns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5em;
	margin: 0.75em 0;
}

.kdlx-sc-columns-cta {
	grid-template-columns: minmax(120px, 33%) 1fr;
	align-items: center;
}

.kdlx-sc-columns > div {
	min-width: 0;
}

.kdlx-sc-cta-image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 6px;
}

/* CTA / review button: inherits theme button colors. */
.kdlx-sc-button {
	display: inline-block;
	padding: 0.6em 1.4em;
	border-radius: 4px;
	background: #1e73be;
	color: #fff;
	font-weight: 600;
	text-decoration: none;
}

.kdlx-sc-button:hover,
.kdlx-sc-button:focus {
	background: #155d9e;
	color: #fff;
	text-decoration: none;
}

/* Star rating label spacing. */
.kdlx-rating-label {
	margin-right: 0.25em;
	font-size: 1rem;
	color: inherit;
	letter-spacing: 0;
}

/* Table of contents ([kdlx_toc]). */
.kdlx-toc {
	padding: 1em 1.25em;
	margin-bottom: 1.5em;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 8px;
	background: #fafafa;
}

.kdlx-toc-title {
	margin: 0 0 0.5em;
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.kdlx-toc-list {
	margin: 0;
	padding-left: 1.1em;
	list-style: none;
}

.kdlx-toc-item {
	margin: 0.15em 0;
}

.kdlx-toc-level-3 {
	margin-left: 1.25em;
	font-size: 0.925em;
}

@media (max-width: 576px) {
	.kdlx-sc-columns,
	.kdlx-sc-columns-cta {
		grid-template-columns: 1fr;
	}
}

/* ------------------------------------------------------------------ */
/* Toplist summary + sections                                         */
/* ------------------------------------------------------------------ */

.kdlx-toplist-summary {
	border: 1px solid var(--kdlx-border, #e5e5e5);
	border-radius: 8px;
	padding: 20px;
	margin: 1.5em 0;
	background: var(--kdlx-card-bg, #fff);
}

.kdlx-toplist-summary-title {
	margin: 0 0 15px;
	font-size: 1.15em;
	letter-spacing: 0.03em;
}

.kdlx-toplist-summary-row {
	display: flex;
	align-items: center;
	gap: 15px;
	padding: 12px 0;
	border-bottom: 1px solid var(--kdlx-border, #eee);
}

.kdlx-toplist-summary-row:last-child {
	border-bottom: 0;
}

.kdlx-toplist-extra {
	display: none;
}

.kdlx-toplist-expanded .kdlx-toplist-extra {
	display: flex;
}

.kdlx-toplist-summary-thumb {
	flex: 0 0 60px;
	width: 60px;
	height: 60px;
	border-radius: 6px;
	overflow: hidden;
	background: #f4f4f4;
}

.kdlx-toplist-summary-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.kdlx-toplist-summary-name {
	flex: 1 1 auto;
	min-width: 0;
	font-weight: 600;
	text-decoration: none;
}

.kdlx-toplist-price {
	display: inline-block;
	box-sizing: border-box;
	max-width: 100%;
	padding: 7px 16px;
	border-radius: 50px;
	background: #d9ef9b;
	color: #222;
	font-weight: 600;
	font-size: 0.9em;
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.kdlx-toplist-price:hover {
	background: #c6e37f;
	color: #111;
}

.kdlx-toplist-jump {
	font-size: 0.85em;
	white-space: nowrap;
}

.kdlx-toplist-expand {
	display: block;
	margin: 12px auto 0;
	padding: 8px 22px;
	border: 1px solid var(--kdlx-border, #ddd);
	border-radius: 50px;
	background: transparent;
	color: inherit;
	font-size: 0.9em;
	cursor: pointer;
}

.kdlx-toplist-expand:hover {
	background: rgba(0, 0, 0, 0.04);
}

.kdlx-toplist-section {
	margin: 2em 0;
	scroll-margin-top: 20px;
}

.kdlx-toplist-section-title {
	display: flex;
	align-items: baseline;
	gap: 10px;
}

.kdlx-toplist-num {
	color: #9bbc3e;
}

.kdlx-toplist-cols {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 30px;
	align-items: start;
}

.kdlx-toplist-image {
	margin: 0 0 1em;
}

.kdlx-toplist-image img {
	width: 100%;
	height: auto;
	border-radius: 8px;
}

.kdlx-toplist-col-side .kdlx-toplist-price {
	width: 100%;
	text-align: center;
	margin-bottom: 18px;
}

.kdlx-toplist-block {
	padding: 14px 0;
	border-bottom: 1px dashed var(--kdlx-border, #ddd);
}

.kdlx-toplist-block:last-child {
	border-bottom: 0;
}

.kdlx-toplist-block h4 {
	margin: 0 0 8px;
	font-size: 0.8em;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #9bbc3e;
}

.kdlx-toplist-block ul {
	margin: 0;
	padding-left: 1.1em;
}

.kdlx-toplist-block li {
	margin: 4px 0;
}

.kdlx-toplist-block p {
	margin: 0;
}

/* ------------------------------------------------------------------ */
/* Sidebar post TOC                                                   */
/* ------------------------------------------------------------------ */

.kdlx-toc-widget {
	padding: 0;
	margin-bottom: 2em;
}

.kdlx-toc-box {
	border: 1px solid var(--kdlx-border, #e5e5e5);
	border-radius: 8px;
	background: var(--kdlx-card-bg, #fff);
	overflow: hidden;
}

.kdlx-toc-box-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 15px;
	font-weight: 700;
	font-size: 0.85em;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	border-bottom: 1px solid var(--kdlx-border, #eee);
}

.kdlx-toc-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 1px solid #d0d0d0;
	border-radius: 6px;
	background: #f5f5f5;
	color: #333;
	cursor: pointer;
	transition: transform 0.2s ease;
}

.kdlx-toc-toggle svg {
	width: 16px;
	height: 16px;
}

.kdlx-toc-toggle:hover {
	background: #ebebeb;
	color: #111;
}

.kdlx-toc-collapsed .kdlx-toc-toggle {
	transform: rotate(180deg);
}

.kdlx-toc-box-list {
	margin: 0;
	padding: 10px 15px;
	list-style: none;
	max-height: 60vh;
	overflow-y: auto;
}

.kdlx-toc-collapsed .kdlx-toc-box-list {
	display: none;
}

.kdlx-toc-box-list li {
	margin: 0;
	padding: 7px 0 7px 16px;
	position: relative;
	font-size: 0.9em;
}

.kdlx-toc-box-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 14px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #9bbc3e;
}

.kdlx-toc-box-list li a {
	text-decoration: none;
}

@media (max-width: 992px) {
	.kdlx-toplist-cols {
		grid-template-columns: 1fr;
	}

	.kdlx-toplist-col-side .kdlx-toplist-price {
		width: auto;
	}
}

@media (max-width: 768px) {
	.kdlx-toplist-summary-row {
		flex-wrap: wrap;
		gap: 10px;
	}

	.kdlx-toplist-summary-name {
		flex: 1 1 calc(100% - 80px);
	}
}

.entry-content h2[id],
.entry-content h3[id] {
	scroll-margin-top: 20px;
}

.kdlx-toplist-review-body.kdlx-collapsed {
	max-height: 170px;
	overflow: hidden;
	position: relative;
}

.kdlx-toplist-review-body.kdlx-collapsed::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 60px;
	background: linear-gradient(to bottom, rgba(255,255,255,0), var(--kdlx-card-bg, #fff));
	pointer-events: none;
}

.kdlx-item-expanded .kdlx-toplist-review-body.kdlx-collapsed {
	max-height: none;
}

.kdlx-item-expanded .kdlx-toplist-review-body.kdlx-collapsed::after {
	display: none;
}

.kdlx-review-toggle {
	display: inline-block;
	margin: 6px 0 0;
	padding: 7px 18px;
	border: 1px solid var(--kdlx-border, #ddd);
	border-radius: 50px;
	background: transparent;
	color: inherit;
	font-size: 0.85em;
	font-weight: 600;
	cursor: pointer;
}

.kdlx-review-toggle:hover {
	background: rgba(0, 0, 0, 0.04);
}

.kdlx-review-toggle::after {
	content: " \2193";
}

.kdlx-item-expanded .kdlx-review-toggle::after {
	content: " \2191";
}

.kdlx-sidebar-ad {
	margin-bottom: 2em;
	text-align: center;
}

.kdlx-sidebar-ad img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
	display: block;
}

/* Widgets left in the sidebar with no content (e.g. an empty text
   block) still occupy vertical space — hide them everywhere. */
.widget-area .widget:has(> :only-child:empty) {
	display: none;
}

/* Floating TOC button + slide-in panel on phones. The sidebar widget
   itself is hidden on small screens unless opened via the button. */
.kdlx-toc-fab {
	display: none;
}

.kdlx-comments-ads {
	display: none;
}

/* Sticky banners: JS pins the group in the viewport after the article
   ends (desktop only). */
.kdlx-ads-fixed {
	position: fixed;
	z-index: 50;
	margin-bottom: 0;
}

@media (max-width: 576px) {
	.kdlx-toc-widget {
		display: none;
	}

	/* A sidebar that only holds the (mobile-hidden) TOC + banners would
	   leave a tall empty block before the footer — collapse it. */
	.inside-right-sidebar:not(:has(> *:not(.kdlx-toc-widget):not(.kdlx-sidebar-ads):not(.kdlx-sidebar-ad):not(.kdlx-toc-fab):not(.kdlx-signup.kdlx-ad-m-hide))),
	.inside-left-sidebar:not(:has(> *:not(.kdlx-toc-widget):not(.kdlx-sidebar-ads):not(.kdlx-sidebar-ad):not(.kdlx-toc-fab):not(.kdlx-signup.kdlx-ad-m-hide))) {
		display: none;
	}

	.comments-area {
		margin-bottom: 24px;
	}

	/* The stacked sidebar separator margin (55px) reads as dead space
	   between the comments card and the footer on phones. */
	#right-sidebar.widget-area,
	#left-sidebar.widget-area {
		margin-top: 20px;
	}

	.kdlx-toc-fab {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		right: 12px;
		top: 50%;
		transform: translateY(-50%);
		z-index: 90;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: var(--kdlx-accent, #1e73be);
		color: #fff;
		cursor: pointer;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
	}

	.kdlx-toc-fab:hover {
		background: var(--kdlx-accent-hover, #155a94);
	}

	.kdlx-toc-widget.kdlx-toc-m-open {
		display: block;
		position: fixed;
		right: 12px;
		top: 50%;
		transform: translateY(-50%);
		z-index: 95;
		width: min(82vw, 320px);
		max-height: 70vh;
		overflow-y: auto;
		margin-bottom: 0;
		box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
		border-radius: 8px;
	}

	.kdlx-ad-m-hide {
		display: none;
	}

	/* Align with the comments card edges instead of bleeding to the
	   viewport edges. */
	.kdlx-comments-ads {
		display: block;
		margin: 1.5em 30px;
	}

	.kdlx-comments-ads .kdlx-sidebar-ad {
		margin-bottom: 1em;
	}

	.kdlx-comments-ads .kdlx-sidebar-ad:last-child {
		margin-bottom: 0;
	}
}

/* ------------------------------------------------------------------ */
/* Inline ad + affiliate disclosure (post content)                    */
/* ------------------------------------------------------------------ */

/* Full-content-width banner — same edges as the article container. */
.kdlx-inline-ad {
	margin: 1.5em 0;
	width: 100%;
}

.kdlx-inline-ad a {
	display: block;
}

.kdlx-inline-ad img {
	width: 100%;
	max-width: 100%;
	height: auto;
	border-radius: 8px;
	display: block;
	object-fit: cover;
}

.kdlx-sa-disclosure {
	background: #FFF7ED;
	border: 1px solid #FDBA74;
	border-radius: 8px;
	padding: 12px 16px;
	margin: 16px 0;
	font-size: 14px;
	color: #7C2D12;
}

/* -------------------------------------------------------------------------
 * Breadcrumb (single posts)
 * ---------------------------------------------------------------------- */
.kdlx-breadcrumb {
	font-size: 14px;
	line-height: 1.6;
	margin: 0 0 1em;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	/* Match .inside-article padding so it lines up with the content below. */
	padding: 0 30px;
}

@media (max-width:768px) {
	.kdlx-breadcrumb {
		padding: 0 20px;
	}
}

.kdlx-breadcrumb a {
	color: var(--accent);
	text-decoration: none;
}

.kdlx-breadcrumb a:hover {
	text-decoration: underline;
}

.kdlx-bc-sep {
	color: #999;
}

.kdlx-bc-current {
	color: #777;
}

/* -------------------------------------------------------------------------
 * Author box (single posts)
 * ---------------------------------------------------------------------- */
.kdlx-author-box {
	display: flex;
	gap: 24px;
	align-items: flex-start;
	border: 2px solid var(--accent-1, var(--accent));
	border-radius: 14px;
	padding: 26px 30px;
	margin: 2em 0;
}

.kdlx-author-avatar {
	flex: 0 0 auto;
}

.kdlx-author-avatar img {
	border-radius: 50%;
	display: block;
	width: 110px;
	height: 110px;
	object-fit: cover;
}

.kdlx-author-body {
	flex: 1 1 auto;
	min-width: 0;
}

.kdlx-author-name {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
}

.kdlx-author-name a {
	color: inherit;
	text-decoration: none;
}

.kdlx-author-name a:hover {
	color: var(--accent);
}

.kdlx-author-title {
	font-weight: 600;
	margin-top: 6px;
}

.kdlx-author-bio {
	margin: 12px 0 0;
}

.kdlx-author-more {
	display: inline-block;
	margin-top: 12px;
	font-weight: 700;
	color: var(--accent);
	text-decoration: none;
}

.kdlx-author-more:hover {
	text-decoration: underline;
}

.kdlx-author-socials {
	list-style: none;
	margin: 14px 0 0;
	padding: 0;
	display: flex;
	gap: 10px;
}

.kdlx-author-social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 1px solid var(--accent);
	color: var(--accent);
	transition: background .15s ease, color .15s ease;
}

.kdlx-author-social:hover {
	background: var(--accent);
	color: #fff;
}

@media (max-width:576px) {
	.kdlx-author-box {
		flex-direction: column;
		align-items: center;
		text-align: center;
		padding: 20px;
	}

	.kdlx-author-socials {
		justify-content: center;
	}
}

/* Single-post H1 uses the stronger accent shade. */
.single-post h1.entry-title {
	color: var(--accent-1, var(--accent));
}

/* ===== Collapsed comment toggle ===== */
.kdlx-comments-toggle {
	border: 1px solid var(--dm-border, rgba(0, 0, 0, .1));
	border-radius: 12px;
	background: var(--dm-input, rgba(0, 0, 0, .03));
	margin: 1.5em 0;
	overflow: hidden;
}

.kdlx-comments-toggle > summary {
	list-style: none;
	cursor: pointer;
	padding: 1em 1.25em;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: .6em;
	user-select: none;
}

.kdlx-comments-toggle > summary::-webkit-details-marker {
	display: none;
}

.kdlx-comments-toggle > summary::before {
	content: "\f086"; /* comment glyph from the bundled KDLX icon font */
	font-family: KDLX;
	font-weight: 400;
	opacity: .7;
}

.kdlx-comments-toggle > summary::after {
	content: "";
	margin-left: auto;
	width: .55em;
	height: .55em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	opacity: .55;
	transition: transform .2s ease;
}

.kdlx-comments-toggle[open] > summary::after {
	transform: rotate(-135deg);
}

.kdlx-comments-toggle[open] > summary {
	border-bottom: 1px solid var(--dm-border, rgba(0, 0, 0, .08));
}

.kdlx-comments-toggle .comment-respond {
	padding: 1.25em;
}

.kdlx-comments-toggle .comment-respond .reply-title {
	margin-top: 0;
}

/* ===== Comment form: name + email inline, website hidden ===== */
body.kdlx-comment-inline .comment-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 1em;
}

/* Grid/flex children must be allowed to shrink below their intrinsic
   min-content width (input size=30, long checkbox label) or they push
   the whole comments frame past the content column edge. */
body.kdlx-comment-inline .comment-form > *,
body.kdlx-comment-inline .comment-form input,
body.kdlx-comment-inline .comment-form textarea,
body.kdlx-comment-inline .comment-form label {
	min-width: 0;
	max-width: 100%;
}

body.kdlx-comment-inline .comment-form > * {
	grid-column: 1 / -1;
}

body.kdlx-comment-inline .comment-form .comment-form-author {
	grid-column: 1;
}

body.kdlx-comment-inline .comment-form .comment-form-email {
	grid-column: 2;
}

body.kdlx-comment-inline .comment-form .comment-form-author input,
body.kdlx-comment-inline .comment-form .comment-form-email input {
	width: 100%;
	box-sizing: border-box;
}

/* Even vertical rhythm between comment textarea and fields. */
body.kdlx-comment-inline .comment-form p {
	margin: 0 0 1em;
}

body.kdlx-comment-inline .comment-form p:last-child {
	margin-bottom: 0;
}

body.kdlx-comment-inline .comment-form .comment-form-url {
	display: none;
}

@media (max-width:576px) {
	body.kdlx-comment-inline .comment-form {
		grid-template-columns: 1fr;
	}
	body.kdlx-comment-inline .comment-form > *,
	body.kdlx-comment-inline .comment-form .comment-form-author,
	body.kdlx-comment-inline .comment-form .comment-form-email {
		grid-column: 1 / -1;
	}
}

/* Below-the-fold sections skip rendering work until scrolled into view.
   contain-intrinsic-size keeps the scrollbar estimate stable. */
.comments-area,
.kdlx-related-posts,
.kdlx-more-posts {
	content-visibility: auto;
	contain-intrinsic-size: auto 400px;
}

/* ===== Comments inside a bordered frame ===== */
/* Width + padding come from the theme's own container rules so the
   frame is byte-identical to .inside-article at every breakpoint. */
body.kdlx-comments-boxed .site-main > .comments-area {
	border: 1px solid rgba(30, 115, 190, .3);
	border-color: color-mix(in srgb, var(--accent, #1e73be) 30%, transparent);
	border-radius: 10px;
	background: transparent;
	box-sizing: border-box;
	margin-top: 1.5em;
	margin-bottom: 3em;
	max-width: 100%;
	overflow: hidden;
}

body.kdlx-comments-boxed .comments-area #comments,
body.kdlx-comments-boxed .comments-area .kdlx-comments-toggle,
body.kdlx-comments-boxed .comments-area .comment-respond,
body.kdlx-comments-boxed .comments-area .comment-form {
	min-width: 0;
	max-width: 100%;
}

/* Layouts where .comments-area has no container padding of its own
   (one-container mode) need a fallback inner padding. */
body.kdlx-comments-boxed:not(.separate-containers) .comments-area {
	padding: 1.8em 2em;
}

body.kdlx-comments-boxed .comments-title {
	margin: 0 0 .4em;
	font-size: .95em;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

body.kdlx-comments-boxed .comment-list {
	margin: 0;
}

body.kdlx-comments-boxed .comment-list > li {
	border-bottom: 1px solid var(--dm-border, rgba(0, 0, 0, .07));
}

body.kdlx-comments-boxed .comment-list > li:last-child {
	border-bottom: 0;
}

body.kdlx-comments-boxed .comment-body {
	padding: 1.2em 0;
}

body.kdlx-comments-boxed .comment-meta {
	display: flex;
	align-items: center;
	gap: .9em;
}

body.kdlx-comments-boxed .comment-meta .avatar {
	float: none;
	margin: 0;
	width: 44px;
	height: 44px;
	border-radius: 8px;
}

body.kdlx-comments-boxed .comment-author-info {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .15em;
}

body.kdlx-comments-boxed .comment-author .fn {
	font-style: normal;
	font-weight: 600;
}

body.kdlx-comments-boxed .comment-awaiting-moderation {
	flex-basis: 100%;
	margin: .4em 0 0;
}

body.kdlx-comments-boxed .entry-meta.comment-metadata {
	margin-top: 0;
	font-size: .78em;
	opacity: .65;
}

/* Content + reply indented under the author name; base theme's
   inner border box is removed so text doesn't look boxed-in. */
body.kdlx-comments-boxed .comment-content {
	border: 0;
	margin-top: .5em;
	margin-left: calc(44px + .9em);
	padding: 0;
}

body.kdlx-comments-boxed .comment-content p {
	margin-bottom: .6em;
}

body.kdlx-comments-boxed .comment-reply-link {
	font-size: .82em;
	font-weight: 500;
	color: var(--accent, #1e73be);
}

/* Collapsed form toggle sits inside the same frame, not a nested box. */
body.kdlx-comments-boxed .kdlx-comments-toggle {
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	margin: 0;
	overflow: visible;
}

body.kdlx-comments-boxed .comment-list ~ .kdlx-comments-toggle {
	border-top: 1px solid var(--dm-border, rgba(0, 0, 0, .08));
	margin-top: .6em;
}

body.kdlx-comments-boxed .kdlx-comments-toggle > summary {
	padding: .9em 0;
	font-size: .85em;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

body.kdlx-comments-boxed .kdlx-comments-toggle .comment-respond {
	padding: 1.2em 0 0;
}

@media (max-width:576px) {
	body.kdlx-comments-boxed:not(.separate-containers) .comments-area {
		padding: 1.1em 1.2em;
	}

	body.kdlx-comments-boxed .comment-content {
		margin-left: 0;
	}
}

/* ===== Entry footer: categories left, tags right ===== */
footer.entry-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .6em 1em;
}

footer.entry-meta .cat-links {
	flex: 1 1 auto;
}

footer.entry-meta .tags-links {
	margin-left: auto;
	text-align: right;
}

footer.entry-meta .post-navigation {
	flex: 0 0 100%;
}

/* Tags as small pill buttons — icon hidden, commas stripped server-side. */
body.kdlx-tag-pills footer.entry-meta .tags-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: .45em;
}

body.kdlx-tag-pills .tags-links:before {
	display: none;
}

body.kdlx-tag-pills .tags-links a {
	display: inline-block;
	padding: .28em .85em;
	border-radius: 999px;
	background: var(--dm-input, rgba(0, 0, 0, .05));
	border: 1px solid var(--dm-border, rgba(0, 0, 0, .08));
	color: inherit;
	font-size: .82em;
	font-weight: 500;
	line-height: 1.4;
	text-decoration: none;
}

body.kdlx-tag-pills .tags-links a:hover {
	background: var(--accent, #1e73be);
	border-color: var(--accent, #1e73be);
	color: #fff;
}

.site-main .post-navigation {
	margin-top: 1.5em;
}

/* ===== Previous / Next post cards ===== */
body.kdlx-nav-cards .site-main .post-navigation {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1em;
	overflow: visible;
}

body.kdlx-nav-cards .post-navigation .nav-previous,
body.kdlx-nav-cards .post-navigation .nav-next {
	border: 1px solid var(--dm-border, rgba(0, 0, 0, .1));
	border-radius: 10px;
	padding: 1.1em 1.3em;
	float: none;
	width: auto;
	transition: border-color .2s ease, box-shadow .2s ease;
}

body.kdlx-nav-cards .post-navigation .nav-previous:hover,
body.kdlx-nav-cards .post-navigation .nav-next:hover {
	border-color: var(--accent, #1e73be);
	box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
}

body.kdlx-nav-cards .post-navigation .nav-previous {
	grid-column: 1;
	text-align: left;
}

body.kdlx-nav-cards .post-navigation .nav-next {
	grid-column: 2;
	text-align: right;
}

.kdlx-nav-card-label {
	display: block;
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	opacity: .55;
	margin-bottom: .45em;
}

body.kdlx-nav-cards .post-navigation a {
	color: inherit;
	font-weight: 700;
	line-height: 1.35;
	display: block;
	text-decoration: none;
}

body.kdlx-nav-cards .post-navigation a:hover {
	color: var(--accent, #1e73be);
}

@media (max-width:576px) {
	body.kdlx-nav-cards .site-main .post-navigation {
		grid-template-columns: 1fr;
	}
	body.kdlx-nav-cards .post-navigation .nav-previous,
	body.kdlx-nav-cards .post-navigation .nav-next {
		grid-column: 1;
	}
}

/* ------------------------------------------------------------------
   Sidebar signup card — dark newsletter box next to the banner images.
   Colors are CSS vars so the Customizer (and dark mode) can restyle
   without touching markup.
   ------------------------------------------------------------------ */

.kdlx-signup-box {
	background: var(--kdlx-su-bg, #22303f);
	border-radius: 14px;
	padding: 22px 20px 16px;
	color: #fff;
	font-size: .9rem;
	line-height: 1.5;
}

.kdlx-signup-title {
	margin: 0 0 .35em;
	color: #fff;
	font-size: 1.35rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.01em;
}

.kdlx-signup-text {
	margin: 0 0 1em;
	opacity: .82;
	font-size: .88rem;
}

/* Pill row shared by the real form and the link-mode CTA. */
.kdlx-signup-field,
.kdlx-signup-cta {
	display: flex;
	align-items: stretch;
	background: #fff;
	border-radius: 999px;
	padding: 4px;
	overflow: hidden;
	text-decoration: none;
}

/* Beat the base input/button border styles — the pill is one seamless
   row; any inner border shows as an ugly divider. Safari needs its
   native -webkit-appearance stripped to drop the border. */
.widget-area .kdlx-signup .kdlx-signup-input,
.kdlx-signup .kdlx-signup-input {
	flex: 1 1 auto;
	min-width: 0;
	-webkit-appearance: none;
	appearance: none;
	border: 0;
	border-radius: 0;
	background: transparent;
	padding: 9px 14px;
	font-size: .88rem;
	color: #334155;
	outline: none;
	box-shadow: none;
}

.kdlx-signup .kdlx-signup-input:focus {
	border: 0;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
	box-shadow: none;
}

.kdlx-signup-cta-ph {
	flex: 1 1 auto;
	min-width: 0;
	padding: 9px 14px;
	font-size: .88rem;
	color: #94a3b8;
	display: flex;
	align-items: center;
}

.kdlx-signup-btn {
	flex: 0 0 auto;
	-webkit-appearance: none;
	appearance: none;
	border: 0;
	box-shadow: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 999px;
	background: var(--kdlx-su-accent, #ff9f1a);
	color: #fff;
	font-size: .88rem;
	font-weight: 600;
	padding: 9px 20px;
	cursor: pointer;
	white-space: nowrap;
	transition: filter .15s ease;
}

.kdlx-signup-btn:hover,
.kdlx-signup-btn:focus {
	filter: brightness(.92);
	color: #fff;
}

.kdlx-signup-note {
	margin: .8em 0 0;
	font-size: .72rem;
	line-height: 1.5;
	opacity: .62;
}

.kdlx-signup-note a {
	color: #fff;
	text-decoration: underline;
}

/* Narrow sidebars / small screens: keep the pill row usable. */
@media (max-width: 420px) {
	.kdlx-signup-btn {
		padding: 9px 14px;
	}

	.kdlx-signup-title {
		font-size: 1.2rem;
	}
}

/* Full-width parity with the banner images / other sidebar widgets:
   drop the stock .widget padding so the card reaches the same edges. */
.widget-area .kdlx-signup.widget,
.kdlx-signup.widget {
	width: 100%;
	padding: 0;
}

.kdlx-sidebar-ads .kdlx-signup {
	margin-bottom: 2em;
}

/* Narrow card (slim sidebars / small screens): drop the button onto
   its own row, same width as the email field — the pill splits into
   two clean rounded elements. */
.kdlx-signup-box {
	container-type: inline-size;
	container-name: signup;
}

@container signup (max-width: 250px) {
	.kdlx-signup-field,
	.kdlx-signup-cta {
		flex-direction: column;
		gap: 8px;
		background: transparent;
		padding: 0;
		border-radius: 0;
		overflow: visible;
	}

	.kdlx-signup-input,
	.kdlx-signup-cta-ph {
		width: 100%;
		background: #fff;
		border-radius: 999px;
		padding: 11px 16px;
	}

	.kdlx-signup-cta {
		display: block;
	}

	.kdlx-signup-cta-ph {
		display: block;
		box-sizing: border-box;
		margin-bottom: 8px;
		cursor: pointer;
	}

	.kdlx-signup-btn {
		width: 100%;
		padding: 11px 16px;
	}
}