/*
 * Kininusa News — component layer (Phase 6; interactive states added Phase 7).
 *
 * Header (trending / main / menu bar), navigation (desktop dropdown, mobile
 * slide strip / off-canvas panel), search toggle + overlay, cards, breadcrumb,
 * archive heading, single article, related card, comments, 404, footer,
 * social icons, dark-mode toggle.
 * Feature components (ads, share, custom widgets, …) arrive in later phases.
 *
 * Interactive hooks:
 *   html.kn-js                     — set by the dark-mode bootstrap (JS present)
 *   body.kn-nav-slide / -dropdown  — navigation mode (Modules\Navigation)
 *   body.kn-nav-open               — off-canvas panel open
 *   body.kn-search-open            — search overlay open
 *   body.kn-no-scroll              — scroll lock while an overlay is open
 */

/* ------------------------------------------------------------------ *
 * Header shell
 * ------------------------------------------------------------------ */
.kn-header {
	position: relative;
	background-color: var(--kn-header-bg, var(--kn-color-background));
	color: var(--kn-header-color, var(--kn-color-text));
	border-bottom: 1px solid var(--kn-color-border);
	box-shadow: var(--kn-shadow-sm);
}

.kn-header__main-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--kn-space-4);
	padding-block: var(--kn-space-5);
}

.kn-brand {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--kn-space-3);
	flex: 1 1 auto;
	min-width: 0;
}

.kn-brand__text {
	flex: 1 1 auto;
	min-width: 0;
}

.kn-site-title {
	margin: 0;
	font-size: var(--kn-font-size-2xl);
	font-weight: var(--kn-font-weight-bold);
	line-height: var(--kn-line-height-tight);
}

.kn-site-title a {
	color: var(--kn-color-text);
}

/*
 * Custom logo — bounded, never cropped (aspect preserved).
 * Max height is filterable via --kn-logo-max (Customizer: Header → Logo Height).
 * When a logo is present it sits inline with the title/tagline (horizontal lockup).
 */
.kn-brand .custom-logo,
.kn-brand img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: var(--kn-logo-max, 48px);
}

@media (max-width: 640px) {
	.kn-brand .custom-logo,
	.kn-brand img {
		max-height: var(--kn-logo-max, 40px);
	}
}

.kn-site-desc {
	margin: var(--kn-space-1) 0 0;
	font-size: var(--kn-font-size-sm);
	color: var(--kn-color-text-muted);
}

/* Tagline inside a colored header follows the header text color. */
.kn-header .kn-site-desc {
	color: var(--kn-header-color, var(--kn-color-text-muted));
	opacity: 0.85;
}

.kn-header__actions {
	display: flex;
	align-items: center;
	gap: var(--kn-space-3);
	flex: 0 0 auto;
}

.kn-header__search {
	flex: 0 1 320px;
}

/* Header icon buttons (nav toggle — mobile drawer + search toggle).
   Hidden by default; shown by the ≤980px rules below when JS is present. */
.kn-nav-toggle,
.kn-search-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--kn-color-border);
	border-radius: var(--kn-radius-circle);
	background: transparent;
	color: var(--kn-color-text);
	cursor: pointer;
}

.kn-nav-toggle:hover,
.kn-search-toggle:hover {
	color: var(--kn-color-accent);
	border-color: var(--kn-color-accent);
}

/* Scroll lock while an overlay/drawer is open (position is preserved). */
body.kn-no-scroll {
	overflow: hidden;
}

.kn-icon {
	display: inline-block;
	width: 1.15em;
	height: 1.15em;
	vertical-align: -0.15em;
}

/* Trending bar (renders when items are provided) */
.kn-trending {
	background: linear-gradient(90deg, var(--kn-trending-from, var(--kn-color-gradient-from)), var(--kn-trending-to, var(--kn-color-gradient-to)));
	color: var(--kn-trending-color, var(--kn-color-on-accent));
}

.kn-trending__inner {
	display: flex;
	align-items: center;
	gap: var(--kn-space-4);
	padding-block: var(--kn-space-2);
}

.kn-trending__label {
	font-size: var(--kn-font-size-xs);
	font-weight: var(--kn-font-weight-bold);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	background: rgba(0, 0, 0, 0.18);
	padding: 2px 10px;
	border-radius: var(--kn-radius-pill);
	white-space: nowrap;
}

.kn-trending__slider {
	flex: 1;
	min-width: 0;
}

.kn-trending__slider .splide__track {
	overflow: hidden;
}

.kn-trending__item {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.kn-trending__item a {
	color: inherit;
}

.kn-trending__rank {
	margin-right: 6px;
	font-weight: var(--kn-font-weight-bold);
	opacity: 0.85;
}

/* (Menu bar styles removed in Phase 21 — replaced by the page navigation
   bar + mobile drawer below.) */

.kn-header__date {
	font-size: var(--kn-font-size-sm);
	color: var(--kn-color-text-muted);
	white-space: nowrap;
}

/* ------------------------------------------------------------------ *
 * Navigation
 * ------------------------------------------------------------------ */
.kn-menu {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
}

.kn-menu li {
	position: relative;
}

/* Menu label badges (e.g. "Viral <span>HOT</span>" / "Lifestyle <span>NEW</span>"). */
.kn-menu .menu-item > a span {
	margin-left: var(--kn-space-1);
	padding: 1px 6px;
	border-radius: 999px;
	background-color: var(--kn-menu-accent, var(--kn-color-accent));
	font-size: 0.68em;
	font-weight: var(--kn-font-weight-bold);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	vertical-align: 0.12em;
	color: #fff;
}

.kn-menu a {
	display: block;
	padding: var(--kn-space-3) var(--kn-space-4);
	color: var(--kn-menu-color, var(--kn-color-text));
	font-family: var(--kn-font-menu, var(--kn-font-body));
	font-size: var(--kn-font-menu-size, var(--kn-font-size-base));
	font-weight: var(--kn-font-menu-weight, var(--kn-font-weight-medium));
}

.kn-menu a:hover {
	color: var(--kn-menu-accent, var(--kn-color-accent));
}

.kn-menu .sub-menu,
.kn-menu .children {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: var(--kn-z-dropdown);
	min-width: 210px;
	margin: 0;
	padding: var(--kn-space-2) 0;
	list-style: none;
	background: var(--kn-color-background);
	border: 1px solid var(--kn-color-border);
	border-radius: var(--kn-radius-md);
	box-shadow: var(--kn-shadow-md);
	display: none;
}

.kn-menu li:hover > .sub-menu,
.kn-menu li:focus-within > .sub-menu,
.kn-menu li:hover > .children,
.kn-menu li:focus-within > .children {
	display: block;
}

.kn-menu .sub-menu .sub-menu,
.kn-menu .children .children {
	top: 0;
	left: 100%;
}

.kn-menu--footer {
	justify-content: center;
}

.kn-menu--footer a {
	padding: var(--kn-space-2) var(--kn-space-3);
	color: var(--kn-footer-menu, var(--kn-color-text));
}

/* ------------------------------------------------------------------ *
 * Cards
 * ------------------------------------------------------------------ */
.kn-card {
	display: flex;
	align-items: flex-start;
	gap: var(--kn-space-4);
	margin-bottom: var(--kn-space-6);
}

.kn-card__thumb {
	flex: 0 0 auto;
}

.kn-card__thumb img {
	display: block;
	width: 240px;
	height: 150px;
	object-fit: cover;
	border-radius: var(--kn-radius-sm);
}

.kn-card__body {
	min-width: 0;
}

.kn-card__title {
	margin: 0 0 var(--kn-space-2);
	font-size: var(--kn-font-size-2xl);
	font-family: var(--kn-font-loop, var(--kn-font-heading));
	font-weight: var(--kn-font-loop-weight, var(--kn-font-weight-bold));
}

.kn-card__title a {
	color: var(--kn-card-title, var(--kn-color-text));
}

.kn-card__title a:hover {
	color: var(--kn-card-accent, var(--kn-color-accent));
}

.kn-card__meta {
	margin: 0 0 var(--kn-space-2);
	font-size: var(--kn-font-size-sm);
	color: var(--kn-card-meta, var(--kn-color-text-muted));
}

.kn-card__cat {
	color: var(--kn-card-accent, var(--kn-color-accent));
	font-weight: var(--kn-font-weight-medium);
}

.kn-card__sep {
	margin: 0 6px;
	color: var(--kn-color-text-muted);
}

.kn-card__excerpt {
	font-size: var(--kn-font-size-base);
	color: var(--kn-color-text);
}

.kn-card__excerpt p {
	margin-bottom: 0;
}

/* Related card (used by the related grid in a later phase) */
.kn-related-card__thumb {
	display: block;
	background: var(--kn-color-surface-2);
	border-radius: var(--kn-radius-sm);
	overflow: hidden;
}

.kn-related-card__thumb img {
	display: block;
	width: 100%;
	height: 130px;
	object-fit: cover;
}

.kn-related-card__time {
	margin: var(--kn-space-2) 0 2px;
	font-size: var(--kn-font-size-xs);
	color: var(--kn-related-meta, var(--kn-color-text-muted));
}

.kn-related-card__title {
	margin: 0;
	font-size: var(--kn-font-size-base);
}

.kn-related-card__title a {
	color: var(--kn-related-link, var(--kn-color-text));
}

.kn-related-card__title a:hover {
	color: var(--kn-color-accent);
}

/* ------------------------------------------------------------------ *
 * Breadcrumb / archive heading
 * ------------------------------------------------------------------ */
.kn-breadcrumb {
	padding-block: var(--kn-space-3);
	font-size: var(--kn-font-size-sm);
	color: var(--kn-breadcrumb-color, var(--kn-color-text-muted));
}

.kn-breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.kn-breadcrumb__item {
	min-width: 0;
}

.kn-breadcrumb__item + .kn-breadcrumb__item::before {
	content: "›";
	margin-right: 6px;
	color: var(--kn-color-border);
}

.kn-breadcrumb a {
	color: var(--kn-breadcrumb-link, var(--kn-color-link));
}

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

.kn-breadcrumb [aria-current] {
	display: inline-block;
	max-width: 40ch;
	overflow: hidden;
	color: var(--kn-color-text);
	text-overflow: ellipsis;
	white-space: nowrap;
	vertical-align: bottom;
}

.kn-archive-head {
	padding: var(--kn-space-2) 0 var(--kn-space-5);
}

.kn-archive-head__title {
	margin: 0;
	font-size: var(--kn-font-size-xl);
}

.kn-archive-head__desc {
	margin-top: var(--kn-space-2);
	font-size: var(--kn-font-size-sm);
	color: var(--kn-color-text-muted);
}

/* ------------------------------------------------------------------ *
 * Single article
 * ------------------------------------------------------------------ */
.kn-article__head {
	margin-bottom: var(--kn-space-4);
}

.kn-article__title {
	margin: 0 0 var(--kn-space-3);
	font-size: var(--kn-font-size-3xl);
	color: var(--kn-single-head, inherit);
}

.kn-single-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 0;
	font-size: var(--kn-font-size-sm);
	color: var(--kn-color-text-muted);
}

.kn-single-meta a {
	color: var(--kn-single-accent, var(--kn-color-accent));
}

.kn-author {
	display: flex;
	align-items: center;
	gap: var(--kn-space-3);
	margin-bottom: var(--kn-space-4);
	padding-block: var(--kn-space-4);
	border-block: 1px solid var(--kn-color-border);
}

.kn-author__avatar img {
	display: block;
	width: 45px;
	height: 45px;
	border-radius: var(--kn-radius-circle);
}

.kn-author__label {
	display: block;
	font-size: var(--kn-font-size-xs);
	color: var(--kn-color-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.kn-author__name {
	font-weight: var(--kn-font-weight-bold);
}

.kn-author__socials {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kn-space-2);
	margin: var(--kn-space-2) 0 0;
	padding: 0;
	list-style: none;
}

.kn-author__social {
	display: inline-block;
	padding: 2px 8px;
	border: 1px solid var(--kn-color-border);
	border-radius: var(--kn-radius-sm);
	font-size: var(--kn-font-size-xs);
	color: var(--kn-color-text-muted);
	text-decoration: none;
}

.kn-author__social:hover,
.kn-author__social:focus {
	color: var(--kn-color-primary);
	border-color: var(--kn-color-primary);
}

.kn-article__featured {
	margin: 0 0 var(--kn-space-5);
}

.kn-article__featured img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--kn-radius-md);
}

.kn-article__caption {
	margin-top: var(--kn-space-1);
	font-size: var(--kn-font-size-xs);
	color: var(--kn-color-text-muted);
	text-align: center;
}

.kn-entry h2 {
	font-size: var(--kn-font-size-2xl);
}

.kn-entry h3 {
	font-size: var(--kn-font-size-xl);
}

.kn-entry {
	color: var(--kn-single-text, inherit);
}

.kn-entry a {
	color: var(--kn-single-link, var(--kn-color-link));
}

.kn-entry h2,
.kn-entry h3 {
	color: var(--kn-single-head, inherit);
}

.kn-entry img {
	border-radius: var(--kn-radius-sm);
}

.kn-entry blockquote {
	border-left: 3px solid var(--kn-single-accent, var(--kn-color-accent));
	padding-left: var(--kn-space-4);
	color: var(--kn-color-text-muted);
}

.kn-page-links {
	margin: var(--kn-space-4) 0;
	font-weight: var(--kn-font-weight-bold);
}

.kn-tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--kn-space-2);
	font-size: var(--kn-font-size-sm);
}

.kn-tags a {
	display: inline-block;
	padding: 2px 10px;
	border: 1px solid var(--kn-color-border);
	border-radius: var(--kn-radius-sm);
	background: var(--kn-color-surface);
	color: var(--kn-color-text);
}

.kn-tags a:hover {
	border-color: var(--kn-color-accent);
	color: var(--kn-color-accent);
}

.kn-tags__label {
	color: var(--kn-color-text-muted);
}

/* ------------------------------------------------------------------ *
 * Comments
 * ------------------------------------------------------------------ */
.kn-comments {
	margin-top: var(--kn-space-7);
}

.kn-comments__title {
	font-size: var(--kn-font-size-lg);
}

.kn-comments__list {
	margin: 0 0 var(--kn-space-6);
	padding: 0;
	list-style: none;
}

.kn-comments__list .comment {
	padding-block: var(--kn-space-4);
	border-bottom: 1px solid var(--kn-color-border);
}

.kn-comments__list .children {
	list-style: none;
	padding-left: var(--kn-space-5);
}

.kn-comments .comment-form input[type="text"],
.kn-comments .comment-form input[type="email"],
.kn-comments .comment-form input[type="url"],
.kn-comments .comment-form textarea {
	width: 100%;
	padding: var(--kn-space-2) var(--kn-space-4);
	border: 1px solid var(--kn-color-border);
	border-radius: var(--kn-radius-sm);
	background: var(--kn-color-surface);
}

.kn-comments .comment-form label {
	display: block;
	margin-bottom: 2px;
	font-size: var(--kn-font-size-sm);
}

.kn-comments .comment-form p {
	margin-bottom: var(--kn-space-4);
}

/* ------------------------------------------------------------------ *
 * 404
 * ------------------------------------------------------------------ */
.kn-404 {
	padding: var(--kn-space-8) 0;
	text-align: center;
}

.kn-404__title {
	font-size: var(--kn-font-size-2xl);
}

.kn-404__text {
	max-width: 560px;
	margin: 0 auto var(--kn-space-5);
	color: var(--kn-color-text-muted);
}

/* ------------------------------------------------------------------ *
 * Buttons / widgets / search form / empty state
 * ------------------------------------------------------------------ */
.kn-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--kn-space-2);
	padding: var(--kn-space-3) var(--kn-space-5);
	border: 1px solid var(--kn-color-accent);
	border-radius: var(--kn-radius-pill);
	background: transparent;
	color: var(--kn-color-accent);
	font-size: var(--kn-font-size-sm);
	font-weight: var(--kn-font-weight-medium);
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--kn-t-fast), color var(--kn-t-fast);
}

.kn-btn:hover {
	background-color: var(--kn-color-accent);
	color: var(--kn-color-on-accent);
	text-decoration: none;
}

.kn-widget {
	margin-bottom: var(--kn-space-7);
}

.kn-widget__title {
	margin: 0 0 var(--kn-space-3);
	font-size: var(--kn-font-size-lg);
}

.kn-search-form {
	display: flex;
	gap: var(--kn-space-2);
}

.kn-search-form__input {
	flex: 1;
	min-width: 0;
	padding: var(--kn-space-2) var(--kn-space-4);
	border: 1px solid var(--kn-color-border);
	border-radius: var(--kn-radius-pill);
	background: var(--kn-color-surface);
	color: var(--kn-color-text);
	caret-color: var(--kn-color-text);
}

.kn-search-form__input::placeholder {
	color: var(--kn-color-text-muted);
	opacity: 1;
}

.kn-search-form__submit {
	background-image: linear-gradient(90deg, var(--kn-search-from, var(--kn-color-gradient-from)), var(--kn-search-to, var(--kn-color-gradient-to)));
	border-color: var(--kn-search-from, var(--kn-color-accent));
	color: var(--kn-search-color, var(--kn-color-on-accent));
}

.kn-search-form__submit:hover {
	background-color: var(--kn-search-from, var(--kn-color-accent));
	color: var(--kn-search-color, var(--kn-color-on-accent));
}

/* Keep the header search button separated from an identically colored strip. */
.kn-header__search .kn-search-form__submit {
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
}

.kn-empty {
	color: var(--kn-color-text-muted);
}

/* ------------------------------------------------------------------ *
 * Load More (progressive enhancement; native pagination fallback)
 * ------------------------------------------------------------------ */
.kn-loadmore {
	margin: var(--kn-space-6) 0;
	text-align: center;
}

.kn-loadmore__btn {
	display: none; /* revealed by load-more.js (progressive enhancement) */
	border-color: var(--kn-more-border, var(--kn-color-accent));
	background-color: var(--kn-more-bg, transparent);
	color: var(--kn-more-color, var(--kn-color-accent));
}

.kn-loadmore__btn:hover {
	background-color: var(--kn-more-border, var(--kn-color-accent));
	color: var(--kn-color-on-accent);
}

.kn-loadmore--js .kn-loadmore__btn {
	display: inline-flex;
}

.kn-loadmore--js .kn-pagination {
	display: none;
}

.kn-loadmore__btn[disabled] {
	opacity: 0.6;
	cursor: progress;
}

.kn-loadmore__status {
	margin: var(--kn-space-2) 0 0;
	font-size: var(--kn-font-size-sm);
	color: var(--kn-color-text-muted);
}

.kn-loadmore__status:empty {
	display: none;
}

.kn-loadmore--error .kn-loadmore__status {
	color: var(--kn-color-accent);
}

.kn-pagination ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--kn-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.kn-pagination .page-numbers {
	display: inline-block;
	padding: var(--kn-space-2) var(--kn-space-3);
	border: 1px solid var(--kn-color-border);
	border-radius: var(--kn-radius-sm);
	color: var(--kn-color-text);
}

.kn-pagination .current {
	border-color: var(--kn-color-accent);
	color: var(--kn-color-accent);
	font-weight: var(--kn-font-weight-bold);
}

/* ------------------------------------------------------------------ *
 * Footer & social
 * ------------------------------------------------------------------ */
.kn-footer {
	border-top: 1px solid var(--kn-color-border);
	background-color: var(--kn-color-surface);
}

.kn-footer__inner {
	padding-block: var(--kn-space-7);
}

.kn-footer__inner .kn-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--kn-space-4);
}

.kn-footer__brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--kn-space-2);
	text-align: center;
}

.kn-footer__logo {
	max-height: 48px;
	width: auto;
}

.kn-footer__text,
.kn-footer__copy {
	margin: 0;
	font-size: var(--kn-font-size-sm);
	color: var(--kn-footer-color, var(--kn-color-text-muted));
}

.kn-footer a {
	color: var(--kn-footer-link, var(--kn-color-link));
}

.kn-social {
	display: flex;
	gap: var(--kn-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.kn-social__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 1px solid var(--kn-color-border);
	border-radius: var(--kn-radius-circle);
	color: var(--kn-color-text);
}

.kn-social__link:hover {
	color: var(--kn-color-accent);
	border-color: var(--kn-color-accent);
}

/* ------------------------------------------------------------------ *
 * Dark-mode toggle
 * ------------------------------------------------------------------ */
.kn-dark-toggle__label {
	display: inline-flex;
	align-items: center;
	cursor: pointer;
}

.kn-dark-toggle__track {
	position: relative;
	display: inline-block;
	width: 40px;
	height: 22px;
	border: 1px solid var(--kn-color-border);
	border-radius: var(--kn-radius-pill);
	background: var(--kn-color-surface-2);
	transition: background var(--kn-t-fast), border-color var(--kn-t-fast);
}

.kn-dark-toggle__thumb {
	position: absolute;
	top: 2px;
	left: 2px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	border-radius: var(--kn-radius-circle);
	background: var(--kn-color-background);
	box-shadow: var(--kn-shadow-sm);
	transition: transform var(--kn-t-fast);
}

/* Mode icon on the knob: sun = light, moon = dark. */
.kn-dark-toggle__icon {
	display: inline-flex;
	width: 11px;
	height: 11px;
	line-height: 0;
	color: var(--kn-color-text);
}

.kn-dark-toggle__icon svg {
	width: 11px;
	height: 11px;
}

.kn-dark-toggle__icon--moon {
	display: none;
}

.kn-dark-toggle__input:checked + .kn-dark-toggle__label .kn-dark-toggle__icon--sun {
	display: none;
}

.kn-dark-toggle__input:checked + .kn-dark-toggle__label .kn-dark-toggle__icon--moon {
	display: inline-flex;
}

.kn-dark-toggle__input:checked + .kn-dark-toggle__label .kn-dark-toggle__track {
	background: var(--kn-color-accent);
	border-color: var(--kn-color-accent);
}

.kn-dark-toggle__input:checked + .kn-dark-toggle__label .kn-dark-toggle__thumb {
	transform: translateX(18px);
}

/* ------------------------------------------------------------------ *
 * Responsive steps
 * ------------------------------------------------------------------ */
@media (max-width: 980px) {
	.kn-header__search {
		flex: 1 1 100%;
		order: 3;
	}

	.kn-header__pagenav .kn-header__date {
		display: none;
	}

	/* slide mode (default): horizontal scroll strip — works without JS */
	.kn-menu {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.kn-menu a {
		padding: var(--kn-space-2) var(--kn-space-3);
		white-space: nowrap;
	}

	.kn-menu .sub-menu,
	.kn-menu .children {
		position: static;
		display: block;
		min-width: 0;
		padding: 0 0 var(--kn-space-2) var(--kn-space-4);
		border: 0;
		box-shadow: none;
	}

	.kn-menu .sub-menu .sub-menu,
	.kn-menu .children .children {
		padding-left: var(--kn-space-4);
	}

	/* search overlay (JS): toggle button + slide-down panel */
	html.kn-js .kn-search-toggle {
		display: inline-flex;
	}

	html.kn-js .kn-header__search {
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		flex: 0 0 auto;
		order: 0;
		padding: var(--kn-space-4) var(--kn-gutter);
		background: var(--kn-color-background);
		border-top: 1px solid var(--kn-color-border);
		box-shadow: var(--kn-shadow-md);
		z-index: var(--kn-z-dropdown);
		transform: translateY(-8px);
		opacity: 0;
		visibility: hidden;
		transition: opacity var(--kn-t-fast), transform var(--kn-t-fast), visibility 0s linear var(--kn-t-fast);
	}

	html.kn-js body.kn-search-open .kn-header__search {
		transform: translateY(0);
		opacity: 1;
		visibility: visible;
		transition: opacity var(--kn-t-fast), transform var(--kn-t-fast), visibility 0s;
	}
}

@media (max-width: 640px) {
	.kn-card__thumb img {
		width: 200px;
		height: 125px;
	}
}

@media (max-width: 533px) {
	.kn-card__thumb img {
		width: 160px;
		height: 100px;
	}

	.kn-card__title {
		font-size: var(--kn-font-size-lg);
	}
}

@media (max-width: 420px) {
	.kn-article__title {
		font-size: var(--kn-font-size-2xl);
	}

	.kn-404 {
		padding: var(--kn-space-7) 0;
	}
}

/* ------------------------------------------------------------------ *
 * Phase 12 — single post components (video / share / inline related /
 * post navigation / related grid / comments)
 * ------------------------------------------------------------------ */
.kn-video {
	margin: 0 0 var(--kn-space-5);
}

.kn-video__embed {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background: var(--kn-color-surface-2);
	border-radius: var(--kn-radius-md);
}

.kn-video__embed iframe,
.kn-video__embed embed,
.kn-video__embed video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.kn-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--kn-space-3);
	margin: var(--kn-space-5) 0;
	padding-top: var(--kn-space-4);
	border-top: 1px solid var(--kn-color-border);
}

.kn-share__label {
	font-size: var(--kn-font-size-sm);
	font-weight: var(--kn-font-weight-medium);
	color: var(--kn-color-text-muted);
}

.kn-share__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kn-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.kn-share__link,
.kn-share__copy {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid var(--kn-color-border);
	border-radius: var(--kn-radius-circle);
	background: var(--kn-color-surface);
	color: var(--kn-color-text);
	font-size: 16px;
	cursor: pointer;
	transition: color var(--kn-t-fast), border-color var(--kn-t-fast), background-color var(--kn-t-fast);
}

.kn-share__link:hover,
.kn-share__copy:hover,
.kn-share__copy--done {
	color: var(--kn-color-on-accent);
	background: var(--kn-color-accent);
	border-color: var(--kn-color-accent);
}

.kn-share__note {
	font-size: var(--kn-font-size-xs);
	color: var(--kn-color-accent);
}

.kn-inline-related {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--kn-space-3);
	margin: var(--kn-space-5) 0;
	padding: var(--kn-space-4);
	background: var(--kn-color-surface);
	border-left: 3px solid var(--kn-color-accent);
	border-radius: var(--kn-radius-sm);
}

.kn-inline-related__label {
	font-size: var(--kn-font-size-xs);
	font-weight: var(--kn-font-weight-bold);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--kn-color-accent);
}

.kn-inline-related__link {
	font-weight: var(--kn-font-weight-medium);
	color: var(--kn-color-text);
}

.kn-inline-related__link:hover {
	color: var(--kn-color-accent);
}

.kn-post-nav {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--kn-space-4);
	margin: var(--kn-space-5) 0;
}

.kn-post-nav__link {
	display: block;
	padding: var(--kn-space-4);
	border: 1px solid var(--kn-color-border);
	border-radius: var(--kn-radius-md);
	background: var(--kn-color-surface);
}

.kn-post-nav__link:hover {
	border-color: var(--kn-color-accent);
}

.kn-post-nav__link--next {
	text-align: right;
}

.kn-post-nav__label {
	display: block;
	font-size: var(--kn-font-size-xs);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--kn-color-text-muted);
}

.kn-post-nav__title {
	display: block;
	margin-top: 2px;
	font-weight: var(--kn-font-weight-medium);
	color: var(--kn-color-text);
}

.kn-related {
	margin: var(--kn-space-6) 0 0;
}

.kn-related__title {
	margin: 0 0 var(--kn-space-4);
	padding-left: var(--kn-space-3);
	border-left: 3px solid var(--kn-widget-accent, var(--kn-color-accent));
	font-size: var(--kn-font-size-xl);
}

.kn-related__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--kn-space-4);
}

/* Comments (Phase 12 additions; base list styles already exist above). */
.kn-comment__body {
	padding: var(--kn-space-4);
	border: 1px solid var(--kn-color-border);
	border-radius: var(--kn-radius-md);
	background: var(--kn-color-surface);
}

.kn-comment__head {
	display: flex;
	align-items: center;
	gap: var(--kn-space-3);
	margin-bottom: var(--kn-space-2);
}

.kn-comment__avatar img {
	border-radius: var(--kn-radius-circle);
	display: block;
}

.kn-comment__meta {
	display: flex;
	flex-direction: column;
	font-size: var(--kn-font-size-sm);
}

.kn-comment__author {
	font-weight: var(--kn-font-weight-medium);
}

.kn-comment__date {
	font-size: var(--kn-font-size-xs);
	color: var(--kn-color-text-muted);
}

.kn-comment__moderation {
	font-size: var(--kn-font-size-sm);
	color: var(--kn-color-secondary);
}

.kn-comment__text {
	font-size: var(--kn-font-size-base);
}

.kn-comment__reply {
	margin-top: var(--kn-space-2);
	font-size: var(--kn-font-size-sm);
}

.kn-comment__edit {
	margin-left: var(--kn-space-3);
	font-size: var(--kn-font-size-xs);
}

.kn-comments__pagination {
	margin-top: var(--kn-space-4);
}

.kn-comments__closed {
	font-size: var(--kn-font-size-sm);
	color: var(--kn-color-text-muted);
}

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

@media (max-width: 640px) {
	.kn-post-nav {
		grid-template-columns: minmax(0, 1fr);
	}

	.kn-related__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.kn-share {
		gap: var(--kn-space-2);
	}
}

/* ------------------------------------------------------------------ *
 * Reduced motion (accessibility improvement over the reference)
 * ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	.kn-nav,
	.kn-header__search,
	.kn-dark-toggle__thumb,
	.kn-dark-toggle__track {
		transition: none;
	}
}

/* ------------------------------------------------------------------ *
 * v1.1.0 (kept in v1.2.0) — single-row mobile header + brand color.
 * ------------------------------------------------------------------ */
/* Brand title follows the header text color (white on a colored header). */
.kn-header .kn-site-title a {
	color: var(--kn-header-color, var(--kn-color-text));
}

.kn-header .kn-site-title a:hover {
	opacity: 0.9;
}

@media (max-width: 980px) {
	/* Keep branding + action icons on a single row (JS search is an
	   overlay; the no-JS search row still wraps normally). */
	html.kn-js .kn-header__main-inner {
		flex-wrap: nowrap;
	}

	html.kn-js .kn-header__actions {
		flex: 0 0 auto;
	}

	.kn-menu {
		min-width: 0;
	}
}

@media (max-width: 640px) {
	.kn-header__main-inner {
		padding-block: var(--kn-space-4);
	}

	/* Phone header: drop the tagline so the brand row stays compact. */
	.kn-site-desc {
		display: none;
	}

	.kn-breadcrumb {
		padding-block: var(--kn-space-2);
	}

	.kn-breadcrumb [aria-current] {
		max-width: 22ch;
	}
}

/* ------------------------------------------------------------------ *
 * v1.1.0b — control readability: dark-toggle state, icon buttons,
 * trending label, touch targets.
 * ------------------------------------------------------------------ */
.kn-dark-toggle__track {
	background: rgba(17, 19, 24, 0.35);
	border-color: rgba(17, 19, 24, 0.35);
}

.kn-dark-toggle .kn-dark-toggle__label {
	padding: 7px 4px; /* ~44px touch target without resizing the track. */
}

.kn-nav-toggle {
	border-color: rgba(17, 19, 24, 0.32);
}

/* Inside the header, the search button follows the header text color
   (white on a colored header; default text/border otherwise). */
.kn-header .kn-search-toggle {
	color: var(--kn-header-color, var(--kn-color-text));
	border-color: var(--kn-header-color, var(--kn-color-border));
}

.kn-trending__label {
	background: rgba(255, 255, 255, 0.16);
	border-color: rgba(255, 255, 255, 0.28);
}

/* ------------------------------------------------------------------ *
 * Phase 21 (v1.2.0) — news-portal navigation:
 *   page navigation bar (blue, swipeable) below the header,
 *   hamburger inside the main header row,
 *   dedicated mobile drawer (X + brand + search + menu tree).
 * ------------------------------------------------------------------ */

/* --- Page navigation bar ------------------------------------------- */
.kn-header__pagenav {
	background: var(--kn-pagenav-bg, var(--kn-color-primary));
	color: #fff;
}

.kn-header__pagenav-inner {
	display: flex;
	align-items: center;
	gap: var(--kn-space-3);
}

.kn-pagenav-wrap {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	margin-left: calc(-1 * var(--kn-space-4)); /* first item text aligns with the container gutter */
}

.kn-pagenav {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.kn-pagenav__list {
	flex: 0 0 auto;
}

/* Second group (pages) separated from the categories group. */
.kn-pagenav__list--secondary {
	margin-left: var(--kn-space-3);
	border-left: 1px solid rgba(255, 255, 255, 0.28);
}

.kn-pagenav::-webkit-scrollbar {
	display: none;
}

.kn-pagenav__list {
	display: flex;
	flex-wrap: nowrap;
	margin: 0;
	padding: 0;
	list-style: none;
}

.kn-pagenav__list > li {
	position: relative;
	flex: 0 0 auto;
}

.kn-pagenav__list > li > a {
	display: inline-flex;
	align-items: center;
	min-height: 46px;
	padding: 0 var(--kn-space-3);
	color: rgba(255, 255, 255, 0.92);
	font-size: var(--kn-font-size-sm);
	font-weight: var(--kn-font-weight-bold);
	white-space: nowrap;
	text-decoration: none;
}

.kn-pagenav__list > li > a:hover {
	color: #fff;
	background: rgba(255, 255, 255, 0.09);
}

.kn-pagenav__list .current-menu-item > a,
.kn-pagenav__list .current_page_item > a,
.kn-pagenav__list .current-menu-ancestor > a,
.kn-pagenav__list .current_page_ancestor > a {
	color: #fff;
	background: rgba(255, 255, 255, 0.14);
	box-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.9);
}

/* Badge spans in menu titles (e.g. "Viral <span>HOT</span>"). */
.kn-pagenav__list .menu-item > a span {
	margin-left: var(--kn-space-1);
	padding: 1px 6px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.22);
	font-size: 0.68em;
	font-weight: var(--kn-font-weight-bold);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	vertical-align: 0.12em;
	color: #fff;
}

.kn-pagenav__fade {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 56px;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--kn-pagenav-bg, var(--kn-color-primary)));
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--kn-t-fast);
}

.kn-pagenav-wrap.kn-pagenav--scrollable:not(.kn-pagenav--at-end) .kn-pagenav__fade {
	opacity: 0.95;
}

.kn-header__pagenav .kn-header__date {
	flex: 0 0 auto;
	color: rgba(255, 255, 255, 0.85);
}

.kn-header__pagenav a:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -2px;
}

/* Desktop: hover / keyboard-focus dropdowns for parent items. */
@media (min-width: 981px) {
	/* The bar must NOT clip vertically on desktop — the dropdown lives
	   below the 46px row. Wrapping keeps long multi-menu bars inside the
	   container (v1.2.1: found at 1024px with categories + pages). */
	.kn-pagenav {
		overflow: visible;
		flex-wrap: wrap;
	}

	.kn-pagenav__list {
		flex-wrap: wrap;
	}

	.kn-pagenav__fade {
		display: none;
	}

	.kn-pagenav__list .sub-menu {
		position: absolute;
		top: 100%;
		left: 0;
		z-index: var(--kn-z-dropdown);
		min-width: 220px;
		margin: 0;
		padding: var(--kn-space-2) 0;
		list-style: none;
		background: var(--kn-color-background);
		border: 1px solid var(--kn-color-border);
		box-shadow: var(--kn-shadow-md);
		opacity: 0;
		visibility: hidden;
		transform: translateY(6px);
		transition: opacity var(--kn-t-fast), transform var(--kn-t-fast), visibility 0s linear var(--kn-t-fast);
	}

	.kn-pagenav__list li:hover > .sub-menu,
	.kn-pagenav__list li:focus-within > .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: none;
		transition: opacity var(--kn-t-fast), transform var(--kn-t-fast), visibility 0s;
	}

	.kn-pagenav__list .sub-menu a {
		display: block;
		padding: var(--kn-space-2) var(--kn-space-4);
		color: var(--kn-color-text);
		font-size: var(--kn-font-size-sm);
		white-space: nowrap;
		text-decoration: none;
	}

	.kn-pagenav__list .sub-menu a:hover,
	.kn-pagenav__list .sub-menu a:focus-visible {
		color: var(--kn-color-accent);
		background: var(--kn-color-surface-2, rgba(17, 19, 24, 0.04));
	}

	.kn-pagenav__list .sub-menu .current_page_item > a {
		color: var(--kn-color-accent);
		font-weight: var(--kn-font-weight-bold);
	}
}

/* Mobile: bar shows top-level items only; hierarchy lives in the drawer. */
@media (max-width: 980px) {
	.kn-pagenav__list .sub-menu {
		display: none;
	}

	html.kn-js body.kn-nav-dropdown .kn-nav-toggle {
		display: inline-flex;
	}

	.kn-header__pagenav--mobile-off {
		display: none;
	}

	/* Brand: single line — on phones/tablets the logo hugs the hamburger
	   (news-app pattern). The old centered placement suited the text
	   lockup; with a wide wordmark it looked off-centre. */
	html.kn-js .kn-header__main-inner {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) auto;
		align-items: center;
		column-gap: var(--kn-space-2);
	}

	html.kn-js .kn-nav-toggle {
		justify-self: start;
	}

	html.kn-js .kn-brand {
		justify-self: start;
		justify-content: flex-start;
		flex-wrap: nowrap;
		min-width: 0;
	}

	html.kn-js .kn-header__actions {
		justify-self: end;
	}
}

@media (max-width: 640px) {
	.kn-header__main-inner {
		padding-block: var(--kn-space-3);
	}

	.kn-site-title {
		font-size: 1.25rem;
	}
}

/* --- Mobile drawer -------------------------------------------------- */
.kn-drawer {
	position: fixed;
	inset: 0;
	z-index: calc(var(--kn-z-overlay, 1000) + 1);
	visibility: hidden;
	pointer-events: none;
}

html:not(.kn-js) .kn-drawer {
	display: none;
}

.kn-drawer__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(17, 19, 24, 0.55);
	opacity: 0;
	transition: opacity var(--kn-t-base);
}

.kn-drawer__panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	width: min(420px, 100%);
	max-width: 100%;
	background: var(--kn-color-background);
	color: var(--kn-color-text);
	box-shadow: var(--kn-shadow-lg);
	transform: translateX(102%);
	transition: transform var(--kn-t-base);
}

body.kn-drawer-open .kn-drawer {
	visibility: visible;
	pointer-events: auto;
}

body.kn-drawer-open .kn-drawer__backdrop {
	opacity: 1;
}

body.kn-drawer-open .kn-drawer__panel {
	transform: translateX(0);
}

.kn-drawer__top {
	display: flex;
	align-items: center;
	gap: var(--kn-space-1);
	padding: var(--kn-space-2) var(--kn-space-3);
	border-bottom: 1px solid var(--kn-color-border);
}

.kn-drawer__close,
.kn-drawer__searchbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: var(--kn-radius-circle);
	background: transparent;
	color: var(--kn-color-text);
	cursor: pointer;
}

.kn-drawer__close:hover,
.kn-drawer__searchbtn:hover {
	color: var(--kn-color-accent);
}

.kn-drawer__brand {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--kn-space-2);
	flex: 1 1 auto;
	min-width: 0;
	font-weight: var(--kn-font-weight-bold);
}

.kn-drawer__brand img {
	width: auto;
	max-height: 30px;
}

.kn-drawer__brand-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.kn-drawer__search {
	padding: var(--kn-space-3) var(--kn-space-4);
	border-bottom: 1px solid var(--kn-color-border);
}

.kn-drawer__search .kn-search-form {
	display: flex;
	gap: var(--kn-space-2);
	width: 100%;
}

.kn-drawer__search input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
}

.kn-drawer__search .kn-search-form__submit {
	flex: 0 0 auto;
}

.kn-drawer__nav {
	flex: 1 1 auto;
	overflow-y: auto;
	padding-bottom: var(--kn-space-6);
}

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

/* Second drawer group (pages) under the categories group. */
.kn-drawer__nav .kn-drawer__list--secondary {
	margin-top: var(--kn-space-2);
	border-top: 2px solid var(--kn-color-border);
}

.kn-drawer__nav li {
	position: relative;
}

.kn-drawer__nav .menu-item > a {
	display: flex;
	align-items: center;
	min-height: 48px;
	padding: var(--kn-space-2) var(--kn-space-6) var(--kn-space-2) var(--kn-space-4);
	color: var(--kn-color-text);
	text-decoration: none;
	border-bottom: 1px solid var(--kn-color-border);
}

.kn-drawer__nav .menu-item > a:hover,
.kn-drawer__nav .menu-item > a:focus-visible {
	color: var(--kn-color-accent);
}

.kn-drawer__nav .current-menu-item > a,
.kn-drawer__nav .current_page_item > a {
	color: var(--kn-color-accent);
	font-weight: var(--kn-font-weight-bold);
}

.kn-drawer__nav .menu-item > a span {
	margin-left: var(--kn-space-1);
	padding: 1px 6px;
	border-radius: 999px;
	background: var(--kn-color-accent);
	font-size: 0.68em;
	font-weight: var(--kn-font-weight-bold);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	vertical-align: 0.12em;
	color: #fff;
}

.kn-drawer__chevron {
	position: absolute;
	top: 2px;
	right: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 0;
	background: transparent;
	color: var(--kn-color-text-muted);
	cursor: pointer;
}

.kn-drawer__chevron:hover {
	color: var(--kn-color-accent);
}

.kn-drawer__chevron svg {
	transition: transform var(--kn-t-fast);
}

.kn-drawer__nav .kn-submenu-open > .kn-drawer__chevron svg {
	transform: rotate(180deg);
}

.kn-drawer__nav .kn-drawer__submenu {
	max-height: 0;
	overflow: hidden;
	background: var(--kn-color-surface-2, rgba(17, 19, 24, 0.04));
	transition: max-height var(--kn-t-base);
}

.kn-drawer__nav .kn-submenu-open > .kn-drawer__submenu {
	max-height: 1200px;
}

.kn-drawer__nav .kn-drawer__submenu .menu-item > a {
	padding-left: var(--kn-space-6);
}

.kn-drawer__nav .kn-drawer__submenu .kn-drawer__submenu .menu-item > a {
	padding-left: var(--kn-space-7);
}

.kn-drawer a:focus-visible,
.kn-drawer button:focus-visible {
	outline: 2px solid var(--kn-color-accent);
	outline-offset: -2px;
}

@media (min-width: 981px) {
	.kn-drawer {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.kn-drawer__panel,
	.kn-drawer__backdrop,
	.kn-drawer__nav .kn-drawer__submenu {
		transition: none;
	}
}

/* ------------------------------------------------------------------ *
 * v1.2.3 — header polish
 *   1) The dark-mode checkbox is a state holder for CSS/AT only. The
 *      global .screen-reader-text:focus reveal (meant for skip links)
 *      used to paint it as a stray box when the switch was clicked —
 *      keep it clipped, always; show keyboard focus on the switch.
 *   2) Social icons at the right corner of the trending strip,
 *      desktop/tablet only (phones keep the footer icons).
 *   3) Logo-only brand layout for a wide wordmark (title + tagline
 *      hidden) — class added server-side by main-header.php.
 * ------------------------------------------------------------------ */

/* (1) Never un-clip the dark-mode checkbox, even when focused. */
.kn-dark-toggle__input.screen-reader-text:focus {
	position: absolute;
	top: auto;
	left: auto;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	background: transparent;
	border: 0;
	box-shadow: none;
	z-index: auto;
}

/* Keyboard focus is shown on the switch itself instead. */
.kn-dark-toggle__input:focus-visible + .kn-dark-toggle__label .kn-dark-toggle__track {
	outline: 2px solid rgba(255, 255, 255, 0.95);
	outline-offset: 2px;
	box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.28);
}

/* (2) Social icons — trending strip, right corner. */
.kn-trending__social {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}

.kn-trending__social .kn-social {
	gap: 6px;
	margin-left: auto;
}

.kn-trending__social .kn-social__link {
	width: 28px;
	height: 28px;
	border-color: rgba(255, 255, 255, 0.28);
	color: rgba(255, 255, 255, 0.88);
}

.kn-trending__social .kn-social__link:hover,
.kn-trending__social .kn-social__link:focus-visible {
	color: #fff;
	border-color: #fff;
}

/* Phones: the footer carries the social icons; keep the strip clean. */
@media (max-width: 640px) {
	.kn-trending__social {
		display: none;
	}
}

/* (3) Logo-only brand: the wordmark replaces the title + tagline lockup. */
.kn-brand--logo-only .kn-site-title,
.kn-brand--logo-only .kn-site-desc {
	display: none;
}

/* ------------------------------------------------------------------ *
 * v1.4.1 — drawer polish
 *   · the drawer brand follows the header brand mode (a wide wordmark
 *     is shown alone — no repeated site name),
 *   · labelled groups (“Categories” / “Pages”) with a clear divider,
 *   · social icons pinned at the panel bottom.
 * ------------------------------------------------------------------ */

/* Group labels inside the drawer nav. */
.kn-drawer__group-label {
	margin: var(--kn-space-4) var(--kn-space-4) var(--kn-space-2);
	font-size: var(--kn-font-size-xs);
	font-weight: var(--kn-font-weight-bold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--kn-color-text-muted);
}

/* Second group: divider + extra breathing room above its label. */
.kn-drawer__group-label--separated {
	margin-top: var(--kn-space-5);
	padding-top: var(--kn-space-5);
	border-top: 1px solid var(--kn-color-border);
}

/* The label now carries the separation — drop the old list border. */
.kn-drawer__nav .kn-drawer__list--secondary {
	margin-top: 0;
	border-top: 0;
}

/* Social icons pinned at the bottom of the drawer panel. */
.kn-drawer__social {
	flex: 0 0 auto;
	display: flex;
	justify-content: center;
	padding: var(--kn-space-4);
	border-top: 1px solid var(--kn-color-border);
}

.kn-drawer__social .kn-social {
	gap: var(--kn-space-3);
}

.kn-drawer__social .kn-social__link {
	width: 40px;
	height: 40px;
}

/* ------------------------------------------------------------------ *
 * v1.3.0 — breaking news ticker (below the header)
 *   White strip: “Breaking News” label + the latest post titles as a
 *   continuous marquee. The track duplicates the list once for a
 *   seamless translateX(-50%) loop; JS (breaking.js) derives the
 *   duration from the measured width and the configured speed.
 *   Reduced motion → static, manually scrollable list.
 * ------------------------------------------------------------------ */

.kn-breaking {
	margin-top: var(--kn-space-2);
	background: var(--kn-color-surface, #fff);
	border-top: 1px solid var(--kn-color-border);
	border-bottom: 1px solid var(--kn-color-border);
}

.kn-breaking__inner {
	display: flex;
	align-items: center;
	gap: var(--kn-space-3);
	padding-block: var(--kn-space-2);
}

.kn-breaking__label {
	flex: 0 0 auto;
	padding-right: var(--kn-space-3);
	border-right: 1px solid var(--kn-color-border);
	font-size: var(--kn-font-size-xs);
	font-weight: var(--kn-font-weight-bold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--kn-breaking-color, #d92d20);
	white-space: nowrap;
}

.kn-breaking__viewport {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
}

.kn-breaking__track {
	display: flex;
	width: max-content;
	animation: kn-breaking-marquee var(--kn-breaking-duration, 40s) linear infinite;
	will-change: transform;
}

/* Pause while the reader hovers or tabs into the ticker. */
.kn-breaking__viewport:hover .kn-breaking__track,
.kn-breaking__viewport:focus-within .kn-breaking__track {
	animation-play-state: paused;
}

.kn-breaking__list {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.kn-breaking__item {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
}

.kn-breaking__item a {
	color: var(--kn-color-text);
	font-size: var(--kn-font-size-sm);
	font-weight: 600;
	text-decoration: none;
}

.kn-breaking__item a:hover,
.kn-breaking__item a:focus-visible {
	color: var(--kn-color-primary);
}

/* Clear boundary between one title and the next. */
.kn-breaking__sep {
	margin: 0 var(--kn-space-4);
	font-size: 0.85em;
	color: var(--kn-breaking-color, #d92d20);
}

@keyframes kn-breaking-marquee {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.kn-breaking__track {
		animation: none;
	}

	.kn-breaking__viewport {
		overflow-x: auto;
	}

	.kn-breaking__list--clone {
		display: none;
	}
}

@media (max-width: 640px) {
	.kn-breaking__item a {
		font-size: var(--kn-font-size-xs);
	}

	.kn-breaking__sep {
		margin: 0 var(--kn-space-3);
	}
}