/**
 * AXISO Támogató Logók — publikus footer/shortcode blokk stílusa.
 *
 * Ez a fájl 1:1 leképezése a docs/design-notes.md (T-005, ui-designer) B.2–B.5
 * szakaszainak — eltérés esetén a frontend-dev jelentésében külön indoklás
 * szerepel, itt szándékos eltérés NINCS.
 *
 * Csak akkor kerül enqueue-olásra, ha ténylegesen van megjelenítendő logó
 * (lásd includes/class-axiso-sl-render.php, Axiso_SL_Render::enqueue_assets()).
 *
 * Nulla JavaScript-függőség (SPEC FR-4 / D-4).
 */

/* -------------------------------------------------------------------------
 * B.2 — Méretezés és elrendezés
 * ---------------------------------------------------------------------- */

.axiso-sl-wrapper {
	max-width: 220px;
	margin: 0 auto;
	padding: 24px 16px;
	box-sizing: border-box;
	width: 100%;
}

.axiso-sl-heading {
	font-size: 1.125rem; /* 18px */
	font-weight: 600;
	text-align: center;
	margin: 0 0 12px;
	color: var(--axiso-sl-text, #1e1e1e);
}

.axiso-sl-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column; /* egymás alatt — SOSEM rács/sor, semmilyen breakpointon */
	align-items: center;
	gap: 16px;
}

.axiso-sl-item {
	width: 100%;
	display: flex;
	justify-content: center;
}

.axiso-sl-link {
	display: inline-block;
	padding: 12px 16px;
	border-radius: 8px;
	background-color: var(--axiso-sl-chip-bg, #ffffff);
	border: 1px solid var(--axiso-sl-chip-border, rgba(0, 0, 0, 0.08));
}

.axiso-sl-logo {
	display: block;
	max-width: 160px;
	max-height: 80px;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* Mobil (≤480px): az elrendezés (függőleges lista) NEM változik — a
   SPEC/TASKS kifejezetten kizárja a rács/slider variánst bármilyen nézeten,
   csak a méretek finomodnak. */
@media (max-width: 480px) {
	.axiso-sl-wrapper {
		padding: 16px 12px;
	}

	.axiso-sl-logo {
		max-width: 140px;
		max-height: 64px;
	}
}

/* -------------------------------------------------------------------------
 * B.3 — Light/dark témakövetés (CSS custom property-k, light fallback +
 * rendszerpreferencia + kézi téma-váltó szelektor-duplikáció)
 * ---------------------------------------------------------------------- */

.axiso-sl-wrapper {
	--axiso-sl-text: #1e1e1e;
	--axiso-sl-chip-bg: #ffffff;
	--axiso-sl-chip-border: rgba(0, 0, 0, 0.08);
	--axiso-sl-focus-ring: #1a73e8;
}

@media (prefers-color-scheme: dark) {
	.axiso-sl-wrapper {
		--axiso-sl-text: #f0f0f0;
		--axiso-sl-chip-bg: #f5f5f5; /* szándékosan világos marad, ld. B.4 */
		--axiso-sl-chip-border: rgba(255, 255, 255, 0.12);
		--axiso-sl-focus-ring: #8ab4f8;
	}
}

/* Kézi téma-váltó támogatása: ha a befogadó téma osztály-alapú kézi
 * kapcsolóra épít (nem csak OS-szintű prefers-color-scheme-re), a fenti
 * custom property-blokk duplikálva van ilyen szelektor alatt is, hogy a
 * kézi váltó felülírja az OS-preferenciát. A pontos szelektor a befogadó
 * téma vizsgálatától függ (design-notes B.3) — jelen implementációkor a
 * céltéma nem ismert, ezért a két leggyakoribb, dokumentált mintát
 * (`body.dark-mode`, `html[data-theme="dark"]`) használjuk placeholderként.
 * Ha a végleges céltéma más konvenciót használ, ezt a szelektor-listát kell
 * bővíteni/cserélni — a `prefers-color-scheme` ág önmagában is elégséges MVP. */
body.dark-mode .axiso-sl-wrapper,
html[data-theme="dark"] .axiso-sl-wrapper {
	--axiso-sl-text: #f0f0f0;
	--axiso-sl-chip-bg: #f5f5f5;
	--axiso-sl-chip-border: rgba(255, 255, 255, 0.12);
	--axiso-sl-focus-ring: #8ab4f8;
}

/* -------------------------------------------------------------------------
 * B.5 — Akadálymentesség (a11y)
 * ---------------------------------------------------------------------- */

/* Fókusz-állapot: outline, nem box-shadow (hogy ne vágódjon le a chip szélénél). */
.axiso-sl-link:focus-visible,
.axiso-sl-link:focus {
	outline: 3px solid var(--axiso-sl-focus-ring);
	outline-offset: 3px;
	border-radius: 8px;
}

/* Vizuálisan rejtett, de képernyőolvasó számára elérhető segédszöveg
 * ("(új ablakban nyílik meg)") — saját utility, nem a befogadó téma
 * .screen-reader-text-jére támaszkodva (az nem garantált minden témában). */
.axiso-sl-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}