/* Homepage churches map. Heading and button reuse Zegen/Elementor classes; only overrides live here. */
.dhm {
	--dhm-navy: #252525; /* Zegen h2 colour */
	--dhm-crimson: #bf0a30; /* homepage kicker and "Learn More" */
	--dhm-text: #5d5d6b;
	--dhm-rule: #dddce3;
	--c-colombo: #8c5a7e;
	--c-galle: #c48aa6;
	--c-jaffna: #cdb07a;
	--c-nuwara: #6f958b;
	--c-other: #e4e2e8;
	background: #f7f7f9 radial-gradient(rgba(29, 33, 64, .13) 1.2px, transparent 1.3px) 0 0 / 22px 22px;
	color: var(--dhm-text);
	padding: 100px 0;
}
.dhm *, .dhm *::before, .dhm *::after { box-sizing: border-box; }
.dhm-inner { max-width: 1140px; margin: 0 auto; padding: 0 16px; }
.dhm .sub-title { color: var(--dhm-crimson); }
.dhm-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }

.dhm [data-a="colombo"] { --c: var(--c-colombo); }
.dhm [data-a="galle"] { --c: var(--c-galle); }
.dhm [data-a="jaffna"] { --c: var(--c-jaffna); }
.dhm [data-a="nuwara"] { --c: var(--c-nuwara); }

.dhm-svg {
	display: block;
	width: 100%;
	height: auto;
	max-height: 620px;
	overflow: visible;
	filter: drop-shadow(0 1px 0 #fff) drop-shadow(0 8px 10px rgba(29, 33, 64, .18));
}
.dhm-d { fill: var(--c, var(--c-other)); stroke: #fff; stroke-width: 22; stroke-linejoin: round; cursor: pointer; transition: opacity .25s; }
.dhm-other { cursor: default; }
.dhm-l { font-size: 250px; font-weight: 700; fill: #fff; paint-order: stroke; stroke: rgba(0, 0, 0, .28); stroke-width: 30px; pointer-events: none; transition: opacity .25s; }
.dhm-cath circle { fill: #fff; stroke: var(--dhm-crimson); stroke-width: 18; }
.dhm-cath path { fill: none; stroke: var(--dhm-crimson); stroke-width: 16; stroke-linecap: round; }
.dhm-pin { fill: #fff; stroke: var(--dhm-navy); stroke-width: 26; cursor: pointer; transition: fill .25s, stroke .25s, opacity .25s; }

/* data-hover holds the previewed region, falling back to the selection */
.dhm[data-hover] .dhm-d[data-a], .dhm[data-hover] .dhm-l, .dhm[data-hover] .dhm-pin { opacity: .35; }
.dhm[data-hover="colombo"] svg [data-a="colombo"],
.dhm[data-hover="galle"] svg [data-a="galle"],
.dhm[data-hover="jaffna"] svg [data-a="jaffna"],
.dhm[data-hover="nuwara"] svg [data-a="nuwara"] { opacity: 1; }
.dhm[data-hover="colombo"] .dhm-pin[data-a="colombo"],
.dhm[data-hover="galle"] .dhm-pin[data-a="galle"],
.dhm[data-hover="jaffna"] .dhm-pin[data-a="jaffna"],
.dhm[data-hover="nuwara"] .dhm-pin[data-a="nuwara"] { fill: var(--c); stroke: #fff; }

/* Padding keeps focus rings clear of the scroll container's clip edge */
.dhm-tabs { display: flex; gap: 6px; margin: -3px -3px 21px; padding: 3px; overflow-x: auto; }
.dhm .dhm-tabs button {
	flex: none;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	padding: 10px 14px;
	color: var(--dhm-navy);
	background: #fff;
	border: 1px solid var(--dhm-rule);
	border-radius: 4px;
	transition: background-color .2s, border-color .2s, color .2s;
}
.dhm .dhm-tabs button:hover { background: #fff; color: var(--dhm-navy); border-color: var(--dhm-navy); }
.dhm .dhm-tabs button[aria-pressed="true"] { background: var(--dhm-navy); border-color: var(--dhm-navy); color: #fff; }
.dhm button:focus-visible, .dhm .dhm-btn:focus-visible { outline: 2px solid var(--dhm-navy); outline-offset: 2px; }

/* Views share one grid cell so the area is always as tall as the tallest view */
.dhm-views { display: grid; margin-bottom: 28px; }
.dhm-view { grid-area: 1 / 1; visibility: hidden; opacity: 0; transition: opacity .25s, visibility .25s; }
.dhm-view.is-on { visibility: visible; opacity: 1; }
.dhm p { margin: 0 0 16px; font-size: 15px; line-height: 28px; color: var(--dhm-text); }
.dhm p:last-child { margin-bottom: 0; }

.dhm-stats { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0 0 20px; border-top: 1px solid var(--dhm-rule); border-bottom: 1px solid var(--dhm-rule); }
.dhm-stats div { display: flex; flex-direction: column-reverse; align-items: center; padding: 16px 6px; text-align: center; }
.dhm-stats div + div { border-left: 1px solid var(--dhm-rule); }
.dhm-stats dd { margin: 0; font-family: Poppins, sans-serif; font-size: 28px; font-weight: 700; line-height: 1.1; color: var(--dhm-crimson); }
.dhm-stats dt { margin-top: 6px; font-size: 11px; font-weight: 600; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; }

.dhm-kicker { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--dhm-crimson); }
.dhm h3 { margin: 0 0 10px; font-size: 26px; line-height: 1.3; color: var(--dhm-navy); }
.dhm-list { margin: 16px 0 0; padding: 0; list-style: none; }
.dhm-list li { display: flex; align-items: center; gap: 10px; margin: 0; padding: 11px 0; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--dhm-navy); }
.dhm-list li + li { border-top: 1px solid var(--dhm-rule); }
.dhm-list span { margin-left: auto; font-size: 14px; font-weight: 400; white-space: nowrap; color: var(--dhm-text); }
.dhm-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--c); }

/* Matches the homepage "Learn More" widget, which gets these from per-widget Elementor CSS */
.dhm .dhm-btn,
.dhm .dhm-btn:hover,
.dhm .dhm-btn:focus { background-color: var(--dhm-crimson); color: #fff; }
.dhm .dhm-btn {
	font-family: var(--e-global-typography-accent-font-family, inherit), sans-serif;
	font-weight: 500;
	box-shadow: -3px 9px 16px -4px rgba(0, 0, 0, .26);
}

@media (max-width: 1024px) {
	.dhm { padding: 80px 0 60px; }
}
@media (max-width: 860px) {
	.dhm-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.dhm-svg { max-height: 460px; }
	.dhm-stats { grid-template-columns: repeat(2, 1fr); }
	.dhm-stats div:nth-child(3) { border-left: 0; }
	.dhm-stats div:nth-child(n+3) { border-top: 1px solid var(--dhm-rule); }
}
@media (max-width: 767px) {
	.dhm { padding: 50px 0 30px; }
}
@media (prefers-reduced-motion: reduce) {
	.dhm *, .dhm *::before { transition: none !important; }
}