/* Sidebar widgets — shared by the blog listing/archives and single posts.
   Each widget is a white card in the site's card language; the accent colour
   cycles teal → coral → green → yellow per widget (same rhythm as the header
   nav and service cards) and drives the title underline, link hover tint, and
   calendar highlights. Text stays dark-on-white throughout — accents never
   carry the text itself (yellow/teal on white is unreadable). */

.sidebar {
	display: none;
	flex: 0 0 30%;
}

/* Single posts keep the sidebar on mobile — stacked below the post in a
   trimmed form (see the max-width block at the end). */
.single .sidebar {
	display: block;
}

.sidebar .widget {
	--widget-accent: var(--color-teal);
	background: var(--color-white);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
	padding: var(--space-md);
	margin-bottom: var(--space-md);
}

.sidebar .widget:nth-child(4n + 2) {
	--widget-accent: var(--color-coral);
}

.sidebar .widget:nth-child(4n + 3) {
	--widget-accent: var(--color-green);
}

.sidebar .widget:nth-child(4n + 4) {
	--widget-accent: var(--color-yellow);
}

.sidebar .widget-title {
	position: relative;
	margin: 0 0 var(--space-sm);
	padding-bottom: var(--space-xs);
	color: var(--color-heading);
	font-size: var(--font-size-lg);
}

.sidebar .widget-title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 2.5rem;
	height: 4px;
	border-radius: var(--radius-pill);
	background: var(--widget-accent);
}

/* Link lists — Kategorije, Najnovije objave */

.sidebar .widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sidebar .widget ul li {
	border-bottom: 1px solid var(--color-bg);
}

.sidebar .widget ul li:last-child {
	border-bottom: none;
}

.sidebar .widget ul a {
	display: block;
	padding: var(--space-xs);
	margin: 0 calc(-1 * var(--space-xs));
	border-radius: var(--radius);
	color: var(--color-text);
	font-size: var(--font-size-sm);
	transition: var(--transition);
}

.sidebar .widget ul a:hover {
	background: color-mix(in srgb, var(--widget-accent) 14%, white);
	color: var(--color-heading);
}

/* Calendar */

.sidebar .wp-calendar-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
}

.sidebar .wp-calendar-table caption {
	caption-side: top;
	padding-bottom: var(--space-xs);
	color: var(--color-heading);
	font-family: var(--font-head);
	text-align: center;
}

.sidebar .wp-calendar-table th,
.sidebar .wp-calendar-table td {
	padding: calc(var(--space-xs) / 2) 0;
	text-align: center;
	font-size: var(--font-size-sm);
}

.sidebar .wp-calendar-table th {
	color: var(--color-heading);
	font-family: var(--font-head);
}

.sidebar .wp-calendar-table td {
	color: var(--color-text);
}

/* Days with posts — accent-filled circles, white text */
.sidebar .wp-calendar-table td a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2em;
	height: 2em;
	border-radius: 50%;
	background: var(--widget-accent);
	color: var(--color-white);
	transition: var(--transition);
}

.sidebar .wp-calendar-table td a:hover {
	background: var(--color-heading);
	color: var(--color-white);
}

/* Yellow-accent position: dark text on the yellow fill (white would wash out) */
.sidebar .widget:nth-child(4n + 4) .wp-calendar-table td a {
	color: var(--color-heading);
}

.sidebar .widget:nth-child(4n + 4) .wp-calendar-table td a:hover {
	color: var(--color-white);
}

/* Today — soft accent tint behind the number */
.sidebar .wp-calendar-table td#today {
	background: color-mix(in srgb, var(--widget-accent) 18%, white);
	border-radius: var(--radius);
	color: var(--color-heading);
}

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

.sidebar .wp-calendar-nav a {
	color: var(--color-text);
	transition: var(--transition);
}

.sidebar .wp-calendar-nav a:hover {
	color: var(--color-heading);
}

/* Media queries */

@media (min-width: 768px) {
	.sidebar {
		display: block;
	}
}

/* Mobile trim on single posts — the one deliberate max-width exception:
   the calendar is desktop decoration (date-browsing is no task on a phone,
   and it costs a third of a screen between the post and the footer), and
   categories compress into a chip row like the news filter. Expressing this
   as "hide/reshape below 768px" avoids re-declaring the whole desktop list
   presentation just to restore it. */
@media (max-width: 767.98px) {
	.single .sidebar .widget_calendar {
		display: none;
	}

	.single .sidebar .widget_categories ul {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-xs);
	}

	.single .sidebar .widget_categories ul li {
		border-bottom: none;
	}

	.single .sidebar .widget_categories ul a {
		margin: 0;
		padding: var(--space-xs) var(--space-sm);
		background: var(--color-bg);
	}
}