/*
 * mt-trustindex.css: homepage review section (REVIEWS-02). Enqueued by mu-plugins/mt-trustindex.php on the front page only.
 * Our frame (header, slot, F8 line, consent card) plus what the trustindex.io editor can't set on the widget (BUILD.md
 * § What the editor can't do): Poppins labels, 44 px arrows with our focus ring, alignment with our header, reserved height.
 * Colours, card values and sizes stay in the widget settings; this file only adjusts.
 *
 * Trustindex's rules run at specificity (0,4,1)+ and some carry !important. Ours are scoped under #velemenyek (an id beats
 * any number of classes), so they win without !important, except over Trustindex's own !important declarations.
 * Palette tokens only (theme.json presets + the theme's --mt-* tokens). Type on the page scale (14 / 16, DS02-06).
 */
.mt-ti {
	--mt-ti-arrow: 44px;
	--mt-ti-arrow-out: min(30px, calc(var(--wp--style--root--padding-left) - 2px));   /* arrows mostly outside the card row, as in the
	                              owner's pick, but never past the page gutter (20 px on phones) */
	background: var(--wp--preset--color--base);
	padding: 64px var(--wp--style--root--padding-left);
}
.mt-ti[hidden] { display: none !important; }   /* the fallback (no widget) */
.mt-ti, .mt-ti__inner, .mt-ti__head, .mt-ti__slot, .mt-ti__f8, .mt-ti__consent { box-sizing: border-box; }   /* the theme has no global border-box; Trustindex sets its own */
.mt-ti__inner { max-width: var(--wp--style--global--wide-size); margin: 0 auto; container: mt-ti / inline-size; }

/* Header: REVIEWS-01's, i.e. the magazine section's idiom */
.mt-ti__head .mt-eyebrow { margin: 0; }
.mt-ti__head .wp-block-heading { margin: 45px 0 0; text-wrap: balance; }

/* The slot: reserved before the async widget arrives, so nothing below it moves. The widget's height only depends on the
   layout: every card is ~248.5 px (40 px avatar row, stars, 4 lines + a read-more row, whatever the review), and Trustindex
   picks the columns as floor(slot width / 340) and stacks its header at viewport ≤ 479 px. Measured with the longest possible
   review in HU/EN/RO (p3-badge/test/heights.mjs --worst, exact to 0.01 px): at most 342.59 px at 2–4 columns, 436.59 px at
   1 column, 459.45 px on phones (459.59 at 2× pixel ratio), rounded up. Before the owner's 2026-11-11 look change (profile
   pictures, tick) cards were 247.375 px and the reserves 342 / 436 / 459: the new widget overran them by 0.6 px, enough to shift. */
.mt-ti__slot { --mt-ti-h: 343px; min-height: var(--mt-ti-h); margin-top: 30px; }
@container mt-ti (max-width: 679.98px) { .mt-ti__slot { --mt-ti-h: 437px; } }
@media (max-width: 479px) { .mt-ti__slot { --mt-ti-h: 460px; } }
.mt-ti__slot:focus { outline: none; }   /* focus parks here after the consent button; the button is gone */

/* F8 line: a quiet link to the Google profile, a full 44 px tap row */
.mt-ti__f8 { margin: 12px 0 0; font-size: var(--wp--preset--font-size--small); line-height: 1.5; }
.mt-ti__f8 a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--wp--preset--color--muted);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color var(--mt-dur-fast) var(--mt-ease);
}
@media (hover: hover) and (pointer: fine) { .mt-ti__f8 a:hover { color: var(--wp--preset--color--heading); } }

/* Stop / start for Trustindex's autoplay (P4b, WCAG 2.2.2), at the end of the F8 row, styled like the arrows. Its 44 px are
   always in the row (visibility, not display), so the row keeps its height when the script shows it; until then it is
   invisible and out of the tab order. */
.mt-ti__f8 { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#velemenyek .mt-ti__auto {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 44px;
	height: 44px;
	margin: 0 0 0 auto;
	padding: 0;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 50%;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary);
	box-shadow: var(--mt-shadow-sm);
	cursor: pointer;
	visibility: hidden;
	transition: background-color var(--mt-dur-fast) var(--mt-ease), border-color var(--mt-dur-fast) var(--mt-ease), transform var(--mt-dur-fast) var(--mt-ease);
}
#velemenyek.is-rotating .mt-ti__auto { visibility: visible; }
#velemenyek .mt-ti__auto svg { display: block; width: 16px; height: 16px; fill: currentColor; }
#velemenyek .mt-ti__auto[data-state="playing"] .mt-ti__i-play,
#velemenyek .mt-ti__auto[data-state="paused"] .mt-ti__i-stop { display: none; }
#velemenyek .mt-ti__auto[data-state="paused"] svg { transform: translateX(1px); }   /* the triangle's optical centre */
#velemenyek .mt-ti__auto:focus { outline: none; }
#velemenyek .mt-ti__auto:focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
	#velemenyek .mt-ti__auto:hover { background-color: var(--mt-blue-tint); border-color: var(--mt-blue-tint-border); }
}
#velemenyek .mt-ti__auto:active { transform: scale(0.96); }

/* Consent variant: the placeholder card fills the reserved space (theme .mt-flip__* card, as the Kapcsolat map facade) */
.mt-ti__consent {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--mt-ti-h);
	background: var(--mt-blue-tint);
	border: 1px solid var(--mt-blue-tint-border);
	border-radius: var(--mt-radius-md);
}

/* ==========================================================================
   The Trustindex widget
   ========================================================================== */
/* Alignment: Trustindex insets the header bar by 24 px and the cards by 12 + 12 px; ours start at our header's edge.
   The widget's overflow:hidden would clip the arrows on the card edges; the slider row clips its own cards. */
#velemenyek .ti-widget { overflow: visible; }
/* Without Trustindex's overflow:hidden the container's 15 px bottom margin (20 px under the phone progress line) would leak
   out of the slot and push the F8 line down when the widget lands; the widget's box is exactly what the slot reserves. */
#velemenyek .ti-widget .ti-widget-container { margin-top: 0; margin-bottom: 0; }
#velemenyek .ti-widget .ti-controls-line { margin-bottom: 0; }
#velemenyek .ti-widget .ti-widget-container .ti-widget-header { margin-left: 0 !important; margin-right: 0 !important; }
#velemenyek .ti-widget .ti-reviews-container-wrapper { margin: 0 -12px !important; }

/* Header bar, 2+ columns: one row (rating left, button right) at every width, as compact as the bar the owner OK'd in P2
   (Trustindex floats the button out of the bar at 2 columns and adds 12 px above it at 3–4, so the bar was 63 or 86 px). */
#velemenyek .ti-widget .ti-widget-container:not(.ti-col-1) .ti-widget-header .ti-header-content.ti-active { margin-top: 10px; padding-bottom: 10px; }
#velemenyek .ti-widget .ti-widget-container:not(.ti-col-1) .ti-widget-header .ti-header-content .ti-header-write-btn-container { position: static; margin: 0 0 0 auto; }

/* Labels in Poppins 600 like our other cards; the header row on the 16 px step (Trustindex: 15 px) */
#velemenyek .ti-widget .ti-widget-container :is(.ti-name, .ti-rating-text, .ti-header-rating, .ti-header-rating-reviews) {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 16px;   /* Trustindex: 15 px on every header descendant */
	font-weight: 600;
	line-height: 1.2;
}
#velemenyek .ti-widget .ti-widget-container .ti-date { line-height: 1.2; }
/* The blue "verified source" tick (14 px) sits on the 16 px stars' baseline, 1 px below their centre: centre it on them. */
#velemenyek .ti-widget .ti-widget-container .ti-stars .ti-verified-review { top: -1px; }
#velemenyek .ti-widget .ti-widget-container .ti-read-more span { font-size: 14px; }

/* "Write a review": our outline button (theme .is-style-outline: Poppins 600 16 px, 11 / 27 px, radius 9) */
#velemenyek .ti-widget .ti-widget-header .ti-header-write-btn-container a.ti-header-write-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 11px 27px;
	border: 1px solid var(--wp--preset--color--primary);
	border-radius: var(--mt-radius-sm);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary) !important;
	font: 600 16px/1.2 var(--wp--preset--font-family--heading);
	text-decoration: none;
	transition: background-color var(--mt-dur-fast) var(--mt-ease), color var(--mt-dur-fast) var(--mt-ease), transform var(--mt-dur-fast) var(--mt-ease);
}
#velemenyek .ti-widget .ti-widget-header .ti-header-write-btn-container a.ti-header-write-btn:is(:hover, :focus-visible) {
	background-color: var(--mt-blue-tint) !important;
	border-color: color-mix(in srgb, var(--wp--preset--color--primary) 80%, #000) !important;
	color: color-mix(in srgb, var(--wp--preset--color--primary) 80%, #000) !important;   /* 6.1:1 on the tint (theme rule) */
}
#velemenyek .ti-widget .ti-widget-header .ti-header-write-btn-container a.ti-header-write-btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--heading) !important;
	outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
	#velemenyek .ti-widget .ti-widget-header .ti-header-write-btn-container a.ti-header-write-btn:hover { transform: translateY(-1px); }
}

/* Arrows: 44 × 44 tap targets (Trustindex: 30), our border and colours instead of its grey hover, our focus ring.
   Trustindex's markup makes them labelled role=button divs and handles Enter and reduced motion; the script adds Space. */
/* Trustindex's script sets an inline top on .ti-controls ~3 px below the card centre (it also allows for the phone progress
   line), so keep its top and centre our 44 px arrow on the card. */
#velemenyek .ti-widget .ti-controls { margin-top: calc(var(--mt-ti-arrow) / -2 - 3px); }
#velemenyek:not(.is-arrows) .ti-widget .ti-controls { visibility: hidden; }   /* until Trustindex has set that top (no jump) */
#velemenyek .ti-widget .ti-controls :is(.ti-next, .ti-prev) {
	width: var(--mt-ti-arrow);
	height: var(--mt-ti-arrow);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 50%;
	outline: 0;
	background-color: var(--wp--preset--color--base);
	box-shadow: var(--mt-shadow-sm);
	transition: background-color var(--mt-dur-fast) var(--mt-ease), border-color var(--mt-dur-fast) var(--mt-ease), transform var(--mt-dur-fast) var(--mt-ease);
}
#velemenyek .ti-widget .ti-controls .ti-next { right: calc(var(--mt-ti-arrow-out) * -1); }
#velemenyek .ti-widget .ti-controls .ti-prev { left: calc(var(--mt-ti-arrow-out) * -1); }
#velemenyek .ti-widget .ti-controls :is(.ti-next, .ti-prev)::before { border-color: var(--wp--preset--color--primary) !important; }
#velemenyek .ti-widget .ti-controls :is(.ti-next, .ti-prev):focus {
	background-color: var(--wp--preset--color--base) !important;   /* Trustindex: #4d4d4d on :hover and :focus */
	outline-color: transparent !important;
}
#velemenyek .ti-widget .ti-controls :is(.ti-next, .ti-prev):focus-visible {
	outline: 2px solid var(--wp--preset--color--primary) !important;
	outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
	#velemenyek .ti-widget .ti-controls :is(.ti-next, .ti-prev):hover {
		background-color: var(--mt-blue-tint) !important;
		border-color: var(--mt-blue-tint-border);
		outline-color: transparent !important;
	}
	#velemenyek .ti-widget .ti-controls :is(.ti-next, .ti-prev):focus-visible:hover { outline-color: var(--wp--preset--color--primary) !important; }
}
#velemenyek .ti-widget .ti-controls :is(.ti-next, .ti-prev):active { transform: scale(0.96); }

/* Breakpoints: the theme's 782 / 480 */
@media (max-width: 782px) {
	.mt-ti { padding-block: 56px; }
	.mt-ti__head .wp-block-heading { margin-top: 28px; }
}

@media (prefers-reduced-motion: reduce) {
	.mt-ti__f8 a,
	#velemenyek .mt-ti__auto,
	#velemenyek .ti-widget .ti-widget-header .ti-header-write-btn-container a.ti-header-write-btn,
	#velemenyek .ti-widget .ti-controls :is(.ti-next, .ti-prev) { transition: none; }
	#velemenyek .mt-ti__auto:active,
	#velemenyek .ti-widget .ti-widget-header .ti-header-write-btn-container a.ti-header-write-btn:hover,
	#velemenyek .ti-widget .ti-controls :is(.ti-next, .ti-prev):active { transform: none; }
}