/* ==========================================================================
   VIP Brand Finder
   Colors, corner roundness and fonts come from Settings → Brand Finder and are
   set as CSS variables on the .pbf wrapper. The fallbacks below match the
   Stevens Point Brewery site.
   Layout responds to the width of the space the finder sits in (container
   queries), so it works in a full-width section or a narrow theme column.
   ========================================================================== */

.pbf {
	--_accent: var(--pbf-accent, #b40628);
	--_button: var(--pbf-button, #b40628);
	--_button-text: var(--pbf-button-text, #fff);
	--_dark: var(--pbf-dark, #221f20);
	--_border: var(--pbf-border, #c4b9a2);
	--_arrow: var(--pbf-arrow, #221f20);
	--_results-bg: var(--pbf-results-bg, #fff);
	--_name: var(--pbf-name, var(--_dark));
	--_radius: var(--pbf-radius, 25px);

	container-type: inline-size;
	container-name: pbf;
}

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

/* ---------- Form ---------- */
.pbf .pbf-form {
	display: grid;
	grid-template-columns: 1fr;
	gap: 15px;
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 20px 20px;
}

@container pbf (min-width: 560px) {
	.pbf .pbf-form {
		grid-template-columns: 1fr 1fr;
	}
	.pbf .pbf-submit {
		grid-column: span 2;
	}
}

@container pbf (min-width: 1000px) {
	.pbf .pbf-form {
		grid-template-columns: repeat(5, 1fr);
	}
	.pbf .pbf-submit {
		grid-column: auto;
	}
}

.pbf .pbf-field {
	width: 100%;
	margin: 0;
	background-color: #fff;
	border: 1px solid var(--_dark);
	border-radius: var(--_radius);
	color: var(--_dark);
	font-family: var(--pbf-font);
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.4;
	padding: 0.675em 1em;
	box-shadow: none;
}

.pbf .pbf-field:focus-visible {
	outline: 2px solid var(--_accent);
	outline-offset: 2px;
}

.pbf .pbf-select {
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	padding-right: 2.5em;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
	background-size: 16px 12px;
	background-repeat: no-repeat;
	background-position: right 1em center;
}

.pbf .pbf-submit {
	background: var(--_button);
	border: 2px solid var(--_button);
	border-radius: var(--_radius);
	color: var(--_button-text);
	cursor: pointer;
	font-family: var(--pbf-font);
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	line-height: 1.65;
	padding: 11px 20px;
	min-width: 150px;
	text-transform: uppercase;
	transition: filter 0.15s;
}

.pbf .pbf-submit:hover {
	filter: brightness(0.9);
}

.pbf .pbf-submit:focus-visible {
	outline: 2px solid var(--_button-text);
	outline-offset: -5px;
}

.pbf .pbf-submit:disabled {
	opacity: 0.7;
	cursor: wait;
}

/* ---------- Results header ---------- */
.pbf .pbf-results-wrap {
	background: var(--_results-bg);
	margin-top: 6em;
}

.pbf .pbf-arrow {
	display: none;
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-top: 50px solid var(--_arrow);
	margin: 0 auto;
}

.pbf .pbf-finder.pbf-has-message .pbf-arrow {
	display: block;
}

.pbf .pbf-count {
	text-align: center;
	color: var(--_dark);
	font-family: var(--pbf-font);
	font-size: 1.5rem;
	font-weight: 500;
}

.pbf .pbf-finder.pbf-has-message .pbf-count {
	padding: 2em 20px 1em;
}

.pbf .pbf-online {
	text-align: center;
	font-family: var(--pbf-font);
	padding: 0 20px 1em;
}

.pbf .pbf-online a {
	color: var(--_accent);
}

/* ---------- Layout: map on top + list (narrow), list | map (wide) ---------- */
.pbf .pbf-layout {
	display: none;
	max-width: 1400px;
	margin: 1em auto 0;
	padding: 0 20px 4em;
}

.pbf .pbf-layout.pbf-has-results {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.pbf .pbf-list {
	position: relative; /* card offsetTop is measured inside the list */
	max-height: 70vh;
	overflow-y: auto;
	padding-right: 4px;
	scrollbar-width: thin;
	scrollbar-color: var(--_dark) transparent;
}

.pbf .pbf-map {
	order: -1;
	height: 340px;
	border: 1px solid var(--_border);
	z-index: 0; /* keep the map under the site header and menus */
	scroll-margin-top: 80px;
}

/* Wide: list | map side by side. Heights are plain values (not variables) and
   items don't stretch, so a long list scrolls instead of growing the page. */
@container pbf (min-width: 860px) {
	.pbf .pbf-layout.pbf-has-results {
		display: grid;
		grid-template-columns: minmax(300px, 400px) 1fr;
		align-items: start;
		gap: 30px;
	}
	.pbf .pbf-list {
		height: auto;
		max-height: 640px;
		padding-right: 8px;
	}
	.pbf .pbf-map {
		order: 0;
		height: 640px;
		align-self: start;
	}
}

.pbf .pbf-finder.pbf-searching .pbf-layout {
	opacity: 0.5;
	transition: opacity 0.2s;
}

/* ---------- Result cards ---------- */
.pbf .pbf-card {
	position: relative;
	border: 1px solid var(--_border);
	color: var(--_dark);
	font-family: var(--pbf-font);
	font-size: 1.1rem;
	font-weight: 500;
	line-height: 1.4;
	margin: 2px 2px 16px; /* room for the selected card's outline inside the scrolling list */
	padding: 22px 20px 24px;
	text-align: center;
	cursor: pointer;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.pbf .pbf-card:hover,
.pbf .pbf-card:focus-visible {
	border-color: var(--_dark);
	outline: none;
}

.pbf .pbf-card.pbf-active {
	border-color: var(--_accent);
	box-shadow: 0 0 0 2px var(--_accent);
}

.pbf .pbf-card-title {
	color: var(--_name);
	font-family: var(--pbf-heading-font);
	font-size: 1.6rem;
	line-height: 1.2;
	margin: 0 0 5px;
	padding: 0 28px; /* room for the number badge */
}

.pbf .pbf-miles {
	margin: 0 0 1em;
}

.pbf .pbf-meta {
	padding-top: 14px;
	border-top: 1px solid var(--_border);
	text-transform: capitalize;
}

.pbf .pbf-meta p {
	margin: 0 0 1em;
}

.pbf .pbf-directions {
	display: inline-flex;
	justify-content: center;
	background: var(--_dark);
	border: 2px solid var(--_dark);
	border-radius: var(--_radius);
	color: #fff;
	font-family: var(--pbf-font);
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	line-height: 1.65;
	padding: 11px 20px;
	min-width: 150px;
	text-decoration: none;
	text-transform: uppercase;
}

.pbf .pbf-directions:hover,
.pbf .pbf-directions:focus {
	background: #fff;
	color: var(--_dark);
	text-decoration: none;
}

.pbf .pbf-num {
	position: absolute;
	top: 14px;
	left: 14px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--_accent);
	color: #fff;
	font-family: var(--pbf-font);
	font-size: 0.9rem;
	font-weight: 700;
	line-height: 30px;
	text-align: center;
}

/* ---------- Map pins ---------- */
.pbf-pin-wrap {
	background: none;
	border: 0;
}

.pbf-pin {
	position: absolute;
	top: 0;
	left: 0;
	width: 32px;
	height: 32px;
	border-radius: 50% 50% 50% 0;
	background: var(--pbf-pin, #b40628);
	border: 2px solid #fff;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
	transform: rotate(-45deg);
	box-sizing: border-box;
	transition: transform 0.15s;
}

.pbf-pin > span {
	display: block;
	transform: rotate(45deg);
	color: #fff;
	font: 700 13px/28px Helvetica, Arial, sans-serif;
	font-family: var(--pbf-font, Helvetica, Arial, sans-serif);
	text-align: center;
}

.pbf-pin-active .pbf-pin,
.pbf-pin-wrap:hover .pbf-pin,
.pbf-pin-wrap:focus .pbf-pin {
	transform: rotate(-45deg) scale(1.2);
	background: var(--_dark, #1f1d1d);
}

/* ---------- Popup ---------- */
.pbf-popup {
	display: flex;
	flex-direction: column;
	gap: 4px;
	color: var(--_dark);
	font-family: var(--pbf-font);
	font-size: 0.9rem;
	font-weight: 500;
	line-height: 1.4;
	text-transform: capitalize;
	min-width: 180px;
}

.pbf-popup strong {
	font-family: var(--pbf-heading-font);
	font-size: 1.2rem;
	font-weight: 400;
	letter-spacing: 0.02em;
}

.pbf .leaflet-container .pbf-popup a {
	color: var(--_accent);
}

.pbf .leaflet-container a.pbf-popup-dir {
	align-self: flex-start;
	margin-top: 6px;
	padding: 6px 14px;
	border-radius: var(--_radius);
	background: var(--_dark);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
}

/* ---------- Misc ---------- */
.pbf .pbf-notice {
	text-align: center;
	padding: 1em;
}

.pbf .pbf-sr-only {
	position: absolute;
	left: -10000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}