/* =========================================================================
   LAMAREDA — közös design rendszer
   Színek, tipográfia, fejléc/lábléc, gombok, animációk, reszponzív rács.
   Az egyes oldalsablonok ezt egészítik ki saját, oldal-specifikus <style>
   blokkal (pl. étlap-könyv, borlap-könyv).
   ========================================================================= */

:root {
	/* Márkaszínek - letisztult fekete-fehér alap, arannyal mint egyetlen
	   kiemelőszín (2026.09.08-i módosítás az ügyfél kérésére: "sokkal inkább
	   fekete-fehér, arany kiemelőszínnel" - prémium, modern hangvétel).
	   Nincs hivatalos arculati kézikönyv, ez egy javasolt paletta;
	   könnyen módosítható itt, egy helyen, ha az ügyfél mást szeretne. */
	--color-black: #0a0a0a;
	--color-black-soft: #161616;
	--color-cream: #ffffff;      /* névben "cream", ténylegesen tiszta fehér - lásd fenti megjegyzés */
	--color-cream-dark: #ececec; /* semleges, hideg világosszürke (korábban meleg krém tónus volt) */
	--color-white: #ffffff;
	--color-gold: #c6a463;
	--color-gold-light: #e3cd9c;
	--color-text: #141414;
	--color-text-muted: #6f6f6f;

	--font-heading: 'Cormorant Garamond', 'Times New Roman', serif;
	--font-body: 'Jost', 'Segoe UI', sans-serif;

	--container-width: 1240px;
	--radius: 2px;
	--shadow-soft: 0 20px 60px rgba(10, 10, 10, 0.12);
	--transition: 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* --------------------------- Reset / alap --------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--color-cream);
	color: var(--color-text);
	font-family: var(--font-body);
	font-weight: 300;
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 {
	font-family: var(--font-heading);
	font-weight: 600;
	line-height: 1.15;
	margin: 0 0 0.5em;
	color: var(--color-black);
}
h1 { font-size: clamp(2.4rem, 5vw, 4.2rem); }
h2 { font-size: clamp(1.9rem, 3.4vw, 3rem); }
h3 { font-size: clamp(1.3rem, 2vw, 1.7rem); }
p { margin: 0 0 1em; }
.eyebrow {
	display: inline-block;
	font-family: var(--font-body);
	letter-spacing: 0.28em;
	text-transform: uppercase;
	font-size: 0.72rem;
	color: var(--color-gold);
	margin-bottom: 0.9em;
}
.container { max-width: var(--container-width); margin-inline: auto; padding-inline: 24px; }
.section { padding-block: clamp(56px, 9vw, 120px); }
.section--dark { background: var(--color-black); color: var(--color-cream-dark); }
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--color-white); }
.text-center { text-align: center; }
.visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
	position: absolute; left: -999px; top: 0; background: var(--color-gold);
	color: var(--color-black); padding: 10px 18px; z-index: 10000;
}
.skip-link:focus { left: 12px; top: 12px; }

/* --------------------------- Gombok --------------------------- */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 30px;
	font-family: var(--font-body);
	font-size: 0.85rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	border: 1px solid var(--color-gold);
	border-radius: var(--radius);
	background: transparent;
	color: var(--color-black);
	cursor: pointer;
	transition: background var(--transition), color var(--transition), transform var(--transition);
}
.btn:hover, .btn:focus-visible { background: var(--color-gold); color: var(--color-black); transform: translateY(-2px); }
.btn--solid { background: var(--color-black); color: var(--color-cream); border-color: var(--color-black); }
.btn--solid:hover { background: var(--color-gold); border-color: var(--color-gold); color: var(--color-black); }
.btn--ghost-light { border-color: var(--color-cream-dark); color: var(--color-cream); }
.btn--phone { font-size: 0.95rem; padding: 16px 34px; }

/* Lebegő, feltűnő telefon CTA - mivel nincs foglalási form, ez a fő
   konverziós pont az egész oldalon, ezért mindig látható. */
.floating-call {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 900;
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--color-black);
	color: var(--color-gold-light);
	border: 1px solid var(--color-gold);
	padding: 14px 22px;
	border-radius: 999px;
	box-shadow: var(--shadow-soft);
	font-family: var(--font-body);
	font-size: 0.95rem;
	letter-spacing: 0.03em;
	transition: transform var(--transition), background var(--transition), color var(--transition);
}
.floating-call:hover { transform: translateY(-3px) scale(1.03); background: var(--color-gold); color: var(--color-black); }
.floating-call__icon { font-size: 1.2rem; display: flex; }
.floating-call__icon svg { width: 1.2rem; height: 1.2rem; display: block; }
@media (max-width: 600px) {
	.floating-call { right: 12px; bottom: 12px; padding: 12px 16px; font-size: 0.85rem; }
	.floating-call__text { display: none; }
}

/* --------------------------- Fejléc / navigáció --------------------------- */
.site-header {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 32px;
	background: rgba(10, 10, 10, 0.0);
	transition: background var(--transition), padding var(--transition), box-shadow var(--transition);
}
.site-header.is-scrolled {
	background: rgba(10, 10, 10, 0.92);
	backdrop-filter: blur(6px);
	padding: 10px 32px;
	box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}
.site-header__logo { display: flex; align-items: center; gap: 12px; }
.site-header__logo img {
	height: 46px;
	width: auto;
	transition: height var(--transition), margin var(--transition);
}
/* Asztali nézetben jóval nagyobb, kicsit a fejléc sávja alá "lelógó" logó -
   negatív margóval, hogy a flex-sor magassága ne nőjön meg vele együtt,
   így a logó ténylegesen túlnyúlik a fejléc alsó szélén. Görgetéskor
   (.is-scrolled) visszavált a kompakt, teljesen a sávon belüli méretre. */
@media (min-width: 961px) {
	.site-header__logo img { height: 92px; margin: -14px 0 -30px; }
}
.site-header.is-scrolled .site-header__logo img { height: 36px; margin: 0; }
.site-header__logo-text {
	font-family: var(--font-heading);
	color: var(--color-white);
	font-size: 1.4rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.main-nav { display: flex; align-items: center; gap: 38px; }
.main-nav__list { display: flex; gap: 30px; }
.main-nav__list a {
	color: var(--color-cream-dark);
	font-size: 1.02rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	position: relative;
	padding-bottom: 4px;
}
.main-nav__list a::after {
	content: '';
	position: absolute; left: 0; right: 100%; bottom: 0;
	height: 1px; background: var(--color-gold);
	transition: right var(--transition);
}
.main-nav__list a:hover::after,
.main-nav__list a[aria-current="page"]::after { right: 0; }
.main-nav__list a[aria-current="page"] { color: var(--color-gold-light); }

.lang-switch { display: flex; gap: 6px; }
.lang-switch button {
	background: none; border: 1px solid rgba(255, 255, 255,0.35);
	color: var(--color-cream-dark); font-size: 0.72rem; letter-spacing: 0.08em;
	padding: 5px 10px; border-radius: var(--radius); cursor: pointer;
	transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.lang-switch button[aria-pressed="true"] {
	background: var(--color-gold); color: var(--color-black); border-color: var(--color-gold);
}

.nav-toggle {
	display: none;
	flex-direction: column;
	gap: 5px;
	background: none; border: none; cursor: pointer; padding: 6px;
}
.nav-toggle span { width: 26px; height: 2px; background: var(--color-cream); transition: transform var(--transition), opacity var(--transition); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Duplán írt osztály + !important: ugyanaz a védelem, mint a
   .menu-book__arrow-nál - biztosan asztali nézetben tűnjön el ez a kép,
   akármilyen általánosabb szabály (pl. szülőtéma) próbálná megjeleníteni. */
.main-nav__logo.main-nav__logo { display: none !important; }

@media (max-width: 960px) {
	.nav-toggle { display: flex; }
	.main-nav {
		position: fixed; inset: 0 0 0 auto; width: min(340px, 84vw);
		background: var(--color-black-soft);
		flex-direction: column; align-items: stretch;
		padding: 36px 0 40px;
		transform: translateX(100%);
		transition: transform var(--transition);
		gap: 34px;
		overflow-y: auto;
	}
	.main-nav.is-open { transform: translateX(0); }

	/* A LAMAREDA logó megjelenik a kinyitott mobilmenü panel tetején. */
	.main-nav__logo.main-nav__logo { display: block !important; padding: 0 32px; }
	.main-nav__logo img { height: 34px; width: auto; }

	.main-nav__list { flex-direction: column; gap: 0; width: 100%; }
	/* A teljes sor kattintható legyen, ne csak a felirat szövege. */
	.main-nav__list li { width: 100%; }
	.main-nav__list a {
		display: block;
		width: 100%;
		padding: 14px 32px;
		font-size: 1.15rem;
	}
	.main-nav__list a::after { display: none; }
	.main-nav__list a[aria-current="page"] { background: rgba(198, 164, 99, 0.12); }
	.lang-switch { padding: 0 32px; }
}

/* --------------------------- Hero --------------------------- */
.hero {
	position: relative;
	/* Pontosan a képernyő (viewport) magasságával egyezzen meg - se nem
	   rövidebb, se nem hosszabb -, hogy görgetés nélkül csak a hero
	   látszódjon, a következő szekcióból semmi. 100svh = "small viewport
	   height", ami a mobil böngészők eltűnő cím/eszköztárát is figyelembe
	   veszi; a 100vh/100dvh tartalék a régebbi böngészőknek szól. */
	height: 100vh;
	height: 100dvh;
	height: 100svh;
	max-height: 100svh;
	display: flex;
	align-items: flex-end;
	color: var(--color-white);
	overflow: hidden;
}
.hero .tp-img { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.hero::after {
	content: '';
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(10,10,10,0.35) 0%, rgba(10,10,10,0.35) 40%, rgba(10,10,10,0.92) 100%);
	z-index: 1;
}
.hero__content { position: relative; z-index: 2; padding: 0 32px 90px; max-width: 900px; }

/* Alacsony (fekvő mobil) viewportokon összébb húzzuk a hero tartalmát,
   hogy a fix magasságú hero-n belül maradjon minden, kivágás nélkül. */
@media (max-height: 700px) {
	.hero__content { padding-bottom: 40px; }
	.hero__content h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); }
	.hero__badges, .hero__actions { margin-top: 16px; }
	.scroll-cue { display: none; }
}
.hero__badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.hero__badge {
	border: 1px solid var(--color-gold-light);
	color: var(--color-gold-light);
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 6px 14px;
	border-radius: 999px;
}
.hero__actions { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 34px; }
.scroll-cue {
	position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
	z-index: 2; color: var(--color-cream-dark); font-size: 0.7rem;
	letter-spacing: 0.2em; text-transform: uppercase; display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.scroll-cue__line { width: 1px; height: 40px; background: linear-gradient(var(--color-gold), transparent); animation: scrollCue 2.2s infinite; }
@keyframes scrollCue { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* --------------------------- Kártyák / rácsok --------------------------- */
.grid { display: grid; gap: 30px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

.dish-card { background: var(--color-white); box-shadow: var(--shadow-soft); border-radius: var(--radius); overflow: hidden; }
.dish-card__media { aspect-ratio: 4/3; }
.dish-card__media .tp-img { width: 100%; height: 100%; }
.dish-card__body { padding: 22px 24px 26px; }
.dish-card__price { color: var(--color-gold); font-family: var(--font-heading); font-size: 1.3rem; }

.award-card {
	border: 1px solid var(--color-cream-dark);
	padding: 26px 22px;
	text-align: center;
	background: var(--color-white);
}
.award-card__year { font-family: var(--font-heading); font-size: 2rem; color: var(--color-gold); }

/* Allergén chip-ek (a napi/heti ajánlatoknál és az étlap tételeknél) */
.allergen-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.allergen-tags__item {
	display: inline-flex; align-items: center; gap: 4px;
	font-size: 0.68rem; letter-spacing: 0.03em; text-transform: uppercase;
	background: var(--color-cream-dark); color: var(--color-text-muted);
	padding: 4px 9px; border-radius: 999px;
}
.allergen-tags__icon { font-size: 0.85rem; line-height: 1; }
.menu-list__item .allergen-tags { margin-top: 6px; }

/* --------------------------- Kép-helper stílusok --------------------------- */
.tp-img { object-fit: cover; width: 100%; height: 100%; }
.tp-img--placeholder {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 8px; text-align: center; padding: 20px;
	background: repeating-linear-gradient(45deg, #f2f2f2, #f2f2f2 10px, #e6e6e6 10px, #e6e6e6 20px);
	color: var(--color-text-muted);
	border: 1px dashed var(--color-gold);
	min-height: 160px;
}
.tp-img__icon { font-size: 1.8rem; }
.tp-img__label { font-weight: 500; color: var(--color-text); }
.tp-img__hint { font-size: 0.72rem; line-height: 1.4; }

/* --------------------------- Lábléc --------------------------- */
.site-footer { background: var(--color-black); color: var(--color-cream-dark); padding-block: 70px 30px; }
.site-footer h4 { color: var(--color-gold-light); font-size: 1rem; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 18px; }
.site-footer a:hover { color: var(--color-gold-light); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 50px; align-items: start; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; row-gap: 46px; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
/* Grid-oszlopok alapértelmezett min-width:auto-ja miatt egy hosszú, nem
   törhető szöveg (pl. e-mail cím) szélesebbre tudja nyomni a saját
   oszlopát a rendelkezésre álló helynél - emiatt "folytak össze" a lábléc
   oszlopai keskeny (mobil) képernyőn. A min-width:0 + szótörés ezt zárja ki. */
.footer-grid > div, .footer-grid > .footer-about { min-width: 0; }
.footer-grid li, .footer-grid p, .footer-grid a { overflow-wrap: break-word; word-break: break-word; }
.footer-grid li { margin-bottom: 10px; font-size: 0.92rem; }
.footer-grid p { margin-bottom: 0; }

/* A logó eredeti fájlja egy nagy, saját fekete hátterű "kártya" - lábléc
   közegben csak kis, jelvényszerű méretben helyes, különben elnyeli a
   fekete hátteret és "hova is tettük" hatást kelt. */
.footer-logo { margin-bottom: 20px; }
.footer-logo .tp-img { max-width: 84px; height: auto; }

.footer-about p { margin-bottom: 20px; }
.social-row { display: flex; gap: 14px; margin-top: 0; }
.social-row a {
	width: 38px; height: 38px; border: 1px solid rgba(255, 255, 255,0.3); border-radius: 50%;
	display: flex; align-items: center; justify-content: center; transition: border-color var(--transition), background var(--transition);
	flex-shrink: 0;
}
.social-row a:hover { border-color: var(--color-gold); background: var(--color-gold); color: var(--color-black); }
.footer-bottom {
	margin-top: 50px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255,0.12);
	display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px 24px; font-size: 0.78rem; color: var(--color-text-muted);
}
.footer-bottom p { margin-bottom: 0; }
.footer-bottom ul { display: flex; flex-wrap: wrap; gap: 8px 18px; }

/* Nagyon diszkrét, kis pötty a lábléc jobb szélén - ide kattintva jut el a
   kezelő a WordPress bejelentkező oldalára. Szándékosan nincs felirat/ikon,
   nem hívja fel magára a figyelmet, de mindig elérhető. */
.footer-login-dot {
	font-size: 1.1rem;
	line-height: 1;
	color: rgba(255, 255, 255, 0.18);
	transition: color var(--transition);
	flex-shrink: 0;
}
.footer-login-dot:hover, .footer-login-dot:focus-visible { color: var(--color-gold); }

/* Mobilon a lábléc alsó sora (copyright + jogi linkek) egymás alá kerül,
   így semmi nem csúszhat/folyhat össze keskeny kijelzőn. */
@media (max-width: 560px) {
	.footer-bottom { flex-direction: column; align-items: flex-start; gap: 14px; }
	.footer-bottom ul { row-gap: 8px; }
	.social-row { flex-wrap: wrap; }
}

.payment-icons__label { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); margin: 24px 0 16px; }
.payment-icons { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.payment-icons .tp-img {
	height: 26px; width: auto; max-width: 60px;
	background: #ffffff; border-radius: 3px; padding: 4px 7px;
	object-fit: contain;
}
.payment-icons .tp-img--placeholder {
	height: 26px; width: 54px; min-height: 0; padding: 2px; font-size: 0.42rem;
	background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.25); color: var(--color-text-muted);
}
.payment-icons .tp-img__icon { display: none; }
.payment-icons .tp-img__hint { display: none; }
.payment-icons .tp-img__label { font-size: 0.42rem; line-height: 1.1; }

/* --------------------------- Belépő / scroll animációk --------------------------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s ease, transform 0.8s ease; transition-delay: var(--reveal-delay, 0s); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.reveal { opacity: 1; transform: none; transition: none; }
	.scroll-cue__line { animation: none; }
	* { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* --------------------------- Étlap / Borlap / Napi menü "könyv" komponens ---------------------------
   Megosztott stílus, mert az Étlap, Borlap és Napi/heti menü oldal is
   ugyanezt a "lapozható könyv" mintát használja - egy helyen karbantartva. */
.book-switch { display: inline-flex; gap: 4px; margin-top: 24px; background: rgba(255, 255, 255,0.08); border-radius: 999px; padding: 4px; }
.book-switch__link { padding: 9px 20px; border-radius: 999px; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-cream-dark); }
.book-switch__link.is-active, .book-switch__link:hover { background: var(--color-gold); color: var(--color-black); }

.menu-book { max-width: 900px; margin-inline: auto; background: var(--color-white); box-shadow: var(--shadow-soft); border-radius: 4px; padding: 10px; }
.menu-book__tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 16px 16px 0; justify-content: center; }
.menu-book__tab {
	background: none; border: 1px solid var(--color-cream-dark); padding: 8px 16px; border-radius: 999px;
	font-family: var(--font-body); font-size: 0.76rem; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer;
	color: var(--color-text-muted); transition: background var(--transition), color var(--transition);
}
.menu-book__tab.is-active { background: var(--color-black); color: var(--color-white); border-color: var(--color-black); }

.menu-book__pages { position: relative; padding: 40px clamp(20px, 5vw, 70px) 20px; min-height: 420px; perspective: 1600px; }
.menu-book__page {
	display: none;
	/* Az ügyfél kérésére a korábbi szürkés radial-gradient háttér eltávolítva -
	   sima, egyenletes fehér lap maradt. */
	background: var(--color-white);
	animation: pageIn 0.5s ease;
}
.menu-book__page.is-active { display: block; }
@keyframes pageIn { from { opacity: 0; transform: rotateY(-8deg) translateX(-16px); } to { opacity: 1; transform: rotateY(0) translateX(0); } }
.menu-book__page h2 { text-align: center; margin-bottom: 30px; }

.menu-list__item { display: flex; align-items: baseline; gap: 10px; padding: 14px 0; border-bottom: 1px dotted var(--color-cream-dark); }
.menu-list__name { font-family: var(--font-heading); font-size: 1.15rem; }
.menu-list__dots { flex: 1; border-bottom: 1px dotted var(--color-text-muted); opacity: 0.4; transform: translateY(-4px); }
.menu-list__price { color: var(--color-gold); font-weight: 500; white-space: nowrap; }

.menu-book__nav { display: flex; align-items: center; justify-content: center; gap: 20px; padding: 10px 0 20px; }
/* A ".menu-book__arrow" osztályt szándékosan duplázva írjuk (specifikusság-
   növelés) + !important-tel zárjuk le a kritikus tulajdonságokat, mert a
   szülőtéma (Astra) / WP globális stílusok egy saját <button> stílust (kék
   háttér, ikonfont) írtak felül rajta - ez okozta, hogy az egyik nyíl kék
   ovális gombként, a másik üres arany körként (nyíl-glifa nélkül) jelent
   meg. A font-family explicit felülírása azért is fontos, mert egy
   ikonfont a "&#8592;/&#8594;" Unicode-pontokat egészen más glifekre
   képezhette le. */
.menu-book__arrow.menu-book__arrow {
	-webkit-appearance: none !important;
	appearance: none !important;
	width: 42px !important; height: 42px !important;
	border-radius: 50% !important;
	border: 1px solid var(--color-gold) !important;
	background: transparent !important;
	color: var(--color-black) !important;
	box-shadow: none !important;
	font-family: var(--font-body), Arial, sans-serif !important;
	font-size: 1.1rem !important;
	line-height: 1 !important;
	cursor: pointer;
	transition: background var(--transition), color var(--transition);
}
.menu-book__arrow.menu-book__arrow:hover,
.menu-book__arrow.menu-book__arrow:focus-visible { background: var(--color-gold) !important; color: var(--color-black) !important; }

@media (max-width: 600px) {
	.menu-book__pages { min-height: 0; padding: 26px 16px 10px; }
	.menu-list__name { font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
	.menu-book__page { animation: none; }
}

/* --------------------------- Oldal-fejléc (belső oldalakhoz) ---------------------------
   2026.09.08: az ügyfél kérésére kb. felére csökkentve a korábbi (160px/70px)
   magassághoz képest - lásd .page-hero padding lent. */
.page-hero {
	position: relative;
	padding: clamp(88px, 15vw, 130px) 0 clamp(28px, 5vw, 42px);
	background: var(--color-black);
	color: var(--color-cream);
	text-align: center;
	overflow: hidden;
}
/* FONTOS FIX: az általános "h1,h2,h3,h4 { color: var(--color-black); }"
   szabály (lásd fent, Reset/alap szekció) korábban felülírta a page-hero
   örökölt fehér szövegszínét, ezért a cím feketén, feketén (láthatatlanul)
   jelent meg a sötét fejlécen - ez a szabály explicit fehérre állítja. */
.page-hero h1 { color: var(--color-white); }
.page-hero .eyebrow { color: var(--color-gold-light); }
.breadcrumbs { font-size: 0.78rem; color: var(--color-text-muted); margin-top: 10px; }
.breadcrumbs a:hover { color: var(--color-gold); }
/* FONTOS FIX: a ".breadcrumbs" a projektben ténylegesen egy rövid alcím-
   szövegre van használva (pl. "Az árak az ÁFA-t tartalmazzák..."), MINDIG a
   sötét .page-hero-n belül - a fenti szürke (--color-text-muted, világos
   háttérre tervezett) szín ott alig látható, kontrasztja túl gyenge. Itt
   világos, jól olvasható színre váltjuk, ugyanúgy, mint a page-hero többi
   szövege. */
.page-hero .breadcrumbs { color: var(--color-cream-dark); opacity: 0.9; }
.page-hero .breadcrumbs a:hover { color: var(--color-gold-light); }

/* Étlap / Borlap / Napi menü fejlécei: háttérkép, erős sötét overlay-jel,
   hogy a fehér/arany szöveg mindenképp jól olvasható maradjon a fotó felett. */
.page-hero--photo.page-hero--photo {
	background-size: cover !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
}
.page-hero--photo::before {
	content: '';
	position: absolute; inset: 0;
	background: rgba(8, 8, 8, 0.82);
	z-index: 0;
}
.page-hero--photo .container { position: relative; z-index: 1; }

/* "Vissza" gomb - valódi böngésző-előzményt használ (lásd main.js), nem
   fixen a főoldalra mutat. Minden oldal-fejléc (page-hero) tartalmában, az
   oldal címe (és az esetleges alcím/váltó) alatt jelenik meg, a hero többi
   tartalmával együtt középre igazítva - konzisztensen minden belső oldalon. */
.page-back {
	/* display:flex (nem inline-flex) + fit-content szélesség -> a gomb
	   mindig saját, külön sorba kerül (sose álljon egy vonalban pl. az
	   Étlap/Borlap/Napi menü váltóval), és a margin:auto középre igazítja,
	   ugyanúgy, mint a hero többi, középre rendezett tartalmát. */
	display: flex;
	width: fit-content;
	align-items: center;
	gap: 8px;
	margin: 22px auto 0;
	background: rgba(255, 255, 255, 0.08);
	color: var(--color-cream);
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 999px;
	padding: 9px 18px 9px 14px;
	font-family: var(--font-body);
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.page-back:hover { background: var(--color-gold); color: var(--color-black); border-color: var(--color-gold); }
.page-back__arrow { font-size: 1rem; }

/* --------------------------- Galéria lightbox (vanilla JS, lásd main.js) --------------------------- */
.gallery-item { cursor: zoom-in; }
.lamareda-lightbox {
	position: fixed; inset: 0; z-index: 2000;
	background: rgba(6, 6, 6, 0.94);
	display: flex; align-items: center; justify-content: center;
	padding: 40px;
	opacity: 0; visibility: hidden;
	transition: opacity var(--transition);
}
.lamareda-lightbox.is-open { opacity: 1; visibility: visible; }
.lamareda-lightbox__img { max-width: min(1100px, 92vw); max-height: 86vh; object-fit: contain; box-shadow: var(--shadow-soft); }
.lamareda-lightbox__caption { position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; color: var(--color-cream-dark); font-size: 0.85rem; }
.lamareda-lightbox__close,
.lamareda-lightbox__nav {
	position: absolute;
	background: rgba(255,255,255,0.08);
	border: 1px solid rgba(255,255,255,0.3);
	color: var(--color-white);
	border-radius: 50%;
	width: 46px; height: 46px;
	display: flex; align-items: center; justify-content: center;
	font-size: 1.3rem;
	cursor: pointer;
	transition: background var(--transition), color var(--transition);
}
.lamareda-lightbox__close:hover,
.lamareda-lightbox__nav:hover { background: var(--color-gold); color: var(--color-black); }
.lamareda-lightbox__close { top: 24px; right: 24px; }
.lamareda-lightbox__nav--prev { left: 24px; top: 50%; transform: translateY(-50%); }
.lamareda-lightbox__nav--next { right: 24px; top: 50%; transform: translateY(-50%); }
@media (max-width: 700px) {
	.lamareda-lightbox { padding: 16px; }
	.lamareda-lightbox__close, .lamareda-lightbox__nav { width: 38px; height: 38px; font-size: 1.05rem; }
	.lamareda-lightbox__close { top: 12px; right: 12px; }
	.lamareda-lightbox__nav--prev { left: 8px; }
	.lamareda-lightbox__nav--next { right: 8px; }
}