/**
 * CCAPP District Finder — widget styles.
 *
 * Self-scoped under .cce-map so it can be dropped on any CCAPP Membership page
 * without inheriting or leaking Divi styles. Membership teal only.
 * Small white text never sits on #008C95 (4.05:1); it sits on #017B83+.
 */

.cce-map {
	--m-brand: #008C95;
	--m-600: #017B83;
	--m-700: #016068;
	--m-800: #0B4148;
	--m-050: #F2F9FA;
	--m-100: #E0F1F2;
	--m-200: #C2E4E6;
	--m-ink: #2D2926;
	--m-ink-70: #5A5450;
	--m-ink-45: #6E6862;
	--m-line: #D6E7E9;

	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 500px);
	grid-template-areas: "search map" "legend map" "detail map";
	grid-template-rows: auto auto 1fr;
	gap: 18px 40px;
	align-items: start;
	align-content: start;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--m-ink);
	line-height: 1.6;
}

.cce-map *,
.cce-map *::before,
.cce-map *::after { box-sizing: border-box; }

/* ------------------------------------------------------------------ search */

.cce-map-search { grid-area: search; }

.cce-map-label {
	display: block;
	font-size: 12.5px;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--m-600);
	margin-bottom: 10px;
}

.cce-map-row { display: flex; gap: 10px; flex-wrap: wrap; }

.cce-map-input {
	flex: 1 1 200px;
	min-width: 0;
	padding: 15px 18px;
	font: inherit;
	font-size: 17px;
	border: 2px solid var(--m-line);
	border-radius: 14px;
	background: #fff;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.cce-map-input:focus {
	outline: none;
	border-color: var(--m-brand);
	box-shadow: 0 0 0 4px var(--m-100);
}

.cce-map-btn {
	border: 0;
	border-radius: 14px;
	padding: 15px 28px;
	background: var(--m-600);
	color: #fff;
	font: inherit;
	font-size: 16px;
	font-weight: 800;
	cursor: pointer;
	transition: background .15s ease, transform .15s ease;
}
.cce-map-btn:hover { background: var(--m-700); transform: translateY(-1px); }

.cce-map-out { margin: 12px 0 0; font-size: 15px; font-weight: 700; min-height: 24px; }
.cce-map-out.is-muted { color: var(--m-ink-45); font-weight: 400; }
.cce-map-out.is-good { color: var(--m-700); }
.cce-map-out.is-bad { color: #B3261E; }

/* --------------------------------------------------------------------- map */

.cce-map-canvas {
	grid-area: map;
	position: relative;
	background: var(--m-050);
	border: 1px solid var(--m-line);
	border-radius: 24px;
	padding: 18px;
}

/* California is 1.14× taller than it is wide, so at any generous column width
   the map card outgrows the search panel beside it and leaves a lake of dead
   space under the search box. Clamping the height letterboxes the SVG instead
   (preserveAspectRatio defaults to meet), which keeps the two columns close to
   the same height without touching the geometry. */
.cce-map-canvas { display: flex; justify-content: center; }
.cce-map-canvas svg {
	display: block; width: 100%; height: auto;
	max-height: 560px; overflow: visible;
}

/* County fills carry a hairline so local geography stays legible … */
.cce-county {
	stroke: rgba(255, 255, 255, .32);
	stroke-width: .35;
	cursor: pointer;
	transition: opacity .15s ease;
}
.cce-county:hover { opacity: .84; }

/* … and district boundaries are stroked over the top, so the edge that
   actually matters is never ambiguous. */
.cce-edge {
	fill: none;
	stroke: #fff;
	stroke-width: 2.2;
	stroke-linejoin: round;
	pointer-events: none;
}
.cce-edge.is-open { stroke: #0B4148; stroke-width: 2.6; }

/* A selected district is traced the same way a hovered one is, held on until the
   selection changes. Nothing dims — greying out eight districts at the moment a
   member has just found theirs takes away the context they came for. */
.cce-edge.is-picked { stroke: #fff; stroke-width: 3.6; }

/* The clicked county keeps its own outline, so it stays findable while you read
   its zip roster in the panel beside the map. */
.cce-county.is-active { stroke: #0B4148; stroke-width: 1.6; }

/* ----------------------------------------------------------------------------
   Whole-district highlight.

   Hovering any county traces the WHOLE district it belongs to with a shadowed
   outline, so the district appears to lift off the map. The rest of California
   is left exactly as it was — nothing dims. The first attempt pushed everything
   else back to 26% opacity, which makes the map go dark rather than making one
   district come forward, and it hides the very context that tells you where
   your district sits relative to everywhere else.
   -------------------------------------------------------------------------- */
.cce-edge.is-lit { stroke: #fff; stroke-width: 3.6; }

/* The county actually under the pointer keeps a hairline of its own, so within
   a lit district you can still tell which shape you are on. */
.cce-county.is-focus { stroke: #0B4148; stroke-width: 1.1; }

.cce-map-tip {
	position: absolute;
	left: 18px;
	bottom: 18px;
	background: rgba(45, 41, 38, .94);
	color: #fff;
	border-radius: 12px;
	padding: 9px 14px;
	font-size: 13px;
	line-height: 1.35;
	pointer-events: none;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity .15s ease, transform .15s ease;
}
.cce-map-tip.is-on { opacity: 1; transform: none; }
/* The magnifier carries the same caption, and both float to the corner furthest
   from the region — so once the lens is up the tip is redundant and, worse,
   underneath it. */
.cce-map-canvas:has(.cce-map-lens.is-on) .cce-map-tip { opacity: 0; }
.cce-map-tip b { display: block; font-size: 14px; }
.cce-map-tip span { color: rgba(255, 255, 255, .78); }

/* ------------------------------------------------------------------ legend */

.cce-map-legend { grid-area: legend; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.cce-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: #fff;
	border: 1px solid var(--m-line);
	border-radius: 999px;
	padding: 7px 14px 7px 8px;
	font: inherit;
	font-size: 14px;
	font-weight: 800;
	color: var(--m-ink-70);
	cursor: pointer;
	transition: border-color .15s ease, transform .15s ease, color .15s ease;
}
.cce-chip:hover { transform: translateY(-2px); border-color: var(--m-brand); }
.cce-chip i { width: 14px; height: 14px; border-radius: 4px; display: block; }
.cce-chip i.split {
	background: repeating-linear-gradient(45deg, #2C8F96 0 3px, #7FD4D6 3px 6px);
}
.cce-chip.is-open { border-color: var(--m-brand); color: var(--m-700); box-shadow: 0 0 0 3px var(--m-100); }
.cce-chip.is-active { background: var(--m-800); color: #fff; border-color: var(--m-800); }

.cce-chip--split { cursor: default; font-weight: 400; font-size: 13px; color: var(--m-ink-45); }
.cce-chip--split:hover { transform: none; border-color: var(--m-line); }

/* ------------------------------------------------------------------ detail */

.cce-map-detail { grid-area: detail; }

.cce-map-intro { margin: 0; font-size: 15.5px; color: var(--m-ink-70); }

.cce-map-hints {
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 10px;
	font-size: 14.5px;
	color: var(--m-ink-70);
}
.cce-map-hints li {
	position: relative;
	padding-left: 26px;
	line-height: 1.5;
}
.cce-map-hints li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .55em;
	width: 9px;
	height: 9px;
	border-radius: 3px;
	background: var(--m-200);
}
.cce-map-hints b { color: var(--m-ink); font-weight: 800; }

.cce-map-card {
	background: #fff;
	border: 1px solid var(--m-line);
	border-left: 5px solid var(--m-line);
	border-radius: 18px;
	padding: 22px 24px;
}
.cce-map-card.is-open { border-left-color: var(--m-brand); background: var(--m-050); }
.cce-map-card h4 { margin: 0; font-size: 20px; font-weight: 800; line-height: 1.2; }

.cce-map-card-h { display: flex; gap: 16px; align-items: center; }

.cce-map-num {
	flex: 0 0 auto;
	width: 54px;
	height: 54px;
	border-radius: 16px;
	background: linear-gradient(150deg, var(--m-brand), var(--m-800));
	color: #fff;
	font-size: 26px;
	font-weight: 800;
	display: grid;
	place-items: center;
}

.cce-map-flag { display: block; font-size: 13px; font-weight: 700; color: var(--m-700); margin-top: 2px; }
.cce-map-flag.is-quiet { color: var(--m-ink-45); font-weight: 400; }

.cce-map-dl { margin: 18px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; font-size: 15px; }
.cce-map-dl dt { color: var(--m-ink-45); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; align-self: center; }
.cce-map-dl dd { margin: 0; font-weight: 700; }
.cce-map-dl dd span { font-weight: 400; color: var(--m-ink-70); }

.cce-map-cta {
	display: inline-block;
	margin-top: 18px;
	background: var(--m-600);
	color: #fff !important;
	text-decoration: none !important;
	border-radius: 999px;
	padding: 12px 22px;
	font-weight: 800;
	font-size: 15px;
}
.cce-map-cta:hover { background: var(--m-700); }

/* -------------------------------------------------------------- responsive */

@media (max-width: 860px) {
	.cce-map {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "search" "map" "legend" "detail";
		gap: 20px;
	}
	.cce-map-canvas { padding: 14px; }
}

@media (prefers-reduced-motion: reduce) {
	.cce-map * { transition: none !important; }
}

/* Split-county hatch overlay and district numerals */


.cce-region-num.is-shared { font-size: 15px; letter-spacing: .5px; }

.cce-region-num {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	font-size: 19px;
	font-weight: 800;
	fill: #fff;
	text-anchor: middle;
	dominant-baseline: central;
	pointer-events: none;
	paint-order: stroke;
	stroke: rgba(11, 65, 72, .55);
	stroke-width: 3.5px;
	stroke-linejoin: round;
}


/* ------------------------------------------------------------- magnifier */

/* Appears only after the pointer has settled — see DWELL_MS in the script.
   A cursor crossing the map is not interest, and a lens that fires on every
   pass makes the map feel twitchy. */
.cce-map-lens {
	position: absolute;
	right: 14px;
	top: 14px;
	width: 46%;
	max-width: 230px;
	background: #fff;
	border: 1px solid var(--m-line);
	border-radius: 16px;
	box-shadow: 0 18px 40px rgba(1, 74, 80, .22);
	overflow: hidden;
	opacity: 0;
	transform: scale(.94) translateY(-4px);
	transform-origin: top right;
	transition: opacity .18s ease, transform .18s ease;
	pointer-events: none;
}
.cce-map-lens.is-on { opacity: 1; transform: none; }
/* overflow:hidden, not the visible the main map uses. The lens works by cloning
   the whole map and narrowing the viewBox — with overflow visible the rest of
   California draws outside the box and spills over the caption below it.
   Cropping to the viewBox is the entire point of a magnifier. */
.cce-map-lens svg {
	display: block; width: 100%; height: auto;
	max-height: none; overflow: hidden;
	background: var(--m-050);
}

.cce-lens-cap {
	padding: 9px 12px 11px;
	border-top: 1px solid var(--m-line);
	font-size: 12px;
	line-height: 1.35;
}
.cce-lens-cap b { display: block; font-size: 13px; }
.cce-lens-cap span { color: var(--m-ink-45); }

@media (max-width: 860px) {
	/* Touch has no hover, so the lens never fires; the search carries the load. */
	.cce-map-lens { display: none; }
}

/* ------------------------------------------------- county hover + roster */

.cce-county { transition: opacity .15s ease, filter .15s ease; }
.cce-county:hover,
.cce-county:focus {
	opacity: 1;
	filter: brightness(1.14) saturate(1.1);
	stroke: #fff;
	stroke-width: 1.3;
	outline: none;
}
.cce-county:focus-visible { stroke: #2D2926; stroke-width: 2; }

.cce-map-num.is-multi { font-size: 15px; letter-spacing: .5px; }

.cce-zipgroup { margin-top: 18px; }
.cce-zipgroup h5 {
	margin: 0 0 8px;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--m-700);
	display: flex;
	align-items: center;
	gap: 8px;
}
.cce-zipgroup h5 em {
	font-style: normal;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	color: var(--m-ink-45);
	font-size: 12.5px;
}
.cce-zipgroup h5 b {
	margin-left: auto;
	background: var(--m-brand);
	color: #fff;
	border-radius: 999px;
	padding: 3px 10px;
	font-size: 11px;
	letter-spacing: .04em;
}

.cce-ziplist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
	gap: 2px 14px;
	max-height: 234px;
	overflow-y: auto;
	padding-right: 6px;
}
.cce-ziplist li {
	display: flex;
	gap: 8px;
	align-items: baseline;
	font-size: 13.5px;
	padding: 3px 0;
	border-bottom: 1px solid var(--m-050);
}
.cce-ziplist code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 13px;
	font-weight: 700;
	color: var(--m-700);
}
.cce-ziplist span { color: var(--m-ink-70); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cce-ziplist::-webkit-scrollbar { width: 8px; }
.cce-ziplist::-webkit-scrollbar-thumb { background: var(--m-200); border-radius: 4px; }