/* ---------------------------------------------------------------------------
   Lefedlek WordPress téma – kiegészítő stílusok.
   A dizájn fő stíluslapja a theme.css (Tailwind build). Itt csak az szerepel,
   ami a React → PHP átálláshoz kell: belépő animációk és apró segédosztályok.
--------------------------------------------------------------------------- */

/* Belépő (reveal) animáció – a Framer Motion megfelelője, tisztán CSS-ben.
   Az alapállapotot JS adja hozzá (.js-reveal), így JS nélkül minden látszik. */
.js-reveal {
	opacity: 0;
	transform: translateY(24px);
	will-change: opacity, transform;
	transition:
		opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.js-reveal.is-revealed {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.js-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* A hero szöveges rétegeinek belépője (GSAP kezeli, ez csak a kiindulás). */
.lefedlek-hero-intro [data-hero-layer] {
	opacity: 0;
}

/* Kép a referencia kártyán: mindig kitölti a keretet. */
figure img {
	display: block;
}

/* WordPress alap igazítások a jogi oldalak tartalmában. */
.legal-prose img {
	max-width: 100%;
	height: auto;
	border-radius: 0.75rem;
}

.legal-prose ol {
	margin: 0.5rem 0 1.25rem;
	padding-left: 1.25rem;
	list-style: decimal;
}

.legal-prose table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 1.25rem;
}

.legal-prose th,
.legal-prose td {
	border: 1px solid var(--color-line);
	padding: 0.5rem 0.75rem;
	text-align: left;
}

/* A WordPress admin sáv ne takarja a fix navigációt. */
body.admin-bar [data-navbar] {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar [data-navbar] {
		top: 46px;
	}
}

/* Galéria leírás overlay – a Tailwind buildben nem szereplő állapotokhoz. */
.lefedlek-desc {
	opacity: 0;
	transition: opacity 0.3s ease;
}

.group:hover .lefedlek-desc,
.group:focus-within .lefedlek-desc {
	opacity: 1;
}

/* Két segédosztály, ami a Tailwind buildben nem szerepelt (új elemekhez kell). */
.px-5 {
	padding-inline: calc(var(--spacing) * 5);
}

.bg-\[var\(--color-ink\)\]\/80 {
	background-color: color-mix(in oklab, var(--color-ink) 80%, transparent);
}