/* Vikingo Súgó – a /kapcsolat/ oldal kereső+cikklista blokkja és a
   cikkoldalak formázása.

   A formanyelv a tematika-widgeté: 1px homok vonalak, szögletes, árnyék
   nélkül; az EGYETLEN lekerekített elem a korall pill CTA (az űrlap-
   alapréteg gombjának mintája). A színek az Elementor kit tokenjeiből
   jönnek, tartalék értékkel. */

/* Az atomic widget burkolója flex-tétel a konténerben: tartalom-szélességre
   zsugorodna, ezért a burkoló kapja a teljes szélességet (a twig adja). */
.vk-vhp-teljes {
	width: 100%;
	min-width: 0;
}

.vk-sugo {
	/* A blokk maga dobozol (1180 px, középre): teljes szélességű konténerben
	   sem folyik szét, keskenyebbe belefér. A width kell: flex-oszlopban az
	   auto margó tartalom-szélességre húzná. */
	width: 100%;
	max-width: 1180px;
	margin-left: auto;
	margin-right: auto;
}

.vk-sugo,
.vk-sugo-cikk {
	--vksugo-ink: var(--vk-ink, #3e2e45);
	--vksugo-cream: var(--vk-paper, #f3eeeb);
	--vksugo-korall: var(--vk-coral, #ff544d);
	--vksugo-korall2: var(--vk-coral-hover, #e83d36);
	--vksugo-tint: var(--vk-paper, #F3EEEB);
	--vksugo-homok: var(--vk-sand, #dcd0c3);
	--vksugo-mauve: var(--vk-mauve, #7a687f);
	--vksugo-feher: #ffffff;
	--vksugo-cim-font: var(--vk-clash-display, 'Clash Display', system-ui, sans-serif);
	--vksugo-mono-font: var(--vk-dm-mono, 'DM Mono', ui-monospace, monospace);

	color: var(--vksugo-ink);
}

/* ---- HERO: a kereső a főszereplő (ink panel, mint az űrlap bal oldala) ---- */

.vk-sugo .vk-sugo__hero {
	padding: clamp(28px, 4vw, 44px) clamp(22px, 4vw, 44px);
	background: var(--vksugo-ink);
	color: var(--vksugo-cream);
}

.vk-sugo .vk-sugo__felcim {
	margin: 0 0 8px;
	font-family: var(--vksugo-mono-font);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--vksugo-korall);
}

.vk-sugo .vk-sugo__cim {
	margin: 0 0 22px;
	font-family: var(--vksugo-cim-font);
	font-weight: 500;
	font-size: clamp(26px, 3.4vw, 36px);
	line-height: 1.15;
	color: var(--vksugo-cream);
}

/* A kereső: nagy, fehér pill - a formanyelv egyetlen lekerekített eleme a
   CTA mellett, mert itt ez a cselekvés. */
.vk-sugo .vk-sugo__kereso {
	display: flex;
	align-items: center;
	gap: 14px;
	max-width: 720px;
	min-height: 60px;
	padding: 0 20px 0 22px;
	border: 2px solid transparent;
	border-radius: 999px;
	background: var(--vksugo-feher);
	color: var(--vksugo-ink);
	transition: border-color 0.15s, box-shadow 0.15s;
}

.vk-sugo .vk-sugo__kereso:focus-within {
	border-color: var(--vksugo-korall);
	box-shadow: 0 0 0 4px rgba(255, 84, 77, 0.22);
}

.vk-sugo .vk-sugo__kereso-ikon {
	width: 22px;
	height: 22px;
	flex: none;
	color: var(--vksugo-korall);
}

.vk-sugo .vk-sugo__kereso input[type="search"] {
	flex: 1;
	min-width: 0;
	min-height: 0;
	height: auto;
	padding: 16px 0;
	margin: 0;
	/* Az Elementor kit minden input[type=search]-re keretet és hátteret
	   kényszerít; a pill ad keretet, a mező maga csupasz marad. */
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	font-family: inherit;
	font-size: 17px; /* 16px alatt az iOS ránagyít a mezőre */
	line-height: 1.3;
	color: var(--vksugo-ink);
	outline: none;
}

.vk-sugo .vk-sugo__kereso input[type="search"]:focus {
	border: 0 !important;
	box-shadow: none !important;
	outline: none;
}

.vk-sugo .vk-sugo__kereso input[type="search"]::placeholder {
	color: var(--vksugo-mauve);
}

.vk-sugo .vk-sugo__kereso input[type="search"]::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

.vk-sugo .vk-sugo__torol {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	flex: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: var(--vksugo-cream);
	color: var(--vksugo-mauve);
	cursor: pointer;
	transition: color 0.15s, background 0.15s;
}

.vk-sugo .vk-sugo__torol:hover,
.vk-sugo .vk-sugo__torol:focus-visible {
	border: 0;
	border-radius: 999px;
	background: var(--vksugo-tint);
	color: var(--vksugo-korall);
}

.vk-sugo .vk-sugo__torol svg {
	width: 14px;
	height: 14px;
}

.vk-sugo .vk-sugo__torol[hidden] {
	display: none;
}

/* Gyakori kérdések chipek a kereső alatt */
.vk-sugo .vk-sugo__gyakori {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 10px;
	margin-top: 18px;
}

.vk-sugo .vk-sugo__gyakori-cimke {
	font-family: var(--vksugo-mono-font);
	font-size: 12.5px;
	letter-spacing: 0.04em;
	color: var(--vk-course-dusty-mauve, #B5A2BB);
	margin-right: 2px;
}

.vk-sugo .vk-sugo__chip {
	display: inline-block;
	padding: 7px 14px;
	border: 1px solid rgba(246, 239, 232, 0.28);
	border-radius: 999px;
	color: var(--vksugo-cream);
	font-size: 13.5px;
	line-height: 1.3;
	text-decoration: none;
	transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.vk-sugo .vk-sugo__chip:hover,
.vk-sugo .vk-sugo__chip:focus-visible {
	border-color: var(--vksugo-korall);
	background: var(--vksugo-korall);
	color: var(--vksugo-feher);
}

/* Ha a záró sáv kimarad, az űrlap következik: a blokk adja a levegőt. */
.vk-sugo.vk-sugo--urlap-kovetkezik {
	margin-bottom: clamp(48px, 6vw, 80px);
}

/* Krém hero: ugyanaz a felépítés, világos alapon - a /kapcsolat/-on az
   űrlap ink panelje az egyetlen sötét blokk. */
.vk-sugo .vk-sugo__hero--krem {
	background: var(--vksugo-cream);
	color: var(--vksugo-ink);
	border: 1px solid var(--vksugo-homok);
}

.vk-sugo .vk-sugo__hero--krem .vk-sugo__cim {
	color: var(--vksugo-ink);
}

.vk-sugo .vk-sugo__hero--krem .vk-sugo__kereso {
	border-color: var(--vksugo-homok);
}

.vk-sugo .vk-sugo__hero--krem .vk-sugo__kereso:focus-within {
	border-color: var(--vksugo-korall);
}

.vk-sugo .vk-sugo__hero--krem .vk-sugo__gyakori-cimke {
	color: var(--vksugo-mauve);
}

.vk-sugo .vk-sugo__hero--krem .vk-sugo__chip {
	border-color: var(--vksugo-homok);
	background: var(--vksugo-feher);
	color: var(--vksugo-ink);
}

.vk-sugo .vk-sugo__hero--krem .vk-sugo__chip:hover,
.vk-sugo .vk-sugo__hero--krem .vk-sugo__chip:focus-visible {
	border-color: var(--vksugo-korall);
	background: var(--vksugo-korall);
	color: var(--vksugo-feher);
}

/* Fejsáv-alak: a krém hero kitör a hasábból a képernyő széléig (full-bleed
   képlet), a belső tartalom a hasáb bal élén marad (a kifutás mértékével
   behúzva), alul a homok vonal zárja - ugyanaz a geometria, mint a súgó- és
   jogi oldalak fejsávja. A doboz-keret itt nem kell. */
.vk-sugo .vk-sugo__hero--sav {
	width: 100vw;
	max-width: none;
	margin-left: calc(50% - 50vw);
	padding: clamp(36px, 5vw, 60px) calc(50vw - 50%) clamp(32px, 4.4vw, 52px);
	border: 0;
	border-bottom: 1px solid var(--vksugo-homok);
}

.vk-sugo .vk-sugo__hero--sav .vk-sugo__cim {
	font-size: clamp(30px, 4.5vw, 44px);
}

.vk-sugo .vk-sugo__hero--sav + .vk-sugo__talalatok,
.vk-sugo .vk-sugo__hero--sav ~ .vk-sugo__kategoriak {
	margin-top: clamp(32px, 4vw, 48px);
}

/* ---- Kategória-kártyák: homok rács, mint a tematika ---- */

.vk-sugo .vk-sugo__kategoriak {
	display: grid;
	/* Négy kategória: 2x2 - hármas rácsban egy kártya árván lógna. */
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px;
	margin-top: 26px;
}

@media (max-width: 700px) {
	.vk-sugo .vk-sugo__kategoriak {
		grid-template-columns: 1fr;
	}
}

.vk-sugo .vk-sugo__kategoria {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--vksugo-homok);
	background: var(--vksugo-feher);
	align-self: start;
}

.vk-sugo .vk-sugo__kategoria-fej {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 20px 20px 18px;
	border-bottom: 1px solid var(--vksugo-homok);
}

.vk-sugo .vk-sugo__kategoria-ikon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex: none;
	box-sizing: border-box;
	background: var(--vksugo-feher);
	border: 1px solid var(--vksugo-homok);
	color: var(--vksugo-korall);
}

.vk-sugo .vk-sugo__kategoria-ikon svg {
	width: 22px;
	height: 22px;
}

.vk-sugo .vk-sugo__kategoria-szoveg {
	min-width: 0;
}

.vk-sugo .vk-sugo__kategoria-cim {
	margin: 0;
	font-family: var(--vksugo-cim-font);
	font-weight: 500;
	font-size: 18px;
	line-height: 1.25;
	letter-spacing: 0.01em;
	color: var(--vksugo-ink);
}

.vk-sugo .vk-sugo__kategoria-leiras {
	margin: 4px 0 0;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--vksugo-mauve);
}

.vk-sugo .vk-sugo__lista {
	list-style: none;
	margin: 0;
	padding: 0;
}

.vk-sugo .vk-sugo__lista li {
	margin: 0;
	padding: 0;
	border-bottom: 1px solid var(--vksugo-homok);
}

.vk-sugo .vk-sugo__lista li:last-child {
	border-bottom: none;
}

/* Legfeljebb két soros cím: a kártya ritmusa marad, a kérdés mégis
   olvasható; a nyíl a felső sorhoz igazodik. */
.vk-sugo .vk-sugo__lista a {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
	min-height: 50px;
	padding: 12px 20px;
	color: var(--vksugo-ink);
	text-decoration: none;
	font-size: 14.5px;
	line-height: 1.4;
	transition: background 0.15s, color 0.15s;
}

.vk-sugo .vk-sugo__sor-cim {
	min-width: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.vk-sugo .vk-sugo__lista a .vk-sugo__nyil {
	margin-top: 3px;
}

.vk-sugo .vk-sugo__lista a:hover,
.vk-sugo .vk-sugo__lista a:focus-visible {
	color: var(--vksugo-korall);
}

.vk-sugo .vk-sugo__nyil {
	width: 15px;
	height: 15px;
	flex: none;
	color: var(--vksugo-mauve);
	transition: color 0.15s, transform 0.15s;
}

.vk-sugo .vk-sugo__lista a:hover .vk-sugo__nyil,
.vk-sugo .vk-sugo__lista a:focus-visible .vk-sugo__nyil {
	color: var(--vksugo-korall);
	transform: translateX(3px);
}

/* „Összes cikk" - natív details, JS nélkül is nyílik. Flex + order: a
   kinyitott lista UTÁN áll a „Kevesebb", nem a közepén. */
.vk-sugo .vk-sugo__tobbi {
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--vksugo-homok);
}

.vk-sugo .vk-sugo__tobbi[open] .vk-sugo__tobbi-gomb {
	order: 2;
	border-top: 1px solid var(--vksugo-homok);
}

.vk-sugo .vk-sugo__tobbi-gomb {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 13px 20px;
	list-style: none;
	cursor: pointer;
	font-family: var(--vksugo-mono-font);
	font-size: 13px;
	letter-spacing: 0.02em;
	color: var(--vksugo-korall);
	transition: background 0.15s;
}

.vk-sugo .vk-sugo__tobbi-gomb::-webkit-details-marker {
	display: none;
}

.vk-sugo .vk-sugo__tobbi-gomb:hover,
.vk-sugo .vk-sugo__tobbi-gomb:focus-visible {
	color: var(--vksugo-korall2);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.vk-sugo .vk-sugo__tobbi-ikon {
	width: 14px;
	height: 14px;
	transition: transform 0.15s;
}

.vk-sugo .vk-sugo__tobbi-zar {
	display: none;
}

.vk-sugo .vk-sugo__tobbi[open] .vk-sugo__tobbi-nyit {
	display: none;
}

.vk-sugo .vk-sugo__tobbi[open] .vk-sugo__tobbi-zar {
	display: inline;
}

.vk-sugo .vk-sugo__tobbi[open] .vk-sugo__tobbi-ikon {
	transform: rotate(180deg);
}

.vk-sugo .vk-sugo__lista--tobbi {
	order: 1;
}

/* Zárt kártya: a fej + „N cikk" gomb; a lista kattintásra nyílik. */
.vk-sugo .vk-sugo__kategoria--zart .vk-sugo__kategoria-fej {
	border-bottom: none;
	padding-bottom: 8px;
}

.vk-sugo .vk-sugo__kategoria--zart .vk-sugo__tobbi {
	border-top: none;
}

.vk-sugo .vk-sugo__kategoria--zart .vk-sugo__tobbi-gomb {
	padding: 6px 20px 18px 78px;
}

.vk-sugo .vk-sugo__kategoria--zart .vk-sugo__tobbi[open] .vk-sugo__tobbi-gomb {
	padding: 13px 20px;
}

.vk-sugo .vk-sugo__kategoria--zart .vk-sugo__lista--tobbi {
	border-top: 1px solid var(--vksugo-homok);
}

@media (max-width: 560px) {
	.vk-sugo .vk-sugo__kategoria--zart .vk-sugo__tobbi-gomb {
		padding-left: 20px;
	}
}

/* Zárt kártya linkje: „13 cikk ->" a kategória-oldalra. (Gomb volt, a kit
   button-szabálya ellen kimondott értékekkel - linknek is jó így.) */
.vk-sugo .vk-sugo__kategoria .vk-sugo__kategoria-link,
.vk-sugo .vk-sugo__kategoria .vk-sugo__kategoria-link:hover,
.vk-sugo .vk-sugo__kategoria .vk-sugo__kategoria-link:focus,
.vk-sugo .vk-sugo__kategoria .vk-sugo__kategoria-link:active {
	width: auto;
	margin: 0;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--vksugo-korall) !important;
	font-family: var(--vksugo-mono-font);
	font-size: 13px;
	letter-spacing: 0.02em;
	line-height: 1.3;
	text-transform: none;
	cursor: pointer;
}

.vk-sugo .vk-sugo__kategoria .vk-sugo__kategoria-link:hover,
.vk-sugo .vk-sugo__kategoria .vk-sugo__kategoria-link:focus-visible {
	color: var(--vksugo-korall2) !important;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.vk-sugo .vk-sugo__tobbi-ikon--nyil {
	transition: transform 0.15s;
}

.vk-sugo .vk-sugo__kategoria-link:hover .vk-sugo__tobbi-ikon--nyil,
.vk-sugo .vk-sugo__kategoria-link:focus-visible .vk-sugo__tobbi-ikon--nyil {
	transform: translateX(3px);
}

/* ---- Keresési találatok ---- */

.vk-sugo .vk-sugo__talalatok {
	margin-top: 26px;
	border: 1px solid var(--vksugo-homok);
	background: var(--vksugo-feher);
}

.vk-sugo .vk-sugo__talalatok[hidden],
.vk-sugo .vk-sugo__kategoriak[hidden],
.vk-sugo .vk-sugo__nincs[hidden],
.vk-sugo .vk-sugo__talalat-fej[hidden] {
	display: none;
}

.vk-sugo .vk-sugo__talalat-fej {
	margin: 0;
	padding: 14px 20px;
	border-bottom: 1px solid var(--vksugo-homok);
	font-family: var(--vksugo-mono-font);
	font-size: 13px;
	letter-spacing: 0.02em;
	color: var(--vksugo-mauve);
}

.vk-sugo .vk-sugo__talalat-lista {
	list-style: none;
	margin: 0;
	padding: 0;
}

.vk-sugo .vk-sugo__talalat-lista li {
	margin: 0;
	border-bottom: 1px solid var(--vksugo-homok);
}

.vk-sugo .vk-sugo__talalat-lista li:last-child {
	border-bottom: none;
}

.vk-sugo .vk-sugo__talalat-lista a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 16px 20px;
	color: var(--vksugo-ink);
	text-decoration: none;
	transition: background 0.15s;
}

.vk-sugo .vk-sugo__talalat-lista a:hover .vk-sugo__talalat-cim,
.vk-sugo .vk-sugo__talalat-lista a:focus-visible .vk-sugo__talalat-cim {
	color: var(--vksugo-korall);
}

.vk-sugo .vk-sugo__talalat-lista a:hover .vk-sugo__nyil,
.vk-sugo .vk-sugo__talalat-lista a:focus-visible .vk-sugo__nyil {
	color: var(--vksugo-korall);
	transform: translateX(3px);
}

.vk-sugo .vk-sugo__talalat-szoveg {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.vk-sugo .vk-sugo__talalat-fej-sor {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 12px;
}

.vk-sugo .vk-sugo__talalat-cim {
	font-weight: 500;
	font-size: 15.5px;
	line-height: 1.35;
}

.vk-sugo .vk-sugo__talalat-kat {
	font-family: var(--vksugo-mono-font);
	font-size: 11.5px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--vksugo-mauve);
}

.vk-sugo .vk-sugo__talalat-kivonat {
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--vksugo-mauve);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.vk-sugo mark {
	background: rgba(122, 104, 127, 0.18);
	color: inherit;
}

/* Üres találat: kijárat, nem csend */
.vk-sugo .vk-sugo__nincs {
	padding: 26px 20px 28px;
	text-align: center;
}

.vk-sugo .vk-sugo__nincs-cim {
	margin: 0 0 6px;
	font-family: var(--vksugo-cim-font);
	font-weight: 500;
	font-size: 19px;
	color: var(--vksugo-ink);
}

.vk-sugo .vk-sugo__nincs-szoveg {
	margin: 0 auto 18px;
	max-width: 460px;
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--vksugo-mauve);
}

/* ---- Záró sáv: a kijárat az űrlaphoz ---- */

.vk-sugo .vk-sugo__zaro {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px 28px;
	flex-wrap: wrap;
	margin-top: 26px;
	padding: 22px 24px;
	border: 1px solid var(--vksugo-homok);
	background: var(--vksugo-cream);
}

.vk-sugo .vk-sugo__zaro-cim {
	margin: 0 0 4px;
	font-family: var(--vksugo-cim-font);
	font-weight: 500;
	font-size: 19px;
	line-height: 1.25;
	color: var(--vksugo-ink);
}

.vk-sugo .vk-sugo__zaro-alcim {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--vksugo-mauve);
}

.vk-sugo .vk-sugo-cta__nyil,
.vk-sugo-cta .vk-sugo-cta__nyil {
	width: 15px;
	height: 15px;
	flex: none;
}

@media (max-width: 560px) {
	.vk-sugo .vk-sugo__kereso {
		min-height: 54px;
		padding: 0 14px 0 16px;
	}

	.vk-sugo .vk-sugo__kereso input[type="search"] {
		font-size: 16px;
	}

	.vk-sugo .vk-sugo__zaro {
		padding: 20px;
	}

	.vk-sugo .vk-sugo__zaro .vk-sugo-cta {
		width: 100%;
	}
}

/* szerkesztőknek szóló jelzés üres banknál */
.vk-sugo__uzenet {
	border: 1px dashed var(--vk-coral, #ff544d);
	background: var(--vk-paper, #f3eeeb);
	color: var(--vk-ink, #3e2e45);
	padding: 24px;
	font-size: 14px;
	line-height: 1.5;
}

/* ---- A cikkoldal (templates/sugo-cikk.php) ---- */

/* A téma alap tartalom-kerete itt nem kell: a fejsáv teljes szélességű. */
.vk-sugo-oldal {
	--vksugo-ink: var(--vk-ink, #3e2e45);
	--vksugo-cream: var(--vk-paper, #f3eeeb);
	--vksugo-korall: var(--vk-coral, #ff544d);
	--vksugo-korall2: var(--vk-coral-hover, #e83d36);
	--vksugo-tint: var(--vk-paper, #F3EEEB);
	--vksugo-homok: var(--vk-sand, #dcd0c3);
	--vksugo-mauve: var(--vk-mauve, #7a687f);
	--vksugo-feher: #ffffff;
	--vksugo-cim-font: var(--vk-clash-display, 'Clash Display', system-ui, sans-serif);
	--vksugo-mono-font: var(--vk-dm-mono, 'DM Mono', ui-monospace, monospace);

	max-width: none;
	margin: 0;
	padding: 0 0 clamp(48px, 6vw, 88px);
	color: var(--vksugo-ink);
}

/* Betűvastagság: a projektben legfeljebb 500. A kit minden linket 600-ra,
   a böngésző a strong-ot 700-ra tenné - itt egyik sem. */
.vk-sugo-oldal a,
.vk-sugo-oldal strong,
.vk-sugo-oldal b,
.vk-sugo a,
.vk-sugo strong,
.vk-sugo b,
.vk-sugo-kat a,
.vk-sugo-kat strong {
	font-weight: 500;
}

.vk-sugo-oldal .vk-sugo-oldal__keret {
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 clamp(18px, 3vw, 32px);
	box-sizing: border-box;
}

/* Fejsáv */
.vk-sugo-oldal .vk-sugo-oldal__fej {
	padding: clamp(28px, 4vw, 52px) 0 clamp(26px, 3.6vw, 44px);
	border-bottom: 1px solid var(--vksugo-homok);
	background: var(--vksugo-cream);
	/* A téma 1140 px-re szorítja a főtartalmat; a sáv a full-bleed képlettel
	   (100vw + calc(50% - 50vw)) tör ki belőle, a belső keret marad. */
	width: 100vw;
	margin-left: calc(50% - 50vw);
}

.vk-sugo-oldal .vk-sugo-oldal__morzsa {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 16px;
	font-family: var(--vksugo-mono-font);
	font-size: 13px;
	letter-spacing: 0.02em;
	color: var(--vksugo-mauve);
}

.vk-sugo-oldal .vk-sugo-oldal__morzsa a {
	color: var(--vksugo-mauve);
	text-decoration: none;
	transition: color 0.15s;
}

.vk-sugo-oldal .vk-sugo-oldal__morzsa a:hover {
	color: var(--vksugo-korall);
}

.vk-sugo-oldal .vk-sugo-oldal__morzsa-elv {
	color: var(--vksugo-homok);
}

.vk-sugo-oldal .vk-sugo-oldal__cim {
	max-width: 820px;
	margin: 0 0 18px;
	font-family: var(--vksugo-cim-font);
	font-weight: 500;
	font-size: clamp(28px, 4vw, 44px);
	line-height: 1.12;
	letter-spacing: -0.01em;
	color: var(--vksugo-ink);
}

.vk-sugo-oldal .vk-sugo-oldal__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 22px;
	font-family: var(--vksugo-mono-font);
	font-size: 13px;
	letter-spacing: 0.02em;
	color: var(--vksugo-mauve);
}

.vk-sugo-oldal .vk-sugo-oldal__meta-tetel {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.vk-sugo-oldal .vk-sugo-oldal__meta-tetel--kat {
	color: var(--vksugo-ink);
}

.vk-sugo-oldal .vk-sugo-oldal__meta-ikon {
	display: inline-flex;
	width: 16px;
	height: 16px;
	flex: none;
	color: var(--vksugo-korall);
}

.vk-sugo-oldal .vk-sugo-oldal__meta-ikon svg {
	width: 16px;
	height: 16px;
}

/* Törzs: cikk + oldalsáv */
.vk-sugo-oldal .vk-sugo-oldal__racs {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: clamp(32px, 5vw, 72px);
	align-items: start;
	padding-top: clamp(30px, 4vw, 52px);
}

@media (max-width: 960px) {
	.vk-sugo-oldal .vk-sugo-oldal__racs {
		grid-template-columns: 1fr;
	}
}

.vk-sugo-cikk {
	max-width: 720px;
	margin: 0;
	font-size: 17px;
	line-height: 1.7;
	color: var(--vksugo-ink);
}

.vk-sugo-cikk .vk-sugo-cikk__torzs > :first-child {
	margin-top: 0;
}

.vk-sugo-cikk h2 {
	margin: 40px 0 14px;
	padding-top: 22px;
	border-top: 1px solid var(--vksugo-homok);
	font-family: var(--vksugo-cim-font);
	font-weight: 500;
	font-size: 24px;
	line-height: 1.25;
}

.vk-sugo-cikk h2 strong {
	font-weight: 500;
}

.vk-sugo-cikk h3 {
	margin: 28px 0 10px;
	font-family: var(--vksugo-cim-font);
	font-weight: 500;
	font-size: 19px;
	line-height: 1.3;
}

.vk-sugo-cikk p {
	margin: 0 0 18px;
}

.vk-sugo-cikk ul,
.vk-sugo-cikk ol {
	margin: 0 0 18px;
	padding-left: 26px;
}

.vk-sugo-cikk li {
	margin-bottom: 8px;
}

.vk-sugo-cikk li::marker {
	color: var(--vksugo-korall);
	font-family: var(--vksugo-mono-font);
	font-size: 14px;
}

.vk-sugo-cikk em {
	color: var(--vksugo-mauve);
}

.vk-sugo-cikk a {
	color: var(--vksugo-korall);
	text-decoration: underline;
	text-decoration-color: rgba(255, 84, 77, 0.35);
	text-underline-offset: 3px;
	transition: text-decoration-color 0.15s, color 0.15s;
}

.vk-sugo-cikk a:hover {
	color: var(--vksugo-korall2);
	text-decoration-color: currentColor;
}

/* Lépés-blokk: a „1. lépés:” bekezdés sorszám-jelvénnyel, a szám a
   data-lepes attribútumból. A lépés utáni bekezdések és képek behúzva
   követik, amíg a következő lépés nem jön. */
.vk-sugo-cikk .vk-sugo-lepes {
	position: relative;
	margin: 30px 0 12px;
	padding-left: 52px;
	font-size: 17px;
	font-weight: 500;
	line-height: 1.5;
}

.vk-sugo-cikk .vk-sugo-lepes strong {
	font-weight: 500;
}

.vk-sugo-cikk .vk-sugo-lepes::before {
	content: attr(data-lepes);
	position: absolute;
	left: 0;
	top: -4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background: var(--vksugo-korall);
	color: var(--vksugo-feher);
	font-family: var(--vksugo-mono-font);
	font-size: 15px;
	font-weight: 500;
	line-height: 1;
}

.vk-sugo-cikk .vk-sugo-lepes ~ p:not(.vk-sugo-lepes),
.vk-sugo-cikk .vk-sugo-lepes ~ ul,
.vk-sugo-cikk .vk-sugo-lepes ~ ol,
.vk-sugo-cikk .vk-sugo-lepes ~ .vk-sugo-kep {
	margin-left: 52px;
}

.vk-sugo-cikk .vk-sugo-lepes ~ h2 {
	margin-left: 0;
}

/* A h2 lezárja a lépés-sorozatot: utána a behúzás megszűnik. */
.vk-sugo-cikk .vk-sugo-lepes ~ h2 ~ p:not(.vk-sugo-lepes),
.vk-sugo-cikk .vk-sugo-lepes ~ h2 ~ ul,
.vk-sugo-cikk .vk-sugo-lepes ~ h2 ~ ol,
.vk-sugo-cikk .vk-sugo-lepes ~ h2 ~ .vk-sugo-kep {
	margin-left: 0;
}

@media (max-width: 560px) {
	.vk-sugo-cikk .vk-sugo-lepes {
		padding-left: 46px;
	}

	.vk-sugo-cikk .vk-sugo-lepes ~ p:not(.vk-sugo-lepes),
	.vk-sugo-cikk .vk-sugo-lepes ~ ul,
	.vk-sugo-cikk .vk-sugo-lepes ~ ol,
	.vk-sugo-cikk .vk-sugo-lepes ~ .vk-sugo-kep {
		margin-left: 0;
	}
}

/* A kép a blokk-szerkesztő kép-blokkja (2026-08-28-tól): <figure class="wp-block-image
   vk-sugo-kep"><img>. A margó és a behúzás a figure-é, a keret a képé. */
.vk-sugo-cikk figure.vk-sugo-kep {
	margin: 22px 0 26px;
}

.vk-sugo-cikk .vk-sugo-kep img,
.vk-sugo-cikk img.vk-sugo-kep {
	display: block;
	max-width: 100%;
	height: auto;
	border: 1px solid var(--vksugo-homok);
	background: var(--vksugo-feher);
}

/* A cikk-törzsben lévő CTA-linkek (import hozta) blokk-szintű, saját sor */
.vk-sugo-cikk p > a.vk-sugo-cta:only-child {
	margin: 4px 0 6px;
}

/* A korall pill CTA: az űrlap-alapréteg gombjának mintája - az egyetlen
   lekerekített elem a formanyelvben. */
.vk-sugo-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	padding: 13px 28px;
	border: 0;
	border-radius: 999px;
	background: var(--vksugo-korall, #ff544d);
	color: #ffffff !important;
	font-family: var(--vksugo-mono-font, 'DM Mono', ui-monospace, monospace);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.2;
	/* A téma a cikk-tartalom linkjeit aláhúzza; a gomb nem link-szöveg. */
	text-decoration: none !important;
	cursor: pointer;
	transition: background 0.15s;
}

.vk-sugo-cta:hover,
.vk-sugo-cta:focus-visible {
	background: var(--vksugo-korall2, #e83d36);
	color: #ffffff;
}

.vk-sugo-cta .vk-sugo-cta__nyil {
	width: 15px;
	height: 15px;
	flex: none;
}

/* ---- „Segített ez a cikk?" - a visszajelző sor ---- */

.vk-sugo-cikk .vk-sugo-cikk__szavazas {
	margin-top: 40px;
	padding: 18px 22px;
	border: 1px solid var(--vksugo-homok);
	background: var(--vksugo-feher);
}

.vk-sugo-cikk .vk-sugo-cikk__szavazas [hidden] {
	display: none !important;
}

.vk-sugo-cikk .vk-sugo-cikk__szavazas-sor {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 20px;
}

.vk-sugo-cikk .vk-sugo-cikk__szavazas-kerdes {
	font-family: var(--vksugo-cim-font);
	font-weight: 500;
	font-size: 18px;
	line-height: 1.3;
}

.vk-sugo-cikk .vk-sugo-cikk__szavazas-gombok {
	display: inline-flex;
	gap: 8px;
}

/* A kit gombstílusa ellen mindent kimondunk: szögletes, homok keret. */
.vk-sugo-cikk .vk-sugo-cikk__szavaz,
.vk-sugo-cikk .vk-sugo-cikk__hiany-kuld {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	margin: 0;
	padding: 8px 16px;
	border: 1px solid var(--vksugo-homok);
	border-radius: 0;
	background: var(--vksugo-feher);
	color: var(--vksugo-ink);
	font-family: var(--vksugo-mono-font);
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.2;
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.vk-sugo-cikk .vk-sugo-cikk__szavaz svg {
	width: 16px;
	height: 16px;
	color: var(--vksugo-korall);
}

.vk-sugo-cikk .vk-sugo-cikk__szavaz:hover,
.vk-sugo-cikk .vk-sugo-cikk__szavaz:focus-visible,
.vk-sugo-cikk .vk-sugo-cikk__hiany-kuld:hover,
.vk-sugo-cikk .vk-sugo-cikk__hiany-kuld:focus-visible {
	border: 1px solid var(--vksugo-korall);
	border-radius: 0;
	background: var(--vksugo-tint);
	color: var(--vksugo-ink);
}

.vk-sugo-cikk .vk-sugo-cikk__hiany-kuld {
	background: var(--vksugo-ink);
	border-color: var(--vksugo-ink);
	color: var(--vksugo-feher);
}

.vk-sugo-cikk .vk-sugo-cikk__hiany-kuld:hover,
.vk-sugo-cikk .vk-sugo-cikk__hiany-kuld:focus-visible {
	background: var(--vksugo-korall);
	border-color: var(--vksugo-korall);
	color: var(--vksugo-feher);
}

.vk-sugo-cikk .vk-sugo-cikk__hiany-cimke {
	display: block;
	margin: 0 0 10px;
	font-size: 15px;
	line-height: 1.45;
}

.vk-sugo-cikk .vk-sugo-cikk__hiany-sor {
	display: flex;
	gap: 8px;
}

.vk-sugo-cikk .vk-sugo-cikk__hiany-mezo[type="text"] {
	flex: 1;
	min-width: 0;
	min-height: 40px;
	margin: 0;
	padding: 8px 12px;
	border: 1px solid var(--vksugo-homok) !important;
	border-radius: 0 !important;
	background: var(--vksugo-feher) !important;
	box-shadow: none !important;
	font-family: inherit;
	font-size: 15px;
	color: var(--vksugo-ink);
}

.vk-sugo-cikk .vk-sugo-cikk__hiany-mezo[type="text"]:focus {
	outline: none;
	border-color: var(--vksugo-korall) !important;
	box-shadow: 0 0 0 3px rgba(255, 84, 77, 0.16) !important;
}

.vk-sugo-cikk .vk-sugo-cikk__hiany-kihagy {
	margin: 10px 0 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--vksugo-mauve);
	font-family: var(--vksugo-mono-font);
	font-size: 12.5px;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.vk-sugo-cikk .vk-sugo-cikk__hiany-kihagy:hover,
.vk-sugo-cikk .vk-sugo-cikk__hiany-kihagy:focus-visible {
	border: 0;
	background: none;
	color: var(--vksugo-korall);
}

.vk-sugo-cikk .vk-sugo-cikk__szavazas-koszon {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: 15px;
	color: var(--vksugo-ink);
}

.vk-sugo-cikk .vk-sugo-cikk__szavazas-koszon svg {
	width: 18px;
	height: 18px;
	flex: none;
	color: var(--vksugo-korall);
}

@media (max-width: 560px) {
	.vk-sugo-cikk .vk-sugo-cikk__hiany-sor {
		flex-direction: column;
	}
}

/* ---- „Nem segített?" panel a cikk végén ---- */

.vk-sugo-cikk .vk-sugo-cikk__panel {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 18px 28px;
	margin-top: 16px;
	padding: 24px 26px;
	border: 1px solid var(--vksugo-homok);
	background: var(--vksugo-cream);
}

.vk-sugo-cikk .vk-sugo-cikk__panel-szoveg-doboz {
	flex: 1 1 320px;
	min-width: 0;
}

.vk-sugo-cikk .vk-sugo-cikk__panel-cim {
	margin: 0 0 4px;
	font-family: var(--vksugo-cim-font);
	font-weight: 500;
	font-size: 20px;
	line-height: 1.25;
}

.vk-sugo-cikk .vk-sugo-cikk__panel-szoveg {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--vksugo-mauve);
}

/* ---- Oldalsáv ----
   Csendes lista, nem doboz: egy mono címke, legfeljebb négy cikk egy
   vékony bal vonal mellett, alul az „Összes" kijárat. Keret, fejsáv és
   nyilak nélkül - a cikk a főszereplő, az oldalsáv csak fogódzó. */

.vk-sugo-oldal .vk-sugo-oldal__oldalsav-tarto {
	position: sticky;
	top: 28px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.vk-sugo-oldal .vk-sugo-oldal__oldalsav-cimke a {
	color: inherit;
	text-decoration: none;
	transition: color 0.15s;
}

.vk-sugo-oldal .vk-sugo-oldal__oldalsav-cimke a:hover,
.vk-sugo-oldal .vk-sugo-oldal__oldalsav-cimke a:focus-visible {
	color: var(--vksugo-korall);
}

.vk-sugo-oldal .vk-sugo-oldal__oldalsav-cimke {
	margin: 0;
	font-family: var(--vksugo-mono-font);
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--vksugo-mauve);
}

.vk-sugo-oldal .vk-sugo-oldal__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	border-left: 2px solid var(--vksugo-homok);
}

.vk-sugo-oldal .vk-sugo-oldal__lista li {
	margin: 0;
	padding: 0;
}

.vk-sugo-oldal .vk-sugo-oldal__lista a {
	display: block;
	margin-left: -2px;
	padding: 7px 0 7px 16px;
	border-left: 2px solid transparent;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.45;
	color: var(--vksugo-ink);
	text-decoration: none;
	transition: color 0.15s, border-color 0.15s;
}

.vk-sugo-oldal .vk-sugo-oldal__lista a:hover,
.vk-sugo-oldal .vk-sugo-oldal__lista a:focus-visible {
	border-left-color: var(--vksugo-korall);
	color: var(--vksugo-korall);
	outline: none;
}

.vk-sugo-oldal .vk-sugo-oldal__oldalsav-osszes {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	align-self: flex-start;
	font-family: var(--vksugo-mono-font);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--vksugo-mauve);
	text-decoration: none;
	transition: color 0.15s;
}

.vk-sugo-oldal .vk-sugo-oldal__oldalsav-osszes:hover,
.vk-sugo-oldal .vk-sugo-oldal__oldalsav-osszes:focus-visible {
	color: var(--vksugo-korall);
}

.vk-sugo-oldal .vk-sugo-oldal__oldalsav-osszes .vk-sugo__nyil {
	width: 12px;
	height: 12px;
	margin-top: 0;
	color: inherit;
	transition: transform 0.15s;
}

.vk-sugo-oldal .vk-sugo-oldal__oldalsav-osszes:hover .vk-sugo__nyil {
	transform: translateX(3px);
}

/* ---- A kategória-oldal (templates/sugo-kategoria.php) ----
   A cikkoldal formanyelve: krém fejsáv, kétoszlopos törzs. A lista
   soronként cím + kivonat + nyíl: kérdéseket olvasunk, nem termékeket. */

.vk-sugo-oldal .vk-sugo-kat__fej-sor {
	display: flex;
	align-items: center;
	gap: 18px;
}

.vk-sugo-oldal .vk-sugo-kat__ikon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 56px;
	height: 56px;
	box-sizing: border-box;
	background: var(--vksugo-feher);
	border: 1px solid var(--vksugo-homok);
	color: var(--vksugo-korall);
}

.vk-sugo-oldal .vk-sugo-kat__ikon svg {
	width: 26px;
	height: 26px;
}

.vk-sugo-oldal .vk-sugo-kat__fej-sor .vk-sugo-oldal__cim {
	margin: 0;
}

.vk-sugo-oldal .vk-sugo-kat__leiras {
	max-width: 640px;
	margin: 14px 0 0;
	font-size: 17px;
	line-height: 1.55;
	color: var(--vksugo-mauve);
}

.vk-sugo-oldal .vk-sugo-kat__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid var(--vksugo-homok);
	background: var(--vksugo-feher);
}

.vk-sugo-oldal .vk-sugo-kat__lista li {
	margin: 0;
	border-bottom: 1px solid var(--vksugo-homok);
}

.vk-sugo-oldal .vk-sugo-kat__lista li:last-child {
	border-bottom: 0;
}

.vk-sugo-oldal .vk-sugo-kat__lista a {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	padding: 18px 22px;
	color: var(--vksugo-ink);
	text-decoration: none;
	transition: background 0.15s;
}

.vk-sugo-oldal .vk-sugo-kat__lista a:hover,
.vk-sugo-oldal .vk-sugo-kat__lista a:focus-visible {
	background: var(--vksugo-cream);
	outline: none;
}

.vk-sugo-oldal .vk-sugo-kat__szoveg {
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
}

.vk-sugo-oldal .vk-sugo-kat__cim {
	font-family: var(--vksugo-cim-font);
	font-weight: 500;
	font-size: 18px;
	line-height: 1.3;
	transition: color 0.15s;
}

.vk-sugo-oldal .vk-sugo-kat__lista a:hover .vk-sugo-kat__cim,
.vk-sugo-oldal .vk-sugo-kat__lista a:focus-visible .vk-sugo-kat__cim {
	color: var(--vksugo-korall);
}

.vk-sugo-oldal .vk-sugo-kat__kivonat {
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--vksugo-mauve);
}

.vk-sugo-oldal .vk-sugo-kat__lista .vk-sugo__nyil {
	width: 18px;
	height: 18px;
	flex: none;
	margin-top: 4px;
	color: var(--vksugo-mauve);
	transition: color 0.15s, transform 0.15s;
}

.vk-sugo-oldal .vk-sugo-kat__lista a:hover .vk-sugo__nyil {
	color: var(--vksugo-korall);
	transform: translateX(3px);
}

/* Az oldalsáv „További témák" listája: ikon + név + darabszám. */
.vk-sugo-oldal .vk-sugo-kat__temak a {
	display: flex;
	align-items: center;
	gap: 10px;
}

.vk-sugo-oldal .vk-sugo-kat__temak svg {
	width: 16px;
	height: 16px;
	flex: none;
	color: var(--vksugo-korall);
}

.vk-sugo-oldal .vk-sugo-kat__darab {
	margin-left: auto;
	font-family: var(--vksugo-mono-font);
	font-size: 11.5px;
	color: var(--vksugo-mauve);
}

.vk-sugo-oldal .vk-sugo-kat__ures {
	margin: 0;
	padding: 24px;
	border: 1px solid var(--vksugo-homok);
	background: var(--vksugo-feher);
	color: var(--vksugo-mauve);
}

@media (max-width: 560px) {
	.vk-sugo-oldal .vk-sugo-kat__lista a {
		padding: 14px 16px;
		gap: 12px;
	}

	.vk-sugo-oldal .vk-sugo-kat__ikon {
		width: 44px;
		height: 44px;
	}
}