/**
 * StateLawTV — directory "editorial list" design pass.
 *
 * Loaded only on directory results/hub pages and single listing pages
 * (see inc/directory.php: sltv_is_directory_context()), after
 * DirectoryToolboxPro's own dtb2-css-custom / dtb2-common, whose
 * component classes (.dtb-button, .dtb-filters-grid, .dtb_search_form …)
 * are themed almost entirely through CSS custom properties — the first
 * block below leans on that system rather than fighting it with new
 * selectors. Structural rules for the theme's own markup (.sltv-*) follow.
 *
 * Tokens, from style.css: text #242424, muted #6b7075, blue #1f7aab,
 * muted blue #617ca3, teal #22bdbd / #00c0c0 (nav active), green #68b12f
 * (phone/CTA), line #e9ecee, wash #f2f5f7. Body: Open Sans. Headings: Roboto.
 * Mobile-first; no framework.
 */

:root {
	--sltv-ink: #242424;
	--sltv-muted: #6b7075;
	--sltv-blue: #1f7aab;
	--sltv-blue-muted: #617ca3;
	--sltv-teal: #22bdbd;
	--sltv-teal-dark: #1a9c9c;
	--sltv-green: #68b12f;
	--sltv-green-dark: #57941f;
	--sltv-line: #e9ecee;
	--sltv-wash: #f2f5f7;
}

/* -------------------------------------------------------------------------
 * Re-skin DirectoryToolboxPro's own components via its CSS custom properties
 * ---------------------------------------------------------------------- */

.dtb2-basic-listings,
.dtb2-related-listings,
.dtb-search-form-section,
.dtb-filters-section,
.dtb2-hub,
.sltv-listing {
	--dtb-border-color: var(--sltv-line);
	--dtb-border-radius: 6px;
	--dtb-accent-color: var(--sltv-blue);
}

/* Sub-page / hub list as chips: a flowing row of natural-width pills that
   never wrap inside, instead of the plugin's equal-width column grid, which
   left long names on two lines and rows of uneven height. */
.dtb-filters-grid {
	--dtb-filters-grid-fz: 13px;
	--dtb-filters-grid-fw: 600;
	--dtb-filters-grid-link-border-radius: 999px;
	--dtb-filters-grid-link-border: 1px solid #b9d3e3;
	--dtb-filters-grid-link-bg: #fff;
	--dtb-filters-grid-link-color: var(--sltv-blue);
	--dtb-filters-grid-link-hover-bg: var(--sltv-blue);
	--dtb-filters-grid-link-hover-color: #fff;
	--dtb-filters-grid-link-hover-border: var(--sltv-blue);
	display: flex !important;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 8px;
	padding: 0;
	list-style: none;
}
.dtb-filters-grid li {
	width: auto !important;
	flex: 0 0 auto;
	margin: 0;
}
.dtb-filters-grid a {
	display: inline-block;
	padding: 6px 14px;
	line-height: 1.3;
	white-space: nowrap;
	text-align: center;
}
.dtb-filters-grid .active a {
	background: var(--sltv-blue);
	color: #fff;
	border-color: var(--sltv-blue);
}
@media (max-width: 480px) {
	.dtb-filters-grid a { font-size: 12px; padding: 5px 11px; }
}

/* Search form: a light bar. */
.dtb_search_form {
	--dtb-search-form-bg: var(--sltv-wash);
	--dtb-search-form-border: 1px solid var(--sltv-line);
	--dtb-search-form-padding: 16px;
	--dtb-input-border: 1px solid #d7dde2;
	--dtb-input-border-radius: 6px;
	--dtb-input-bg: #fff;
	--dtb-accent-color: var(--sltv-blue);
	--dtb-button-border: none;
	--dtb-button-border-radius: 6px;
	--dtb-button-fw: 600;
}
.dtb_search_form .btn_search_by_location {
	--dtb-accent-color: transparent;
	--dtb-button-bg: #fff;
	--dtb-button-color: var(--sltv-blue-muted);
	--dtb-button-border: 1px solid #d7dde2;
}
.dtb_search_form summary {
	color: var(--sltv-blue);
	font-weight: 600;
	cursor: pointer;
	margin-top: 10px;
}

/* Results heading: quieter, no bold black bar. */
.dtb-listings-section .dtb-section-heading-tag,
.dtb-filters-section .dtb-section-heading-tag {
	font-family: 'Roboto', sans-serif;
	font-size: 20px;
	font-weight: 700;
	color: var(--sltv-ink);
}

/* -------------------------------------------------------------------------
 * Hub intro
 * ---------------------------------------------------------------------- */

.sltv-hub-intro {
	margin: 0 0 14px;
	font-family: 'Roboto', sans-serif;
	font-size: 15px;
	color: var(--sltv-muted);
}

.dtb2-hub {
	margin-bottom: 24px;
}
.dtb2-hub__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.dtb2-hub__list li {
	display: flex;
}
.dtb2-hub__list a {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	padding: 6px 14px;
	border: 1px solid #b9d3e3;
	border-radius: 999px;
	color: var(--sltv-blue);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
	text-decoration: none;
	background: #fff;
}
.dtb2-hub__list a:hover,
.dtb2-hub__list a:focus {
	background: var(--sltv-blue);
	border-color: var(--sltv-blue);
	color: #fff;
	text-decoration: none;
}
/* The count sits inside the chip, quiet beside the name. */
.dtb2-hub__count {
	font-size: 12px;
	font-weight: 400;
	color: var(--sltv-muted);
}
.dtb2-hub__list a:hover .dtb2-hub__count,
.dtb2-hub__list a:focus .dtb2-hub__count {
	color: rgba(255, 255, 255, 0.85);
}

/* -------------------------------------------------------------------------
 * Results: a card grid, one card per firm
 *
 * template-parts/listing-row.php renders each firm as a .sltv-row; the
 * plugin's results wrapper (.dtb2-basic-listings__items) and the listing
 * page's "other locations" block lay those out as a three-across grid of
 * cards. The card is a column flexbox so the action buttons sit on its
 * bottom edge whatever the length of the name or tag list above.
 * ---------------------------------------------------------------------- */

.dtb2-basic-listings__items,
.sltv-listing__locations-rows {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
}

.sltv-row {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
	padding: 14px;
	border: 1px solid #e3e7ea;
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.sltv-row__main {
	flex: 1 1 auto;
	min-width: 0;
}

/* Selector deliberately over-specific (.sltv-row .sltv-row__name, not just
   .sltv-row__name): the theme's legacy `.post h3 { background/border/padding/
   font-size }` rule (style.css) targets any bare h3 under #main.post — which
   every directory page's #main is — and otherwise wins the cascade against a
   single-class selector, boxing the firm name in a grey bar. Left untouched in
   style.css because that rule is still load-bearing for actual blog-post
   subheadings elsewhere on the site; out-specificing it here is the
   contained fix. */
.sltv-row .sltv-row__name {
	margin: 0 0 4px !important;
	padding: 0;
	background: none;
	border: 0;
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--sltv-ink);
}
.sltv-row .sltv-row__name a {
	color: var(--sltv-ink);
	text-decoration: none;
}
.sltv-row .sltv-row__name a:hover,
.sltv-row .sltv-row__name a:focus {
	color: var(--sltv-blue);
	text-decoration: underline;
}

.sltv-row__meta {
	margin: 0 0 8px;
	font-size: 13px;
	line-height: 1.45;
	color: var(--sltv-muted);
	overflow-wrap: anywhere;
}
.sltv-row__dot {
	display: none;
}
.sltv-row__site {
	display: block;
	color: var(--sltv-blue-muted);
	text-decoration: none;
}
.sltv-row__site:hover,
.sltv-row__site:focus {
	color: var(--sltv-blue);
	text-decoration: underline;
}

.sltv-row__tags {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 6px;
}

/* Practice-area tags are quiet labels, not buttons: small caps in muted
   blue, so the firm name and the phone button stay the loudest things in a
   card. They are still links. */
.sltv-tag {
	display: inline-block;
	padding: 2px 7px;
	border-radius: 4px;
	border: 0;
	color: var(--sltv-blue-muted);
	background: #eef3f7;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	line-height: 1.5;
	text-decoration: none;
}
a.sltv-tag:hover,
a.sltv-tag:focus {
	color: #fff;
	background: var(--sltv-blue);
	text-decoration: none;
}
.sltv-tag--featured {
	color: var(--sltv-teal-dark);
	background: #eafcfc;
}

/* -------------------------------------------------------------------------
 * Action buttons
 * ---------------------------------------------------------------------- */

.sltv-row__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-top: auto;
	padding-top: 4px;
}

.sltv-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	white-space: nowrap;
	padding: 7px 14px;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none !important;
	border: 1px solid transparent;
	line-height: 1.3;
}
.sltv-btn__icon {
	display: inline-flex;
	line-height: 0;
}
.sltv-btn__icon svg {
	display: block;
}

/* The phone number reads as text with a small green handset, not as a
   filled button: on a grid of cards a solid green block per card shouted
   over the firm names. Hover gives it a light green wash. */
.sltv-btn--phone {
	background: #fff;
	color: var(--sltv-ink);
	border-color: #d5dbe0;
	font-weight: 600;
}
.sltv-btn--phone .sltv-btn__icon {
	color: var(--sltv-green);
}
.sltv-btn--phone:hover,
.sltv-btn--phone:focus {
	background: #f1f8ea;
	border-color: var(--sltv-green);
	color: var(--sltv-ink);
}

.sltv-btn--outline {
	background: #fff;
	color: var(--sltv-blue);
	border-color: var(--sltv-blue);
}
.sltv-btn--outline:hover,
.sltv-btn--outline:focus {
	background: var(--sltv-blue);
	color: #fff;
}

.sltv-btn--video {
	background: var(--sltv-teal);
	color: #fff;
}
.sltv-btn--video:hover,
.sltv-btn--video:focus {
	background: var(--sltv-teal-dark);
	color: #fff;
}

.sltv-btn--lg {
	padding: 10px 18px;
	font-size: 14px;
}

/* Icon-only button (listing page website link): square, same height as its
   text neighbours in .sltv-btn--lg. */
.sltv-btn--lg.sltv-btn--icon {
	padding: 8px 10px;
	min-width: 40px;
	box-sizing: border-box;
}

@media (max-width: 900px) {
	.dtb2-basic-listings__items,
	.sltv-listing__locations-rows {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 560px) {
	.dtb2-basic-listings__items,
	.sltv-listing__locations-rows {
		grid-template-columns: 1fr;
	}
}

/* -------------------------------------------------------------------------
 * Single listing page
 * ---------------------------------------------------------------------- */

.sltv-listing {
	margin-top: 10px;
}

.sltv-listing__primary {
	min-width: 0;
}

.sltv-listing__tags {
	margin-bottom: 10px;
}

.sltv-listing__title {
	font-family: 'Roboto', sans-serif;
	font-size: 28px;
	font-weight: 700;
	color: var(--sltv-ink);
	line-height: 1.25;
	margin: 0 0 6px !important;
}

.sltv-listing__address {
	margin: 0 0 16px;
	color: var(--sltv-muted);
	font-size: 15px;
}

.sltv-listing__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 24px;
}

.sltv-listing__description {
	font-size: 15px;
	line-height: 1.7;
	color: var(--sltv-ink);
}
.sltv-listing__description p:first-child {
	margin-top: 0;
}
.sltv-listing__videos,
.sltv-listing__locations {
	margin-top: 30px;
	padding-top: 24px;
	border-top: 1px solid var(--sltv-line);
}
.sltv-listing__videos h2,
.sltv-listing__locations h2 {
	font-family: 'Roboto', sans-serif;
	font-size: 19px;
	font-weight: 700;
	color: var(--sltv-ink);
	margin: 0 0 14px !important;
}
.sltv-listing__see-all {
	margin: 12px 0 0;
}
.sltv-listing__see-all a {
	color: var(--sltv-teal-dark);
	font-weight: 600;
	text-decoration: none;
}
.sltv-listing__see-all a:hover {
	text-decoration: underline;
}

/* Main column + aside (firm details, office hours, claim), after onmetro's
   .om-detail. The theme's left nav already sits beside #main, so the aside is
   narrow and stacks under the main column well before the nav collapses. */
.sltv-listing {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 270px;
	gap: 28px;
	align-items: start;
}
.sltv-listing .sltv-listing__locations-rows {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sltv-listing__aside {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}

.sltv-btn--primary {
	background: var(--sltv-blue);
	color: #fff;
}
.sltv-btn--primary:hover,
.sltv-btn--primary:focus {
	background: #18648c;
	color: #fff;
}

.sltv-panel {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 18px;
	background: #fff;
	border: 1px solid var(--sltv-line);
	border-radius: 8px;
}
.sltv-panel .sltv-panel__title {
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--sltv-ink);
	margin: 0 !important;
}
.sltv-panel__note {
	margin: 0 !important;
	font-size: 13px;
	line-height: 1.5;
	color: var(--sltv-muted);
}
.sltv-panel .sltv-btn {
	box-sizing: border-box;
	width: 100%;
}
.sltv-panel--hours p {
	margin: 0 !important;
	font-size: 14px;
	line-height: 1.55;
}

.sltv-details {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	gap: 7px 14px;
	margin: 0 !important;
	font-size: 14px;
	line-height: 1.45;
}
.sltv-details dt {
	margin: 0;
	font-weight: 600;
	color: var(--sltv-muted);
}
.sltv-details dd {
	margin: 0 !important;
	min-width: 0;
	overflow-wrap: anywhere;
	color: var(--sltv-ink);
}
.sltv-details a {
	color: var(--sltv-blue);
}

/* No description yet: say so, and offer the claim to whoever owns the firm. */
.sltv-listing__thin {
	padding: 16px 18px;
	background: var(--sltv-wash);
	border: 1px solid var(--sltv-line);
	border-radius: 8px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--sltv-ink);
}
.sltv-listing__thin p {
	margin: 0 0 6px !important;
}
.sltv-listing__thin p:last-child {
	margin: 0 !important;
}
.sltv-listing__thin-cta {
	font-weight: 600;
}
.sltv-listing__thin-cta a {
	color: var(--sltv-blue);
}

/* Click-to-load map (js/listing-map.js). */
.sltv-listing__map {
	margin-top: 30px;
	padding-top: 24px;
	border-top: 1px solid var(--sltv-line);
}
.sltv-listing__map h2 {
	font-family: 'Roboto', sans-serif;
	font-size: 19px;
	font-weight: 700;
	color: var(--sltv-ink);
	margin: 0 0 14px !important;
}
.sltv-map {
	display: flex;
	min-height: 260px;
	overflow: hidden;
	background: var(--sltv-wash);
	border: 1px solid var(--sltv-line);
	border-radius: 8px;
}
.sltv-map__load {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 260px;
	background: none;
	border: 0;
	cursor: pointer;
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	color: var(--sltv-ink);
}
.sltv-map__load:hover,
.sltv-map__load:focus-visible {
	background: #e6eef3;
}
.sltv-map__pin {
	line-height: 0;
	color: var(--sltv-blue);
}
.sltv-map__load small {
	font-size: 13px;
	font-weight: 400;
	color: var(--sltv-muted);
}
.sltv-map iframe {
	display: block;
	width: 100%;
	height: 340px;
	border: 0;
}

@media (max-width: 1000px) {
	.sltv-listing {
		grid-template-columns: 1fr;
	}
}
@media (max-width: 560px) {
	.sltv-listing .sltv-listing__locations-rows {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 480px) {
	.sltv-listing__title {
		font-size: 23px;
	}
	.sltv-listing__actions .sltv-btn--lg {
		flex: 1 1 auto;
		justify-content: center;
	}
}

/* -------------------------------------------------------------------------
 * Directory search panel (template-parts/directory-search.php)
 * ---------------------------------------------------------------------- */

.sltv-dsearch {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
	align-items: end;
	gap: 12px;
	margin: 4px 0 26px;
	padding: 18px;
	background: var(--sltv-wash);
	border: 1px solid var(--sltv-line);
	border-radius: 8px;
}
.sltv-dsearch__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}
.sltv-dsearch__field label {
	font-size: 13px;
	font-weight: 700;
	color: var(--sltv-ink);
}
.sltv-dsearch__field input,
.sltv-dsearch__field select {
	box-sizing: border-box;
	width: 100%;
	height: 44px;
	margin: 0;
	padding: 0 12px;
	background-color: #fff;
	border: 1px solid #d5dbe0;
	border-radius: 6px;
	font: inherit;
	font-size: 15px;
	color: var(--sltv-ink);
}
.sltv-dsearch__field select {
	-webkit-appearance: none;
	appearance: none;
	padding-right: 36px;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7075' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 16px 16px;
	cursor: pointer;
}
.sltv-dsearch__field input:focus,
.sltv-dsearch__field select:focus {
	border-color: var(--sltv-blue);
	outline: 2px solid rgba(31, 122, 171, .25);
	outline-offset: 0;
}
.sltv-dsearch .sltv-dsearch__submit {
	height: 44px;
	padding: 0 24px;
	border: 0;
	font-size: 15px;
	cursor: pointer;
}
.sltv-dsearch__clear {
	grid-column: 1 / -1;
	justify-self: start;
	margin-top: -2px;
	font-size: 13px;
	font-weight: 600;
	color: var(--sltv-blue);
}

@media (max-width: 760px) {
	.sltv-dsearch {
		grid-template-columns: 1fr;
		padding: 14px;
	}
	.sltv-dsearch .sltv-dsearch__submit {
		width: 100%;
	}
}

/* -------------------------------------------------------------------------
 * Practice-area grid on the /directory/ index
 * (results/filters/subpages.php; pills everywhere else)
 * ---------------------------------------------------------------------- */

.sltv-practice-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	margin: 0 0 8px !important;
	padding: 0 !important;
	list-style: none !important;
}
.sltv-practice-grid li {
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
}
.sltv-practice-grid__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	box-sizing: border-box;
	height: 100%;
	padding: 11px 14px;
	background: #fff;
	border: 1px solid #e3e7ea;
	border-radius: 8px;
	color: var(--sltv-blue);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none !important;
}
.sltv-practice-grid__link:hover,
.sltv-practice-grid__link:focus {
	border-color: var(--sltv-blue);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.sltv-practice-grid__link:hover .sltv-practice-grid__name,
.sltv-practice-grid__link:focus .sltv-practice-grid__name {
	text-decoration: underline;
}
.sltv-practice-grid__name {
	min-width: 0;
}
.sltv-practice-grid__count {
	flex: 0 0 auto;
	font-size: 12px;
	font-weight: 400;
	color: var(--sltv-muted);
}
.sltv-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

@media (max-width: 1000px) {
	.sltv-practice-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 560px) {
	.sltv-practice-grid {
		grid-template-columns: 1fr;
	}
}