/*
 * Municipal Template Library — frontend
 *
 * Colors come from the custom properties printed by MTL_Color_Customizer, which
 * mirror the Elementor globals. Nothing here hard-codes a palette value, so a
 * scheme change in the admin recolors this markup at the same time it recolors
 * the Elementor sections around it.
 *
 * Link states are declared in LVHA order throughout: :link, :visited, :hover,
 * :active. Every rule that sets a background also sets its text color.
 */

.mtl-grid,
.mtl-quick-links {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Explicit widths per breakpoint. No flex shorthand, no CSS grid. */
.mtl-grid > *,
.mtl-quick-links > * {
	width: 100%;
	min-width: 0;
}

@media (min-width: 48rem) {
	.mtl-cols-2 > *,
	.mtl-cols-3 > *,
	.mtl-cols-4 > *,
	.mtl-cols-6 > * {
		width: calc(50% - 0.75rem);
	}
}

@media (min-width: 62rem) {
	.mtl-cols-2 > * {
		width: calc(50% - 0.75rem);
	}

	.mtl-cols-3 > * {
		width: calc(33.333% - 1rem);
	}

	.mtl-cols-4 > * {
		width: calc(25% - 1.125rem);
	}

	.mtl-cols-6 > * {
		width: calc(16.666% - 1.25rem);
	}
}

/* ---------------------------------------------------------------- cards */

.mtl-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 0.0625rem solid var(--mtl-muted, #d6d2c4);
	border-radius: 0.5rem;
	background-color: var(--mtl-surface, #ffffff);
	color: var(--mtl-text, #1b365d);
}

.mtl-card-media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background-color: var(--mtl-muted, #d6d2c4);
	color: var(--mtl-on-muted, #003b49);
}

.mtl-card-person .mtl-card-media {
	aspect-ratio: 1 / 1;
}

.mtl-card-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mtl-card-media-empty {
	display: flex;
	align-items: center;
	justify-content: center;
}

.mtl-card-media-empty .mtl-icon {
	width: 2.5rem;
	height: 2.5rem;
	opacity: 0.55;
}

.mtl-card-body {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1.25rem 1.25rem 1.5rem;
}

.mtl-card-glyph {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	margin-bottom: 0.25rem;
	border-radius: 0.375rem;
	background-color: var(--mtl-muted, #d6d2c4);
	color: var(--mtl-on-muted, #003b49);
}

.mtl-card-title {
	margin: 0;
	font-size: 1.1875rem;
	line-height: 1.3;
	color: var(--mtl-primary, #1b365d);
}

.mtl-card-eyebrow {
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--mtl-secondary, #003b49);
}

.mtl-card-meta {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--mtl-text, #1b365d);
}

.mtl-card-text {
	margin: 0;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--mtl-text, #1b365d);
}

/* ------------------------------------------------------------- contacts */

.mtl-contact-list {
	margin: 0.5rem 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}

.mtl-contact-line {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.9375rem;
	color: var(--mtl-text, #1b365d);
}

.mtl-contact-line a:link {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--mtl-secondary, #003b49);
	text-decoration: underline;
	text-underline-offset: 0.125rem;
}

.mtl-contact-line a:visited {
	color: var(--mtl-secondary, #003b49);
}

.mtl-contact-line a:hover {
	color: var(--mtl-primary, #1b365d);
	text-decoration-thickness: 0.125rem;
}

.mtl-contact-line a:active {
	color: var(--mtl-primary, #1b365d);
}

.mtl-icon {
	flex: none;
	width: 1.125rem;
	height: 1.125rem;
}

.mtl-spec-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.25rem;
	margin: 0.5rem 0 0;
	font-size: 0.9375rem;
	color: var(--mtl-text, #1b365d);
}

.mtl-spec-list dt {
	font-weight: 700;
}

.mtl-spec-list dt::after {
	content: ":";
}

.mtl-spec-list dd {
	margin: 0 1rem 0 0;
}

/* -------------------------------------------------------------- buttons */

.mtl-button:link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	align-self: flex-start;
	margin-top: auto;
	padding: 0.75rem 1.25rem;
	border: 0.125rem solid transparent;
	border-radius: 0.375rem;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	background-color: var(--mtl-accent, #ffc845);
	color: var(--mtl-on-accent, #003b49);
}

.mtl-button:visited {
	background-color: var(--mtl-accent, #ffc845);
	color: var(--mtl-on-accent, #003b49);
}

.mtl-button:hover {
	background-color: var(--mtl-primary, #1b365d);
	color: var(--mtl-on-primary, #ffffff);
}

.mtl-button:active {
	background-color: var(--mtl-secondary, #003b49);
	color: var(--mtl-on-secondary, #ffffff);
}

.mtl-button[aria-disabled="true"] {
	background-color: var(--mtl-muted, #d6d2c4);
	color: var(--mtl-on-muted, #003b49);
	cursor: not-allowed;
}

.mtl-button-quiet:link {
	padding: 0.5rem 0;
	background-color: transparent;
	color: var(--mtl-secondary, #003b49);
	text-decoration: underline;
	text-underline-offset: 0.1875rem;
}

.mtl-button-quiet:visited {
	background-color: transparent;
	color: var(--mtl-secondary, #003b49);
}

.mtl-button-quiet:hover {
	background-color: transparent;
	color: var(--mtl-primary, #1b365d);
	text-decoration-thickness: 0.125rem;
}

.mtl-button-quiet:active {
	background-color: transparent;
	color: var(--mtl-primary, #1b365d);
}

/* --------------------------------------------------------- quick links */

.mtl-quick-link a:link {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	height: 100%;
	padding: 1.5rem 1.25rem;
	border: 0.125rem solid var(--mtl-secondary, #003b49);
	border-radius: 0.5rem;
	text-decoration: none;
	background-color: var(--mtl-surface, #ffffff);
	color: var(--mtl-primary, #1b365d);
}

.mtl-quick-link a:visited {
	border-color: var(--mtl-secondary, #003b49);
	background-color: var(--mtl-surface, #ffffff);
	color: var(--mtl-primary, #1b365d);
}

.mtl-quick-link a:hover {
	border-color: var(--mtl-primary, #1b365d);
	background-color: var(--mtl-primary, #1b365d);
	color: var(--mtl-on-primary, #ffffff);
}

.mtl-quick-link a:active {
	border-color: var(--mtl-secondary, #003b49);
	background-color: var(--mtl-secondary, #003b49);
	color: var(--mtl-on-secondary, #ffffff);
}

.mtl-quick-link .mtl-icon {
	width: 1.75rem;
	height: 1.75rem;
}

.mtl-quick-link-label {
	font-size: 1.125rem;
	font-weight: 700;
}

.mtl-quick-link-note {
	font-size: 0.9375rem;
}

/* --------------------------------------------------------- empty state */

.mtl-empty {
	margin: 0;
	padding: 2rem 1.5rem;
	border: 0.125rem dashed var(--mtl-muted, #d6d2c4);
	border-radius: 0.5rem;
	text-align: center;
	background-color: var(--mtl-surface, #ffffff);
	color: var(--mtl-text, #1b365d);
}

/* ------------------------------------------------- leaving-site dialog */

.mtl-dialog[hidden] {
	display: none;
}

.mtl-dialog {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	background-color: rgba(0, 0, 0, 0.6);
}

.mtl-dialog-panel {
	width: 100%;
	max-width: 28rem;
	overflow: hidden;
	border-radius: 0.75rem;
	background-color: var(--mtl-surface, #ffffff);
	color: var(--mtl-text, #1b365d);
}

.mtl-dialog-body {
	padding: 1.75rem;
}

.mtl-dialog-title {
	margin: 0 0 0.75rem;
	font-size: 1.25rem;
	color: var(--mtl-primary, #1b365d);
}

.mtl-dialog-text {
	margin: 0 0 1rem;
	font-size: 1rem;
	line-height: 1.6;
}

.mtl-dialog-url {
	display: block;
	overflow-wrap: anywhere;
	margin: 0 0 1.5rem;
	padding: 0.75rem;
	border-radius: 0.375rem;
	font-size: 0.9375rem;
	background-color: var(--mtl-muted, #d6d2c4);
	color: var(--mtl-on-muted, #003b49);
}

.mtl-dialog-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.mtl-dialog-actions button {
	padding: 0.75rem 1.25rem;
	border: 0.125rem solid transparent;
	border-radius: 0.375rem;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
}

.mtl-dialog-cancel {
	border-color: var(--mtl-primary, #1b365d) !important;
	background-color: var(--mtl-surface, #ffffff);
	color: var(--mtl-primary, #1b365d);
}

.mtl-dialog-cancel:hover,
.mtl-dialog-cancel:focus {
	background-color: var(--mtl-primary, #1b365d);
	color: var(--mtl-on-primary, #ffffff);
}

.mtl-dialog-proceed {
	background-color: var(--mtl-primary, #1b365d);
	color: var(--mtl-on-primary, #ffffff);
}

.mtl-dialog-proceed:hover,
.mtl-dialog-proceed:focus {
	background-color: var(--mtl-secondary, #003b49);
	color: var(--mtl-on-secondary, #ffffff);
}

/* ------------------------------------------------------------ a11y base */

/*
 * Two-color focus ring. A single gold ring measures 1.54:1 against a white
 * page, which fails SC 1.4.11. Pairing a surface-colored inner ring with a
 * primary-colored outer ring guarantees that one of the two clears 3:1 no
 * matter what the focused element is sitting on.
 */
.mtl-card a:focus-visible,
.mtl-quick-link a:focus-visible,
.mtl-button:focus-visible,
.mtl-dialog button:focus-visible {
	outline: 0.1875rem solid var(--mtl-surface, #ffffff);
	outline-offset: 0.125rem;
	box-shadow: 0 0 0 0.375rem var(--mtl-primary, #1b365d);
}


.screen-reader-text {
	position: absolute !important;
	width: 0.0625rem;
	height: 0.0625rem;
	overflow: hidden;
	clip: rect(0.0625rem, 0.0625rem, 0.0625rem, 0.0625rem);
	clip-path: inset(50%);
	white-space: nowrap;
	word-wrap: normal;
}

@media (prefers-reduced-motion: reduce) {
	.mtl-card,
	.mtl-quick-link a,
	.mtl-button {
		transition: none !important;
	}
}