/* Listings — archive shell, sidebar drawer, sticky bar. Cascade order is fixed in ListingsModule::STYLES. */

/* Archive */

.mf-archive {
	display: block;
	width: 100%;
	color: var(--mf-ink);
}

.mf-archive__main {
	width: 100%;
	min-width: 0;
}

.elementor-widget-shortcode:has(.mf-archive),
.elementor-widget-text-editor:has(.mf-archive) {
	max-width: 100%;
}

.mf-archive {
	width: 90vw;
	max-width: 90vw;
	/* margin-inline:auto, NOT calc(50% - 45vw) — see .mf-taxarchive. */
	margin-inline: auto;
	/* Padding, not margin, so it can't collapse through the Elementor wrapper. */
	padding-top: 0;
	padding-bottom: 60px;
}

/* Taxonomy-archive header (H1 + intro). Absent on the main events page. */
.mf-archive__header {
	margin-bottom: 22px;
}

.mf-archive__title {
	margin: 0 0 8px;
	font-size: clamp(1.6rem, 3vw, 2.2rem);
	font-weight: 700;
	color: var(--mf-navy);
	line-height: 1.15;
}

.mf-archive__intro {
	max-width: 70ch;
	color: var(--mf-ink);
	font-size: 0.98rem;
	line-height: 1.6;
}

.mf-archive__intro p {
	margin: 0 0 0.6em;
}

/* Sidebar — a fixed off-canvas drawer at all widths. */

.mf-archive__sidebar {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
	width: min(90vw, 360px);
	height: 100%;
	background: var(--mf-card-bg);
	box-shadow: 0 0 60px rgba(2, 7, 13, 0.22);
	transform: translateX(-100%);
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/* Drawer + backdrop are portaled to <body> by JS (a transformed ancestor traps
   fixed elements). The .is-filters-open variant is the pre-JS fallback. */
.mf-archive.is-filters-open .mf-archive__sidebar,
.mf-archive__sidebar.is-filters-open {
	transform: translateX(0);
}

/* Drawer header / body / footer become the drawer chrome. */
.mf-filters__header {
	position: relative;
	flex: 0 0 auto;
	padding: 24px 24px 18px;
	margin: 0;
	border-bottom: 1px solid var(--mf-line);
}

.mf-filters__body {
	flex: 1 1 auto;
	overflow-y: auto;
	/* Clip only x, so the rows' 8px hover bleed never spawns a scrollbar. */
	overflow-x: hidden;
	padding: 8px 24px 20px;
}

.mf-filters__footer {
	display: block;
	flex: 0 0 auto;
	padding: 16px 24px;
	border-top: 1px solid var(--mf-line);
}

.mf-filters__apply,
.mf-filters__apply:hover,
.mf-filters__apply:focus,
.mf-filters__apply:active {
	width: 100%;
	padding: 15px;
	border: none !important;
	border-radius: 12px;
	background: var(--mf-navy) !important;
	color: var(--mf-white) !important;
	font-family: var(--mf-font);
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	transition: opacity 0.15s ease;
}

.mf-filters__apply:hover { opacity: 0.92; }

/* Close (×) button in the drawer header. */
.mf-filters__close,
.mf-filters__close:hover,
.mf-filters__close:focus,
.mf-filters__close:active {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 20px;
	right: 18px;
	width: 36px;
	height: 36px;
	border: none !important;
	background: var(--mf-light-blue) !important;
	border-radius: 50%;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--mf-navy) !important;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	transition: background 0.15s ease;
}

.mf-filters__close:hover {
	background: var(--mf-mid-blue) !important;
}

.mf-archive__backdrop {
	display: block;
	position: fixed;
	inset: 0;
	z-index: 999;
	background: rgba(2, 7, 13, 0.30);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mf-archive.is-filters-open .mf-archive__backdrop,
.mf-archive__backdrop.is-filters-open {
	opacity: 1;
	visibility: visible;
}

.mf-filters__header {
	margin-bottom: 18px;
}

.mf-filters__title {
	margin: 0 0 6px;
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--mf-navy);
}

.mf-filters__intro {
	margin: 0;
	font-size: 0.88rem;
	line-height: 1.5;
	color: var(--mf-muted);
}

.mf-filter-group {
	border-bottom: 1px solid var(--mf-line);
}

/* Group header is a <button>; neutralise theme button hover (red bg). */
.mf-filter-group__toggle,
.mf-filter-group__toggle:hover,
.mf-filter-group__toggle:focus,
.mf-filter-group__toggle:active {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 14px 8px;
	background: transparent !important;
	border: none !important;
	cursor: pointer;
	font-family: var(--mf-font);
	font-size: 1rem;
	font-weight: 600;
	color: var(--mf-navy) !important;
	text-align: left;
	border-radius: 8px;
	appearance: none;
	-webkit-appearance: none;
	transition: background 0.15s ease;
}

.mf-filter-group__toggle:hover {
	background: var(--mf-light-blue) !important;
}

.mf-filter-group__chevron {
	width: 10px;
	height: 10px;
	border-right: 2px solid var(--mf-muted);
	border-bottom: 2px solid var(--mf-muted);
	transform: rotate(45deg);
	transition: transform 0.2s ease;
	flex: 0 0 auto;
}

.mf-filter-group.is-open .mf-filter-group__chevron {
	transform: rotate(-135deg);
}

.mf-filter-group__body {
	display: none;
	padding: 4px 2px 16px;
	max-height: 260px;
	overflow-y: auto;
}

.mf-filter-group.is-open .mf-filter-group__body {
	display: block;
}

.mf-filter-option {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 8px;
	margin: 0 -8px;
	border-radius: 8px;
	font-size: 0.92rem;
	font-weight: 500;
	color: var(--mf-ink);
	cursor: pointer;
	transition: background 0.15s ease;
}

.mf-filter-option:hover {
	background: var(--mf-light-blue);
}

.mf-filter-option input {
	flex: 0 0 auto;
	accent-color: var(--mf-blue);
	width: 16px;
	height: 16px;
}

.mf-filter-option__label {
	flex: 1 1 auto;
}

/* hierarchical term tree (city, event_type) */

.mf-tree-node__row {
	display: flex;
	align-items: center;
	gap: 8px;
	border-radius: 8px;
	/* The drawer body clips x; the child's -8px bleed would cut off the parent checkbox. */
	margin: 0;
}

.mf-tree-node__row .mf-filter-option--parent {
	flex: 1 1 auto;
	font-weight: 700;
	color: var(--mf-navy);
	padding: 8px 0;
	margin-left: 0;
	margin-right: 0;
}

.mf-tree-node__toggle,
.mf-tree-node__toggle:hover,
.mf-tree-node__toggle:focus,
.mf-tree-node__toggle:active {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--mf-white) !important;
	border: 1.5px solid var(--mf-blue) !important;
	border-radius: 6px;
	cursor: pointer;
	padding: 0;
	appearance: none;
	-webkit-appearance: none;
	transition: background 0.15s ease;
}

.mf-tree-node__toggle:hover {
	background: var(--mf-light-blue) !important;
}

.mf-tree-node__pm {
	position: relative;
	display: block;
	width: 11px;
	height: 11px;
}

.mf-tree-node__pm::before,
.mf-tree-node__pm::after {
	content: "";
	position: absolute;
	background: var(--mf-blue);
	border-radius: 1px;
}

.mf-tree-node__pm::before {
	top: 50%;
	left: 0;
	width: 100%;
	height: 2px;
	transform: translateY(-50%);
}

.mf-tree-node__pm::after {
	left: 50%;
	top: 0;
	width: 2px;
	height: 100%;
	transform: translateX(-50%);
	transition: opacity 0.15s ease;
}

.mf-tree-node.is-open > .mf-tree-node__row .mf-tree-node__pm::after {
	opacity: 0;
}

.mf-tree-node.is-open > .mf-tree-node__row .mf-tree-node__toggle {
	background: var(--mf-blue) !important;
}

.mf-tree-node.is-open > .mf-tree-node__row .mf-tree-node__pm::before {
	background: var(--mf-white);
}

.mf-tree-node__children {
	display: none;
	margin-left: 10px;
	padding-left: 12px;
	border-left: 1px solid var(--mf-line);
}

.mf-tree-node.is-open > .mf-tree-node__children {
	display: block;
}

.mf-tree-node__children .mf-filter-option {
	font-weight: 500;
	color: var(--mf-ink);
}

.mf-filter-daterange {
	display: flex;
	gap: 8px;
	margin-top: 10px;
}

.mf-filter-daterange input,
.mf-filter-price input {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid var(--mf-line);
	border-radius: 8px;
	font-size: 0.88rem;
}

.mf-filter-price {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 4px;
}

.mf-filter-price__sep {
	color: var(--mf-muted);
}

.mf-filters__reset {
	display: inline-block;
	margin-top: 18px;
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--mf-blue);
	text-decoration: none;
}

.mf-filters__reset:hover {
	text-decoration: underline;
}

/* Sticky header — the wrapper sticks, not the rows. */

.mf-archive__sticky {
	/* Drops to top:0 when body.mf-header-hidden. Below the header's z-index (1000). */
	position: sticky;
	top: calc(var(--mf-header-h, 80px) + var(--mf-admin-bar-h, 0px));
	z-index: 20;
	/* Full-viewport band via negative margins. NOT width:100vw — vw counts the
	   scrollbar and spawns a horizontal scroll. */
	width: auto;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	margin-bottom: 16px;
	background: var(--mf-light-blue, #eef4fc);
	padding: 8px 5vw;
	transition: top 0.3s ease;
}

/* Desktop: give the controls more room at the top of the blue band. */
@media (min-width: 901px) {
	.mf-archive__sticky {
		padding-top: 20px;
		padding-bottom: 12px;
		margin-bottom: 19px;
	}
}

body.mf-header-hidden .mf-archive__sticky {
	top: var(--mf-admin-bar-h, 0px);
}

/* bar */

.mf-archive__bar {
	display: flex;
	flex-wrap: nowrap;
	gap: 12px;
	align-items: center;
}

/* Filters trigger — shown at all widths now the sidebar is a drawer. */
/* Trigger is a <button>; force colour/background over any theme button rule. */
.mf-archive__filter-trigger,
.mf-archive__filter-trigger:hover,
.mf-archive__filter-trigger:focus,
.mf-archive__filter-trigger:active {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
	position: relative;
	padding: 0 22px;
	height: 54px;
	border: 1px solid var(--mf-line) !important;
	border-radius: 14px;
	background: var(--mf-card-bg) !important;
	color: var(--mf-navy) !important;
	font-family: var(--mf-font);
	font-size: 0.98rem;
	font-weight: 600;
	cursor: pointer;
	box-shadow: var(--mf-shadow);
	appearance: none;
	-webkit-appearance: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.mf-archive__filter-trigger:hover {
	border-color: var(--mf-blue) !important;
	background: var(--mf-light-blue) !important;
}

/* Staggered knobs: plain equal bars read as a hamburger. */
.mf-archive__filter-trigger-icon {
	width: 17px;
	height: 14px;
	flex: 0 0 auto;
	background:
		/* knobs — centred on each track, staggered like slider handles */
		radial-gradient(circle closest-side, var(--mf-navy) 95%, transparent 100%) left 2px top 0 / 5px 5px no-repeat,
		radial-gradient(circle closest-side, var(--mf-navy) 95%, transparent 100%) left 10px top 4.5px / 5px 5px no-repeat,
		radial-gradient(circle closest-side, var(--mf-navy) 95%, transparent 100%) left 5px top 9px / 5px 5px no-repeat,
		/* tracks */
		linear-gradient(var(--mf-navy), var(--mf-navy)) left 0 top 1.75px / 17px 1.5px no-repeat,
		linear-gradient(var(--mf-navy), var(--mf-navy)) left 0 top 6.25px / 17px 1.5px no-repeat,
		linear-gradient(var(--mf-navy), var(--mf-navy)) left 0 top 10.75px / 17px 1.5px no-repeat;
}

/* !important: the theme's button rules win otherwise. */
.mf-archive.is-filters-active .mf-archive__filter-trigger,
.mf-archive.is-filters-active .mf-archive__filter-trigger:focus,
.mf-archive.is-filters-active .mf-archive__filter-trigger:active {
	border-color: var(--mf-selected) !important;
	background: var(--mf-selected-soft) !important;
	/* Inset, so the 2px selection weight doesn't resize the button. */
	box-shadow: var(--mf-shadow), inset 0 0 0 1px var(--mf-selected);
}

/* The rule above outranks plain :hover, so restate hover here. */
.mf-archive.is-filters-active .mf-archive__filter-trigger:hover {
	border-color: var(--mf-selected-deep) !important;
	background: var(--mf-selected-soft) !important;
	box-shadow: var(--mf-shadow-hover), inset 0 0 0 1px var(--mf-selected-deep);
}

.mf-archive__filter-trigger-count {
	position: absolute;
	top: -8px;
	right: -8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	height: 24px;
	padding: 0 7px;
	box-sizing: border-box;
	border: 2px solid var(--mf-card-bg);
	border-radius: var(--mf-radius-pill);
	background: var(--mf-selected) !important;
	color: var(--mf-selected-on) !important;
	font-family: var(--mf-font);
	font-size: 0.8rem;
	font-weight: 700;
	line-height: 1;
	pointer-events: none;
}

/* The display above would beat the `hidden` attribute JS sets at zero. */
.mf-archive__filter-trigger-count[hidden] {
	display: none;
}

.mf-archive__search {
	position: relative;
	order: 2;
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	display: flex;
	align-items: center;
}

/* Row order (same at every width). */
.mf-archive__filter-trigger { order: 1; }
.mf-archive__bar .mf-fav-open { order: 4; }

.mf-archive__search-icon {
	position: absolute;
	left: 20px;
	top: 50%;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	z-index: 2;
	pointer-events: none;
	background: no-repeat center / contain
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A2B54' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='M21 21l-4.3-4.3'/></svg>");
}

/* !important so a theme input rule can't let text slide under the icon. */
.mf-archive__search .mf-archive__search-input {
	width: 100%;
	height: 54px;
	padding-block: 0 !important;
	padding-inline: 52px 20px !important;
	border: 1px solid var(--mf-line);
	border-radius: 14px;
	background: var(--mf-card-bg);
	color: var(--mf-navy);
	font-size: 1rem;
	line-height: normal;
	box-shadow: var(--mf-shadow);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	appearance: none;
	-webkit-appearance: none;
	text-indent: 0;
}

/* Kill the native search "×" clear affordance that can crowd the placeholder. */
.mf-archive__search-input::-webkit-search-decoration,
.mf-archive__search-input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

.mf-archive__search-input::placeholder {
	color: var(--mf-muted);
	opacity: 0.65;
}

.mf-archive__search-input:focus {
	outline: none;
	border-color: var(--mf-blue);
	box-shadow: 0 0 0 4px rgba(40, 136, 255, 0.12), var(--mf-shadow);
}