/* WKA County Commissioners map
   Brand colors pulled from the Altitude Pro theme:
   teal #079bc4, navy #232f64, gold #f3ae24, orange #f26930, cream #e5dace
*/

.wka-county-app {
	--wka-teal: #079bc4;
	--wka-navy: #232f64;
	--wka-gold: #f3ae24;
	--wka-orange: #f26930;
	--wka-cream: #e5dace;
	--wka-fill-default: #e3ded6;
	--wka-fill-hover: #f3ae24;
	--wka-fill-active: #079bc4;
	--wka-border: #ddd;
	box-sizing: border-box;
	max-width: 1200px;
	margin: 0 auto;
}

.wka-county-app *,
.wka-county-app *::before,
.wka-county-app *::after {
	box-sizing: inherit;
}

.wka-app-heading {
	color: var(--wka-navy);
	margin-top: 0;
}

/* Search combobox */

.wka-search-row {
	margin-bottom: 1rem;
}

.wka-search-label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.4rem;
	color: var(--wka-navy);
}

.wka-combobox {
	position: relative;
	max-width: 420px;
}

.wka-combobox-input {
	width: 100%;
	font-size: 1rem;
	padding: 0.65rem 0.8rem;
	border: 2px solid var(--wka-border);
	border-radius: 4px;
	background: #fff;
}

.wka-combobox-input:focus {
	outline: none;
	border-color: var(--wka-teal);
	box-shadow: 0 0 0 3px rgba(7, 155, 196, 0.25);
}

.wka-combobox-listbox {
	position: absolute;
	z-index: 20;
	top: 100%;
	left: 0;
	right: 0;
	margin: 0.25rem 0 0;
	padding: 0.25rem 0;
	list-style: none;
	background: #fff;
	border: 1px solid var(--wka-border);
	border-radius: 4px;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
	max-height: 280px;
	overflow-y: auto;
}

.wka-combobox-listbox[hidden] {
	display: none;
}

.wka-combobox-option {
	padding: 0.5rem 0.8rem;
	cursor: pointer;
}

.wka-combobox-option.is-active,
.wka-combobox-option:hover {
	background: var(--wka-gold);
	color: var(--wka-navy);
}

.wka-combobox-no-results {
	padding: 0.5rem 0.8rem;
	color: #666;
	font-style: italic;
}

/* Tabs */

.wka-tabs {
	display: none;
	gap: 0.5rem;
	margin-bottom: 1rem;
	border-bottom: 2px solid var(--wka-border);
}

.wka-js .wka-tabs {
	display: flex;
}

.wka-tab {
	background: none;
	border: none;
	border-bottom: 3px solid transparent;
	padding: 0.6rem 1rem;
	font-size: 1rem;
	font-weight: 600;
	color: #555;
	cursor: pointer;
	margin-bottom: -2px;
}

.wka-tab:hover {
	color: var(--wka-navy);
}

.wka-tab.is-active {
	color: var(--wka-teal);
	border-bottom-color: var(--wka-teal);
}

.wka-tab:focus-visible {
	outline: 2px solid var(--wka-teal);
	outline-offset: 2px;
}

/* Layout */

.wka-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}

@media (min-width: 782px) {
	.wka-layout {
		grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr);
		align-items: start;
	}
}

.wka-panel-map,
.wka-panel-directory {
	grid-column: 1;
}

.wka-card {
	grid-column: 1;
}

@media (min-width: 782px) {
	.wka-card {
		grid-column: 2;
		grid-row: 1 / span 2;
		position: sticky;
		top: 1rem;
	}
}

/* By default (no JS) show the directory and hide the map/card so
   visitors without JavaScript still get full information. */
.wka-panel-directory {
	display: block;
}

.wka-panel-map,
.wka-card {
	display: none;
}

.wka-js .wka-panel-map,
.wka-js .wka-panel-directory {
	display: block;
}

.wka-js .wka-card {
	display: block;
}

.wka-js .wka-panel-map[hidden],
.wka-js .wka-panel-directory[hidden] {
	display: none;
}

/* Full Directory tab: hide the card and let the directory use the
   full width instead of sharing the row with an empty sidebar. */
.wka-js.wka-directory-active .wka-card {
	display: none;
}

.wka-js.wka-directory-active .wka-panel-directory {
	grid-column: 1 / -1;
}

/* Map */

.wka-map-wrap {
	background: #f7f5f2;
	border: 1px solid var(--wka-border);
	border-radius: 6px;
	padding: 1rem;
}

.wka-map-wrap svg {
	width: 100%;
	height: auto;
	display: block;
}

.wka-county-path {
	fill: var(--wka-fill-default);
	stroke: #fff;
	stroke-width: 0.3;
	cursor: pointer;
	transition: fill 0.15s ease;
}

.wka-county-path:hover,
.wka-county-path:focus {
	fill: var(--wka-fill-hover);
	outline: none;
}

.wka-county-path:focus-visible {
	stroke: var(--wka-navy);
	stroke-width: 0.6;
}

.wka-county-path.is-active {
	fill: var(--wka-fill-active);
}

.wka-county-label {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	font-weight: 600;
	fill: var(--wka-navy);
	stroke: #fbfaf8;
	stroke-width: 0.22;
	paint-order: stroke fill;
	stroke-linejoin: round;
	text-anchor: middle;
	dominant-baseline: middle;
	pointer-events: none;
	user-select: none;
}

/* Card */

.wka-card {
	background: #fff;
	border: 1px solid var(--wka-border);
	border-left: 4px solid var(--wka-teal);
	border-radius: 6px;
	padding: 1.25rem;
}

.wka-card-empty {
	color: #666;
	margin: 0;
}

.wka-card-county-name {
	margin: 0 0 1rem;
	color: var(--wka-navy);
	font-size: 1.3rem;
}

.wka-card-commissioner-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.wka-card-commissioner-list li {
	padding: 0.75rem 0;
	border-top: 1px solid var(--wka-border);
}

.wka-card-commissioner-list li:first-child {
	border-top: none;
	padding-top: 0;
}

.wka-commissioner-name,
.wka-card .wka-commissioner-name {
	display: block;
	font-weight: 700;
	color: var(--wka-navy);
}

.wka-commissioner-district {
	display: inline-block;
	font-size: 0.8rem;
	font-weight: 600;
	color: #fff;
	background: var(--wka-orange);
	border-radius: 3px;
	padding: 0.1rem 0.5rem;
	margin: 0.3rem 0;
}

.wka-commissioner-email,
.wka-card .wka-commissioner-email {
	display: block;
	color: var(--wka-teal);
	text-decoration: none;
	word-break: break-word;
}

.wka-commissioner-email:hover {
	text-decoration: underline;
}

/* Directory (always server-rendered; also used as the JS tab panel) */

.wka-directory {
	columns: 1;
	column-gap: 2rem;
}

@media (min-width: 600px) {
	.wka-directory {
		columns: 2;
	}
}

@media (min-width: 1000px) {
	.wka-directory {
		columns: 3;
	}
}

.wka-directory-county {
	break-inside: avoid;
	margin-bottom: 1.25rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--wka-border);
}

.wka-directory-county h3 {
	color: var(--wka-navy);
	margin: 0 0 0.5rem;
	font-size: 1.05rem;
}

.wka-directory-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.wka-directory-list li {
	margin-bottom: 0.6rem;
	font-size: 0.92rem;
}

.wka-directory-empty {
	color: #777;
	font-style: italic;
	font-size: 0.9rem;
	margin: 0;
}

.wka-directory .wka-commissioner-name {
	display: inline;
	font-weight: 700;
	color: var(--wka-navy);
}

.wka-directory .wka-commissioner-district {
	margin-left: 0.4rem;
}

.wka-directory .wka-commissioner-email {
	display: block;
	font-size: 0.88rem;
}