/**
 * ASAN Farm Map — public directory.
 *
 * Deliberately low-specificity and scoped under .asan-fm so a host theme can
 * restyle without fighting !important. Divi is the expected host: its header
 * sits at z-index 99999 and Leaflet's panes run 200–700, so the map container
 * establishes its own stacking context at z-index 1 and stays out of the way.
 */

.asan-fm {
	--asan-fm-accent: #1a6b3c;
	--asan-fm-accent-contrast: #ffffff;
	--asan-fm-border: #d6d8da;
	--asan-fm-muted: #55595c;
	--asan-fm-bg: #ffffff;
	--asan-fm-bg-alt: #f6f7f7;
	--asan-fm-text: #1d2327;
	--asan-fm-highlight: #fff8e1;
	/* Explicit and measured, not inherited. A host theme's link colour is not
	   guaranteed to clear WCAG AA on white -- Divi's default blue is about
	   2.9:1 against small text, which axe-core flags as a serious violation.
	   The component owns its own contrast rather than hoping the theme does. */
	--asan-fm-link: #0f5c2e;
	--asan-fm-radius: 6px;

	position: relative;
	color: var( --asan-fm-text );
	font-size: 16px;
	line-height: 1.5;
}

.asan-fm *,
.asan-fm *::before,
.asan-fm *::after {
	box-sizing: border-box;
}

/* The browser's own [hidden] rule is display:none, but ANY author display
   declaration outranks a UA stylesheet -- so .asan-fm-selection{display:flex}
   silently defeated its own hidden attribute, and the empty selection controls
   and "0" facet badges rendered on every page load. Restating it here as an
   author rule is the fix; !important keeps it winning over the component's own
   layout rules regardless of source order. */
.asan-fm [hidden] {
	display: none !important;
}

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

.asan-fm-skip:focus {
	position: static !important;
	display: inline-block;
	width: auto;
	height: auto;
	clip: auto;
	margin: 0 0 8px;
	padding: 8px 12px;
	background: var( --asan-fm-accent );
	color: var( --asan-fm-accent-contrast );
	border-radius: var( --asan-fm-radius );
}

/* ---- Controls ---- */

.asan-fm-controls {
	margin-bottom: 12px;
}

.asan-fm-search {
	margin: 0 0 10px;
}

.asan-fm-search label {
	display: block;
	margin-bottom: 4px;
	font-weight: 600;
}

.asan-fm-search__input {
	width: 100%;
	max-width: 420px;
	padding: 9px 12px;
	border: 1px solid var( --asan-fm-border );
	border-radius: var( --asan-fm-radius );
	font-size: 16px;
	background: var( --asan-fm-bg );
	color: var( --asan-fm-text );
}

.asan-fm-facets {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: flex-start;
}

.asan-fm-facet {
	position: relative;
	border: 1px solid var( --asan-fm-border );
	border-radius: var( --asan-fm-radius );
	background: var( --asan-fm-bg );
}

.asan-fm-facet > summary {
	padding: 8px 12px;
	cursor: pointer;
	font-weight: 600;
	list-style: none;
	white-space: nowrap;
}

.asan-fm-facet > summary::-webkit-details-marker {
	display: none;
}

.asan-fm-facet > summary::after {
	content: " \25BE";
	color: var( --asan-fm-muted );
}

.asan-fm-facet__badge {
	display: inline-block;
	min-width: 20px;
	margin-left: 6px;
	padding: 0 6px;
	border-radius: 10px;
	background: var( --asan-fm-accent );
	color: var( --asan-fm-accent-contrast );
	font-size: 12px;
	text-align: center;
}

.asan-fm-facet__options {
	position: absolute;
	z-index: 3;
	top: 100%;
	left: 0;
	min-width: 240px;
	max-height: 320px;
	overflow-y: auto;
	padding: 8px;
	background: var( --asan-fm-bg );
	border: 1px solid var( --asan-fm-border );
	border-radius: var( --asan-fm-radius );
	box-shadow: 0 6px 18px rgba( 0, 0, 0, 0.12 );
}

.asan-fm-facet__option {
	display: flex;
	gap: 8px;
	align-items: baseline;
	padding: 5px 6px;
	border-radius: 4px;
	cursor: pointer;
}

.asan-fm-facet__option:hover {
	background: var( --asan-fm-bg-alt );
}

.asan-fm-facet__option.is-empty {
	opacity: 0.45;
	cursor: default;
}

.asan-fm-facet__name {
	flex: 1 1 auto;
}

.asan-fm-facet__count {
	color: var( --asan-fm-muted );
	font-size: 13px;
	font-variant-numeric: tabular-nums;
}

/* ---- Map ---- */

.asan-fm-map {
	position: relative;
	z-index: 1;
	margin: 0 0 12px;
	border: 1px solid var( --asan-fm-border );
	border-radius: var( --asan-fm-radius );
	background: var( --asan-fm-bg-alt );
	overflow: hidden;
}

.asan-fm .leaflet-container {
	font: inherit;
}

.asan-fm-pin--selected {
	filter: hue-rotate( 260deg ) saturate( 1.6 );
	transform-origin: bottom center;
	scale: 1.35;
}

/* ---- Toolbar ---- */

.asan-fm-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	padding: 8px 0;
	border-bottom: 2px solid var( --asan-fm-border );
}

.asan-fm-count {
	margin: 0;
	font-weight: 700;
}

.asan-fm-selection {
	display: flex;
	gap: 12px;
	align-items: center;
}

.asan-fm-sort {
	display: flex;
	gap: 6px;
	align-items: center;
	margin-left: auto;
}

.asan-fm-sort__input {
	padding: 6px 8px;
	border: 1px solid var( --asan-fm-border );
	border-radius: var( --asan-fm-radius );
	background: var( --asan-fm-bg );
	color: var( --asan-fm-text );
}

.asan-fm-clear,
.asan-fm-reset,
.asan-fm-locate,
.asan-fm-view button {
	padding: 6px 10px;
	border: 1px solid var( --asan-fm-border );
	border-radius: var( --asan-fm-radius );
	background: var( --asan-fm-bg );
	color: var( --asan-fm-text );
	font: inherit;
	cursor: pointer;
}

.asan-fm-clear:hover,
.asan-fm-reset:hover,
.asan-fm-locate:hover {
	background: var( --asan-fm-bg-alt );
}

/* ---- List ---- */

.asan-fm-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.asan-fm-row {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 14px 8px;
	border-bottom: 1px solid var( --asan-fm-border );
}

.asan-fm-row.is-selected {
	background: var( --asan-fm-bg-alt );
	box-shadow: inset 4px 0 0 var( --asan-fm-accent );
}

.asan-fm-row.is-highlighted {
	background: var( --asan-fm-highlight );
	transition: background 400ms ease;
}

.asan-fm-row__select input {
	width: 20px;
	height: 20px;
	margin: 2px 0 0;
	cursor: pointer;
}

.asan-fm-row__body {
	flex: 1 1 auto;
	min-width: 0;
}

.asan-fm-row__title {
	margin: 0 0 2px;
	font-size: 17px;
	line-height: 1.3;
}

.asan-fm a {
	color: var( --asan-fm-link );
}

/* Underlined, not colour-only. axe-core's link-in-text-block rule is right
   here: a farm name sitting beside a badge is a link inside a text block, and
   colour alone does not distinguish it for anyone who cannot see the hue. The
   offset keeps it from looking heavy-handed. */
.asan-fm-row__title a {
	color: var( --asan-fm-link );
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.asan-fm-row__title a:hover,
.asan-fm-row__title a:focus {
	text-decoration-thickness: 2px;
}

.asan-fm-badge {
	display: inline-block;
	margin-left: 8px;
	padding: 1px 8px;
	border-radius: 10px;
	background: #e6f4ea;
	border: 1px solid var( --asan-fm-accent );
	color: #12532e;
	font-size: 12px;
	font-weight: 600;
	vertical-align: middle;
}

.asan-fm-row__meta {
	margin: 0 0 4px;
	color: var( --asan-fm-muted );
	font-size: 14px;
}

.asan-fm-row__sep {
	opacity: 0.6;
}

.asan-fm-row__contacts a {
	color: var( --asan-fm-link );
}

.asan-fm-row__contacts {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
	font-size: 14px;
}

.asan-fm-none,
.asan-fm-empty {
	padding: 24px 8px;
	color: var( --asan-fm-muted );
}

/* ---- Pager ---- */

.asan-fm-pager {
	display: flex;
	gap: 12px;
	align-items: center;
	justify-content: center;
	padding: 16px 0;
}

.asan-fm-pager button {
	padding: 7px 14px;
	border: 1px solid var( --asan-fm-border );
	border-radius: var( --asan-fm-radius );
	background: var( --asan-fm-bg );
	color: var( --asan-fm-text );
	font: inherit;
	cursor: pointer;
}

.asan-fm-pager button[disabled] {
	opacity: 0.45;
	cursor: default;
}

/* ---- Focus visibility ----
   A visible focus ring is the difference between a keyboard-operable
   directory and a theoretically-operable one. */

.asan-fm :focus-visible {
	outline: 3px solid var( --asan-fm-accent );
	outline-offset: 2px;
}

/* ---- Split layout ---- */

@media ( min-width: 1024px ) {
	.asan-fm[data-layout="split"] .asan-fm-panes {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 16px;
	}

	.asan-fm[data-layout="split"] .asan-fm-map {
		position: sticky;
		top: 16px;
		margin-bottom: 0;
	}
}

/* ---- Mobile ---- */

.asan-fm-view {
	display: none;
	gap: 6px;
}

@media ( max-width: 767px ) {
	.asan-fm-view {
		display: flex;
	}

	.asan-fm-view button[aria-pressed="true"] {
		background: var( --asan-fm-accent );
		border-color: var( --asan-fm-accent );
		color: var( --asan-fm-accent-contrast );
	}

	.asan-fm-map {
		height: 260px !important;
	}

	.asan-fm.is-map-view .asan-fm-map {
		height: 70vh !important;
	}

	.asan-fm.is-map-view .asan-fm-list,
	.asan-fm.is-map-view .asan-fm-pager {
		display: none;
	}

	.asan-fm.is-list-view .asan-fm-map {
		display: none;
	}

	.asan-fm-sort {
		margin-left: 0;
	}

	.asan-fm-facet__options {
		position: static;
		box-shadow: none;
		border: 0;
		min-width: 0;
	}
}

/* ---- Reduced motion ---- */

@media ( prefers-reduced-motion: reduce ) {
	.asan-fm-row.is-highlighted {
		transition: none;
	}

	.asan-fm .leaflet-fade-anim .leaflet-tile,
	.asan-fm .leaflet-zoom-anim .leaflet-zoom-animated {
		transition: none !important;
	}
}