/* =====================================================================
 * Atlas skin — the bold direction from the design mock.
 *
 * Loaded LAST, on every page, as a layer over style.css and explore.css.
 * Everything here is presentation only: no layout is invented, no element is
 * moved. That is deliberate — the quiet Industry look underneath still works
 * on its own, so this file can be dropped from functions.php to revert the
 * whole thing without unpicking 700 lines of existing CSS.
 *
 * Mock -> token:
 *   cream ground #f6f1e4 · ink #141414
 *   3px ink borders · 4px hard offset shadow, never blurred
 *   mono uppercase micro-labels
 *
 * The display face and the accent pair were re-pointed to match the dish
 * pages: Bangers over Playfair, and the plugin's green/yellow over the signal
 * red. The two halves of the site were drawn in different languages — a comic
 * on the dish page, an editorial broadsheet on the front — and only one of
 * them is the house style. Layout is untouched; this is still skin only, and
 * dropping the file from functions.php still reverts everything.
 * ===================================================================== */

:root {
	--wfa-cream:  #f6f1e4;
	--wfa-ink:    #141414;
	/* Same pair as the plugin's dish.css, so a dish page and the front page
	   are visibly one site. --wfa-red is kept as an alias because the map
	   legend and the sunburst already reference it. */
	--wfa-accent: #1F6F5C;
	--wfa-hi:     #F2B134;
	--wfa-red:    var(--wfa-accent);
	--wfa-panel:  #ffffff;
	--wfa-rule:   3px;
	--wfa-hard:   4px 4px 0 var(--wfa-ink);
	--wfa-display: Bangers, Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
	--wfa-serif:  "Playfair Display", Georgia, "Times New Roman", serif;
	--wfa-mono:   "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	/* Re-point the theme presets so untouched blocks inherit the skin too. */
	--wp--preset--color--bg:      var(--wfa-cream);
	--wp--preset--color--surface: var(--wfa-panel);
	--wp--preset--color--text:    var(--wfa-ink);
	--wfa-divider: var(--wfa-ink);
}

/* Dark keeps the structure — thick rules, hard shadows — and only swaps the
   ground and ink. A cream page inverted to near-black would lose the border
   language entirely, which is the one thing the mock is actually about. */
:root[data-theme="dark"] {
	--wfa-cream:  #16202b;
	--wfa-ink:    #f0ece1;
	--wfa-panel:  #1e2b39;
	--wfa-accent: #35a184;
	--wfa-hi:     #ffc95a;
	--wfa-red:    var(--wfa-accent);
	--wp--preset--color--bg:      var(--wfa-cream);
	--wp--preset--color--surface: var(--wfa-panel);
	--wp--preset--color--text:    var(--wfa-ink);
	--wfa-divider: var(--wfa-ink);
}

/* ------------------------------------------------------------ the ground */
body {
	background-color: var(--wfa-cream);
	/* The mock's paper tooth. Two 22px dot lattices offset from each other so
	   it reads as texture rather than as a visible grid. */
	background-image:
		radial-gradient(var(--wfa-dot, rgba(20, 20, 20, .055)) 1px, transparent 1px),
		radial-gradient(var(--wfa-dot, rgba(20, 20, 20, .055)) 1px, transparent 1px);
	background-size: 22px 22px, 22px 22px;
	background-position: 0 0, 11px 11px;
	color: var(--wfa-ink);
}

/* ------------------------------------------------------------- typography */
h1, h2, h3,
.wfa-panel h2,
.wp-block-post-title,
.wp-block-heading {
	font-family: var(--wfa-display);
	font-weight: 400;
	letter-spacing: .05em;
	line-height: 1.02;
}

/* Bangers has no lowercase of its own, so it is display type only — the lede,
   the cards' descriptions and every run of body copy stay in Barlow. */
.wfa-front-head h1 .accent { color: var(--wfa-accent); }

.wfa-front-head h1 {
	font-size: clamp(42px, 8.5vw, 74px) !important;
	text-shadow: 5px 5px 0 var(--wfa-hi);
}
.wfa-front-lede { font-size: 16.5px; max-width: 62ch; letter-spacing: 0; }

/* Section headings are the page's loudest element, exactly as on a dish page:
   black slab, knocked out white, tilted, hard offset shadow. display:table
   shrink-wraps the text while staying block-level. */
.wfa-region-head h2,
.wfa-explore > h2 {
	display: table;
	background: var(--wfa-ink);
	color: var(--wfa-cream);
	padding: 4px 16px;
	margin: 0 auto 14px 0 !important;
	text-align: left !important;
	transform: rotate(-1.5deg);
	box-shadow: 5px 5px 0 var(--wfa-accent);
	letter-spacing: .06em;
}

/* Micro-labels: mono, uppercase, widely tracked. */
.wfa-explore label,
.wfa-kicker,
#wfa-corpus,
.wfa-legend,
.wfa-foot {
	font-family: var(--wfa-mono);
	letter-spacing: .1em;
	text-transform: uppercase;
	font-size: 11px;
}
.wfa-foot { text-transform: none; letter-spacing: .02em; font-size: 11.5px; }
#wfa-corpus {
	display: inline-block;
	background: var(--wfa-ink);
	color: var(--wfa-cream);
	padding: 6px 10px;
	margin-top: 10px !important;
	font-weight: 500;
}

/* --------------------------------------------------------- panels + rules */
.wfa-blueprint,
.wfa-panel,
.wfa-explore input[type="search"],
.wfa-explore select,
.wfa-card,
.wp-block-post-template > li {
	border: var(--wfa-rule) solid var(--wfa-ink) !important;
	background: var(--wfa-panel);
	box-shadow: var(--wfa-hard) !important;
	border-radius: 0 !important;
}

.wfa-explore input[type="search"] { font-size: 17px; padding: 15px 16px; }
.wfa-explore input[type="search"]::placeholder { color: #9a958a; }
.wfa-explore select { padding: 12px 13px; }

/* The blueprint corner ticks belong to the hairline look; the thick rule
   replaces them. */
.wfa-blueprint > .wfa-corner { display: none; }
.wfa-blueprint { padding: 6px; }

/* ...but NOT on the dish cards. They are .wfa-blueprint too and carry
   height:100% inside a grid, so padding added here made every card taller than
   its own grid track and it spilled over the next region heading. */
.wfa-blueprint.wfa-dishcard,
.wfa-blueprint.wfa-cardempty { padding: 0; }
.wfa-dishcard { overflow: hidden; }

/* The slab is loud enough to separate the regions on its own; the rule above
   it only fought the tilt. Padding still clears the hard shadow of the cards
   in the row above. */
.wfa-region-head {
	border-top: 0;
	padding-top: 30px;
}
.wfa-region-head h2 { font-size: clamp(24px, 5vw, 32px); }
.wfa-seeall { font-family: var(--wfa-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }

/* --------------------------------------------------------------- the map */
/* The plate is the hero object on the page — give it the heaviest frame. */
.wfa-map-plate {
	border-width: var(--wfa-rule) !important;
	background: var(--wfa-panel);
}
.wfa-zoombtns button {
	border: 2px solid var(--wfa-ink);
	background: var(--wfa-cream);
	font-weight: 700;
	box-shadow: 2px 2px 0 var(--wfa-ink);
}

/* Region legend: solid colour fills with an ink keyline, as in the mock. */
.wfa-legend { gap: 8px; margin-top: 14px; }
.wfa-legend div {
	border: 2px solid var(--wfa-ink);
	box-shadow: 3px 3px 0 var(--wfa-ink);
	background: var(--wfa-panel);
	padding: 6px 10px;
	font-weight: 500;
}
.wfa-legend .n { color: var(--wfa-ink); opacity: .55; }

/* ---------------------------------------------------------------- chips */
.wfa-chip {
	border: 2px solid var(--wfa-ink) !important;
	background: var(--wfa-panel) !important;
	color: var(--wfa-ink) !important;
	font-weight: 600;
	border-radius: 0 !important;
	box-shadow: 2px 2px 0 var(--wfa-ink);
	transition: transform 90ms ease, box-shadow 90ms ease;
}
.wfa-chip:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--wfa-ink); }
.wfa-chip:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--wfa-ink); }
.wfa-chip[aria-pressed="true"] {
	background: var(--wfa-accent) !important;
	color: #fff !important;
	border-color: var(--wfa-ink) !important;
}
.wfa-chip[aria-pressed="true"] .wfa-n { color: #fff !important; opacity: .75; }
.wfa-chiprow { padding-bottom: 8px; }

#wfa-random {
	background: var(--wfa-hi) !important;
	color: var(--wfa-ink) !important;
	border-color: var(--wfa-ink) !important;
	font-family: var(--wfa-display);
	text-transform: uppercase;
	letter-spacing: .07em;
	font-size: 17px;
	box-shadow: 3px 3px 0 var(--wfa-ink);
}

/* ------------------------------------------------------------- the panel */
/* Keep normal padding on the panel and let the one full-bleed child pull out
   of it. Zeroing the panel and re-padding every child instead made the dish
   rows — which set their own grid — hang outside the left border. */
.wfa-panel { padding: 18px !important; overflow: hidden; }

/* Country header block, coloured by region, as the mock's green Chad bar. */
.wfa-panel .wfa-country-head {
	background: var(--wfa-region, var(--wfa-ink));
	color: #fff;
	padding: 14px 18px 16px;
	margin: 0 -18px 16px;
	border-bottom: var(--wfa-rule) solid var(--wfa-ink);
}
.wfa-panel .wfa-country-head h2 { color: #fff; display: block; }
.wfa-panel .wfa-country-head .iso,
.wfa-panel .wfa-country-head .meta { color: rgba(255, 255, 255, .82); }

.wfa-panel .row { border-top: 1px solid color-mix(in srgb, var(--wfa-ink) 18%, transparent); }

/* -------------------------------------------------------------- sunburst */
/* Behind the wordmark only. Pointer-events off and z-index below content so
   it can never intercept a click on the search field beneath it. */
.wfa-front-head {
	position: relative;
	isolation: isolate;
	border: var(--wfa-rule) solid var(--wfa-ink);
	box-shadow: var(--wfa-hard);
	background: var(--wfa-panel);
	padding: clamp(20px, 4vw, 40px);
	overflow: hidden;
}
.wfa-front-head::before {
	content: "";
	position: absolute;
	inset: -40%;
	z-index: -1;
	pointer-events: none;
	background: repeating-conic-gradient(
		from 8deg at 74% 26%,
		color-mix(in srgb, var(--wfa-red) 13%, transparent) 0deg 2.4deg,
		transparent 2.4deg 8deg
	);
}

/* ---------------------------------------------------------- dish cards */
/* The same object as the dish page's related cards, so a card means the same
   thing wherever it appears: ink border, hard shadow, Bangers title, and a
   band that is either the picture or the dish's food type. */
.wfa-dishcard { box-shadow: var(--wfa-hard) !important; }
.wfa-dishcard:hover { box-shadow: 4px 4px 0 var(--wfa-accent) !important; }

.wfa-cardmedia { border-bottom: var(--wfa-rule) solid var(--wfa-ink); }

/* No picture yet: name the food type rather than leave a blank plate. About
   two dishes in five are illustrated so far, so this is most of the grid. */
.wfa-cardmedia.is-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--wfa-accent);
}
.wfa-cardmedia.is-empty span {
	font-family: var(--wfa-display);
	font-size: 19px;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: #fff;
	opacity: .92;
	text-align: center;
	padding: 0 10px;
}

.wfa-cardbody > a {
	font-family: var(--wfa-display);
	font-weight: 400;
	font-size: 21px;
	letter-spacing: .04em;
	text-decoration: none;
}
.wfa-cardbody > a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.wfa-star { color: var(--wfa-hi); }

/* The generated-picture tag is off site-wide; the whole atlas is drawn, so it
   labelled nothing and read as an apology for the house style. */
.wfa-aitag { display: none !important; }

@media (prefers-reduced-motion: reduce) {
	.wfa-chip { transition: none; }
	.wfa-chip:hover, .wfa-chip:active { transform: none; }
}


/* ===================================================== wfa-sitewide-chrome
   The header and footer in the home page's language, on every page.

   These rules were written inside home.css, which is enqueued on the front
   page and /explore/ only — so the brand was a yellow-stroked slab on two
   pages and 16px grey uppercase on the other six thousand. A nav is site
   chrome, not a home page component, and the seam showed on the first click.

   Tokens: home.css defines --ink and --acc on :root, but it is not loaded
   here, so these use the theme's own presets and the design's yellow. */
.wfa-nav {
	max-width: 1180px;
	margin: 0 auto;
	padding: 12px var(--wfa-gutter);
	align-items: center;
	gap: 22px;
	border-bottom: 3px solid var(--wp--preset--color--text);
}
.wfa-nav .wfa-brand {
	font-family: Bangers, "Barlow Condensed", sans-serif;
	font-size: 34px;
	font-weight: 400;
	letter-spacing: .06em;
	text-transform: none;
	-webkit-text-stroke: .6px var(--wp--preset--color--text);
	text-shadow: 3px 3px 0 var(--wp--preset--color--accent);
	line-height: 1.05;
}
.wfa-nav .wfa-brand span {
	color: #f2b134;
	-webkit-text-stroke: 1px var(--wp--preset--color--text);
	paint-order: stroke fill;
}
.wfa-nav .wfa-corpus {
	font-family: Bangers, "Barlow Condensed", sans-serif;
	font-size: 12px;
	letter-spacing: .02em;
}
.wfa-nav nav {
	font-family: Bangers, "Barlow Condensed", sans-serif;
	font-size: 20px;
	letter-spacing: .08em;
	gap: 18px;
}
.wfa-nav nav a {
	position: relative;
	padding: 2px 8px;
	border: 2px solid transparent;
	text-decoration: none;
}
.wfa-nav nav a:hover {
	border-color: var(--wp--preset--color--text);
	background: #f2b134;
	color: #1d1f20;
	text-decoration: none;
	box-shadow: 3px 3px 0 var(--wp--preset--color--text);
}
.wfa-theme-toggle {
	border: 2px solid var(--wp--preset--color--text);
	box-shadow: 3px 3px 0 var(--wp--preset--color--text);
}
.wfa-theme-toggle button {
	font-family: Bangers, "Barlow Condensed", sans-serif;
	font-size: 14px;
	letter-spacing: .08em;
}

/* The footer. It was three grey paragraphs of tiny text under a hairline —
   the "cheap" end of a page whose top is a comic. Same ink, same slab, same
   yellow, and the same hard offset shadow the panels above it use. */
.wfa-foot-slab {
	position: relative;
	border-top: 5px solid var(--wp--preset--color--text);
	margin-top: var(--wp--preset--spacing--70);
	padding-top: var(--wp--preset--spacing--60);
}
/* The halftone strip. A comic page's panel gutter, not a decoration for its
   own sake: it separates the footer from the page without another hairline. */
.wfa-foot-slab::before {
	content: "";
	position: absolute;
	left: 0; right: 0; top: 0;
	height: 14px;
	background-image: radial-gradient(var(--wp--preset--color--text) 1.4px, transparent 1.5px);
	background-size: 9px 9px;
	opacity: .35;
	pointer-events: none;
}
.wfa-foot-slab h2 {
	font-family: Bangers, "Barlow Condensed", sans-serif;
	font-weight: 400;
	font-size: 26px;
	letter-spacing: .05em;
	display: table;
	background: var(--wp--preset--color--text);
	color: var(--wp--preset--color--bg);
	padding: 3px 14px 1px;
	transform: rotate(-1deg);
	box-shadow: 4px 4px 0 #f2b134;
	margin: 0 0 14px;
}
.wfa-foot-cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--wp--preset--spacing--50);
}
/* Column headings are the same ink slab as every other heading on the site,
   one size down and tilted the other way so the three do not line up. */
.wfa-foot-cols h3 {
	font-family: Bangers, "Barlow Condensed", sans-serif;
	font-weight: 400;
	font-size: 21px;
	letter-spacing: .06em;
	display: table;
	background: var(--wp--preset--color--text);
	color: var(--wp--preset--color--bg);
	padding: 3px 12px 1px;
	transform: rotate(-1.2deg);
	box-shadow: 3px 3px 0 #f2b134;
	margin: 0 0 16px;
}
.wfa-foot-cols div:nth-child(2) h3 { transform: rotate(1deg); }
.wfa-foot-cols ul { list-style: none; margin: 0; padding: 0; }
.wfa-foot-cols li { margin: 0 0 7px; font-size: 15.5px; }
/* Links are ink, not the theme blue, with the marker carrying the accent —
   the blue was the single loudest thing in the footer and belonged to no
   part of the design above it. */
.wfa-foot-cols a {
	display: inline-block;
	text-decoration: none;
	font-weight: 600;
	color: var(--wp--preset--color--text);
	transition: transform .12s ease;
}
.wfa-foot-cols a::before {
	content: "▸";
	/* Ink, not the accent yellow: a 15px glyph in #f2b134 on a near-white
	   ground is a grey smudge whatever you stroke it with. The yellow arrives
	   on hover, where it has a whole underline to be seen in. */
	color: var(--wp--preset--color--text);
	margin-right: 7px;
}
.wfa-foot-cols a:hover::before { color: #f2b134; -webkit-text-stroke: .8px var(--wp--preset--color--text); }
.wfa-foot-cols a:hover {
	transform: translateX(3px);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	text-decoration-color: #f2b134;
}

/* The sign-off panel: the brand said once more in the comic face, with the
   legend that used to sit in the home page's own small footer. */
.wfa-foot-sign {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: var(--wp--preset--spacing--60);
	padding: 16px 20px;
	border: 3px solid var(--wp--preset--color--text);
	box-shadow: 6px 6px 0 var(--wp--preset--color--text);
	background: var(--wp--preset--color--bg);
}
.wfa-foot-brand {
	font-family: Bangers, "Barlow Condensed", sans-serif;
	font-size: 30px;
	line-height: 1;
	letter-spacing: .04em;
	text-decoration: none;
	color: var(--wp--preset--color--text);
	transform: rotate(-1deg);
}
.wfa-foot-brand span { color: #e2574c; }
.wfa-foot-legend {
	margin: 0;
	font-family: Bangers, "Barlow Condensed", sans-serif;
	font-size: 17px;
	letter-spacing: .05em;
}
.wfa-foot-legend b { font-weight: 400; }
.wfa-foot-legend i { font-style: normal; opacity: .45; margin: 0 4px; }
.wfa-foot-legal {
	margin-top: var(--wp--preset--spacing--40);
	padding-top: var(--wp--preset--spacing--40);
	font-size: 13.5px;
	color: var(--wp--preset--color--neutral-700);
}

@media (max-width: 720px) {
	.wfa-nav .wfa-brand { font-size: 26px; }
	.wfa-nav nav { font-size: 17px; gap: 12px; }
}

/* The newsletter block, in the footer. Ink panel, yellow button, same language
   as the search on the home page — it is the same kind of control. */
.wfa-newsletter {
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
	margin: 0 0 var(--wp--preset--spacing--60);
	padding: 22px 24px;
	border: 3px solid var(--wp--preset--color--text);
	box-shadow: 7px 7px 0 var(--wp--preset--color--text);
	background: var(--wp--preset--color--bg);
}
@media (min-width: 820px) {
	.wfa-newsletter { grid-template-columns: 1.1fr 1fr; align-items: center; gap: 28px; }
}
.wfa-newsletter h2 {
	font-family: Bangers, "Barlow Condensed", sans-serif;
	font-weight: 400;
	font-size: 34px;
	letter-spacing: .04em;
	margin: 0 0 6px;
	transform: rotate(-1deg);
	transform-origin: left center;
}
.wfa-newsletter h2 + p,
.wfa-newsletter p { margin: 0; font-size: 15.5px; max-width: 48ch; }

.wfa-nlform { display: flex; border: 3px solid var(--wp--preset--color--text); }
.wfa-nlform input {
	flex: 1;
	min-width: 0;
	font: inherit;
	font-size: 16px;
	padding: 13px 15px;
	border: 0 !important;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--text);
}
.wfa-nlform button {
	font-family: Bangers, "Barlow Condensed", sans-serif;
	font-size: 21px;
	letter-spacing: .05em;
	white-space: nowrap;
	padding: 0 22px;
	border: 0 !important;
	border-left: 3px solid var(--wp--preset--color--text) !important;
	background: #f2b134;
	color: #1d1f20;
	cursor: pointer;
}
.wfa-newsletter .screen-reader-text {
	position: absolute; width: 1px; height: 1px;
	overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}


/* Honeypot: off-screen, not display:none — some bots skip hidden fields, and
   a screen reader should not meet it either, hence aria-hidden in the markup. */
.wfa-nlpot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.wfa-nlconsent {
	display: flex;
	gap: 9px;
	align-items: flex-start;
	margin-top: 12px;
	font-size: 13.5px;
	line-height: 1.4;
	color: var(--wp--preset--color--neutral-700);
}
.wfa-nlconsent input { margin-top: 3px; flex: none; }

.wfa-nlnote {
	margin: 10px 0 0 !important;
	padding: 8px 12px;
	border: 2px solid var(--wp--preset--color--text);
	font-size: 14.5px;
}
.wfa-nlnote.is-ok { background: #f2b134; color: #1d1f20; }
.wfa-nlnote.is-bad { background: var(--wp--preset--color--surface); }