/* Tiszta Forrás Tér – „II. Rendelő Fénye”. Az elemek a rendelő falából jönnek. */
:root {
	--petrol: #14504F;
	--okker: #C58939;
	--arany-sotet: #94621F;
	--turkiz: #2E9EB5;
	--link: #1F7A8C;
	--rozsa: #CC9286;
	--levendula: #B9A3C9;
	--krem: #EBDCC6;
	--feher: #FAF5EE;
	--szoveg: #3D3A36;
	--cim: 'EB Garamond', Georgia, serif;
	--betu: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
	--arnyek: 0 24px 48px -32px rgba(110, 70, 20, .45);
	--oldal: clamp(20px, 5vw, 80px);
	--c: var(--okker);
}

*, *::before, *::after { box-sizing: border-box; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
	margin: 0;
	background: var(--feher);
	color: var(--szoveg);
	font: 400 17px/1.75 var(--betu);
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--petrol); }
:focus-visible { outline: 2px solid var(--okker); outline-offset: 3px; }

h1, h2, h3, h4 {
	font-family: var(--cim);
	font-weight: 500;
	color: var(--petrol);
	line-height: 1.1;
	margin: 0 0 .5em;
	text-wrap: balance;
}
h1 { font-size: clamp(44px, 6vw, 84px); }
h2 { font-size: clamp(34px, 4.2vw, 56px); }
h3 { font-size: clamp(26px, 2.6vw, 34px); }
h4 { font-size: 24px; }
h1 em, h2 em, h3 em { font-style: italic; }
p { margin: 0 0 1.1em; }
.lead { font-size: 19px; line-height: 1.7; max-width: 560px; }
.fali {
	font-family: var(--cim);
	font-style: italic;
	font-size: clamp(24px, 2.6vw, 36px);
	line-height: 1.35;
	letter-spacing: .04em;
	color: var(--petrol);
}

.screen-reader-text, .ugro:not(:focus) {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.ugro:focus { position: fixed; top: 10px; left: 10px; z-index: 100; background: var(--petrol); color: var(--feher); padding: 10px 16px; border-radius: 10px; }

/* ── Színek a területekhez (mint a kupakok a polcon) ── */
.szin-rozsa { --c: var(--rozsa); }
.szin-levendula { --c: var(--levendula); }
.szin-turkiz { --c: var(--turkiz); }
.szin-okker { --c: var(--okker); }
.szin-petrol { --c: var(--petrol); }

.cimke {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: .02em;
	margin-bottom: 12px;
}
.cimke::before {
	content: '';
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--c);
	box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .12);
	flex: none;
}
.tovabb { font-weight: 500; margin-top: auto; }
.tovabb a { text-decoration: none; }
.tovabb a::after { content: ' →'; }

/* ── Gombok: lekerekített téglalap, nem pirula ── */
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: 14px; margin: 28px 0 0; }
.wp-block-button__link, .fejlec-gomb {
	display: inline-block;
	background: var(--okker);
	color: var(--petrol);
	font: 700 19px/1.2 var(--betu);
	padding: 16px 28px;
	border: 1.5px solid var(--okker);
	border-radius: 12px;
	text-decoration: none;
	box-shadow: 0 8px 18px -12px rgba(140, 90, 30, .6);
	transition: background .2s, color .2s, border-color .2s;
}
.wp-block-button__link:hover { background: var(--petrol); border-color: var(--petrol); color: var(--feher); }
.is-style-petrol .wp-block-button__link, .fejlec-gomb { background: var(--petrol); border-color: var(--petrol); color: var(--feher); box-shadow: none; }
.is-style-petrol .wp-block-button__link:hover, .fejlec-gomb:hover { background: #0E3B3A; color: var(--feher); }
.is-style-korvonal .wp-block-button__link { background: transparent; color: var(--petrol); font-weight: 500; box-shadow: none; }
.is-style-korvonal .wp-block-button__link:hover { background: var(--petrol); border-color: var(--petrol); color: var(--feher); }
.hatter-petrol .is-style-korvonal .wp-block-button__link { color: var(--feher); }
.hatter-petrol .is-style-korvonal .wp-block-button__link:hover { background: var(--feher); color: var(--petrol); }

/* ── Boltíves kép (mint egy ablak vagy fülke) ── */
.wp-block-image { margin: 0 0 1.5em; }
.wp-block-image.is-style-boltiv img {
	width: 100%;
	aspect-ratio: 5 / 6;
	object-fit: cover;
	border-radius: 999px 999px 24px 24px;
	box-shadow: var(--arnyek);
}

/* ── Fejléc ── */
.fejlec {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 22px var(--oldal);
	position: relative;
	z-index: 20;
}
.logo { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.logo-jel { width: 42px; height: auto; }
.logo-szoveg { display: flex; flex-direction: column; gap: 3px; }
.logo-nev { height: 21px; width: auto; }
.logo-motto { font: italic 15px/1 var(--cim); color: var(--arany-sotet); }
.fomenu { display: flex; align-items: center; gap: 30px; }
.fomenu ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 28px; }
.fomenu li { position: relative; }
.fomenu a:not(.fejlec-gomb) { color: var(--szoveg); font-size: 15px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.fomenu a:not(.fejlec-gomb):hover, .fomenu .current-menu-item > a, .fomenu .current-menu-ancestor > a { color: var(--petrol); text-decoration: underline; text-decoration-color: var(--okker); }
.fomenu .sub-menu {
	position: absolute;
	top: 100%;
	left: -18px;
	display: none;
	flex-direction: column;
	gap: 0;
	min-width: 260px;
	padding: 12px 0;
	background: var(--feher);
	border-radius: 18px;
	box-shadow: var(--arnyek);
}
.fomenu .sub-menu a { display: block; padding: 8px 20px; white-space: normal; }
.fomenu li:hover > .sub-menu, .fomenu li:focus-within > .sub-menu { display: flex; }
.fejlec-gomb { padding: 13px 22px; font-size: 15px; }
.menu-gomb { display: none; }

@media (max-width: 1080px) {
	.menu-gomb {
		display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 7px;
		width: 44px; height: 44px; background: none; border: 0; cursor: pointer; padding: 0;
	}
	.menu-gomb span:not(.screen-reader-text) { display: block; width: 24px; height: 2px; background: var(--petrol); border-radius: 2px; transition: transform .2s; }
	.menu-gomb span:nth-child(2) { width: 16px; }
	.menu-nyitva .menu-gomb span:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
	.menu-nyitva .menu-gomb span:nth-child(2) { width: 24px; transform: translateY(-4.5px) rotate(-45deg); }
	.js .fomenu {
		display: none;
	}
	.fomenu {
		position: absolute;
		top: 100%;
		left: 12px;
		right: 12px;
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
		padding: 24px;
		background: var(--feher);
		border-radius: 22px;
		box-shadow: var(--arnyek);
	}
	.js.menu-nyitva .fomenu { display: flex; }
	.fomenu ul { flex-direction: column; gap: 4px; }
	.fomenu a:not(.fejlec-gomb) { display: block; padding: 8px 0; font-size: 17px; }
	.fomenu .sub-menu { position: static; display: flex; box-shadow: none; padding: 0 0 0 16px; min-width: 0; background: none; }
	.fomenu .sub-menu a { padding: 6px 0; font-size: 15px; }
	.fejlec-gomb { text-align: center; }
	.logo-motto { display: none; }
}

/* ── Szakaszok ── */
.tartalom > * { max-width: 720px; margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px; }
.tartalom > .tft-szakasz, .tartalom > .alignfull { max-width: none; }
.tartalom > .alignfull { padding: 0; }
.tartalom > .alignwide { max-width: 1200px; }
.tartalom > :not(.tft-szakasz):first-child { margin-top: 64px; }
.tartalom > :not(.tft-szakasz):last-child { margin-bottom: 96px; }
.tartalom > .tft-szakasz + :not(.tft-szakasz) { margin-top: 72px; }
.tartalom > :not(.tft-szakasz) + .tft-szakasz { margin-top: 72px; }
.tartalom > h2 { margin-top: 1.4em; }
.tartalom > h3 { margin-top: 1.3em; }

.tft-szakasz {
	position: relative;
	padding: clamp(64px, 9vw, 110px) var(--oldal);
}
.tft-szakasz > * { max-width: 1200px; margin-left: auto; margin-right: auto; position: relative; z-index: 1; }
.hatter-krem { background: var(--krem); }
.hatter-petrol { background: var(--petrol); color: var(--krem); }
.hatter-petrol h2, .hatter-petrol h3 { color: var(--feher); }
.hatter-petrol a:not(.wp-block-button__link) { color: var(--krem); }
.hatter-petrol .fali { color: var(--krem); }

/* Díszek: a juharág sarokdísz, az arany szalag átfutó vonal. Csak CSS, nincs üres blokk. */
.dsz-juhar, .dsz-szalag { overflow: hidden; }
.dsz-juhar::before {
	content: '';
	position: absolute;
	top: -20px;
	right: -30px;
	width: min(460px, 70vw);
	aspect-ratio: 400 / 280;
	background: url(../img/juhar.svg) no-repeat center / contain;
	transform: scaleX(-1);
	opacity: .32;
	pointer-events: none;
}
.hatter-petrol.dsz-juhar::before { background-image: url(../img/juhar-krem.svg); opacity: .35; }
.dsz-szalag::after {
	content: '';
	position: absolute;
	right: -60px;
	top: 24px;
	width: min(760px, 110vw);
	height: 130px;
	background: url(../img/szalag.svg) no-repeat center / 100% 100%;
	pointer-events: none;
}

/* ── Főoldal: nyitókép ── */
.tft-hero {
	display: grid;
	grid-template-columns: 1.15fr .85fr;
	align-items: center;
	gap: 40px;
	padding-top: 40px;
	overflow: hidden;
}
.tft-hero > * { margin: 0; max-width: none; }
.tft-hero::before {
	content: '';
	position: absolute;
	left: -30px;
	top: 0;
	width: min(640px, 70vw);
	aspect-ratio: 1000 / 1017;
	background: url(../img/folt-szeles.webp) no-repeat center / contain;
	pointer-events: none;
}
.tft-hero::after {
	content: '';
	position: absolute;
	left: 42%;
	top: 56%;
	width: 62%;
	height: 190px;
	background: url(../img/szalag.svg) no-repeat center / 100% 100%;
	transform: rotate(-14deg);
	pointer-events: none;
	z-index: 2;
}
.hero-szoveg { padding: 40px 0 40px clamp(0px, 3vw, 40px); }
.hero-szoveg::before {
	content: '';
	position: absolute;
	left: -60px;
	top: -40px;
	width: 420px;
	aspect-ratio: 400 / 280;
	background: url(../img/juhar.svg) no-repeat center / contain;
	opacity: .3;
	pointer-events: none;
}
.tft-hero h1 { font-size: clamp(54px, 7.8vw, 112px); line-height: .98; margin-bottom: 30px; }
.tft-hero .fali { margin-bottom: 44px; }
.hero-kep { position: relative; max-width: 500px; justify-self: center; width: 100%; }
.hero-kep::before {
	content: '';
	position: absolute;
	right: -70px;
	top: -60px;
	width: 88%;
	aspect-ratio: 700 / 1589;
	background: url(../img/folt-allo.webp) no-repeat top / contain;
	z-index: -1;
}
.hero-kep img { aspect-ratio: 500 / 690; }

/* ── Amiben segítek ── */
.szakasz-fej { max-width: 1200px; margin-bottom: 56px; }
.szakasz-fej .lead { max-width: 720px; }
.terulet-racs, .kartya-racs { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 28px; }
.kartya-racs { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.kartya {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--feher);
	border-radius: 30px;
	padding: 22px 22px 26px;
	box-shadow: var(--arnyek);
	overflow: hidden;
}
.kartya > :not(.wp-block-image) { margin-left: 16px; margin-right: 16px; }
.kartya .wp-block-image { margin-bottom: 26px; }
.kartya-nagy { grid-column: span 7; }
.kartya-kozep { grid-column: span 5; }
.kartya-nagy .wp-block-image img { aspect-ratio: 13 / 8; border-radius: 340px 340px 18px 18px / 180px 180px 18px 18px; object-position: 50% 45%; }
.kartya-kozep .wp-block-image img { aspect-ratio: 9 / 8; border-radius: 240px 240px 18px 18px / 160px 160px 18px 18px; object-position: 50% 30%; }
.kartya-nagy h3, .kartya-kozep h3 { font-size: clamp(32px, 3.2vw, 46px); }
.kartya-kicsi { grid-column: span 4; padding-top: 38px; }
.kartya-racs .kartya-kicsi { grid-column: auto; }
.kartya-kicsi::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 10px; background: var(--c); }
.kartya-kicsi p:not(.cimke):not(.tovabb) { font-size: 16px; line-height: 1.65; }
.termek-sav {
	grid-column: span 12;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	background: var(--petrol);
	color: var(--krem);
	border-radius: 30px;
	padding: 44px 52px;
	position: relative;
	overflow: hidden;
	--c: var(--krem);
}
.termek-sav::after {
	content: '';
	position: absolute;
	right: -60px;
	top: 10px;
	width: 700px;
	height: 120px;
	background: url(../img/szalag.svg) no-repeat center / 100% 100%;
	pointer-events: none;
}
.termek-sav > * { position: relative; z-index: 1; }
.termek-sav h3 { color: var(--feher); font-size: clamp(30px, 3vw, 40px); }
.termek-szoveg { max-width: 720px; }
.termek-szoveg p:last-child { margin: 0; }
.termek-sav .wp-block-buttons { margin: 0; flex: none; }
.termek-sav .is-style-korvonal .wp-block-button__link { color: var(--feher); }
.termek-sav .is-style-korvonal .wp-block-button__link:hover { background: var(--feher); color: var(--petrol); }

/* ── Idézet sáv ── */
.tft-idezet { text-align: left; }
.tft-idezet .fali { font-size: clamp(30px, 4vw, 52px); max-width: 900px; margin: 0 auto; }

/* ── Kép + szöveg (bemutatkozás) ── */
.kep-szoveg { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.kep-szoveg > * { margin: 0; max-width: none; }
.kep-szoveg .wp-block-image { max-width: 440px; width: 100%; justify-self: center; }
.kep-szoveg .wp-block-image img { aspect-ratio: 2 / 3; }

/* ── A rendelő ── */
.tft-rendelo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 3.5fr) minmax(0, 3.5fr); gap: 32px; align-items: end; }
.tft-rendelo > * { margin: 0; max-width: none; }
.rendelo-szoveg { align-self: center; padding-right: 20px; }
.rendelo-kep-1 img { aspect-ratio: 3 / 4.4; }
.rendelo-kep-2 { margin-bottom: 60px !important; }
.rendelo-kep-2 img { aspect-ratio: 3 / 4; }

/* ── Foglalás sáv ── */
.tft-foglalas > * { max-width: 760px; margin-left: 0; }
.tft-foglalas { padding-left: max(var(--oldal), calc((100vw - 1200px) / 2)); }
.tft-foglalas.dsz-szalag::after { top: auto; bottom: 30px; }

/* ── Aloldal fejléc ── */
.tft-fejlec {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
	gap: clamp(32px, 6vw, 80px);
	align-items: center;
	padding-top: 32px;
	overflow: hidden;
}
.tft-fejlec > * { margin: 0; max-width: none; }
.tft-fejlec::before {
	content: '';
	position: absolute;
	left: -40px;
	top: -30px;
	width: min(560px, 80vw);
	aspect-ratio: 1000 / 1017;
	background: url(../img/folt-szeles.webp) no-repeat center / contain;
	opacity: .9;
	pointer-events: none;
}
.fejlec-szoveg { padding: 40px 0 40px clamp(0px, 3vw, 40px); }
.fejlec-kep { max-width: 400px; width: 100%; justify-self: center; }
.fejlec-kep img { aspect-ratio: 4 / 5; }
.tft-fejlec:not(:has(.fejlec-kep)) { grid-template-columns: 1fr; }
.egyszeru-fejlec { padding-bottom: 0; }
.egyszeru-fejlec > * { max-width: 720px; }
.cikk-datum { font-size: 14px; color: var(--arany-sotet); margin-bottom: 8px; }

/* ── Szöveg közben ── */
/* Helykitöltő: amíg Bea szövege nem érkezik meg. Élesítés előtt egy se maradjon. */
.helykitolto { border: 1.5px dashed var(--okker); border-radius: 14px; padding: 14px 18px; font-size: 15px; color: var(--arany-sotet); background: rgba(197, 137, 57, .06); }
.tft-doboz { background: var(--krem); border-radius: 24px; padding: 32px 36px 14px; margin-top: 32px; margin-bottom: 32px; }
.tft-doboz h3 { font-size: 28px; }
.tartalom > ul, .tartalom > ol, .tft-doboz ul { padding-left: 22px; }
.tartalom li { margin-bottom: .4em; }
.tartalom li::marker { color: var(--okker); }
.wp-block-quote { border-left: 2px solid var(--okker); margin: 32px auto; padding: 4px 0 4px 24px; font: italic 24px/1.45 var(--cim); color: var(--petrol); }
.wp-block-separator { border: 0; height: 30px; background: url(../img/szalag-alahuz.svg) no-repeat center / 300px 30px; margin: 48px auto; }

/* ── Blog ── */
.cikk-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 32px; }
.cikk-kartya { background: var(--feher); border: 1.5px solid var(--krem); border-radius: 26px; padding: 22px 26px 26px; }
.cikk-kartya img { border-radius: 18px; margin-bottom: 18px; aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.cikk-kartya h2 { font-size: 30px; }
.cikk-kartya h2 a { color: var(--petrol); text-decoration: none; }
.cikk-kep { max-width: 1000px; margin: 40px auto 0; border-radius: 26px; }
.pagination { margin-top: 48px; }
.nav-links { display: flex; gap: 12px; justify-content: center; }

/* ── Lábléc ── */
.lablec { background: var(--petrol); color: var(--krem); padding: 80px var(--oldal) 32px; position: relative; overflow: hidden; }
.lablec::before {
	content: '';
	position: absolute;
	right: -40px;
	top: -30px;
	width: 420px;
	aspect-ratio: 400 / 280;
	background: url(../img/juhar-krem.svg) no-repeat center / contain;
	transform: scaleX(-1);
	opacity: .3;
	pointer-events: none;
}
.lablec-belso { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 48px; position: relative; }
.lablec .logo-nev { height: 24px; }
.lablec .logo-jel { width: 54px; }
.lablec .logo-motto { color: var(--okker); }
.lablec-idezet { font: italic 22px/1.4 var(--cim); letter-spacing: .03em; margin-top: 28px; }
.lablec-cim { font: 500 24px/1.2 var(--cim); color: var(--feher); }
.lablec a { color: var(--krem); }
.lablec a:hover { color: var(--feher); }
.lablec-menu ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lablec-also { max-width: 1200px; margin: 56px auto 0; padding-top: 24px; border-top: 1px solid rgba(235, 220, 198, .2); font-size: 14px; }

/* ── Mobil ── */
@media (max-width: 900px) {
	.tft-hero, .kep-szoveg, .tft-fejlec { grid-template-columns: 1fr; }
	.tft-hero { padding-top: 8px; }
	.hero-kep { order: -1; max-width: 300px; justify-self: end; margin-right: 8px; }
	.hero-kep::before, .hero-szoveg::before { display: none; }
	.hero-kep img { aspect-ratio: 4 / 5; }
	.tft-hero::after { left: -8%; top: 22%; width: 120%; height: 100px; transform: rotate(-10deg); }
	.hero-szoveg { padding: 0; }
	.tft-hero .wp-block-buttons { flex-direction: column; }
	.tft-hero .wp-block-button__link { display: block; text-align: center; }
	.fejlec-kep { max-width: 280px; justify-self: start; }
	.terulet-racs { grid-template-columns: 1fr; }
	.kartya-nagy, .kartya-kozep, .kartya-kicsi, .termek-sav { grid-column: auto; }
	.termek-sav { flex-direction: column; align-items: flex-start; padding: 36px 28px; }
	.tft-rendelo { grid-template-columns: 1fr 1fr; }
	.rendelo-szoveg { grid-column: 1 / -1; padding: 0; }
	.rendelo-kep-2 { margin-bottom: 0 !important; }
	.lablec-belso { grid-template-columns: 1fr; gap: 32px; }
}