/*
Theme Name: GIGA SMART
Theme URI: https://gigasmart.hu
Description: A GIGA SMART Kft. gyerektémája a Kadence témához. Csak azt tartalmazza, amit
  blokk-attribútummal vagy a customizerben nem lehet kifejezni: a görgetéses animációkat,
  a védjegy-előírásos logóméretezést, és néhány elrendezési finomítást. Minden szín,
  betűtípus és térköz a customizerben él — lásd build/setup.php.
Author: Zengo
Template: kadence
Version: 1.0.0
Text Domain: gigasmart
*/

:root {
	/* A védjegy eredeti neonzöldje. Világos háttéren olvashatatlan (1,4:1), ezért
	   kizárólag sötét felületen, kiemelésre használjuk — a szövegszínek a Kadence
	   palettájából jönnek (palette1 / palette2). */
	--gs-neon: #3cfa01;
	--gs-green: var(--global-palette1, #2fb308);
	--gs-green-dark: var(--global-palette2, #1e7a05);
	--gs-ink: var(--global-palette5, #14171a);
	--gs-border: var(--global-palette7, #e1e5e8);

	--gs-ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* ---------------------------------------------------------------------------
   1. Görgetéses beúszás
   A `gs-reveal` osztályt a blokkok kapják (build/components.py). A megjelenítést
   IntersectionObserver kapcsolja (assets/reveal.js): a szkript a <html>-re teszi a
   `gs-reveal-ready` osztályt, így szkript nélkül — és a szerkesztőben — minden
   azonnal látszik. Mozgásérzékenység esetén az animáció kimarad.
--------------------------------------------------------------------------- */

.gs-reveal-ready .gs-reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.7s var(--gs-ease), transform 0.7s var(--gs-ease);
}

.gs-reveal-ready .gs-reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* A rácsos szekciókban a kártyák egymás után érkeznek. A késleltetés a sorszámból
   jön, hogy ne kelljen minden kártyára külön osztályt generálni. */
.gs-reveal-ready .gs-reveal.is-visible > .kt-row-column-wrap > .wp-block-kadence-column {
	animation: gs-rise 0.6s var(--gs-ease) backwards;
}

.gs-reveal-ready .gs-reveal.is-visible > .kt-row-column-wrap > .wp-block-kadence-column:nth-child(2) { animation-delay: 0.08s; }
.gs-reveal-ready .gs-reveal.is-visible > .kt-row-column-wrap > .wp-block-kadence-column:nth-child(3) { animation-delay: 0.16s; }
.gs-reveal-ready .gs-reveal.is-visible > .kt-row-column-wrap > .wp-block-kadence-column:nth-child(4) { animation-delay: 0.24s; }

@keyframes gs-rise {
	from { opacity: 0; transform: translateY(20px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.gs-reveal-ready .gs-reveal,
	.gs-reveal-ready .gs-reveal.is-visible > .kt-row-column-wrap > .wp-block-kadence-column {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
		animation: none !important;
	}
}

/* ---------------------------------------------------------------------------
   2. Tipográfiai kiemelések
--------------------------------------------------------------------------- */

.gs-eyebrow {
	display: inline-block;
	margin-bottom: 0.55em;
	font-family: var(--global-heading-font-family, inherit);
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* A felülcím elé zöld vonal kerül — a „műszaki" arculat visszatérő jele. */
.gs-eyebrow::before {
	content: "";
	display: inline-block;
	width: 28px;
	height: 2px;
	margin-right: 10px;
	vertical-align: middle;
	background: currentColor;
}

/* Nagybetű csak a rövid elemeken: a nyitókép címén és a felülcímeken. A hosszú magyar
   szekciócímek („Egy partner az épület teljes villamos infrastruktúrájára") nagybetűvel
   végig egyforma magas sávvá állnak össze, és nehezen olvashatók — ott a kisbetűs alak
   marad, a hangsúlyt a méret és a vastagság adja. */
.gs-hero-title {
	text-transform: uppercase;
}

/* A címsorokban a <mark> a védjegy zöldjét hozza, háttér nélkül. */
.wp-block-kadence-advancedheading mark {
	padding: 0;
	background: none;
	color: var(--gs-neon);
}

.gs-dark .wp-block-kadence-advancedheading mark,
.gs-hero .wp-block-kadence-advancedheading mark,
.gs-page-hero .wp-block-kadence-advancedheading mark {
	color: var(--gs-neon);
}

/* Világos háttéren a neon nem olvasható, ott a sötétebb zöld megy. */
.gs-section:not(.gs-dark) .wp-block-kadence-advancedheading mark {
	color: var(--gs-green-dark);
}

.gs-lead {
	font-size: 1.12rem;
}

.gs-section-title {
	margin-bottom: 0.45em;
}

.gs-section-lead {
	max-width: 720px;
	margin-inline: auto;
	margin-bottom: 2.2rem;
}

/* ---------------------------------------------------------------------------
   3. Nyitókép
--------------------------------------------------------------------------- */

.gs-hero {
	position: relative;
	overflow: hidden;
}

/* Zöld fényvonal a nyitókép alján — a „villamos" jelleg finom utalása. */
.gs-hero::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 3px;
	background: linear-gradient(90deg, transparent, var(--gs-neon), transparent);
	opacity: 0.85;
}

.gs-hero-content {
	max-width: 760px;
}

.gs-hero-title {
	margin-bottom: 0.4em;
}

.gs-hero-lead {
	max-width: 620px;
	font-size: 1.18rem;
}

/* A nyitókép elemei egymás után úsznak be, oldalbetöltéskor — ehhez nem kell
   figyelő, mert mindig a képernyőn vannak. */
.gs-hero .gs-eyebrow,
.gs-hero .gs-hero-title,
.gs-hero .gs-hero-lead,
.gs-hero .gs-hero-buttons {
	animation: gs-hero-in 0.8s var(--gs-ease) backwards;
}

.gs-hero .gs-hero-title  { animation-delay: 0.12s; }
.gs-hero .gs-hero-lead   { animation-delay: 0.24s; }
.gs-hero .gs-hero-buttons { animation-delay: 0.36s; }

@keyframes gs-hero-in {
	from { opacity: 0; transform: translateY(24px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.gs-hero .gs-eyebrow,
	.gs-hero .gs-hero-title,
	.gs-hero .gs-hero-lead,
	.gs-hero .gs-hero-buttons {
		animation: none;
	}
}

.gs-page-hero {
	position: relative;
}

.gs-page-hero::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 3px;
	background: linear-gradient(90deg, var(--gs-neon), transparent 60%);
}

.gs-page-lead {
	max-width: 660px;
}

/* ---------------------------------------------------------------------------
   4. Számlálósáv
--------------------------------------------------------------------------- */

.gs-counter .kb-count-up-number {
	font-family: var(--global-heading-font-family, inherit);
	font-size: clamp(2.6rem, 6vw, 3.8rem);
	font-weight: 700;
	line-height: 1;
	color: var(--gs-neon);
}

.gs-counter .kb-count-up-title {
	margin-top: 0.6em;
	font-size: 0.95rem;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.72);
}

/* Elválasztó vonal a számlálók között — csak ott, ahol egymás mellett állnak. */
@media (min-width: 768px) {
	.gs-counters .gs-counter-col + .gs-counter-col > .kt-inside-inner-col {
		border-left: 1px solid rgba(255, 255, 255, 0.12);
	}
}

/* ---------------------------------------------------------------------------
   5. Kártyák
--------------------------------------------------------------------------- */

/* A látható kártya — fehér háttér, 1 px keret, 12 px kerekítés — a Kadence BELSŐ
   konténerén ül (`.kt-inside-inner-col`), nem a blokk külső elemén. Ezért minden
   hover-hatásnak is ott a helye: ha a külsőt díszítjük és a belsőt emeljük, a kettő
   elválik egymástól (a zöld sáv a megemelt lap fölött marad lógva). */
.gs-card > .kt-inside-inner-col {
	position: relative;
	height: 100%;
	overflow: hidden;
	transition: transform 0.35s var(--gs-ease), box-shadow 0.35s var(--gs-ease),
		border-color 0.35s var(--gs-ease);
}

/* A kártya tetején zöld sáv fut be lebegéskor. */
.gs-card > .kt-inside-inner-col::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: var(--gs-green);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.4s var(--gs-ease);
}

.gs-card:hover > .kt-inside-inner-col::before,
.gs-card:focus-within > .kt-inside-inner-col::before {
	transform: scaleX(1);
}

.gs-card:hover > .kt-inside-inner-col,
.gs-card:focus-within > .kt-inside-inner-col {
	transform: translateY(-6px);
	border-color: var(--gs-green);
	box-shadow: 0 14px 30px rgba(20, 23, 26, 0.1);
}

.gs-card-icon {
	display: block;
	margin-bottom: 1rem;
}

.gs-card-title {
	margin-bottom: 0.5em;
}

.gs-card-more {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	margin-top: 1.1em;
	font-weight: 600;
	font-size: 0.95rem;
}

.gs-card-more svg {
	transition: transform 0.3s var(--gs-ease);
}

.gs-card:hover .gs-card-more svg,
.gs-sector-card:hover .gs-card-more svg {
	transform: translateX(5px);
}

/* A kattintható oszlop pozicionált kell legyen: a rátét-horgony `position: absolute`,
   tehát a legközelebbi pozicionált ŐSÉHEZ igazodik. A Kadence oszlopa alapból `static`,
   így a rátét az egész SORT fedte le — minden kártya rátétje egymásra torlódott, és a
   legfelső nyelte el az összes kattintást és hovert (mindig ugyanaz a kártya emelkedett ki). */
.gs-linked {
	position: relative;
}

/* Az egész kártya kattintható: a Kadence egy rátét-horgonyt tesz a tartalom fölé.
   A billentyűzetes fókusz így magán a horgonyon jelenik meg — a keret a kártya
   köré kerül, hogy látható legyen. */
.kb-section-link-overlay:focus-visible {
	outline: 3px solid var(--gs-green);
	outline-offset: -3px;
	border-radius: inherit;
}

/* ---------------------------------------------------------------------------
   6. Szektorkártyák (fotós háttér)
--------------------------------------------------------------------------- */

.gs-sector-card > .kt-inside-inner-col {
	position: relative;
	display: flex;
	flex-direction: column;   /* a Kadence alapértelmezése, kimondva */
	justify-content: flex-end;
	min-height: 280px;
	/* A rács cellái egyforma magasak, a KÁRTYA (a látható panel) viszont a
	   tartalmához zsugorodik. Ha a két ág szövege eltérően tördelődik — nagyobb
	   böngésző-alapbetűméretnél ez biztosan megtörténik —, a két panel alja
	   elcsúszik: 20 px-es alapméreten mérve 53 px különbség. */
	height: 100%;
	overflow: hidden;
	border-radius: 16px;
}

/* Sötét fátyol a fotón, hogy a fehér szöveg olvasható maradjon. A háttérképet a
   Kadence a belső konténerre generálja, ezért a fátyol is oda való — a külső elemre
   téve a kép takarná el. A tartalom `position: relative`-tel emelkedik fölé.

   A kártya teteje is erősen fedett (0,62), mert a felülcím ott ül: a korábbi 0,3-as
   indulásnál a zöld felülcím a fotó világos részein olvashatatlan volt. */
.gs-sector-card > .kt-inside-inner-col::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(20, 23, 26, 0.62) 0%, rgba(20, 23, 26, 0.94) 100%);
	transition: background 0.4s var(--gs-ease);
}

.gs-sector-card:hover > .kt-inside-inner-col::before,
.gs-sector-card:focus-within > .kt-inside-inner-col::before {
	background: linear-gradient(180deg, rgba(20, 23, 26, 0.72) 0%, rgba(20, 23, 26, 0.97) 100%);
}

/* Zöld keret és árnyék a fotós kártyán is — ugyanaz a visszajelzés, mint a többi
   kártyán, csak lap-emelés nélkül (egy 280 px-es fotókártyán az ormótlan lenne). */
.gs-sector-card > .kt-inside-inner-col {
	border: 1px solid transparent;
	transition: border-color 0.35s var(--gs-ease), box-shadow 0.35s var(--gs-ease);
}

.gs-sector-card:hover > .kt-inside-inner-col,
.gs-sector-card:focus-within > .kt-inside-inner-col {
	border-color: var(--gs-green);
	box-shadow: 0 14px 30px rgba(20, 23, 26, 0.18);
}

.gs-sector-card > .kt-inside-inner-col > * {
	position: relative;
	z-index: 1;
}

.gs-sector-title {
	margin-bottom: 0.4em;
}

/* A fotós kártyán belüli szolgáltatáslista. A cím és a bevezető színét blokk-attribútum
   adja, a core/list blokkét viszont nem lehet attribútumból állítani — enélkül a sötét
   fátylon a sötét alapszöveget örökli, és láthatatlan marad. */
.gs-sector-card .gs-branch-list {
	margin: 0.9em 0 1.2em;
	color: rgba(255, 255, 255, 0.82);
	font-size: 0.94rem;
}

.gs-sector-card .gs-branch-list li {
	margin-bottom: 0.5em;
}

/* ---------------------------------------------------------------------------
   7. Munkafolyamat és előnyök
--------------------------------------------------------------------------- */

.gs-step > .kt-inside-inner-col {
	position: relative;
	padding-left: 0;
}

.gs-step-number {
	display: block;
	margin-bottom: 0.3em;
	font-family: var(--global-heading-font-family, inherit);
	font-size: 2rem;
	font-weight: 700;
	line-height: 1;
	opacity: 0.85;
}

.gs-step-title {
	margin-bottom: 0.4em;
	font-size: 1.05rem;
}

.gs-step-text {
	font-size: 0.95rem;
}

/* Egy hasábban a lépések egymás alatt futnak, a sorszám a szöveg mellé kerül —
   így az oldalsávban is olvasható marad. */
.gs-process--1col .gs-step + .gs-step > .kt-inside-inner-col {
	margin-top: 1.6rem;
	padding-top: 1.6rem;
	border-top: 1px solid var(--gs-border);
}

.gs-process--1col .gs-step-number {
	display: inline-block;
	margin-right: 0.6em;
	font-size: 1.35rem;
	vertical-align: baseline;
}

.gs-process--1col .gs-step-title {
	display: inline;
}

.gs-process--1col .gs-step-text {
	margin-top: 0.4em;
}

.gs-adv-item > .kt-inside-inner-col {
	padding-top: 1.5rem;
	border-top: 2px solid rgba(255, 255, 255, 0.14);
	transition: border-color 0.35s var(--gs-ease);
}

.gs-adv-item:hover > .kt-inside-inner-col {
	border-top-color: var(--gs-neon);
}

.gs-adv-icon {
	display: block;
	margin-bottom: 0.9rem;
}

.gs-adv-title {
	margin-bottom: 0.45em;
	font-size: 1.15rem;
}

/* ---------------------------------------------------------------------------
   8. Pipás listák
--------------------------------------------------------------------------- */

.gs-checklist {
	margin: 1.2em 0;
	padding: 0;
	list-style: none;
}

.gs-checklist li {
	display: grid;
	grid-template-columns: 22px 1fr;
	gap: 0.75em;
	align-items: start;
	margin-bottom: 0.75em;
}

.gs-checklist__mark {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	margin-top: 0.15em;
	border-radius: 50%;
	background: var(--gs-green);
	color: #fff;
}

.gs-checklist__mark svg {
	width: 11px;
	height: 11px;
}

.gs-checklist__mark--light {
	background: var(--gs-neon);
	color: var(--gs-ink);
}

.gs-scope-list li,
.gs-points-list li {
	font-size: 1rem;
}

.gs-legal-list li {
	margin-bottom: 0.6em;
}

/* ---------------------------------------------------------------------------
   9. Gyakori kérdések (core/details)
--------------------------------------------------------------------------- */

.gs-faq-item {
	margin-bottom: 0.75rem;
	padding: 0;
	border: 1px solid var(--gs-border);
	border-radius: 12px;
	background: #fff;
	transition: border-color 0.3s var(--gs-ease);
}

.gs-faq-item[open] {
	border-color: var(--gs-green);
}

.gs-faq-item > summary {
	position: relative;
	padding: 1.15rem 3rem 1.15rem 1.35rem;
	font-family: var(--global-heading-font-family, inherit);
	font-size: 1.1rem;
	font-weight: 600;
	list-style: none;
	cursor: pointer;
}

.gs-faq-item > summary::-webkit-details-marker {
	display: none;
}

/* Nyitásjelző: egy plusz, ami nyitáskor mínuszra fordul. */
.gs-faq-item > summary::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 1.35rem;
	width: 14px;
	height: 2px;
	background: var(--gs-green-dark);
	transform: translateY(-50%);
}

.gs-faq-item > summary::before {
	content: "";
	position: absolute;
	top: 50%;
	right: 1.35rem;
	width: 14px;
	height: 2px;
	background: var(--gs-green-dark);
	transform: translateY(-50%) rotate(90deg);
	transition: transform 0.3s var(--gs-ease), opacity 0.3s var(--gs-ease);
}

.gs-faq-item[open] > summary::before {
	transform: translateY(-50%) rotate(0deg);
	opacity: 0;
}

.gs-faq-item > p {
	margin: 0;
	padding: 0 1.35rem 1.35rem;
	color: var(--global-palette6, #6b7278);
}

/* ---------------------------------------------------------------------------
   10. Partnerek körhintája
--------------------------------------------------------------------------- */

.gs-partner-label {
	margin-bottom: 1.5rem;
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* A logók szürkén ülnek, és rámutatásra színesednek — így a sáv nem vonja el a
   figyelmet a tartalomról. */
.gs-partner-carousel .kb-gallery-image-contain img,
.gs-partner-carousel img {
	max-height: 64px;
	width: auto;
	margin-inline: auto;
	filter: grayscale(1);
	opacity: 0.65;
	transition: filter 0.3s var(--gs-ease), opacity 0.3s var(--gs-ease);
}

.gs-partner-carousel img:hover {
	filter: none;
	opacity: 1;
}

/* Amíg egyetlen igazolt partnerlogónk van, nem körhinta, hanem álló logó áll itt. */
.gs-partner-single img {
	max-height: 84px;
	width: auto;
}

/* Sötét szekcióban a körvonalas gomb a védjegy neonzöldjére vált. A customizerben
   egyetlen másodlagos gombstílus adható meg, az pedig a világos háttérhez van
   hangolva (sötétzöld felirat) — feketén az 3,3:1 lenne.
   A `.kb-button` a szelektorban azért kell, mert a Kadence beágyazott szabálya
   (`.button.button-style-secondary`) egy osztállyal specifikusabb, és a
   stíluslapunk UTÁN kerül az oldalba. */
.gs-hero .kb-button.button-style-secondary,
.gs-page-hero .kb-button.button-style-secondary,
.gs-dark .kb-button.button-style-secondary,
.gs-cta .kb-button.button-style-secondary {
	color: var(--gs-neon);
	border-color: var(--gs-neon);
}

.gs-hero .kb-button.button-style-secondary:hover,
.gs-page-hero .kb-button.button-style-secondary:hover,
.gs-dark .kb-button.button-style-secondary:hover,
.gs-cta .kb-button.button-style-secondary:hover {
	color: var(--gs-ink);
	background: var(--gs-neon);
	border-color: var(--gs-neon);
}

/* ---------------------------------------------------------------------------
   11. Fejléc és menü
--------------------------------------------------------------------------- */

/* Almenüs oldalon a SZÜLŐ menüpont is aktívnak látszik.
   A WordPress magától ráteszi a szülőre a `current-menu-ancestor` osztályt (közvetlen
   szülőnél a `current-menu-parent`-et is), a Kadence stílusa viszont csak a
   `current-menu-item`-re figyel — így pl. az „Ipari referenciák" oldalon a fejlécben
   semmi nem jelezte, hogy a Referenciák alatt vagyunk.
   A szelektorok a Kadence saját aktív-szabályait követik, egy osztállyal specifikusabban:
   a téma alapszíne is beágyazott CSS-ből jön, ami a stíluslapunk UTÁN kerül az oldalba. */
.main-navigation .primary-menu-container > ul > li.menu-item.current-menu-ancestor > a,
.mobile-navigation ul li.current-menu-ancestor > a,
.mobile-navigation ul li.current-menu-ancestor.menu-item-has-children > .drawer-nav-drop-wrap {
	color: var(--global-palette2);
}

/* Az aláhúzás-jelölő ugyanígy: a Kadence a `::after` elemet nagyítja 0-ról 1-re. */
.header-navigation[class*="header-navigation-style-underline"] .header-menu-container > ul > li.current-menu-ancestor > a::after {
	transform: scale(1, 1) translate(50%, 0);
}

/* A customizer `textTransform` mezője nem érvényesül a főmenüre, ezért itt. */
.main-navigation .primary-menu-container > ul > li > a {
	text-transform: uppercase;
}

.site-header-row {
	transition: box-shadow 0.3s var(--gs-ease);
}

.site-header-sticky-wrapper.item-is-fixed .site-header-row {
	box-shadow: 0 2px 18px rgba(20, 23, 26, 0.09);
}

/* ---------------------------------------------------------------------------
   12. Lábléc
--------------------------------------------------------------------------- */

/* A Kadence a widget-területek linkjeit fixen a grafit palettaszínre állítja
   (`.widget-area a { color: var(--global-palette3) }`). Ez világos oldalsávra való; a mi
   láblécünk sötét, ott a link olvashatatlan lenne (1,2:1). A customizer „widget tartalom
   színe" beállítása a linkekre nem terjed ki, ezért a felülírás csak itt lehetséges. */
.site-footer .widget-area a:where(:not(.button):not(.wp-block-button__link)) {
	color: rgba(255, 255, 255, 0.72);
	transition: color 0.25s var(--gs-ease);
}

.site-footer .widget-area a:where(:not(.button):not(.wp-block-button__link)):hover,
.site-footer .widget-area a:where(:not(.button):not(.wp-block-button__link)):focus-visible {
	color: var(--gs-neon);
}

.gs-footer-logo img {
	height: auto;
}

.gs-footer-tagline {
	margin-top: 1rem;
	font-size: 0.95rem;
}

.gs-footer-title {
	margin-bottom: 1.1rem;
	font-size: 0.95rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.gs-footer-nav {
	margin: 0;
	padding: 0;
	list-style: none;
}

.gs-footer-nav li {
	margin-bottom: 0.55em;
	font-size: 0.95rem;
}

/* Közösségi ikon: körvonalas, négyzetes gomb — 44x44 px érintési felület.
   A `.button-style-secondary` a szelektorban azért kell, mert a Kadence beágyazott,
   blokkonként generált szabálya specifikusabb, és a stíluslapunk után kerül az oldalba
   (ikonra szűkített gombnál nullázza a térközt és a keretet). */
.gs-footer-socials {
	margin-top: 1.5rem;
}

.gs-footer-socials .kb-button.button-style-secondary {
	width: 44px;
	height: 44px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	border: 1px solid;
	color: rgba(255, 255, 255, 0.8);
	border-color: rgba(255, 255, 255, 0.28);
	transition: color 0.25s var(--gs-ease), background 0.25s var(--gs-ease),
		border-color 0.25s var(--gs-ease);
}

.gs-footer-socials .kb-button.button-style-secondary:hover,
.gs-footer-socials .kb-button.button-style-secondary:focus-visible {
	color: var(--gs-ink);
	background: var(--gs-neon);
	border-color: var(--gs-neon);
}

.gs-footer-line {
	display: flex;
	align-items: flex-start;
	gap: 0.65em;
	margin-bottom: 0.7em;
	font-size: 0.95rem;
}

.gs-footer-numbers {
	margin-top: 1.4rem;
	font-size: 0.82rem;
	line-height: 1.7;
}

.gs-footer-bottom {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6em 1.4em;
	justify-content: space-between;
	font-size: 0.86rem;
}

/* ---------------------------------------------------------------------------
   13. Demján Sándor Program – kötelező arculati blokk
   Forrás: „Demján Sándor Program KTK", Védjegy és Logók Használata fejezet.
   A védjegy legkisebb magassága 50 mm = 141 px, körben ~14 px biztonsági
   eltartással; a logókat torzítani vagy átszínezni tilos, ezért fix magasság és
   `width: auto`. Keskeny kijelzőn a 141 px fizikailag nem tartható (a Neumann-logó
   ekkor 400 px széles), ott 96 px a házon belül bevett érték.
--------------------------------------------------------------------------- */

.gs-dsp {
	border-top: 1px solid var(--gs-border);
}

/* Az elrendezést (a logók egy sorban, középen) a blokk attribútumai adják — lásd
   build/generate.py `_dsp_block`. Itt csak az marad, amit attribútummal nem lehet
   kifejezni: a védjegy előírt, fix képmagassága. */
.gs-dsp-text {
	max-width: 760px;
	margin: 0 auto 26px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.45;
}

.gs-dsp-logos .gs-dsp-logo {
	margin: 0;
}

.gs-dsp-logos .gs-dsp-logo img {
	height: 141px;   /* KTK: 50 mm ≈ 141 px a legkisebb biztonsági méret */
	width: auto;
	max-width: 100%;
	display: block;
}

@media (max-width: 1024px) {
	.gs-dsp-text {
		font-size: 17px;
	}

	.gs-dsp-logos .gs-dsp-logo img {
		height: 110px;
	}
}

@media (max-width: 767px) {
	/* 141 px magasan a Neumann-logó 400 px széles — keskeny kijelzőn ez fizikailag nem
	   tartható, ezért itt 96 px (ez a házon belül bevett érték). */
	.gs-dsp-logos .gs-dsp-logo img {
		height: 96px;
	}
}

/* ---------------------------------------------------------------------------
   14. Egyéb finomítások
--------------------------------------------------------------------------- */

.gs-legal-heading {
	margin-top: 2.4rem;
}

.gs-legal-subheading {
	margin-top: 1.6rem;
	font-size: 1.1rem;
}

.gs-legal-meta {
	padding-bottom: 1.2rem;
	border-bottom: 1px solid var(--gs-border);
	font-size: 0.95rem;
}

.gs-knx-logo img {
	max-width: 220px;
	border-radius: 8px;
}

.gs-about-image img {
	border-radius: 16px;
}

/* Az elérhetőség-doboz az űrlap mellett tapad: az űrlap két-háromszor olyan magas,
   így a doboz alatt egyébként több száz pixel üres hely maradna. A `top` érték a
   rögzített fejléc magassága plusz egy kis levegő. */
@media (min-width: 1025px) {
	.gs-contact-side {
		position: sticky;
		top: 116px;
		align-self: start;
	}
}

.gs-side-line {
	display: flex;
	align-items: flex-start;
	gap: 0.7em;
	margin-bottom: 0.8em;
}

.gs-side-person {
	margin-bottom: 0.15em;
}

.gs-side-role {
	margin: 0;
	font-size: 0.9rem;
}

.gs-team-role {
	display: block;
	margin-top: 0.2em;
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Az ajánlatkérő űrlap mezői a Kadence alapstílusán ülnek; csak a fókuszjelzést
   hangoljuk a zöldhöz, mert az alapértelmezett kék idegen az arculattól.
   A mezőket közvetlenül célozzuk: az `advanced-form` blokk a hivatkozott bejegyzés
   tartalmát rendereli, és a blokkra adott `className` NEM kerül ki a kimenetbe —
   egy `.gs-quote-form` köré épített szabály némán hatástalan maradna. */
.kb-adv-form-field input:focus,
.kb-adv-form-field select:focus,
.kb-adv-form-field textarea:focus {
	border-color: var(--gs-green);
	/* A gyűrű maga a látható fókuszjelzés — ezért tűnhet el az alapértelmezett körvonal. */
	box-shadow: 0 0 0 3px rgba(47, 179, 8, 0.18);
	outline: none;
}

/* ---------------------------------------------------------------------------
   14. A Word-doksikból származó szolgáltatás-aloldalak
--------------------------------------------------------------------------- */

/* A felsorolást bevezető mondat („Szolgáltatásaink többek között:") a lista
   fölött ül, ezért nem kell alá a bekezdés-térköz. */
.gs-list-intro {
	margin-bottom: 0.4em;
}

/* A nyolcnál hosszabb felsorolások két hasábban futnak. Egy tizenhárom tételes
   lista egy hasábban képernyőnyi magas sávot ad, amin a szem elveszik; a hasábolás
   egy pillantásnyivá teszi. A `break-inside` kötelező: enélkül a kéthelyiségnyi
   listaelemek a hasábhatáron kettévágódnak. */
@media (min-width: 900px) {
	.gs-list-2col .gs-scope-list {
		columns: 2;
		column-gap: 2.4em;
	}

	.gs-list-2col .gs-scope-list li {
		break-inside: avoid;
	}
}

/* A pipa felső igazítását NEM innen adjuk: a blokk beágyazott CSS-e
   (`[data-kb-block]` szelektorral) később jön és specifikusabb is, tehát mindig
   nyerne. Az `iconVerticalAlign` blokk-attribútum intézi — lásd page_references.py. */
.gs-ref-title {
	margin-bottom: 0.35em;
	line-height: 1.45;
}

.gs-ref-title .kb-adv-heading-icon {
	margin-top: 0.3em;
}

.gs-ref-items {
	margin: 0 0 1.4em 1.85em;
	color: var(--gs-muted);
	font-size: 0.95rem;
}

.gs-ref-items li {
	margin-bottom: 0.3em;
}

/* A cégtörténet mérföldkövei: az évszám a kártya vezérszava. */
.gs-milestone-year {
	margin-bottom: 0.3em;
	font-size: 1.6rem;
	letter-spacing: -0.01em;
}

/* ---------------------------------------------------------------------------
   15. Referenciák
--------------------------------------------------------------------------- */

/* „Hol dolgoztunk" — a települések csipsora. Egyetlen core/list blokk, hogy a
   megrendelő listaelemként tudjon települést hozzávenni; a vízszintes elrendezés
   innen jön, nem blokk-attribútumból (a listának nincs ilyen attribútuma). */
.gs-place-chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5em;
	margin: 1.6em 0 0;
	padding: 0;
	list-style: none;
}

.gs-place-chips li {
	padding: 0.42em 1em;
	border: 1px solid var(--gs-border);
	border-radius: 999px;
	background: var(--gs-light);
	color: var(--gs-graphite);
	font-size: 0.9rem;
	font-weight: 500;
	line-height: 1.3;
	transition: border-color 0.25s var(--gs-ease), color 0.25s var(--gs-ease);
}

.gs-place-chips li:hover {
	border-color: var(--gs-green);
	color: var(--gs-green-dark);
}

/* A területi kártyák szándékosan NEM kapják meg a `gs-card` osztályt: azon lebegésre
   emelés, zöld keret és befutó sáv van, ami kattinthatóságot ígér — ezek a kártyák
   viszont nem hivatkozások. Csak a kártyaforma kell.

   A `height: 100%` azért kell, mert a rács cellái egyforma magasak, a tartalom viszont
   nem: enélkül a rövidebb kártya kerete a tartalomnál véget érne, és alatta üres
   rácscella maradna — ami törésnek látszik. */
.gs-ref-card > .kt-inside-inner-col {
	height: 100%;
}

.gs-ref-count {
	display: inline-block;
	margin-bottom: 1.1em;
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.gs-ref-card .gs-ref-title {
	margin-bottom: 0.25em;
	font-size: 0.97rem;
	line-height: 1.45;
}

.gs-ref-card .gs-ref-title + .gs-ref-items {
	margin-top: -0.1em;
}

/* A tételek között vékony elválasztó: alpontos és alpont nélküli tételek
   váltakoznak, enélkül nem látszik, hol ér véget az egyik referencia. */
.gs-ref-card .gs-ref-title:not(:first-of-type) {
	margin-top: 0.9em;
	padding-top: 0.9em;
	border-top: 1px solid var(--gs-border);
}

.gs-ref-items {
	margin: 0.35em 0 0;
	padding-left: 1.15em;
	color: var(--gs-muted);
	font-size: 0.9rem;
}

.gs-ref-items li {
	margin-bottom: 0.25em;
	line-height: 1.45;
}

/* ---------------------------------------------------------------------------
   16. Almenüs menüpontok találati területe
--------------------------------------------------------------------------- */

/* A Kadence JavaScriptje minden almenüs menüpontba beszúr egy láthatatlan
   `<button class="dropdown-nav-special-toggle">` elemet, és `@media (hover: none)`
   alatt RÁTERÍTI az egész menüpontra (`left: 0; width: 100%`), hogy érintésre
   bárhol koppintva nyíljon az almenü.

   Két baj van ezzel nálunk:

   1. A gomb elnyeli a linket. Az egérmutató a szöveg fölött a gomb fölé kerül,
      tehát a hivatkozás `:hover` aláhúzás-animációja nem indul el, és a mutató sem
      az, ami a többi menüponton — pedig a látogató pontosan a feliratra céloz.
      A `(hover: none)` nem csak a telefonokra igaz: érintőképernyős laptopon a
      böngésző gyakran ezt jelenti, ott pedig valódi egér van.
   2. A két ág áttekintő oldala (Ipari & Vállalati megoldások, Lakossági
      szolgáltatások) így elérhetetlenné válna: a menüpont csak nyitna, nem vinne.

   Ezért a gombot a jobb szélre, a nyíl köré szorítjuk. Onnantól a felirat a
   hivatkozás (odavisz), a nyíl pedig az almenüt nyitja — a 2,4 em (≈36 px) érintésre
   is kényelmes céltábla. A `right`-ot nem írjuk felül: a Kadence szabálya 0-ra teszi,
   és nekünk pont az kell. */
.main-navigation.header-navigation .primary-menu-container > ul > li.menu-item--has-toggle > .dropdown-nav-special-toggle {
	left: auto;
	width: 2.4em;
}

/* A szabály másik fele: a Kadence ugyanabban a médiafeltételben `pointer-events: none`-t
   tesz a szülő hivatkozásra, hogy a koppintást biztosan a gomb kapja. A gomb
   visszaszorításával ez már csak annyit érne el, hogy a felirat semmire sem reagálna —
   ezért a hivatkozást visszakapcsoljuk. */
.main-navigation.header-navigation .primary-menu-container > ul > li.menu-item--has-toggle > a {
	pointer-events: auto;
}

/* ---------------------------------------------------------------------------
   17. Tanúsítványok (ISO 9001, KNX Partner)
--------------------------------------------------------------------------- */

.gs-certifications .gs-partner-label {
	margin-bottom: 1.15em;
}

/* A jelvény és a hozzá tartozó mondat egy oszlopban, középre — a jelvény önmagában
   csak dísz, a mondat mondja meg, mit jelent. */
.gs-cert > .kt-inside-inner-col {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.15em;
}

/* A két logó eltérő magas: a jelvény kör alakú (110×108), a KNX-logó fekvő
   (110×72). Egymás mellé téve a címek 35 px-rel elcsúsztak.

   A logóterület ezért FIX magasságot kap — a magasabbik logóét —, és a logó ALULRA
   igazodik benne. Így a címek egy vonalban kezdődnek, a maradék hely pedig a
   rövidebb logó FÖLÉ kerül, ahol nem látszik résnek: a logó a saját címéhez tapad,
   nem lebeg fölötte.

   A dobozmagasság a jelvény adott szélességen vett magassága; ha a szélesség
   változik, ezt is állítani kell — a `check_spacing.py` kimutatja, ha elcsúszik. */
.gs-certifications .gs-cert {
	--gs-cert-logo-box: 108px;   /* az ISO-jelvény 110 px szélesen */
}

.gs-cert-dark {
	--gs-cert-logo-box: 94px;    /* az ISO-jelvény 96 px szélesen */
}

.gs-cert figure {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	min-height: var(--gs-cert-logo-box);
	margin-bottom: 0.8em;
}

/* A kártyán belüli térközöket itt vesszük kézbe. A téma alapértelmezése a képre
   32 px alsó, a címsorra 25 px felső margót ad — együtt 60 px, amitől a cím
   elszakad a logótól, és a kártya szétesik. A szelektorok a belső konténerig
   mennek, mert a téma szabályai (`.single-content figure`) egy osztály + egy
   elemnév specificitásúak, és a puszta `.gs-cert figure` alulmaradna. */
.gs-cert > .kt-inside-inner-col > figure {
	margin-bottom: 1.1rem;
}

.gs-cert > .kt-inside-inner-col > h3 {
	margin-top: 0;
	margin-bottom: 0.45rem;
}

.gs-cert > .kt-inside-inner-col > p {
	margin-top: 0;
}

/* A KNX-logó fehér hátterű JPEG: sötét sávon így nem lebeg benne egy fehér téglalap. */
.gs-cert-dark .gs-cert-logo-dark img {
	border-radius: 6px;
}

/* Az ISO-jelvény sötétkék, átlátszó háttérrel. A sötét szekciókban és a láblécben
   beleolvadna a háttérbe (mérve 1,3:1), ezért fehér korongot kap — a jelvény kör
   alakú, tehát a korong is az. Világos felületen erre nincs szükség. */
.gs-cert-dark .gs-cert-badge img,
.gs-footer-cert.gs-cert-badge img {
	padding: 7px;
	border-radius: 50%;
	background: #fff;
}

.gs-cert-title {
	margin-bottom: 0.35em;
	font-size: 1.05rem;
}

.gs-cert-note {
	max-width: 34ch;
	font-size: 0.93rem;
	line-height: 1.55;
}

.gs-footer-cert {
	margin-top: 1.4em;
	opacity: 0.85;
	transition: opacity 0.25s var(--gs-ease);
}

.gs-footer-cert:hover {
	opacity: 1;
}

/* ---------------------------------------------------------------------------
   18. Szekción belüli gombsorok térköze
--------------------------------------------------------------------------- */

/* A szekciót lezáró gomb (galéria alatt, kártyarács alatt, átvezetésnél) az előtte
   lévő elemhez TAPADT: a Kadence témája `margin-top: 0`-t ad a tartalmi blokkoknak,
   a `gs-gallery-button` osztályhoz pedig sosem készült szabály. Mérve 0 px volt a rés
   a galéria alja és a gomb teteje között — a gomb ránőtt a képekre.

   A 2,4 rem a szekción belüli elemközök felső határa: elválik a fölötte lévő
   tartalomtól, de még egyértelműen ugyanabba a szekcióba tartozik.

   A szelektor két osztályt köt össze, mert a Kadence szabálya (`.single-content figure`
   és társai) egy osztály + egy elemnév — a puszta `.gs-gallery-button` alulmaradna. */
.gs-gallery-button.wp-block-kadence-advancedbtn {
	margin-top: 2.4rem;
}

/* Két gomb egymás mellett középen: keskeny nézetben egymás alá kerülnek, és ott
   kell közéjük térköz — vízszintesen a Kadence saját gutterje adja. */
.gs-gallery-button .kb-btns-outer-wrap {
	row-gap: 0.75rem;
}

/* A lábléc kapcsolati sorainak ikonja az első sorhoz igazodik (`iconVerticalAlign`),
   a kis felső margó pedig a szöveg vizuális középvonalára emeli — enélkül a sor
   tetejére tapadna. */
.gs-footer-line .kb-adv-heading-icon {
	margin-top: 0.22em;
}