/**
 * RCVMD Events List Block Styles
 * Uses theme.json custom properties for consistent design
 */

/* HEADER AND FOOTER: Make them 100% fullscreen edge-to-edge */
body.page-id-198 header.wp-block-template-part,
body.page-id-198 footer.wp-block-template-part {
	width: 100vw !important;
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Remove any global padding from header and footer containers */
body.page-id-198 header .wp-block-group,
body.page-id-198 footer .wp-block-group {
	width: 100vw !important;
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* MAIN CONTENT ONLY: Keep main content at 80% width centered */
body.page-id-198 main {
	max-width: 1536px !important;
	width: 80vw !important;
	margin: 0 auto !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Ensure wp-site-blocks doesn't interfere with header/footer fullscreen */
body.page-id-198 .wp-site-blocks {
	width: 100vw !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Align events text content with navbar logo - move further left */
body.page-id-198 .wp-block-column:first-child {
	padding-left: 0 !important;
	margin-left: -1rem !important;
}

/* Ensure the events calendar container is properly styled */
body.page-id-198 .wp-block-group.is-nowrap.is-layout-flex,
.wp-block-group.is-nowrap.is-layout-flex:has(.rcvmd-events-list-block),
.wp-block-group.is-nowrap.is-layout-flex:has(.mapsvg-wrap-all) {
	max-width: none !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 2rem !important;
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: 2rem !important;
}

/* Column layout for events list and map */
body.page-id-198 .wp-block-columns,
.wp-block-group.is-nowrap .wp-block-columns {
	max-width: none !important;
	width: 100% !important;
	margin: 0 !important;
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: 2rem !important;
}

body.page-id-198 .wp-block-column,
.wp-block-group.is-nowrap .wp-block-column {
	max-width: none !important;
	flex-grow: 1 !important;
	flex-shrink: 0 !important;
	min-width: 0 !important;
	padding: 0 !important;
}

/* Adaptive column sizing - automatically adjusts for single or multi-column layouts */
/* Default: assume single column and let it fill space */
body.page-id-198 .wp-block-column {
	flex-basis: 100% !important;
	max-width: none !important;
	min-width: 400px !important;
}

/* When only one column exists, ensure it fills the entire space */
body.page-id-198 .wp-block-column:only-child {
	flex-basis: 100% !important;
	max-width: none !important;
	min-width: 400px !important;
}

/* Modern browsers: Use :has() for more precise targeting */
@supports selector(:has(*)) {
	/* Single column layout */
	body.page-id-198 .wp-block-columns:has(.wp-block-column:only-child) .wp-block-column {
		flex-basis: 100% !important;
		max-width: none !important;
		min-width: 400px !important;
	}

	/* Two column layout (for future map addition) */
	body.page-id-198 .wp-block-columns:has(.wp-block-column:nth-child(2)) .wp-block-column:first-child {
		flex-basis: 65% !important;
		max-width: none !important;
		min-width: 400px !important;
	}

	body.page-id-198 .wp-block-columns:has(.wp-block-column:nth-child(2)) .wp-block-column:last-child {
		flex-basis: 35% !important;
		min-width: 350px !important;
		max-width: none !important;
	}
}

/* Force map container to use full available width */
body.page-id-198 .wp-block-column:last-child .mapsvg-wrap-all,
.wp-block-column:last-child .mapsvg-wrap-all {
	width: 100% !important;
	min-width: 600px !important;
}

body.page-id-198 .wp-block-column:last-child #mapsvg-5,
.wp-block-column:last-child #mapsvg-5 {
	width: 100% !important;
	min-width: 600px !important;
}

/* Fix MapSVG plugin sizing - work with actual plugin structure */
body.page-id-198 .mapsvg-wrap,
.mapsvg-wrap {
	width: 100% !important;
	height: auto !important;
	min-height: 600px !important;
}

body.page-id-198 .mapsvg-map-container,
.mapsvg-map-container {
	width: 100% !important;
	height: 600px !important;
	min-height: 600px !important;
}

body.page-id-198 .mapsvg,
.mapsvg {
	width: 100% !important;
	height: 600px !important;
	min-height: 600px !important;
	max-width: none !important;
}

/* Override inline styles that make the map tiny - multiple selectors for specificity */
body.page-id-198 #mapsvg-5[data-id="5"],
body.page-id-198 div[id="mapsvg-5"][data-id="5"],
body.page-id-198 .mapsvg-wrap-all > div[data-id="5"],
body.page-id-198 .mapsvg-wrap-all #mapsvg-5,
div[id="mapsvg-5"][data-id="5"],
.mapsvg-wrap-all > div[data-id="5"],
.mapsvg-wrap-all #mapsvg-5 {
	height: 600px !important;
	min-height: 600px !important;
	padding-bottom: 0 !important;
	padding-top: 0 !important;
	position: relative !important;
	overflow: visible !important;
}

/* Target any div inside mapsvg containers that might have inline height styles */
body.page-id-198 .mapsvg-wrap-all > div,
.mapsvg-wrap-all > div {
	height: 600px !important;
	min-height: 600px !important;
	padding-bottom: 0 !important;
}

/* Ensure the scrollpane fills the container */
body.page-id-198 .mapsvg-scrollpane-wrap,
.mapsvg-scrollpane-wrap {
	height: 100% !important;
	min-height: 600px !important;
}

body.page-id-198 .mapsvg-scrollpane,
.mapsvg-scrollpane {
	height: 100% !important;
	min-height: 600px !important;
}

/* Force all MapSVG related divs to proper height */

/* Additional MapSVG plugin specific fixes */
body.page-id-198 .mapsvg-wrap-all,
.mapsvg-wrap-all {
	width: 100% !important;
	max-width: none !important;
}

/* Force responsive behavior for MapSVG */
@media (min-width: 1200px) {
	body.page-id-198 .mapsvg,
	.mapsvg {
		min-width: 600px !important;
	}
}

/* Adjust events list block on events calendar page */
body.page-id-198 .rcvmd-events-list-block,
.rcvmd-events-list-block {
	width: 100%; /* Full width instead of constrained */
	max-width: 100%; /* Ensure it can expand */
	height: auto; /* Changed from 600px to auto for full page scroll */
	overflow-y: visible; /* Changed from auto to visible */
	margin-top: 0;
	padding: 0;
	padding-right: 0; /* No longer need scrollbar space */
}

body.page-id-198 .events-list-container,
.events-list-container {
	/* Remove inner scrollbar to fix dual scrollbar issue */
	/* Container height is now managed by parent .rcvmd-events-list-block */
	padding-right: 0; /* Removed additional padding from scrollbar */
}

.rcvmd-events-list-block {
	margin: 2rem 0;
}

/* Header and Controls - Left Aligned */
.events-list-header {
	margin-bottom: 2rem;
	text-align: left; /* Ensure left alignment */
}

.events-list-heading {
	color: var(--wp--preset--color--biscay);
	font-family: var(--wp--preset--font-family--poppins);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	margin: 0 0 1.5rem 0;
	text-align: left; /* Explicitly left-align heading */
}

.events-list-controls {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: stretch; /* Changed from flex-end to stretch for consistent height */
	justify-content: flex-start; /* Left-align controls */
	margin-bottom: 1.5rem;
	padding: 1rem;
	background-color: var(--wp--preset--color--neutral-lightest);
	border-radius: 8px;
	text-align: left; /* Left-align text content */
	/* Match the event list width exactly */
	margin-right: 1rem; /* Same as event list margin */
}

.events-search-wrapper,
.county-filter-wrapper,
.date-filter-wrapper {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	flex: 1; /* Allow equal expansion */
	max-width: 250px; /* Prevent overgrowth */
	position: relative; /* Add positioning context for absolute children */
	margin-bottom: 0 !important; /* Ensure consistent alignment - no bottom margins */
}

.events-search-wrapper label,
.county-filter-wrapper label,
.date-filter-wrapper label {
	font-weight: 500;
	color: var(--wp--preset--color--neutral-darker);
	font-size: 0.875rem;
}

.events-search,
.county-filter,
.event-date-filter {
	padding: 0.75rem;
	border: 2px solid var(--wp--preset--color--neutral-lighter);
	border-radius: 6px;
	background-color: var(--wp--preset--color--neutral-white);
	color: var(--wp--preset--color--neutral-darkest);
	font-family: var(--wp--preset--font-family--source-sans-3);
	font-size: 0.875rem; /* Consistent font size */
	line-height: 1.4; /* Consistent line height */
	transition: border-color 0.3s ease;
	width: 100%; /* Fill container width */
	box-sizing: border-box; /* Include padding in width */
	height: 45px; /* Fixed height for consistency */
}

.events-search:focus,
.county-filter:focus,
.event-date-filter:focus {
	outline: none;
	border-color: var(--wp--preset--color--biscay);
	box-shadow: 0 0 0 2px var(--wp--preset--color--biscay-lightest);
}

/* Loading State */
.events-loading {
	text-align: center;
	padding: 2rem;
	color: var(--wp--preset--color--neutral);
}

/* Cards Layout - Left Aligned */
.events-list[data-layout="cards"] {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--wp--custom--spacing--md);
	margin: 0;
	margin-right: 1rem; /* Space for scrollbar */
	align-items: start;
	justify-content: start; /* Left-align grid */
}

.event-card {
	background-color: var(--wp--preset--color--neutral-white);
	border: 2px solid var(--wp--preset--color--neutral-lighter);
	border-radius: var(--wp--custom--borders--radius--sm);
	overflow: hidden;
	transition: var(--wp--custom--effects--transitions--normal);
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	box-shadow: var(--wp--custom--effects--shadows--sm);
}

/* Hover effects removed per user request */

.event-card-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding: var(--wp--custom--spacing--sm) var(--wp--custom--spacing--sm) 0 var(--wp--custom--spacing--sm);
	min-height: 3rem;
}

.event-date {
	background-color: var(--wp--preset--color--biscay);
	color: var(--wp--preset--color--neutral-white);
	padding: var(--wp--custom--spacing--xs) var(--wp--custom--spacing--sm);
	border-radius: var(--wp--custom--borders--radius--sm);
	font-weight: var(--wp--custom--typography--fontWeights--semibold);
	font-size: var(--wp--preset--font-size--small);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	min-width: 4rem;
	text-align: center;
	white-space: nowrap;
	display: inline-block;
}

.virtual-badge {
	background-color: var(--wp--preset--color--saffron);
	color: var(--wp--preset--color--neutral-darkest);
	padding: 0.25rem 0.5rem 0.25rem 0.75rem;
	border-radius: 20px;
	font-size: 0.75rem;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 0.25rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	position: relative;
	border: 2px solid var(--wp--preset--color--rcv-red);
}

.virtual-badge::before {
	content: '';
	position: absolute;
	left: 6px;
	top: 50%;
	transform: translateY(-50%);
	width: 8px;
	height: 8px;
	background-color: var(--wp--preset--color--rcv-red);
	border-radius: 50%;
	animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7);
	}
	70% {
		box-shadow: 0 0 0 8px rgba(220, 53, 69, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
	}
}

.virtual-badge svg {
	width: 14px;
	height: 14px;
	margin-left: 8px;
}

.event-card-content {
	padding: var(--wp--custom--spacing--sm) var(--wp--custom--spacing--md) var(--wp--custom--spacing--md) var(--wp--custom--spacing--md);
	display: flex;
	flex-direction: column;
	flex: 1;
}

.event-title {
	margin: 0 0 1rem 0;
	font-size: 1.25rem;
	line-height: 1.3;
}

.event-title a {
	color: var(--wp--preset--color--neutral-darkest);
	text-decoration: none;
	font-weight: 600;
	transition: color 0.3s ease;
}

.event-title a:hover,
.event-title a:focus {
	color: var(--wp--preset--color--biscay);
	text-decoration: underline;
}

.event-meta {
	margin-bottom: 1rem;
	font-size: 0.875rem;
	color: var(--wp--preset--color--neutral-dark);
	line-height: 1.4;
}

.event-datetime {
	font-weight: 500;
	color: var(--wp--preset--color--biscay);
	margin-bottom: 0.5rem;
}

.event-location {
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

.event-county {
	color: var(--wp--preset--color--neutral);
	font-weight: normal;
}

.event-excerpt {
	color: var(--wp--preset--color--neutral-dark);
	line-height: var(--wp--custom--typography--lineHeights--base);
	margin-bottom: var(--wp--custom--spacing--sm);
	flex: 1;
}

.event-actions {
	margin-top: auto;
	padding-top: var(--wp--custom--spacing--sm);
}

.event-link {
	background-color: var(--wp--preset--color--biscay);
	color: var(--wp--preset--color--neutral-white);
	padding: var(--wp--custom--spacing--xs) var(--wp--custom--spacing--md);
	border-radius: var(--wp--custom--borders--radius--sm);
	text-decoration: none;
	font-weight: var(--wp--custom--typography--fontWeights--semibold);
	font-size: var(--wp--preset--font-size--small);
	display: inline-block;
	transition: var(--wp--custom--effects--transitions--normal);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	width: 100%;
	text-align: center;
	box-shadow: var(--wp--custom--effects--shadows--sm);
}

.event-link:hover,
.event-link:focus {
	background-color: var(--wp--preset--color--biscay-dark);
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(24, 54, 93, 0.25);
}

/* List Layout - Left Aligned */
.events-list[data-layout="list"] {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-right: 1rem; /* Space for scrollbar */
}

.event-list-item {
	background-color: var(--wp--preset--color--neutral-white);
	border: 1px solid var(--wp--preset--color--neutral-lighter);
	border-radius: 8px;
	padding: 1.5rem;
	transition: all 0.3s ease;
}

.event-list-item:hover,
.event-list-item:focus-within {
	border-color: var(--wp--preset--color--biscay);
	box-shadow: 0 4px 15px rgba(24, 54, 93, 0.1);
}

.event-list-content {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.event-list-item .event-title {
	margin: 0;
	font-size: 1.125rem;
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.event-list-item .event-title a {
	flex: 1;
}

.event-list-item .virtual-badge {
	flex-shrink: 0;
}

.event-list-item .event-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin: 0;
	font-size: 0.875rem;
}

.event-list-item .event-datetime {
	margin: 0;
}

/* Virtual Event Styling */
.virtual-event {
	position: relative;
}

.virtual-event::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--wp--preset--color--saffron), var(--wp--preset--color--saffron-light));
	border-radius: 12px 12px 0 0;
}

.event-list-item.virtual-event::before {
	border-radius: 8px 8px 0 0;
}

/* Load More Button - Left Aligned */
.events-list-footer {
	text-align: left; /* Changed from center to left */
	margin-top: 2rem;
	margin-right: 1rem; /* Space for scrollbar */
}

.load-more-events {
	background-color: var(--wp--preset--color--neutral-white);
	border: 2px solid var(--wp--preset--color--biscay);
	color: var(--wp--preset--color--biscay);
	padding: 0.75rem 2rem;
	border-radius: 6px;
	font-weight: 600;
	font-size: 0.875rem;
	cursor: pointer;
	transition: all 0.3s ease;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.load-more-events:hover,
.load-more-events:focus {
	background-color: var(--wp--preset--color--biscay);
	color: var(--wp--preset--color--neutral-white);
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(24, 54, 93, 0.25);
}

.load-more-events:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

/* No Events Message */
.no-events-message {
	text-align: center;
	padding: 3rem 1rem;
	color: var(--wp--preset--color--neutral);
	background-color: var(--wp--preset--color--neutral-lightest);
	border-radius: 12px;
}

.no-events-message p {
	margin: 0;
	font-size: 1.125rem;
}

/* Accessibility */
.screen-reader-text {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* Responsive Design */
@media (max-width: 768px) {
	.events-list-controls {
		flex-direction: column;
		align-items: stretch;
	}
	
	.events-search,
	.county-filter {
		min-width: unset;
		width: 100%;
	}
	
	.events-list[data-layout="cards"] {
		grid-template-columns: 1fr;
		gap: var(--wp--custom--spacing--sm);
	}
	
	.event-card-header {
		flex-direction: column;
		gap: 1rem;
		align-items: flex-start;
	}
	
	.event-list-item .event-meta {
		flex-direction: column;
		gap: 0.5rem;
	}
}

@media (max-width: 480px) {
	.event-card-content {
		padding: 1rem;
	}
	
	.event-list-item {
		padding: 1rem;
	}
	
	.events-list-controls {
		padding: 0.75rem;
	}
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
	.event-card,
	.event-list-item {
		border-width: 3px;
	}
	
	.event-link,
	.load-more-events {
		border: 2px solid currentColor;
	}
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
	.event-card,
	.event-list-item,
	.event-link,
	.load-more-events {
		transition: none;
	}

	.event-link:hover,
	.event-link:focus,
	.load-more-events:hover,
	.load-more-events:focus {
		transform: none;
	}
}

/* MapSVG Label and Marker Alignment Fixes */
.county-event-marker {
	/* Shift markers left to better center on counties */
	transform: translateX(-35px) translateY(-10px);
	z-index: 1000;
	pointer-events: none; /* Allow clicks to pass through to county */
}

.county-label {
	/* Style for county labels - explicit visibility styles */
	z-index: 998 !important;
	pointer-events: none !important; /* Allow clicks to pass through to county */
	position: absolute !important;
	background-color: rgba(255, 255, 255, 0.95) !important;
	color: #333 !important;
	padding: 2px 5px !important;
	border-radius: 3px !important;
	border: 1px solid #666 !important;
	font-size: 11px !important;
	font-weight: bold !important;
	white-space: nowrap !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
	display: block !important;
	visibility: visible !important;
	/* No transform - positioning handled in JavaScript */
}

/* Ensure MapSVG container positioning context */
.mapsvg-wrap-all,
.mapsvg-wrap,
.mapsvg {
	position: relative !important;
}

/* Fine-tune specific counties if individual adjustments are needed */
.county-event-marker[data-county="baltimore-city"] {
	transform: translateX(-30px) translateY(-8px);
}

.county-event-marker[data-county="montgomery"] {
	transform: translateX(-40px) translateY(-12px);
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
	.county-event-marker {
		transform: translateX(-25px) translateY(-8px) scale(0.9);
	}

	.county-label {
		transform: translateX(-35px) translateY(-3px);
		font-size: 0.65rem;
	}
}

/* View Toggle Buttons - Left Aligned */
.events-view-toggle {
	display: flex;
	gap: 0.5rem;
	margin: 1.5rem 0;
	margin-right: 1rem; /* Same as other components */
	background-color: var(--wp--preset--color--neutral-lightest);
	padding: 0.5rem;
	border-radius: 8px;
	width: fit-content;
	justify-self: flex-start; /* Align to left */
}

.view-toggle-btn {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.25rem;
	border: 2px solid transparent;
	border-radius: 6px;
	background-color: var(--wp--preset--color--neutral-white);
	color: var(--wp--preset--color--neutral-dark);
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 0.875rem;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.3s ease;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.view-toggle-btn:hover {
	background-color: var(--wp--preset--color--neutral-lighter);
	border-color: var(--wp--preset--color--biscay-light);
}

.view-toggle-btn.active {
	background-color: var(--wp--preset--color--biscay);
	color: var(--wp--preset--color--neutral-white);
	border-color: var(--wp--preset--color--biscay-dark);
}

.view-toggle-btn svg {
	width: 20px;
	height: 20px;
}

/* Calendar View Styles */
.events-calendar-container {
	min-height: 600px;
	background-color: var(--wp--preset--color--neutral-white);
	border: 1px solid var(--wp--preset--color--neutral-lighter);
	border-radius: 8px;
	padding: 1.5rem;
	padding-right: 2rem; /* Extra space for scrollbar area */
	margin-right: 1rem; /* Additional margin for scrollbar */
}

/* Simple Calendar Styles (Fallback) */
.simple-calendar {
	width: 100%;
}

.calendar-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1.5rem;
	padding: 1rem;
	background-color: var(--wp--preset--color--biscay);
	color: var(--wp--preset--color--neutral-white);
	border-radius: 6px;
}

.calendar-header button {
	background: none;
	border: 2px solid var(--wp--preset--color--neutral-white);
	color: var(--wp--preset--color--neutral-white);
	padding: 0.5rem 1rem;
	border-radius: 4px;
	cursor: pointer;
	font-weight: 600;
	transition: all 0.3s ease;
}

.calendar-header button:hover {
	background-color: var(--wp--preset--color--neutral-white);
	color: var(--wp--preset--color--biscay);
}

.calendar-title {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--wp--preset--color--neutral-white);
}

.calendar-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 1px;
	background-color: var(--wp--preset--color--neutral-lighter);
	border: 1px solid var(--wp--preset--color--neutral-lighter);
}

.calendar-day-header {
	background-color: var(--wp--preset--color--neutral-lightest);
	padding: 0.75rem 0.5rem;
	text-align: center;
	font-weight: 600;
	font-size: 0.875rem;
	color: var(--wp--preset--color--neutral-darker);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.calendar-day {
	background-color: var(--wp--preset--color--neutral-white);
	min-height: 80px;
	padding: 0.5rem;
	position: relative;
}

.calendar-day.empty {
	background-color: var(--wp--preset--color--neutral-lightest);
}

.calendar-day.has-events {
	background-color: var(--wp--preset--color--biscay-lightest);
}

.day-number {
	font-weight: 600;
	color: var(--wp--preset--color--neutral-darker);
	display: block;
	margin-bottom: 0.25rem;
}

.day-events {
	font-size: 0.75rem;
}

.calendar-event {
	background-color: var(--wp--preset--color--biscay);
	color: var(--wp--preset--color--neutral-white);
	padding: 2px 4px;
	border-radius: 3px;
	margin-bottom: 2px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.calendar-event a {
	color: var(--wp--preset--color--neutral-white);
	text-decoration: none;
	font-size: 0.7rem;
}

.calendar-event a:hover {
	text-decoration: underline;
}

/* FullCalendar Custom Styles (if using FullCalendar library) */
.fc {
	font-family: var(--wp--preset--font-family--source-sans-3);
}

.fc-toolbar-title {
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 600;
	color: var(--wp--preset--color--biscay);
}

.fc-button-primary {
	background-color: var(--wp--preset--color--biscay);
	border-color: var(--wp--preset--color--biscay);
}

.fc-button-primary:hover {
	background-color: var(--wp--preset--color--biscay-dark);
	border-color: var(--wp--preset--color--biscay-dark);
}

.fc-button-primary:not(:disabled):active,
.fc-button-primary:not(:disabled).fc-button-active {
	background-color: var(--wp--preset--color--biscay-dark);
	border-color: var(--wp--preset--color--biscay-dark);
}

.fc-event {
	border-radius: 4px;
	padding: 2px 4px;
}

.virtual-event {
	background-color: var(--wp--preset--color--saffron) !important;
	border-color: var(--wp--preset--color--saffron-dark) !important;
	color: var(--wp--preset--color--neutral-darkest) !important;
}

.in-person-event {
	background-color: var(--wp--preset--color--biscay) !important;
	border-color: var(--wp--preset--color--biscay-dark) !important;
	color: var(--wp--preset--color--neutral-white) !important;
}

/* Flatpickr Date Picker Clear Button Fix */
.flatpickr-wrapper {
	position: relative !important;
	display: inline-block;
	width: 100%;
}

/* Hide clear button by default */
.flatpickr-clear {
	display: none !important;
	position: absolute !important;
	right: 10px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	z-index: 4 !important;
	cursor: pointer !important;
	background-color: var(--wp--preset--color--neutral-white) !important;
	border: 1px solid var(--wp--preset--color--neutral-lighter) !important;
	border-radius: 3px !important;
	padding: 2px 6px !important;
	font-size: 14px !important;
	color: var(--wp--preset--color--neutral-dark) !important;
	line-height: 1 !important;
}

/* Show clear button only when date is selected */
.date-filter-wrapper.has-value .flatpickr-clear {
	display: block !important;
}

.flatpickr-clear:hover {
	background-color: var(--wp--preset--color--neutral-lightest) !important;
	border-color: var(--wp--preset--color--neutral) !important;
}