/*
 * All States Landing Page — all-states.css
 * Template: page-templates/all-states.php
 * Interactive US map + alphabetical state links list.
 */

/* ── Page bg ───────────────────────────────────────────────────────────── */
.page-all-states {
	background-color: #ffffff;
}

/* ── Main section ──────────────────────────────────────────────────────── */
#all-states-main {
	padding: 180px 40px 120px;
	text-align: center;
}

/* ── Heading ───────────────────────────────────────────────────────────── */
.all-states__heading {
	position: relative;
	margin-bottom: 80px; /* matches Figma gap-[80px] between sections */
}

.all-states__heading h1 {
	font: 400 60px / 1.2 'Zilla Slab', serif;
	color: #3f3350;
	margin: 0;
	position: relative;
	z-index: 1;
}

/* Decorative wavy shape — 644×80 exported from Figma, centred behind the
   heading text to match "Fill 1 Copy" at ml-[576px] in the 1800px Figma frame
   (centre = 898px ≈ 50% of 1800px → we centre in our container too). */
.all-states__heading-decor {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 644px;
	height: 80px;
	background: url(../images/state-landing/heading-bg.svg) no-repeat center / 644px 80px;
	pointer-events: none;
	z-index: 0;
}

/* ── Map wrapper ───────────────────────────────────────────────────────── */
#us-map-wrap {
	max-width: 1068px;
	margin: 0 auto 80px; /* 80px bottom = Figma gap before state links */
	position: relative;
	line-height: 0; /* collapse inline whitespace */
}

#us-map {
	width: 100%;
	height: auto;
	display: block;
	overflow: visible;
}

/* State path base style */
#us-map .state {
	fill: #ffd149;
	stroke: #3f3350;
	stroke-width: 1.8;
	stroke-linejoin: round;
	cursor: pointer;
	transition: fill 0.3s ease;
}

/* Hover fill is toggled via inline style in JS (see all-states.php) so it overrides this rule. */

/* Interior state borders drawn on top as a mesh */
#us-map .state-borders {
	fill: none;
	stroke: #3f3350;
	stroke-width: 0.5;
	stroke-linejoin: round;
	pointer-events: none;
}

/* ── Tooltip ───────────────────────────────────────────────────────────── */
#map-tooltip {
	position: fixed;
	background: #3f3350;
	color: #ffffff;
	font: 13px / 1 'Inter', sans-serif;
	padding: 7px 11px;
	border-radius: 4px;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.1s ease;
	z-index: 9999;
	white-space: nowrap;
	box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

#map-tooltip.visible {
	opacity: 1;
}

/* ── State links list ──────────────────────────────────────────────────── */
#all-states-list {
	max-width: 1200px; /* matches contentContainer, slightly wider than map — same proportion as Figma */
	margin: 0 auto;
}

.all-states__cols {
	column-count: 3;
	column-gap: 48px;
	text-align: left;
}

.all-states__cols a {
	display: block;
	break-inside: avoid;
	font: 400 20px / 1.2 'Inter', sans-serif;
	color: #3f3350;
	text-decoration: none;
	margin-bottom: 12px;
}

.all-states__cols a:hover {
	color: #ff7043;
}

/* ── Responsive ────────────────────────────────────────────────────────── */

/* Tighten column gap as viewport shrinks — still 3 cols */
@media (max-width: 1024px) {
	.all-states__cols {
		column-gap: 32px;
	}
	.all-states__cols a {
		font-size: 18px;
		line-height: 1.2;
		margin-bottom: 13px;
	}
}

/* Hide map at tablet — text list stays visible */
@media (max-width: 768px) {
	#us-map-wrap {
		display: none;
	}
	#all-states-main {
		padding: 120px 32px 80px;
	}
	.all-states__heading h1 {
		font-size: 42px;
	}
	.all-states__heading-decor {
		display: none;
	}
	.all-states__heading {
		margin-bottom: 48px;
	}
	.all-states__cols {
		column-gap: 24px;
	}
	.all-states__cols a {
		font-size: 17px;
		line-height: 1.2;
		margin-bottom: 12px;
	}
}

/* 2 columns at wide mobile */
@media (max-width: 600px) {
	#all-states-main {
		padding: 100px 24px 64px;
	}
	.all-states__heading {
		margin-bottom: 40px;
	}
	.all-states__heading h1 {
		font-size: 34px;
	}
	.all-states__cols {
		column-count: 2;
		column-gap: 16px;
	}
	.all-states__cols a {
		font-size: 15px;
		line-height: 1.2;
		margin-bottom: 12px;
	}
}

/* Single column at narrow mobile */
@media (max-width: 380px) {
	.all-states__cols {
		column-count: 1;
		column-gap: 0;
		text-align: center;
	}
	.all-states__cols a {
		font-size: 16px;
		line-height: 1.2;
		margin-bottom: 15px;
	}
}