/*
Theme Name: Tokyo Roll
Theme URI: https://tokyorollch.com/
Author: Tokyo Roll & Noodle
Description: A minimal, fast block theme built for Tokyo Roll & Noodle. Restrained editorial layout, a self-hosted mincho serif for headings and a zero-byte system stack for body text. No jQuery, no framework, no external requests.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tokyo-roll
Tags: block-theme, restaurant, one-column, full-site-editing, accessibility-ready, custom-colors, custom-menu
*/

/* -------------------------------------------------------------------------
   Nearly everything is driven by theme.json. What follows is only the small
   set of rules the block API cannot express.
   ---------------------------------------------------------------------- */

/* Brand lockup in the header ------------------------------------------- */
.tr-brand__name {
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: 0.01em;
	color: var(--wp--preset--color--primary);
	margin: 0;
}

.tr-brand__name a {
	color: inherit;
	text-decoration: none;
}

.tr-brand__tagline {
	font-size: 0.6875rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin: 0.25rem 0 0;
	line-height: 1;
}

/* Sticky, quietly separated header ------------------------------------- */
.tr-header {
	position: sticky;
	top: 0;
	z-index: 100;
	border-bottom: 1px solid var(--wp--preset--color--hairline);
	background-color: var(--wp--preset--color--base);
}

@supports (backdrop-filter: blur(8px)) {
	.tr-header {
		background-color: rgba(255, 255, 255, 0.88);
		backdrop-filter: saturate(140%) blur(8px);
	}
}

/* Cards ----------------------------------------------------------------- */
.tr-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background-color: var(--wp--preset--color--cream);
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: 2px;
}

/* Menu dish cards: uniform imagery, price pinned to the bottom ----------- */
.tr-dish {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.tr-dish .wp-block-image {
	margin: 0 0 0.9rem;
}

.tr-dish .wp-block-image img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 2px;
	display: block;
}

.tr-dish h3 {
	font-size: var(--wp--preset--font-size--medium);
	margin: 0 0 0.35rem;
	line-height: 1.3;
}

.tr-dish .tr-dish__desc {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	margin: 0 0 0.75rem;
}

.tr-dish .tr-dish__meta {
	margin: auto 0 0;
	font-size: var(--wp--preset--font-size--small);
	font-variant-numeric: tabular-nums;
}

.tr-dish__label {
	display: inline-block;
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: 999px;
	padding: 0.1rem 0.5rem;
	margin-left: 0.35rem;
}

/* Category jump bar ------------------------------------------------------ */
.tr-jump {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 0.5rem;
	justify-content: center;
	list-style: none;
	padding: 0;
	margin: 0;
}

.tr-jump a {
	display: inline-block;
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: 999px;
	padding: 0.35rem 0.85rem;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.tr-jump a:hover,
.tr-jump a:focus-visible {
	color: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	text-decoration: none;
}

/* Section headings with a short rule ------------------------------------ */
.tr-eyebrow {
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
	margin: 0 0 0.5rem;
}

/* Anchored sections clear the sticky header ----------------------------- */
:target,
[id] {
	scroll-margin-top: 5.5rem;
}

/* Footer ---------------------------------------------------------------- */
.tr-footer a {
	color: var(--wp--preset--color--sand);
	text-decoration: none;
}

.tr-footer a:hover,
.tr-footer a:focus-visible {
	color: var(--wp--preset--color--base);
	text-decoration: underline;
}

/* Gallery: consistent crops --------------------------------------------- */
.tr-gallery .wp-block-image img,
.tr-gallery figure img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	width: 100%;
}

/* Small screens ---------------------------------------------------------- */
@media (max-width: 599px) {
	.tr-brand__tagline { display: none; }
	.tr-header { position: static; }
}

/* Print ------------------------------------------------------------------ */
@media print {
	.tr-header, .tr-footer, .tr-jump, .wp-block-buttons { display: none !important; }
	body { font-size: 11pt; }
	.tr-dish { break-inside: avoid; }
}