/*
Theme Name: L'Odore di Napoli
Theme URI: https://lodoredinapoli.hu
Author: Botond Rozmann
Description: Egyedi WordPress téma a L'Odore di Napoli Ristorante (Szombathely) számára. Nincs page builder, kézzel írt PHP-téma.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: lodore-di-napoli
*/

/* -----------------------------------------------------------
   1. Design tokens (Rozmann András design-emailje, 2026-07-24)
----------------------------------------------------------- */
:root {
	--color-bg: #151515;
	--color-text: #c8c8c8;
	--color-text-muted: #b4b4b4;
	--color-white: #ffffff;
	--color-border: rgba(255, 255, 255, 0.25);

	--font-heading: "Playfair Display", serif;
	--font-body: "Raleway", sans-serif;

	--weight-h1: 800; /* Extrabold */
	--weight-h2: 700; /* Bold */
	--weight-body: 600; /* Semibold */

	--container-width: 1400px;
	--ldn-gap: 2rem;

	/* Globális betűméret-szorzók — admin: Beállítások → Betűméretek
	   (inc/text-scale-settings.php). Ezek az alapértelmezések (1.08),
	   ha az admin oldal még nincs kitöltve; a functions.php a tényleges
	   (mentett) értékkel felülírja inline stílusban. */
	--ldn-h2-scale: 1.08;
	--ldn-h3-scale: 1.08;
	--ldn-h4-scale: 1.08;
	--ldn-body-scale: 1.08;
}

/* -----------------------------------------------------------
   2. Reset / alapok
----------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-body);
	font-weight: var(--weight-body);
	font-size: 16px;
	line-height: 1.7;
	overflow-x: hidden;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

h1,
h2,
h3 {
	font-family: var(--font-heading);
	color: var(--color-white);
	margin: 0 0 1rem;
	line-height: 1.2;
}

h1 {
	font-weight: var(--weight-h1);
	font-size: clamp(2rem, 4vw, 3.25rem);
}

h2,
h3 {
	font-weight: var(--weight-h2);
}

h2 {
	font-size: calc(clamp(1.2rem, 2vw, 1.7rem) * var(--ldn-h2-scale, 1.08));
}

h4,
h5,
h6,
label,
input,
textarea,
select,
button {
	font-family: var(--font-body);
	font-weight: var(--weight-body);
}

/* Jelenleg nincs H4 a témában használatban — a méret admin-szorzóhoz
   kötve, hogy a Beállítások → Betűméretek csúszka készen álljon, ha
   később mégis bekerülne. */
h4 {
	font-size: calc(1.3rem * var(--ldn-h4-scale, 1.08));
}

.container {
	width: 100%;
	max-width: var(--container-width);
	margin-inline: auto;
	padding-inline: 1.5rem;
}

.section {
	padding: 3rem 0;
}

.section--tight {
	padding: 1.75rem 0;
}

.section-title {
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: 2.75rem;
	position: relative;
	font-size: calc(clamp(1.2rem, 2vw, 1.7rem) * var(--ldn-h2-scale, 1.08));
}

.section-title::before,
.section-title::after {
	content: "–";
	margin: 0 0.75rem;
	color: var(--color-text-muted);
}

.section-title--plain::before,
.section-title--plain::after {
	content: none;
}

.section-title--lined::before,
.section-title--lined::after {
	content: "";
	display: inline-block;
	width: 2.5rem;
	height: 1px;
	background: var(--color-text-muted);
	vertical-align: middle;
	margin: 0 1rem;
}

.section-title-mark {
	width: 1px;
	height: 2rem;
	background: var(--color-border);
	margin: 0 auto 0.75rem;
}

.section-divider {
	width: 1px;
	height: 2.5rem;
	background: var(--color-border);
	margin: 0 auto;
}

.btn {
	display: inline-block;
	background: var(--color-white);
	color: var(--color-bg);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 0.9rem 2rem;
	border: none;
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.btn:hover {
	opacity: 0.85;
}

.btn--outline {
	background: transparent;
	color: var(--color-white);
	border: 1px dashed var(--color-border);
	border-radius: 999px;
}

/* -----------------------------------------------------------
   3. Fejléc / navigáció
----------------------------------------------------------- */
.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 50;
	padding: 1.5rem 0;
	background-color: transparent;
	box-shadow: none;
	transition: background-color 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease;
}

/* A teteje mindig fix 0.6rem, alul 0 — maga a logó-fájl (SVG) belsejében
   van egy kör körüli átlátszó margó (kb. 20px a 100px-es méretnél, ez
   MAGÁBAN A KÉPBEN van, nem CSS-térköz), ami miatt a doboz alja és a
   ténylegesen látható kör alja között marad egy rés, amit a padding
   (sosem lehet negatív) nem tud kompenzálni. */
.site-header.is-scrolled {
	padding: 0.6rem 0 0;
	background-color: #101010;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

/* Ez viszont MARGIN, ami lehet negatív — admin csúszkával állítható
   (Beállítások → Fejléc, lásd inc/header-settings.php). Negatív érték
   "belehúzza" a fekete hátteret a logóképben lévő átlátszó margóba,
   így a háttér alja ténylegesen a LÁTHATÓ kör aljáig érhet, nem csak a
   kép dobozának aljáig. A logó/nav pozícióját nem mozgatja — csakis a
   header teljes (háttérrel együtt látszó) magasságát. */
.site-header.is-scrolled .site-header__inner {
	margin-bottom: var(--ldn-header-scrolled-bottom, 5px);
}

.site-header__inner {
	display: flex;
	align-items: center;
	gap: 1.75rem;
	flex-wrap: wrap;
}

.site-logo {
	flex: 0 0 auto;
}

.main-nav--left {
	flex: 1 1 0;
	display: flex;
	justify-content: flex-end;
	min-width: 0;
}

.nav-right-group {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 1.75rem;
	min-width: 0;
}

.main-nav ul {
	display: flex;
	gap: 1.75rem;
	align-items: center;
	flex-wrap: wrap;
}

.main-nav a {
	font-family: var(--font-heading);
	text-transform: uppercase;
	font-size: 1.4rem;
	letter-spacing: 0.02em;
	font-weight: 800;
	line-height: 1;
	color: var(--color-white);
}

.main-nav a:hover {
	color: var(--color-text-muted);
}

.site-logo img {
	width: 170px;
	height: 170px;
	transition: width 0.3s ease, height 0.3s ease;
}

.site-header.is-scrolled .site-logo img {
	width: var(--ldn-header-scrolled-logo, 52px);
	height: var(--ldn-header-scrolled-logo, 52px);
}


.social-icons {
	display: flex;
	gap: 0.9rem;
	align-items: center;
}

.social-icons a {
	font-size: 0.85rem;
	color: var(--color-white);
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	line-height: 1;
	transition: color 0.2s ease, transform 0.2s ease;
}

.social-icons a:hover {
	color: var(--color-text-muted);
	transform: translateY(-2px);
}

.social-icons svg {
	width: 30px;
	height: 30px;
}

.nav-toggle {
	display: none;
	position: relative;
	width: 44px;
	height: 44px;
	border: none;
	background: none;
	cursor: pointer;
	flex: 0 0 auto;
}

/* Két csík, egymástól +-6px-re a gomb függőleges közepétől — nyitáskor
   mindkettő a középpontba forog, keresztbe, "X" alakot formálva. */
.nav-toggle span {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 26px;
	height: 2px;
	background: var(--color-white);
	transform: translate(-50%, calc(-50% - 6px));
	transition: transform 0.3s ease;
}

.nav-toggle span:nth-child(2) {
	transform: translate(-50%, calc(-50% + 6px));
}

.nav-toggle.is-active span:nth-child(1) {
	transform: translate(-50%, -50%) rotate(45deg);
}

.nav-toggle.is-active span:nth-child(2) {
	transform: translate(-50%, -50%) rotate(-45deg);
}

/* Teljes képernyős, oldalról becsúszó mobilmenü — a háttere a fejléc
   MÖGÖTT ér véget-kezdődik (z-index a fejlécnél alacsonyabb), így a
   fejléc saját (nyitva lévő menünél is átlátszó) sávja mögött is ez a
   háttér látszik, nincs átlátszó rés a logó/X gomb sorában. */
.mobile-nav {
	position: fixed;
	inset: 0;
	z-index: 40;
	background: var(--color-bg);
	overflow-y: auto;
	transform: translateX(100%);
	transition: transform 0.35s ease;
	pointer-events: none;
}

.mobile-nav.is-open {
	transform: translateX(0);
	pointer-events: auto;
}

/* Hero nélküli oldalak (pl. a Blog-lista aloldal, template-elementor-
   full.php) — a fix pozíciós fejléc (lásd fent) máshol a Hero saját
   padding-top-ja miatt nem lóg rá a tartalomra, itt viszont nincs ilyen
   elem, ezért a #main-content-nek saját felső térközt kell adni. Ez az
   érték a KOMPAKT (".site-header--compact-start", lásd lent) fejléc-
   magassághoz igazodik, nem a Hero-oldalak nagy, átlátszó fejlécéhez —
   hero-fotó nélkül az a nagy fejléc csak egy indokolatlan, hatalmas
   sötét sávnak tűnne a tartalom fölött. */
.main-content--no-hero {
	padding-top: 6rem;
}

/* Ugyanezen (hero nélküli) oldalakon a fejléc rögtön a "görgetett"
   kompakt állapotban induljon (lásd ".site-header.is-scrolled" fent) —
   a header.php ".site-header--compact-start" osztályt ad hozzá, ha az
   aktuális oldal a "template-elementor-full.php" sablont használja. */
.site-header--compact-start {
	padding: 0.6rem 0 0;
	background-color: #101010;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

.site-header--compact-start .site-header__inner {
	margin-bottom: var(--ldn-header-scrolled-bottom, 5px);
}

.site-header--compact-start .site-logo img {
	width: var(--ldn-header-scrolled-logo, 52px);
	height: var(--ldn-header-scrolled-logo, 52px);
}

@media (max-width: 900px) {
	.site-header__inner {
		justify-content: space-between;
		flex-wrap: nowrap;
	}

	.site-logo img {
		width: 120px;
		height: 120px;
	}

	.main-nav--left,
	.nav-right-group {
		display: none;
	}

	.nav-toggle {
		display: flex;
	}

	.mobile-nav {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 6rem 1.5rem 2.5rem;
	}

	/* A "primary_left" és "primary_right" menü két külön <ul>-t ad — ha
	   mindkettő saját flex-gap-et kap, a kettő HATÁRÁN (Események/Galéria
	   között) nincs gap, csak a böngésző alap ul-margója érvényesül, ami
	   kisebb/más, mint a szándékolt 1.5rem. A "display:contents" miatt a
	   <li>-k közvetlenül a .mobile-nav__menu flex-gyerekei lesznek, így
	   MINDEN elem köze — a két <ul> határán is — ugyanaz az 1.5rem gap. */
	.mobile-nav__menu {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 1.5rem;
	}

	.mobile-nav__menu ul {
		display: contents;
	}

	.mobile-nav__socials {
		justify-content: center;
		margin-top: 2rem;
	}
}

/* Köztes tartomány (fektetett tablet, kisebb laptop-ablak) — a
   hamburger-menü csak 900px alatt lép életbe, de az asztali menüsor
   (RÓLUNK…KAPCSOLAT + logó + social ikonok) 900–1400px között nem fér ki
   egy sorba, és csúnyán 2 sorra törik. Kisebb betűméret/rés/logó ebben a
   sávban visszatereli egy sorba, anélkül hogy a hamburger-menü
   küszöbértékéhez (900px) hozzá kellene nyúlni. */
@media (min-width: 901px) and (max-width: 1400px) {
	.site-logo img {
		width: 90px;
		height: 90px;
	}

	.site-header__inner,
	.main-nav ul,
	.nav-right-group {
		gap: 0.65rem;
	}

	.main-nav a {
		font-size: 1rem;
	}
}

/* -----------------------------------------------------------
   4. Hero
----------------------------------------------------------- */
.hero {
	position: relative;
	min-height: 85vh;
	display: flex;
	flex-direction: column;
	padding-top: 5.5rem;
	padding-bottom: 2.5rem;
}

/* A WP admin sáv (bejelentkezve) lefelé tolja az oldalt — enélkül a
   85vh-s hero alja (a foglalás-form) lecsúszna a látható területről. */
body.admin-bar .hero {
	min-height: calc(85vh - 32px);
}

@media (max-width: 782px) {
	body.admin-bar .hero {
		min-height: calc(85vh - 46px);
	}
}

/* Mobilon a fejléc logója kisebb (lásd .site-logo img fentebb), ezért
   kevesebb felső hely is elég a hero tartalmának. */
@media (max-width: 900px) {
	.hero {
		padding-top: 3.5rem;
	}
}

/* Az Elementor saját alap-CSS-e (frontend.min.css) a
   ".elementor-column-gap-default > .elementor-column > .elementor-
   element-populated" szelektorral (3 osztálynyi specificitás!) mobil
   nézetben 10px paddinget ad a widget-oszlopnak — asztali nézeten ez a
   szabály nem aktív, ezért eddig észrevétlen maradt. Emiatt a Hero-kép
   mobilon nem volt teljes szélességű/magasságú (kis rés jelent meg
   minden oldalán). Ugyanazt a szerkezeti mintát ismételve, de a
   ":has(.hero)"-val kiegészítve (4 osztálynyi specificitás) csak azt az
   oszlopot célozzuk meg, amiben a Hero widget van — más Elementor-
   widgetek elrendezését nem érinti, és erősebb, mint az Elementor
   eredeti szabálya. */
.elementor-column-gap-default > .elementor-column > .elementor-element-populated:has(.hero) {
	padding: 0;
}

.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: rgba(21, 21, 21, 0.25);
	z-index: 1;
}

/* A háttérkép (tengerparti város, fényes ég/víz) alja a sima 25%-os
   sötétítéssel is túl világos maradt, és élesen elütött a hero alatti
   szekció tömör sötét hátterétől (--color-bg) — ez a lentről felfelé
   sötétedő gradiens finoman elmossa az átmenetet. Csak a kép LEGALJÁT
   (a 82-100% tartományt) sötétíti — ha korábban már 40%-nál elkezdődött
   volna, görgetéskor (a fix, kompakt fejléc alatt) a kép nagy, magas
   képernyőn akár fél képernyőnyi része is tömör feketévé válna, ami a
   fekete fejléccel összeolvadva úgy tűnt, mintha a fejlécnek óriási
   alsó térköze lenne. */
.hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, transparent 82%, var(--color-bg) 100%);
	z-index: 1;
}

/* A ".hero .hero-bg" (nem csak ".hero-bg") azért kell, mert az Elementor
   saját ".elementor img { height:auto }" alap-szabálya (specificitás 0,0,1,1)
   különben erősebb lenne egy csupasz egy-class szelektornál (0,0,1,0), és a
   kép a szekció magassága helyett a saját természetes képarányában jelenne
   meg (lelógna a szekció aljából). */
.hero .hero-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

/* Nem flex:1 + justify-content:center (a cím korábban egy rugalmas
   terület KÖZEPÉN állt, emiatt a cím alatti üres hely ugyanakkora volt,
   mint a fejléc feletti — ez adta a foglalási formig tartó túl nagy
   távolságot). Fix padding-top-pal rögzítve a cím helye, a form pedig
   közvetlenül utána, kis margóval követi — a hero alján maradó helyet
   (a fotó látszik ki alatta) a flexbox alapból üresen hagyja. */
.hero-content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding-top: 21rem;
}

.hero-content h1 {
	color: var(--color-white);
}

/* Foglalás form */
.booking-form {
	position: relative;
	z-index: 2;
	width: 100%;
	margin-top: 9rem;
}

.booking-form__honeypot {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.form-notice--hero {
	background: rgba(0, 0, 0, 0.75);
	color: var(--color-white);
	border: 1px solid var(--color-white);
	margin: 0 0 1px;
}

.booking-form form {
	display: grid;
	grid-template-columns: repeat(6, 1fr) 1.2fr;
	gap: 1px;
	background: #000000;
}

.booking-form input,
.booking-form select {
	background: #ffffff;
	border: none;
	border-radius: 0;
	color: #111111;
	color-scheme: light;
	font-family: var(--font-body);
	font-weight: 700;
	padding: 1.1rem 1.25rem;
	font-size: 0.9rem;
	width: 100%;
}

.booking-form input:focus,
.booking-form select:focus {
	outline: none;
	box-shadow: inset 0 0 0 2px #5f5f5f;
}

.booking-form input::placeholder {
	color: #111111;
	opacity: 1;
}

/* Safari a dátummező kitöltetlen szegmenseit natívan, a color
   tulajdonságtól függetlenül szürkével rajzolja, és ezt CSS-ből nem
   lehet felülírni (WebKit-korlát) — ezért a natív "üres" állapotban
   (:invalid, hiszen a mező required) átlátszóra vesszük az egész
   dátum-kiírást, és egy saját, garantáltan fekete felirat-réteget
   teszünk mögé/fölé, ami a tényleges kiválasztás után eltűnik. */
.date-field {
	position: relative;
	background: #ffffff;
}

.date-field input[type="date"] {
	position: relative;
	z-index: 1;
	background: transparent;
}

.date-field input[type="date"]:invalid,
.date-field input[type="date"]:invalid::-webkit-datetime-edit {
	color: transparent;
}

.date-field__placeholder {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: flex;
	align-items: center;
	padding: 1.1rem 1.25rem;
	color: #111111;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 0.9rem;
	pointer-events: none;
}

.date-field input[type="date"]:valid ~ .date-field__placeholder {
	display: none;
}

.booking-form select {
	-webkit-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23111111' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1.25rem center;
	background-size: 12px 8px;
	padding-right: 2.75rem;
}

.booking-form button {
	background: #5f5f5f;
	color: var(--color-white);
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 1.1rem;
	text-transform: uppercase;
	border-radius: 0;
	width: 100%;
	padding: 1.1rem 1.25rem;
}

/* Mobilon a cím-form közti nagy térközök (14rem + 9rem, az asztali
   "above the fold" finomításnál kerültek be) minden görgetés nélkül is
   kitöltötték a teljes képernyőt — a hero alatti első szekció (USP)
   emiatt egyáltalán nem látszott betöltéskor. Mobilon jelentősen
   kisebb térközök kellenek. (Ennek a szabálynak muszáj a ".hero-content"/
   ".booking-form" ALAPÉRTELMEZÉSE UTÁN állnia a fájlban — azonos
   specificitás mellett a KÉSŐBBI nyer, media querytől függetlenül.) */
@media (max-width: 900px) {
	/* A tartalom (cím+form) a fenti csökkentés után már bőven kisebb,
	   mint 85vh — emiatt eddig ez a min-height maradt a domináns
	   korlát, üresen (csak háttérkép) hagyva a form alatti területet,
	   és lejjebb tolva a következő szekciót. 65vh-n a tartalom még
	   mindig kényelmesen elfér, de a hero összességében alacsonyabb. */
	.hero {
		min-height: 65vh;
	}

	.hero-content {
		padding-top: 9rem;
	}

	/* A cím teljes szélessége ("L'odore di Napoli Ristorante") a
	   régi, asztali betűméretnél (2rem) mindig két sorra tört keskeny
	   mobil nézetben — méréssel megállapított, hogy kb. 1.5rem-nél fér
	   ki egy sorba a legszűkebb gyakori mobil-szélességeken (375px)
	   is, kényelmes tartalékkal. */
	.hero-content h1 {
		font-size: 1.5rem;
	}

	.booking-form {
		margin-top: 3.5rem;
	}

	.booking-form form {
		grid-template-columns: repeat(2, 1fr);
	}

	.booking-form button {
		grid-column: 1 / -1;
	}

	.booking-form input,
	.booking-form select {
		padding: 0.6rem 0.85rem;
		font-size: 0.8rem;
	}

	.date-field__placeholder {
		padding: 0.6rem 0.85rem;
		font-size: 0.8rem;
	}

	.booking-form select {
		padding-right: 2.1rem;
	}

	.booking-form button {
		padding: 0.7rem 1rem;
		font-size: 0.95rem;
	}

	/* Görgetve mobilon külön állítható logóméret és alsó térköz
	   (Beállítások → Fejléc, "— mobil" mezők) — ha az admin nem
	   állította be külön, a CSS-változó az asztali értékre esik vissza
	   (lásd ldn_scrolled_logo_size_mobile()/ldn_scrolled_header_bottom_
	   gap_mobile(), functions.php). Muszáj ITT, a fájl végén állnia (a
	   ".site-header.is-scrolled .site-logo img" / ".site-header__inner"
	   alapértelmezése UTÁN), különben — azonos specificitás mellett a
	   későbbi nyer, media querytől függetlenül — nem érvényesülne. */
	.site-header.is-scrolled .site-logo img {
		width: var(--ldn-header-scrolled-logo-mobile, var(--ldn-header-scrolled-logo, 52px));
		height: var(--ldn-header-scrolled-logo-mobile, var(--ldn-header-scrolled-logo, 52px));
	}

	.site-header.is-scrolled .site-header__inner {
		margin-bottom: var(--ldn-header-scrolled-bottom-mobile, var(--ldn-header-scrolled-bottom, -20px));
	}
}

/* Köztes tartomány (tablet, pl. iPad Air álló — 820px): a fenti,
   keskeny (leginkább ≤480px) mobilra tervezett kis térközökkel a cím
   szinte a fejléc alatt lógott, a foglalás-form pedig közvetlenül
   alatta — tableten sokkal több hely van, ezt kihasználva bővebb (de a
   desktopnál még mindig kisebb) térköz kerül ide. MUSZÁJ a fenti
   "(max-width:900px)" blokk UTÁN állnia a fájlban (azonos specificitás
   mellett a későbbi nyer, media querytől függetlenül). */
@media (min-width: 701px) and (max-width: 900px) {
	.hero {
		min-height: 75vh;
	}

	.hero-content {
		padding-top: 14rem;
	}

	/* A keskeny mobilra méretezett 1.5rem itt aránytalanul kicsi volt —
	   tableten bőven elfér egy sokkal nagyobb cím. */
	.hero-content h1 {
		font-size: 3rem;
	}

	.booking-form {
		margin-top: 8rem;
	}
}

/* -----------------------------------------------------------
   5. USP blokk
----------------------------------------------------------- */
.usp-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
	max-width: 1050px;
	margin-inline: auto;
	text-align: left;
}

.usp-item h3 {
	font-size: calc(1rem * var(--ldn-h3-scale, 1.08));
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin-bottom: 0.5rem;
}

.usp-item p {
	font-size: calc(1.1rem * var(--ldn-body-scale, 1.08));
	line-height: 1.6;
}

@media (max-width: 800px) {
	.usp-grid {
		grid-template-columns: 1fr;
	}
}

/* -----------------------------------------------------------
   6. Rólunk
----------------------------------------------------------- */
/* A fölötte lévő USP-blokkhoz (3 címsor) közelebb hozva — csak a
   felső térköz csökkentve, az alsó (.section alapértelmezése)
   változatlan marad. */
#rolunk {
	padding-top: 1.5rem;
}

.about-text {
	max-width: 1050px;
	margin: 0 auto;
	text-align: justify;
}

.about-text p {
	margin-bottom: 0.9rem;
	font-size: calc(1.2rem * var(--ldn-body-scale, 1.08));
	line-height: 1.6;
}

/* A vékonybetűs törzsszöveg (Raleway Semibold) kisebb méretre véve,
   megkülönböztetve a fölötte lévő, vastagabb (Playfair Display Bold)
   lead-bekezdéstől. Ez a méret (1.1rem) az egész oldalon a "kisebb,
   olvasószöveg" mérték-egysége — lásd Események/Galéria bevezető,
   Híreink kivonat, blog-kivonat, amik ugyanezt használják. */
.about-text__body p {
	font-size: calc(1.1rem * var(--ldn-body-scale, 1.08));
}

/* ".about-text p.about-text__lead" (nem csak ".about-text__lead"), mert a
   ".about-text p" szabály (osztály+elem szelektor) különben erősebb
   lenne egy csupasz egy-osztályos szelektornál, és felülírná a lead
   saját méretét a törzsszöveg méretére. */
.about-text p.about-text__lead {
	font-family: var(--font-heading);
	font-weight: var(--weight-h2);
	color: var(--color-white);
	font-size: calc(1.1rem * var(--ldn-body-scale, 1.08));
	line-height: 1.4;
	margin-bottom: 1.25rem;
}

.about-text__divider {
	width: 120px;
	height: 1px;
	background: var(--color-white);
	margin-top: 0.75rem;
}

/* Keskeny mobil nézetben a sorkizárás (justify) kevés szó/sor mellett
   csúnya, egyenetlen szóközöket hoz létre — balra zárt szöveg olvashatóbb. */
@media (max-width: 700px) {
	.about-text {
		text-align: left;
	}
}

/* -----------------------------------------------------------
   7. Kör-fotós csúszkák (Csapatunk / Galéria)
----------------------------------------------------------- */
.circle-carousel {
	display: flex;
	justify-content: center;
	gap: 1.25rem;
	flex-wrap: wrap;
	margin-bottom: 1rem;
}

.circle-card {
	width: 300px;
	text-align: center;
}

/* "display:block" kell, mert a Galéria szekcióban ez az elem <a> (link
   az album-aloldalra) — <div>-en (Csapatunk) ez a szabály hatástalan
   plusz, hiszen a div már eleve block. */
.circle-card__image {
	display: block;
	width: 300px;
	height: 300px;
	border-radius: 50%;
	overflow: hidden;
	margin: 0 auto 0.75rem;
	transition: opacity 0.2s ease;
}

/* Csak a Galéria kártyáin kattintható (ott <a>, a Csapatunk kártyákon
   <div> marad) — finom hover-visszajelzés, hogy érzékelhető legyen a
   kattinthatóság. */
a.circle-card__image:hover {
	opacity: 0.85;
}

/* ".circle-card .circle-card__image img" (nem csak ".circle-card__image
   img") ugyanazért az Elementor-specificitási ok miatt, mint a .hero-bg-nél
   fentebb. */
.circle-card .circle-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.circle-card__caption {
	text-transform: uppercase;
	font-size: 0.85rem;
	letter-spacing: 0.04em;
	font-family: var(--font-heading);
}

.circle-card__caption strong {
	display: block;
	color: var(--color-white);
	font-family: var(--font-heading);
	font-size: 1rem;
}

/* Csapatunk — egységes (nem fehér, azonos méretű) név/beosztás; a
   fotóméret a base .circle-card__image-től öröklődik (nincs külön
   nagyobb méret). */
.circle-card__caption--team,
.circle-card__caption--team strong {
	font-family: var(--font-heading);
	font-weight: var(--weight-h2);
	color: var(--color-text);
	font-size: 0.85rem;
}

.circle-card__caption--team {
	line-height: 1.6;
}

.circle-card__caption--team strong {
	display: block;
}

.carousel-controls {
	display: flex;
	justify-content: center;
	gap: 0.75rem;
}

.carousel-controls button {
	width: 3.25rem;
	height: 3.25rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: none;
	background: rgba(255, 255, 255, 0.12);
	color: var(--color-white);
	font-size: 1.2rem;
	cursor: pointer;
}

.carousel-controls button:hover {
	background: var(--color-white);
	color: var(--color-bg);
}

/* Mobilon a fix (420px-es) kártyaméret helyett a carousel egyszerre
   csak egy elemet mutat teljes szélességben — a JS (initCarousels) a
   DOM-sorrendet forgatja a nyilakra kattintva, így mindig az első
   (látható) helyre kerül a következő/előző kártya, a többi az
   overflow:hidden miatt rejtve marad. */
/* 700px (valódi keskeny mobil — ugyanaz a küszöb, mint az ".about-text"
   szövegigazításnál lentebb): itt marad az 1 kártyás, lapozható
   csúszka-mód. */
@media (max-width: 700px) {
	.circle-carousel {
		flex-wrap: nowrap;
		overflow: hidden;
		justify-content: flex-start;
	}

	.circle-card,
	.circle-card--team {
		width: 100%;
		flex: 0 0 100%;
	}

	.circle-card__image,
	.circle-card--team .circle-card__image {
		width: min(240px, 70vw);
		height: min(240px, 70vw);
	}
}

/* Tablet (701–900px, pl. iPad Air álló — 820px): a felhasználó kérte,
   hogy itt MINDIG PONTOSAN 2 kártya látszódjon egymás mellett, nem
   több — a "wrap" (flex-wrap:wrap) elrendezés ezt NEM adja: ha 3 kártya
   van (pl. Csapatunk/Galéria 3 tagja), az mind a 3-at megjeleníti,
   csak 2+1 sorba törve. Ehelyett ugyanaz a "nowrap + overflow:hidden"
   csúszka-mód kell, mint a keskeny mobilon (lásd fentebb, 700px), csak
   itt a kártya 50% szélességű (nem 100%) — így a 3. (és további) kártya
   a kereten KÍVÜL, rejtve marad, amíg a nyilakra kattintva (initCarousels,
   main.js — ugyanaz a DOM-sorrend-forgatás, nincs hozzá külön JS) be nem
   csúsztatja.
   FONTOS: a kártya (.circle-card) szélessége itt a KÉP méretével EGYEZŐ
   fix érték (230px), nem a konténer 50%-a — az előző kör "50% - fél
   gap" megoldása a kártyát sokkal szélesebbre méretezte, mint a benne
   lévő (nála jóval kisebb) kör-kép, ami az "margin:0 auto" középre-
   igazítás miatt hatalmas üres sávot hagyott a két kép között. A
   csúszka-keret (.circle-carousel) max-width-je pontosan 2 kép + 1 gap
   szélességére van állítva és középre igazítva — így a 3. kártya (ami a
   kereten kívül, jóval szélesebb DOM-sorban helyezkedik el) biztosan
   rejtve marad, a 2 látható kép pedig szorosan egymás mellett. */
@media (min-width: 701px) and (max-width: 900px) {
	.circle-carousel {
		flex-wrap: nowrap;
		overflow: hidden;
		justify-content: flex-start;
		gap: 1rem;
		max-width: 476px;
		margin-inline: auto;
	}

	.circle-card,
	.circle-card--team {
		width: 230px;
		flex: 0 0 230px;
	}

	.circle-card__image,
	.circle-card--team .circle-card__image {
		width: 230px;
		height: 230px;
		margin-inline: 0;
	}
}

/* -----------------------------------------------------------
   8. Étlap
----------------------------------------------------------- */
.menu-categories {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.menu-categories button {
	background: none;
	border: none;
	color: var(--color-text-muted);
	font-family: var(--font-heading);
	text-transform: uppercase;
	font-size: 1.05rem;
	letter-spacing: 0.04em;
	font-weight: 700;
	cursor: pointer;
}

.menu-categories button.is-active,
.menu-categories button:hover {
	color: var(--color-white);
}

.menu-panel {
	display: none;
}

.menu-panel.is-active {
	display: grid;
	grid-template-columns: 1fr 1fr;
	max-width: 1100px;
	margin-inline: auto;
	gap: 3.5rem 4rem;
}

.menu-panel .menu-item {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
}

.menu-item__info {
	max-width: 400px;
}

.menu-item__name {
	color: var(--color-white);
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: calc(1.2rem * var(--ldn-h3-scale, 1.08));
	text-transform: uppercase;
	margin-bottom: 0.3rem;
}

.menu-item__ingredients {
	font-size: calc(1rem * var(--ldn-body-scale, 1.08));
	line-height: 1.4;
}

.menu-item__ingredients-hu {
	font-weight: 700;
	color: var(--color-white);
}

.menu-item__ingredients em {
	display: block;
	font-style: italic;
	color: var(--color-text-muted);
	margin-top: 0.25rem;
}

.menu-item__price {
	white-space: nowrap;
	color: var(--color-white);
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: calc(1.2rem * var(--ldn-h3-scale, 1.08));
}

/* 900px (nem 800px): tablet-szélességen (pl. iPad Air, 820px) a 2
   oszlopos elrendezés túl szűk, a tételek nem fértek ki rendesen —
   lásd a fenti "900px" megjegyzést a Galéria/Csapatunk kártyáknál,
   ugyanaz az ok. */
@media (max-width: 900px) {
	.menu-panel.is-active {
		grid-template-columns: 1fr;
	}

	/* Az egyes tételek inline "grid-column"/"grid-row" stílust kapnak
	   (lásd section-menu.php / class-menu.php) az asztali 2 oszlopos
	   elrendezéshez — ezt kell itt felülírni az !important-tel, hogy
	   mobilon mindegyik tétel az eredeti sorrendben, egy oszlopban,
	   egymás alatt jelenjen meg. */
	.menu-panel.is-active .menu-item {
		grid-column: 1 !important;
		grid-row: auto !important;
	}
}

/* Tablet (701–900px, pl. iPad Air álló): a kategória-fülek és az
   alattuk lévő tételek közötti térköz a felhasználó szerint túl szűk
   volt — itt jóval nagyobb térköz kerül közéjük. */
@media (min-width: 701px) and (max-width: 900px) {
	.menu-categories {
		margin-bottom: 3.5rem;
	}
}

/* -----------------------------------------------------------
   Étlap — panel-szintű belépő animáció: a bal oszlop (.menu-item--col-1)
   balról, a jobb oszlop (.menu-item--col-2) jobbról csúszik be, EGY
   EGYSÉGKÉNT (nincs tételenkénti késleltetés — lásd main.js
   initMenuReveal/revealMenuPanel: a ".menu-panel.is-revealed" osztályt
   kapja meg a panel egyszerre, nem az egyes tételek külön-külön).
----------------------------------------------------------- */
.menu-item--col-1,
.menu-item--col-2 {
	opacity: 0;
	transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.menu-item--col-1 {
	transform: translateX(-64px);
}

.menu-item--col-2 {
	transform: translateX(64px);
}

.menu-panel.is-revealed .menu-item--col-1,
.menu-panel.is-revealed .menu-item--col-2 {
	opacity: 1;
	transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
	.menu-item--col-1,
	.menu-item--col-2 {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* Mobilon egy oszlopba kerül minden tétel (lásd fentebb a
   ".menu-panel.is-active .menu-item" grid-reset) — a bal/jobb oldali
   csúszás iránya itt nem értelmezhető, ezért ugyanaz a (lefelé induló)
   belépő mozgás vonatkozik mindkét csoportra, mint a többi kártyás
   szekcióra a site-on. MUSZÁJ a fájlban a fenti alap-szabály UTÁN
   állnia (azonos specificitás mellett a későbbi nyer, media querytől
   függetlenül). 900px, hogy a fenti ".menu-panel.is-active" egy-oszlopos
   töréspontjával szinkronban maradjon. */
@media (max-width: 900px) {
	.menu-item--col-1,
	.menu-item--col-2 {
		transform: translateY(32px);
	}
}

/* -----------------------------------------------------------
   9. Események
----------------------------------------------------------- */
.events-intro {
	max-width: 1050px;
	margin: 0 auto 2.25rem;
	text-align: left;
	font-family: var(--font-heading);
	font-weight: var(--weight-h2);
	color: var(--color-text);
	/* Ugyanakkora, mint a Rólunk törzsszövege (.about-text__body p) — az
	   üzletkötő kérte, hogy az oldal apróbb, olvasó-szövegei egységes
	   méretűek legyenek. */
	font-size: calc(1.1rem * var(--ldn-body-scale, 1.08));
	line-height: 1.6;
}

/* A ".events-intro--wide"-ot eddig a Galéria bevezetője használta egy
   szélesebb (1300px) max-width-dal — a felhasználó kérte, hogy a
   Galéria szövege is ugyanolyan széles legyen, mint az Események
   szövege, a konzisztencia kedvéért. Nincs többé eltérés a kettő közt. */

.event-card {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	min-height: 380px;
	width: 100vw;
	position: relative;
	left: 50%;
	margin-left: -50vw;
}

.event-card:nth-of-type(2n) .event-card__image {
	order: 2;
}

.event-card:nth-of-type(2n) .event-card__body {
	order: 1;
}

/* clamp(): a kártyakép mindig a teljes viewport felét foglalja el
   (.event-card szélessége 100vw), így fix magasság mellett ultrawide
   kijelzőn a kép aránytalanul széles/alacsony ("elnyújtott") lenne —
   a 25vw tag a szélességgel arányosan növeli a magasságot, 380px alatt
   nem megy (a megszokott asztali méret változatlan marad), 700px fölé
   nem nő (nagyon széles monitoron se legyen túl magas a sáv). */
.event-card__image {
	position: relative;
	height: 100%;
	min-height: clamp(380px, 25vw, 700px);
	overflow: hidden;
}

.event-card__slides {
	position: relative;
	width: 100%;
	height: 100%;
}

/* A kép-nyilak (.event-card__image-nav) a linken KÍVÜL, testvér-elemként
   maradnak (nem lehet <button> egy <a>-n belül), így a lapozás kattintása
   nem navigál el az esemény URL-jére. A link csak a képekre feszül rá. */
.event-card__slides-link {
	display: block;
	height: 100%;
}

.event-card__title-link:hover {
	text-decoration: underline;
}

/* ".event-card__image .event-card__slides img" ugyanazért az Elementor-
   specificitási ok miatt, mint a .hero-bg-nél fentebb. */
.event-card__image .event-card__slides img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.event-card__slides img.is-active {
	opacity: 1;
}

.event-card__image-nav {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 1.5rem;
	pointer-events: none;
}

.event-card__image-nav button {
	pointer-events: auto;
	width: 2.75rem;
	height: 2.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: none;
	background: var(--color-white);
	color: var(--color-bg);
	font-size: 1.2rem;
	cursor: pointer;
}

.events-nav,
.video-nav {
	margin-top: 1.5rem;
}

.event-card__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 1.25rem 2.5rem;
}

.event-card__body h3 {
	color: var(--color-text-muted);
	text-transform: uppercase;
	font-size: calc(1.15rem * var(--ldn-h3-scale, 1.08));
}

.event-card__meta {
	font-family: var(--font-heading);
	color: var(--color-text-muted);
	font-size: calc(1.1rem * var(--ldn-body-scale, 1.08));
}

/* 900px (nem 800px): tableten (pl. iPad Air, 820px) az asztali
   2-oszlopos (kép|szöveg) elrendezésben a kép csak a 100vw fele volt,
   miközben a clamp(380px,25vw,700px) magasság majdnem négyzetesre
   kényszerítette — ez vágta le csúnyán a fotók nagy részét. A
   ".events-list" JS-lapozása (main.js, ldnMobileQuery) is 900px-re
   állítva, hogy szinkronban maradjon: tableten is csak 1 esemény
   látszik egyszerre, nem 2. */
@media (max-width: 900px) {
	.event-card {
		grid-template-columns: 1fr;
		min-height: 0;
		width: auto;
		left: auto;
		margin-left: 0;
	}

	.event-card__image {
		min-height: 260px;
	}

	.event-card:nth-of-type(2n) .event-card__image,
	.event-card:nth-of-type(2n) .event-card__body {
		order: initial;
	}
}

/* -----------------------------------------------------------
   10. Videó galéria
----------------------------------------------------------- */
.video-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem;
}

.video-embed {
	position: relative;
	aspect-ratio: 16 / 9;
	background: #000;
}

.video-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* 900px, szinkronban a JS lapozással (ldnMobileQuery, main.js) —
   tableten is 1 videó látsszon egyszerre, ne 2 (ugyanaz az elv, mint
   az Eseményeknél/Híreinknél). */
@media (max-width: 900px) {
	.video-grid {
		grid-template-columns: 1fr;
	}
}

/* -----------------------------------------------------------
   11. Híreink
----------------------------------------------------------- */
.news-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto auto;
	gap: 0;
	width: 100vw;
	position: relative;
	left: 50%;
	margin-left: -50vw;
}

/* A .news-card maga nem foglal helyet a rácsban — a gyerekei
   (kép / szöveg) közvetlenül a .news-list rács celláiba kerülnek,
   így a jobb kép teteje pontosan ott kezdődik, ahol a bal kép alja
   végződik (a rács sor-határa garantálja, nem kézi magasság-egyeztetés). */
.news-card {
	display: contents;
}

.news-card:nth-of-type(odd) .news-card__image {
	grid-column: 1;
	grid-row: 1;
}

.news-card:nth-of-type(odd) .news-card__body {
	grid-column: 1;
	grid-row: 2;
}

.news-card:nth-of-type(even) .news-card__body {
	grid-column: 2;
	grid-row: 1;
}

.news-card:nth-of-type(even) .news-card__image {
	grid-column: 2;
	grid-row: 2;
}

/* "height" (nem csak "min-height"), mert a rács-cellának nincs saját
   definit magassága — enélkül a böngésző a benne lévő <img>
   (width/height:100%) természetes képarányából számolt magasságot
   használná a rács-sor méretezéséhez, és a min-height-nek nem lenne
   tényleges hatása. Ugyanakkora, mint az Események kártyaképek
   (.event-card__image) — a felhasználó kérte, hogy a két szekció
   képmérete egyezzen. */
/* Ugyanaz a clamp(), ugyanazért, mint az Események kártyaképnél
   (.event-card__image) — a két szekció képmérete egyezzen ultrawide
   kijelzőn is. "height" (nem "min-height"), lásd a fenti megjegyzést a
   rács-magasság buktatóról. */
.news-card__image {
	position: relative;
	height: clamp(380px, 25vw, 700px);
	overflow: hidden;
}

.news-card:nth-of-type(odd) .news-card__image {
	border-top-right-radius: 2rem;
}

.news-card:nth-of-type(even) .news-card__image {
	border-bottom-left-radius: 2rem;
}

/* ".news-card .news-card__image img" ugyanazért az Elementor-
   specificitási ok miatt, mint a .hero-bg-nél fentebb. */
.news-card .news-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.news-card__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 1.5rem 2rem 3rem;
	position: relative;
	height: 100%;
}

.news-card__body h3 {
	color: var(--color-text-muted);
	text-transform: uppercase;
	font-size: calc(1.15rem * var(--ldn-h3-scale, 1.08));
}

.news-card__body p {
	align-self: stretch;
	text-align: left;
	/* Ugyanakkora, mint a Rólunk törzsszövege — lásd .about-text__body p. */
	font-size: calc(1.1rem * var(--ldn-body-scale, 1.08));
}

.news-card__date {
	text-transform: uppercase;
	font-size: 0.8rem;
	letter-spacing: 0.05em;
	font-family: var(--font-heading);
	color: var(--color-text-muted);
	margin-bottom: 0.5rem;
}

.news-card__read-more {
	position: absolute;
	bottom: 1.5rem;
	left: 50%;
	transform: translateX(-50%);
	text-transform: uppercase;
	font-size: 0.8rem;
	letter-spacing: 0.05em;
	color: var(--color-text);
	border-bottom: 1px solid var(--color-text);
	transition: color 0.2s ease, border-color 0.2s ease;
}

.news-card__read-more:hover {
	color: var(--color-white);
	border-color: var(--color-white);
}

.news-nav {
	margin-top: 1.5rem;
}

.news-footer {
	text-align: center;
	margin-top: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 0.85rem;
}

/* 900px, ugyanazért, mint az Eseményeknél fentebb — tableten (pl.
   iPad Air) is 1 hír látsszon egyszerre, és a kép ne a 2-oszlopos
   asztali elrendezés (majdnem négyzetes, levágott) méretét kapja. */
@media (max-width: 900px) {
	.news-list {
		grid-template-columns: 1fr;
		width: auto;
		left: auto;
		margin-left: 0;
		row-gap: 2rem;
	}

	.news-card {
		display: flex;
		flex-direction: column;
		margin-bottom: 2rem;
	}

	.news-card:nth-of-type(odd) .news-card__image,
	.news-card:nth-of-type(even) .news-card__image {
		border-radius: 0;
	}
}

/* -----------------------------------------------------------
   12. Kapcsolat
----------------------------------------------------------- */
.contact-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
	text-align: center;
	margin-bottom: 3.5rem;
}

.contact-grid .icon {
	display: inline-flex;
	width: 1.75rem;
	height: 1.75rem;
	margin-bottom: 0.5rem;
	color: var(--color-white);
	transition: color 0.2s ease;
}

.contact-grid .icon svg {
	width: 100%;
	height: 100%;
}

.contact-grid a {
	display: inline-block;
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}

.contact-grid a:hover {
	color: var(--color-text-muted);
}

.contact-grid a:hover .icon {
	color: var(--color-text-muted);
}

.contact-subtitle {
	margin-bottom: 2.25rem;
}

.contact-form {
	position: relative;
	max-width: 900px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem 2rem;
}

.contact-form__honeypot {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.form-notice {
	max-width: 900px;
	margin: 0 auto 1rem;
	padding: 0.75rem 1.25rem;
	border-radius: 0.5rem;
	text-align: center;
	border: 1px solid var(--color-border);
}

.form-notice--success {
	color: var(--color-white);
	border-color: var(--color-white);
}

.form-notice--error {
	color: var(--color-text-muted);
}

.contact-form .full-width {
	grid-column: 1 / -1;
}

.contact-form label {
	display: block;
	margin-bottom: 0.5rem;
	text-transform: uppercase;
	font-size: 0.8rem;
	letter-spacing: 0.04em;
}

.contact-form input,
.contact-form textarea {
	width: 100%;
	background: transparent;
	border: none;
	border-bottom: 1px solid var(--color-border);
	color: var(--color-text);
	padding: 0.5rem 0;
	font-family: var(--font-body);
}

.contact-form .submit-row {
	grid-column: 1 / -1;
	text-align: center;
	margin-top: 1rem;
}

.contact-form button {
	border-radius: 999px;
	border: 1px dashed var(--color-border);
	background: transparent;
	color: var(--color-white);
	width: 8rem;
	height: 8rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, border-style 0.2s ease;
}

.contact-form button:hover {
	background: var(--color-white);
	color: var(--color-bg);
	border-style: solid;
	border-color: var(--color-white);
}

@media (max-width: 800px) {
	.contact-grid,
	.contact-form {
		grid-template-columns: 1fr;
	}
}

/* -----------------------------------------------------------
   13. Térkép
----------------------------------------------------------- */
.map-embed {
	width: 100%;
	aspect-ratio: 21 / 9;
}

.map-embed iframe {
	width: 100%;
	height: 100%;
	border: 0;
}

@media (max-width: 800px) {
	.map-embed {
		/* Az asztali 21/9 mobilon túl alacsony sávvá lapítja a térképet —
		   a felhasználó kérte, hogy mobilon legyen magasabb. */
		aspect-ratio: 4 / 3;
	}
}

/* -----------------------------------------------------------
   14. Lábléc
----------------------------------------------------------- */
.site-footer {
	text-align: center;
	padding: 2rem 0 1.5rem;
}

.site-footer .site-logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1rem;
}

.site-footer .site-logo img {
	width: 100px;
	height: 100px;
}

.site-footer .social-icons {
	justify-content: center;
	gap: 1.25rem;
	margin-bottom: 1rem;
	text-transform: uppercase;
	font-size: 0.85rem;
	letter-spacing: 0.04em;
}

/* A fejléc 30px-es ikonjai a szöveg nélküli, önálló ikon-gombokhoz
   lettek méretezve — a láblécben a felirat mellett kisebb, arányos
   méret illik jobban. */
.site-footer .social-icons svg {
	width: 18px;
	height: 18px;
}

.site-footer .copyright {
	font-size: 0.75rem;
	color: var(--color-text-muted);
}

.footer-legal-nav ul {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 1.25rem;
	margin-top: 1rem;
}

.footer-legal-nav a {
	font-size: 0.7rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.footer-legal-nav a:hover {
	color: var(--color-white);
}

/* -----------------------------------------------------------
   15. Blog-lista (aloldal)
----------------------------------------------------------- */
.blog-filter {
	margin-bottom: 1.5rem;
}

.blog-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 2rem 1.5rem;
}

.blog-card {
	display: flex;
	flex-direction: column;
}

.blog-card__image {
	display: block;
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-top-right-radius: 2rem;
}

/* ".blog-card .blog-card__image img" ugyanazért az Elementor-
   specificitási ok miatt, mint a .hero-bg-nél fentebb. */
.blog-card .blog-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.blog-card__image:hover img {
	transform: scale(1.04);
}

.blog-card__body {
	padding-top: 1rem;
}

.blog-card__date {
	text-transform: uppercase;
	font-size: 0.8rem;
	letter-spacing: 0.05em;
	font-family: var(--font-heading);
	color: var(--color-text-muted);
	margin-bottom: 0.5rem;
}

.blog-card__title {
	color: var(--color-text-muted);
	text-transform: uppercase;
	font-size: calc(1.05rem * var(--ldn-h3-scale, 1.08));
}

.blog-card__title a:hover {
	color: var(--color-white);
}

.blog-card__excerpt {
	/* Ugyanakkora, mint a Rólunk törzsszövege — lásd .about-text__body p. */
	font-size: calc(1.1rem * var(--ldn-body-scale, 1.08));
}

.blog-card__link {
	display: inline-block;
	margin-top: 0.5rem;
	text-transform: uppercase;
	font-size: 0.8rem;
	letter-spacing: 0.05em;
	color: var(--color-text);
	border-bottom: 1px solid var(--color-text);
	transition: color 0.2s ease, border-color 0.2s ease;
}

.blog-card__link:hover {
	color: var(--color-white);
	border-color: var(--color-white);
}

@media (max-width: 500px) {
	.blog-grid {
		grid-template-columns: 1fr;
	}
}

/* -----------------------------------------------------------
   16. Galéria-album aloldal (single-ldn_galeria_kep.php)
----------------------------------------------------------- */
.gallery-detail-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
	gap: 2rem;
}

.gallery-detail-grid__item {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 1rem;
}

.gallery-detail-grid__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gallery-detail-back {
	text-align: center;
	margin-top: 2.5rem;
	text-transform: uppercase;
	font-size: 0.85rem;
	letter-spacing: 0.05em;
}

.gallery-detail-back a {
	border-bottom: 1px solid var(--color-text);
	transition: color 0.2s ease, border-color 0.2s ease;
}

.gallery-detail-back a:hover {
	color: var(--color-white);
	border-color: var(--color-white);
}

@media (max-width: 500px) {
	.gallery-detail-grid {
		grid-template-columns: 1fr;
	}
}

/* -----------------------------------------------------------
   17. PDF beágyazás (Elementor "PDF megjelenítő" widget)
----------------------------------------------------------- */
.pdf-embed-wrap {
	display: flex;
	justify-content: center;
}

.pdf-embed {
	width: 100%;
}

.pdf-embed object {
	display: block;
	width: 100%;
	height: 900px;
	border: none;
	background-color: #fff;
}

.pdf-embed__fallback {
	margin-top: 0.75rem;
	text-align: center;
	font-size: 0.9rem;
}

.pdf-embed__fallback a {
	color: var(--color-text-muted);
	text-decoration: underline;
}

.pdf-embed__placeholder {
	text-align: center;
	color: var(--color-text-muted);
}

/* Az oldal egységes "kisebb, olvasószöveg" alapmérete (1.1rem — lásd
   .about-text__body p megjegyzése) mobilon egy hajszállal kisebb.
   Muszáj a fájl VÉGÉN állnia (minden érintett szelektor saját
   alapértelmezése UTÁN) — azonos specificitás mellett a KÉSŐBBI nyer,
   media querytől függetlenül. */
@media (max-width: 900px) {
	.usp-item p,
	.about-text__body p,
	.events-intro,
	.event-card__meta,
	.news-card__body p,
	.blog-card__excerpt {
		font-size: calc(1rem * var(--ldn-body-scale, 1.08));
	}
}

/* -----------------------------------------------------------
   Belépő animációk (fade-in + smooth szöveg-animáció)
   A .ldn-reveal osztályt és a kezdőállapotot a main.js adja hozzá
   (initScrollReveal) — SOSEM a HTML-ben/CSS-ben eleve rejtett, hogy
   ha a JS bármiért nem töltődne be, a tartalom akkor is látszódjon.
----------------------------------------------------------- */
.ldn-reveal {
	opacity: 0;
	transform: translateY(48px);
	transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.ldn-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.ldn-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* -----------------------------------------------------------
   Hero — betöltéskori belépő animáció
   Nem görgetés-vezérelt (IntersectionObserver), mert a Hero mindig
   eleve látható betöltéskor — ehelyett egy fix, egyszeri, késleltetett
   sorrend: 1) a háttérkép tárul fel, 2) a fejléc, 3) a cím, 4) a
   foglalás-form. A .site-header animációja szándékosan MINDEN oldalon
   lefut (nemcsak a Hero-s Kezdőlapon) — ez a legegyszerűbb, megbízható
   megoldás (nincs JS-függés, nincs DOM-kapcsolat-vizsgálat), és önmagában
   is kellemes belépő-hatás egy fix pozíciós fejléchez.
----------------------------------------------------------- */
@keyframes ldn-hero-fade-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes ldn-hero-drop-in {
	from {
		opacity: 0;
		transform: translateY(-20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes ldn-hero-rise-in {
	from {
		opacity: 0;
		transform: translateY(32px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.hero .hero-bg {
	opacity: 0;
	animation: ldn-hero-fade-in 1.1s ease-out both;
}

.site-header {
	opacity: 0;
	animation: ldn-hero-drop-in 0.8s ease-out both;
	animation-delay: 0.45s;
}

.hero .hero-content h1 {
	opacity: 0;
	animation: ldn-hero-rise-in 0.9s ease-out both;
	animation-delay: 0.75s;
}

.hero .booking-form {
	opacity: 0;
	animation: ldn-hero-rise-in 0.9s ease-out both;
	animation-delay: 1.05s;
}

@media (prefers-reduced-motion: reduce) {
	.hero .hero-bg,
	.site-header,
	.hero .hero-content h1,
	.hero .booking-form {
		opacity: 1;
		animation: none;
		transform: none;
	}
}