/* ════════════════════════════════════════════════════════════════
   HealthDir — Directory Bridge Stylesheet
   Unifies the bundled Doctor 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); }

.doctor-directory-page main.dd-main,
.doctor-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; }