/**
 * MW Cities v2 — styles ported from the new Serve the City design (index.html).
 * Everything is scoped under .mwc2 so the theme is not affected, and the
 * theme's button/input styles are reset inside the blocks.
 */

.mwc2 {
	--mwc2-blue: #0098db;
	--mwc2-blue-dark: #0078ae;
	--mwc2-navy: #102c42;
	--mwc2-muted: #385569;
	--mwc2-line: #dce8e9;
	--mwc2-tint: #eaf5f6;
	font-family: "DM Sans", sans-serif;
	color: var(--mwc2-navy);
	line-height: 1.5;
}
.mwc2 *, .mwc2 *::before, .mwc2 *::after { box-sizing: border-box; }
.mwc2 :focus-visible { outline: 3px solid #006d9e; outline-offset: 4px; }

/* Heading */
.mwc2 .mwc2-eyebrow { text-transform: uppercase; letter-spacing: .17em; font-size: .73rem; font-weight: 800; color: var(--mwc2-blue-dark); margin: 0 0 12px; }
.mwc2 .mwc2-title { font-family: "Fraunces", serif; font-weight: 700; letter-spacing: -.045em; line-height: 1.08; font-size: clamp(1.875rem, 3.5vw, 2.25rem); color: var(--mwc2-navy); margin: 0 0 24px; text-transform: none; }
.mwc2 .mwc2-note { font-size: .875rem; color: var(--mwc2-muted); margin: 16px 0 0; }
.mwc2 .mwc2-note a, .mwc2 .mwc2-link { color: var(--mwc2-blue-dark); font-weight: 700; text-decoration: underline; text-underline-offset: 5px; }

/* ---------- Cities Map ---------- */

.mwc2 .mwc2-card { display: grid; grid-template-columns: minmax(0, 1fr); border: 1px solid var(--mwc2-line); border-radius: 22px; background: #fff; overflow: hidden; }
.mwc2 .mwc2-panel { display: flex; flex-direction: column; min-width: 0; padding: 20px; }
.mwc2 .mwc2-map { min-height: var(--mwc2-map-height, 400px); background: var(--mwc2-tint); z-index: 0; }
@media (min-width: 768px) { .mwc2 .mwc2-panel { padding: 24px; } }

/* List next to the map (new design) */
.mwc2.mwc2-side .mwc2-panel { max-height: 420px; }
.mwc2.mwc2-side .mwc2-map { order: -1; min-height: 340px; }
@media (min-width: 1024px) {
	.mwc2.mwc2-side .mwc2-card { grid-template-columns: 360px minmax(0, 1fr); }
	.mwc2.mwc2-side .mwc2-panel { max-height: var(--mwc2-map-height, 400px); border-right: 1px solid var(--mwc2-line); }
	.mwc2.mwc2-side .mwc2-map { order: 0; min-height: var(--mwc2-map-height, 400px); }
}

/* List under the map, in columns (v1 layout) */
.mwc2.mwc2-under .mwc2-panel { order: 1; border-top: 1px solid var(--mwc2-line); }
.mwc2.mwc2-under .mwc2-list { column-count: var(--mwc2-cols, 4); column-gap: 20px; overflow: visible; }
.mwc2.mwc2-under .mwc2-list li { break-inside: avoid; }
@media (max-width: 768px) { .mwc2.mwc2-under .mwc2-list { column-count: 1; } }

/* Search — the theme styles input[type=search] with content-box sizing, which pushed it under the map */
.mwc2 .mwc2-label { display: block; font-weight: 700; margin-bottom: 8px; font-size: 1rem; color: var(--mwc2-navy); }
.mwc2 input.mwc2-field { -webkit-appearance: none; appearance: none; box-sizing: border-box !important; display: block; width: 100% !important; max-width: 100%; min-height: 48px; height: auto; margin: 0 0 16px; border: 1px solid #a9bcc5; border-radius: 10px; background: #fff; padding: 11px 13px; color: var(--mwc2-navy); font: inherit; box-shadow: none; }
.mwc2 input.mwc2-field:focus { border-color: var(--mwc2-blue-dark); outline: 3px solid #0098db44; }

/* Theme reset for our buttons */
.mwc2 button { appearance: none; -webkit-appearance: none; margin: 0; background: none; border: 0; box-shadow: none; font: inherit; color: inherit; text-transform: none; letter-spacing: normal; line-height: inherit; cursor: pointer; }

/* Region chips */
.mwc2 .mwc2-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.mwc2 .mwc2-region { border: 1.5px solid #a9bcc5; border-radius: 999px; padding: 6px 14px; font-size: .85rem; font-weight: 700; }
.mwc2 .mwc2-region[aria-pressed="true"] { background: var(--mwc2-navy); border-color: var(--mwc2-navy); color: #fff; }

/* City list */
.mwc2 .mwc2-count { font-size: .875rem; color: var(--mwc2-muted); margin: 0 0 8px; }
.mwc2 .mwc2-list { overflow-y: auto; flex: 1; min-height: 0; list-style: none; padding: 20px 0; margin: 0 -8px; scroll-padding-block: 20px; }
/* Classic grey scrollbar, with rounded top and bottom */
.mwc2 .mwc2-list::-webkit-scrollbar { width: 10px; }
.mwc2 .mwc2-list::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 999px; }
.mwc2 .mwc2-list::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 999px; border: 2px solid #f1f1f1; }
.mwc2 .mwc2-list::-webkit-scrollbar-thumb:hover { background: #a8a8a8; }
/* List under the map: not scrolling, no inner spacing */
.mwc2.mwc2-under .mwc2-list { padding: 0; }
.mwc2 .mwc2-list li { margin: 0; padding: 0; list-style: none; }
.mwc2 .mwc2-list li::before { display: none; }
.mwc2 .mwc2-city { display: flex; width: 100%; justify-content: space-between; align-items: baseline; gap: 10px; text-align: left; padding: 9px 10px; border-radius: 10px; font-weight: 700; }
.mwc2 .mwc2-city span { font-weight: 400; font-size: .85rem; color: var(--mwc2-muted); text-align: right; }
.mwc2 .mwc2-city:hover { background: var(--mwc2-tint); }
.mwc2 .mwc2-city[aria-current="true"] { background: #def1f3; color: var(--mwc2-blue-dark); }
.mwc2 .mwc2-empty { padding: 12px 8px; color: var(--mwc2-muted); }
.mwc2 .mwc2-map-error { padding: 24px; margin: 0; }

/* Google Maps info window (popup) */
.mwc2 .gm-style { font-family: "DM Sans", sans-serif; }
.mwc2 .gm-style .gm-style-iw-c { border-radius: 16px; box-shadow: 0 10px 30px #102c4230; padding: 14px 18px 16px !important; }
.mwc2 .gm-style .gm-style-iw-d { overflow: auto !important; }
.mwc2 .mwc2-popup { color: var(--mwc2-navy); font-size: .95rem; line-height: 1.5; }
.mwc2 .mwc2-popup p { margin: 0 0 4px; }
.mwc2 .mwc2-chip { font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #31596a; }
.mwc2 .mwc2-popup-city { font-family: "Fraunces", serif; font-size: 1.2rem; font-weight: 700; letter-spacing: -.02em; margin: 4px 0 10px !important; }
.mwc2 .mwc2-popup a { color: var(--mwc2-blue-dark); font-weight: 700; text-decoration: none; }
.mwc2 .mwc2-popup a:hover { text-decoration: underline; }
.mwc2 .mwc2-popup .fa { width: 1.1em; }
.mwc2 .mwc2-popup-socials { margin-top: 8px !important; font-size: 1.35rem; }
.mwc2 .mwc2-popup-socials a { margin-right: 6px; }

/* ---------- Cities Listing ---------- */

.mwc2-listing .mwc2-row { background: #fff; border-bottom: 1px solid var(--mwc2-line); }
.mwc2-listing .mwc2-row.is-dark { background: var(--mwc2-city); border-bottom-color: transparent; color: #fff; }
.mwc2-listing .mwc2-wrap { width: min(100% - 40px, 1180px); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: center; }
@media (min-width: 768px) { .mwc2-listing .mwc2-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } }

.mwc2-listing .mwc2-row-id { display: flex; align-items: center; gap: 18px; color: inherit; text-decoration: none; }
.mwc2-listing .mwc2-row-logo { height: 60px !important; width: auto !important; flex: none; }
.mwc2-listing .mwc2-row-name { font-family: "Fraunces", serif; font-weight: 700; font-size: clamp(1.4rem, 2.4vw, 1.9rem); letter-spacing: -.03em; line-height: 1.1; }
.mwc2-listing .mwc2-row.is-light .mwc2-row-name { color: var(--mwc2-city); }

.mwc2-listing .mwc2-row-icons { display: flex; flex-wrap: wrap; gap: 10px; }
.mwc2-listing .mwc2-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 999px; border: 1.5px solid currentColor; font-size: 1.25rem; text-decoration: none; transition: transform .2s, box-shadow .2s, background .2s, color .2s; }
.mwc2-listing .mwc2-row.is-light .mwc2-icon { color: var(--mwc2-navy); }
.mwc2-listing .mwc2-row.is-dark .mwc2-icon { color: #fff; }
.mwc2-listing .mwc2-icon:hover { transform: translateY(-2px); box-shadow: 0 9px 22px #102c4221; }
.mwc2-listing .mwc2-row.is-light .mwc2-icon:hover { background: var(--mwc2-navy); color: #fff; border-color: var(--mwc2-navy); }
.mwc2-listing .mwc2-row.is-dark .mwc2-icon:hover { background: #fff; color: var(--mwc2-city); border-color: #fff; }

@media (prefers-reduced-motion: reduce) {
	.mwc2 *, .mwc2 *::before, .mwc2 *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}