/**
 * NovaSpark Interface Primitives
 *
 * Forms, buttons, comment thread, pagination, post navigation, breadcrumbs
 * and page headers. Tokens come from variables.css.
 *
 * @package NovaSpark
 */

/* ==========================================================================
   1. Form Controls
   ========================================================================== */
.ns-field {
	display: flex;
	flex-direction: column;
	gap: var(--ns-space-2);
	margin-block-end: var(--ns-space-5);
}

label,
.ns-label {
	display: inline-block;
	font-size: var(--ns-text-sm);
	font-weight: 600;
	color: var(--ns-text);
}

.ns-field-hint {
	font-size: var(--ns-text-xs);
	color: var(--ns-text-3);
}

.required,
.ns-required {
	color: var(--ns-danger);
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="time"],
textarea,
select {
	width: 100%;
	max-width: 100%;
	font-family: inherit;
	font-size: var(--ns-text-base);
	line-height: 1.5;
	color: var(--ns-text);
	background-color: var(--ns-surface);
	border: 1px solid var(--ns-border);
	border-radius: var(--ns-radius);
	padding: var(--ns-space-3) var(--ns-space-4);
	transition: border-color var(--ns-duration) var(--ns-ease), box-shadow var(--ns-duration) var(--ns-ease);
	appearance: none;
}

textarea {
	min-height: 8rem;
	resize: vertical;
}

/* Native arrow is removed by appearance:none — draw our own, currentColor so
   it follows the theme without a second asset. */
select {
	padding-inline-end: var(--ns-space-10);
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
	                  linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	cursor: pointer;
}

select[multiple] {
	background-image: none;
	padding-inline-end: var(--ns-space-4);
}

:is(input, textarea, select):focus,
:is(input, textarea, select):focus-visible {
	outline: none;
	border-color: var(--ns-focus-ring);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--ns-focus-ring) 20%, transparent);
}

:is(input, textarea, select):disabled {
	background-color: var(--ns-bg-3);
	color: var(--ns-text-4);
	cursor: not-allowed;
}

:is(input, textarea):user-invalid {
	border-color: var(--ns-danger);
}

:is(input, textarea):user-invalid:focus {
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--ns-danger) 20%, transparent);
}

::placeholder {
	color: var(--ns-text-4);
	opacity: 1;
}

/* Checkbox & radio */
input[type="checkbox"],
input[type="radio"] {
	appearance: none;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	margin: 0;
	border: 1px solid var(--ns-border-2);
	background-color: var(--ns-surface);
	cursor: pointer;
	display: inline-grid;
	place-content: center;
	transition: background-color var(--ns-duration) var(--ns-ease), border-color var(--ns-duration) var(--ns-ease);
}

input[type="checkbox"] { border-radius: var(--ns-radius-sm); }
input[type="radio"]    { border-radius: var(--ns-radius-full); }

input[type="checkbox"]::before {
	content: "";
	width: 10px;
	height: 10px;
	transform: scale(0);
	transition: transform var(--ns-duration) var(--ns-ease-spring);
	box-shadow: inset 1em 1em #ffffff;
	clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

input[type="radio"]::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: var(--ns-radius-full);
	transform: scale(0);
	transition: transform var(--ns-duration) var(--ns-ease-spring);
	box-shadow: inset 1em 1em #ffffff;
}

:is(input[type="checkbox"], input[type="radio"]):checked {
	background-color: var(--ns-accent);
	border-color: var(--ns-accent);
}

:is(input[type="checkbox"], input[type="radio"]):checked::before {
	transform: scale(1);
}

:is(input[type="checkbox"], input[type="radio"]):focus-visible {
	outline: 2px solid var(--ns-focus-ring);
	outline-offset: 2px;
}

/* Checkbox rows read as one line, not a stacked field. */
.comment-form-cookies-consent,
.ns-checkbox-row {
	display: flex;
	align-items: center;
	gap: var(--ns-space-3);
}

.comment-form-cookies-consent label,
.ns-checkbox-row label {
	font-weight: 400;
	font-size: var(--ns-text-sm);
	color: var(--ns-text-2);
	margin: 0;
}

/* ==========================================================================
   2. Buttons
   ========================================================================== */

/*
 * Touch targets are applied to real controls only. A blanket
 * `button { min-height: 44px }` deformed icon buttons and inline-block pills,
 * so the sizing lives on the button classes instead.
 */
/*
 * Round/icon-shaped buttons must opt out: the padding and min-height below
 * would otherwise widen them. The back-to-top button was rendering 50x44
 * instead of a 44px circle because it matched this rule.
 */
.ns-btn,
button:not(.ns-icon-btn):not(.ns-toc-toggle):not(.ns-back-to-top),
input[type="submit"],
input[type="button"],
input[type="reset"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ns-space-2);
	min-height: 44px;
	font-family: inherit;
	font-size: var(--ns-text-sm);
	font-weight: 600;
	line-height: 1.2;
	padding: var(--ns-space-3) var(--ns-space-6);
	border-radius: var(--ns-radius);
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--ns-duration) var(--ns-ease),
	            border-color var(--ns-duration) var(--ns-ease),
	            color var(--ns-duration) var(--ns-ease),
	            transform var(--ns-duration) var(--ns-ease);
}

.ns-btn:active,
input[type="submit"]:active {
	transform: translateY(1px);
}

.ns-btn-primary,
input[type="submit"] {
	background-color: var(--ns-accent);
	border-color: var(--ns-accent);
	color: #ffffff;
}

.ns-btn-primary:hover,
input[type="submit"]:hover {
	background-color: var(--ns-accent-dark);
	border-color: var(--ns-accent-dark);
	color: #ffffff;
}

.ns-btn-secondary {
	background-color: var(--ns-surface);
	border-color: var(--ns-border-2);
	color: var(--ns-text);
}

.ns-btn-secondary:hover {
	border-color: var(--ns-text);
	color: var(--ns-text);
}

.ns-btn-ghost {
	background-color: transparent;
	border-color: transparent;
	color: var(--ns-text-2);
}

.ns-btn-ghost:hover {
	background-color: var(--ns-bg-3);
	color: var(--ns-text);
}

.ns-btn-danger {
	background-color: var(--ns-danger);
	border-color: var(--ns-danger);
	color: #ffffff;
}

.ns-btn-sm {
	min-height: 36px;
	padding: var(--ns-space-2) var(--ns-space-4);
	font-size: var(--ns-text-xs);
}

.ns-btn-lg {
	min-height: 52px;
	padding: var(--ns-space-4) var(--ns-space-8);
	font-size: var(--ns-text-base);
}

.ns-btn:disabled,
.ns-btn.is-disabled,
button:disabled,
input[type="submit"]:disabled {
	opacity: 0.55;
	cursor: not-allowed;
	transform: none;
}

.ns-btn.is-loading {
	pointer-events: none;
	position: relative;
	color: transparent;
}

.ns-btn.is-loading::after {
	content: "";
	position: absolute;
	width: 16px;
	height: 16px;
	border: 2px solid currentColor;
	border-block-start-color: transparent;
	border-radius: var(--ns-radius-full);
	color: #ffffff;
	animation: ns-spin 600ms linear infinite;
}

@keyframes ns-spin {
	to { transform: rotate(360deg); }
}

/* Icon buttons opt out of the 44px text-button box but keep a 40px hit area. */
.ns-icon-btn {
	min-height: 0;
	width: 40px;
	height: 40px;
	padding: 0;
}

/* ==========================================================================
   3. Category / filter pills
   ========================================================================== */

/*
 * inline-flex, not inline-block: min-height cannot vertically centre content
 * on an inline-block box, which left every pill label stuck to its top edge.
 */
.ns-cat-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 36px;
	padding: 6px 16px;
}

/* ==========================================================================
   4. Comments
   ========================================================================== */
.comments-area {
	margin-block-start: var(--ns-space-12);
	padding-block-start: var(--ns-space-8);
	border-block-start: 1px solid var(--ns-border);
}

.comments-title,
.comment-reply-title {
	font-size: var(--ns-text-2xl);
	margin-block-end: var(--ns-space-6);
}

.comments-title span {
	color: var(--ns-text-3);
	font-weight: 400;
}

.comment-list {
	list-style: none;
	padding: 0;
	margin-block: var(--ns-space-8);
}

.comment-list li.comment,
.comment-list li.pingback,
.comment-list li.trackback {
	list-style: none;
}

.comment-body {
	position: relative;
	padding: var(--ns-space-5) var(--ns-space-6);
	background-color: var(--ns-bg-2);
	border: 1px solid var(--ns-border);
	border-radius: var(--ns-radius-lg);
	margin-block-end: var(--ns-space-4);
}

/* Nested replies indent and get a connector rule back to the parent. */
.comment-list .children {
	list-style: none;
	margin: 0 0 0 var(--ns-space-6);
	padding-inline-start: var(--ns-space-6);
	border-inline-start: 1px solid var(--ns-border);
}

@media (max-width: 640px) {
	.comment-list .children {
		margin-inline-start: var(--ns-space-2);
		padding-inline-start: var(--ns-space-3);
	}

	.comment-body {
		padding: var(--ns-space-4);
	}
}

.comment-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--ns-space-3);
	margin-block-end: var(--ns-space-3);
}

.comment-author {
	display: flex;
	align-items: center;
	gap: var(--ns-space-3);
	font-size: var(--ns-text-sm);
	font-weight: 600;
	color: var(--ns-text);
}

.comment-author .avatar {
	width: 40px;
	height: 40px;
	border-radius: var(--ns-radius-full);
	border: 1px solid var(--ns-border);
	flex-shrink: 0;
}

.comment-author .says {
	display: none;
}

.comment-metadata {
	font-size: var(--ns-text-xs);
	font-family: var(--ns-font-mono);
	color: var(--ns-text-4);
}

.comment-metadata a {
	color: inherit;
	text-decoration: none;
}

.comment-metadata a:hover {
	color: var(--ns-accent);
}

.comment-list .bypostauthor > .comment-body {
	border-color: var(--ns-accent);
}

.comment-list .bypostauthor > .comment-body .comment-author::after {
	content: "Author";
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 2px 8px;
	border-radius: var(--ns-radius-full);
	background-color: var(--ns-accent-light);
	color: var(--ns-accent);
}

.comment-content {
	color: var(--ns-text-2);
	font-size: var(--ns-text-base);
	line-height: 1.7;
}

.comment-content > *:last-child {
	margin-block-end: 0;
}

.comment-content a {
	color: var(--ns-accent);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.comment-awaiting-moderation {
	display: inline-block;
	margin-block-start: var(--ns-space-2);
	font-size: var(--ns-text-xs);
	font-style: italic;
	color: var(--ns-warning);
}

.reply {
	margin-block-start: var(--ns-space-3);
}

.comment-reply-link {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: 0 var(--ns-space-4);
	border: 1px solid var(--ns-border);
	border-radius: var(--ns-radius-full);
	font-size: var(--ns-text-xs);
	font-weight: 600;
	color: var(--ns-text-2);
	text-decoration: none;
	transition: border-color var(--ns-duration) var(--ns-ease), color var(--ns-duration) var(--ns-ease);
}

.comment-reply-link:hover {
	border-color: var(--ns-accent);
	color: var(--ns-accent);
}

/* Comment form */
.comment-respond {
	margin-block-start: var(--ns-space-10);
	padding: var(--ns-space-8);
	background-color: var(--ns-bg-2);
	border: 1px solid var(--ns-border);
	border-radius: var(--ns-radius-lg);
}

.comment-respond .comment-reply-title {
	font-size: var(--ns-text-xl);
	margin-block-end: var(--ns-space-2);
}

.comment-respond .comment-reply-title small {
	display: inline-block;
	margin-inline-start: var(--ns-space-3);
	font-size: var(--ns-text-sm);
	font-weight: 400;
}

.comment-notes,
.logged-in-as {
	font-size: var(--ns-text-sm);
	color: var(--ns-text-3);
	margin-block-end: var(--ns-space-6);
}

.comment-form p {
	margin-block-end: var(--ns-space-5);
}

.comment-form label {
	display: block;
	margin-block-end: var(--ns-space-2);
}

/* Author / email / url sit on one row from tablet up. */
@media (min-width: 768px) {
	.comment-form {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 0 var(--ns-space-4);
	}

	.comment-form > :is(.comment-notes, .logged-in-as, .comment-form-comment,
	                    .comment-form-cookies-consent, .form-submit) {
		grid-column: 1 / -1;
	}
}

.form-submit {
	margin-block-end: 0;
}

.no-comments {
	font-size: var(--ns-text-sm);
	color: var(--ns-text-3);
	font-style: italic;
}

@media (max-width: 640px) {
	.comment-respond {
		padding: var(--ns-space-5);
	}
}

/* ==========================================================================
   5. Pagination & Post Navigation
   ========================================================================== */
.ns-pagination,
.navigation.pagination {
	margin-block-start: var(--ns-space-12);
}

.navigation.pagination .nav-links,
.ns-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--ns-space-2);
}

.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding-inline: var(--ns-space-3);
	border: 1px solid var(--ns-border);
	border-radius: var(--ns-radius);
	font-size: var(--ns-text-sm);
	font-weight: 600;
	color: var(--ns-text-2);
	text-decoration: none;
	transition: border-color var(--ns-duration) var(--ns-ease), color var(--ns-duration) var(--ns-ease);
}

a.page-numbers:hover {
	border-color: var(--ns-accent);
	color: var(--ns-accent);
}

.page-numbers.current {
	background-color: var(--ns-accent);
	border-color: var(--ns-accent);
	color: #ffffff;
}

.page-numbers.dots {
	border-color: transparent;
	color: var(--ns-text-4);
}

/* Prev / next post navigation as a two-up card pair. */
.post-navigation,
.posts-navigation,
.comment-navigation {
	margin-block-start: var(--ns-space-12);
}

.post-navigation .nav-links,
.posts-navigation .nav-links {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ns-space-4);
}

@media (min-width: 768px) {
	.post-navigation .nav-links,
	.posts-navigation .nav-links {
		grid-template-columns: 1fr 1fr;
	}
}

.post-navigation .nav-links > div,
.posts-navigation .nav-links > div {
	display: flex;
}

.post-navigation .nav-links a,
.posts-navigation .nav-links a {
	display: flex;
	flex-direction: column;
	gap: var(--ns-space-2);
	width: 100%;
	padding: var(--ns-space-5) var(--ns-space-6);
	background-color: var(--ns-bg-2);
	border: 1px solid var(--ns-border);
	border-radius: var(--ns-radius-lg);
	text-decoration: none;
	transition: border-color var(--ns-duration) var(--ns-ease), transform var(--ns-duration) var(--ns-ease);
}

.post-navigation .nav-links a:hover,
.posts-navigation .nav-links a:hover {
	border-color: var(--ns-accent);
	transform: translateY(var(--ns-card-lift));
}

.post-navigation .nav-next a,
.posts-navigation .nav-next a {
	text-align: end;
}

.nav-subtitle {
	font-size: var(--ns-text-xs);
	font-family: var(--ns-font-mono);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ns-text-4);
}

.nav-title {
	font-size: var(--ns-text-base);
	font-weight: 700;
	line-height: 1.4;
	color: var(--ns-text);
}

/* ==========================================================================
   6. Breadcrumbs, page headers, archive descriptions
   ========================================================================== */
.ns-breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ns-space-2);
	margin-block-end: var(--ns-space-6);
	font-size: var(--ns-text-xs);
	color: var(--ns-text-3);
}

.ns-breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ns-space-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.ns-breadcrumbs__list li {
	display: flex;
	align-items: center;
	gap: var(--ns-space-2);
	list-style: none;
}

.ns-breadcrumbs a {
	color: var(--ns-text-3);
	text-decoration: none;
	transition: color var(--ns-duration) var(--ns-ease);
}

.ns-breadcrumbs .current {
	color: var(--ns-text);
	font-weight: 600;
}

.ns-breadcrumbs a:hover {
	color: var(--ns-accent);
}

.ns-breadcrumbs .ns-breadcrumb-sep {
	color: var(--ns-text-4);
}

.ns-breadcrumbs [aria-current="page"] {
	color: var(--ns-text);
	font-weight: 600;
}

.ns-page-header {
	margin-block-end: var(--ns-space-10);
	padding-block-end: var(--ns-space-6);
	border-block-end: 1px solid var(--ns-border);
}

.ns-page-title,
.ns-page-header .page-title {
	font-size: var(--ns-h1-size);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.02em;
	margin-block-end: var(--ns-space-3);
	text-wrap: balance;
}

.ns-archive-description,
.archive-description {
	max-width: var(--ns-prose-width);
	font-size: var(--ns-text-lg);
	line-height: 1.6;
	color: var(--ns-text-3);
}

.ns-primary-content {
	min-width: 0; /* lets grid children shrink instead of overflowing */
}

.ns-posts-grid {
	margin-block-start: var(--ns-space-8);
}

/* ==========================================================================
   7. Search form
   ========================================================================== */
.search-form {
	display: flex;
	gap: var(--ns-space-3);
}

.search-form label {
	flex: 1;
	margin: 0;
}

.search-form .search-submit {
	flex-shrink: 0;
}

/* The overlay search sits on a dimmed backdrop and needs its own contrast. */
.ns-search-overlay .search-form input[type="search"] {
	font-size: var(--ns-text-lg);
	padding: var(--ns-space-4) var(--ns-space-6);
}

/* Live search results ------------------------------------------------------ */
.ns-live-results {
	margin-top: var(--ns-space-3);
	max-height: min(60vh, 480px);
	overflow-y: auto;
	overscroll-behavior: contain;
	background-color: var(--ns-surface);
	border: 1px solid var(--ns-border);
	border-radius: var(--ns-radius-lg);
	box-shadow: var(--ns-shadow-lg);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity var(--ns-duration) var(--ns-ease),
	            transform var(--ns-duration) var(--ns-ease),
	            visibility 0s linear var(--ns-duration);
}

.ns-live-results.is-active {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition-delay: 0s;
}

.ns-live-results__list {
	list-style: none;
	margin: 0;
	padding: var(--ns-space-2);
}

.ns-live-result a {
	display: flex;
	align-items: center;
	gap: var(--ns-space-3);
	padding: var(--ns-space-2) var(--ns-space-3);
	border-radius: var(--ns-radius);
	text-decoration: none;
	color: var(--ns-text);
	transition: background-color var(--ns-duration) var(--ns-ease);
}

.ns-live-result a:hover,
.ns-live-result a:focus-visible {
	background-color: var(--ns-bg-3);
}

.ns-live-result__thumb img {
	width: 44px;
	height: 44px;
	object-fit: cover;
	border-radius: var(--ns-radius-sm);
	display: block;
}

.ns-live-result__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.ns-live-result__title {
	font-size: var(--ns-text-sm);
	font-weight: 600;
	line-height: 1.35;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
}

.ns-live-result__meta {
	font-size: var(--ns-text-xs);
	color: var(--ns-text-3);
}

.ns-live-results__all {
	display: block;
	padding: var(--ns-space-3);
	border-top: 1px solid var(--ns-border);
	text-align: center;
	font-size: var(--ns-text-sm);
	font-weight: 600;
	color: var(--ns-accent);
	text-decoration: none;
}

.ns-live-results__all:hover {
	background-color: var(--ns-bg-3);
}

.ns-live-results__empty {
	padding: var(--ns-space-6);
	margin: 0;
	text-align: center;
	font-size: var(--ns-text-sm);
	color: var(--ns-text-3);
}

.ns-live-results[aria-busy="true"]::after {
	content: "";
	display: block;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--ns-accent), transparent);
	animation: ns-live-loading 900ms linear infinite;
}

@keyframes ns-live-loading {
	0%   { opacity: 0.3; }
	50%  { opacity: 1; }
	100% { opacity: 0.3; }
}

/* ==========================================================================
   Sticky sidebar
   ========================================================================== */
@media (min-width: 1024px) {
	.ns-sidebar-inner,
	.ns-sidebar > .ns-sidebar-sticky {
		position: sticky;
		top: calc(var(--ns-header-height) + var(--ns-space-6));
	}
}

/* ==========================================================================
   8. Footer social row (rendered from the Social Links settings tab)
   ========================================================================== */
.ns-footer-social {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ns-space-2);
}

.ns-footer-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid var(--ns-border);
	border-radius: var(--ns-radius-full);
	color: var(--ns-text-3);
	transition: border-color var(--ns-duration) var(--ns-ease),
	            color var(--ns-duration) var(--ns-ease),
	            transform var(--ns-duration) var(--ns-ease);
}

.ns-footer-social a:hover {
	border-color: var(--ns-accent);
	color: var(--ns-accent);
	transform: translateY(-2px);
}

.ns-footer-social svg {
	width: 16px;
	height: 16px;
}

/* ==========================================================================
   8b. Load-more button states (novaspark-ajax)
   ========================================================================== */
.ns-load-more-wrap {
	display: flex;
	justify-content: center;
	margin-block-start: var(--ns-space-10);
}

.ns-load-more-wrap[hidden] {
	display: none;
}

/*
 * No rule is needed to hide numbered links under Ajax pagination — they are
 * emitted inside <noscript> instead, so only one control ever reaches the DOM.
 */

.ns-load-more-btn .ns-btn-spinner {
	display: inline-flex;
	align-items: center;
	gap: var(--ns-space-2);
}

.ns-load-more-btn.is-loading .ns-btn-text {
	display: none;
}

.ns-load-more-btn:not(.is-loading) .ns-btn-spinner {
	display: none !important;
}

/* ==========================================================================
   8c. Footer structure
   ========================================================================== */
.ns-footer-col {
	min-width: 0;
}

.ns-footer-navigation .ns-footer-menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ns-space-5);
	list-style: none;
	margin: 0;
	padding: 0;
}

.ns-footer-navigation .ns-footer-menu li {
	list-style: none;
}

.ns-footer-navigation a {
	font-size: var(--ns-text-sm);
	color: var(--ns-text-3);
	text-decoration: none;
	transition: color var(--ns-duration) var(--ns-ease);
}

.ns-footer-navigation a:hover {
	color: var(--ns-accent);
}

/* ==========================================================================
   9. Panels — search results, empty states, 404
   ========================================================================== */
.ns-search-result-item,
.no-results.not-found {
	padding: var(--ns-space-6);
	background-color: var(--ns-bg-2);
	border: 1px solid var(--ns-border);
	border-radius: var(--ns-radius-lg);
	margin-bottom: var(--ns-space-4);
}

.ns-search-result-item .entry-title {
	font-size: var(--ns-text-lg);
	margin-bottom: var(--ns-space-2);
}

.ns-search-result-item .entry-title a {
	color: var(--ns-text);
	text-decoration: none;
}

.ns-search-result-item .entry-title a:hover {
	color: var(--ns-accent);
}

.ns-search-result-item .entry-meta {
	font-size: var(--ns-text-xs);
	color: var(--ns-text-3);
	margin-bottom: var(--ns-space-2);
}

.ns-search-result-item .entry-summary {
	font-size: var(--ns-text-sm);
	color: var(--ns-text-2);
}

.no-results.not-found {
	padding: var(--ns-space-8);
	margin-bottom: 0;
}

.error-404 {
	padding-block: var(--ns-space-16);
	text-align: center;
}

.ns-404__code {
	font-size: clamp(4rem, 14vw, 7rem);
	line-height: 1;
	color: var(--ns-accent);
	margin-bottom: var(--ns-space-4);
}

.ns-404__body {
	max-width: 500px;
	margin-inline: auto;
	margin-top: var(--ns-space-6);
}

.ns-404__search {
	margin-block: var(--ns-space-6);
}

.ns-404__widget {
	text-align: start;
	margin-top: var(--ns-space-8);
}

/* ==========================================================================
   10. Page template layouts
   ========================================================================== */
.ns-compact-reading-wrap {
	max-width: 760px;
	margin-inline: auto;
	padding-block: var(--ns-space-12);
}

.ns-compact-reading-wrap .entry-header {
	text-align: center;
	margin-bottom: var(--ns-space-8);
}

.ns-compact-reading-wrap .entry-title {
	font-family: var(--ns-font-serif);
	font-weight: 700;
	margin-bottom: var(--ns-space-4);
}

.ns-compact-reading-wrap .post-thumbnail {
	margin-top: var(--ns-space-6);
}

.ns-landing-main {
	min-height: 100dvh;
	padding: var(--ns-space-8);
}

.ns-no-sidebar {
	max-width: var(--ns-container);
}

.post-thumbnail {
	margin-block: var(--ns-space-6);
}

.post-thumbnail img {
	width: 100%;
	border-radius: var(--ns-radius-lg);
}

/* Left-sidebar layout: sidebar first on desktop, content first on mobile. */
@media (min-width: 1024px) {
	.ns-sidebar-left {
		display: grid;
		grid-template-columns: var(--ns-sidebar-width) 1fr;
		gap: var(--ns-gap);
	}
}

/* ==========================================================================
   11. Header CTA button (rendered from the Header settings tab)
   ========================================================================== */
.ns-header-cta {
	min-height: 36px;
	padding: var(--ns-space-2) var(--ns-space-5);
	font-size: var(--ns-text-sm);
}

@media (max-width: 768px) {
	.ns-header-cta {
		display: none;
	}
}