/**
 * NovaSpark Widget Styles
 *
 * The sidebar previously had 12 lines of CSS — a card shell and a title rule.
 * Every core widget (categories, recent posts, tag cloud, calendar, archives,
 * RSS, comments, nav menu, block widgets) rendered at browser defaults inside
 * it. This is the full treatment.
 *
 * @package NovaSpark
 */

/* ==========================================================================
   1. Widget shell
   ========================================================================== */
.widget {
	background-color: var(--ns-bg-2);
	border: 1px solid var(--ns-border);
	border-radius: var(--ns-radius-lg);
	padding: var(--ns-space-6);
	margin-bottom: var(--ns-space-6);
	font-size: var(--ns-text-sm);
	transition: border-color var(--ns-duration) var(--ns-ease);
}

.widget:last-child {
	margin-bottom: 0;
}

.widget:hover {
	border-color: var(--ns-border-2);
}

.widget-title,
.widget .wp-block-heading {
	display: flex;
	align-items: center;
	gap: var(--ns-space-3);
	font-size: var(--ns-text-base);
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--ns-text);
	margin-bottom: var(--ns-space-4);
	padding-bottom: var(--ns-space-3);
	border-bottom: 1px solid var(--ns-border);
}

/*
 * Small accent tick before the title — replaces the old full-width 2px rule.
 * Block widgets render a .wp-block-heading rather than .widget-title, so both
 * shapes need it or half the sidebar loses the accent.
 */
.widget-title::before,
.widget .wp-block-heading::before {
	content: "";
	width: 3px;
	height: 1em;
	flex-shrink: 0;
	border-radius: var(--ns-radius-full);
	background-color: var(--ns-accent);
}

/* ==========================================================================
   2. Generic widget lists
   ========================================================================== */
.widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.widget li {
	list-style: none;
}

.widget :is(.wp-block-latest-posts, .wp-block-categories, .wp-block-archives, .widget_categories, .widget_archive, .widget_recent_entries, .widget_meta, .widget_pages, .widget_nav_menu) li {
	padding-block: var(--ns-space-2);
	border-bottom: 1px solid var(--ns-border);
}

.widget :is(.wp-block-latest-posts, .wp-block-categories, .wp-block-archives, .widget_categories, .widget_archive, .widget_recent_entries, .widget_meta, .widget_pages, .widget_nav_menu) li:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.widget li > a {
	color: var(--ns-text-2);
	text-decoration: none;
	transition: color var(--ns-duration) var(--ns-ease), padding-inline-start var(--ns-duration) var(--ns-ease);
}

.widget li > a:hover {
	color: var(--ns-accent);
}

/* Nested lists (child categories / pages) indent with a rule. */
.widget li .children,
.widget li .sub-menu {
	margin-top: var(--ns-space-2);
	margin-inline-start: var(--ns-space-3);
	padding-inline-start: var(--ns-space-3);
	border-inline-start: 1px solid var(--ns-border);
}

.widget li .children li:last-child,
.widget li .sub-menu li:last-child {
	padding-bottom: var(--ns-space-2);
}

/* ==========================================================================
   3. Categories & archives — counts as pills
   ========================================================================== */
.widget_categories li,
.widget_archive li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ns-space-3);
}

.widget_categories li a,
.widget_archive li a {
	flex: 1;
	min-width: 0;
}

/*
 * WordPress prints the count as a bare text node after the link
 * ("Category (12)") unless the widget is set to show counts, in which case it
 * is still a text node. This styles the dropdown variant and the block widget,
 * which do expose a wrapper.
 */
.widget_categories .post-count,
.wp-block-categories__post-count,
.wp-block-archives__count {
	flex-shrink: 0;
	min-width: 24px;
	padding: 2px 8px;
	border-radius: var(--ns-radius-full);
	background-color: var(--ns-bg-3);
	color: var(--ns-text-3);
	font-size: var(--ns-text-xs);
	font-weight: 700;
	text-align: center;
}

/* Dropdown variants */
.widget select,
.widget .wp-block-categories__dropdown select,
.widget .wp-block-archives-dropdown select {
	width: 100%;
	margin-top: var(--ns-space-2);
}

/* ==========================================================================
   4. Recent posts — numbered
   ========================================================================== */
.widget_recent_entries ul,
.wp-block-latest-posts__list {
	counter-reset: ns-widget-post;
}

.widget_recent_entries li,
.wp-block-latest-posts__list > li {
	counter-increment: ns-widget-post;
	display: flex;
	align-items: flex-start;
	gap: var(--ns-space-3);
}

.widget_recent_entries li::before,
.wp-block-latest-posts__list > li::before {
	content: counter(ns-widget-post, decimal-leading-zero);
	flex-shrink: 0;
	font-family: var(--ns-font-mono);
	font-size: var(--ns-text-xs);
	font-weight: 700;
	line-height: 1.6;
	color: var(--ns-accent);
	opacity: 0.7;
}

.widget_recent_entries li a,
.wp-block-latest-posts__list > li > a {
	font-weight: 600;
	line-height: 1.4;
	color: var(--ns-text);
}

.widget_recent_entries .post-date,
.wp-block-latest-posts__post-date {
	display: block;
	margin-top: 2px;
	font-size: var(--ns-text-xs);
	color: var(--ns-text-3);
}

.wp-block-latest-posts__featured-image img {
	border-radius: var(--ns-radius-sm);
}

/* ==========================================================================
   5. Tag cloud — pills, not scaled text
   ========================================================================== */
.widget .tagcloud,
.widget .wp-block-tag-cloud {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ns-space-2);
}

.widget .tagcloud a,
.widget .wp-block-tag-cloud a {
	/* Core inlines a font-size per tag; a uniform pill reads far better. */
	font-size: var(--ns-text-xs) !important;
	font-weight: 600;
	line-height: 1;
	padding: 6px 12px;
	border: 1px solid var(--ns-border);
	border-radius: var(--ns-radius-full);
	background-color: var(--ns-surface);
	color: var(--ns-text-2);
	text-decoration: none;
	transition: border-color var(--ns-duration) var(--ns-ease),
	            color var(--ns-duration) var(--ns-ease),
	            transform var(--ns-duration) var(--ns-ease);
}

.widget .tagcloud a:hover,
.widget .wp-block-tag-cloud a:hover {
	border-color: var(--ns-accent);
	color: var(--ns-accent);
	transform: translateY(-1px);
}

.widget .tag-link-count {
	color: var(--ns-text-4);
}

/* ==========================================================================
   6. Search widget
   ========================================================================== */
.widget_search .search-form,
.widget_block .wp-block-search__inside-wrapper {
	display: flex;
	gap: var(--ns-space-2);
}

.widget_block .wp-block-search__input {
	flex: 1;
	min-width: 0;
}

.widget_block .wp-block-search__button {
	flex-shrink: 0;
	margin-left: 0;
}

/* ==========================================================================
   7. Recent comments
   ========================================================================== */
.widget_recent_comments li,
.wp-block-latest-comments__comment {
	padding-block: var(--ns-space-3);
	border-bottom: 1px solid var(--ns-border);
	line-height: 1.5;
	color: var(--ns-text-3);
}

.widget_recent_comments li:last-child,
.wp-block-latest-comments__comment:last-child {
	border-bottom: 0;
}

.wp-block-latest-comments__comment-meta {
	font-size: var(--ns-text-sm);
	color: var(--ns-text-2);
}

.wp-block-latest-comments__comment-date {
	font-size: var(--ns-text-xs);
	color: var(--ns-text-4);
}

.wp-block-latest-comments__comment-excerpt p {
	font-size: var(--ns-text-xs);
	margin: var(--ns-space-1) 0 0;
}

.wp-block-latest-comments__comment-avatar {
	border-radius: var(--ns-radius-full);
}

/* ==========================================================================
   8. Calendar
   ========================================================================== */
.widget_calendar table,
.wp-block-calendar table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--ns-text-xs);
	text-align: center;
}

.widget_calendar caption,
.wp-block-calendar caption {
	padding-bottom: var(--ns-space-3);
	font-weight: 700;
	color: var(--ns-text);
	caption-side: top;
}

.widget_calendar th,
.wp-block-calendar th {
	padding: var(--ns-space-2) 0;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--ns-border);
	font-weight: 700;
	color: var(--ns-text-3);
	white-space: normal;
}

.widget_calendar td,
.wp-block-calendar td {
	padding: var(--ns-space-2) 0;
	border: 0;
	color: var(--ns-text-3);
}

.widget_calendar td a,
.wp-block-calendar td a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: var(--ns-radius-full);
	background-color: var(--ns-accent);
	color: #ffffff;
	font-weight: 700;
	text-decoration: none;
}

.widget_calendar #today,
.wp-block-calendar #today {
	color: var(--ns-accent);
	font-weight: 700;
}

.wp-calendar-nav {
	display: flex;
	justify-content: space-between;
	margin-top: var(--ns-space-3);
	font-size: var(--ns-text-xs);
}

/* ==========================================================================
   9. RSS
   ========================================================================== */
.widget_rss .rsswidget {
	font-weight: 600;
	color: var(--ns-text);
}

.widget_rss .rss-date {
	display: block;
	font-size: var(--ns-text-xs);
	color: var(--ns-text-4);
	margin-block: 2px;
}

.widget_rss .rssSummary {
	font-size: var(--ns-text-xs);
	line-height: 1.5;
	color: var(--ns-text-3);
	margin-bottom: var(--ns-space-2);
}

.widget_rss cite {
	font-size: var(--ns-text-xs);
	color: var(--ns-text-4);
	font-style: normal;
}

/* ==========================================================================
   10. Media, text & block widgets
   ========================================================================== */
.widget_media_image img,
.widget img {
	border-radius: var(--ns-radius);
	height: auto;
}

.widget_text p,
.widget_block p,
.textwidget p {
	line-height: 1.6;
	color: var(--ns-text-3);
}

.widget_text p:last-child,
.widget_block p:last-child {
	margin-bottom: 0;
}

.widget :is(.wp-block-group, .wp-block-columns) {
	margin: 0;
}

.widget_block .wp-block-social-links {
	gap: var(--ns-space-2);
}

/* ==========================================================================
   11. Header / after-content / pre-footer widget areas
   ========================================================================== */
.ns-header-widget-area .widget,
.ns-after-content-widgets .widget,
.ns-before-footer-widgets .widget {
	margin-bottom: 0;
}

.ns-after-content-widgets {
	margin-block: var(--ns-space-8);
}

.ns-before-footer-widgets {
	padding-block: var(--ns-space-10);
	border-top: 1px solid var(--ns-border);
}

/* Footer columns get a transparent shell — the footer already has a surface. */
.ns-footer-widgets .widget {
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0;
	margin-bottom: var(--ns-space-6);
}

.ns-footer-widgets .widget-title {
	font-size: var(--ns-text-sm);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ns-text-3);
	border-bottom: 0;
	padding-bottom: 0;
	margin-bottom: var(--ns-space-3);
}

.ns-footer-widgets .widget-title::before {
	display: none;
}

.ns-footer-widgets .widget li {
	border-bottom: 0;
	padding-block: var(--ns-space-1);
}

/* ==========================================================================
   12. Narrow viewports
   ========================================================================== */
@media (max-width: 1023px) {
	/*
	 * Below the desktop breakpoint the sidebar stops being a column and stacks
	 * under the article. It stays visible by default — hiding it would take
	 * search, categories and archives away from mobile readers.
	 */
	.ns-sidebar {
		margin-top: var(--ns-space-10);
	}

	/* General → Sidebar on Mobile = "Hide on phones and tablets". */
	.ns-sidebar-mobile-hidden .ns-sidebar {
		display: none;
	}
}

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