/**
 * Tányérműhely – Brand design segéd-stílusok (Tailwind CDN mellé)
 *
 * A Tailwind utility-osztályok a CDN-ből jönnek (preflight KIKAPCSOLVA, hogy a
 * téma header/footer stílusát ne írja felül). Itt csak azokat az egyedi
 * effekteket definiáljuk, amik nem fejezhetők ki tiszta utility-vel:
 * szemcse-textúra, blob-forma, zöld árnyék, animációk, timeline.
 *
 * Színek (brand): #3D4E36 sötétzöld · #6E8861 sage · #D97941 terrakotta ·
 *                 #F7F1EA krém · #EFF3ED halványzöld · #FDFAF6 meleg fehér.
 */

/* ── Szemcse-textúra overlay ──────────────────────────────────────────────── */
.tm-grain { position: relative; }
.tm-grain::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("https://www.transparenttextures.com/patterns/natural-paper.png");
	opacity: 0.05;
	pointer-events: none;
	z-index: 0;
}
.tm-grain > * { position: relative; z-index: 1; }

/* ── Organikus blob-forma + zöld árnyék ───────────────────────────────────── */
.tm-blob { border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%; }
.tm-shadow { box-shadow: 0 10px 30px rgba(61, 78, 54, 0.10); }
.tm-shadow-lg { box-shadow: 0 20px 50px rgba(61, 78, 54, 0.16); }

/* ── Marquee (proof bar) ──────────────────────────────────────────────────── */
@keyframes tm-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.tm-marquee { animation: tm-marquee 30s linear infinite; }

/* ── Terrakotta pulzáló CTA ───────────────────────────────────────────────── */
@keyframes tm-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(217, 121, 65, 0.55); }
	70%  { box-shadow: 0 0 0 14px rgba(217, 121, 65, 0); }
	100% { box-shadow: 0 0 0 0 rgba(217, 121, 65, 0); }
}
.tm-pulse { animation: tm-pulse 2.4s infinite; }

/* ── Lebegő ikon ──────────────────────────────────────────────────────────── */
@keyframes tm-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.tm-float { animation: tm-float 3s ease-in-out infinite; }

/* ── Scroll-reveal (Intersection Observer) ────────────────────────────────── */
.tm-reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
	            transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: opacity, transform;
}
.tm-reveal.tm-visible { opacity: 1; transform: translateY(0); }

/* ── „Hogyan működik" timeline ────────────────────────────────────────────── */
.tm-timeline { position: relative; }
.tm-timeline__line {
	position: absolute;
	left: 27px;
	top: 8px;
	bottom: 8px;
	width: 4px;
	background: rgba(255, 255, 255, 0.14);
	border-radius: 9999px;
	overflow: hidden;
}
.tm-timeline__progress {
	display: block;
	width: 100%;
	height: 0%;
	background: linear-gradient(to bottom, #b3cfa3, #D97941);
	transition: height 0.12s linear;
}
.tm-step {
	opacity: 0;
	transform: translateX(-28px);
	transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.tm-step.tm-visible { opacity: 1; transform: translateX(0); }
@keyframes tm-glow {
	0%   { box-shadow: 0 0 0 0 rgba(255, 182, 144, 0.45); }
	70%  { box-shadow: 0 0 0 15px rgba(255, 182, 144, 0); }
	100% { box-shadow: 0 0 0 0 rgba(255, 182, 144, 0); }
}
.tm-glow { animation: tm-glow 2s infinite; }

/* ── Összes menü: napi kártya hover + pöttyözött elválasztó ───────────────── */
.tm-daycard { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.tm-daycard:hover { transform: translateY(-2px); box-shadow: 0 10px 15px -3px rgba(61, 78, 54, 0.12); }
.tm-dotted { border-top: 1px dotted rgba(110, 136, 97, 0.35); }

/* ── Összes menü: mobil swipe (vízszintes), desktop 5 oszlopos rács ───────── */
.tm-week-grid {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding-bottom: 4px;
}
.tm-week-grid::-webkit-scrollbar { display: none; }
.tm-week-grid > * { scroll-snap-align: start; min-width: 270px; flex-shrink: 0; }
@media ( min-width: 768px ) {
	.tm-week-grid {
		display: grid;
		grid-template-columns: repeat(5, minmax(0, 1fr));
		overflow-x: visible;
	}
	.tm-week-grid > * { min-width: 0; }
}

/* Material Symbols alaphangolás */
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; vertical-align: middle; }

/* ── Header: lekerekítés + margó nullázása (hero-rés megszüntetése) ────────── */
header, .site-header, nav.main-nav,
.ast-main-header-wrap, #masthead,
[data-elementor-type="header"],
[data-elementor-type="header"] .elementor-section,
[data-elementor-type="header"] .e-con {
	border-radius: 0 !important;
	margin: 0 !important;
}

/* ── Levél-mintás organikus textúra a hero szekciókhoz ─────────────────────── */
.tm-leaves { position: relative; }
.tm-leaves::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.05;
	z-index: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath d='M30 90C30 60 60 50 60 20 60 50 90 60 90 90 70 80 50 80 30 90Z' fill='%23ffffff'/%3E%3Cpath d='M95 35c-10 2-18-4-20-14 10-2 18 4 20 14z' fill='%23ffffff'/%3E%3C/svg%3E");
	background-size: 120px 120px;
}
.tm-leaves > * { position: relative; z-index: 1; }

/* ── Teljes szélességű (full-bleed) brand wrapperek + header-átfedés ───────── */
.tanyer-landing, .tanyer-svedasztal, .tc-allmenus, .tanyer-home {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	margin-top: -3.5rem;   /* a hero a header alá lóg (megszünteti a rést) */
	overflow-x: hidden;
}
.tanyer-landing > section:first-child,
.tanyer-svedasztal > section:first-child,
.tanyer-home > section:first-child { margin-top: 0; }

/* ── Olvasható szöveg sötét szekciókban (0 specificitású default → a Tailwind
      text-* osztályok felülírják, pl. text-brandOrange megmarad) ─────────── */
.bg-darkGreen :where(h1,h2,h3,h4,h5,p,span,li,a,blockquote,small,strong),
.bg-sage      :where(h1,h2,h3,h4,h5,p,span,li,a,blockquote,small,strong) { color: #ffffff; }

/* DE: a sötét szekcióba helyezett VILÁGOS kártyák szövege maradjon sötét
   (pl. a hero melletti ár-kártya). Specifikusabb, ezért felülírja a fentit. */
.bg-darkGreen .bg-warmWhite :where(h1,h2,h3,h4,h5,p,span,li,a,blockquote,small,strong),
.bg-darkGreen .bg-white     :where(h1,h2,h3,h4,h5,p,span,li,a,blockquote,small,strong),
.bg-sage      .bg-warmWhite :where(h1,h2,h3,h4,h5,p,span,li,a,blockquote,small,strong),
.bg-sage      .bg-white     :where(h1,h2,h3,h4,h5,p,span,li,a,blockquote,small,strong) { color: #2B2F28; }

/* ── Scroll-reveal alias (.reveal-on-scroll / .revealed) ──────────────────── */
.reveal-on-scroll { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal-on-scroll.revealed { opacity: 1; transform: translateY(0); }

/* ── Zigzag „Hogyan működik" timeline (ikon+szöveg együtt, dekoráció szemben) ─ */
.tm-zigzag { position: relative; }
.tm-zigzag__connector { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.tm-zz-row {
	position: relative; z-index: 1;
	display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem;
	align-items: center; margin-bottom: 3.5rem;
}
.tm-zz-row:last-child { margin-bottom: 0; }
.tm-zz-row.is-left  .tm-zz-content { grid-column: 1; }
.tm-zz-row.is-left  .tm-zz-deco    { grid-column: 2; }
.tm-zz-row.is-right .tm-zz-content { grid-column: 2; }
.tm-zz-row.is-right .tm-zz-deco    { grid-column: 1; }
@media ( max-width: 767px ) {
	.tm-zigzag__connector { display: none; }
	.tm-zz-row { grid-template-columns: 1fr; gap: 0; margin-bottom: 2rem; }
	.tm-zz-row .tm-zz-content { grid-column: 1 !important; }
	.tm-zz-row .tm-zz-deco { display: none; }
}

/* ── Összes menü: checkbox láthatóság (a Tailwind „forms" reset felülírása) ── */
.tc-am-check {
	appearance: auto !important;
	-webkit-appearance: checkbox !important;
	width: 20px; height: 20px;
	accent-color: #6E8861;
	cursor: pointer;
	flex-shrink: 0;
}
/* Dátum nagyobb a napi kártyán */
.tm-card-date { font-size: 1rem !important; font-weight: 600; color: #2B2F28; }

/* ── Összes menü: mobil swipe-nyilak + hint ───────────────────────────────── */
.tc-week-wrap { position: relative; }
.tc-swipe-hint { display: none; }
@media ( max-width: 768px ) {
	.tc-swipe-hint { display: block; text-align: center; color: #A3A88E; font-size: 0.8rem; margin-top: 10px; }
}

/* ── „Ma mi van?" napi menü widget ────────────────────────────────────────── */
.tanyer-today-widget {
	background: #FDFAF6;
	border: 2px solid #6E8861;
	border-radius: 16px;
	box-shadow: 0 10px 30px rgba(61, 78, 54, 0.14);
	padding: 1.1rem 1.25rem;
	max-width: 340px;
	font-family: 'Karla', sans-serif;
}
.tanyer-today-widget .today-widget-header {
	display: flex; align-items: center; gap: 0.5rem;
	font-family: 'Be Vietnam Pro', sans-serif;
	font-weight: 800; color: #3D4E36;
	margin-bottom: 0.6rem;
}
.tanyer-today-widget .today-date { margin-left: auto; font-family: 'Karla', sans-serif; font-weight: 400; font-size: 0.8rem; color: #A3A88E; }
.tanyer-today-widget .today-meals { list-style: none; margin: 0 0 0.8rem; padding: 0; }
.tanyer-today-widget .today-meals li {
	font-size: 0.86rem; color: #2B2F28; padding: 0.3rem 0;
	border-bottom: 1px dotted rgba(110,136,97,0.3);
}
.tanyer-today-widget .today-meals li:last-child { border-bottom: none; }
.tanyer-today-widget .today-cta {
	display: inline-block; font-family: 'Be Vietnam Pro', sans-serif;
	font-weight: 700; color: #D97941; text-decoration: none;
	transition: all 0.2s ease;
}
.tanyer-today-widget .today-cta:hover { transform: translateX(3px); color: #c0682e; }
/* Hero jobb alsó sarkában lebeg (desktop), mobilon a hero alatt normál blokk */
.tanyer-today-anchor { position: relative; }
@media ( min-width: 1024px ) {
	.tanyer-today-widget--float { position: absolute; right: 1.5rem; bottom: 1.5rem; z-index: 30; }
}

/* A reduced-motion felhasználóknak nincs animáció */
@media ( prefers-reduced-motion: reduce ) {
	.tm-reveal, .tm-step, .reveal-on-scroll { opacity: 1 !important; transform: none !important; transition: none !important; }
	.tm-marquee, .tm-pulse, .tm-float, .tm-glow { animation: none !important; }
}

/* ── „Megújultunk!" bevezető popup ──────────────────────────────────────────── */
.tm-renewal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.tm-renewal[hidden] { display: none; }
.tm-renewal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba( 43, 47, 40, 0.55 );
}
.tm-renewal__dialog {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 480px;
	max-height: 90vh;
	overflow-y: auto;
	background: #FDFAF6;
	border-radius: 18px;
	padding: 28px 26px;
	box-shadow: 0 24px 60px rgba( 61, 78, 54, 0.30 );
	font-family: 'Karla', sans-serif;
	color: #2B2F28;
	animation: tm-renewal-in 0.35s cubic-bezier( 0.22, 1, 0.36, 1 );
}
@keyframes tm-renewal-in {
	from { opacity: 0; transform: translateY( 16px ) scale( 0.98 ); }
	to   { opacity: 1; transform: none; }
}
.tm-renewal__close {
	position: absolute;
	top: 12px;
	right: 14px;
	width: 34px;
	height: 34px;
	border: none;
	background: transparent;
	color: #6E8861;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	border-radius: 9999px;
	transition: background 0.18s ease, color 0.18s ease;
}
.tm-renewal__close:hover { background: rgba( 110, 136, 97, 0.12 ); color: #3D4E36; }
.tm-renewal__title {
	font-family: 'Be Vietnam Pro', sans-serif;
	font-weight: 800;
	font-size: 1.5rem;
	color: #3D4E36;
	margin: 0 0 10px;
	padding-right: 30px;
}
.tm-renewal p { margin: 0 0 12px; line-height: 1.55; }
.tm-renewal__list { margin: 0 0 16px; padding-left: 1.15em; }
.tm-renewal__list li { margin: 6px 0; line-height: 1.5; }
.tm-renewal__list strong { color: #3D4E36; }
.tm-renewal__help { margin: 0 0 8px; font-weight: 700; }
.tm-renewal__phone {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: 'Be Vietnam Pro', sans-serif;
	font-weight: 800;
	font-size: 1.3rem;
	color: #D97941;
	text-decoration: none;
	margin: 0 0 18px;
}
.tm-renewal__phone:hover { color: #c0682e; }
.tm-renewal__cta {
	display: block;
	width: 100%;
	border: none;
	cursor: pointer;
	background: #D97941;
	color: #fff;
	font-family: 'Be Vietnam Pro', sans-serif;
	font-weight: 800;
	font-size: 1.05rem;
	padding: 14px;
	border-radius: 9999px;
	transition: background 0.2s ease, transform 0.15s ease;
}
.tm-renewal__cta:hover { background: #c0682e; transform: translateY( -1px ); }
body.tm-renewal-open { overflow: hidden; }
@media ( max-width: 520px ) {
	.tm-renewal__dialog { padding: 22px 18px; }
	.tm-renewal__title { font-size: 1.3rem; }
	.tm-renewal__phone { font-size: 1.2rem; }
}
@media ( prefers-reduced-motion: reduce ) {
	.tm-renewal__dialog { animation: none; }
}