/**
 * Front-end menu styles for [lacascios_menu], ported from the menu.html mockup.
 * Scoped under .lcs-menu so nothing bleeds into the rest of the theme.
 * Colors and fonts come from the theme's variables, with mockup fallbacks.
 */

.lcs-menu {
	--lcs-rule: var(--rule, rgba(90, 82, 72, 0.18));
	--lcs-rule-dark: var(--rule-dark, rgba(90, 82, 72, 0.35));
	--lcs-ink: var(--text-dark, #2c2420);
	--lcs-ink-mid: var(--text-medium, #3d3530);
	--lcs-ink-light: var(--text-light, #635850);
	--lcs-display: var(--font-display, 'Cormorant Garamond', Georgia, serif);
	--lcs-olive: var(--olive-green, #5a6b33);
	--lcs-rosso: var(--rosso, #8b2e2e);
}

/* Deep-link targets (/menu/#cocktails) clear the fixed header */
.lcs-menu [id] { scroll-margin-top: 110px; }

/* Section: each category block */
.lcs-menu .m-section {
	padding: 1.5rem 2rem;
	border-bottom: 1px solid var(--lcs-rule);
	text-align: center;
}
.lcs-menu .m-section-flush {
	border-bottom: none;
	padding-bottom: 0;
}
.lcs-menu h2 {
	font-family: var(--lcs-display);
	font-size: 1.2rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.35em;
	color: var(--lcs-ink);
	margin: 0 0 1.2rem;
	line-height: 1.3;
}
.lcs-menu .m-note {
	font-family: var(--lcs-display);
	font-size: 0.92rem;
	font-style: italic;
	font-weight: 400;
	color: var(--lcs-ink-light);
	margin: -0.5rem 0 1.2rem;
	line-height: 1.6;
}

/* Appetizers | Soup & Salad: two columns with a rule between */
.lcs-menu .split-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border-bottom: 1px solid var(--lcs-rule);
	padding-bottom: 1.5rem;
}
.lcs-menu .split-2 > .col { padding: 0 1.2rem; }
.lcs-menu .split-2 > .col:first-child { border-right: 1px solid var(--lcs-rule); }

/* Three columns */
.lcs-menu .grid-3 {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 1rem 1.5rem;
}

/* Cocktails tab: Toast menu name, then its groups as subheadings */
.lcs-menu .m-sub + .m-sub { margin-top: 1.4rem; }
.lcs-menu .m-sub-title {
	font-family: var(--lcs-display);
	font-size: 0.95rem;
	font-style: italic;
	font-weight: 500;
	letter-spacing: 0.08em;
	color: var(--lcs-olive);
	margin: 0 0 0.6rem;
}

/* Happy Hour: Toast hours under the tab */
.lcs-menu .m-hours {
	text-align: center;
	font-family: var(--lcs-display);
	font-size: 1rem;
	font-style: italic;
	color: var(--lcs-olive);
	padding: 1.5rem 2rem 0;
	margin: 0;
}

/* One or two dishes in a three-column section: centered */
.lcs-menu .grid-3.grid-n1 { grid-template-columns: 1fr; max-width: 20rem; margin: 0 auto; }
.lcs-menu .grid-3.grid-n2 { grid-template-columns: 1fr 1fr; max-width: 40rem; margin: 0 auto; }

/* Prime Steaks: featured bar */
.lcs-menu .row-bar {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1rem 1.5rem;
	border-top: 2px solid var(--lcs-rule-dark);
	border-bottom: 2px solid var(--lcs-rule-dark);
	padding: 1.2rem 2rem;
	text-align: center;
	background: rgba(107, 124, 63, 0.03);
}

/* Kids | Dessert: two columns at the bottom */
.lcs-menu .split-bottom {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border-bottom: 1px solid var(--lcs-rule);
}
.lcs-menu .split-bottom > .col {
	padding: 1.5rem 2rem;
	text-align: center;
}
.lcs-menu .split-bottom > .col:first-child { border-right: 1px solid var(--lcs-rule); }

/* Double rule above a section */
.lcs-menu .double-rule { border-top: 3px double var(--lcs-rule-dark); }

/* Dishes */
.lcs-menu .dish {
	text-align: center;
	padding: 0.5rem 0;
}
.lcs-menu .col .dish + .dish { padding-top: 0.8rem; }
.lcs-menu .dish h3 {
	font-family: var(--lcs-display);
	font-size: 0.95rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--lcs-ink);
	margin: 0 0 0.15rem;
	line-height: 1.3;
}
.lcs-menu .dish p {
	font-family: var(--lcs-display);
	font-size: 0.9rem;
	font-weight: 300;
	font-style: italic;
	color: var(--lcs-ink-mid);
	line-height: 1.6;
	margin: 0;
}
.lcs-menu .dish .dish-price {
	font-style: normal;
	font-weight: 600;
	font-size: 0.85rem;
	letter-spacing: 0.08em;
	color: var(--lcs-olive);
	margin-top: 0.2rem;
}

/* Sold out today (from Toast stock) */
.lcs-menu .dish-oos h3,
.lcs-menu .dish-oos p:not(.dish-oos-label) {
	text-decoration: line-through;
	text-decoration-color: rgba(99, 88, 80, 0.6);
	color: var(--lcs-ink-light);
}
.lcs-menu .dish .dish-oos-label {
	font-family: var(--font-body, 'Raleway', sans-serif);
	font-style: normal;
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--lcs-rosso);
	margin-top: 0.25rem;
}

.lcs-menu .menu-disclaimer {
	text-align: center;
	font-family: var(--lcs-display);
	font-size: 0.82rem;
	font-style: italic;
	color: var(--lcs-ink-light);
	padding: 1rem 2rem;
	margin: 0;
}

/* Waiting for the first sync / empty menu */
.lcs-menu-fallback {
	text-align: center;
	padding: 2rem 1rem;
	font-family: var(--lcs-display, 'Cormorant Garamond', serif);
	font-style: italic;
}

@media (max-width: 768px) {
	.lcs-menu .m-section { padding: 1.2rem; }
	.lcs-menu .split-2,
	.lcs-menu .split-bottom,
	.lcs-menu .grid-3 { grid-template-columns: 1fr; }
	.lcs-menu .grid-3.grid-n2 { grid-template-columns: 1fr; }
	.lcs-menu .split-2 > .col:first-child {
		border-right: none;
		border-bottom: 1px solid var(--lcs-rule);
		padding-bottom: 1rem;
		margin-bottom: 0.5rem;
	}
	.lcs-menu .split-bottom > .col:first-child {
		border-right: none;
		border-bottom: 1px solid var(--lcs-rule);
	}
	.lcs-menu .row-bar { grid-template-columns: 1fr; padding: 1rem; }
}

/* ---- Dish photos from Toast (photos="thumbs" | photos="popup") ---- */
.lcs-menu .dish-photo {
	display: block;
	width: 120px;
	height: 120px;
	object-fit: cover;
	margin: 0 auto 0.6rem;
	border: 1px solid var(--lcs-rule-dark);
	padding: 3px;
	background: #fff;
}
.lcs-menu .dish-oos .dish-photo { opacity: 0.5; }

.lcs-menu .dish-photo-btn {
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	text-decoration: underline;
	text-decoration-color: rgba(90, 107, 51, 0.45);
	text-underline-offset: 4px;
}
.lcs-menu .dish-photo-btn:hover { color: var(--lcs-olive); }
.lcs-menu .dish-photo-btn:focus-visible { outline: 2px solid var(--lcs-olive); outline-offset: 3px; }
.lcs-menu .dish-photo-icon { width: 1em; height: 1em; fill: var(--lcs-olive); flex: none; }
.lcs-menu .screen-reader-text {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.lcs-photo-dialog {
	position: fixed;
	inset: 0;
	margin: auto; /* centered, even under a theme reset that zeroes margins */
	width: fit-content;
	height: fit-content;
	border: 1px solid rgba(201, 169, 110, 0.35);
	padding: 0;
	background: #1a1a1e;
	max-width: min(92vw, 900px);
	max-height: 90vh;
	overflow: visible;
}
.lcs-photo-dialog::backdrop { background: rgba(20, 18, 22, 0.85); }
.lcs-photo-dialog figure { margin: 0; }
.lcs-photo-dialog img { display: block; max-width: min(92vw, 900px); max-height: 80vh; object-fit: contain; }
.lcs-photo-dialog figcaption {
	font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
	font-size: 1.1rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #f5f0e8;
	text-align: center;
	padding: 0.8rem 1rem;
}
.lcs-photo-close {
	position: absolute;
	top: -2.8rem;
	right: 0;
	width: 44px;
	height: 44px;
	background: none;
	border: 0;
	color: #f5f0e8;
	font-size: 2rem;
	line-height: 1;
	cursor: pointer;
}
.lcs-photo-close:focus-visible { outline: 2px solid #c9a96e; outline-offset: 2px; }

@media (max-width: 768px) {
	.lcs-menu .dish-photo { width: 104px; height: 104px; }
}
