/*
Theme Name:   Baku Kitchen
Theme URI:    https://github.com/
Description:  Industry design system applied to the World Food Atlas — a quiet, independent reference for traditional food. Zero radius, no shadows, hairlines and whitespace. Dish pages follow Direction B (Plate): the photograph is exempted from the system and runs full-bleed in full colour, with its licence credit as a drawn spec plate. Child of Twenty Twenty-Five.
Author:       World Food Atlas
Template:     twentytwentyfive
Version:      1.19.0
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
License:      GPL-2.0-or-later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  kitchens-of-the-world
*/

/* ============================================================ tokens
   Light is the base. Both blocks must stay in this order and the dark one
   must keep the :root prefix — [data-theme] and :root have equal specificity,
   so a dark block written first silently loses to the light one, which is
   exactly how every hairline in the design once became invisible at night. */
:root {
	--wfa-divider: color-mix(in srgb, #1d1f20 16%, transparent);
	--wfa-gutter: clamp(14px, 4vw, 28px);
}

:root[data-theme="dark"] {
	--wp--preset--color--bg: #1d2d3d;
	--wp--preset--color--surface: #24384a;
	--wp--preset--color--text: #eef1f4;
	--wp--preset--color--neutral-300: #3d556c;
	--wp--preset--color--neutral-600: #8fa2b3;
	--wp--preset--color--neutral-700: #a8b8c6;
	--wp--preset--color--accent: #b5d9fd;
	--wp--preset--color--accent-100: #2b4258;
	--wp--preset--color--accent-200: #33506a;
	--wp--preset--color--accent-600: #8fbfe8;
	--wp--preset--color--accent-700: #b5d9fd;
	--wp--preset--color--accent-800: #eef6ff;
	--wfa-divider: rgba(238, 241, 244, .18);
}

html { -webkit-text-size-adjust: 100%; }

body {
	background: var(--wp--preset--color--bg);
	color: var(--wp--preset--color--text);
	transition: background-color 150ms linear, color 150ms linear;
	overflow-x: clip;
}

/* Focus is never the browser default. */
:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* Nothing in this design is rounded, and nothing casts a shadow. */
.wp-block-button__link,
.wp-block-search__input,
.wp-block-search__button,
.wp-block-image img,
.wp-block-post-featured-image img,
input, select, textarea, button {
	border-radius: 0 !important;
	box-shadow: none !important;
}

/* ============================================================ chrome */
.wfa-nav {
	border-bottom: 1px solid var(--wfa-divider);
	padding: var(--wp--preset--spacing--40) var(--wfa-gutter);
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--wp--preset--spacing--50);
}

.wfa-nav .wfa-brand {
	font-size: 16px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .02em;
	text-decoration: none;
	color: var(--wp--preset--color--text);
}

.wfa-nav .wfa-corpus {
	font-size: 12.5px;
	color: var(--wp--preset--color--neutral-700);
	font-variant-numeric: tabular-nums;
}

.wfa-nav nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--50); }
.wfa-nav nav a { font-size: 15px; text-decoration: none; }
.wfa-nav nav a:hover { text-decoration: underline; }

/* Theme toggle — a segmented control, per the design. */
.wfa-theme-toggle { display: inline-flex; border: 1px solid var(--wfa-divider); }
.wfa-theme-toggle button {
	appearance: none;
	background: transparent;
	border: 0;
	font: inherit;
	font-size: 12.5px;
	padding: 5px 10px;
	color: var(--wp--preset--color--neutral-700);
	cursor: pointer;
	min-height: 32px;
}
.wfa-theme-toggle button[aria-pressed="true"] {
	background: var(--wp--preset--color--accent-700);
	color: var(--wp--preset--color--bg);
}

/* ============================================================ blueprint frame
   Industry's signature object treatment: 1px hairline, square corners,
   transparent fill, four 11px registration marks offset 6px outside.
   Never rounded, never filled, marks never dropped. */
.wfa-blueprint {
	position: relative;
	border: 1px solid var(--wfa-divider);
	background: transparent;
	padding: 10px;
}

.wfa-blueprint > .wfa-corner {
	position: absolute;
	width: 11px;
	height: 11px;
	color: var(--wp--preset--color--accent);
	pointer-events: none;
}
.wfa-blueprint > .wfa-corner::before,
.wfa-blueprint > .wfa-corner::after {
	content: "";
	position: absolute;
	background: currentColor;
}
.wfa-blueprint > .wfa-corner::before { left: 0; right: 0; top: 5px; height: 1px; }
.wfa-blueprint > .wfa-corner::after  { top: 0; bottom: 0; left: 5px; width: 1px; }
.wfa-blueprint > .tl { top: -6px; left: -6px; }
.wfa-blueprint > .tr { top: -6px; right: -6px; }
.wfa-blueprint > .bl { bottom: -6px; left: -6px; }
.wfa-blueprint > .br { bottom: -6px; right: -6px; }

/* ============================================================ dish page — Direction B */
.wfa-crumbs {
	font-size: 12.5px;
	color: var(--wp--preset--color--neutral-700);
	letter-spacing: .04em;
	text-transform: uppercase;
	margin-bottom: var(--wp--preset--spacing--40);
}
.wfa-crumbs a { text-decoration: none; }
.wfa-crumbs a:hover { text-decoration: underline; }
.wfa-crumbs i { font-style: normal; padding: 0 6px; color: var(--wp--preset--color--neutral-400); }

/* The dish name carries a native-script span; it must not inherit Barlow
   metrics for scripts Barlow has no coverage for. */
.wfa-native {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 400;
	font-size: .42em;
	color: var(--wp--preset--color--neutral-600);
	display: block;
	margin-top: .25em;
	letter-spacing: 0;
}

.wfa-standfirst {
	font-size: 21px;
	line-height: 1.45;
	color: var(--wp--preset--color--neutral-800);
}
[data-theme="dark"] .wfa-standfirst { color: var(--wp--preset--color--neutral-700); }

/* Photograph: exempted from the system. Full bleed, full colour, never duotoned. */
.wfa-plate {
	margin-block: 0 var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--surface);
}

/* WordPress's constrained layout applies
     .is-layout-constrained > :where(:not(.alignfull)) {
       max-width: var(--wp--style--global--content-size);
       margin-left: auto !important; margin-right: auto !important; }
   to every direct child, so escaping the reading column needs to out-specify it
   rather than simply asking for a wider margin. */
.is-layout-constrained > .wfa-plate {
	max-width: none;
	width: 100vw;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
}
.wfa-plate img {
	display: block;
	width: 100%;
	height: min(64vh, 540px);
	object-fit: cover;
}

/* No photograph is a normal state, not an error. Keep the exact aspect box. */
.wfa-plate--empty {
	height: min(64vh, 540px);
	background-image: repeating-linear-gradient(
		45deg,
		color-mix(in srgb, var(--wp--preset--color--text) 7%, transparent) 0 4px,
		transparent 4px 9px
	);
	display: grid;
	place-items: center;
}
.wfa-plate--empty span {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--neutral-700);
}

/* The credit is a structural element, never a disclaimer. 12.5px floor. */
.wfa-credit-plate {
	margin: 0 auto var(--wp--preset--spacing--60);
	border: 1px solid var(--wfa-divider);
	font-size: 12.5px;
	line-height: 1.5;
	max-width: var(--wp--style--global--content-size);
}
.wfa-credit-plate dl { margin: 0; display: grid; grid-template-columns: minmax(88px, auto) 1fr; }
.wfa-credit-plate dt {
	margin: 0;
	padding: 7px 10px;
	border-right: 1px solid var(--wfa-divider);
	border-bottom: 1px solid var(--wfa-divider);
	font-size: 11.5px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--neutral-700);
	background: color-mix(in srgb, var(--wp--preset--color--text) 3%, transparent);
}
.wfa-credit-plate dd {
	margin: 0;
	padding: 7px 10px;
	border-bottom: 1px solid var(--wfa-divider);
}
.wfa-credit-plate dt:last-of-type,
.wfa-credit-plate dd:last-of-type { border-bottom: 0; }

/* ---------------------------------------------- recipe body
   The dish page's headings, ingredient rows and method panels used to be
   styled here. They now live entirely in the plugin's dish.css, which loads
   BEFORE this file — so every rule kept here quietly won the cascade on a tie
   and undid the plugin's design. That is how ingredient headings ended up at
   11.5px in the body font instead of Bangers.

   dish.css is the single owner of everything inside .entry-content on a dish
   page. Do not re-add .wfa-dish rules to this file; put them in dish.css. */

/* ============================================================ cards and hubs */
.wfa-cards {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
	gap: 16px;
}
.wfa-card {
	border: 1px solid var(--wfa-divider);
	padding: var(--wp--preset--spacing--40);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
}
.wfa-card a { text-decoration: none; font-family: var(--wp--preset--font-family--heading); font-size: 20px; font-weight: 600; }
.wfa-card a:hover { text-decoration: underline; }
.wfa-card p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--wp--preset--color--neutral-700); }
.wfa-card .wfa-from { font-size: 12.5px; color: var(--wp--preset--color--neutral-600); }

/* Counts never carry meaning by colour alone. */
.wfa-n {
	font-size: 11.5px;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--neutral-600);
	margin-left: 6px;
}

.wfa-tag,
.wfa-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 1px solid var(--wfa-divider);
	padding: 7px 13px;
	font-size: 13px;
	line-height: 1.2;
	text-decoration: none;
	color: inherit;
	min-height: 34px;
	background: transparent;
}
.wfa-tag:hover,
.wfa-chip:hover { background: color-mix(in srgb, var(--wp--preset--color--text) 6%, transparent); }
.wfa-chip[aria-pressed="true"] {
	background: var(--wp--preset--color--accent-700);
	border-color: var(--wp--preset--color--accent-700);
	color: var(--wp--preset--color--bg);
}
.wfa-chip[aria-pressed="true"] .wfa-n { color: var(--wp--preset--color--bg); }

/* Ingredient icons, rendered by the plugin (wfa_ingredient_icon) and by the
   hub-page generator from the same map. Two kinds share this class — a colour
   emoji in a span, and a currentColor SVG — so both are pinned to one box, or
   a row mixing them comes out ragged. The chips are already inline-flex with
   a 6px gap, so nothing here has to lay them out. */
.wfa-ico { flex: none; width: 1.25em; height: 1.25em; }
.wfa-ico-e {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.05em;
	line-height: 1;
	font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

.wfa-taglist { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; list-style: none; }

/* Region blocks carry a colour swatch; the region name is always present,
   so colour is reinforcement, never the only signal. */
.wfa-region-head {
	display: flex;
	align-items: baseline;
	gap: 10px;
	border-top: 1px solid var(--wfa-divider);
	padding-top: var(--wp--preset--spacing--40);
	margin-top: var(--wp--preset--spacing--60);
}
.wfa-swatch { width: 9px; height: 9px; flex: 0 0 9px; display: inline-block; }
.wfa-region-head h2 { font-size: 24px; margin: 0; }

/* Stat row on the front page. */
.wfa-stats {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--60);
	padding: var(--wp--preset--spacing--50) 0;
	margin: 0;
	border-top: 1px solid var(--wfa-divider);
	border-bottom: 1px solid var(--wfa-divider);
}
.wfa-stats li { display: flex; flex-direction: column; }
.wfa-stats b {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 34px;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.wfa-stats span {
	font-size: 11.5px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--neutral-700);
	margin-top: 4px;
}

/* "Recipe not yet published" — never an apology, never an error colour. */
.wfa-absent {
	font-size: 12px;
	color: var(--wp--preset--color--neutral-600);
	font-style: normal;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
	white-space: nowrap; border: 0;
}

/* 320px and 200% zoom both have to work: nothing here is a fixed width. */
@media (max-width: 360px) {
	.wfa-stats { gap: var(--wp--preset--spacing--50); }
	.wfa-stats b { font-size: 28px; }
}

@media (prefers-reduced-motion: reduce) {
	body { transition: none; }
}

/* ---------------------------------------------- Direction B: page furniture */

/* Where it is from, what it is, and the numbers that matter — one quiet line
   under the standfirst, closed off with a rule. */
.wfa-meta-line {
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--wp--preset--color--neutral-700);
	margin: var(--wp--preset--spacing--30) 0 var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--40);
	border-bottom: 1px solid var(--wfa-divider);
}
.wfa-meta-line i { font-style: normal; padding: 0 5px; color: var(--wp--preset--color--neutral-400); }
.wfa-meta-line a { text-decoration: none; }
.wfa-meta-line a:hover { text-decoration: underline; }

.wfa-q {
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--neutral-700);
	white-space: nowrap;
}


/* Grouped tags — made with / cooked / eaten at. */
.wfa-tags { margin-top: var(--wp--preset--spacing--60); }
.wfa-tagrow {
	display: grid;
	grid-template-columns: minmax(96px, 128px) 1fr;
	gap: var(--wp--preset--spacing--40);
	align-items: start;
	border-top: 1px solid var(--wfa-divider);
	padding: var(--wp--preset--spacing--40) 0;
}
.wfa-tagrow h2 {
	font-family: var(--wp--preset--font-family--body);
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--neutral-700);
	margin: 4px 0 0;
}
.wfa-taggroup { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 520px) {
	.wfa-tagrow { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--20); }
}


/* ---------------------------------------------------------- home page cards */

.wfa-cta { margin: var(--wp--preset--spacing--50) 0; }
.wfa-chip--lead {
	font-size: 15px;
	padding: 11px 18px;
	border-color: var(--wp--preset--color--accent-700);
	color: var(--wp--preset--color--accent-700);
	text-decoration: none;
}
.wfa-chip--lead:hover {
	background: var(--wp--preset--color--accent-700);
	color: var(--wp--preset--color--bg);
}

.wfa-chiprow--wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	padding: 0;
	margin: 0;
	overflow: visible;
}
.wfa-chiprow--wrap .wfa-chip { text-decoration: none; }

/* The region heading row: swatch, name, counts, and a way out to the full list. */
.wfa-region-head { flex-wrap: wrap; }
.wfa-region-head h2 a { text-decoration: none; }
.wfa-region-head h2 a:hover { text-decoration: underline; }
.wfa-seeall {
	margin-left: auto;
	font-size: 13.5px;
	white-space: nowrap;
	text-decoration: none;
}
.wfa-seeall:hover { text-decoration: underline; }

.wfa-cardgrid {
	list-style: none;
	padding: 0;
	margin: var(--wp--preset--spacing--40) 0 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
	gap: 16px;
}

.wfa-dishcard {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 0;
}
.wfa-cardmedia {
	aspect-ratio: 4 / 3;
	display: grid;
	place-items: center;
	background-image: repeating-linear-gradient(45deg,
		color-mix(in srgb, var(--wp--preset--color--text) 7%, transparent) 0 4px,
		transparent 4px 9px);
}
.wfa-cardmedia span {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	line-height: 1.5;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-align: center;
	color: var(--wp--preset--color--neutral-700);
}
.wfa-cardbody { padding: 11px 13px 13px; }
.wfa-cardbody > a {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 16.5px;
	text-decoration: none;
}
.wfa-cardbody > a:hover { text-decoration: underline; }
.wfa-cn {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 400;
	font-size: 14px;
	color: var(--wp--preset--color--neutral-600);
}
.wfa-cardmeta {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	color: var(--wp--preset--color--neutral-600);
	margin: 4px 0 0;
}
.wfa-cardmeta i { width: 8px; height: 8px; flex: none; display: block; }

/* A region with nothing published yet gets a designed empty state, in the same
   language as a missing photograph — not a broken grid. */
.wfa-cardempty {
	margin-top: var(--wp--preset--spacing--40);
	display: grid;
	place-items: center;
	min-height: 96px;
}
.wfa-cardempty span {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--neutral-700);
}

.wfa-regionblock + .wfa-regionblock { margin-top: var(--wp--preset--spacing--70); }

.wfa-legendline {
	border-top: 1px solid var(--wfa-divider);
	padding-top: var(--wp--preset--spacing--40);
	margin-top: var(--wp--preset--spacing--70);
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--wp--preset--color--neutral-700);
}

/* The map is the front page, so it carries the site identity above it. */
.wfa-front-head { margin-bottom: var(--wp--preset--spacing--30); }
.wfa-front-lede {
	font-size: 19px;
	line-height: 1.5;
	color: var(--wp--preset--color--neutral-700);
	margin: var(--wp--preset--spacing--30) 0 0;
	max-width: 62ch;
}

/* The country panel runs to hundreds of dishes. Let it scroll inside itself and
   stay put, rather than pushing the rest of the page down. body uses
   overflow-x: clip rather than hidden precisely so sticky still works here. */
@media (min-width: 960px) {
	.wfa-panel {
		position: sticky;
		top: var(--wp--preset--spacing--40);
		max-height: calc(100vh - var(--wp--preset--spacing--60));
		overflow-y: auto;
		overscroll-behavior: contain;
	}
}
@media (max-width: 959px) {
	.wfa-panel { max-height: 72vh; overflow-y: auto; overscroll-behavior: contain; }
}

.wfa-cardmedia.has-photo { background-image: none; }
.wfa-cardmedia.has-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wfa-star { color: var(--wp--preset--color--accent-700); }

/* Category chip beside a dish name in the panel. */
.wfa-row .wfa-rowcat {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 11.5px;
	border: 1px solid var(--wfa-divider);
	padding: 1px 6px;
	color: var(--wp--preset--color--neutral-700);
	white-space: nowrap;
}

/* Three rows, then a way through to the whole country. */
.wfa-viewall {
	display: inline-block;
	margin-top: var(--wp--preset--spacing--40);
	font-size: 13.5px;
	text-decoration: none;
}
.wfa-viewall:hover { text-decoration: underline; }

.wfa-catchips .wfa-chip { font-size: 12px; padding: 4px 9px; min-height: 0; }

/* The map plate sat at its natural height while the panel ran much taller,
   leaving a large empty band under the map. Let the plate fill the row and
   centre the map inside it; the panel keeps align-self: start so it can stay
   sticky. */
@media (min-width: 960px) {
	.wfa-explore .wfa-content { align-items: stretch; }
	.wfa-map-plate {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.wfa-panel { align-self: start; }
}

/* Until the JS cap ships, keep the panel compact: the design shows a handful of
   the busiest categories, not all fifteen. */
.wfa-catchips .wfa-chip:nth-child(n+7) { display: none; }