/*
 * Sumo Hibachi & Wings - menu board, in CSS.
 *
 * The palette below was sampled straight off the printed boards, so these are
 * the real brand values rather than approximations.
 */

:root {
	--bg: #000000;
	--card: #0a0a0a;
	--ink: #ffffff;
	--muted: #c9c9c9;

	--orange: #ff7a00;
	/* section title outline */
	--orange-light: #ff914d;
	/* sub-headings */
	--orange-shadow: #803100;
	/* the shadow under those sub-headings */
	--green: #00bf63;
	/* salad only */

	--rule: rgba(255, 122, 0, 0.18);
	--leader: rgba(255, 255, 255, 0.2);

	--nav-h: 3.25rem;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: "Poppins", "Helvetica Neue", Arial, sans-serif;
	font-weight: 600;
	font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1.1rem);
	line-height: 1.45;
	-webkit-text-size-adjust: 100%;
}

a {
	color: inherit;
}

img {
	max-width: 100%;
	display: block;
}

ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Prices line up column to column even with different digit widths. */
.price {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* ---------------------------------------------------------------- header --- */

.top {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(1rem, 4vw, 3.5rem);
	padding: 1.5rem clamp(1rem, 4vw, 3rem);
	background: var(--bg);
	border-bottom: 1px solid var(--rule);
}

.logo {
	width: clamp(140px, 20vw, 260px);
	height: auto;
	flex: none;
}

.top-info {
	min-width: 0;
}

.title {
	margin: 0 0 0.35rem;
	font-size: clamp(1.4rem, 1.1rem + 1.6vw, 2.4rem);
	font-weight: 900;
	line-height: 1.1;
	letter-spacing: -0.01em;
}

.bookmark {
	margin: 0 0 0.6rem;
	color: var(--orange-light);
	font-size: 0.95em;
}

.contact {
	margin: 0 0 0.2rem;
	color: var(--muted);
	font-size: 0.95em;
}

.contact a {
	color: var(--ink);
	text-decoration-color: var(--orange);
	text-underline-offset: 0.15em;
}

.order-heading {
	margin: 1rem 0 0.6rem;
	font-size: 1em;
	font-weight: 700;
	color: var(--orange-light);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.order-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.order-btn {
	display: inline-block;
	padding: 0.6rem 1.1rem;
	background: var(--orange);
	color: #140800;
	font-weight: 700;
	font-size: 0.95em;
	text-decoration: none;
	border-radius: 999px;
	transition:
		transform 0.12s ease,
		background-color 0.12s ease;
}

.order-btn:hover,
.order-btn:focus-visible {
	background: #ffa040;
	transform: translateY(-2px);
}

/* ------------------------------------------------------------ jump nav --- */

.category-nav {
	position: sticky;
	top: 0;
	z-index: 10;
	display: flex;
	gap: 0.4rem;
	height: var(--nav-h);
	align-items: center;
	padding: 0 clamp(0.75rem, 3vw, 2rem);
	background: rgba(0, 0, 0, 0.94);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--rule);
	overflow-x: auto;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}

.category-nav::-webkit-scrollbar {
	display: none;
}

.nav-link {
	flex: none;
	padding: 0.35rem 0.8rem;
	border-radius: 999px;
	color: var(--muted);
	font-size: 0.85em;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	transition:
		color 0.12s ease,
		background-color 0.12s ease;
}

.nav-link:hover,
.nav-link:focus-visible {
	color: #140800;
	background: var(--orange);
}

/* ---------------------------------------------------------------- board --- */

.menu {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1.25rem, 2.5vw, 2.25rem);
	max-width: 1500px;
	margin: 0 auto;
	padding: clamp(1.25rem, 3vw, 2.5rem) clamp(0.85rem, 3vw, 2.5rem);
}

.section {
	/* Clears the sticky nav when arriving via a jump link. */
	scroll-margin-top: calc(var(--nav-h) + 0.75rem);
	padding: clamp(1rem, 2vw, 1.6rem);
	background: var(--card);
	border: 1px solid var(--rule);
	border-radius: 14px;
}

/* Title and photo share a row, so the photo can never collide with the text. */
.section-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 0.6rem;
}

.section-heading {
	min-width: 0;
}

.section-title {
	margin: 0;
	font-size: clamp(1.75rem, 1.2rem + 2.2vw, 3rem);
	font-weight: 900;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: -0.015em;

	/* White fill with the outline sitting outside the glyph, the way the
       printed titles look. Without paint-order the stroke eats into the fill. */
	color: var(--ink);
	-webkit-text-stroke: 0.14em var(--orange);
	paint-order: stroke fill;
}

.accent-green .section-title {
	-webkit-text-stroke-color: var(--green);
}

.section-tagline {
	margin: 0.5rem 0 0;
	color: var(--ink);
	font-size: 0.85em;
	font-weight: 700;
	line-height: 1.3;
}

/* Fixed ratio box, so the photo reserves its space before it loads and the
   layout never jumps. object-fit keeps every cutout undistorted inside it. */
.section-photo {
	flex: none;
	width: clamp(96px, 30%, 190px);
	aspect-ratio: 3 / 2;
}

.section-photo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.section-body {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
}

/* --------------------------------------------------------------- blocks --- */

.caption {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 0.4rem;
}

.caption-text {
	margin: 0;
	color: var(--orange-light);
	font-size: 1.25em;
	font-weight: 900;
	line-height: 1.1;
	text-shadow: 0.045em 0.045em 0 var(--orange-shadow);
}

.caption-aside {
	color: var(--orange-light);
	font-size: 0.8em;
	font-weight: 700;
	text-align: right;
}

.note {
	color: var(--muted);
	font-size: 0.85em;
	font-weight: 500;
	line-height: 1.4;
}

.note p {
	margin: 0 0 0.15rem;
}

/* name .................... price */
.rows {
	display: flex;
	flex-direction: column;
	gap: 0.28rem;
}

.row {
	display: flex;
	align-items: baseline;
	gap: 0.4rem;
}

.row-name {
	flex: 0 1 auto;
}

.row-note {
	color: var(--muted);
	font-size: 0.8em;
	font-weight: 500;
}

.leader {
	flex: 1 1 auto;
	min-width: 0.75rem;
	height: 0;
	border-bottom: 2px dotted var(--leader);
	transform: translateY(-0.3em);
}

.variants {
	display: flex;
	flex: none;
	align-items: baseline;
	gap: 0.7rem;
}

.variant {
	display: flex;
	align-items: baseline;
	gap: 0.3rem;
	white-space: nowrap;
}

.variant-label {
	color: var(--muted);
	font-size: 0.85em;
	font-weight: 500;
}

/* Compact grid of short label/price pairs. */
.pairs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(115px, 1fr));
	gap: 0.3rem 1.1rem;
}

/* Same dotted leader as .row, so the eye still connects name to price even
   though these sit in narrow columns. */
.pair {
	display: flex;
	align-items: baseline;
	gap: 0.4rem;
}

.pair-name {
	flex: 0 1 auto;
}

.pair::after {
	content: "";
	flex: 1 1 auto;
	order: 1;
	min-width: 0.5rem;
	height: 0;
	border-bottom: 2px dotted var(--leader);
	transform: translateY(-0.3em);
}

.pair .price {
	order: 2;
}

/* Real price matrices. */
.table-scroll {
	overflow-x: auto;
	scrollbar-width: thin;
}

.matrix {
	width: 100%;
	border-collapse: collapse;
	white-space: nowrap;
}

.matrix th,
.matrix td {
	padding: 0.3rem 0.55rem;
	text-align: right;
	font-weight: 600;
}

.matrix thead th {
	color: var(--orange-light);
	font-size: 0.85em;
	font-weight: 700;
}

/* Needs to outrank `.matrix th`, which right-aligns everything else. */
.matrix th.matrix-corner,
.matrix th.matrix-label {
	text-align: left;
	padding-left: 0;
	width: 1px;
	/* shrink-to-fit, so the price columns get the room */
}

.matrix tbody tr:not(:first-child) th,
.matrix tbody tr:not(:first-child) td {
	border-top: 1px solid rgba(255, 255, 255, 0.07);
}

/* The wings flavor list. Colors come from the data, not from here. */
.flavors {
	display: flex;
	flex-wrap: wrap;
	gap: 0 0.1rem;
	font-size: 0.9em;
	font-weight: 700;
}

.flavor:not(:last-child)::after {
	content: ",";
}

/* ---------------------------------------------------------------- footer --- */

.foot {
	padding: 2rem clamp(1rem, 4vw, 3rem) 2.5rem;
	border-top: 1px solid var(--rule);
	color: var(--muted);
	font-size: 0.85em;
	font-weight: 500;
	text-align: center;
}

.foot p {
	margin: 0 0 0.3rem;
}

.foot-note {
	color: #7a7a7a;
}

/* ------------------------------------------------------------ responsive --- */

@media (max-width: 900px) {
	.menu {
		grid-template-columns: minmax(0, 1fr);
	}

	.top {
		flex-direction: column;
		text-align: center;
	}

	.logo {
		width: clamp(160px, 46vw, 240px);
	}

	.bookmark,
	.contact {
		text-align: center;
	}

	.order-links {
		justify-content: center;
	}
}

@media (max-width: 480px) {
	.section-photo {
		width: clamp(84px, 28%, 120px);
	}

	.variants {
		gap: 0.5rem;
	}
}

/* A name plus three labelled prices can be too wide for a narrow phone. Allow
   just those rows to wrap, so the prices drop to a second line and right-align
   only when they genuinely do not fit. Rows that still fit stay on one line. */
@media (max-width: 480px) {
	.row-variants {
		flex-wrap: wrap;
	}

	.row-variants .variants {
		margin-left: auto;
	}
}

/* Section titles are heavy enough that a thick stroke closes up the counters
   at small sizes, so ease off on narrow screens. */
@media (max-width: 380px) {
	.section-title {
		-webkit-text-stroke-width: 0.1em;
	}
}

@media (prefers-reduced-motion: reduce) {
	* {
		transition: none !important;
	}
}

/* Visible keyboard focus everywhere, since almost everything here is a link. */
:focus-visible {
	outline: 2px solid var(--orange);
	outline-offset: 3px;
	border-radius: 4px;
}