/* /explore/ — the map app. Loaded only on this page. */

.wfa-explore {
	max-width: 1440px;
	margin-inline: auto;
	padding: clamp(14px, 4vw, 28px);
	display: grid;
	gap: 20px;
}

.wfa-explore .wfa-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1 1 150px;
}
.wfa-explore label {
	font-size: 11.5px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--neutral-700);
}
.wfa-explore input[type="search"],
.wfa-explore select {
	font: inherit;
	font-size: 16px;
	padding: 12px 14px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--text);
	border: 1px solid var(--wfa-divider);
	border-radius: 0;
	width: 100%;
	min-height: 44px;
}
.wfa-explore select { font-size: 15px; padding: 10px 12px; }

/* wrap, do not scroll */
/* All sixteen food types on screen at once. This was a single sideways-scrolling
   row, which meant the reader could see about six of them and had no way of
   knowing the other ten existed — a filter you cannot see is not a filter. They
   wrap now; three rows of chips is a smaller cost than a hidden control. */
.wfa-chiprow {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.wfa-chiprow .wfa-chip { white-space: nowrap; }

.wfa-facets { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.wfa-toggles { display: flex; flex-wrap: wrap; gap: 8px; }

/* -------------------------------------------------------------- the plate */
.wfa-explore .wfa-content { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 960px) {
	.wfa-explore .wfa-content { grid-template-columns: 1fr 400px; align-items: start; }
}

/* The map is the drawn one from the home page (theme 1.11.0). Its own look —
   the hand-drawn edge filter, the region fills, the halftone sea, the flags and
   Chef Barba's route — lives in home.css, which is enqueued after this file on
   /explore/. Only the states that exist on THIS page belong here.

   What was here before was the d3 choropleth's styling: a woven sea pattern, a
   blurred continental-shelf halo, a heavy merged coastline and saturated
   per-region fills. Every one of those addressed an element buildMap no longer
   creates — .sphere, .wfa-shelf, .wfa-coast — so it went with them. */
.wfa-map-plate { position: relative; }

/* Overlays the plate exactly, so the injected SVG and the tooltip appended into
   it share one coordinate space. Without this the tooltip is offset by however
   far #wfa-map sits inside its frame. */
.wfa-map-plate #wfa-map { position: absolute; inset: 0; }

/* Selection is home.css's own .sel rule, reused rather than redeclared.
   Dimming and unmapped are this page's, because the home page has no filters.

   Both work on filter and opacity, never on fill: each country takes its colour
   from its region class, and setting fill here would throw that away — which is
   exactly what the old class-replacing paintMap did. */
.wfa-map-plate #land path.dimmed { opacity: .26; }
.wfa-map-plate #land path.unmapped { cursor: default; filter: grayscale(1) brightness(1.08); }
.wfa-map-plate #land path:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 2px; }

/* A row under the plate, not an overlay on it. Bottom-right of a Natural Earth
   map is Australia, so the old absolute legend hid the whole of Oceania — and
   the design mock puts these as chips beneath the map anyway. */
.wfa-legend {
	display: flex; flex-wrap: wrap; gap: 6px;
	margin-top: 10px;
	font-size: 11.5px;
}
.wfa-legend div {
	display: flex; align-items: center; gap: 7px;
	border: 1px solid var(--wfa-divider);
	background: var(--wp--preset--color--bg);
	padding: 5px 9px;
}
.wfa-legend i { width: 9px; height: 9px; flex: none; display: block; }
.wfa-legend .n { color: var(--wp--preset--color--neutral-600); font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------- the panel */
.wfa-panel { border: 1px solid var(--wfa-divider); padding: var(--wp--preset--spacing--50); }

/* The panel scrolls on its own above the breakpoint where it sits beside the
   map. It holds every dish in the country now, and Italy's 54 would otherwise
   run several screens past the bottom of a map that stays put.

   Capped to the viewport rather than to the map's height: the map is about
   520px tall and stopping there would waste the rest of a laptop screen.
   Below 960px the panel is stacked under the map, where the page scroll is the
   right scroll and a nested one would trap the reader. */
@media (min-width: 960px) {
	.wfa-explore .wfa-panel {
		max-height: calc(100vh - 120px);
		overflow-y: auto;
		position: sticky;
		top: 20px;
		overscroll-behavior: contain;
	}
	/* The country header stays put while its dishes scroll under it, so you can
	   always see which country you are looking at. */
	.wfa-explore .wfa-panel .wfa-panelhead {
		position: sticky;
		top: 0;
		z-index: 2;
		background: var(--wp--preset--color--bg);
	}
}
.wfa-panel .back {
	font-size: 13px; text-decoration: none; display: inline-block;
	margin-bottom: var(--wp--preset--spacing--40);
}
.wfa-panel .iso {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 15px; letter-spacing: .06em;
	color: var(--wp--preset--color--neutral-600);
	margin-right: 8px;
}
.wfa-panel h2 { font-size: 30px; margin: 0; display: inline; }
.wfa-panel .meta {
	display: flex; align-items: center; gap: 7px;
	font-size: 13px; color: var(--wp--preset--color--neutral-700);
	margin: var(--wp--preset--spacing--30) 0;
}
.wfa-panel .meta i { width: 9px; height: 9px; flex: none; display: block; }
.wfa-panel .summary { font-size: 15.5px; line-height: 1.55; margin: 0 0 var(--wp--preset--spacing--40); }

.wfa-rows { list-style: none; padding: 0; margin: 0; }
.wfa-row {
	display: grid;
	grid-template-columns: 60px 1fr;
	gap: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--40) 0;
	border-top: 1px solid var(--wfa-divider);
}
.wfa-row .thumb {
	width: 60px; height: 60px;
	border: 1px solid var(--wfa-divider);
	background-image: repeating-linear-gradient(45deg,
		color-mix(in srgb, var(--wp--preset--color--text) 7%, transparent) 0 4px,
		transparent 4px 9px);
	background-size: cover; background-position: center;
}
.wfa-row .name {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600; font-size: 16.5px;
	text-decoration: none;
}
.wfa-row .name:hover { text-decoration: underline; }
.wfa-row .star { color: var(--wp--preset--color--accent-700); margin-right: 4px; }
.wfa-row .native {
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px; color: var(--wp--preset--color--neutral-600); margin-left: 7px;
}
.wfa-row .desc { font-size: 14px; line-height: 1.45; margin: 3px 0 0; }
.wfa-row .hist {
	font-size: 13px; line-height: 1.45;
	color: var(--wp--preset--color--neutral-700);
	border-left: 2px solid var(--wfa-divider);
	padding-left: 8px; margin: 5px 0 0;
}
.wfa-row .norec { font-size: 12px; color: var(--wp--preset--color--neutral-600); margin: 4px 0 0; }
.wfa-row .rowtags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.wfa-row .rowtags span {
	font-size: 11.5px; border: 1px solid var(--wfa-divider);
	padding: 2px 6px; color: var(--wp--preset--color--neutral-700);
}
.wfa-catchips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--wp--preset--spacing--40); }
.wfa-catchips span {
	font-size: 12px; border: 1px solid var(--wfa-divider); padding: 4px 8px;
}
.wfa-catchips span:first-child { background: var(--wp--preset--color--accent-100); }

/* -------------------------------------------------------------- region grid */
.wfa-regionblock { margin-top: var(--wp--preset--spacing--60); }
.wfa-explore .wfa-foot {
	font-size: 12.5px;
	color: var(--wp--preset--color--neutral-700);
	border-top: 1px solid var(--wfa-divider);
	padding-top: var(--wp--preset--spacing--40);
}

.wfa-loading {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
	color: var(--wp--preset--color--neutral-700);
	padding: var(--wp--preset--spacing--60); text-align: center;
}

@media (prefers-reduced-motion: reduce) {
	.wfa-map-plate .country { transition: none; }
}

/* Generated pictures are captioned on the card, not only on the dish page. */
.wfa-cardmedia { position: relative; }
.wfa-cardmedia.has-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wfa-aitag {
	position: absolute; left: 0; bottom: 0;
	background: var(--wp--preset--color--text);
	color: var(--wp--preset--color--bg);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
	padding: 3px 6px;
}

/* A row with a picture drops the hatch, or the diagonals show through a
   transparent PNG and read as damage. */
.wfa-row .thumb.has-photo { background-image: none; }
.wfa-row .thumb.has-photo { background-repeat: no-repeat; }

/* Five cards a region, not three. The grid was sized for three and left a
   region looking like the atlas held almost nothing for it. */
.wfa-cardgrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr));
	gap: 14px;
	list-style: none;
	padding: 0;
	margin: 0;
}
@media (min-width: 1100px) {
	.wfa-cardgrid { grid-template-columns: repeat(5, 1fr); }
}

/* The region banner. Arrives from a "Browse by region" card on the home page,
   so it has to announce itself: every other filter has a visible control on
   this page already, and this one would otherwise just look like two thirds of
   the atlas had gone missing. */
.wfa-regionfilter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin: 0 0 16px;
	padding: 12px 16px;
	border: 3px solid var(--wp--preset--color--text);
	box-shadow: 5px 5px 0 var(--wp--preset--color--text);
	background: #f2b134;
	color: #1d1f20;
	font-family: Bangers, "Barlow Condensed", sans-serif;
	font-size: 20px;
	letter-spacing: .05em;
}
.wfa-regionfilter b { font-weight: 400; }
.wfa-regionfilter button {
	font: inherit;
	font-size: 15px;
	padding: 5px 14px;
	border: 2px solid #1d1f20 !important;
	background: #1d1f20;
	color: #f2b134;
	cursor: pointer;
	margin-left: auto;
}