/* ============================================================
   Baker Donelson - State Foreclosure Guide (v2, second revision)
   Built to fill the height of its iframe exactly. No vh units
   are used inside this file - inside a frame, vh resolves
   against the frame, not the device.

   Recommended embed:
   <iframe src="av-state-guide-v2.html" width="95%" height="760"
           scrolling="no" frameborder="0"
           style="width:95%;height:clamp(560px,88vh,900px);border:0"></iframe>
   ============================================================ */

html,
body {
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden; /* the panel is the only scroll context */
	background: #ffffff;
}

.fc-guide {
	--fc-teal: #006983;
	--fc-teal-dark: #00566b;
	--fc-red: #d51b1e;
	--fc-ink: #22272b;
	--fc-muted: #5c6670;
	--fc-rule: #d6dbdf;
	--fc-panel-bg: #ffffff;
	--fc-stroke: #ffffff;
	--fc-blank: #dfe5e7;
	--fc-blank-edge: #8d9ea4;
	--fc-font: Arial, Helvetica, "Helvetica Neue", sans-serif;

	font-family: var(--fc-font);
	color: var(--fc-ink);
	line-height: 1.5;
	box-sizing: border-box;
	height: 100%;
	max-width: 1180px;
	margin: 0 auto;
	padding: 10px;
	display: flex;
	flex-direction: column;
	position: relative; /* anchor for the mobile sheet */
}

.fc-guide *,
.fc-guide *::before,
.fc-guide *::after {
	box-sizing: inherit;
}

/* ---------- Two-column shell ---------- */

.fc-layout {
	flex: 1 1 auto;
	min-height: 0; /* lets children shrink instead of overflowing */
	display: grid;
	grid-template-columns: minmax(0, 1.75fr) minmax(330px, 1fr);
	grid-template-rows: auto minmax(0, 1fr);
	/* Explicit areas. The picker is a direct child of the grid so it
	   can move above the map on small screens, which means placement
	   must be stated - auto-placement would push the panel to row 2. */
	grid-template-areas:
		"map picker"
		"map panel";
	column-gap: 22px;
	row-gap: 10px;
	/* The panel's height is set in script to match the map column. */
	align-items: start;
}

/* ---------- Left column: map ---------- */

.fc-map-col {
	grid-area: map;
	min-width: 0;
	min-height: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

.fc-map-wrap {
	flex: 0 1 auto;
	min-height: 0;
	display: flex;
	justify-content: center;
	overflow: hidden;
}

/* The SVG scales to whatever box it is given, in both axes. */
.fc-map-wrap svg {
	width: 100%;
	height: auto;
	max-height: 100%;
	object-fit: contain;
	display: block;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	touch-action: manipulation;
}

.fc-state {
	stroke: var(--fc-stroke);
	stroke-width: 0.8;
	stroke-linejoin: round;
	outline: none;
	transition: fill 120ms ease-in-out;
}

/* States with a written summary. */
.fc-covered {
	fill: var(--fc-teal);
	cursor: pointer;
}

.fc-covered:hover {
	fill: var(--fc-red);
}

/* States without one. Drawn for geographic context, not clickable.
   The muted fill needs its own outline or it would dissolve into the
   white page at the outer edge of the map. */
.fc-uncovered {
	fill: var(--fc-blank);
	stroke: var(--fc-blank-edge);
	stroke-width: 0.7;
	pointer-events: none;
}

.fc-label-off {
	fill: #556267;
}

.fc-state.is-selected {
	fill: var(--fc-red);
	stroke: #ffffff;
	stroke-width: 2.2;
	filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.55));
}

.fc-state:focus-visible {
	stroke: #ffd400;
	stroke-width: 2.2;
}

.fc-label {
	fill: #ffffff;
	font-family: var(--fc-font);
	font-size: 10px;
	font-weight: bold;
	text-anchor: middle;
	dominant-baseline: middle;
	pointer-events: none;
}

/* ---------- Right column: detail panel ---------- */

.fc-panel-col {
	grid-area: panel;
	min-width: 0;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

.fc-picker {
	grid-area: picker;
	flex: 0 0 auto;
	align-self: end;
}

.fc-picker label {
	display: block;
	font-size: 12px;
	font-weight: bold;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--fc-muted);
	margin-bottom: 4px;
}

.fc-picker-row {
	display: flex;
	gap: 8px;
}

.fc-picker-row select {
	flex: 1 1 auto;
	min-width: 0;
}

/* Desktop shows the key in the resting panel, so the control is
   only needed where the panel is off-screen until it is opened. */
.fc-key-btn {
	display: none;
	flex: 0 0 auto;
	font-family: var(--fc-font);
	font-size: 15px;
	white-space: nowrap;
	color: var(--fc-teal-dark);
	background: #fff;
	border: 1px solid var(--fc-rule);
	padding: 0 12px;
	cursor: pointer;
	border-radius: 0;
}

.fc-key-btn:focus-visible {
	outline: 2px solid var(--fc-teal);
	outline-offset: 1px;
}

.fc-picker select {
	width: 100%;
	font-family: var(--fc-font);
	font-size: 14px;
	color: var(--fc-ink);
	padding: 7px 9px;
	border: 1px solid var(--fc-rule);
	background: #fff;
	border-radius: 0;
}

.fc-picker select:focus-visible {
	outline: 2px solid var(--fc-teal);
	outline-offset: 1px;
}

.fc-panel {
	flex: 1 1 auto;
	min-height: 0;
	border: 1px solid var(--fc-rule);
	background: var(--fc-panel-bg);
	display: flex;
	flex-direction: column;
}

.fc-panel-head {
	flex: 0 0 auto;
	background: var(--fc-teal);
	color: #fff;
	padding: 11px 14px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 10px;
	row-gap: 9px;
}

.fc-panel-heading {
	order: 1;
}

.fc-panel-close {
	order: 2;
}

.fc-panel-break[hidden] {
	display: none;
}

.fc-panel-break {
	order: 3;
	flex: 0 0 100%;
	height: 0;
	margin: 0;
}

.fc-reset-btn {
	order: 5;
	margin-left: auto;
}

.fc-panel-heading {
	flex: 1 1 auto;
	min-width: 0;
	flex-wrap: wrap;
	display: flex;
	align-items: baseline;
	gap: 9px;
}

.fc-panel-abbr {
	flex: 0 0 auto;
	font-size: 12px;
	font-weight: bold;
	letter-spacing: 0.08em;
	opacity: 0.75;
}

.fc-panel-title {
	font-size: 19px;
	font-weight: bold;
	margin: 0;
	line-height: 1.2;
	color: #fff;
	overflow-wrap: break-word;
}

.fc-panel-btn {
	flex: 0 0 auto;
	font-family: var(--fc-font);
	font-size: 12px;
	line-height: 1;
	color: #fff;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.5);
	padding: 7px 9px;
	cursor: pointer;
	border-radius: 2px;
}

.fc-panel-btn:hover {
	background: rgba(255, 255, 255, 0.15);
}

.fc-panel-btn:focus-visible {
	outline: 2px solid #ffd400;
	outline-offset: 1px;
}

.fc-panel-btn[hidden] {
	display: none;
}

.fc-reset-btn {
	font-weight: bold;
}

.fc-panel-close {
	display: none; /* mobile sheet only */
}

.fc-panel-body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	padding: 15px 17px 20px;
	font-size: 14px;
	scrollbar-gutter: stable;
	scrollbar-color: #a8b4bb #eef1f2;
	scrollbar-width: thin;
}

.fc-panel-body::-webkit-scrollbar {
	width: 12px;
}

.fc-panel-body::-webkit-scrollbar-track {
	background: #eef1f2;
}

.fc-panel-body::-webkit-scrollbar-thumb {
	background: #a8b4bb;
	border: 3px solid #eef1f2;
	border-radius: 6px;
}

.fc-panel-body::-webkit-scrollbar-thumb:hover {
	background: var(--fc-teal);
}

.fc-panel-body p {
	margin: 0 0 14px;
}

.fc-panel-body p:last-child {
	margin-bottom: 0;
}

.fc-panel-body strong {
	color: var(--fc-teal-dark);
}

.fc-panel-body p + p {
	border-top: 1px solid var(--fc-rule);
	padding-top: 14px;
}

.fc-panel-empty {
	color: var(--fc-muted);
	font-size: 14px;
}

.fc-panel-empty p {
	margin: 0 0 10px;
}

.fc-panel-empty strong {
	display: block;
	color: var(--fc-ink);
	font-size: 16px;
	margin-bottom: 6px;
}

.fc-sr-status {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---------- Mobile: panel becomes a sheet over the map ---------- */

@media (max-width: 860px) {
	.fc-guide {
		padding: 8px;
	}

	.fc-layout {
		grid-template-columns: 1fr;
		grid-template-rows: auto minmax(0, 1fr);
		grid-template-areas:
			"picker"
			"map";
		column-gap: 0;
		row-gap: 10px;
	}

	/* The dropdown is the real interface at this width, so it
	   sits above the map rather than beside it. */
	.fc-picker {
		align-self: auto;
	}

	.fc-map-col {
		min-height: 0;
	}

	.fc-panel-col {
		position: absolute;
		inset: 0;
		z-index: 5;
		background: #fff;
		padding: 8px;
		transform: translateY(101%);
		visibility: hidden;
		transition: transform 220ms ease-out, visibility 0s linear 220ms;
	}

	.fc-panel-col.is-open {
		transform: translateY(0);
		visibility: visible;
		transition: transform 220ms ease-out, visibility 0s;
	}

	.fc-key-btn {
		display: block;
	}

	.fc-panel-close {
		display: block;
	}

	/* Touch targets, and both header buttons at a matching size. */
	.fc-panel-btn {
		font-size: 14px;
		padding: 9px 12px;
	}

	.fc-panel-title {
		font-size: 18px;
	}

	.fc-panel-body {
		font-size: 16px;
		line-height: 1.6;
		padding: 16px 16px 24px;
	}

	/* 16px stops iOS Safari zooming the frame on focus */
	.fc-picker select {
		font-size: 16px;
		padding: 10px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.fc-state {
		transition: none;
	}

	.fc-panel-col {
		transition: none;
	}
}

/* ---------- Print ---------- */

@media print {
	html,
	body {
		height: auto;
		overflow: visible;
	}

	.fc-guide {
		height: auto;
	}

	.fc-layout {
		grid-template-columns: 1fr;
	}

	.fc-panel-col {
		position: static;
		transform: none;
		visibility: visible;
	}

	.fc-panel-body {
		overflow: visible;
	}

	.fc-picker,
	.fc-panel-btn {
		display: none;
	}
}