/* =========================================================================
   A16Hub – kiegészítő front-end stílusok
   Minden érték a theme.json tokenjeire hivatkozik (--wp--preset--*),
   így a design tokenek egyetlen forrása a theme.json marad.
   ========================================================================= */

:root {
	--a16-tap: 44px; /* minimális érintési magasság (UX követelmény) */
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* --- Kihagyó (skip) link az akadálymentességhez ------------------------- */
.a16-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	background: var(--wp--preset--color--primary);
	color: #fff;
	padding: 0.75rem 1.25rem;
	border-radius: 0 0 var(--wp--custom--radius--sm) 0;
	text-decoration: none;
	font-family: var(--wp--preset--font-family--manrope);
	font-weight: 700;
}
.a16-skip-link:focus {
	left: 0;
}

/* --- Eyebrow / kis címke ----------------------------------------------- */
.a16-eyebrow {
	display: inline-block;
	font-family: var(--wp--preset--font-family--manrope);
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-dark);
	margin-bottom: 0.35rem;
}

/* --- Státusz badge (pl. "Hamarosan", "Egyeztetés alatt") --------------- */
.a16-badge {
	display: inline-block;
	font-family: var(--wp--preset--font-family--manrope);
	font-weight: 700;
	font-size: 0.78rem;
	letter-spacing: 0.04em;
	padding: 0.3rem 0.7rem;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--primary-soft);
	color: var(--wp--preset--color--primary-dark);
	line-height: 1.2;
}
.a16-badge--soon {
	background: rgba(217, 156, 97, 0.18);
	color: var(--wp--preset--color--accent-dark);
}

/* --- Kártya ------------------------------------------------------------- */
.a16-card {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--preset--shadow--card);
	height: 100%;
}

/* --- Ikonsoros felszereltség / előny ----------------------------------- */
.a16-feature {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
}
.a16-feature .a16-feature__icon,
.a16-feature figure {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--primary-soft);
	margin: 0;
}
.a16-feature .a16-feature__icon svg { width: 22px; height: 22px; }

/* --- Gombok: min. 44px tap target, másodlagos (outline) variáns -------- */
.wp-block-button__link {
	min-height: var(--a16-tap);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.18s ease, color 0.18s ease, transform 0.08s ease;
}
.wp-block-button__link:active { transform: translateY(1px); }

.is-style-outline > .wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--primary);
	border: 2px solid var(--wp--preset--color--primary);
}
.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--primary);
	color: #fff;
}

/* Kiemelő (copper) gombvariáns – additional class: is-style-accent */
.wp-block-button.is-style-accent .wp-block-button__link {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
}
.wp-block-button.is-style-accent .wp-block-button__link:hover {
	background: var(--wp--preset--color--accent-dark);
	color: #fff;
}

/* --- Placeholder fotóhely (egyértelműen jelölt) ------------------------ */
.a16-photo {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	min-height: 280px;
	padding: 1.5rem;
	border: 1px dashed var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--lg);
	background:
		linear-gradient(135deg, rgba(33, 82, 85, 0.06), rgba(217, 156, 97, 0.08)),
		var(--wp--preset--color--primary-soft);
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--manrope);
	font-weight: 600;
}
.a16-photo--tall { min-height: 440px; }
.a16-photo--wide { min-height: 340px; }

/* --- Gombok sötét (teal) háttéren -------------------------------------- */
.wp-block-button.is-on-dark.is-style-outline .wp-block-button__link,
.wp-block-button.is-on-dark.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: #ffffff;
	border: 2px solid rgba(255, 255, 255, 0.75);
}
.wp-block-button.is-on-dark.is-style-outline .wp-block-button__link:hover {
	background: #ffffff;
	color: var(--wp--preset--color--primary);
	border-color: #ffffff;
}

/* --- Fejléc / navigáció ------------------------------------------------- */
.a16-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(244, 239, 231, 0.92);
	backdrop-filter: saturate(140%) blur(8px);
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.wp-block-navigation a:where(:not(.wp-element-button)) {
	text-decoration: none;
	font-family: var(--wp--preset--font-family--manrope);
	font-weight: 600;
}
.wp-block-navigation a:where(:not(.wp-element-button)):hover {
	color: var(--wp--preset--color--primary-dark);
}

/* --- Sticky mobil "Foglalás" gomb -------------------------------------- */
.a16-sticky-cta {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 120;
	display: none;
	padding: 0.6rem max(0.75rem, env(safe-area-inset-left)) calc(0.6rem + env(safe-area-inset-bottom));
	background: rgba(244, 239, 231, 0.96);
	border-top: 1px solid var(--wp--preset--color--line);
	backdrop-filter: blur(8px);
}
.a16-sticky-cta a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: var(--a16-tap);
	padding: 0.7rem 1rem;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--primary);
	color: #fff;
	text-decoration: none;
	font-family: var(--wp--preset--font-family--manrope);
	font-weight: 700;
}
@media (max-width: 781px) {
	.a16-sticky-cta { display: block; }
	body { padding-bottom: 72px; } /* hogy a footer ne kerüljön a gomb alá */
}

/* --- Kattintásra betöltődő térkép (consent- és teljesítménybarát) ------ */
.a16-map {
	position: relative;
	border-radius: var(--wp--custom--radius--lg);
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--line);
	background:
		linear-gradient(135deg, rgba(33,82,85,0.08), rgba(217,156,97,0.10)),
		var(--wp--preset--color--primary-soft);
	min-height: 320px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}
.a16-map__inner { padding: 1.5rem; max-width: 420px; }
.a16-map__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: var(--a16-tap);
	margin-top: 0.75rem;
	padding: 0.7rem 1.4rem;
	border: none;
	cursor: pointer;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--primary);
	color: #fff;
	font-family: var(--wp--preset--font-family--manrope);
	font-weight: 700;
	font-size: 1rem;
}
.a16-map__btn:hover { background: var(--wp--preset--color--primary-dark); }
.a16-map__note { font-size: 0.85rem; color: var(--wp--preset--color--muted); margin-top: 0.6rem; }
.a16-map iframe { width: 100%; height: 100%; min-height: 360px; border: 0; display: block; }
.a16-map.is-loaded { display: block; min-height: 360px; background: none; }

/* --- Foglalási embed konténer ------------------------------------------ */
.a16-embed {
	border: 1px dashed var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--preset--color--surface);
	padding: clamp(1.25rem, 3vw, 2rem);
}
.a16-embed iframe { width: 100%; min-height: 640px; border: 0; border-radius: var(--wp--custom--radius--md); }
.a16-embed__placeholder {
	text-align: center;
	color: var(--wp--preset--color--muted);
}

/* --- Ár-kártya kiemelés ------------------------------------------------- */
.a16-price {
	font-family: var(--wp--preset--font-family--manrope);
	font-weight: 800;
	color: var(--wp--preset--color--primary);
	line-height: 1;
}

/* --- Űrlap (Fluent Forms / natív) egységes megjelenés ------------------ */
.a16-form input[type="text"],
.a16-form input[type="email"],
.a16-form input[type="tel"],
.a16-form textarea,
.ff-el-form-control {
	width: 100%;
	min-height: var(--a16-tap);
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--sm);
	background: #fff;
	font-family: var(--wp--preset--font-family--inter);
	font-size: 1rem;
	color: var(--wp--preset--color--contrast);
}
.a16-form select {
	width: 100%;
	min-height: var(--a16-tap);
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--sm);
	background: #fff;
	font-family: var(--wp--preset--font-family--inter);
	font-size: 1rem;
	color: var(--wp--preset--color--contrast);
}
.a16-form :is(input, textarea, select):focus,
.ff-el-form-control:focus {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--primary);
}
.a16-field { margin-bottom: 1rem; }
.a16-field > label {
	display: block;
	font-family: var(--wp--preset--font-family--manrope);
	font-weight: 600;
	font-size: 0.95rem;
	margin-bottom: 0.3rem;
	color: var(--wp--preset--color--contrast);
}
.a16-field-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.a16-field-row .a16-field { flex: 1 1 200px; margin-bottom: 1rem; }
.a16-booking-form button { margin-top: 0.5rem; }

/* --- Logó (fejléc/lábléc) ---------------------------------------------- */
.a16-logo { display: inline-flex; align-items: center; text-decoration: none; }
.a16-logo img { max-height: 44px; width: auto; }
.a16-custom-logo-link img,
.a16-logo .custom-logo { max-height: 44px; width: auto; height: auto; }

/* --- Fókusz-láthatóság billentyűzetes navigációhoz --------------------- */
a:focus-visible,
button:focus-visible,
.wp-block-button__link:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* --- Ártáblázat -------------------------------------------------------- */
.a16-pricing-sub {
	margin: 1.75rem 0 0.6rem;
	font-family: var(--wp--preset--font-family--manrope);
}
.a16-price-table {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--md);
	overflow: hidden;
	background: var(--wp--preset--color--surface);
	margin-bottom: 1.25rem;
}
.a16-price-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	padding: 0.85rem 1.15rem;
	border-top: 1px solid var(--wp--preset--color--line);
}
.a16-price-row:first-child { border-top: 0; }
.a16-price-row > span:last-child {
	font-family: var(--wp--preset--font-family--manrope);
	font-weight: 700;
	color: var(--wp--preset--color--primary);
	white-space: nowrap;
	text-align: right;
}
.a16-price-row--head {
	background: var(--wp--preset--color--primary-soft);
	font-family: var(--wp--preset--font-family--manrope);
	font-weight: 700;
	color: var(--wp--preset--color--primary);
	font-size: 0.9rem;
	letter-spacing: 0.02em;
}
.a16-fine-print {
	font-size: 0.9rem;
	color: var(--wp--preset--color--muted);
}

/* --- Lépés-kártya (Hogyan működik) ------------------------------------- */
.a16-step__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--primary);
	color: #fff;
	font-family: var(--wp--preset--font-family--manrope);
	font-weight: 800;
	font-size: 1.2rem;
	margin-bottom: 0.6rem;
}

/* --- Piackutatás / összecsukható jegyzet ------------------------------- */
.a16-research summary {
	cursor: pointer;
	font-family: var(--wp--preset--font-family--manrope);
	font-weight: 600;
	color: var(--wp--preset--color--primary);
	padding: 0.6rem 0;
}

/* --- GYIK (details/summary) -------------------------------------------- */
.a16-faq details {
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding: 0.35rem 0;
}
.a16-faq summary {
	cursor: pointer;
	list-style: none;
	padding: 0.9rem 0;
	font-family: var(--wp--preset--font-family--manrope);
	font-weight: 700;
	color: var(--wp--preset--color--primary);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	min-height: var(--a16-tap);
}
.a16-faq summary::-webkit-details-marker { display: none; }
.a16-faq summary::after {
	content: "+";
	font-size: 1.4rem;
	color: var(--wp--preset--color--accent-dark);
	transition: transform 0.2s ease;
}
.a16-faq details[open] summary::after { content: "–"; }
.a16-faq details > *:not(summary) { padding-bottom: 0.9rem; color: var(--wp--preset--color--contrast); }

/* --- Nyelvváltó (Polylang) --------------------------------------------- */
.a16-lang {
	list-style: none;
	display: flex;
	gap: 0.35rem;
	margin: 0;
	padding: 0;
	align-items: center;
	font-family: var(--wp--preset--font-family--manrope);
	font-weight: 600;
	font-size: 0.9rem;
}
.a16-lang li { margin: 0; }
.a16-lang a {
	text-decoration: none;
	color: var(--wp--preset--color--primary);
	padding: 0.25rem 0.5rem;
	border-radius: var(--wp--custom--radius--sm);
	line-height: 1.2;
}
.a16-lang .current-lang a,
.a16-lang a[aria-current="page"] {
	background: var(--wp--preset--color--primary-soft);
}

/* --- Fejléc/lábléc segédosztályok -------------------------------------- */
@media (max-width: 781px) {
	.a16-hide-mobile { display: none !important; }
}

/* --- Lábléc ------------------------------------------------------------ */
.a16-footer {
	background: var(--wp--preset--color--primary-dark);
	color: #EBE4D8;
}
.a16-footer :is(h1, h2, h3, h4, .wp-block-heading) { color: #FFFFFF; }
.a16-footer a { color: #EBE4D8; text-decoration: none; }
.a16-footer a:hover { color: #FFFFFF; text-decoration: underline; }
.a16-footer .a16-footer__brand {
	font-family: var(--wp--preset--font-family--manrope);
	font-weight: 800;
	font-size: 1.4rem;
	color: #FFFFFF;
}
.a16-footer ul { list-style: none; margin: 0; padding: 0; }
.a16-footer li { margin: 0 0 0.4rem; }
.a16-footer .a16-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.16);
	font-size: 0.85rem;
	color: rgba(235, 228, 216, 0.8);
}

/* --- Kis segédek ------------------------------------------------------- */
.a16-lead { font-size: var(--wp--preset--font-size--large); color: var(--wp--preset--color--contrast); }
.a16-muted { color: var(--wp--preset--color--muted); }
@media (prefers-reduced-motion: reduce) {
	* { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}