/*!
 * Book My Leads Directory — front-end styles
 *
 * Self-contained, low-specificity rules so themes can override by adding
 * their own `.bookmyleads-directory` styling later. All sizes use rem so the parent
 * theme's base font-size still wins.
 */

.bookmyleads-directory {
	max-width: 1200px;
	margin: 0 auto;
	padding: 1rem;
	box-sizing: border-box;
	color: #1f2937;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, sans-serif;
}

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

/* ---------- Header ---------------------------------------------------- */

.bookmyleads-directory__header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-bottom: 1rem;
}

.bookmyleads-directory__heading {
	font-size: 1.75rem;
	line-height: 1.2;
	margin: 0;
	color: #111827;
	font-weight: 700;
}

.bookmyleads-directory__cta {
	display: inline-block;
	padding: 0.625rem 1rem;
	background: #2563eb;
	color: #fff !important;
	text-decoration: none !important;
	border-radius: 0.375rem;
	font-weight: 600;
	font-size: 0.9rem;
	transition: background 0.15s ease;
}
.bookmyleads-directory__cta:hover,
.bookmyleads-directory__cta:focus {
	background: #1d4ed8;
	color: #fff !important;
}

/* ---------- Pre-launch announcement banner --------------------------- *
 * Sits at the very top of the directory section, above the H1. Deep blue
 * so it doesn't fight with the amber early-bird promo box further down.
 *
 * Layout:
 *   [ scrolling marquee text                            ] [ CTA pill ]
 *
 * The marquee uses two duplicate copies of the message inside a track
 * that animates from translateX(0) to translateX(-50%). Because the two
 * copies are identical width, the visual result is a seamless infinite
 * loop. `prefers-reduced-motion: reduce` users get a static message
 * instead — no animation triggered.
 *
 * Remove the banner + its render call in render-grid.php once the
 * directory goes public.
 */

.bookmyleads-directory__announcement {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	margin: 0 0 1.25rem;
	padding: 0.625rem 1rem;
	background: #1e3a8a;
	color: #ffffff;
	border-radius: 0.5rem;
	overflow: hidden;
	font-weight: 500;
	line-height: 1.4;
}

/* Viewport that clips the scrolling track. flex:1 lets it shrink when
 * the CTA needs more room (it doesn't, but it makes the layout safe
 * against narrow phones). */
.bookmyleads-directory__announcement-marquee {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 24px,
		#000 calc(100% - 24px),
		transparent 100%
	);
	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 24px,
		#000 calc(100% - 24px),
		transparent 100%
	);
}

.bookmyleads-directory__announcement-track {
	display: inline-flex;
	gap: 4rem;
	padding-right: 4rem; /* breathing room before the loop wraps */
	white-space: nowrap;
	animation: bookmyleads-directory-marquee 28s linear infinite;
	will-change: transform;
}

/* Pause the scroll when the user hovers — gives them time to read it
 * if they want, then resumes when their pointer leaves. */
.bookmyleads-directory__announcement:hover .bookmyleads-directory__announcement-track,
.bookmyleads-directory__announcement:focus-within .bookmyleads-directory__announcement-track {
	animation-play-state: paused;
}

.bookmyleads-directory__announcement-item {
	color: #ffffff;
	font-size: 0.9rem;
}

@keyframes bookmyleads-directory-marquee {
	from {
		transform: translate3d(0, 0, 0);
	}
	to {
		transform: translate3d(-50%, 0, 0);
	}
}

/* Accessibility: users who've asked the OS for less motion see a static
 * message. Drop the duplicate item so they don't see "📢 ... 📢 ...". */
@media (prefers-reduced-motion: reduce) {
	.bookmyleads-directory__announcement-track {
		animation: none;
		transform: none;
		padding-right: 0;
	}
	.bookmyleads-directory__announcement-item:nth-child(2) {
		display: none;
	}
	.bookmyleads-directory__announcement-marquee {
		mask-image: none;
		-webkit-mask-image: none;
	}
}

/* High specificity + !important so the WP theme's `a` underline rule
 * can't paint a line under the CTA pill (same fix pattern as the
 * early-bird promo box). */
a.bookmyleads-directory__announcement-cta,
a.bookmyleads-directory__announcement-cta:hover,
a.bookmyleads-directory__announcement-cta:focus {
	flex-shrink: 0;
	background: #fbbf24;
	color: #1f2937 !important;
	padding: 0.3rem 0.875rem;
	border-radius: 999px;
	font-weight: 600;
	font-size: 0.85rem;
	text-decoration: none !important;
	white-space: nowrap;
}
a.bookmyleads-directory__announcement-cta:hover,
a.bookmyleads-directory__announcement-cta:focus {
	background: #f59e0b;
}

/* Mobile tweaks — smaller padding/text and a faster loop so the message
 * cycles more often in the narrower viewport. */
@media (max-width: 540px) {
	.bookmyleads-directory__announcement {
		padding: 0.5rem 0.75rem;
		gap: 0.625rem;
		border-radius: 0.375rem;
	}
	.bookmyleads-directory__announcement-item {
		font-size: 0.8rem;
	}
	.bookmyleads-directory__announcement-track {
		gap: 2.5rem;
		padding-right: 2.5rem;
		animation-duration: 18s;
	}
	a.bookmyleads-directory__announcement-cta,
	a.bookmyleads-directory__announcement-cta:hover,
	a.bookmyleads-directory__announcement-cta:focus {
		font-size: 0.78rem;
		padding: 0.25rem 0.7rem;
	}
}

/* ---------- Tagline (owner-acquisition only) -------------------------- *
 * Sits between the H1 and the intro paragraph. Sized between the two —
 * smaller than H1, larger than body — so it reads as a clear sub-statement
 * of the heading. Carries the "free" message so it lands above the
 * pricing promo box and answers the unspoken "is the URL free?" question
 * before the prospect's eye scrolls down.
 */

.bookmyleads-directory__tagline {
	margin: 0.5rem 0 0.75rem;
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.25;
	color: #1f2937;
	max-width: 32ch;
}

@media (max-width: 640px) {
	.bookmyleads-directory__tagline {
		font-size: 1.2rem;
	}
}

/* ---------- Intro paragraph ------------------------------------------- */

.bookmyleads-directory__intro {
	margin: 0.25rem 0 1.25rem;
	font-size: 1rem;
	line-height: 1.6;
	color: #4b5563;
	max-width: 70ch;
}

/* ---------- Category chip strip --------------------------------------- */

.bookmyleads-directory__categories {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 1.25rem;
}

.bookmyleads-directory__categories-label {
	font-size: 0.85rem;
	font-weight: 600;
	color: #4b5563;
	margin-right: 0.25rem;
}

.bookmyleads-directory__category-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.4rem 0.85rem;
	background: #fff;
	color: #1f2937 !important;
	border: 1px solid #d1d5db;
	border-radius: 999px;
	font-size: 0.875rem;
	text-decoration: none !important;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.bookmyleads-directory__category-chip:hover,
.bookmyleads-directory__category-chip:focus {
	background: #eff6ff;
	border-color: #2563eb;
	color: #2563eb !important;
}

.bookmyleads-directory__category-chip--active {
	background: #2563eb;
	border-color: #2563eb;
	color: #fff !important;
}

.bookmyleads-directory__chip-count {
	color: #6b7280;
	font-size: 0.8rem;
}

.bookmyleads-directory__category-chip--active .bookmyleads-directory__chip-count {
	color: #c7d2fe;
}

/* ---------- Popular cities strip -------------------------------------- */

.bookmyleads-directory__city-strip {
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid #e5e7eb;
	font-size: 0.9rem;
	line-height: 1.8;
	color: #4b5563;
}

.bookmyleads-directory__city-strip-label {
	font-weight: 600;
	margin-right: 0.25rem;
}

.bookmyleads-directory__city-link {
	color: #2563eb;
	text-decoration: none;
}

.bookmyleads-directory__city-link:hover,
.bookmyleads-directory__city-link:focus {
	text-decoration: underline;
}

.bookmyleads-directory__city-link--active {
	font-weight: 600;
	color: #1d4ed8;
}

/* ---------- Filters --------------------------------------------------- */

.bml-filters {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 0.75rem 1rem;
	align-items: end;
	padding: 1rem;
	background: #f9fafb;
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	margin-bottom: 1.5rem;
}

.bml-filters__field {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.bml-filters__label {
	display: block;
	font-size: 0.8rem;
	font-weight: 600;
	color: #374151;
	margin-bottom: 0.25rem;
}

.bml-filters__select {
	width: 100%;
	padding: 0.5rem 0.75rem;
	font-size: 0.95rem;
	background: #fff;
	color: #111827;
	border: 1px solid #d1d5db;
	border-radius: 0.375rem;
	line-height: 1.3;
}
.bml-filters__select:focus {
	outline: 2px solid #2563eb;
	outline-offset: 2px;
}

.bml-filters__reset {
	padding: 0.5rem 1rem;
	background: #fff;
	color: #374151;
	border: 1px solid #d1d5db;
	border-radius: 0.375rem;
	font-size: 0.9rem;
	cursor: pointer;
	height: 2.4rem;
	align-self: end;
}
.bml-filters__reset:hover {
	background: #f3f4f6;
}

/* ---------- Grid ------------------------------------------------------ */

.bookmyleads-directory__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 1rem;
}
.bookmyleads-directory__grid[aria-busy="true"] {
	opacity: 0.5;
	transition: opacity 0.15s ease;
}

.bookmyleads-directory__status {
	grid-column: 1 / -1;
	text-align: center;
	padding: 2rem 1rem;
	color: #6b7280;
	font-size: 0.95rem;
}
.bookmyleads-directory__status--error {
	color: #991b1b;
}

/* ---------- Card ------------------------------------------------------ */

.bml-card {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	overflow: hidden;
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
	display: flex;
	flex-direction: column;
}
.bml-card:hover {
	transform: translateY(-2px);
	border-color: #2563eb;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.bml-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit !important;
	text-decoration: none !important;
}

.bml-card__media {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f3f4f6;
	height: 120px;
	overflow: hidden;
}
.bml-card__logo {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}
.bml-card__logo--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	background: #e5e7eb;
	color: #1f2937;
	font-size: 1.75rem;
	font-weight: 700;
	border-radius: 50%;
	text-transform: uppercase;
}

.bml-card__body {
	padding: 0.875rem 1rem 1rem;
	display: flex;
	flex-direction: column;
	flex: 1;
}

/* `!important` on font sizing because most WordPress themes ship
 * aggressive H3 styles (display sizes for hero sections etc.) that, with
 * higher specificity than `.bml-card__name`, would otherwise swell card
 * titles to 28px+ and make the grid look unbalanced. */
.bml-card__name {
	font-size: 1.05rem !important;
	line-height: 1.3 !important;
	margin: 0 0 0.25rem !important;
	color: #111827;
	font-weight: 700;
}

.bml-card__location,
.bml-card__industry,
.bml-card__services,
.bml-card__about {
	margin: 0 0 0.25rem;
	font-size: 0.85rem;
	color: #4b5563;
	line-height: 1.35;
}

.bml-card__sep {
	margin-right: 0.2rem;
}

.bml-card__industry {
	color: #6b7280;
	font-style: italic;
}

.bml-card__services {
	color: #374151;
	font-weight: 500;
}

.bml-card__about {
	color: #4b5563;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* .bml-card__cta — removed when /businesses pivoted to owner-acquisition.
 * The "Book now →" CTA on each card was customer-facing; the page is now a
 * social-proof showcase for prospective business owners, so cards link to
 * the public quote request page silently (whole card is one tappable surface,
 * opens in a new tab). Keep the rule out so a future re-add doesn't get
 * orphan styling. */

/* ---------- Social-proof framing (unfiltered owner view) ------------- *
 * Sits between the filter form and the card grid. Reframes the grid as
 * "see who's already using us" rather than a customer-facing directory.
 */

.bookmyleads-directory__proof-heading {
	margin: 1.5rem 0 0.25rem;
	font-size: 1.25rem;
	font-weight: 600;
	color: #1f2937;
}

.bookmyleads-directory__proof-sub {
	margin: 0 0 1rem;
	font-size: 0.9rem;
	color: #6b7280;
	line-height: 1.5;
}

/* ---------- Pagination ----------------------------------------------- */

.bookmyleads-directory__pagination {
	margin-top: 1.5rem;
	display: flex;
	justify-content: center;
}

.bookmyleads-directory__load-more {
	padding: 0.625rem 1.5rem;
	background: #fff;
	color: #2563eb;
	border: 1px solid #2563eb;
	border-radius: 0.375rem;
	font-weight: 600;
	font-size: 0.95rem;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}
.bookmyleads-directory__load-more:hover:not(:disabled) {
	background: #2563eb;
	color: #fff;
}
.bookmyleads-directory__load-more:disabled {
	opacity: 0.6;
	cursor: wait;
}

/* ---------- Small screens -------------------------------------------- *
 * Comprehensive mobile fine-tuning: tighter outer padding, smaller
 * heading, single-column grid, smaller proof-heading, smaller header
 * CTA button. Everything else (announcement marquee, promo box,
 * tagline) has its own per-component mobile rule co-located with the
 * component's other styles.
 */

@media (max-width: 640px) {
	.bookmyleads-directory {
		padding: 0.625rem;
	}
	.bookmyleads-directory__heading {
		font-size: 1.4rem;
	}
	.bookmyleads-directory__cta {
		font-size: 0.85rem;
		padding: 0.5rem 0.875rem;
	}
	.bookmyleads-directory__intro {
		font-size: 0.95rem;
	}
	.bookmyleads-directory__categories-label {
		font-size: 0.8rem;
		flex-basis: 100%; /* drop label to its own line above the chips */
		margin-right: 0;
	}
	.bookmyleads-directory__category-chip {
		font-size: 0.8rem;
		padding: 0.35rem 0.7rem;
	}
	.bookmyleads-directory__proof-heading {
		font-size: 1.05rem;
	}
	.bookmyleads-directory__proof-sub {
		font-size: 0.85rem;
	}
	.bookmyleads-directory__grid {
		grid-template-columns: 1fr;
		gap: 0.75rem;
	}
}

/* ---------- Early-bird promo callout --------------------------------- *
 * Owner-acquisition card sitting between the intro paragraph and the
 * category chip strip. Whole element is one tappable <a> linking to
 * /setup?ref=bookmyleads-directory-promo. Soft amber palette so it stands out
 * without competing with the brand blues used elsewhere on the page.
 */

.bookmyleads-directory__promo {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 4px 16px;
	margin: 16px 0 24px;
	padding: 14px 18px;
	background: #fff8e1;
	border: 1px solid #ffd54f;
	border-radius: 12px;
	color: inherit;
	transition: background 0.15s ease, transform 0.15s ease;
}
/* `!important` because most WordPress themes apply
 * `.entry-content a { text-decoration: underline }` (or similar) with
 * higher specificity than our single-class selector. The whole promo box
 * is one big <a>, so without this override the theme paints underlines
 * across every text line inside it. The compound selector targets the
 * outer anchor + every inner span on idle/hover/focus. */
.bookmyleads-directory__promo,
.bookmyleads-directory__promo *,
.bookmyleads-directory__promo:hover,
.bookmyleads-directory__promo:hover *,
.bookmyleads-directory__promo:focus,
.bookmyleads-directory__promo:focus * {
	text-decoration: none !important;
}
.bookmyleads-directory__promo:hover,
.bookmyleads-directory__promo:focus {
	background: #fff3c4;
}
.bookmyleads-directory__promo-eyebrow {
	grid-column: 1;
	grid-row: 1;
	font-weight: 600;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #b78100;
}
.bookmyleads-directory__promo-headline {
	grid-column: 1;
	grid-row: 2;
	font-weight: 600;
	font-size: 1rem;
	color: #3a2c00;
	line-height: 1.3;
	margin-top: 4px;
}
.bookmyleads-directory__promo-body {
	grid-column: 1;
	grid-row: 3;
	font-size: 0.875rem;
	color: #5d4400;
	line-height: 1.4;
	margin-top: 4px;
}
.bookmyleads-directory__promo-cta {
	grid-column: 2;
	grid-row: 1 / span 3;
	align-self: center;
	background: #ffb300;
	color: #ffffff;
	padding: 10px 18px;
	border-radius: 999px;
	font-weight: 600;
	font-size: 0.875rem;
	white-space: nowrap;
}

@media (max-width: 540px) {
	.bookmyleads-directory__promo {
		grid-template-columns: 1fr;
	}
	.bookmyleads-directory__promo-cta {
		grid-column: 1;
		grid-row: 4;
		justify-self: start;
		margin-top: 8px;
	}
}