/**
 * CMG Directory — Business Directory theme
 *
 * Every colour and space comes from Kadence global custom properties, with a
 * hard-coded fallback so the theme still renders correctly on a non-Kadence
 * install. Change the palette in Appearance > Customize > Colors and the
 * directory follows; there is no per-brand CSS in this file.
 *
 * Everything is scoped under .wpbdp-page / #wpbdp-main-box / .wpbdp-listing so
 * nothing here can leak into the rest of the site.
 */

.wpbdp-page,
#wpbdp-main-box,
.wpbdp-listing {
	--cmg-accent: var(--global-palette1, #003d5c);
	--cmg-accent-2: var(--global-palette2, #008594);
	--cmg-ink: var(--global-palette3, #1a202c);
	--cmg-body: var(--global-palette4, #2d3748);
	--cmg-muted: var(--global-palette5, #4a5568);
	--cmg-rule: var(--global-palette7, #dddddd);
	--cmg-sub: var(--global-palette8, #f9f9f9);
	--cmg-paper: var(--global-palette9, #ffffff);
	--cmg-gap: var(--global-md-spacing, 1.5rem);
	--cmg-gap-sm: var(--global-xs-spacing, 0.75rem);
	--cmg-radius: 3px;
}

/* ============================ page layout ============================ */

/* Controls live in a right rail so the category index starts at the top of the
   page instead of below a full-width search box. Six families divide evenly
   across the three columns this leaves, which the four-column grid never did. */
.cmg-dir-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: var(--cmg-gap);
	align-items: start;
}

.cmg-dir-layout__main {
	min-width: 0;
}

/* The sticky offset has to clear Kadence's sticky header or the rail pins
   underneath it. The main header row is the only sticky one (data-shrink="true",
   data-shrink-height="60") and it carries a 5px top border, so it occupies 65px
   once stuck and shrunk — which is the state it is always in while the rail is
   pinned. If the header's shrink height or top border changes in the customizer,
   this number is what needs changing with it. */
.cmg-dir-layout__rail {
	--cmg-sticky-header: 65px;
	position: sticky;
	top: calc(var(--cmg-sticky-header) + 1rem);
	display: flex;
	flex-direction: column;
	gap: var(--cmg-gap-sm);
}

/* The rail is narrow, so the plugin's search box has to stop being a wide row. */
.cmg-dir-layout__rail #wpbdp-main-box {
	margin-bottom: 0;
}

.cmg-dir-layout__rail .main-fields,
.cmg-dir-layout__rail .box-row,
.cmg-dir-layout__rail .box-col {
	display: block;
	width: auto;
	float: none;
}

.cmg-dir-layout__rail #wpbdp-main-box form {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.cmg-dir-rail__cta {
	border: 1px solid var(--cmg-rule);
	border-radius: var(--cmg-radius);
	background: var(--cmg-paper);
	padding: 1rem 1.15rem;
}

.cmg-dir-rail__cta-text {
	margin: 0 0 0.8rem;
	font-size: 0.87rem;
	line-height: 1.5;
	color: var(--cmg-body);
}

/* ---- one button family for all three rail controls ----
   The plugin styles its submit through `body .wpbdp-page input[type="submit"]`
   and Kadence adds its own button rules, both of which outrank a plain class.
   These selectors lead with `body` and keep the #wpbdp-main-box id so the rail
   wins locally without resorting to !important, which would leak. */

.cmg-dir-rail__cta-btn,
body .cmg-dir-layout__rail #wpbdp-main-box input[type="submit"],
body .cmg-dir-layout__rail .wpbdp-main-links .wpbdp-link {
	display: block;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	font-family: inherit;
	font-size: 0.85rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
	padding: 0.65rem 1rem;
	border-radius: 2px;
	border: 1px solid var(--cmg-accent);
	cursor: pointer;
}

/* All three controls are the same button: navy by default, turquoise on hover.
   The declarations carry !important because the plugin's own
   `body .wpbdp-page input[type="submit"]` styling kept winning on the submit in
   the browser even though it loses on paper — mine is both later and more
   specific. Rather than keep guessing at the cascade, this is pinned. It is
   scoped to .cmg-dir-layout__rail, which exists only inside the directory's
   right rail, so it cannot reach any other button on the site. */

.cmg-dir-rail__cta-btn,
body .cmg-dir-layout__rail #wpbdp-main-box input[type="submit"],
body .cmg-dir-layout__rail input.wpbdp-button[type="submit"],
body .cmg-dir-layout__rail .wpbdp-main-links .wpbdp-link {
	background: var(--cmg-accent, #003d5c) !important;
	border-color: var(--cmg-accent, #003d5c) !important;
	color: var(--cmg-paper, #ffffff) !important;
}

.cmg-dir-rail__cta-btn:hover,
.cmg-dir-rail__cta-btn:focus-visible,
body .cmg-dir-layout__rail #wpbdp-main-box input[type="submit"]:hover,
body .cmg-dir-layout__rail #wpbdp-main-box input[type="submit"]:focus-visible,
body .cmg-dir-layout__rail input.wpbdp-button[type="submit"]:hover,
body .cmg-dir-layout__rail input.wpbdp-button[type="submit"]:focus-visible,
body .cmg-dir-layout__rail .wpbdp-main-links .wpbdp-link:hover,
body .cmg-dir-layout__rail .wpbdp-main-links .wpbdp-link:focus-visible {
	background: var(--cmg-accent-2, #008594) !important;
	border-color: var(--cmg-accent-2, #008594) !important;
	color: var(--cmg-paper, #ffffff) !important;
}

/* Full-width submit means the advanced-search icon can no longer sit beside it. */
.cmg-dir-layout__rail .submit-btn {
	display: block;
}

.cmg-dir-layout__rail .wpbdp-advanced-search-link {
	display: flex;
	justify-content: center;
	margin-top: 0.45rem;
	color: var(--cmg-muted);
}

.cmg-dir-layout__rail .wpbdp-advanced-search-link:hover,
.cmg-dir-layout__rail .wpbdp-advanced-search-link:focus-visible {
	color: var(--cmg-accent);
}

.cmg-dir-layout__rail .keywords-field {
	width: 100%;
	box-sizing: border-box;
}

.cmg-dir-layout__rail .wpbdp-main-links {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	align-items: stretch;
}

.cmg-dir-rail__cta {
	border: 1px solid var(--cmg-rule);
	border-radius: var(--cmg-radius);
	background: var(--cmg-paper);
	padding: 1rem 1.15rem;
}

.cmg-dir-rail__cta-text {
	margin: 0 0 0.8rem;
	font-size: 0.87rem;
	line-height: 1.5;
	color: var(--cmg-body);
}

@media (max-width: 900px) {
	.cmg-dir-layout {
		grid-template-columns: 1fr;
	}

	/* Controls before the index once stacked — a search box below 37 categories
	   is a search box nobody finds. */
	.cmg-dir-layout__rail {
		position: static;
		order: -1;
	}
}

/* ============================ category families ============================ */

/* Explicit column counts, not auto-fit. auto-fit fitted a fourth column into the
   main area, which put the six families back to a ragged 4+2 — and, with the rail
   alongside, read as five columns across the page. Three gives an even 3+3. */
.cmg-dir-families {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--cmg-gap);
	margin: 0 0 var(--cmg-gap);
}

@media (min-width: 620px) {
	.cmg-dir-families {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1100px) {
	.cmg-dir-families {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.cmg-dir-family {
	border: 1px solid var(--cmg-rule);
	border-radius: var(--cmg-radius);
	background: var(--cmg-paper);
	padding: 1rem 1.15rem 1.15rem;
}

.cmg-dir-family__label {
	margin: 0 0 0.65rem;
	font-size: 1rem;
	line-height: 1.25;
	font-weight: 700;
	color: var(--cmg-accent);
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.cmg-dir-family__count {
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--cmg-muted);
	font-variant-numeric: tabular-nums;
}

.cmg-dir-family__list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--cmg-rule);
}

.cmg-dir-family__list li {
	margin: 0;
	border-bottom: 1px solid var(--cmg-rule);
}

.cmg-dir-family__list a {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.6rem;
	padding: 0.5rem 0;
	text-decoration: none;
	color: var(--cmg-body);
	font-size: 0.9rem;
	line-height: 1.35;
}

.cmg-dir-family__list a:hover,
.cmg-dir-family__list a:focus-visible {
	color: var(--cmg-accent-2);
}

/* Long category names must wrap, never clip or force a horizontal scrollbar. */
.cmg-dir-family__name {
	min-width: 0;
	overflow-wrap: anywhere;
}

.cmg-dir-family__n {
	flex: 0 0 auto;
	font-size: 0.75rem;
	font-variant-numeric: tabular-nums;
	color: var(--cmg-muted);
	background: var(--cmg-sub);
	border-radius: 2px;
	padding: 0.05rem 0.4rem;
}

/* ============================== index rows ============================== */

/* The whole row is one link, so the excerpt itself carries no padding — the <a>
   provides the inset, which makes the entire card a hit target rather than just
   the company name. */
.wpbdp-listing.wpbdp-listing-excerpt {
	padding: 0;
	border-bottom: 1px solid var(--cmg-rule);
}

.cmg-dir-row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.1rem 0.7rem;
	padding: 0.6rem 0.85rem;
	text-decoration: none;
	color: inherit;
}

.cmg-dir-row:hover,
.cmg-dir-row:focus-visible {
	background: var(--cmg-sub);
}

.cmg-dir-row__name {
	font-weight: 600;
	font-size: 0.97rem;
	line-height: 1.35;
	color: var(--cmg-ink);
	overflow-wrap: anywhere;
}

.cmg-dir-row:hover .cmg-dir-row__name {
	color: var(--cmg-accent-2);
}

.cmg-dir-row__place {
	font-size: 0.82rem;
	line-height: 1.35;
	color: var(--cmg-muted);
}

/* ============================== single listing ============================== */

.cmg-dir-single__head {
	display: flex;
	gap: var(--cmg-gap-sm);
	align-items: flex-start;
	flex-wrap: wrap;
	padding-bottom: 0.9rem;
	border-bottom: 2px solid var(--cmg-accent);
}

/* Advertisers pay for these logos, so they are never cropped, boxed or framed —
   and every advertiser gets the same visual weight, which means a standard
   HEIGHT and no cap on width.
   The 16 on file span 137-1200px wide, 45-403px tall, aspect 0.90 to 6.67.
   Fixed height + auto width holds each logo's own aspect ratio while giving them
   all identical presence: every one renders exactly 72px tall, and a wide banner
   simply runs wider — the 6.67 mark at ~480px, the 0.90 mark at ~65px. The only
   limit is max-width: 100%, so a logo can never overflow its column; below about
   770px the head wraps and the logo takes its own line before that ever bites.
   Only the monogram fallback gets a fixed square tile. */
.cmg-dir-single__media {
	flex: 0 1 auto;
	display: flex;
	align-items: center;
	min-width: 0;
	height: 72px;
}

.cmg-dir-single__media img {
	height: 72px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
	object-position: left center;
}

.cmg-dir-single__media .listing-thumbnail {
	padding: 0;
	margin: 0;
	border: 0;
	background: none;
}

@media (max-width: 600px) {
	.cmg-dir-single__media,
	.cmg-dir-single__media img {
		height: 56px;
	}
}

.cmg-dir-single__media--mono {
	flex: 0 0 80px;
	width: 80px;
	height: 80px;
	display: grid;
	place-items: center;
	border-radius: var(--cmg-radius);
	background: var(--cmg-accent);
	border: 1px solid var(--cmg-accent);
}

.cmg-dir-single__mono {
	color: var(--cmg-paper);
	font-weight: 700;
	font-size: 1.6rem;
}

.cmg-dir-single__heading {
	flex: 1 1 260px;
	min-width: 0;
}

.cmg-dir-single__eyebrow {
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 0.25rem;
}

.cmg-dir-single__eyebrow a {
	color: var(--cmg-accent-2);
	text-decoration: none;
}

.cmg-dir-single__title {
	margin: 0;
	font-size: clamp(1.4rem, 3vw, 1.9rem);
	line-height: 1.2;
	color: var(--cmg-ink);
}

.cmg-dir-contact {
	margin: var(--cmg-gap-sm) 0 0;
	background: var(--cmg-sub);
	border: 1px solid var(--cmg-rule);
	border-radius: var(--cmg-radius);
	padding: 1rem 1.15rem;
}


.cmg-dir-contact__dl {
	display: grid;
	grid-template-columns: minmax(5.5rem, auto) 1fr;
	gap: 0.4rem 1rem;
	margin: 0;
	font-size: 0.93rem;
}

.cmg-dir-contact__dl dt {
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cmg-muted);
	padding-top: 0.18rem;
}

.cmg-dir-contact__dl dd {
	margin: 0;
	color: var(--cmg-ink);
	overflow-wrap: anywhere;
}

.cmg-dir-contact__dl a {
	color: var(--cmg-accent);
}

.cmg-dir-single__body {
	margin-top: var(--cmg-gap-sm);
	color: var(--cmg-body);
}

.cmg-dir-single__body:empty {
	display: none;
}




/* The plugin's back control on a single listing. It inherits Business Directory's
   own accent (a red/orange), and a single listing does not render through
   page.tpl.php, so the rail's button rules never reach it. Same family, sized to
   its content rather than full width. Pinned for the same reason as the rail and
   scoped to .wpbdp-goback, which exists nowhere else. */
body .wpbdp-goback a {
	display: inline-block;
	font-family: inherit;
	font-size: 0.85rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none !important;
	padding: 0.55rem 1rem;
	border-radius: 2px;
	border: 1px solid var(--cmg-accent, #003d5c) !important;
	background: var(--cmg-accent, #003d5c) !important;
	color: var(--cmg-paper, #ffffff) !important;
}

body .wpbdp-goback a:hover,
body .wpbdp-goback a:focus-visible {
	background: var(--cmg-accent-2, #008594) !important;
	border-color: var(--cmg-accent-2, #008594) !important;
	color: var(--cmg-paper, #ffffff) !important;
}

body .listing-actions {
	margin-bottom: var(--cmg-gap-sm, 0.75rem);
}

/* ============================ plugin chrome ============================ */

#wpbdp-main-box {
	background: var(--cmg-sub);
	border: 1px solid var(--cmg-rule);
	border-radius: var(--cmg-radius);
	padding: 0.9rem 1rem;
	margin-bottom: var(--cmg-gap);
}

#wpbdp-main-box .keywords-field {
	width: 100%;
	border: 1px solid var(--cmg-rule);
	border-radius: 2px;
	padding: 0.55rem 0.7rem;
}

.wpbdp-main-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	align-items: center;
}

.wpbdp-main-links .wpbdp-link {
	color: var(--cmg-accent);
	text-decoration: none;
	font-size: 0.9rem;
}

/* Visible keyboard focus everywhere this theme owns. */
.wpbdp-page a:focus-visible,
.cmg-dir-family__list a:focus-visible,
.cmg-dir-row:focus-visible,
#wpbdp-main-box :focus-visible {
	outline: 2px solid var(--cmg-accent-2);
	outline-offset: 2px;
}

/* ================================ responsive ================================ */

@media (max-width: 600px) {



	.cmg-dir-contact__dl {
		grid-template-columns: 1fr;
		gap: 0.15rem;
	}

	.cmg-dir-contact__dl dt {
		padding-top: 0.5rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wpbdp-page * {
		transition: none !important;
		animation: none !important;
	}
}

/* ================================== print ================================== */

@media print {
	#wpbdp-main-box,

	.wpbdp-listing.wpbdp-listing-excerpt {
		break-inside: avoid;
	}
}