/* ==========================================================================
   TGYK Akadálymentesítés – stíluslap
   Takáts Gyula Vármegyei Hatókörű Városi Könyvtár
   WCAG 2.1 AA / MSZ EN 301 549
   --------------------------------------------------------------------------
   Ez a fájl NEM módosít semmilyen meglévő stílust azon kívül, ami az
   akadálymentességhez szükséges. Szín- és elrendezésbeli változást nem okoz.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Színváltozók
   --------------------------------------------------------------------------
   A fókuszgyűrű két rétegből áll: egy világos és egy sötét gyűrűből.
   Így bármilyen háttéren legalább az egyik eléri a 3:1 kontrasztarányt.

     fehér gyűrű  fehér háttéren   1,00:1   sötét gyűrű  21,00:1  <- ez látszik
     fehér gyűrű  #041e42 háttéren 16,54:1  sötét gyűrű   1,27:1  <- ez látszik
     fehér gyűrű  #488dee háttéren  3,32:1  sötét gyűrű   6,32:1  <- mindkettő
   -------------------------------------------------------------------------- */

:root {
	--tgyk-focus-dark: #0b0b0b;
	--tgyk-focus-light: #ffffff;
	--tgyk-focus-width: 3px;
	--tgyk-focus-offset: 3px;
}

/* --------------------------------------------------------------------------
   1. Kettős fókuszgyűrű
   --------------------------------------------------------------------------
   WCAG 2.4.7 (Fókusz láthatósága) – A
   WCAG 2.4.11 (Fókusz nem takart) – AA
   WCAG 1.4.11 (Nem szöveges kontraszt) – AA

   :focus-visible használata szándékos: egérkattintásnál nem villan fel a
   keret, csak billentyűzetes navigációnál. Ez megengedett a szabvány szerint.
   -------------------------------------------------------------------------- */

:where(a[href], button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"]), [role="button"], [role="link"], [role="tab"], [role="menuitem"]):focus-visible {
	outline: var(--tgyk-focus-width) solid var(--tgyk-focus-dark) !important;
	outline-offset: var(--tgyk-focus-offset) !important;
	box-shadow: 0 0 0 var(--tgyk-focus-width) var(--tgyk-focus-light) !important;
	border-radius: 2px;
}

/* --------------------------------------------------------------------------
   2. A "outline:none" szabályok felülírása
   --------------------------------------------------------------------------
   A témában és a bővítményekben 11 olyan szabály található, amely kikapcsolja
   a fókuszkeretet. Ezek magasabb specifikusságúak, mint a fenti :where()
   szabály (annak specifikussága szándékosan 0), ezért itt külön felül kell
   írni őket erősebb választókkal.
   -------------------------------------------------------------------------- */

.jet-listing .slick-list:focus-visible,
.jet-form input:focus-visible,
.jet-form select:focus-visible,
.jet-form textarea:focus-visible,
.elementor-button:focus-visible,
.elementor-search-form input:focus-visible,
.elementor-search-form button:focus-visible,
.swiper-button-next:focus-visible,
.swiper-button-prev:focus-visible,
.swiper-pagination-bullet:focus-visible,
.menu-item a:focus-visible,
.tnp-widget input:focus-visible,
#moove_gdpr_cookie_info_bar button:focus-visible,
#moove_gdpr_cookie_info_bar a:focus-visible {
	outline: var(--tgyk-focus-width) solid var(--tgyk-focus-dark) !important;
	outline-offset: var(--tgyk-focus-offset) !important;
	box-shadow: 0 0 0 var(--tgyk-focus-width) var(--tgyk-focus-light) !important;
}

/* --------------------------------------------------------------------------
   3. Levágott fókuszkeret javítása
   --------------------------------------------------------------------------
   Az overflow:hidden tulajdonságú konténerek (Programok kártyák, carousel
   diák) levágják a kifelé rajzolt keretet. Ezeknél BEFELÉ rajzolunk.
   Ez a DMÜ M1/b pontja: "csak részben látható a billentyűfókusz".
   -------------------------------------------------------------------------- */

.jet-engine-listing-overlay-link:focus-visible,
.jet-listing-dynamic-post:focus-visible,
.elementor-widget-image-box a:focus-visible,
.swiper-slide a:focus-visible,
.jet-listing-grid__item a:focus-visible {
	outline-offset: calc(-1 * var(--tgyk-focus-width) - 1px) !important;
	box-shadow: inset 0 0 0 var(--tgyk-focus-width) var(--tgyk-focus-light) !important;
}

/* MEGJEGYZÉS: ide korábban "overflow: visible" került a kártyakonténerekre,
   hogy a fókuszkeret ne vágódjon le. Ez ELTÖRTE a carousel elrendezését:
   a látómezőn kívüli diák is megjelentek, a lapozónyilak pedig a sorok
   közepére csúsztak. Ezért kikerült.
   A levágott keret problémáját a fenti "inset box-shadow" oldja meg, amely
   az elemen BELÜL rajzolódik, tehát nincs szükség az overflow módosítására. */

/* --------------------------------------------------------------------------
   4. Vizuálisan rejtett, de felolvasható szöveg
   --------------------------------------------------------------------------
   FONTOS: display:none vagy visibility:hidden NEM használható erre, mert azt
   a képernyőolvasó sem látja. Ez a "clip" technika a helyes megoldás.
   -------------------------------------------------------------------------- */

.tgyk-sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* Rejtett, amíg nem kap fókuszt – ez kell az ugrólinkhez. */
.tgyk-sr-only-focusable:not(:focus):not(:focus-within) {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* --------------------------------------------------------------------------
   5. Ugrólink megjelenése fókuszban
   -------------------------------------------------------------------------- */

.tgyk-skip-link:focus {
	position: absolute !important;
	top: 0.5rem;
	left: 0.5rem;
	z-index: 100000;
	display: block;
	width: auto;
	height: auto;
	padding: 0.75rem 1.25rem;
	clip: auto !important;
	clip-path: none !important;
	background: #ffffff;
	color: #1158bb; /* 6,69:1 fehér háttéren */
	font-size: 1rem;
	font-weight: 600;
	text-decoration: underline;
	border-radius: 4px;
}

/* --------------------------------------------------------------------------
   6. Carousel szüneteltető gomb
   --------------------------------------------------------------------------
   WCAG 2.2.2 (Szünet, leállítás, elrejtés) – A
   A gombot a JS szúrja be; itt csak a megjelenését adjuk meg.
   -------------------------------------------------------------------------- */

/* A gombot saját, jobbra igazított sávba tesszük a carousel fölé.
   Így nem lóg bele a tartalomba, és billentyűzettel is előbb érhető el,
   mint maga a mozgó tartalom. */
.tgyk-slider-toggle-wrap {
	display: flex;
	justify-content: flex-end;
	margin: 0 0 0.4rem;
	padding: 0 0.25rem;
}

/* A magasabb specifikusság (button.osztály) és a néhány !important azért kell,
   hogy a téma és az Elementor általános gombstílusai ne írják felül. */
button.tgyk-slider-toggle {
	position: relative;
	z-index: 20;
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	margin: 0 !important;
	padding: 0.3em 0.75em !important;
	background: #ffffff !important;
	color: #1158bb !important; /* 6,69:1 fehér háttéren */
	border: 1px solid #1158bb !important; /* 6,69:1 – a 3:1 keretkövetelmény felett */
	border-radius: 4px !important;
	font-family: inherit;
	font-size: 0.75rem !important;
	font-weight: 500 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	line-height: 1.3 !important;
	opacity: 0.75;
	cursor: pointer;
	transition: opacity 0.15s ease;
}

button.tgyk-slider-toggle:hover,
button.tgyk-slider-toggle:focus-visible {
	opacity: 1;
	background: #1158bb !important;
	color: #ffffff !important;
}

/* Az ikon dekoratív (aria-hidden), a gomb SZÖVEGE hordozza az információt.
   A gomb neve váltakozik "Diavetítés szüneteltetése" és "Diavetítés indítása"
   között – ez megbízhatóbb, mint az aria-pressed állapot. */
.tgyk-slider-toggle__icon {
	width: 0.85em;
	height: 0.85em;
	flex: 0 0 auto;
}

/* Fut: szünet jel, két függőleges sáv */
.tgyk-slider-toggle[data-state="playing"] .tgyk-slider-toggle__icon {
	background: linear-gradient(
		to right,
		currentColor 0 35%,
		transparent 35% 65%,
		currentColor 65% 100%
	);
}

/* Szünetel: lejátszás jel, háromszög */
.tgyk-slider-toggle[data-state="paused"] .tgyk-slider-toggle__icon {
	background: currentColor;
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* --------------------------------------------------------------------------
   7. Csökkentett mozgás
   --------------------------------------------------------------------------
   Ha a látogató a rendszerében csökkentett mozgást kért (vestibularis
   panaszok, migrén, epilepszia), minden animációt le kell állítani.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* --------------------------------------------------------------------------
   8. Új ablakban nyíló link jelzése
   --------------------------------------------------------------------------
   A JS szúr be egy rejtett szöveget; itt csak arra kell figyelni, hogy a
   szöveg ne okozzon elrendezési ugrást.
   -------------------------------------------------------------------------- */

.tgyk-new-window-note {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
}

/* --------------------------------------------------------------------------
   9. Süti-ablak – a fókusz mindig látszódjon a sötét háttéren is
   -------------------------------------------------------------------------- */

#moove_gdpr_cookie_info_bar.tgyk-dialog-open {
	/* Biztosítjuk, hogy az ablak a fókuszált elemmel együtt látható legyen. */
	overflow: visible;
}

/* --------------------------------------------------------------------------
   10. Érintéses célterület mérete (WCAG 2.5.8, AA a 2.2-ben – előretekintve)
   --------------------------------------------------------------------------
   Nem kötelező a 2.1 AA szinten, de olcsó, és a következő szabványverzióban
   már követelmény lesz. Csak akkor lép életbe, ha az elem kisebb 24 képpontnál.
   -------------------------------------------------------------------------- */

.swiper-pagination-bullet {
	min-width: 24px;
	min-height: 24px;
}