/* ════════════════════════════════════════════════════════════════
   LawDir — Directory Bridge Stylesheet
   Unifies the bundled Law Firm Directory engine's --dd-* design tokens
   with this theme's --hd-* palette/typography, and styles the new
   homepage hero / category / featured-listings sections.
   ════════════════════════════════════════════════════════════════ */

/* ── 1. Re-map the directory engine's own CSS variables ─────────── */
:root {
	--dd-radius: var(--hd-radius, 12px);
	--dd-radius-sm: var(--hd-radius-sm, 6px);
	--dd-shadow: var(--hd-shadow-sm, 0 1px 4px rgba(26,35,50,.08));
	--dd-shadow-hover: var(--hd-shadow-lg, 0 8px 32px rgba(10,110,110,.15));
	--dd-border: var(--hd-border, #DEE5EC);
	--dd-text: var(--hd-text, #1A2332);
	--dd-text-muted: var(--hd-text-muted, #6B7A8D);
	--dd-accent: var(--hd-primary, #0A6E6E);
	--dd-bg: var(--hd-white, #FFFFFF);
	--dd-bg-subtle: var(--hd-bg, #F5F7FA);
	--dd-font: var(--font-body, 'Inter', system-ui, sans-serif);
}

/* Directory pages should feel like part of this site, not an insert. */
.dd-container { font-family: var(--font-body); color: var(--hd-text); }
.dd-page-title,
.dd-single-title { font-family: var(--font-heading); letter-spacing: -0.01em; }

.dd-card,
.dd-single-listing { border: 1px solid var(--hd-border); }
.dd-card:hover { box-shadow: var(--hd-shadow); transform: translateY(-2px); transition: transform .18s ease, box-shadow .18s ease; }

.dd-badge {
	font-family: var(--font-body);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .03em;
	font-size: 11px;
}
.dd-badge-category { background: var(--hd-primary-light, #E8F5F5); color: var(--hd-primary); }
.dd-badge-region { background: var(--hd-accent-light, #FFF0EA); color: var(--hd-accent, #FF6B35); }

.dd-card-btn,
.dd-search-submit {
	font-family: var(--font-body);
	font-weight: 600;
}
.dd-search-submit {
	background: var(--hd-primary);
	border-color: var(--hd-primary);
}
.dd-search-submit:hover { background: var(--hd-primary-dark, #074f4f); }

/* The directory engine's own stylesheet renders "View Details" as a
   solid block button. On a card-heavy grid that reads as heavier than
   the rest of the site (and can visually disappear if any theme/plugin
   CSS ends up setting `color` without `!important` after it) — so we
   restyle it as a plain text link with an arrow, consistent with how
   the blog's own cards link out ("Read more" style, not a button). */
.dd-card-btn {
	background: transparent !important;
	color: var(--hd-primary) !important;
	padding: 0 !important;
	min-height: 0 !important;
	margin-top: 10px !important;
	font-size: 13.5px !important;
	display: inline-flex !important;
	align-items: center;
	gap: 4px;
}
.dd-card-btn::after { content: '\2192'; }
.dd-card-btn:hover { text-decoration: underline; }

.dd-az-letter.dd-az-active,
.dd-pagination .page-numbers.current { background: var(--hd-primary); }

.lawyer-directory-page main.dd-main,
.lawyer-directory-page .dd-container { padding-top: 8px; }

/* ════════════════════════════════════════════════════════════════
   2. HOMEPAGE — HERO
   ════════════════════════════════════════════════════════════════ */
.hd-hero {
	position: relative;
	background: var(--hd-primary-dark, #074f4f); /* fallback for browsers without color-mix() */
	background:
		radial-gradient(1100px 420px at 12% -10%, color-mix(in srgb, var(--hd-primary) 22%, transparent), transparent 60%),
		radial-gradient(900px 380px at 100% 0%, color-mix(in srgb, var(--hd-accent, #FF6B35) 16%, transparent), transparent 60%),
		linear-gradient(180deg, var(--hd-primary-dark, #074f4f) 0%, var(--hd-primary, #0A6E6E) 55%, #0c5b5b 100%);
	color: #fff;
	padding: 72px 0 56px;
	overflow: hidden;
}
.hd-hero__inner { max-width: 880px; margin: 0 auto; text-align: center; }
.hd-hero__eyebrow {
	display: inline-block;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--hd-gold, #FFD166);
	background: rgba(255,255,255,.1);
	border: 1px solid rgba(255,255,255,.2);
	border-radius: 999px;
	padding: 6px 16px;
	margin-bottom: 20px;
}
.hd-hero__title {
	font-family: var(--font-heading);
	font-size: clamp(28px, 4.4vw, 46px);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.02em;
	margin: 0 0 14px;
}
.hd-hero__subtitle {
	font-size: clamp(15px, 2vw, 18px);
	color: rgba(255,255,255,.86);
	max-width: 620px;
	margin: 0 auto 32px;
	line-height: 1.6;
}

.hd-hero__search {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	background: #fff;
	border-radius: 16px;
	padding: 10px;
	box-shadow: 0 20px 50px rgba(0,0,0,.25);
	max-width: 760px;
	margin: 0 auto;
}
.hd-hero__field { flex: 1 1 160px; min-width: 140px; }
.hd-hero__field--search { flex: 2 1 240px; }
.hd-hero__field input,
.hd-hero__field select {
	width: 100%;
	height: 46px;
	border: 1px solid var(--hd-border);
	border-radius: 10px;
	padding: 0 14px;
	font-family: var(--font-body);
	font-size: 14.5px;
	color: var(--hd-text);
	background: var(--hd-white);
}
.hd-hero__field input:focus,
.hd-hero__field select:focus { outline: none; border-color: var(--hd-primary); }
.hd-hero__submit {
	flex: 0 0 auto;
	height: 46px;
	padding: 0 28px;
	border: none;
	border-radius: 10px;
	background: var(--hd-accent, #FF6B35);
	color: #fff;
	font-weight: 700;
	font-size: 14.5px;
	cursor: pointer;
	transition: background .15s ease, transform .15s ease;
}
.hd-hero__submit:hover { background: #e8592a; transform: translateY(-1px); }

.hd-hero__stats {
	margin-top: 28px;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 14px;
	font-size: 14px;
	color: rgba(255,255,255,.85);
}
.hd-hero__stats strong { color: #fff; font-family: var(--font-heading); font-size: 16px; }
.hd-hero__stats-sep { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,.4); align-self: center; }

@media (max-width: 640px) {
	.hd-hero__search { flex-direction: column; }
	.hd-hero__field { flex: 1 1 auto; }
}

/* ════════════════════════════════════════════════════════════════
   3. HOMEPAGE — DIRECTORY SECTION
   Deliberately reuses the exact same .hdb-* classes as the blog index
   (hero-banner / hero-list / card-grid, all defined in blog.css) so the
   featured-listings section looks like one consistent design language
   with "Latest Articles" below it, not a bolted-on plugin section.
   ════════════════════════════════════════════════════════════════ */
.hd-directory-home { padding-top: 24px; }
.hd-directory-home .hdb-hero-main { min-height: 420px; }

.hd-directory-home .hdb-section-title {
	position: relative;
}
.hd-view-all {
	margin-left: auto;
	font-size: 13px;
	font-weight: 700;
	color: var(--hd-primary);
	text-decoration: none;
	white-space: nowrap;
	text-transform: none;
	letter-spacing: normal;
}
.hd-view-all:hover { text-decoration: underline; }

/* ════════════════════════════════════════════════════════════════
   4. HOMEPAGE — LANDING SECTIONS
   (Features / About / Testimonials / Why Choose Us / Process /
   Regions / CTA / Contact) — modelled on a typical legal-services
   marketing homepage layout, styled with this theme's tokens.
   ════════════════════════════════════════════════════════════════ */
.ld-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 14.5px;
	padding: 13px 28px;
	border-radius: var(--hd-radius-sm, 6px);
	text-decoration: none;
	border: none;
	cursor: pointer;
	transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.ld-btn--primary { background: var(--hd-primary); color: #fff; }
.ld-btn--primary:hover { background: var(--hd-primary-dark, #074f4f); transform: translateY(-1px); }
.ld-btn--accent { background: var(--hd-accent, #FF6B35); color: #fff; }
.ld-btn--accent:hover { background: #e8592a; transform: translateY(-1px); }

.ld-features,
.ld-about,
.ld-testimonials,
.ld-why,
.ld-process,
.ld-cities,
.ld-contact { padding: 64px 0; }

.ld-features { background: var(--hd-white); }
.ld-features__intro { max-width: 680px; margin: 0 auto 40px; text-align: center; }
.ld-features__intro h2 { font-family: var(--font-heading); font-size: clamp(24px, 3vw, 32px); margin: 0 0 12px; color: var(--hd-text); }
.ld-features__intro p { color: var(--hd-text-muted); line-height: 1.65; margin: 0; }
.ld-features__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.ld-feature-card {
	background: var(--hd-bg, #F5F7FA);
	border: 1px solid var(--hd-border);
	border-radius: var(--hd-radius, 12px);
	padding: 28px 22px;
	text-align: center;
	transition: transform .15s ease, box-shadow .15s ease;
}
.ld-feature-card:hover { transform: translateY(-3px); box-shadow: var(--hd-shadow); }
.ld-feature-card__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 52px; height: 52px; border-radius: 50%;
	background: var(--hd-primary-light, #E8F5F5);
	font-size: 22px; margin-bottom: 14px;
}
.ld-feature-card h3 { font-family: var(--font-heading); font-size: 16.5px; margin: 0 0 8px; color: var(--hd-text); }
.ld-feature-card p { font-size: 13.5px; color: var(--hd-text-muted); line-height: 1.6; margin: 0; }

.ld-about { background: var(--hd-bg, #F5F7FA); }
.ld-about__inner { display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: start; }
.ld-about__copy h2 { font-family: var(--font-heading); font-size: clamp(24px, 3vw, 32px); margin: 0 0 18px; color: var(--hd-text); }
.ld-about__copy p { color: var(--hd-text-muted); line-height: 1.7; margin: 0 0 16px; }
.ld-about__stats {
	display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
	background: var(--hd-white); border: 1px solid var(--hd-border);
	border-radius: var(--hd-radius, 12px); padding: 26px; align-self: stretch;
}
.ld-stat { text-align: center; }
.ld-stat__num { display: block; font-family: var(--font-heading); font-size: 30px; font-weight: 800; color: var(--hd-primary); }
.ld-stat__label { display: block; font-size: 12.5px; color: var(--hd-text-muted); margin-top: 4px; }

.ld-testimonials { background: var(--hd-white); text-align: center; }
.ld-testimonials h2 { font-family: var(--font-heading); font-size: clamp(24px, 3vw, 32px); margin: 0 0 36px; color: var(--hd-text); }
.ld-testimonials__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; text-align: left; }
.ld-testimonial {
	background: var(--hd-bg, #F5F7FA); border-left: 4px solid var(--hd-primary);
	border-radius: var(--hd-radius-sm, 6px); padding: 26px 28px; margin: 0;
}
.ld-testimonial p { color: var(--hd-text); line-height: 1.7; margin: 0 0 12px; font-style: italic; }
.ld-testimonial cite { font-size: 13px; font-weight: 700; color: var(--hd-primary); font-style: normal; }

.ld-why { background: var(--hd-bg, #F5F7FA); text-align: center; }
.ld-why h2 { font-family: var(--font-heading); font-size: clamp(24px, 3vw, 32px); margin: 0 0 10px; color: var(--hd-text); }
.ld-why__intro { color: var(--hd-text-muted); margin: 0 0 36px; }
.ld-why__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; text-align: left; }
.ld-why-card {
	background: var(--hd-white); border: 1px solid var(--hd-border);
	border-radius: var(--hd-radius, 12px); padding: 26px;
}
.ld-why-card h3 { font-family: var(--font-heading); font-size: 16.5px; margin: 0 0 8px; color: var(--hd-primary); }
.ld-why-card p { font-size: 13.5px; color: var(--hd-text-muted); line-height: 1.6; margin: 0; }

.ld-process { background: var(--hd-white); text-align: center; }
.ld-process h2 { font-family: var(--font-heading); font-size: clamp(24px, 3vw, 32px); margin: 0 0 10px; color: var(--hd-text); }
.ld-process__intro { color: var(--hd-text-muted); margin: 0 0 36px; }
.ld-process__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; text-align: left; }
.ld-process-step {
	background: var(--hd-bg, #F5F7FA); border-radius: var(--hd-radius, 12px);
	padding: 28px 24px; position: relative;
}
.ld-process-step__num {
	display: block; font-family: var(--font-heading); font-size: 28px; font-weight: 800;
	color: var(--hd-primary-light, #E8F5F5); -webkit-text-stroke: 1.5px var(--hd-primary);
	margin-bottom: 8px;
}
.ld-process-step h3 { font-family: var(--font-heading); font-size: 16.5px; margin: 0 0 8px; color: var(--hd-text); }
.ld-process-step p { font-size: 13.5px; color: var(--hd-text-muted); line-height: 1.6; margin: 0; }

.ld-cities { background: var(--hd-bg, #F5F7FA); text-align: center; }
.ld-cities h2 { font-family: var(--font-heading); font-size: clamp(24px, 3vw, 32px); margin: 0 0 10px; color: var(--hd-text); }
.ld-cities__intro { color: var(--hd-text-muted); margin: 0 0 28px; }
.ld-cities__tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.ld-city-tag {
	display: inline-flex; align-items: center; gap: 6px;
	background: var(--hd-white); border: 1px solid var(--hd-border);
	border-radius: 999px; padding: 8px 16px; font-size: 13px; font-weight: 600;
	color: var(--hd-text); text-decoration: none; transition: all .15s ease;
}
.ld-city-tag:hover { border-color: var(--hd-primary); color: var(--hd-primary); transform: translateY(-1px); }

.ld-cta {
	background: linear-gradient(135deg, var(--hd-primary-dark, #074f4f), var(--hd-primary, #0A6E6E));
	color: #fff; text-align: center;
}
.ld-cta__inner { max-width: 640px; margin: 0 auto; }
.ld-cta h2 { font-family: var(--font-heading); font-size: clamp(22px, 3vw, 30px); margin: 0 0 12px; }
.ld-cta p { color: rgba(255,255,255,.85); margin: 0 0 26px; }

.ld-contact { background: var(--hd-white); }
.ld-contact__inner {
	max-width: 900px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.2fr;
	gap: 40px; align-items: center; background: var(--hd-bg, #F5F7FA);
	border-radius: var(--hd-radius-lg, 20px); padding: 40px;
}
.ld-contact__copy h2 { font-family: var(--font-heading); font-size: clamp(20px, 2.6vw, 26px); margin: 0 0 10px; color: var(--hd-text); }
.ld-contact__copy p { color: var(--hd-text-muted); line-height: 1.6; margin: 0; }
.ld-contact__form { display: flex; flex-direction: column; gap: 12px; }
.ld-contact__row { display: flex; gap: 12px; }
.ld-contact__form input,
.ld-contact__form textarea {
	width: 100%; border: 1px solid var(--hd-border); border-radius: var(--hd-radius-sm, 6px);
	padding: 12px 14px; font-family: var(--font-body); font-size: 14px; color: var(--hd-text);
	background: var(--hd-white); resize: vertical;
}
.ld-contact__form input:focus,
.ld-contact__form textarea:focus { outline: none; border-color: var(--hd-primary); }
.ld-contact__form .ld-btn { align-self: flex-start; }

@media (max-width: 900px) {
	.ld-features__grid { grid-template-columns: repeat(2, 1fr); }
	.ld-about__inner { grid-template-columns: 1fr; }
	.ld-testimonials__grid,
	.ld-why__grid,
	.ld-process__grid { grid-template-columns: 1fr; }
	.ld-contact__inner { grid-template-columns: 1fr; }
	.ld-contact__row { flex-direction: column; }
}
@media (max-width: 560px) {
	.ld-features__grid { grid-template-columns: 1fr; }
}