/* C12 Taproom Menu: public web menu.
 * Uses the theme's design tokens (cream text, gold accents and hairlines, Futura/Jost),
 * with fallbacks so it still reads correctly if a token is missing.
 * Sits inside a dark band (black, night or sky), so text inherits the band's cream colour. */

.c12tm-web {
	--c12tm-gold: var(--gold, #d19e49);
	--c12tm-cream: var(--cream, #faf0d3);
	--c12tm-hair: var(--gold-hairline, rgba(209, 158, 73, 0.7));
	--c12tm-key: var(--gold-keyline, rgba(209, 158, 73, 0.5));
	--c12tm-display: var(--title-font-family, "Futura", "Jost", "Century Gothic", sans-serif);
	--c12tm-body: var(--body-font-family, "Jost", "Futura", "Century Gothic", sans-serif);
	color: var(--c12tm-cream);
	font-family: var(--c12tm-body);
	max-width: 1200px;
	margin: 0 auto;
	text-align: left;
}

/* Section jump links: handy on a phone, where the menu is long */
.c12tm-web-jump {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 3rem;
}
.c12tm-web-jump a {
	padding: 8px 16px;
	border: 1px solid var(--c12tm-key);
	border-radius: 999px;
	color: var(--c12tm-cream);
	font-family: var(--c12tm-display);
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 2px;
	text-decoration: none;
	text-transform: uppercase;
	transition: border-color .2s, color .2s;
}
.c12tm-web-jump a:hover,
.c12tm-web-jump a:focus-visible { border-color: var(--c12tm-gold); color: var(--c12tm-gold); }

.c12tm-web-section { margin: 0 0 4rem; scroll-margin-top: 120px; }

/* The theme's .is-style-section-label draws the gold numeral and hairline; we add the count. */
.c12tm-web-heading { color: var(--c12tm-cream); }
.c12tm-web-count {
	order: 3;
	flex: none;
	color: var(--c12tm-gold);
	font-size: 0.75rem;
	letter-spacing: 4px;
}
/* Fallback when the theme's section-label style isn't present */
.c12tm-web-heading:not([class*="is-style-section-label"]) { text-transform: uppercase; letter-spacing: 5px; }

.c12tm-web-para {
	max-width: 62ch;
	margin: -0.75rem 0 2rem;
	color: var(--c12tm-cream);
	opacity: .85;
	font-size: 1rem;
	line-height: 1.6;
}

.c12tm-web-subheading {
	margin: 2.5rem 0 0.25rem;
	color: var(--c12tm-gold);
	font-family: var(--c12tm-display);
	font-size: 1.5rem;
	font-weight: 500;
	letter-spacing: 3px;
	line-height: 1.2;
	text-transform: uppercase;
}
.c12tm-web-para + .c12tm-web-subheading,
.c12tm-web-heading + .c12tm-web-subheading { margin-top: 0.5rem; }

.c12tm-web-items {
	display: grid;
	grid-template-columns: repeat(var(--c12tm-cols, 3), minmax(0, 1fr));
	gap: 0 48px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.c12tm-web-item {
	margin: 0;
	padding: 22px 0 24px;
	border-top: 1px solid var(--c12tm-key);
	list-style: none;
	break-inside: avoid;
}
.c12tm-web-item::before { content: none !important; } /* themes often add list bullets */

.c12tm-web-name {
	margin: 0 0 6px;
	color: var(--c12tm-cream);
	font-family: var(--c12tm-display);
	font-size: 1.15rem;
	font-weight: 500;
	letter-spacing: 2.5px;
	line-height: 1.25;
	text-transform: uppercase;
}
.c12tm-web-meta {
	margin: 0 0 10px;
	color: var(--c12tm-gold);
	font-family: var(--c12tm-display);
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 2px;
	text-transform: uppercase;
}
.c12tm-web-desc {
	margin: 0 0 14px;
	color: var(--c12tm-cream);
	opacity: .82;
	font-size: 0.95rem;
	font-weight: 350;
	line-height: 1.55;
}
.c12tm-web-prices { margin: 0; }
.c12tm-web-line {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
	margin: 0 0 2px;
	font-family: var(--c12tm-display);
	font-size: 0.9rem;
	font-weight: 500;
	letter-spacing: .5px;
}
.c12tm-web-label { color: var(--c12tm-cream); }
.c12tm-web-price { color: var(--c12tm-gold); }
.c12tm-web-dot { color: var(--c12tm-key); }

.c12tm-web-note {
	margin: 0;
	padding-top: 16px;
	border-top: 1px solid var(--c12tm-key);
	color: var(--c12tm-cream);
	opacity: .7;
	font-size: 0.85rem;
	text-align: right;
}
.c12tm-web-preview,
.c12tm-web-empty {
	padding: 10px 14px;
	border: 1px dashed var(--c12tm-gold);
	border-radius: 8px;
	color: var(--c12tm-gold);
	font-size: 0.9rem;
}
.c12tm-web-empty a { color: inherit; }

/* Columns follow each section's setting in the editor (same as the print menu) */
.c12tm-cols-1 { --c12tm-cols: 1; }
.c12tm-cols-2 { --c12tm-cols: 2; }
.c12tm-cols-3 { --c12tm-cols: 3; }
.c12tm-cols-4 { --c12tm-cols: 4; }
.c12tm-cols-1 .c12tm-web-item { max-width: 72ch; }

@media (max-width: 1199px) {
	.c12tm-cols-4 { --c12tm-cols: 3; }
}
@media (max-width: 1023px) {
	.c12tm-cols-3, .c12tm-cols-4 { --c12tm-cols: 2; }
	.c12tm-web-items { gap: 0 36px; }
}
@media (max-width: 639px) {
	.c12tm-web-items { grid-template-columns: 1fr; }
	.c12tm-web-section { margin-bottom: 3rem; }
	.c12tm-web-jump { gap: 8px; margin-bottom: 2rem; }
	.c12tm-web-jump a { padding: 7px 12px; font-size: 0.7rem; letter-spacing: 1.5px; }
	.c12tm-web-count { display: none; } /* the heading is tight on a phone */
	.c12tm-web-subheading { margin-top: 2rem; font-size: 1.25rem; letter-spacing: 2px; }
}