/**
 * Location Finder — front-end styles.
 * Designed to inherit theme typography. Uses brand color CSS variables set inline by PHP if needed.
 */

.lf-wrap {
	--lf-primary: #557085;
	--lf-secondary: #708FA6;
	--lf-accent: #D4B896;
	--lf-button-bg: #557085;
	--lf-button-text: #FFFFFF;
	--lf-bg: #FFFFFF;
	--lf-text: #1A1A1A;
	--lf-border: #E0E0E0;
	--lf-radius: 6px;

	color: var(--lf-text);
	background: var(--lf-bg);
	max-width: 100%;
	box-sizing: border-box;
}

.lf-wrap *,
.lf-wrap *::before,
.lf-wrap *::after {
	box-sizing: border-box;
}

/* Form */
.lf-form {
	margin: 0 0 0.75em;
}
.lf-label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.4em;
}
.lf-input-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	align-items: stretch;
}
.lf-zip-input {
	flex: 1 1 240px;
	min-width: 0;
	padding: 0.7em 0.9em;
	/* text-indent forces space inside the content area regardless of any theme box-sizing or
	 * vendor styles that may be flattening padding-left. Effective ~16px gutter. */
	text-indent: 0.6em;
	font-size: 1rem;
	border: 1px solid var(--lf-border);
	border-radius: var(--lf-radius);
	min-height: 44px;
	background: var(--lf-bg);
	color: var(--lf-text);
}
.lf-zip-input:focus {
	outline: 2px solid var(--lf-primary);
	outline-offset: 2px;
}
.lf-submit,
.lf-clear {
	min-height: 44px;
	min-width: 44px;
	padding: 0 1.2em;
	font-size: 1rem;
	font-weight: 600;
	border: 1px solid var(--lf-button-bg);
	border-radius: var(--lf-radius);
	cursor: pointer;
}
.lf-submit {
	background: var(--lf-button-bg);
	color: var(--lf-button-text);
}
.lf-submit:hover,
.lf-submit:focus {
	filter: brightness(0.95);
	outline: 2px solid var(--lf-primary);
	outline-offset: 2px;
}
.lf-clear {
	background: transparent;
	color: var(--lf-text);
	border-color: var(--lf-border);
}
.lf-hint-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5em;
	margin-top: 0.4em;
}
.lf-hint {
	display: inline-block;
	font-size: 0.85rem;
	opacity: 0.75;
	margin: 0;
}
.lf-hint-sep {
	opacity: 0.4;
	font-size: 0.85rem;
}
.lf-geo-link {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	background: transparent;
	border: none;
	padding: 0;
	color: var(--lf-primary);
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: underline;
	cursor: pointer;
	font-family: inherit;
}
.lf-geo-link:hover,
.lf-geo-link:focus {
	color: var(--lf-secondary);
	outline: none;
}
.lf-geo-link[disabled] {
	opacity: 0.6;
	cursor: wait;
}
.lf-geo-icon {
	flex-shrink: 0;
}
.lf-input-error {
	color: #b1331c;
	font-size: 0.95rem;
	margin-top: 0.5em;
	min-height: 1.2em;
}

/* Loading + spinner */
.lf-loading {
	display: flex;
	align-items: center;
	gap: 0.6em;
	padding: 0.8em 0;
}
.lf-loading[hidden] {
	display: none !important;
}
.lf-spinner {
	width: 18px;
	height: 18px;
	border: 2px solid var(--lf-border);
	border-top-color: var(--lf-primary);
	border-radius: 50%;
	animation: lf-spin 0.8s linear infinite;
}
@keyframes lf-spin {
	to { transform: rotate(360deg); }
}

/* Map */
.lf-map {
	width: 100%;
	height: 380px;
	margin: 0 0 1.2em;
	border: 1px solid var(--lf-border);
	border-radius: var(--lf-radius);
	overflow: hidden;
	position: relative;
	/* Critical for embedded maps on mobile: tells the browser to allow single-finger
	 * vertical pan to scroll the page, not the map. Two-finger pinch and drag still
	 * reach Leaflet because pan-y only suppresses single-finger gestures.
	 *
	 * Note: this also affects Leaflet's tile container inside .lf-map, which is what
	 * we actually want — the gesture is intercepted before Leaflet's touch handler runs. */
	touch-action: pan-y;
}
.lf-map .leaflet-container {
	touch-action: pan-y;
}

/* Mobile gesture hint: shown briefly when the user single-finger-touches the map.
 * Tells them to use two fingers, since single-finger pan is disabled on mobile so
 * the page can scroll past the map. */
.lf-map-gesture-hint {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: rgba(0, 0, 0, 0.78);
	color: #fff;
	padding: 0.7em 1.2em;
	border-radius: 6px;
	font-size: 0.95rem;
	font-weight: 600;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.18s ease-in-out;
	z-index: 9999;
	white-space: nowrap;
	max-width: 90%;
	text-align: center;
}
.lf-map-gesture-hint.lf-visible {
	opacity: 1;
}
.lf-map-legend {
	display: flex;
	gap: 1em;
	font-size: 0.85rem;
	margin: 0 0 1em;
	flex-wrap: wrap;
}
.lf-map-legend span::before {
	display: inline-block;
	width: 12px;
	height: 12px;
	margin-right: 0.4em;
	vertical-align: middle;
	content: "";
}
.lf-legend-pin::before {
	background: var(--lf-primary);
	border-radius: 50%;
}
.lf-legend-overlay::before {
	background: var(--lf-accent);
	border-radius: 50%;
	opacity: 0.5;
}

/* Headline */
.lf-results-headline {
	font-size: 1.35rem;
	margin: 0.5em 0 0.8em;
	color: var(--lf-text);
}
/* When focus lands on result content via mouse or programmatic means (not keyboard),
 * suppress the outline. Divi and many themes apply *:focus rules; we use !important
 * here because we explicitly want to win that cascade fight on these specific elements.
 * Keyboard tab navigation triggers :focus-visible and gets a normal outline. */
.lf-results-headline:focus:not(:focus-visible),
.lf-card-title:focus:not(:focus-visible),
.lf-no-match:focus:not(:focus-visible),
.lf-error:focus:not(:focus-visible),
.lf-results:focus:not(:focus-visible) {
	outline: none !important;
	box-shadow: none !important;
}

/* Cards */
.lf-cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1em;
}
.lf-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--lf-border);
	border-radius: var(--lf-radius);
	overflow: hidden;
	background: var(--lf-bg);
}
.lf-card-thumb {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #f4f4f4;
}
.lf-card-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* The virtual card's image is usually a logo, not a photo. Don't crop it. */
.lf-card-virtual .lf-card-thumb {
	background: var(--lf-bg);
}
.lf-card-virtual .lf-card-thumb img {
	object-fit: contain;
	padding: 1em;
}
.lf-card-body {
	padding: 1em 1.1em 1.2em;
	display: flex;
	flex-direction: column;
	gap: 0.35em;
	flex: 1 1 auto;
	min-width: 0;
}
.lf-card-title {
	font-size: 1.1rem;
	margin: 0 0 0.25em;
	color: var(--lf-primary);
}
.lf-card-address {
	font-size: 0.95rem;
	margin: 0;
	line-height: 1.35;
}
.lf-card-distance {
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--lf-secondary);
	margin: 0.4em 0 0.6em;
	display: flex;
	align-items: center;
	gap: 0.25em;
}
.lf-pin-icon {
	flex-shrink: 0;
	color: var(--lf-secondary);
}

/* Leaflet popup link */
.leaflet-popup-content .lf-popup {
	font-size: 0.95rem;
	line-height: 1.4;
}
.leaflet-popup-content .lf-popup-link {
	display: inline-block;
	margin-top: 0.4em;
	color: var(--lf-primary);
	font-weight: 600;
	text-decoration: underline;
}
.leaflet-popup-content .lf-popup-link:hover,
.leaflet-popup-content .lf-popup-link:focus {
	color: var(--lf-secondary);
}

/* Virtual IOP map Control — anchored to the map UI, always visible.
 * Tan/beige rounded button overlaid on the map (top-right by default) that opens
 * a small panel with a "Learn More" link when clicked. */
.lf-virtual-control {
	background: var(--lf-accent);
	border: 1px solid rgba(0,0,0,0.15);
	border-radius: var(--lf-radius);
	box-shadow: 0 1px 3px rgba(0,0,0,0.2);
	overflow: hidden;
	font-family: inherit;
	/* Width is determined by the closed-state button. The panel below inherits this
	 * width so opening the control never grows the container. */
	width: max-content;
}
.lf-virtual-control-btn {
	display: flex;
	width: 100%;
	align-items: center;
	gap: 0.4em;
	padding: 0.55em 0.85em;
	background: transparent;
	border: none;
	color: #5a4a2c;
	font-size: 0.85rem;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	font-family: inherit;
	white-space: nowrap;
}
.lf-virtual-control-btn:hover,
.lf-virtual-control-btn:focus-visible {
	background: rgba(0,0,0,0.06);
	outline: none;
}
.lf-virtual-control-icon {
	color: var(--lf-secondary);
	flex-shrink: 0;
}
.lf-virtual-control-state {
	font-weight: 700;
}
.lf-virtual-control-panel {
	padding: 0.6em 0.85em 0.7em;
	border-top: 1px solid rgba(0,0,0,0.1);
	background: #fff;
	/* Match the closed-state button width — no growing on open. */
	width: 100%;
	box-sizing: border-box;
}
.lf-virtual-control-panel[hidden] {
	display: none !important;
}
.lf-virtual-control-link,
.lf-virtual-control-link:link,
.lf-virtual-control-link:visited {
	display: inline-block !important;
	color: var(--lf-primary) !important;
	font-weight: 600 !important;
	text-decoration: underline !important;
	font-size: 0.95rem !important;
	line-height: 1.4 !important;
	white-space: nowrap !important;
}
.lf-virtual-control-link:hover,
.lf-virtual-control-link:focus {
	color: var(--lf-secondary) !important;
	text-decoration: underline !important;
}

/* On narrow viewports keep the control compact — drop the state name to save space. */
@media (max-width: 520px) {
	.lf-virtual-control-state {
		display: none;
	}
}
.lf-card-cta {
	display: inline-block;
	margin-top: auto;
	padding: 0.65em 1em;
	background: var(--lf-button-bg);
	color: var(--lf-button-text);
	text-decoration: none;
	border-radius: var(--lf-radius);
	font-weight: 600;
	font-size: 0.95rem;
	min-height: 44px;
	line-height: 1.6;
	align-self: flex-start;
	text-align: center;
}
.lf-card-cta:hover,
.lf-card-cta:focus {
	filter: brightness(0.95);
	outline: 2px solid var(--lf-primary);
	outline-offset: 2px;
	color: var(--lf-button-text);
}
.lf-card-virtual {
	border-color: var(--lf-accent);
}
.lf-card-virtual .lf-card-title {
	color: var(--lf-secondary);
}
.lf-card-body-copy {
	font-size: 0.95rem;
	line-height: 1.45;
	margin-bottom: 0.4em;
}

/* No-match / errors */
.lf-no-match {
	background: #FFF7E6;
	border: 1px solid var(--lf-accent);
	border-radius: var(--lf-radius);
	padding: 1.2em 1.4em !important;
	font-size: 1rem;
	line-height: 1.5;
	margin: 0 !important;
}
.lf-no-match,
.lf-no-match p {
	margin: 0 !important;
	padding-bottom: 0 !important;
	padding-top: 0 !important;
}
/* Restore the no-match's own padding (the rule above zeroed it for safety). */
.lf-no-match {
	padding-top: 1.2em !important;
	padding-bottom: 1.2em !important;
}
.lf-no-match a {
	color: var(--lf-primary);
	font-weight: 600;
}
.lf-error {
	background: #FBEAE5;
	border: 1px solid #E5897A;
	color: #8C2C16;
	padding: 1.2em 1.4em !important;
	border-radius: var(--lf-radius);
	margin: 0 !important;
}
.lf-error,
.lf-error p {
	margin: 0 !important;
	padding-bottom: 0 !important;
	padding-top: 0 !important;
}
.lf-error {
	padding-top: 1.2em !important;
	padding-bottom: 1.2em !important;
}

/* Tablet */
@media (max-width: 980px) {
	.lf-cards {
		grid-template-columns: 1fr;
	}
	.lf-map {
		height: 320px;
	}
}
/* Mobile — cards already stack vertically by default; just adjust map and headline. */
@media (max-width: 767px) {
	.lf-map {
		height: 260px;
	}
	.lf-results-headline {
		font-size: 1.15rem;
	}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.lf-spinner {
		animation: none;
	}
}