/* =============================================================================
   Top Lenders Template - Standalone Stylesheet
   Based on listing-template.css — modify this file independently for
   Top Lenders-specific styling.
   ============================================================================= */


/* =============================================================================
   Listing Template - Variables
   ============================================================================= */

.listing,
.listing-wrapper {
	--listing-max-width: 1465px;
	--listing-width: 95.3%;
	--listing-padding-vertical: min(14.2vw, 96px);
	--card-flex-basis: 368px;
	--card-max-width: 480px;
	--card-aspect-ratio: 386 / 260;
	--card-box-shadow: 4px 4px 6px 1px rgba(74, 73, 73, 0.1);
	--card-box-shadow-hover: 6px 6px 12px 2px rgba(74, 73, 73, 0.15);
	--card-gap: 78px;
	--input-height: 48px;
	--border-standard: 1px solid var(--custom-black);
}

/* =============================================================================
   Listing Wrapper
   ============================================================================= */

.listing-wrapper {
	display: flex;
	flex-direction: column;

	.listing-filter-section {
		background-color: var(--custom-deeper-blue);
		width: 100%;
		margin: 0 auto;
		padding: 48px 24px;
	}

	.listing-results {
		background-color: var(--custom-light-blue);
	}
}

/* =============================================================================
   Listing - Base Styles
   ============================================================================= */

.listing {
	background-color: var(--custom-light-blue);
	padding-bottom: var(--listing-padding-vertical);
	padding-top: var(--listing-padding-vertical);

	.listing__container {
		display: flex;
		position: relative;
	}

	.listing__cards {
		width: var(--listing-width);
		max-width: var(--listing-max-width);
		justify-self: center;
		margin: 0 auto;
	}

	.listing__cards-grid {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: stretch;
		gap: var(--card-gap);
		margin: 0 auto;
		width: 100%;
	}

	.listing__card {
		flex: 1 1 var(--card-flex-basis);
		min-width: var(--card-flex-basis);
		max-width: var(--card-max-width);
		aspect-ratio: var(--card-aspect-ratio);
		padding: 16px 16px 0;
		/* No bottom padding to allow flush badge */
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		position: relative;
		box-shadow: var(--card-box-shadow);
		transition: box-shadow 0.3s ease;
		overflow: hidden;
		/* Ensure badge doesn't spill out */
	}

	.listing__card--lender {
		aspect-ratio: auto !important;
		min-height: 386px;
		padding: 0 !important;
		/* Total padding control for lender cards */
	}

	.listing__card--default {
		border-radius: 0;
		background-color: var(--custom-white);

		&:hover {
			box-shadow: var(--card-box-shadow-hover);
		}
	}

	/* Affordable properties cards need bottom breathing room */
	.listing__card--default:not(.listing__card--lender) {
		aspect-ratio: auto;
		min-height: 291px;
		padding-bottom: 24px;
	}

	.listing__card--placeholder {
		flex: 1 1 var(--card-flex-basis);
		min-width: var(--card-flex-basis);
		max-width: var(--card-max-width);
		aspect-ratio: var(--card-aspect-ratio);
		background-color: var(--custom-neutral-1);
		border-radius: 0 64px;
		pointer-events: none;
		box-shadow: none;
	}

	.listing__card-header {
		display: flex;
		align-items: center;
		gap: 20px;
		margin-bottom: 8px;
	}

	.listing__card-headshot-container {
		width: 100px;
		height: 100px;
		flex-shrink: 0;
		background-color: var(--custom-neutral-2);
		border-radius: 72px;
		overflow: hidden;
		display: flex;
		/* Added for fallback svg centering */
		align-items: center;
		justify-content: center;
	}

	.listing__card-headshot-container--fallback {
		background: linear-gradient(0deg, var(--custom-jade, #269A8C) 0%, var(--custom-jade, #269A8C) 100%);

		svg {
			width: 29px;
			height: 34px;
		}
	}

	.listing__card-headshot {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.listing__card-header-text {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.listing__card-heading {
		font-size: 1.5rem;
		font-weight: 700;
		line-height: 1.2;
		margin: 0;
		color: var(--custom-black);
		overflow-wrap: break-word;
	}

	.listing__card-subtitle,
	.listing__card-nmls {
		font-size: 16px;
		font-style: normal;
		font-weight: 500;
		line-height: 24px;
		letter-spacing: 0.32px;
		color: var(--custom-black);
		margin: 0;
	}

	.listing__card-separator {
		border: 0;
		border-top: 2px solid var(--custom-sunflower);
		margin: 0 0 20px 0;
	}

	.listing__card-content {
		flex: 1;
		margin-bottom: 24px;
		color: var(--custom-text-dark);

		p {
			margin: 0 0 12px 0;
			display: flex;
			align-items: center;
			gap: 12px;
			font-size: 16px;
			font-style: normal;
			font-weight: 500;
			line-height: 24px;
			letter-spacing: 0.32px;

			&:last-child {
				margin-bottom: 0;
			}
		}

		svg {
			width: 20px;
			height: 20px;
			flex-shrink: 0;

			path {
				fill: var(--custom-black);
			}
		}

		a {
			color: var(--custom-navy);
			text-decoration: none;
			word-break: break-all;

			&:hover {
				color: var(--custom-black);
				text-decoration: underline;
			}
		}
	}

	.listing__card-button-wrapper {
		margin-top: auto;
		display: flex;
		align-items: flex-end;
	}

	.listing__card-badge {
		height: 40px;
		background-color: var(--custom-jade);
		color: var(--custom-white);
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		/* Spacing between icon and text */
		font-size: 16px;
		font-style: normal;
		font-weight: 500;
		line-height: 24px;
		letter-spacing: 0.32px;
		margin-top: auto;
		width: 100%;
		flex-shrink: 0;

		svg {
			width: 24px;
			height: 24px;
			flex-shrink: 0;
		}
	}

	.listing__no-cards {
		text-align: center;
		color: var(--custom-text-dark);
		padding: 48px 24px;
		font-size: 1.125rem;
	}
}

/* Lender specific internal padding */
.listing__card--lender .listing__card-header {
	padding: 32px 32px 0;
}

.listing__card--lender .listing__card-separator {
	margin: 16px 32px 20px;
}

.listing__card--lender .listing__card-content {
	padding: 0 16px 16px;
}

/* =============================================================================
   Visual Base Styles (Mobile First)
   ============================================================================= */

/* Filter Section Decorative Elements */
.listing-filter-container {
	position: relative;
	max-width: 600px;
	margin: 0 auto;

	.top-leaf {
		position: absolute;
		top: -36px;
		left: -16px;
		width: 83px;
		height: 103px;
		background-color: var(--custom-sunflower);
		border-radius: 0 36px 0 36px;
		z-index: 0;
	}

	.listing-filter-content {
		position: relative;
		background-color: var(--custom-white);
		padding: 32px 24px;

		.bottom-leaf {
			display: none;
			position: absolute;
			bottom: -36px;
			right: -36px;
			width: 124px;
			height: 123px;
			background-color: var(--custom-tangerine);
			border-radius: 36px 0 36px 0;
			z-index: 2;
		}

		.small-bottom-leaf {
			display: none;
			position: absolute;
			bottom: -36px;
			right: 68px;
			width: 47px;
			height: 46px;
			border-radius: 0 8px 0 8px;
			background-color: var(--custom-sunflower);
			z-index: 3;
		}
	}
}

/* State Outline SVG (replaces filter form) */
.listing-filter-state-outline {
	display: block;
	width: 100%;
	height: 100%;
	margin: 24px auto 0;
}

.listing-results-select option {
	background-color: var(--custom-white);
	color: var(--custom-black);
}

.listing-filter-title {
	padding-bottom: 12px;
}

/* Results Header & Controls */
.listing-results-header {
	max-width: 600px;
	width: var(--listing-width);
	margin: 0 auto;
	padding-bottom: 24px;
	border-bottom: var(--border-standard);

	.listing-results-title {
		margin: 0 0 48px 0;
	}

	.listing-results-label {
		display: block;
		font-size: 0.875rem;
		margin-bottom: 8px;
		color: var(--custom-black);
		font-weight: 600;
	}

	.listing-results-control-group {
		margin-bottom: 24px;

			.listing-results-select {
				background-color: var(--custom-light-blue);
				color: var(--custom-black);
				width: 100%;
				border: var(--border-standard);
				height: var(--input-height);
				padding: 0 40px 0 12px;
				appearance: none;
				background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M12 15L16 11H8L12 15ZM12 22C10.6167 22 9.31667 21.7375 8.1 21.2125C6.88333 20.6875 5.825 19.975 4.925 19.075C4.025 18.175 3.3125 17.1167 2.7875 15.9C2.2625 14.6833 2 13.3833 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.3125 8.1 2.7875C9.31667 2.2625 10.6167 2 12 2C13.3833 2 14.6833 2.2625 15.9 2.7875C17.1167 3.3125 18.175 4.025 19.075 4.925C19.975 5.825 20.6875 6.88333 21.2125 8.1C21.7375 9.31667 22 10.6167 22 12C22 13.3833 21.7375 14.6833 21.2125 15.9C20.6875 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6875 15.9 21.2125C14.6833 21.7375 13.3833 22 12 22ZM12 20C14.2333 20 16.125 19.225 17.675 17.675C19.225 16.125 20 14.2333 20 12C20 9.76667 19.225 7.875 17.675 6.325C16.125 4.775 14.2333 4 12 4C9.76667 4 7.875 4.775 6.325 6.325C4.775 7.875 4 9.76667 4 12C4 14.2333 4.775 16.125 6.325 17.675C7.875 19.225 9.76667 20 12 20Z" fill="%23302F2F"/></svg>');
				background-repeat: no-repeat;
				background-position: right 12px center;
				background-size: 24px 24px;
			}

		#entries-per-page {
			background-color: var(--custom-light-blue);
			color: var(--custom-black);
		}
	}

	.listing-results-control-group--search {
		.listing-results-input {
			background-color: var(--custom-light-blue);
			color: var(--custom-black);
			width: 100%;
			height: var(--input-height);
			border: var(--border-standard);
			padding: 0 12px;
		}
	}
}

/* Export Buttons */
.listing-export-controls {
	max-width: 600px;
	width: var(--listing-width);
	margin: 0 auto;
}

@media (max-width: 959px) {
	.listing-export-controls {
		margin-top: 8px;
		margin-bottom: 8px;
	}

	.listing-export-button {
		margin-right: 12px;
	}

	.listing-results-header .listing-results-title {
		margin: 48px 0 48px 0;
	}

	/* Single-column cards: fill the 95.3% wide listing__cards container, capped at 480px */
	.listing .listing__card,
	.listing .listing__card--placeholder {
		flex: 0 0 100%;
		min-width: 0;
		max-width: 480px;
		margin-left: auto;
		margin-right: auto;
	}
}

/* Below card min-width: stack header vertically with image below text */
@media (max-width: 367px) {
	.listing .listing__card-header {
		flex-direction: column-reverse;
	}
}

.listing-export-button {
	display: flex;
	align-items: center;
	font-size: 0.875rem;
}

/* Ensure export icon/text stay vertically centered even if theme link rules override anchors */
.listing-export-controls .listing-export-button {
	display: inline-flex !important;
	align-items: center !important;
}

.listing-export-controls .listing-export-button .listing-export-icon {
	display: inline-flex;
	align-items: center;
	line-height: 0;
	padding-right: 10px;
}

/* =============================================================================
   Pagination Styles
   ============================================================================= */

.listing-pagination {
	margin: 48px auto;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 12px;
	width: 100%;
}

.listing-pagination-button {
	background-color: var(--custom-white);
	border: 1px solid var(--custom-blue);
	color: var(--custom-blue);
	padding: 8px;
	cursor: pointer;
	font-weight: 600;
	transition: all 0.2s ease;
	min-width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);

	&:hover:not(:disabled) {
		background-color: var(--custom-blue);
		color: var(--custom-white);
		transform: translateY(-2px);
	}

	&:disabled {
		opacity: 0.3;
		cursor: not-allowed;
		border-color: var(--custom-text-dark);
		color: var(--custom-text-dark);
		box-shadow: none;
	}

	&.is-active {
		background-color: var(--custom-blue);
		color: var(--custom-white);
		pointer-events: none;
	}

	&[data-page="prev"],
	&[data-page="next"] {
		padding: 0 12px;
		font-size: 1.5rem;
	}
}

.listing-pagination-info {
	margin: 0 16px;
	color: var(--custom-text-dark);
	font-weight: 500;
}

/* =============================================================================
   Dialog (Modal) Styles
   ============================================================================= */

.listing-dialog {
	border: none;
	padding: 0;
	background: transparent;
	max-width: 500px;
	width: 90%;
	overflow: visible;

	&::backdrop {
		background-color: rgba(0, 0, 0, 0.7);
	}
}

.listing-modal-content {
	background-color: var(--custom-white);
	width: 100%;
	padding: 40px;
	position: relative;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.listing-modal-close {
	position: absolute;
	top: 15px;
	right: 20px;
	background: none;
	border: none;
	font-size: 32px;
	line-height: 1;
	color: var(--custom-black);
	cursor: pointer;
	padding: 0;

	&:hover {
		color: var(--custom-blue);
	}
}

.listing-modal-title {
	font-size: 1.5rem;
	font-weight: 600;
	margin: 0 0 24px 0;
	text-transform: uppercase;
	color: var(--custom-black);
	border-bottom: 2px solid var(--custom-tangerine);
	padding-bottom: 12px;
}

.listing-modal-contact-item {
	margin-bottom: 20px;

	&:last-child {
		margin-bottom: 0;
	}

	strong {
		display: block;
		font-size: 0.875rem;
		text-transform: uppercase;
		color: var(--custom-text-dark);
		margin-bottom: 4px;
	}

	p {
		font-size: 1.25rem;
		font-weight: 500;
		color: var(--custom-blue);
		margin: 0;
	}

	a {
		font-size: 1.25rem;
		font-weight: 500;
		color: var(--custom-blue);
		text-decoration: none;

		&:hover {
			text-decoration: underline;
		}
	}
}

/* =============================================================================
   Media Queries (min-width, smallest to largest)
   ============================================================================= */

/* 960px */
@media (min-width: 960px) {
	.listing-wrapper {
		.listing-filter-section {
			padding: min(5.2vw, 70px) min(67px, 4.6vw) min(7.2vw, 96px) min(67px, 4.6vw);

			.listing-filter-container {
				display: flex;
				flex-direction: row;
				max-width: var(--listing-max-width);
				margin: 0 auto;

				.top-leaf {
					position: absolute;
					top: -36px;
					left: -36px;
					width: 83px;
					height: 103px;
					z-index: 0;
				}

				.listing-filter-content {
					position: relative;
					width: 50%;
					padding: min(3.2vw, 44px) min(4.6vw, 67px) min(4.2vw, 56px) min(4.6vw, 67px);

					.bottom-leaf {
						display: block;
						position: absolute;
						bottom: -36px;
						right: -36px;
						width: 124px;
						height: 123px;
						z-index: 2;
					}

					.small-bottom-leaf {
						display: block;
						position: absolute;
						bottom: -36px;
						right: 68px;
						width: 47px;
						height: 46px;
						z-index: 3;
					}
				}

				.listing-filter-map-column {
					width: 50%;
					margin-left: min(160px, 10.4vw);
					align-self: center;
				}

				.listing-filter-state-outline {
					width: 100%;
					height: 450px;
					max-width: none;
					margin: 0;
				}
			}
		}

		.listing-results {
			.listing-results-container {
				.listing-results-header {
					max-width: var(--listing-max-width);
					margin: 53px auto 0 auto;
					width: var(--listing-width);
					padding-bottom: 48px;

					.listing-results-controls {
						display: flex;
						flex-direction: row;
						align-items: flex-end;
						gap: 32px;

						.listing-results-control-group {
							margin-bottom: 0;

							.listing-results-select {
								width: 328px;
							}

							#entries-per-page {
								width: 138px;
							}
						}

						.listing-results-control-group--search {
							margin-left: auto;

							.listing-results-input {
								width: 306px;
							}
						}
					}
				}

				.listing-export-controls {
					display: flex;
					flex-wrap: wrap;
					justify-content: flex-end;
					gap: 48px;
					width: var(--listing-width);
					max-width: var(--listing-max-width);
					margin: 26px auto;
				}
			}
		}
	}
}
/* Lender card meta text for city/state + company */
.listing .listing__card-content p.listing__card-meta-text {
	font-family: "Redonda Condensed";
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: 24px;
	letter-spacing: 0.32px;
}

/* =============================================================================
   Top Lenders Template - Custom Overrides
   Add Top Lenders-specific style overrides below this line.
   ============================================================================= */

/* Tighten results header and listing spacing */
.listing-results-header {
	padding-bottom: 0;
}

.listing {
	padding-top: calc(var(--listing-padding-vertical) / 2);
}

@media (min-width: 960px) {
	.listing-wrapper {
		.listing-results {
			.listing-results-container {
				.listing-results-header {
					padding-bottom: 0;
				}
			}
		}
	}
}

/* Map region fill colors — both start as neutral-1 */
#wv-section-top path,
#wv-section-bottom path {
	fill: var(--custom-neutral-1);
	transition: fill 0.3s ease, filter 0.3s ease;
}

/* Hover: darken fill for both default and inactive states */
#wv-section-top:hover path,
#wv-section-bottom:hover path {
	filter: brightness(0.85);
}

/* Active: switch fill to jade */
#wv-section-top.region--active path,
#wv-section-bottom.region--active path {
	fill: var(--custom-jade);
}

/* Map region cursor */
#wv-section-top,
#wv-section-bottom {
	cursor: pointer;
}

/* Content swap fade transition */
.listing-results {
	transition: opacity 0.15s ease;
}

.listing-results.is-fading {
	opacity: 0;
}

/* Date period label in hero */
.listing-filter-period {
	margin-top: 16px;
	font-size: 14px;
	font-weight: 500;
	color: var(--custom-white);
	opacity: 0.85;
}

/* CTA sentence in text box */
.listing-filter-cta {
	margin-top: 20px;
	font-size: 15px;
	font-weight: 600;
	color: var(--custom-black);
}

/* Map column wrapper */
.listing-filter-map-column {
	display: flex;
	flex-direction: column;
}

/* CTA sentence below the map */
.listing-filter-map-cta {
	margin-top: 12px;
	font-size: 14px;
	font-weight: 500;
	color: var(--custom-white);
	text-align: center;
	width: 100%;
}

/* Disclaimer section at page bottom */
.listing-disclaimer {
	background-color: var(--custom-light-blue);
	padding: var(--listing-padding-vertical) 24px;

	.listing-disclaimer__inner {
		max-width: var(--listing-max-width);
		width: var(--listing-width);
		margin: 0 auto;
		font-size: 14px;
		line-height: 1.6;
		color: var(--custom-text-dark);
		border-top: 1px solid var(--custom-black);
		padding-top: 24px;

		p { margin: 0 0 12px 0; }
		p:last-child { margin-bottom: 0; }
	}
}

/* Company card heading — slightly smaller to accommodate longer names */
.listing__card--company .listing__card-heading {
	font-size: 1.25rem;
}

/* Company card logo + badge flush fix */
.listing__card--company {
	padding-bottom: 0 !important;

	.listing__card-badge {
		margin-left: -16px;
		margin-right: -16px;
		width: calc(100% + 32px);
	}

	.listing__card-logo-container {
		width: 160px;
		height: 96px;
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: var(--custom-neutral-2);
		border-radius: 6px;
		overflow: hidden;
		padding: 6px;
	}

	.listing__card-logo-container--fallback {
		background: linear-gradient(0deg, var(--custom-jade, #269A8C) 0%, var(--custom-jade, #269A8C) 100%);
		padding: 0;
	}

	.listing__card-logo {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}
}

/* Medal PNG icons in badge */
.listing__card-badge-medal {
	height: 40px !important;
	width: 40px !important;
	max-width: 40px !important;
	object-fit: contain;
	flex-shrink: 0;
}

/* Badge place variants */
.listing__card-badge--first {
	background-color: #B8860B; /* dark gold */
}

.listing__card-badge--second {
	background-color: #6B6B6B; /* silver */
}

.listing__card-badge--third {
	background-color: #8B4513; /* bronze */
}