/**
 * FacetWP Filter Bar — Repeated Events Archive
 */

/* =============================================================================
   Base reset — every input / select inside a facet
   ============================================================================= */

.facet-label {
	display: block;
	margin-bottom: 0.5rem;
	font-family: Nunito, sans-serif;
	font-size: 0.9rem;
	font-weight: 700;
}

body .facetwp-facet {
	margin: 0;
}

body .facetwp-facet-pagination {
	margin-bottom: 40px;
}

@media (max-width: 768px) {
	body .facet-wrap {
		width: 100%;
	}
}

.facetwp-facet .facetwp-search,
.facetwp-facet .fdate-alt-input,
.facetwp-facet .facetwp-dropdown {
	display: block;
	width: 100%;
	height: 48px;
	padding: 0 1rem;
	font-family: Nunito, sans-serif;
	font-size: 0.875rem; /* 14 px — same as card meta text */
	font-weight: 400;
	line-height: 1.5;
	color: var(--wp--preset--color--text-dark, #141e28);
	background-color: #fff;
	border: 2px solid #e5e7eb; /* gray-200 — matches the card border */
	border-radius: 10px; /* matches card image corner radius */
	outline: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
}

/* Hover — slightly darker border, mirrors card hover convention */
.facetwp-facet .facetwp-search:hover,
.facetwp-facet .fdate-alt-input:hover,
.facetwp-facet .facetwp-dropdown:hover {
	border-color: #d1d5db; /* gray-300 */
}

/* Focus — primary green ring, same as the button focus ring in block.php */
.facetwp-facet .facetwp-search:focus,
.facetwp-facet .fdate-alt-input:focus,
.facetwp-facet .facetwp-dropdown:focus {
	border-color: var(--wp--preset--color--primary, #7ac141);
	box-shadow: 0 0 0 3px rgba(122, 193, 65, 0.18);
}

/* Placeholder text — match filled text color like other filters */
.facetwp-facet .facetwp-search::placeholder,
.facetwp-facet .fdate-alt-input::placeholder {
	color: var(--wp--preset--color--text-dark, #141e28);
	font-weight: 400;
}

/* =============================================================================
   Search facet  (facetwp-type-search)
   ============================================================================= */

.facetwp-type-search .facetwp-input-wrap {
	position: relative;
	display: block;
	width: 100%;
}

/* Shift text right so it doesn't overlap the icon */
.facetwp-type-search .facetwp-search {
	padding-left: 3rem;
}

/* Recolour the built-in FacetWP magnifier to the primary green */
.facetwp-type-search .facetwp-icon {
	position: absolute;
	top: 50%;
	left: 1.25rem;
	transform: translateY(-50%);
	display: block;
	width: 1.25rem;
	height: 1.25rem;
	pointer-events: none;
	/* Approximate CSS filter for #7AC141 */
	filter: invert(48%) sepia(72%) saturate(550%) hue-rotate(52deg)
		brightness(98%) contrast(105%);
}

/* =============================================================================
   Date range facet  (facetwp-type-date_range)
   ============================================================================= */

.facetwp-type-date_range {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

/* Hide the native hidden inputs — only the alt-inputs (flatpickr) are visible */
.facetwp-type-date_range .fdate-input {
	display: none !important;
}

.facetwp-type-date_range .fdate-alt-input {
	flex: 1 1 0;
	min-width: 0;
	text-align: center;
	cursor: pointer;
	caret-color: transparent; /* readonly field — no blinking cursor */
	padding: 0 0.625rem;
}

/* =============================================================================
   Dropdown facets  (facetwp-type-dropdown)
   ============================================================================= */

.facetwp-type-dropdown {
	position: relative;
}

/* Custom chevron arrow — replaces the browser default */
.facetwp-type-dropdown::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 1.1rem;
	width: 7px;
	height: 7px;
	transform: translateY(-62%) rotate(45deg);
	border-right: 2px solid #6b7280; /* gray-500 */
	border-bottom: 2px solid #6b7280;
	pointer-events: none;
	transition: border-color 0.2s ease;
}

/* Highlight arrow on hover / focus */
.facetwp-type-dropdown:hover::after,
.facetwp-type-dropdown:focus-within::after {
	border-color: var(--wp--preset--color--primary, #7ac141);
}

/* Extra right padding so text doesn't underlap the custom arrow */
.facetwp-type-dropdown .facetwp-dropdown {
	padding-right: 2.5rem;
	cursor: pointer;
}

/* The first "all" option acts as a placeholder — render it subdued */
.facetwp-type-dropdown .facetwp-dropdown option:first-child {
	color: #9ca3af;
}

/* All other options use the standard dark text */
.facetwp-type-dropdown .facetwp-dropdown option {
	color: var(--wp--preset--color--text-dark, #141e28);
}

/* =============================================================================
   Flatpickr calendar popup — keep it on-brand
   ============================================================================= */

.flatpickr-calendar {
	border: 2px solid #e5e7eb;
	border-radius: 12px;
	box-shadow: 0 4px 24px rgba(20, 30, 40, 0.1);
	font-family: Nunito, sans-serif;
	font-size: 0.875rem;
	overflow: hidden;
}

/* Month / year header */
.flatpickr-months .flatpickr-month,
.flatpickr-current-month .numInputWrapper {
	background: var(--wp--preset--color--primary, #7ac141);
	color: #fff;
	fill: #fff;
}

.flatpickr-current-month .numInputWrapper span.arrowUp::after,
.flatpickr-current-month .numInputWrapper span.arrowDown::after {
	border-bottom-color: #fff;
	border-top-color: #fff;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
	fill: #fff;
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
	fill: rgba(255, 255, 255, 0.75);
}

/* Weekday headers */
.flatpickr-weekdays {
	background: #f9fafb;
}

.flatpickr-weekday {
	color: #6b7280;
	font-weight: 700;
	font-size: 0.75rem;
}

/* Day cells */
.flatpickr-day {
	border-radius: 8px;
	font-weight: 400;
	color: var(--wp--preset--color--text-dark, #141e28);
}

.flatpickr-day:hover {
	background: #f3faea;
	border-color: var(--wp--preset--color--primary, #7ac141);
	color: var(--wp--preset--color--primary, #7ac141);
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
	background: var(--wp--preset--color--primary, #7ac141);
	border-color: var(--wp--preset--color--primary, #7ac141);
	color: #fff;
	font-weight: 700;
}

.flatpickr-day.inRange {
	background: #f3faea;
	border-color: transparent;
	box-shadow: none;
	color: var(--wp--preset--color--text-dark, #141e28);
}

.flatpickr-day.today {
	border-color: var(--wp--preset--color--primary, #7ac141);
	color: var(--wp--preset--color--primary, #7ac141);
	font-weight: 700;
}

.flatpickr-day.today.selected {
	color: #fff;
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
	color: #d1d5db;
}