/**
 * Public list of notaries (/notarios): map of Portugal by district and county.
 * Everything is scoped under .nm and prefixed nm- so the site styles (inuit) do not leak in.
 * Colours are the Inventários palette from _vars.scss.
 */
.nm {
	--nm-navy: #13252F;      /* $black */
	--nm-blue: #3C5984;      /* $brand-blue */
	--nm-slate: #465862;
	--nm-muted: #66808f;
	--nm-line: #dbe2e5;
	--nm-soft: #eaeef0;
	--nm-paper: #ffffff;
	--nm-bg: #f4f6f7;
	--nm-yellow: #FBE03B;    /* $brand-yellow */
	--nm-yellow-soft: #fef9c7; /* $module-notice */
	--nm-yellow-ink: #6b5a00;  /* the yellow is too light for text on white */
	/* sequential scale for "notaries available" (light → $brand-blue) */
	--nm-s0: #e2e7ea;
	--nm-s1: #d0d9e5;
	--nm-s2: #a8b7cd;
	--nm-s3: #8095b4;
	--nm-s4: #5d769c;
	--nm-s5: #3C5984;
	--nm-radius: 14px;
	--nm-shadow: 0 1px 2px rgba(19,37,47,.06), 0 8px 24px rgba(19,37,47,.06);

	background: var(--nm-bg);
	color: var(--nm-navy);
	font-family: "Quicksand", "Titillium Web", Calibri, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
}
.nm *, .nm *::before, .nm *::after { box-sizing: border-box; }
.nm a { color: inherit; }
.nm button {
	font: inherit; color: inherit; line-height: inherit;
	text-transform: none; letter-spacing: normal; margin: 0;
}
.nm h1, .nm h2, .nm h3 { font-family: inherit; color: inherit; text-transform: none; }

/* ---------- hero */
.nm-hero {
	text-align: center;
	padding: 48px 16px 28px;
	background: radial-gradient(1200px 300px at 50% -80px, rgba(251,224,59,.16), transparent 70%);
}
.nm-eyebrow {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
	color: var(--nm-yellow-ink); background: var(--nm-yellow-soft); padding: 6px 12px; border-radius: 999px;
}
.nm-hero h1 {
	margin: 16px 0 8px;
	font-size: clamp(30px, 4.4vw, 46px); font-weight: 700; letter-spacing: .02em; line-height: 1.15;
	text-wrap: balance;
}
.nm-hero p { margin: 0 auto; max-width: 620px; color: var(--nm-slate); font-size: 18px; line-height: 1.5; text-wrap: pretty; }
.nm-stats { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.nm-stat {
	background: #fff; border: 1px solid var(--nm-line); border-radius: 12px;
	padding: 10px 18px; min-width: 150px; box-shadow: var(--nm-shadow);
}
.nm-stat b { display: block; font-size: 26px; line-height: 1.3; font-variant-numeric: tabular-nums; }
.nm-stat span { font-size: 13px; color: var(--nm-muted); }

/* ---------- layout */
.nm-wrap { max-width: 1240px; margin: 0 auto; padding: 0 16px 64px; }
.nm-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.nm-card { background: var(--nm-paper); border: 1px solid var(--nm-line); border-radius: var(--nm-radius); box-shadow: var(--nm-shadow); }

/* ---------- map */
.nm-map-card { position: sticky; top: 16px; padding: 16px; }
.nm-map-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; padding: 0 4px 8px; }
.nm-map-title { font-size: 15px; font-weight: 600; color: var(--nm-slate); }
.nm-map-title strong { color: var(--nm-navy); }
.nm-back {
	display: inline-flex; align-items: center; gap: 6px;
	border: 1px solid var(--nm-line); background: #fff; border-radius: 999px;
	padding: 7px 14px; font-size: 14px; font-weight: 600; cursor: pointer;
	transition: border-color .15s, background .15s;
}
.nm-back:hover { border-color: var(--nm-yellow); background: var(--nm-yellow-soft); }
.nm-back[hidden] { display: none; }
.nm-map-box { position: relative; }
.nm-map { display: block; width: 100%; height: auto; max-height: calc(100vh - 150px); touch-action: manipulation; }
.nm-map .nm-inset-frame { fill: #f8fafb; stroke: var(--nm-line); stroke-dasharray: 3 3; }
.nm-map .nm-inset-label { font-size: 15px; font-weight: 600; fill: var(--nm-muted); letter-spacing: .06em; text-transform: uppercase; }
.nm-map .nm-district, .nm-map .nm-county {
	stroke: #fff; stroke-width: 1; vector-effect: non-scaling-stroke;
	cursor: pointer; transition: fill .2s, opacity .3s, filter .2s;
	outline: none;
}
.nm-map .nm-district:hover, .nm-map .nm-district:focus-visible,
.nm-map .nm-county:hover, .nm-map .nm-county:focus-visible {
	filter: brightness(1.06) saturate(1.1);
}
/* islands are tiny at this scale: a stroke in their own colour makes them easier to hit */
.nm-map .nm-island { stroke: var(--nm-fill); stroke-width: 3; }
.nm-map .nm-district.is-dim { opacity: .18; pointer-events: none; }
.nm-map .nm-district.is-hidden { opacity: 0; pointer-events: none; }
.nm-map .nm-county { opacity: 0; pointer-events: none; }
.nm-map .nm-county.is-shown { opacity: 1; pointer-events: auto; }
.nm-map .nm-label {
	font-size: 15px; font-weight: 700; fill: var(--nm-navy); pointer-events: none;
	paint-order: stroke; stroke: rgba(255,255,255,.85); stroke-width: 3px; stroke-linejoin: round;
	text-anchor: middle; transition: opacity .25s;
}
.nm-map .nm-label.is-on-dark { fill: #fff; stroke: rgba(19,37,47,.5); }
.nm-map .nm-label-count { font-weight: 500; }
.nm-map .nm-outline { fill: none; stroke: var(--nm-yellow); stroke-width: 2.5; vector-effect: non-scaling-stroke; pointer-events: none; }
.nm-map .nm-outline.is-selected { stroke-width: 3.5; }
.nm-map.is-zoomed .nm-district-label { opacity: 0; }
.nm-tooltip {
	position: absolute; pointer-events: none; z-index: 5;
	background: var(--nm-navy); color: #fff; font-size: 13px; font-weight: 600; line-height: 1.35;
	padding: 7px 10px; border-radius: 8px; white-space: nowrap;
	transform: translate(-50%, calc(-100% - 12px)); opacity: 0; transition: opacity .12s;
}
.nm-tooltip small { display: block; font-size: 13px; font-weight: 500; color: #c9d5db; }
.nm-tooltip.is-on { opacity: 1; }
.nm-legend { display: flex; align-items: center; gap: 10px; padding: 10px 4px 0; font-size: 12px; color: var(--nm-muted); flex-wrap: wrap; }
.nm-legend-scale { display: flex; border-radius: 4px; overflow: hidden; }
.nm-legend-scale i { width: 22px; height: 10px; display: block; }

/* ---------- panel */
.nm-panel { padding: 20px; min-height: 600px; }
.nm-search { position: relative; display: flex; align-items: center; }
.nm-search svg { position: absolute; left: 14px; width: 18px; height: 18px; color: var(--nm-muted); }
.nm-search input {
	width: 100%; margin: 0; font: inherit; font-size: 16px; color: var(--nm-navy); height: auto;
	padding: 13px 14px 13px 42px; border: 1px solid var(--nm-line); border-radius: 12px; background: #fbfcfc;
	box-shadow: none; transition: border-color .15s, box-shadow .15s;
}
.nm-search input:focus { outline: none; border-color: #e3c500; box-shadow: 0 0 0 4px rgba(251,224,59,.25); background: #fff; }
.nm-selects { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.nm-selects label { display: block; font-size: 12px; font-weight: 600; color: var(--nm-muted); margin: 0 0 4px 2px; }
.nm-selects select {
	width: 100%; margin: 0; font: inherit; font-size: 15px; color: var(--nm-navy); height: auto;
	padding: 10px 12px; border: 1px solid var(--nm-line); border-radius: 10px; background: #fff;
}
.nm-selects select:focus { outline: none; border-color: #e3c500; box-shadow: 0 0 0 4px rgba(251,224,59,.25); }

.nm-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 20px 0 4px; font-size: 14px; color: var(--nm-muted); }
.nm-crumbs button { border: 0; background: none; padding: 0; cursor: pointer; color: var(--nm-blue); font-weight: 600; }
.nm-crumbs button:hover { text-decoration: underline; }
.nm-crumbs-sep { color: var(--nm-line); }
.nm-panel h2 { margin: 2px 0 4px; font-size: 26px; font-weight: 700; line-height: 1.25; }
.nm-lead { margin: 0 0 16px; color: var(--nm-slate); }

.nm-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.nm-chip {
	display: inline-flex; align-items: center; gap: 8px;
	border: 1px solid var(--nm-line); background: #fff; border-radius: 999px;
	padding: 6px 8px 6px 14px; font-size: 14px; font-weight: 600; cursor: pointer;
	transition: border-color .15s, background .15s;
}
.nm-chip:hover { border-color: var(--nm-yellow); background: var(--nm-yellow-soft); }
.nm-chip.is-active { background: var(--nm-blue); border-color: var(--nm-blue); color: #fff; }
.nm-chip-count {
	min-width: 24px; text-align: center; font-size: 12px; font-variant-numeric: tabular-nums;
	background: var(--nm-soft); color: var(--nm-slate); border-radius: 999px; padding: 2px 7px;
}
.nm-chip.is-active .nm-chip-count { background: rgba(255,255,255,.18); color: #fff; }
.nm-chip.is-empty { color: var(--nm-muted); font-weight: 500; }
.nm-chip.is-empty .nm-chip-count { background: transparent; }
.nm-chips-toggle { border: 0; background: none; color: var(--nm-blue); font-weight: 600; cursor: pointer; padding: 6px 4px; font-size: 14px; }

/* county heading in the district view: a short blue bar marks it, no rule underneath */
.nm-group-title {
	position: sticky; top: 0; z-index: 1;
	display: flex; align-items: center; gap: 10px;
	margin: 26px 0 10px; padding: 6px 0; background: var(--nm-paper);
	font-size: 17px; font-weight: 700; color: var(--nm-navy);
}
.nm-group-title::before {
	content: ""; flex: 0 0 4px; height: 20px; border-radius: 4px; background: var(--nm-blue);
}
.nm-group-title span {
	font-size: 12px; font-weight: 600; color: var(--nm-slate);
	background: var(--nm-soft); border-radius: 999px; padding: 2px 9px;
}

.nm-notary {
	display: grid; grid-template-columns: 48px 1fr; gap: 14px;
	padding: 16px; border: 1px solid var(--nm-line); border-radius: 12px; margin-bottom: 10px;
	background: #fff; transition: border-color .15s, box-shadow .15s;
	animation: nm-rise .3s ease both;
}
.nm-notary:hover { border-color: #c7d2d8; box-shadow: var(--nm-shadow); }
@keyframes nm-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.nm-avatar {
	width: 48px; height: 48px; border-radius: 50%;
	display: grid; place-items: center; font-weight: 700; font-size: 16px;
	background: var(--nm-yellow-soft); color: var(--nm-yellow-ink);
}
.nm-notary h3 { margin: 2px 0 4px; font-size: 18px; font-weight: 700; line-height: 1.3; }
.nm-addr { color: var(--nm-slate); font-size: 15px; line-height: 1.45; }
.nm-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.nm-action {
	display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
	border: 1px solid var(--nm-line); border-radius: 999px; padding: 6px 12px;
	font-size: 14px; font-weight: 600; background: #fff; white-space: nowrap; color: var(--nm-navy);
	transition: border-color .15s, background .15s;
}
.nm a.nm-action:hover { border-color: var(--nm-yellow); background: var(--nm-yellow-soft); text-decoration: none; color: var(--nm-navy); }
.nm-action svg { flex: 0 0 15px; width: 15px; height: 15px; }
.nm mark { background: var(--nm-yellow-soft); color: inherit; border-radius: 3px; padding: 0 1px; }

.nm-empty {
	text-align: center; padding: 36px 16px; border: 1px dashed var(--nm-line); border-radius: 12px; color: var(--nm-slate);
}
.nm-empty h3 { margin: 8px 0 6px; font-size: 18px; }
.nm-empty p { margin: 0 0 14px; }
.nm-empty .nm-chips { justify-content: center; margin: 0; }

.nm-district-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.nm-district-btn {
	display: flex; align-items: center; justify-content: space-between; gap: 8px;
	text-align: left; border: 1px solid var(--nm-line); background: #fff; border-radius: 10px;
	padding: 10px 12px; cursor: pointer; font-weight: 600; font-size: 15px;
	transition: border-color .15s, background .15s;
}
.nm-district-btn:hover { border-color: var(--nm-yellow); background: var(--nm-yellow-soft); }
.nm-district-count { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--nm-muted); font-variant-numeric: tabular-nums; }
.nm-district-count i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.nm-section-label { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--nm-slate); margin: 22px 0 10px; }

.nm-note { margin: 24px 0 0; font-size: 13px; color: var(--nm-muted); display: flex; gap: 8px; align-items: flex-start; }
.nm-note svg { flex: 0 0 16px; width: 16px; height: 16px; margin-top: 1px; }

.nm-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 900px) {
	.nm-layout { grid-template-columns: 1fr; }
	.nm-map-card { position: relative; top: 0; }
	.nm-map { max-height: 62vh; }
	.nm-panel { min-height: 0; }
}
@media (max-width: 520px) {
	.nm-hero { padding-top: 32px; }
	.nm-hero p { font-size: 16px; }
	.nm-stats { flex-wrap: nowrap; gap: 8px; }
	.nm-stat { min-width: 0; flex: 1 1 0; padding: 8px 6px; }
	.nm-stat b { font-size: 22px; }
	.nm-stat span { font-size: 11px; line-height: 1.2; display: block; }
	.nm-selects { grid-template-columns: 1fr; }
	.nm-panel { padding: 16px; }
	.nm-notary { grid-template-columns: 1fr; }
	.nm-avatar { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.nm * { animation: none !important; transition: none !important; }
}