/**
 * København beer menu — front-end styles.
 *
 * Matches "Kobe digital menu.pdf" (the final, official artwork — this replaces
 * the july 22 draft the first version was built to).
 * The typeface stack mirrors the existing hand-maintained menu so the two
 * cannot drift apart while both are on the site.
 *
 * The print menu is a genuinely different design, not this one scaled down —
 * monochrome, its own wordmark, its own grid. The @media print block at the
 * foot only keeps this readable on paper; it is not an attempt at that.
 */

.kobe-menu {
	--kobe: #3179b4;
	--kobe-ink: #2b3d4a;
	--kobe-muted: #75868f;
	--kobe-rule: rgba(49, 121, 180, 0.28);
	--kobe-field: #e9f2ec;

	max-width: 1100px;
	margin: 0 auto;
	padding: 30px 34px 40px;
	background: var(--kobe-field);
	color: var(--kobe);
	font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* ------------------------------------------------------------- the heading */

.kobe-menu .kobe-menu__heading {
	margin: 0 0 4px;
	padding: 0;
	font-family: 'Gotham Rounded Medium', 'Gotham Rounded', 'Arial Rounded MT Bold', Arial, sans-serif;
	font-size: 3.1rem;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: 0.12em;
	/* The tracking is applied to the right of the last glyph too, which drags
	   the word off-centre. Half of it back as padding re-centres it. */
	padding-left: 0.12em;
	text-align: center;
	text-transform: uppercase;
	color: var(--kobe);
}

/* ---------------------------------------------------------- serving bands */

.kobe-menu .kobe-section {
	display: flex;
	align-items: center;
	gap: 18px;
	margin: 32px 0 18px;
	font-family: 'Gotham Rounded Medium', 'Gotham Rounded', 'Arial Rounded MT Bold', Arial, sans-serif;
	font-size: 1.15rem;
	font-weight: 600;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--kobe);
}

/* The wavy rule either side of the band label. Inlined as a data URI so the
   page makes no extra request and nothing is fetched from a third party.
 *
 * **Two waves.** The approved artwork draws a double rule, on the digital menu
 * as well as the printed one, and this was a single line for a year. Measured
 * off `refs/Kobe digital menu - approved july 22.pdf` at 400dpi, in units of one
 * period: stroke 0.067, peak-to-peak 0.20, centreline gap 0.356. Hence a period
 * of 8 with a 0.53 stroke, the two centrelines 2.8 apart, and a cubic whose
 * control offset of 1.07 gives the 0.8 peak deviation the artwork has. The old
 * single wave was two and a half times as deep for its period.
 *
 * Full strength rather than the 0.7 it used to carry: the artwork's rule is the
 * brand blue, not a tint of it. */
.kobe-menu .kobe-section::before,
.kobe-menu .kobe-section::after {
	content: '';
	flex: 1 1 auto;
	height: 5px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cg fill='none' stroke='%233179b4' stroke-width='.53'%3E%3Cpath d='M0 1.1c1-1.07 3-1.07 4 0s3 1.07 4 0'/%3E%3Cpath d='M0 3.9c1-1.07 3-1.07 4 0s3 1.07 4 0'/%3E%3C/g%3E%3C/svg%3E");
	background-repeat: repeat-x;
	background-position: center;
}

.kobe-menu .kobe-section > span {
	flex: 0 0 auto;
}

/* -------------------------------------------------------------- the columns */

.kobe-menu .kobe-columns {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 48px;
}

.kobe-menu .kobe-col {
	flex: 1 1 340px;
	min-width: 280px;
}

/* ---------------------------------------------------------------- one beer */

.kobe-menu .kobe-item {
	display: grid;
	/* minmax(0, …) rather than a bare 1fr. A bare 1fr means minmax(auto, 1fr),
	   and that auto floor is min-content — so the body track would refuse to
	   shrink below its longest unbreakable word and the whole row would overflow
	   its container instead of compressing. Same reason the wine grid below
	   spells it out. */
	/* The flags and price tracks are sized, not `auto`. Every row is its own
	   grid, so an `auto` track is measured against that row's contents alone —
	   a 13.00 in the casks and a 4.80 in the kegs gave the two bands rules in
	   different places, and the whole sheet read as two designs bolted
	   together. Fixed tracks put every rule on the same line down the page,
	   which is what the artwork does. 5.4rem holds a "Pt" beside a five-figure
	   price with room to spare; below 400px the layout restacks and overrides
	   all of this anyway. */
	grid-template-columns: 34px minmax(0, 1fr) 3.2rem 5.4rem;
	align-items: start;
	gap: 0 10px;
	/* The 8px is the takeover outline's breathing room, carried by every row
	   whether it is outlined or not — see .is-featured. */
	padding: 14px 8px;
	border-bottom: 1px dotted var(--kobe-rule);
}

/* The safety net that goes with minmax(0, …): the track can now be narrower
   than the longest word, so the word has to be allowed to break rather than
   spilling out of its cell. break-word, not anywhere — it breaks only when a
   word genuinely cannot fit, so ordinary names are never chopped up. */
.kobe-menu .kobe-name,
.kobe-menu .kobe-meta,
.kobe-menu .kobe-desc {
	overflow-wrap: break-word;
}

.kobe-menu .kobe-tap {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--kobe);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1;
	/* C1-C6 is two characters where a keg number is one, and the badge must
	   stay a circle rather than growing into an oval. */
	flex: 0 0 auto;
	letter-spacing: 0;
}

/* ------------------------------------------------------- the tap takeover */

/* About once a month a brewery takes over a run of taps. The print artwork
   picks those lines out in a dotted outline with a legend above; this is the
   same idea on the web menu. */
.kobe-menu .kobe-takeover {
	margin: 0 0 18px;
	text-align: center;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--kobe);
}

.kobe-menu .kobe-takeover > span {
	display: inline-block;
	padding: 5px 16px;
	border: 1px dashed var(--kobe);
	border-radius: 999px;
}

/* Outline drawn inside the row, and nothing else changes: the 8px of side
   padding it needs is on every .kobe-item, not added here. Adding it here was
   the bug — a featured row grew 16px of padding the rows above and below did
   not have, so its ruled columns stepped inwards and the takeover block was the
   one place on the menu where the rules did not line up. */
.kobe-menu .kobe-item.is-featured {
	box-shadow: inset 0 0 0 1px var(--kobe);
	border-radius: 4px;
	border-bottom-color: transparent;
}

.kobe-menu .kobe-name {
	margin: 0 0 2px;
	font-family: 'Gotham Rounded Medium', 'Gotham Rounded', 'Arial Rounded MT Bold', Arial, sans-serif;
	font-size: 1rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--kobe);
}

.kobe-menu .kobe-abv {
	font-size: 0.8rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--kobe-muted);
}

.kobe-menu .kobe-meta {
	margin: 0;
	font-size: 0.88rem;
	color: var(--kobe-ink);
}

.kobe-menu .kobe-brewery {
	font-weight: 700;
}

.kobe-menu .kobe-location {
	font-style: italic;
	color: var(--kobe-muted);
}

.kobe-menu .kobe-desc {
	margin: 2px 0 0;
	font-size: 0.85rem;
	font-style: italic;
	color: var(--kobe-muted);
}

/* ------------------------------------------------------------ the dry tap */

/* A tap with no beer on it. It keeps its place in the run and its badge, so
   the gap reads as held-open rather than as a missing line. The badge goes
   hollow — same circle, no fill — and the message spans the flags and price
   columns, which have nothing to say here. */

.kobe-menu .kobe-item--dry .kobe-tap {
	background: transparent;
	color: var(--kobe-muted);
	border: 1px dashed var(--kobe-rule);
}

.kobe-menu .kobe-item--dry .kobe-body {
	grid-column: 2 / -1;
}

.kobe-menu .kobe-coming {
	margin: 0;
	padding: 4px 0;
	font-size: 0.88rem;
	font-style: italic;
	letter-spacing: 0.02em;
	color: var(--kobe-muted);
}

/* ------------------------------------------------------------ flags, prices */

/* The flags sit in their own ruled column. Both rules stay put whether or not
   the beer carries a flag, so every row lines up down the page — an empty slot
   is the design, not a gap. */
.kobe-menu .kobe-flags {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	min-width: 2.2em;
	padding: 0 8px;
	border-left: 1px solid var(--kobe-rule);
	align-self: stretch;
}

.kobe-menu .kobe-flag {
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--kobe-ink);
	line-height: 1.5;
}

.kobe-menu .kobe-prices {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding-left: 12px;
	border-left: 1px solid var(--kobe-rule);
	align-self: stretch;
}

.kobe-menu .kobe-price {
	display: flex;
	justify-content: space-between;
	gap: 14px;
	font-size: 0.85rem;
	line-height: 1.5;
}

.kobe-menu .kobe-price__label {
	color: var(--kobe-muted);
	font-size: 0.75rem;
}

.kobe-menu .kobe-price__amount {
	color: var(--kobe-ink);
	font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------- the wines */

/* The wine artwork lays the *sections* out two across — RED beside WHITE, then
   ROSÉ & ORANGE beside SPARKLING — with a single column of wines inside each.
   That is the opposite way round from the beers, where a band runs full width
   and its taps flow into two columns inside it. Hence a grid here rather than
   any reuse of .kobe-columns. */
.kobe-menu--wine .kobe-wine-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px 48px;
	/* Sections start level across a row rather than each cell stretching to the
	   tallest — RED has five wines and SPARKLING has three, and stretching
	   would space the short one out to match. */
	align-items: start;
}

.kobe-menu--wine .kobe-wine-section {
	/* A section should not be split down the middle of a page in print. */
	break-inside: avoid;
}

/* No tap badge: a wine is a line on a list, not a numbered tap. Everything
   else — the name, the ABV, the flags column, the price column — is the beer
   row exactly, which is what keeps the two menus reading as one design. */
/* Sized tracks for the same reason the beers have them, and wider: a wine
   carries up to four measures and the widest label is "Bottle" rather than
   "Pt". The two wine sections sit side by side, so an auto track made the
   ruled columns land in a different place in each one. */
.kobe-menu .kobe-item--wine {
	grid-template-columns: minmax(0, 1fr) 3.2rem 6.6rem;
}

/* The bottle's own name, bold, with the country in muted italic beside it —
   the same treatment the beers give a brewery and its location, because on the
   page they are doing the same job. */
.kobe-menu .kobe-wine-name {
	font-weight: 700;
}

.kobe-menu .kobe-country {
	font-style: italic;
	color: var(--kobe-muted);
}

/* -------------------------------------------------------------------- print */

@media print {
	.kobe-menu {
		max-width: none;
		padding: 0;
		/* The mint field is a screen device. On paper it is a page of ink. */
		background: #fff;
	}

	.kobe-menu .kobe-item {
		break-inside: avoid;
	}
}

/* ------------------------------------------------------------------- mobile */

@media (max-width: 720px) {
	.kobe-menu {
		padding: 22px 16px 30px;
	}

	.kobe-menu .kobe-menu__heading {
		font-size: 2.1rem;
	}

	.kobe-menu .kobe-columns {
		flex-direction: column;
		gap: 0;
	}

	/* There is no mobile wine artwork, so wine does what beer does: the
	   sections stack, one column each, rather than squeezing two across. */
	.kobe-menu--wine .kobe-wine-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.kobe-menu .kobe-section {
		letter-spacing: 0.18em;
		font-size: 1rem;
	}

	.kobe-menu .kobe-name {
		font-size: 1.02rem;
	}

	/* The columns have already stacked, so holding each one open at 280px can
	   only push the row wider than the screen. */
	.kobe-menu .kobe-col {
		min-width: 0;
	}
}

/* ----------------------------------------------------------- tiny viewports */

/*
 * Below this width the four-column row cannot fit, so the prices and flags drop
 * underneath the beer instead of sitting beside it.
 *
 * 400px is not arbitrary. The row's fixed furniture — 34px badge, 30px of gaps,
 * ~35px flags column, ~68px prices column (~97px on wine, whose labels are
 * "125ml" and "Bottle" rather than "Pt") — plus 32px of our own padding and the
 * 30px that WPBakery's .vc_column-inner takes without asking, leaves the beer
 * name about 91px at a 320px viewport. The side-by-side design stops fitting at
 * roughly 373px and this adds headroom above that, so it changes shape before it
 * starts clipping rather than after.
 *
 * 320px is the floor being built to: WCAG 2.1 SC 1.4.10 (Reflow) requires
 * content to reflow without horizontal scrolling at 320 CSS pixels, which is
 * 1280px at 400% zoom — i.e. exactly what a phone on magnified display view
 * reports, whatever the physical screen size. This is an accessibility case, not
 * an old-device one.
 *
 * There is no artwork at this width, so nothing approved is being contradicted.
 */
@media (max-width: 400px) {
	.kobe-menu {
		padding: 20px 12px 26px;
	}

	/* Two rows: the badge and the beer on the first, its flags and prices on the
	   second, indented to line up under the name rather than under the badge.
	   The third track is what keeps flags and prices side by side down there
	   instead of costing two more lines each. */
	.kobe-menu .kobe-item {
		grid-template-columns: 34px auto minmax(0, 1fr);
	}

	.kobe-menu .kobe-body {
		grid-column: 2 / -1;
	}

	.kobe-menu .kobe-flags {
		grid-column: 2;
	}

	.kobe-menu .kobe-prices {
		grid-column: 3;
	}

	/* Both were ruled columns standing beside the beer. Underneath it they are
	   just a line of small print, so the rules and the stretching go. */
	.kobe-menu .kobe-flags,
	.kobe-menu .kobe-prices {
		align-self: auto;
		border-left: 0;
		padding: 0;
		margin-top: 6px;
	}

	.kobe-menu .kobe-flags {
		flex-direction: row;
		justify-content: flex-start;
		gap: 8px;
		min-width: 0;
		padding-right: 10px;
	}

	/* An empty flags column is deliberate in the full-width design — it keeps
	   every row's rules aligned down the page. Stacked, there are no rules to
	   align, so an empty one is just a gap. */
	.kobe-menu .kobe-flags:empty {
		display: none;
	}

	/* Laid out along the line rather than down it, because vertical space is
	   what this layout is spending to buy the width back. Wine has up to four
	   measures, so they wrap onto a second line rather than overflowing. */
	.kobe-menu .kobe-prices {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 2px 14px;
	}

	.kobe-menu .kobe-price {
		gap: 6px;
	}

	/* Wine has no badge, so there is no first column to indent past. */
	.kobe-menu .kobe-item--wine {
		grid-template-columns: auto minmax(0, 1fr);
	}

	.kobe-menu .kobe-item--wine .kobe-body {
		grid-column: 1 / -1;
	}

	.kobe-menu .kobe-item--wine .kobe-flags {
		grid-column: 1;
	}

	.kobe-menu .kobe-item--wine .kobe-prices {
		grid-column: 2;
	}
}