/**
 * City page styles.
 *
 * Replaces the inline style attributes that were spread across the old
 * template. Inline styles meant the markup could not be cached or restyled,
 * and every colour was repeated dozens of times.
 *
 * Everything is scoped under .cis- so it cannot collide with the theme.
 */

.cis-page {
	--cis-ink: #111827;
	--cis-muted: #4b5563;
	--cis-line: #e5e7eb;
	--cis-tint: #f9fafb;
	--cis-accent: #1d4ed8;
	--cis-accent-hover: #1e40af;
	--cis-accent-ink: #ffffff;
	--cis-focus: #1d4ed8;
	--cis-radius: 10px;
	--cis-gap: 1rem;

	color: var(--cis-ink);
	line-height: 1.7;
}

@media (prefers-color-scheme: dark) {
	.cis-page {
		--cis-ink: #f3f4f6;
		--cis-muted: #b6bcc7;
		--cis-line: #374151;
		--cis-tint: #1f2937;
		/* Light accent on dark ground, with dark ink on top: 8.2:1. */
		--cis-accent: #7ea6ff;
		--cis-accent-hover: #a8c4ff;
		--cis-accent-ink: #0b1220;
		--cis-focus: #a8c4ff;
	}
}

/* ===== BREADCRUMBS ===== */

.cis-crumbs__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
	font-size: 0.85rem;
	color: var(--cis-muted);
}

.cis-crumbs__list li + li::before {
	content: "›";
	margin-right: 0.5rem;
	color: var(--cis-muted);
}

/* ===== HERO ===== */

.cis-hero {
	margin-bottom: 2.5rem;
}

.cis-hero__title {
	font-size: clamp(1.6rem, 4vw, 2.25rem);
	line-height: 1.25;
	margin: 0 0 1rem;
}

/*
 * The direct-answer block. Visually distinct because it is the passage most
 * likely to be quoted — by a featured snippet, by a voice assistant, or by a
 * reader who only reads one paragraph.
 */
.cis-answer {
	font-size: 1.05rem;
	line-height: 1.75;
	margin: 0 0 1.5rem;
	padding: 1.15rem 1.25rem;
	background: var(--cis-tint);
	border-left: 3px solid var(--cis-accent);
	border-radius: 0 var(--cis-radius) var(--cis-radius) 0;
}

.cis-hero__actions {
	margin: 0;
}

/* ===== SECTIONS ===== */

.cis-section {
	margin: 2.75rem 0;
}

.cis-section__title {
	font-size: clamp(1.25rem, 2.5vw, 1.5rem);
	line-height: 1.3;
	margin: 0 0 1.25rem;
}

.cis-section__lede {
	margin: -0.5rem 0 1.5rem;
	color: var(--cis-muted);
	font-size: 0.95rem;
}

/* ===== BUTTONS =====
 *
 * Themes almost always style `a:hover` globally, and that rule was winning
 * against a bare `.cis-btn` class — repainting the label the same blue as the
 * button behind it, so the text vanished on hover. Two fixes:
 *
 *   1. Every state (link, visited, hover, focus, active) is declared, so
 *      there is no gap for a theme rule to fill.
 *   2. Selectors are qualified as `.cis-page a.cis-btn`, which outranks a
 *      theme's `a:hover` on specificity without resorting to !important.
 *
 * Hover now darkens the background instead of fading opacity. Fading a solid
 * button toward the page behind it lowers contrast exactly when the user is
 * about to click.
 *
 * Measured contrast, white label on solid accent:
 *   rest  #1d4ed8   6.70:1  AA
 *   hover #1e40af   8.72:1  AAA
 * Dark theme, #0b1220 label on light accent:
 *   rest  #7ea6ff   7.83:1  AAA
 *   hover #a8c4ff  10.70:1  AAA
 * All well past the WCAG AA 4.5:1 threshold for body-size text.
 */

.cis-page a.cis-btn,
.cis-page a.cis-btn:link,
.cis-page a.cis-btn:visited,
.cis-page a.cis-btn:hover,
.cis-page a.cis-btn:focus,
.cis-page a.cis-btn:active,
.cis-page button.cis-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 44px minimum touch target. */
	min-height: 44px;
	padding: 0.6rem 1.35rem;
	border-radius: 8px;
	font-size: 0.95rem;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

@media (prefers-reduced-motion: reduce) {
	.cis-page a.cis-btn,
	.cis-page button.cis-btn {
		transition: none;
	}
}

/* --- Primary: solid accent, white label in every state --- */

.cis-page a.cis-btn--primary,
.cis-page a.cis-btn--primary:link,
.cis-page a.cis-btn--primary:visited,
.cis-page button.cis-btn--primary {
	background-color: var(--cis-accent);
	color: var(--cis-accent-ink);
	border: 1px solid var(--cis-accent);
}

.cis-page a.cis-btn--primary:hover,
.cis-page a.cis-btn--primary:focus,
.cis-page a.cis-btn--primary:active,
.cis-page button.cis-btn--primary:hover,
.cis-page button.cis-btn--primary:focus {
	background-color: var(--cis-accent-hover);
	border-color: var(--cis-accent-hover);
	/* Explicit, so a theme's a:hover colour cannot erase the label. */
	color: var(--cis-accent-ink);
	text-decoration: none;
}

/* --- Ghost: outlined, fills in on hover --- */

.cis-page a.cis-btn--ghost,
.cis-page a.cis-btn--ghost:link,
.cis-page a.cis-btn--ghost:visited,
.cis-page button.cis-btn--ghost {
	background-color: transparent;
	color: var(--cis-accent);
	border: 1px solid var(--cis-accent);
}

.cis-page a.cis-btn--ghost:hover,
.cis-page a.cis-btn--ghost:focus,
.cis-page a.cis-btn--ghost:active,
.cis-page button.cis-btn--ghost:hover,
.cis-page button.cis-btn--ghost:focus {
	background-color: var(--cis-accent);
	border-color: var(--cis-accent);
	color: var(--cis-accent-ink);
	text-decoration: none;
}

/* --- Invert: used on the accent-coloured CTA panel --- */

.cis-page a.cis-btn--invert,
.cis-page a.cis-btn--invert:link,
.cis-page a.cis-btn--invert:visited {
	background-color: var(--cis-accent-ink);
	color: var(--cis-accent);
	border: 1px solid var(--cis-accent-ink);
}

.cis-page a.cis-btn--invert:hover,
.cis-page a.cis-btn--invert:focus,
.cis-page a.cis-btn--invert:active {
	background-color: transparent;
	color: var(--cis-accent-ink);
	border-color: var(--cis-accent-ink);
	text-decoration: none;
}

/* Focus ring sits outside the button so it stays visible on any background. */
.cis-page a.cis-btn:focus-visible,
.cis-page button.cis-btn:focus-visible {
	outline: 3px solid var(--cis-focus);
	outline-offset: 3px;
}

/* ===== LISTINGS ===== */

.cis-listings {
	display: grid;
	gap: var(--cis-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cis-listing {
	display: flex;
	gap: 1rem;
	padding: 1.25rem;
	border: 1px solid var(--cis-line);
	border-radius: var(--cis-radius);
}

.cis-listing.is-featured {
	border-color: var(--cis-accent);
	box-shadow: inset 3px 0 0 var(--cis-accent);
}

.cis-listing__logo {
	flex: 0 0 72px;
	width: 72px;
	height: 72px;
	object-fit: cover;
	border-radius: 8px;
}

.cis-listing__body {
	flex: 1 1 auto;
	min-width: 0;
}

.cis-listing__name {
	font-size: 1.1rem;
	margin: 0 0 0.35rem;
}

.cis-listing__address,
.cis-listing__excerpt {
	margin: 0 0 0.5rem;
	font-size: 0.92rem;
	color: var(--cis-muted);
}

.cis-listing__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 0.75rem 0 0;
}

@media (max-width: 30rem) {
	.cis-listing {
		flex-direction: column;
	}

	.cis-listing__actions .cis-btn {
		flex: 1 1 100%;
	}
}

/* ===== EMPTY STATE ===== */

.cis-empty {
	padding: 2rem 1.5rem;
	background: var(--cis-tint);
	border: 1px solid var(--cis-line);
	border-radius: var(--cis-radius);
	text-align: center;
}

.cis-empty__lead {
	margin: 0 0 0.35rem;
	font-weight: 600;
}

.cis-empty__help {
	margin: 0 0 1.25rem;
	color: var(--cis-muted);
}

/* ===== LEGAL FACTS ===== */

.cis-facts {
	border: 1px solid var(--cis-line);
	border-radius: var(--cis-radius);
	overflow: hidden;
}

.cis-facts__list {
	margin: 0;
}

.cis-facts__row {
	display: grid;
	grid-template-columns: minmax(11rem, 32%) 1fr;
	gap: 1rem;
	padding: 1.15rem 1.25rem;
	border-bottom: 1px solid var(--cis-line);
}

.cis-facts__row:last-child {
	border-bottom: 0;
}

.cis-facts__row dt {
	font-weight: 600;
	color: var(--cis-muted);
	font-size: 0.9rem;
}

.cis-facts__row dd {
	margin: 0;
}

.cis-facts__note {
	margin: 0.5rem 0 0;
	font-size: 0.92rem;
	color: var(--cis-muted);
}

@media (max-width: 40rem) {
	.cis-facts__row {
		grid-template-columns: 1fr;
		gap: 0.35rem;
	}
}

.cis-cite {
	display: block;
	margin-top: 0.25rem;
	font-size: 0.85rem;
	font-style: normal;
	color: var(--cis-muted);
}

.cis-source {
	margin: 0.85rem 0 0;
	font-size: 0.85rem;
	color: var(--cis-muted);
}

/* ===== CORRIDORS ===== */

.cis-corridors {
	display: grid;
	gap: var(--cis-gap);
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

.cis-corridor {
	padding: 1.15rem;
	background: var(--cis-tint);
	border-radius: var(--cis-radius);
}

.cis-corridor__name {
	font-size: 1rem;
	margin: 0 0 0.5rem;
}

.cis-corridor p {
	margin: 0;
	font-size: 0.93rem;
	color: var(--cis-muted);
}

.cis-notes {
	margin-top: 1.25rem;
	font-size: 0.95rem;
}

/* ===== DATA TABLE ===== */

.cis-table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--cis-line);
	border-radius: var(--cis-radius);
}

.cis-table th,
.cis-table td {
	padding: 0.85rem 1.1rem;
	text-align: left;
	border-bottom: 1px solid var(--cis-line);
}

.cis-table tr:last-child th,
.cis-table tr:last-child td {
	border-bottom: 0;
}

.cis-table th {
	font-weight: 500;
	color: var(--cis-muted);
}

.cis-table td {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	text-align: right;
}

/* ===== COURT ===== */

.cis-court {
	padding: 1.25rem;
	background: var(--cis-tint);
	border-radius: var(--cis-radius);
}

.cis-court__name {
	font-size: 1.05rem;
	margin: 0 0 0.35rem;
}

.cis-court__address {
	margin: 0 0 0.75rem;
	color: var(--cis-muted);
	font-size: 0.92rem;
}

/* ===== FAQ ===== */

.cis-faq {
	border: 1px solid var(--cis-line);
	border-radius: var(--cis-radius);
	margin-bottom: 0.75rem;
}

.cis-faq__q {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	/* 44px minimum touch target. */
	min-height: 44px;
	padding: 0.9rem 1.15rem;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.cis-faq__q::-webkit-details-marker {
	display: none;
}

.cis-faq__q::after {
	content: "+";
	font-weight: 400;
	font-size: 1.35rem;
	color: var(--cis-muted);
	flex: 0 0 auto;
}

.cis-faq[open] .cis-faq__q::after {
	content: "−";
}

.cis-faq__q:focus-visible {
	outline: 3px solid var(--cis-accent);
	outline-offset: -3px;
	border-radius: var(--cis-radius);
}

.cis-faq__a {
	padding: 0 1.15rem 1.15rem;
}

.cis-faq__a p {
	margin: 0;
	color: var(--cis-muted);
}

/* ===== NEARBY ===== */

.cis-nearby {
	display: grid;
	gap: 0.6rem;
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

.cis-nearby a {
	display: block;
	/* 44px minimum touch target. */
	min-height: 44px;
	padding: 0.75rem 1rem;
	background: var(--cis-tint);
	border-radius: 8px;
	text-decoration: none;
	font-size: 0.93rem;
}

.cis-nearby a:hover {
	text-decoration: underline;
}

.cis-nearby a:focus-visible {
	outline: 3px solid var(--cis-focus);
	outline-offset: 2px;
}

/* Firm count beside a city link on the state hub. */
.cis-count {
	display: block;
	margin-top: 0.15rem;
	font-size: 0.8rem;
	color: var(--cis-muted);
}

/* ===== CTA ===== */

.cis-cta {
	margin: 3rem 0;
	padding: 2rem 1.75rem;
	background: var(--cis-accent);
	color: var(--cis-accent-ink);
	border-radius: var(--cis-radius);
	text-align: center;
}

.cis-cta__title {
	margin: 0 0 0.5rem;
	font-size: 1.25rem;
	color: inherit;
}

.cis-cta p {
	margin: 0 0 1.25rem;
	opacity: 0.9;
}

/* ===== NOTICES + DISCLOSURE ===== */

.cis-notice {
	padding: 1rem 1.25rem;
	border-left: 3px solid var(--cis-muted);
	background: var(--cis-tint);
	border-radius: 0 var(--cis-radius) var(--cis-radius) 0;
	font-size: 0.93rem;
}

.cis-notice p {
	margin: 0;
}

/* Editor-only build notice. Never shown to visitors. */
.cis-notice--editor {
	border-left-color: var(--cis-accent);
	margin-bottom: 1.5rem;
}

.cis-disclosure {
	margin-top: 3rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--cis-line);
	font-size: 0.85rem;
	color: var(--cis-muted);
}

.cis-disclosure p {
	margin: 0 0 0.6rem;
}

.cis-disclosure__review {
	font-weight: 600;
}