/* SCSA Sheriff Directory
 * Fonts are inherited from your theme. Override the colors by redefining
 * these variables in Appearance > Customize > Additional CSS, e.g.
 * .scsa-sd { --scsa-accent: #002d62; }
 */
.scsa-sd {
	--scsa-accent: #1f3a6e;      /* map highlight, preview panel */
	--scsa-on-accent: #ffffff;
	--scsa-gold: #a77a22;        /* county labels, badge */
	--scsa-county: #c9d4e6;      /* resting county fill */
	--scsa-county-dim: #e6eaf0;  /* filtered-out county */
	--scsa-surface: #ffffff;
	--scsa-tint: #eef2f8;        /* card hover */
	--scsa-line: #d5dbe5;
	--scsa-ink: inherit;
	--scsa-muted: #56627a;
	color: var(--scsa-ink);
	line-height: 1.5;
}
.scsa-sd *, .scsa-sd *::before, .scsa-sd *::after { box-sizing: border-box; }
.scsa-sd [hidden] { display: none !important; }
.scsa-sd a:focus-visible, .scsa-sd select:focus-visible, .scsa-sd input:focus-visible {
	outline: 3px solid var(--scsa-gold); outline-offset: 2px;
}

/* ---------- map ---------- */
.scsa-map { width: 100%; height: auto; display: block; }
.scsa-map .scsa-c { fill: var(--scsa-county); stroke: var(--scsa-surface); stroke-width: 1.2; transition: fill .15s; }
.scsa-map .scsa-c[data-url] { cursor: pointer; }
.scsa-map .scsa-c[data-url]:hover, .scsa-map .scsa-c.is-on { fill: var(--scsa-accent); }
.scsa-map .scsa-c.is-dim { fill: var(--scsa-county-dim); }
/* No box around a clicked county; keyboard users get a gold border that follows the county shape. */
.scsa-sd .scsa-map .scsa-c:focus, .scsa-sd .scsa-map .scsa-c:focus-visible { outline: none !important; box-shadow: none !important; }
.scsa-sd .scsa-map .scsa-c:focus-visible { stroke: var(--scsa-gold); stroke-width: 3; }
.scsa-sd .scsa-map svg:focus, .scsa-sd .scsa-map:focus { outline: none; }
.scsa-map .scsa-outline { fill: none; stroke: var(--scsa-accent); stroke-width: 1.4; pointer-events: none; }
.scsa-map text {
	font-family: inherit; font-size: 10.5px; font-weight: 600; fill: #15213a; text-anchor: middle;
	pointer-events: none; paint-order: stroke; stroke: var(--scsa-county); stroke-width: 2.5px;
}
.scsa-map text.is-on { fill: var(--scsa-on-accent); stroke: var(--scsa-accent); }
.scsa-map text.is-dim { opacity: .35; }
.scsa-locator .scsa-map text { display: none; }

/* ---------- directory ---------- */
.scsa-stage { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 24px; align-items: start; margin-bottom: 40px; }
.scsa-mapbox { position: relative; background: var(--scsa-surface); border: 1px solid var(--scsa-line); border-radius: 6px; padding: 12px; }
.scsa-hint { font-size: .85rem; color: var(--scsa-muted); margin: 8px 4px 0; }
.scsa-tip {
	position: absolute; pointer-events: none; z-index: 5; background: #15213a; color: #fff;
	padding: 6px 10px; border-radius: 4px; font-size: .85rem; line-height: 1.3; white-space: nowrap;
	transform: translate(-50%, calc(-100% - 12px));
}
.scsa-tip i { display: block; font-style: normal; font-size: .72rem; opacity: .7; margin-top: 2px; }
.scsa-tip b { display: block; text-transform: uppercase; letter-spacing: .08em; font-size: .7rem; opacity: .8; }
.scsa-panel { display: grid; gap: 16px; }
.scsa-field { display: grid; gap: 6px; }
.scsa-field label { font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: .75rem; color: var(--scsa-muted); }
.scsa-field select, .scsa-field input {
	font: inherit; width: 100%; padding: 10px 12px; border: 1px solid var(--scsa-line); border-radius: 4px;
	background: var(--scsa-surface); color: inherit; max-width: 100%;
}
.scsa-preview { background: var(--scsa-accent); color: var(--scsa-on-accent); border-radius: 6px; padding: 20px; display: grid; gap: 14px; }
.scsa-preview:empty { display: none; }
.scsa-preview .scsa-eyebrow { color: inherit; opacity: .75; }
.scsa-preview h3 { margin: 0; font-size: 1.6rem; line-height: 1.1; color: inherit; }
.scsa-preview dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0; font-size: .95rem; }
.scsa-preview dt { opacity: .75; }
.scsa-preview dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.scsa-preview .scsa-go {
	justify-self: start; background: var(--scsa-on-accent); color: var(--scsa-accent); text-decoration: none;
	font-weight: 700; padding: 9px 16px; border-radius: 4px;
}
.scsa-listhead { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; border-top: 2px solid currentColor; padding-top: 14px; }
.scsa-listhead h2 { margin: 0; }
.scsa-count { font-size: .9rem; color: var(--scsa-muted); }
.scsa-grid {
	list-style: none; padding: 0; margin: 16px 0 40px; display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1px;
	background: var(--scsa-line); border: 1px solid var(--scsa-line);
}
.scsa-grid li { background: var(--scsa-surface); min-width: 0; margin: 0; }
.scsa-grid a { display: grid; gap: 2px; padding: 14px 16px; height: 100%; text-decoration: none; color: inherit; }
.scsa-grid a:hover { background: var(--scsa-tint); }
.scsa-co, .scsa-eyebrow { font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: .74rem; color: var(--scsa-gold); }
.scsa-nm { font-weight: 700; font-size: 1.05rem; line-height: 1.25; }
.scsa-ph { font-size: .88rem; color: var(--scsa-muted); font-variant-numeric: tabular-nums; }
.scsa-empty, .scsa-sd-notice { padding: 20px; border: 1px dashed var(--scsa-line); border-radius: 6px; color: var(--scsa-muted); }

/* ---------- profile ---------- */
.scsa-crumbs { font-size: .9rem; color: var(--scsa-muted); margin-bottom: 20px; }
.scsa-crumbs a { font-weight: 600; text-decoration: none; }
.scsa-top { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 28px; align-items: center; margin-bottom: 28px; }
.scsa-portrait { width: 100%; max-width: 200px; aspect-ratio: 1; border-radius: 6px; overflow: hidden; background: var(--scsa-accent); }
.scsa-portrait img, .scsa-portrait svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.scsa-portrait-bg { fill: var(--scsa-accent); }
.scsa-star { fill: var(--scsa-gold); }
.scsa-initials { fill: var(--scsa-gold); font-weight: 800; font-size: 12px; font-family: inherit; }
.scsa-links { display: flex; flex-wrap: wrap; gap: 6px 20px; font-weight: 600; margin-top: 6px; }
.scsa-links a { overflow-wrap: anywhere; }
.scsa-facts { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 24px; margin-bottom: 32px; }
/* Six details in a clean 3 × 2 block, address full width underneath. */
.scsa-facts dl {
	margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0;
	border-top: 1px solid var(--scsa-line); border-left: 1px solid var(--scsa-line); align-self: start;
}
.scsa-facts dl > div { background: var(--scsa-surface); padding: 14px 16px; min-width: 0; border-right: 1px solid var(--scsa-line); border-bottom: 1px solid var(--scsa-line); }
.scsa-facts dt { font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; color: var(--scsa-muted); }
.scsa-facts dd { margin: 4px 0 0; font-size: 1.1rem; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.scsa-facts dd a { color: inherit; }
.scsa-facts .scsa-wide { grid-column: 1 / -1; }
.scsa-none { color: var(--scsa-muted); font-weight: 400; }
.scsa-locator { background: var(--scsa-surface); border: 1px solid var(--scsa-line); border-radius: 6px; padding: 14px; }
.scsa-locator p { margin: 8px 0 0; font-size: .88rem; color: var(--scsa-muted); }
.scsa-bio { margin-bottom: 32px; max-width: 70ch; }
.scsa-pager { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--scsa-line); padding-top: 18px; }
.scsa-pager a { text-decoration: none; font-weight: 700; }
.scsa-pager small { display: block; font-weight: 400; color: var(--scsa-muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; }
.scsa-pager .scsa-all { align-self: center; }
.scsa-pager .scsa-next { text-align: right; }

/* ---------- breathing room on sheriff pages ----------
 * WordPress gives every sheriff page's wrapper the class "sheriff".
 * Change the spacing with e.g. body.scsa-sheriff-page { --scsa-page-top: 64px; } */
body.scsa-sheriff-page { --scsa-page-top: clamp(32px, 5vw, 56px); --scsa-page-bottom: clamp(32px, 5vw, 56px); }
body.scsa-sheriff-page article.sheriff { padding-top: var(--scsa-page-top); padding-bottom: var(--scsa-page-bottom); }
.scsa-crumbs { margin-top: 12px; }

/* ---------- name beside the photo ----------
 * The sheriff's name is shown next to the photo, so the theme's own page title is hidden here. */
body.scsa-sheriff-page :is(.post-title, .entry-title, .page-title, .wp-block-post-title, .elementor-widget-theme-post-title, .elementor-page-title):not(.scsa-sd *) {
	display: none !important;
}
.scsa-profile .scsa-name {
	margin: 0 0 8px; padding: 0; font-size: clamp(1.6rem, 2.6vw, 1.875rem); line-height: 1.15;
	font-weight: 600; color: var(--scsa-title, #202b5d); text-wrap: balance;
}
.scsa-profile .scsa-crumbs { margin-top: 0; }

/* ---------- theme clean-up on sheriff pages ----------
 * Hides the theme's post date/author/comment line, share buttons, and
 * post-to-post navigation. Only applies on sheriff pages, never inside the
 * plugin's own markup. */
body.scsa-sheriff-page :is(
	.entry-meta, .post-meta, .posted-on, .byline, .comments-link, .cat-links, .tags-links,
	[class*="post-meta"], [class*="entry-meta"], [class*="blog-meta"], [class*="meta-info"],
	.wp-block-post-date, .wp-block-post-author, .wp-block-post-author-name, .wp-block-post-terms,
	.post-navigation, .posts-navigation, .navigation.post-navigation, .wp-block-post-navigation-link,
	[class*="post-navigation"], [class*="post-nav"], [class*="single-nav"], [class*="prev-next"],
	[class*="share"], .sharedaddy, .addtoany_share_save_container, .heateor_sss_sharing_container,
	.comments-area, #comments, .wp-block-comments, .author-bio, .author-info, [class*="author-box"],
	.related-posts, [class*="related-post"], .ova-next-pre-post
):not(.scsa-sd, .scsa-sd *):not(:has(.scsa-sd, h1)) {
	display: none !important;
}

@media (max-width: 860px) {
	.scsa-stage, .scsa-facts { grid-template-columns: 1fr; }
	.scsa-top { grid-template-columns: 1fr; }
	.scsa-portrait { max-width: 160px; }
}
@media (max-width: 520px) {
	.scsa-map text { display: none; }
	.scsa-facts dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { .scsa-map .scsa-c { transition: none; } }