/* ==========================================================================
   BW Restaurant Menu Manager — frontend styles
   Mobile-first: base rules target small screens, larger layouts layer on
   top via min-width media queries.
   ========================================================================== */

.rmm-menu {
	--rmm-ink: #1c2019;
	--rmm-ink-soft: #2b3126;
	--rmm-paper: #f6f1e4;
	--rmm-paper-dim: #eae3d1;
	--rmm-basil: #4b7a51;
	--rmm-basil-dark: #375c3c;
	--rmm-signal: #b23a2e;
	--rmm-line: #3a3f32;
	--rmm-text-on-ink: #f2efe4;
	--rmm-text-muted-on-ink: #b9bdaf;
	--rmm-text-on-paper: #23281f;
	--rmm-text-muted-on-paper: #6b6a5c;

	--rmm-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
	--rmm-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--rmm-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

	background: var(--rmm-ink);
	color: var(--rmm-text-on-ink);
	border-radius: 14px;
	padding: 18px 14px 26px;
	margin: 2em 0;
	font-family: var(--rmm-font-body);
	-webkit-font-smoothing: antialiased;
}

.rmm-menu * {
	box-sizing: border-box;
}

/* ---- Sticky category tabs -------------------------------------------- */

.rmm-tabs {
	position: sticky;
	top: 0;
	z-index: 2;
	margin: -18px -14px 20px;
	padding: 14px 14px 10px;
	background: linear-gradient(180deg, var(--rmm-ink) 78%, transparent);
}

.rmm-tabs-track {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	scroll-padding-left: 4px;
}

.rmm-tabs-track::-webkit-scrollbar {
	display: none;
}

.rmm-tab {
	flex: 0 0 auto;
	font-family: var(--rmm-font-body);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--rmm-text-muted-on-ink);
	background: transparent;
	border: 1px solid var(--rmm-line);
	border-radius: 999px;
	padding: 8px 16px;
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.rmm-tab:hover {
	color: var(--rmm-text-on-ink);
	border-color: var(--rmm-basil);
}

.rmm-tab.is-active {
	color: var(--rmm-ink);
	background: var(--rmm-basil);
	border-color: var(--rmm-basil);
}

.rmm-tab:focus-visible {
	outline: 2px solid var(--rmm-basil);
	outline-offset: 2px;
}

/* ---- Category sections -------------------------------------------------- */

.rmm-category-group {
	scroll-margin-top: 66px;
}

.rmm-category-title {
	font-family: var(--rmm-font-display);
	font-weight: 600;
	font-size: 1.5rem;
	letter-spacing: 0.01em;
	color: var(--rmm-text-on-ink);
	margin: 0 2px 4px;
}

.rmm-category-desc {
	font-family: var(--rmm-font-body);
	font-style: italic;
	font-size: 0.85rem;
	line-height: 1.5;
	color: var(--rmm-text-muted-on-ink);
	margin: 0 2px 14px;
	max-width: 60ch;
}

/* Torn-ticket divider between categories — the signature detail. */
.rmm-tear {
	height: 14px;
	margin: 22px 2px;
	background-image: linear-gradient(135deg, var(--rmm-ink) 25%, transparent 25%),
		linear-gradient(225deg, var(--rmm-ink) 25%, transparent 25%);
	background-position: top left;
	background-size: 14px 14px;
	background-repeat: repeat-x;
	background-color: var(--rmm-line);
	opacity: 0.7;
}

/* ---- Item list (mobile-first: single column) --------------------------- */

.rmm-items-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
}

.rmm-item {
	display: flex;
	gap: 12px;
	background: var(--rmm-paper);
	color: var(--rmm-text-on-paper);
	border-radius: 10px;
	padding: 12px;
}

.rmm-item.rmm-unavailable {
	background: var(--rmm-paper-dim);
	opacity: 0.75;
}

.rmm-item-image img {
	display: block;
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: 8px;
	flex-shrink: 0;
}

.rmm-item-body {
	flex: 1;
	min-width: 0;
}

.rmm-item-header {
	display: flex;
	align-items: baseline;
	gap: 6px;
}

.rmm-item-title {
	font-family: var(--rmm-font-body);
	font-weight: 600;
	font-size: 0.98rem;
	margin: 0;
	color: var(--rmm-text-on-paper);
	flex: 0 0 auto;
	max-width: 68%;
}

/* Dotted leader connecting the item name to its price, like a printed menu. */
.rmm-item-leader {
	flex: 1 1 auto;
	min-width: 12px;
	height: 1em;
	background-image: radial-gradient(circle, var(--rmm-text-muted-on-paper) 1px, transparent 1.2px);
	background-position: bottom;
	background-size: 6px 4px;
	background-repeat: repeat-x;
	opacity: 0.6;
}

.rmm-item-price {
	flex: 0 0 auto;
	font-family: var(--rmm-font-mono);
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--rmm-basil-dark);
	white-space: nowrap;
}

.rmm-item-price del {
	color: var(--rmm-text-muted-on-paper);
	font-weight: 400;
	margin-right: 0.4em;
}

.rmm-item-price ins {
	text-decoration: none;
}

.rmm-item-desc {
	margin: 4px 0 0;
	font-size: 0.85rem;
	line-height: 1.45;
	color: var(--rmm-text-muted-on-paper);
}

.rmm-item-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-top: 8px;
}

.rmm-spice {
	font-size: 0.6rem;
	letter-spacing: 0.15em;
	color: var(--rmm-signal);
}

.rmm-tag {
	font-family: var(--rmm-font-body);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	background: rgba(75, 122, 81, 0.14);
	color: var(--rmm-basil-dark);
	padding: 3px 8px;
	border-radius: 999px;
}

.rmm-badge-unavailable {
	font-family: var(--rmm-font-body);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--rmm-signal);
}

.rmm-empty {
	color: var(--rmm-text-muted-on-ink, #888);
	font-style: italic;
}

/* ---- Tablet and up: two columns of items, roomier type ------------------ */

@media (min-width: 700px) {
	.rmm-menu {
		padding: 28px 24px 34px;
	}

	.rmm-tabs {
		margin: -28px -24px 26px;
		padding: 20px 24px 12px;
	}

	.rmm-tabs-track {
		flex-wrap: wrap;
		overflow: visible;
	}

	.rmm-category-title {
		font-size: 1.75rem;
	}

	.rmm-columns-2 .rmm-items-grid,
	.rmm-columns-3 .rmm-items-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px;
	}

	.rmm-item-image img {
		width: 76px;
		height: 76px;
	}
}

/* ---- Desktop: allow a genuine 3-up layout when requested ---------------- */

@media (min-width: 1000px) {
	.rmm-columns-3 .rmm-items-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ---- Star ratings --------------------------------------------------------- */

.rmm-rating-block {
	margin-top: 10px;
	padding-top: 8px;
	border-top: 1px dashed var(--rmm-paper-dim);
}

.rmm-rating-display {
	position: relative;
	display: inline-block;
	font-size: 0.85rem;
	line-height: 1;
	vertical-align: middle;
}

.rmm-stars-base {
	color: var(--rmm-paper-dim);
	letter-spacing: 2px;
}

.rmm-stars-fill {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	white-space: nowrap;
	color: var(--rmm-basil-dark);
	letter-spacing: 2px;
}

.rmm-rating-count {
	margin-left: 6px;
	font-size: 0.72rem;
	color: var(--rmm-text-muted-on-paper);
	vertical-align: middle;
}

.rmm-rate-widget {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 6px;
	flex-wrap: wrap;
}

.rmm-rate-label {
	font-size: 0.72rem;
	color: var(--rmm-text-muted-on-paper);
}

.rmm-rate-buttons {
	display: flex;
	flex-direction: row-reverse;
	gap: 2px;
}

.rmm-rate-star {
	background: none;
	border: none;
	cursor: pointer;
	font-size: 1rem;
	line-height: 1;
	padding: 4px;
	color: var(--rmm-paper-dim);
	transition: color 0.1s ease;
}

.rmm-rate-star:hover,
.rmm-rate-star:hover ~ .rmm-rate-star,
.rmm-rate-star:focus-visible,
.rmm-rate-star:focus-visible ~ .rmm-rate-star {
	color: var(--rmm-basil-dark);
}

.rmm-rate-star:focus-visible {
	outline: 2px solid var(--rmm-basil-dark);
	outline-offset: 2px;
}

.rmm-rate-star:disabled {
	cursor: default;
}

.rmm-rate-thanks {
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--rmm-basil-dark);
}

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

/* ---- Motion & accessibility --------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.rmm-menu {
		scroll-behavior: auto;
	}
	.rmm-tab {
		transition: none;
	}
}