/*
Theme Name: Menu Ristorante
Theme URI: https://example.it
Author: Flavio
Description: Tema WordPress single-purpose per menù ristorante. Bilingue IT/EN, ACF Pro, hub + pagine per categoria con foto, badge allergeni, lightbox. Twin-ready: configurazione in inc/config.php e palette nelle variabili :root qui sotto.
Version: 1.1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: menu-ristorante
*/

/* ==========================================================================
   1. PALETTE & DESIGN TOKENS  —  edit these to restyle the whole site
   ========================================================================== */
:root {
	/* Colors */
	--c-bg:        #faf9f6;   /* main background */
	--c-text:      #111111;   /* body text */
	--c-muted:     #6b6b66;   /* secondary text */
	--c-accent:    #e5f3f1;   /* sage green */
	--c-accent-dk: #24635a;   /* darker green (hover / prices) */
	--c-tint:      #e1e1e1;   /* warm greige section tint */
	--c-cream:     #eff7f6;   /* cream panel / alternating rows */
	--c-line:      #e3e0d8;   /* hairlines / borders */

	/* Typography */
	--font-head: "Unica One", sans-serif;
	--font-body: "Vollkorn", Georgia, "Times New Roman", serif;

	/* Layout */
	--maxw:        1200px;  /* overall content width */
	--maxw-text:   680px;   /* readable width for dish lists / intro */
	--radius:      14px;
	--gap:         24px;
	--header-h:    84px;   /* used for anchor scroll offset */
	--hero-h:      360px;  /* category hero band height (desktop) */
}

/* ==========================================================================
   2. BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--c-bg);
	color: var(--c-text);
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
body.mr-noscroll { overflow: hidden; }

img { max-width: 100%; height: auto; display: block; }
a { color: var(--c-accent-dk); text-decoration: none; }
a:hover { color: var(--c-text); }

h1, h2, h3, h4 {
	font-family: var(--font-head);
	font-weight: 600;
	line-height: 1.15;
	color: var(--c-text);
	margin: 0 0 .4em;
}

.mr-container { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.mr-center { text-align: center; }

/* ==========================================================================
   3. HEADER
   ========================================================================== */
.site-header {
	border-bottom: 1px solid var(--c-line);
	background: var(--c-bg);
	position: sticky;
	top: 0;
	z-index: 50;
}
.site-header .mr-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-top: 16px;
	padding-bottom: 16px;
}
.site-branding .custom-logo { max-height: 64px; width: auto; }
.site-title-text {
	font-family: var(--font-head);
	font-size: 1.7rem;
	font-weight: 700;
	color: var(--c-text);
	letter-spacing: .01em;
}

.lang-switch {
	display: inline-flex;
	border: 1px solid var(--c-line);
	border-radius: 999px;
	overflow: hidden;
}
.lang-switch button {
	appearance: none;
	border: 0;
	background: transparent;
	color: var(--c-muted);
	font-family: var(--font-body);
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .04em;
	padding: 7px 14px;
	cursor: pointer;
}
.lang-switch button.is-active { background: var(--c-accent); color: #fff; }

/* ==========================================================================
   4. BILINGUAL VISIBILITY  (default = Italian; JS toggles body class)
   ========================================================================== */
.lang-en { display: none; }
body.mr-lang-en .lang-it { display: none; }
body.mr-lang-en .lang-en { display: inline; }
.lang-it.is-block { display: block; }
body.mr-lang-en .lang-en.is-block { display: block; }
body.mr-lang-en .lang-it.is-block { display: none; }

/* ==========================================================================
   5. PAGE INTRO / HERO
   ========================================================================== */
.page-hero { text-align: center; padding: 48px 0 8px; }
.page-hero h1 { font-size: clamp(2.4rem, 6vw, 3.6rem); margin-bottom: .15em; }
.page-hero .intro { max-width: 620px; margin: 0 auto; color: var(--c-muted); }
.accent-rule {
	width: 56px; height: 3px; background: var(--c-accent);
	border: 0; margin: 22px auto 0; border-radius: 3px;
}

/* ==========================================================================
   6. HUB — category cards (with photos)
   ========================================================================== */
.cat-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
	gap: 28px;
	padding: 48px 0 56px;
}
.cat-card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 280px;
	padding: 28px;
	overflow: hidden;
	background: var(--c-cream);
	background-size: cover;
	background-position: center;
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	transition: transform .18s ease, box-shadow .18s ease;
}
.cat-card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0,0,0,.12); }

/* category photo (zooms slightly on hover) */
.cat-card-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
	transition: transform .5s ease;
}
.cat-card:hover .cat-card-img { transform: scale(1.06); }

/* dark shade only on the TOP of photo cards, for title legibility */
.cat-card-shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.cat-card.has-image .cat-card-shade {
	background: linear-gradient(to bottom, rgba(0,0,0,.55) 0%, rgba(0,0,0,.18) 30%, rgba(0,0,0,0) 58%);
}

.cat-card .cat-name {
	position: relative;
	z-index: 2;
	font-family: var(--font-head);
	font-size: 1.9rem;
	font-weight: 600;
	letter-spacing: .01em;
	color: var(--c-text);
	text-align: center;
}
.cat-card.has-image .cat-name {
	color: #fff;
	text-shadow: 0 1px 6px rgba(0,0,0,.45);
}

/* arrow inside a white circle with dark glyph */
.cat-card .cat-arrow {
	position: relative;
	z-index: 2;
	align-self: flex-end;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #fff;
	color: var(--c-text);
	box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.cat-card .cat-arrow svg { display: block; }

/* fallback (no image) cards keep a soft tint + hover green */
.cat-card:not(.has-image):hover { background: var(--c-accent); }
.cat-card:not(.has-image):hover .cat-name { color: #fff; }

.cat-card.cat-card-allergeni { background: var(--c-tint); }
.cat-card.cat-card-allergeni:hover { background: var(--c-accent-dk); }

/* ==========================================================================
   7. CATEGORY PAGE
   ========================================================================== */
.cat-page { padding-bottom: 56px; }

.back-link { display: inline-block; margin: 22px 0 4px; font-size: .9rem; color: var(--c-muted); }
.back-link:hover { color: var(--c-accent-dk); }

.cat-title-block { text-align: center; padding-top: 8px; }
.cat-title-block h1 { font-size: clamp(2rem, 5vw, 3rem); margin: 6px 0 0; }

/* Full-bleed hero image band */
.cat-hero {
	width: 100%;
	height: var(--hero-h);
	margin: 22px 0 8px;
	background-color: var(--c-cream);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.cat-intro {
	max-width: 640px;
	margin: 24px auto 0;
	text-align: center;
	color: var(--c-muted);
}

/* Subcategory anchor nav (pill buttons) */
.subcat-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 26px auto 6px;
}
.subcat-nav-btn {
	border: 1px solid var(--c-accent);
	border-radius: 999px;
	padding: 8px 18px;
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--c-accent-dk);
	background: #fff;
	transition: background .15s ease, color .15s ease;
}
.subcat-nav-btn:hover { background: var(--c-accent); color: #fff; }

.photo-hint {
	text-align: center;
	margin: 18px auto 0;
	color: var(--c-accent-dk);
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
}

/* Free-text note box (before the allergen section) */
.cat-note {
	max-width: var(--maxw-text);
	margin: 40px auto 0;
	padding: 18px 22px;
	background: var(--c-cream);
	border: 1px solid var(--c-line);
	border-left: 4px solid var(--c-accent);
	border-radius: var(--radius);
	color: var(--c-muted);
	font-size: .95rem;
	text-align: center;
}
.cat-note p { margin: 0; }

/* Dish groups — full-width sections with alternating backgrounds */
.subcat { padding: 30px 0; scroll-margin-top: calc(var(--header-h) + 8px); }
.subcat.is-alt { background: var(--c-cream); }

.subcat-title {
	text-align: center;
	font-size: 1.9rem;
	margin: 0 auto 6px;
	color: var(--c-accent-dk);
	text-transform: uppercase;
	letter-spacing: .03em;
}
.subcat-title::after {
	content: "";
	display: block;
	width: 44px; height: 2px;
	background: var(--c-accent);
	margin: 10px auto 0;
	border-radius: 2px;
}

.dish-list { max-width: var(--maxw-text); margin: 0 auto; }

/* Centered dish */
.dish { text-align: center; padding: 16px 0; }
.dish + .dish { border-top: 1px solid color-mix(in srgb, var(--c-line) 50%, transparent); }
.subcat.is-alt .dish + .dish { border-top-color: color-mix(in srgb, var(--c-line) 50%, transparent); }

.dish-name {
	font-family: var(--font-head);
	font-size: 1.4rem;
	font-weight: 600;
	margin: 0;
	letter-spacing: .02em;
	text-transform: uppercase;
}
.dish-name-btn {
	appearance: none;
	border: 0;
	background: transparent;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	color: var(--c-text);
	cursor: pointer;
	padding: 0;
	transition: color .15s ease;
}
.dish-name-btn:hover { color: var(--c-accent-dk); }
.dish-photo-hint { font-size: .7em; margin-left: 6px; opacity: .55; }


.dish-new-badge {
	display: inline-block;
	margin-left: 8px;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--c-accent-dk);
	color: #fff;
	font-family: var(--font-body);
	font-size: .58em;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	vertical-align: middle;
}



.dish-flags { font-size: .7rem; margin-left: 6px; vertical-align: middle; }
.flag-veg   { color: var(--c-accent-dk); }
.flag-vegan { color: var(--c-accent-dk); font-weight: 700; }

.dish-price {
	margin-top: 4px;
	font-family: var(--font-body);
	font-weight: 600;
	color: var(--c-accent-dk);
}

.dish-variants { list-style: none; margin: 6px auto 0; padding: 0; max-width: 360px; }
.dish-variants li {
	display: flex; justify-content: space-between; gap: 14px;
	font-size: .95rem; color: var(--c-muted); padding: 2px 0;
}
.dish-variants .v-price { color: var(--c-accent-dk); font-weight: 600; }

.dish-desc { color: var(--c-muted); font-size: .98rem; margin: 6px auto 0; max-width: 540px; }

.allergen-badges {
	display: flex; flex-wrap: wrap; justify-content: center;
	gap: 5px; margin-top: 10px;
}
.allergen-badge {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 22px; height: 22px; padding: 0 6px;
	font-size: .72rem; font-weight: 600;
	color: var(--c-accent-dk);
	background: #fff; border: 1px solid var(--c-line); border-radius: 999px;
}
.subcat.is-alt .allergen-badge { background: var(--c-bg); }

/* ==========================================================================
   8. LIGHTBOX
   ========================================================================== */
.mr-lightbox {
	position: fixed; inset: 0; z-index: 1000;
	display: none;
	align-items: center; justify-content: center;
	padding: 24px;
	background: rgba(17,17,17,.86);
}
.mr-lightbox.is-open { display: flex; }
.mr-lightbox-figure { margin: 0; max-width: 92vw; max-height: 90vh; text-align: center; }
.mr-lightbox-img {
	max-width: 92vw; max-height: 80vh;
	width: auto; height: auto;
	border-radius: 8px;
	box-shadow: 0 12px 40px rgba(0,0,0,.5);
}
.mr-lightbox-cap {
	margin-top: 14px; color: #fff;
	font-family: var(--font-head); font-size: 1.3rem; letter-spacing: .02em;
}
.mr-lightbox-close {
	position: absolute; top: 16px; right: 20px;
	appearance: none; border: 0; background: transparent;
	color: #fff; font-size: 2.4rem; line-height: 1; cursor: pointer;
}

/* ==========================================================================
   9. ALLERGEN LEGEND
   ========================================================================== */
.allergen-legend { margin-top: 56px; padding: 64px 0 72px; background: var(--c-tint); }
.allergen-legend .lead { max-width: 720px; margin: 0 auto 26px; text-align: center; color: var(--c-muted); font-size: .96rem; }
.legend-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.legend-item { display: flex; gap: 12px; background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); padding: 14px 16px; }
.legend-num {
	flex: 0 0 30px; width: 30px; height: 30px;
	display: flex; align-items: center; justify-content: center;
	border-radius: 999px; background: var(--c-accent); color: #fff;
	font-weight: 700; font-size: .85rem;
}
.legend-body .legend-name { font-weight: 600; }
.legend-body .legend-desc { color: var(--c-muted); font-size: .9rem; }

/* ==========================================================================
   10. FOOTER
   ========================================================================== */
.site-footer { border-top: 1px solid var(--c-line); margin-top: 56px; padding: 32px 0; text-align: center; color: var(--c-muted); font-size: .92rem; }
.site-footer a { color: var(--c-accent-dk); }

/* ==========================================================================
   11. RESPONSIVE
   ========================================================================== */
@media (max-width: 600px) {
	body { font-size: 16px; }
	:root { --hero-h: 220px; --header-h: 72px; }
	.cat-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
	.cat-card { min-height: 150px; padding: 16px; }
	.cat-card .cat-name { font-size: 1.25rem; }
	.dish-name { font-size: 1.2rem; }
	.subcat-title { font-size: 1.5rem; }
}