/**
 * File path: assets/css/calendar.css
 *
 * Self-contained styles for [npmp_calendar], [npmp_events], and single
 * event pages. Designed to look correct on top of ANY theme — including
 * themes that paint a dark or colored background on .entry-content and
 * a light text color to match (Astra child themes, page builders with
 * full-width section backgrounds, hero-style content blocks). The
 * previous version inherited foreground color from the theme which
 * produced white text on white cards under those setups; now every
 * surface owns its own background AND text color.
 *
 * Architecture:
 *   - The wrapper is a white card with max-width + centered margins.
 *   - Day cells inherit white from the card (no per-cell background
 *     fight with theme rules).
 *   - Text colors are explicit on every visible element, never `inherit`.
 *   - A few `!important`s on background-color / color / max-width
 *     defend against theme rules that customize .entry-content children.
 *
 * Data attributes:
 *   - data-theme-mode="auto" (default) / "full" / "theme-only"
 *   - data-density="compact" / "comfortable" / "spacious"
 *   - data-show-time="true" / "false"
 */

.npmp-calendar-wrapper,
.npmp-events-list,
.npmp-event-details {
	--npmp-cal-accent: #2563eb;
	--npmp-cal-accent-dark: #1d4ed8;
	--npmp-cal-accent-contrast: #ffffff;
	--npmp-cal-accent-soft: #eff6ff;
	--npmp-cal-accent-tint: #dbeafe;
	--npmp-cal-text: #1f2937;
	--npmp-cal-text-muted: #6b7280;
	--npmp-cal-text-faint: #9ca3af;
	--npmp-cal-border: #e5e7eb;
	--npmp-cal-border-strong: #d1d5db;
	--npmp-cal-card-bg: #ffffff;
	--npmp-cal-pad-bg: #f9fafb;
	--npmp-cal-header-bg: #f9fafb;
	--npmp-cal-today-bg: #fef3c7;
	--npmp-cal-radius: 10px;
	--npmp-cal-radius-sm: 4px;
	--npmp-cal-gap: 0.5rem;
	--npmp-cal-cell-pad: 0.55rem;
	--npmp-cal-cell-min-h: 6rem;
	--npmp-cal-max-w-grid: 1100px;
	--npmp-cal-max-w-list: 760px;
	box-sizing: border-box;
}

.npmp-calendar-wrapper *,
.npmp-events-list *,
.npmp-event-details * {
	box-sizing: inherit;
}

.npmp-calendar-wrapper[data-density="compact"] {
	--npmp-cal-cell-pad: 0.35rem;
	--npmp-cal-cell-min-h: 4.5rem;
	--npmp-cal-gap: 0.35rem;
}
.npmp-calendar-wrapper[data-density="spacious"] {
	--npmp-cal-cell-pad: 0.9rem;
	--npmp-cal-cell-min-h: 8.5rem;
	--npmp-cal-gap: 0.75rem;
}

/* =====================================================================
 * The wrapper itself is a self-contained white card. !important on
 * background + color is the only way to defeat themes that paint a
 * colored background on .entry-content with a matching light foreground
 * color (CACC's setup), which otherwise produces white-text-on-white.
 * ================================================================== */

.npmp-calendar-wrapper {
	background-color: var(--npmp-cal-card-bg) !important;
	color: var(--npmp-cal-text) !important;
	max-width: var(--npmp-cal-max-w-grid);
	margin: 1.5rem auto;
	padding: 1.25rem 1.25rem 1rem;
	border: 1px solid var(--npmp-cal-border);
	border-radius: var(--npmp-cal-radius);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
	line-height: 1.4;
	font-size: 0.95rem;
}

/* Reset font/text/color on every descendant so we're not at the mercy
 * of `.entry-content *` rules. Specific elements override below. */
.npmp-calendar-wrapper * {
	color: inherit;
}

.npmp-calendar-wrapper .npmp-calendar-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--npmp-cal-gap);
	margin: 0 0 1rem;
	flex-wrap: wrap;
}

.npmp-calendar-wrapper .npmp-calendar-title {
	margin: 0;
	font-size: 1.25rem;
	line-height: 1.2;
	font-weight: 600;
	flex: 1 1 auto;
	text-align: center;
	color: var(--npmp-cal-text) !important;
}

.npmp-calendar-wrapper .npmp-calendar-nav {
	display: inline-flex;
	align-items: center;
	padding: 0.4rem 0.8rem;
	min-height: 36px;
	border: 1px solid var(--npmp-cal-border-strong);
	border-radius: var(--npmp-cal-radius-sm);
	color: var(--npmp-cal-text) !important;
	text-decoration: none;
	background-color: var(--npmp-cal-card-bg) !important;
	font-size: 0.875rem;
	line-height: 1;
	font-weight: 500;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.npmp-calendar-wrapper .npmp-calendar-nav:hover,
.npmp-calendar-wrapper .npmp-calendar-nav:focus-visible {
	background-color: var(--npmp-cal-accent) !important;
	border-color: var(--npmp-cal-accent);
	color: var(--npmp-cal-accent-contrast) !important;
}

.npmp-calendar-wrapper .npmp-calendar-nav:focus-visible {
	outline: 2px solid var(--npmp-cal-accent);
	outline-offset: 2px;
}

/* =====================================================================
 * Calendar grid table
 * ================================================================== */

.npmp-calendar-wrapper .npmp-calendar-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	table-layout: fixed;
	border: 1px solid var(--npmp-cal-border);
	border-radius: var(--npmp-cal-radius-sm);
	overflow: hidden;
	background-color: var(--npmp-cal-card-bg) !important;
	margin: 0;
}

/* Neutralise theme-level <table>/<tr>/<th>/<td> defaults — themes love to
 * set striped backgrounds, padding, and borders on these. */
.npmp-calendar-wrapper .npmp-calendar-table caption,
.npmp-calendar-wrapper .npmp-calendar-table tbody,
.npmp-calendar-wrapper .npmp-calendar-table thead,
.npmp-calendar-wrapper .npmp-calendar-table tr {
	background-color: transparent !important;
	border: 0;
}

.npmp-calendar-wrapper .npmp-calendar-table th,
.npmp-calendar-wrapper .npmp-calendar-table td {
	padding: 0;
	margin: 0;
	border: 0;
	background-color: transparent;
	color: var(--npmp-cal-text);
}

.npmp-calendar-wrapper .npmp-calendar-table thead th {
	padding: 0.5rem 0.4rem;
	background-color: var(--npmp-cal-header-bg) !important;
	border-bottom: 1px solid var(--npmp-cal-border-strong);
	font-size: 0.7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--npmp-cal-text-muted) !important;
	text-align: center;
	line-height: 1.1;
}

.npmp-calendar-wrapper .npmp-calendar-day {
	vertical-align: top;
	padding: var(--npmp-cal-cell-pad);
	height: var(--npmp-cal-cell-min-h);
	border-right: 1px solid var(--npmp-cal-border);
	border-bottom: 1px solid var(--npmp-cal-border);
	background-color: var(--npmp-cal-card-bg) !important;
	position: relative;
	width: 14.2857%;
	color: var(--npmp-cal-text) !important;
	font-size: 0.85rem;
}

.npmp-calendar-wrapper .npmp-calendar-day:last-child {
	border-right: 0;
}

.npmp-calendar-wrapper .npmp-calendar-table tbody tr:last-child .npmp-calendar-day {
	border-bottom: 0;
}

.npmp-calendar-wrapper .npmp-calendar-day--pad {
	background-color: var(--npmp-cal-pad-bg) !important;
}

.npmp-calendar-wrapper .npmp-calendar-day--today {
	background-color: var(--npmp-cal-today-bg) !important;
}

.npmp-calendar-wrapper .npmp-calendar-day-number {
	display: block;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--npmp-cal-text-muted) !important;
	margin: 0 0 0.35rem;
	line-height: 1;
}

.npmp-calendar-wrapper .npmp-calendar-day--today .npmp-calendar-day-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.6em;
	height: 1.6em;
	border-radius: 999px;
	background-color: var(--npmp-cal-accent) !important;
	color: var(--npmp-cal-accent-contrast) !important;
	font-weight: 700;
}

/* Event chips inside a day cell */
.npmp-calendar-wrapper .npmp-calendar-events {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

.npmp-calendar-wrapper .npmp-calendar-events li {
	margin: 0;
	padding: 0;
	font-size: 0.75rem;
	line-height: 1.3;
	list-style: none;
}

.npmp-calendar-wrapper .npmp-calendar-events li::before {
	content: none;
}

.npmp-calendar-wrapper .npmp-calendar-events a {
	display: block;
	padding: 0.2rem 0.4rem;
	background-color: var(--npmp-cal-accent-tint) !important;
	border-left: 3px solid var(--npmp-cal-accent);
	border-radius: var(--npmp-cal-radius-sm);
	color: var(--npmp-cal-accent-dark) !important;
	text-decoration: none;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.npmp-calendar-wrapper .npmp-calendar-events a:hover,
.npmp-calendar-wrapper .npmp-calendar-events a:focus-visible {
	background-color: var(--npmp-cal-accent) !important;
	color: var(--npmp-cal-accent-contrast) !important;
	text-decoration: none;
}

.npmp-calendar-wrapper .npmp-calendar-events a:focus-visible {
	outline: 2px solid var(--npmp-cal-accent);
	outline-offset: 2px;
}

.npmp-calendar-wrapper .npmp-calendar-event-time {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	margin-right: 0.2rem;
	white-space: nowrap;
}

.npmp-calendar-wrapper[data-show-time="false"] .npmp-calendar-event-time {
	display: none;
}

/* =====================================================================
 * Responsive — stacked day-card list below 640px.
 * ================================================================== */

@media (max-width: 640px) {
	.npmp-calendar-wrapper {
		padding: 1rem;
	}
	.npmp-calendar-wrapper .npmp-calendar-table,
	.npmp-calendar-wrapper .npmp-calendar-table thead,
	.npmp-calendar-wrapper .npmp-calendar-table tbody,
	.npmp-calendar-wrapper .npmp-calendar-table tr,
	.npmp-calendar-wrapper .npmp-calendar-table th,
	.npmp-calendar-wrapper .npmp-calendar-table td {
		display: block;
		width: 100%;
	}

	.npmp-calendar-wrapper .npmp-calendar-table {
		border: 0;
		background-color: transparent !important;
	}

	.npmp-calendar-wrapper .npmp-calendar-table thead {
		position: absolute;
		left: -9999px;
	}

	.npmp-calendar-wrapper .npmp-calendar-day {
		height: auto;
		min-height: 0;
		margin-bottom: 0.5rem;
		border: 1px solid var(--npmp-cal-border);
		border-radius: var(--npmp-cal-radius-sm);
		padding: 0.75rem 1rem;
	}

	.npmp-calendar-wrapper .npmp-calendar-day--pad {
		display: none;
	}

	.npmp-calendar-wrapper .npmp-calendar-day-number {
		font-size: 1rem;
	}

	.npmp-calendar-wrapper .npmp-calendar-events a {
		white-space: normal;
	}
}

/* =====================================================================
 * Events list shortcode + single-event details panel
 *
 * Capped max-width + responsive 2-column grid on wide screens, single
 * column below 720px. Each event is its own white card so the list
 * reads as a tidy stack on any background.
 * ================================================================== */

.npmp-events-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.6rem;
	max-width: var(--npmp-cal-max-w-list);
	margin: 1.5rem auto;
	padding: 0;
	color: var(--npmp-cal-text);
}

@media (min-width: 900px) {
	.npmp-events-list {
		grid-template-columns: 1fr 1fr;
		max-width: var(--npmp-cal-max-w-grid);
	}
}

.npmp-events-list .npmp-event {
	padding: 0.85rem 1rem;
	border: 1px solid var(--npmp-cal-border);
	border-left: 3px solid var(--npmp-cal-accent);
	border-radius: var(--npmp-cal-radius);
	background-color: var(--npmp-cal-card-bg) !important;
	color: var(--npmp-cal-text) !important;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.npmp-events-list .npmp-event-title {
	margin: 0 0 0.2rem;
	font-size: 1rem;
	line-height: 1.3;
	font-weight: 600;
	color: var(--npmp-cal-text) !important;
}

.npmp-events-list .npmp-event-title a {
	color: var(--npmp-cal-text) !important;
	text-decoration: none;
	background: transparent;
}

.npmp-events-list .npmp-event-title a:hover,
.npmp-events-list .npmp-event-title a:focus-visible {
	color: var(--npmp-cal-accent-dark) !important;
	text-decoration: underline;
}

.npmp-events-list .npmp-event-date,
.npmp-events-list .npmp-event-location {
	margin: 0;
	color: var(--npmp-cal-text-muted) !important;
	font-size: 0.85rem;
	line-height: 1.4;
}

.npmp-events-list .npmp-event-location {
	font-style: italic;
}

.npmp-events-list .npmp-event-excerpt {
	margin: 0.35rem 0 0;
	color: var(--npmp-cal-text) !important;
	font-size: 0.9rem;
	line-height: 1.45;
}

.npmp-events-list .npmp-event-excerpt p:last-child {
	margin-bottom: 0;
}

.npmp-events-empty {
	padding: 1rem 1.25rem;
	max-width: var(--npmp-cal-max-w-list);
	margin: 1.5rem auto;
	color: var(--npmp-cal-text-muted) !important;
	background-color: var(--npmp-cal-card-bg) !important;
	border: 1px solid var(--npmp-cal-border);
	border-radius: var(--npmp-cal-radius);
	font-style: italic;
	text-align: center;
}

/* =====================================================================
 * Single-event "Event Details" appended panel
 * ================================================================== */

.npmp-event-details {
	max-width: var(--npmp-cal-max-w-list);
	margin: 2rem auto 1rem;
	padding: 1rem 1.25rem;
	border: 1px solid var(--npmp-cal-border);
	border-left: 3px solid var(--npmp-cal-accent);
	border-radius: var(--npmp-cal-radius);
	background-color: var(--npmp-cal-accent-soft) !important;
	color: var(--npmp-cal-text) !important;
}

.npmp-event-details h2 {
	margin: 0 0 0.5rem;
	font-size: 1.125rem;
	color: var(--npmp-cal-text) !important;
}

.npmp-event-details ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.npmp-event-details li {
	margin: 0.25rem 0;
	color: var(--npmp-cal-text);
	list-style: none;
}

.npmp-event-details li::before {
	content: none;
}

/* =====================================================================
 * Reduced motion (a11y)
 * ================================================================== */

@media (prefers-reduced-motion: reduce) {
	.npmp-calendar-wrapper .npmp-calendar-nav,
	.npmp-calendar-wrapper .npmp-calendar-events a {
		transition: none;
	}
}

/* =====================================================================
 * Print: paper-handout view (drops shadows + accent fills, keeps grid)
 * ================================================================== */

@media print {
	.npmp-calendar-wrapper {
		box-shadow: none;
		max-width: 100%;
	}

	.npmp-calendar-wrapper .npmp-calendar-nav {
		display: none;
	}

	.npmp-calendar-wrapper {
		--npmp-cal-accent-tint: transparent;
		--npmp-cal-accent-soft: transparent;
		--npmp-cal-header-bg: transparent;
		--npmp-cal-today-bg: transparent;
	}

	.npmp-calendar-wrapper .npmp-calendar-day,
	.npmp-calendar-wrapper .npmp-calendar-table thead th {
		border-color: #555 !important;
	}

	.npmp-calendar-wrapper .npmp-calendar-events a {
		background-color: transparent !important;
		border-left-color: #555;
		color: #000 !important;
		text-decoration: underline;
	}

	.npmp-calendar-wrapper .npmp-calendar-day--today {
		outline: 2px solid #000;
		outline-offset: -2px;
	}

	.npmp-events-list {
		box-shadow: none;
	}
}