/* ==========================================================================
   AFE – Accessible Date Month Filter
   Base styles only. Visual design is handled by the theme/custom CSS.
   ========================================================================== */

/* ── Visually hidden (accessible) ────────────────────────────────────────── */

.afe-date-month-filter .afe-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ── Hide the JetSmartFilters internal input ──────────────────────────────── */

.afe-date-month-filter .afe-date-month-filter__input {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
}

/* ── Filter bar (prev · toggle · next) ───────────────────────────────────── */

.afe-date-month-filter__bar {
	display: flex;
	align-items: center;
	gap: 4px;
}

.afe-date-month-filter__bar button {
	cursor: pointer;
}

.afe-date-month-filter__bar button.afe-date-month-filter__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex: 1;
	width: 100%;
    padding: 13px;
    box-shadow: unset;
    margin-right: 8px;
}

.afe-date-month-filter__bar button.afe-date-month-filter__toggle svg path{
	fill: #FFFFFF;
}

.afe-date-month-filter__bar button.afe-date-month-filter__toggle:hover svg path,
.afe-date-month-filter__bar button.afe-date-month-filter__toggle:focus svg path{
	fill: #231F20;
}

/* ── Popover ──────────────────────────────────────────────────────────────── */

.afe-date-month-filter__popover {
	position: absolute;
	z-index: 9999;
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 4px;
	padding: 12px;
	min-width: 220px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* The outer wrapper needs relative positioning so the popover is anchored. */
.afe-date-month-filter .afe-date-period {
	position: relative;
}

/* ── Year navigation ──────────────────────────────────────────────────────── */

.afe-date-month-filter__year-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
}

.afe-date-month-filter__year-nav button.afe-date-month-filter__year-prev,
.afe-date-month-filter__year-nav button.afe-date-month-filter__year-next{
	box-shadow: unset;
	padding: 0.4rem;
	width: fit-content;
}

.afe-date-month-filter__year-nav button.afe-date-month-filter__year-prev svg path,
.afe-date-month-filter__year-nav button.afe-date-month-filter__year-next svg path{
	fill: #FFFFFF;
}

.afe-date-month-filter__year-nav button.afe-date-month-filter__year-prev:hover svg path,
.afe-date-month-filter__year-nav button.afe-date-month-filter__year-next:hover svg path,
.afe-date-month-filter__year-nav button.afe-date-month-filter__year-prev:focus svg path,
.afe-date-month-filter__year-nav button.afe-date-month-filter__year-next:focus svg path{
	fill: #231F20;
}

.afe-date-month-filter__year-display {
	font-weight: 600;
	min-width: 50px;
	text-align: center;
}

/* ── Month grid ───────────────────────────────────────────────────────────── */

.afe-date-month-filter__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	list-style: none;
	padding: 0;
	margin: 0;
}

.afe-date-month-filter__grid li {
	min-width: fit-content;
	width: 100%;
	padding: 0.2rem;
	box-sizing: border-box;
}

.afe-date-month-filter__popover .afe-date-month-filter__month-btn {
	width: 100%;
	padding: 0.4rem;
	text-align: center;
	cursor: pointer;
	box-shadow: unset;
	border: 2px solid #231F20!important;
}

.afe-date-month-filter__month-btn:hover,
.afe-date-month-filter__month-btn:focus {
	border-color: currentColor;
}

.afe-date-month-filter button:focus:not(:focus-visible) {
	outline: none;
}

.afe-date-month-filter__month-btn.is-selected,
.afe-date-month-filter__month-btn[aria-pressed="true"] {
	font-weight: 700;
}

/* ── Focus ring (RGAA 10.7) ───────────────────────────────────────────────── */

.afe-date-month-filter button:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 3px;
}

/* ── Reset button ─────────────────────────────────────────────────────────── */

.afe-date-month-filter__popover .afe-date-month-filter__reset {
	display: block;
	width: 100%;
	margin-top: 10px;
	padding: 0.4rem;
	text-align: center;
	cursor: pointer;
	box-shadow: unset;
}