/**
 * VDTA Design — süti-hozzájárulás (consent) megjelenés
 *
 * MIHEZ TARTOZIK
 *   inc/consent.php  — a markup (`#vdta-consent`, `#vdta-consent-open`) és a logika
 *   assets/consent.js — a megjelenítés, a döntés tárolása és a szkript-visszainjektálás
 *
 * ALAPELVEK
 *   1. ALSÓ SÁV, nem modális ablak. Nem takarja el a cikket, nem blokkolja a görgetést,
 *      és mobilon is alul marad (a felhasználói döntés szerint).
 *   2. A markup `hidden` állapotban jön a HTML-ből, ezért alapból LÁTHATATLAN. Csak a
 *      consent.js teszi láthatóvá. Így az oldalcache-elt HTML minden látogatónak azonos
 *      marad, és JS-hiba esetén sem lóg be egy félkész sáv.
 *   3. A stílus a `redesign.css` tokenjeire épül (`--v2-*`), de minden értéknél van
 *      tartalék, hogy a sáv önállóan is használható legyen.
 *   4. A z-index a menüsáv (90) és a kereső-panel (95) FÖLÖTT van, de a WordPress
 *      admin-sáv (99999) alatt: bejelentkezve sem takarja a szerkesztő-sávot.
 *
 * VISSZAVONÁS
 *   A `vdta-consent` stílus kiregisztrálása az inc/assets.php-ból. A markup ettől
 *   függetlenül `hidden` marad, tehát semmi nem törik el.
 *
 * Ellenőrző parancs (éles):
 *   curl -sS https://vdtablog.hu/ | grep -c 'id="vdta-consent"'
 *
 * @package vdta-design
 */

/* ---------------------------------------------------------------- alap */

#vdta-consent,
#vdta-consent-open {
	--vdta-consent-radius: var(--v2-r-md, 14px);
	--vdta-consent-line: var(--v2-line, #e3e7ee);
	--vdta-consent-navy: var(--v2-navy-2, #155081);
	--vdta-consent-muted: var(--v2-muted, #5b6472);
	--vdta-consent-text: var(--v2-text, #212121);
	--vdta-consent-surface: var(--v2-surface, #ffffff);
	--vdta-consent-accent: var(--v2-red-2, #ce2525);

	box-sizing: border-box;
	font-family: var(--v2-font, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
}

#vdta-consent *,
#vdta-consent *::before,
#vdta-consent *::after {
	box-sizing: border-box;
}

/* A `hidden` attribútum minden más szabályt felülír — ez a cache-biztos alapállapot. */
#vdta-consent[hidden],
#vdta-consent-open[hidden] {
	display: none !important;
}

/* ---------------------------------------------------------------- sáv */

#vdta-consent {
	position: fixed;
	inset: auto 0 0 0;
	z-index: 99998;

	padding: 0;
	background: var(--vdta-consent-surface);
	border-top: 3px solid var(--vdta-consent-navy);
	box-shadow: 0 -8px 28px rgba(1, 44, 109, 0.16);

	max-height: 78vh;
	overflow-y: auto;
	overscroll-behavior: contain;

	color: var(--vdta-consent-text);
	font-size: 14px;
	line-height: 1.5;

	animation: vdta-consent-in 0.22s ease-out both;
}

@keyframes vdta-consent-in {
	from { transform: translateY(18px); opacity: 0; }
	to   { transform: translateY(0);    opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	#vdta-consent {
		animation: none;
	}
}

.vdta-consent__inner {
	max-width: 1180px;
	margin: 0 auto;
	padding: 16px 20px 18px;
}

.vdta-consent__main {
	max-width: 74ch;
}

.vdta-consent__title {
	margin: 0 0 4px;
	font-family: var(--v2-font-head, Georgia, serif);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--vdta-consent-navy);
}

.vdta-consent__text {
	margin: 0;
	color: var(--vdta-consent-muted);
	font-size: 13.5px;
}

.vdta-consent__text a {
	color: var(--vdta-consent-navy);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.vdta-consent__text a:hover,
.vdta-consent__text a:focus-visible {
	color: var(--vdta-consent-accent);
}

/* ---------------------------------------------------------------- gombok */

.vdta-consent__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
}

.vdta-consent__btn {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;

	min-height: 40px;
	padding: 9px 16px;
	margin: 0;

	border: 1px solid var(--vdta-consent-line);
	border-radius: var(--v2-r-pill, 999px);
	background: var(--vdta-consent-surface);
	color: var(--vdta-consent-navy);

	font: inherit;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;

	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.vdta-consent__btn:hover {
	background: var(--v2-surface-2, #eef0f4);
	border-color: var(--v2-line-strong, #cfd5e0);
}

.vdta-consent__btn:focus-visible {
	outline: 2px solid var(--vdta-consent-navy);
	outline-offset: 2px;
}

.vdta-consent__btn--primary {
	background: var(--vdta-consent-navy);
	border-color: var(--vdta-consent-navy);
	color: var(--v2-on-dark, #ffffff);
}

.vdta-consent__btn--primary:hover {
	background: var(--v2-navy, #012c6d);
	border-color: var(--v2-navy, #012c6d);
}

.vdta-consent__btn--link {
	border-color: transparent;
	background: transparent;
	text-decoration: underline;
	text-underline-offset: 3px;
	font-weight: 500;
}

.vdta-consent__btn--link:hover {
	background: transparent;
	color: var(--vdta-consent-accent);
}

/* ---------------------------------------------------------------- panel */

.vdta-consent__panel {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--vdta-consent-line);
}

.vdta-consent__panel[hidden] {
	display: none !important;
}

.vdta-consent__group {
	margin: 0 0 14px;
	padding: 0;
	border: 0;
}

.vdta-consent__legend {
	padding: 0;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--vdta-consent-navy);
}

.vdta-consent__switch {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
}

.vdta-consent__switch input {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--vdta-consent-navy);
	cursor: pointer;
}

.vdta-consent__switch input:focus-visible {
	outline: 2px solid var(--vdta-consent-navy);
	outline-offset: 2px;
}

.vdta-consent__small {
	margin: 6px 0 0;
	max-width: 78ch;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--vdta-consent-muted);
}

.vdta-consent__cookies {
	margin: 6px 0 0;
	font-size: 12px;
	color: var(--vdta-consent-muted);
	word-break: break-word;
}

.vdta-consent__cookies code {
	padding: 1px 5px;
	border: 1px solid var(--vdta-consent-line);
	border-radius: var(--v2-r-xs, 6px);
	background: var(--v2-surface-2, #eef0f4);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 11.5px;
	color: var(--vdta-consent-text);
}

.vdta-consent__panel-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* ---------------------------------------------------------------- újranyitó gomb */

#vdta-consent-open {
	position: fixed;
	left: 12px;
	bottom: 12px;
	z-index: 99997;

	padding: 7px 12px;
	border: 1px solid var(--vdta-consent-line);
	border-radius: var(--v2-r-pill, 999px);
	background: var(--vdta-consent-surface);
	color: var(--vdta-consent-muted);

	font: inherit;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	box-shadow: var(--v2-shadow-1, 0 2px 8px rgba(1, 44, 109, 0.12));

	opacity: 0.82;
	transition: opacity 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

#vdta-consent-open:hover,
#vdta-consent-open:focus-visible {
	opacity: 1;
	color: var(--vdta-consent-navy);
	border-color: var(--v2-line-strong, #cfd5e0);
}

#vdta-consent-open:focus-visible {
	outline: 2px solid var(--vdta-consent-navy);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------- mobil */

@media (max-width: 720px) {
	#vdta-consent {
		max-height: 88vh;
	}

	.vdta-consent__inner {
		padding: 13px 14px 15px;
	}

	.vdta-consent__title {
		font-size: 16px;
	}

	.vdta-consent__text {
		font-size: 13px;
	}

	.vdta-consent__actions {
		flex-direction: column;
		align-items: stretch;
		gap: 7px;
	}

	.vdta-consent__btn {
		width: 100%;
		min-height: 44px;
	}

	.vdta-consent__btn--link {
		min-height: 34px;
	}

	.vdta-consent__panel-actions .vdta-consent__btn {
		width: 100%;
	}

	#vdta-consent-open {
		left: 8px;
		bottom: 8px;
		padding: 6px 10px;
		font-size: 11.5px;
	}
}

/* ---------------------------------------------------------------- nyomtatás */

@media print {
	#vdta-consent,
	#vdta-consent-open {
		display: none !important;
	}
}

/* Bejelentkezett szerkesztőnél az admin-sáv magasságát tiszteljük. */
body.admin-bar #vdta-consent-open {
	bottom: 46px;
}