/*
 * KL widgetek kiegészítő CSS.
 *
 * A KL szekció-widgetek mindegyike egy teljes szélességű <section>-t renderel,
 * saját felső/alsó paddinggal. Az Elementor viszont alapból 20px alsó térközt
 * (--widgets-spacing / .elementor-widget:not(:last-child) margin-bottom) tesz a
 * widgetek közé, ami a forrás Lovable-oldalon nincs -> szekciónként +20px csúszás.
 * Csak a KL widgeteknél nullázzuk (a widgetType-alapú elementor-widget-kl_* osztály),
 * más widgetekre nincs hatással.
 */
[class*="elementor-widget-kl_"] {
	margin-bottom: 0 !important;
}

/* A KL widgetek belső Elementor-wrapperei ne adjanak extra térközt sem. */
[class*="elementor-widget-kl_"] > .elementor-widget-container {
	margin: 0 !important;
}

/*
 * Szolgáltatás-aloldal: az utolsó szekció (GYIK) alatti oldal-alji térköz.
 * A Lovable <main class="kl-page-first-section"> ALSÓ paddingjét tükrözi
 * (a felső paddingot az oldal-fejléc widget kl-page-first-section wrappere adja).
 */
.kl-service-page-bottom { padding-bottom: var(--kl-section-py); }
@media (max-width: 767px) {
	.kl-service-page-bottom { padding-bottom: var(--kl-section-py-sm); }
}

/* -------------------------------------------------------------------------
 * GYIK (kl_faq_general) harmonika – a gyik.tsx FaqItem 1:1 leképezése.
 * Első elem nyitva, kattintásra egyszerre egy nyílik (kl-gyik.js), a többi
 * marad zárva. A nyitás/zárás grid-template-rows animációval (mint a forrás).
 * ------------------------------------------------------------------------- */
.kl-gyik-q {
	display: flex; align-items: center; justify-content: space-between;
	gap: var(--kl-size-16); width: 100%;
	padding: var(--kl-size-22) var(--kl-size-30);
	background: none; border: none; cursor: pointer; text-align: left;
}
.kl-gyik-q h2 {
	font-family: var(--kl-font-heading); font-size: var(--kl-size-18);
	line-height: var(--kl-size-26); font-weight: 700; color: var(--kl-dark); margin: 0;
}
.kl-gyik-chevron {
	display: flex; align-items: center; justify-content: center;
	width: var(--kl-size-32); height: var(--kl-size-32); border-radius: 0;
	background-color: var(--kl-primary-soft); flex-shrink: 0;
	transition: transform 300ms ease, background-color 200ms ease;
}
.kl-gyik-chevron svg { stroke: var(--kl-primary); }
.kl-gyik-item[data-open="true"] .kl-gyik-chevron {
	background-color: var(--kl-primary); transform: rotate(180deg);
}
.kl-gyik-item[data-open="true"] .kl-gyik-chevron svg { stroke: var(--kl-white); }
.kl-gyik-answer {
	display: grid; grid-template-rows: 0fr; transition: grid-template-rows 350ms ease;
}
.kl-gyik-item[data-open="true"] .kl-gyik-answer { grid-template-rows: 1fr; }
.kl-gyik-answer-clip { min-height: 0; overflow: hidden; }
.kl-gyik-answer-inner {
	padding: 0 var(--kl-size-30) var(--kl-size-24);
	font-size: var(--kl-size-15); line-height: var(--kl-size-26); color: var(--kl-text-secondary);
}

/* -------------------------------------------------------------------------
 * Pre-footer CallbackBox előtti térköz: a forrás <main class="kl-page-first-section">
 * ALSÓ paddingját pótolja (a __root a main UTÁN rendereli a CallbackBox-ot).
 * A szolgáltatás-detail oldalakon ezt a .kl-service-page-bottom adja; a többi
 * aloldalon (gyűjtő, cégünkről, galéria, gyik, blog, kapcsolat) ez a spacer.
 * ------------------------------------------------------------------------- */
.kl-callback-lead-space { height: var(--kl-section-py); }
@media (max-width: 767px) {
	.kl-callback-lead-space { height: var(--kl-section-py-sm); }
}

/* -------------------------------------------------------------------------
 * Jogi/tartalmi oldal (kl_legal – adatvédelmi): a blog-cikk .kl-article-body
 * tipográfiáját használja. A lefordított kl.css-ben az article-body csak h2-t
 * stílusoz, itt pótoljuk a h3-at és a törzs-linkeket (a jogi szöveg sok
 * al-szekciót és külső hivatkozást tartalmaz). Új szín/token NINCS.
 * ------------------------------------------------------------------------- */
.kl-article-body h3 {
	margin-top: var(--kl-size-28);
	margin-bottom: var(--kl-size-12);
	color: var(--kl-dark);
	font-size: var(--kl-size-21);
	line-height: var(--kl-size-30);
	font-weight: 700;
}
.kl-article-body a {
	color: var(--kl-primary);
	text-decoration: underline;
	overflow-wrap: anywhere;
	word-break: break-word;
}
.kl-article-body a:hover { text-decoration: none; }
.kl-legal-body p.kl-legal-updated {
	margin-top: var(--kl-size-36);
	color: var(--kl-text-secondary);
	font-size: var(--kl-size-15);
}