/*!
 * Health Results Testimonials – front-end styles
 * Everything is driven by CSS custom properties so widgets can be restyled
 * per instance (inline vars) or globally from a theme stylesheet:
 *   .hrt { --hrt-bg: #fff; --hrt-star: gold; }
 */

/* ---------- Base tokens (Light) ---------- */
.hrt {
	--hrt-bg: #f4f4f4;
	--hrt-bg-solid: #f4f4f4; /* fully opaque card color used by the opacity setting */
	--hrt-text: #1f1f1f;
	--hrt-name: #111;
	--hrt-meta: #737373;
	--hrt-star: #f6bb06;
	--hrt-star-off: #d4d4d4;
	--hrt-accent: #9a9a9a;
	--hrt-border: transparent;
	--hrt-shadow: none;
	--hrt-radius: 6px;
	--hrt-gap: 24px;
	--hrt-pad: 1.5em;
	--hrt-avatar: 56px;
	--hrt-avatar-lg: 96px;
	--hrt-star-size: 1.15em;
	--hrt-line: 1.6;
	--hrt-cols: var(--hrt-cols-m, 1);
	--hrt-name-font: inherit;

	container-type: inline-size;
	box-sizing: border-box;
	position: relative;
	width: 100%;
	max-width: var(--hrt-max, none);
	margin-inline: auto;
	font-family: inherit;
	font-size: var(--hrt-font-size, inherit);
	line-height: var(--hrt-line);
	color: var(--hrt-text);
}
.hrt *, .hrt *::before, .hrt *::after { box-sizing: inherit; }
.hrt p { margin: 0; }
.hrt [hidden] { display: none !important; }

/* ---------- Themes ---------- */
.hrt--theme-white  { --hrt-bg: #fff; --hrt-bg-solid: #fff; --hrt-border: #e2e2e2; }
.hrt--theme-shadow { --hrt-bg: #fff; --hrt-bg-solid: #fff; --hrt-border: #ececec; --hrt-shadow: 0 4px 18px rgba(0, 0, 0, .08); }
.hrt--theme-minimal { --hrt-bg: transparent; --hrt-pad: .5em; }
.hrt--theme-navy {
	--hrt-bg: #232a3f; --hrt-bg-solid: #232a3f; --hrt-text: #eef0f6; --hrt-name: #fff; --hrt-meta: #a8b0c6;
	--hrt-star-off: #4b5470; --hrt-accent: #7d86a3; --hrt-shadow: 0 6px 20px rgba(10, 14, 30, .25);
}
.hrt--theme-dark {
	--hrt-bg: #222; --hrt-bg-solid: #222; --hrt-text: #ececec; --hrt-name: #fff; --hrt-meta: #a3a3a3;
	--hrt-star-off: #555; --hrt-accent: #555;
}
.hrt--theme-dark-glass,
.hrt--theme-auto.hrt--auto-dark {
	--hrt-bg: rgba(255, 255, 255, .06); --hrt-bg-solid: #2b2e36; --hrt-border: rgba(255, 255, 255, .12);
	--hrt-text: rgba(255, 255, 255, .88); --hrt-name: #fff; --hrt-meta: rgba(255, 255, 255, .6);
	--hrt-star-off: rgba(255, 255, 255, .25); --hrt-accent: rgba(255, 255, 255, .7);
}
/* Site styling: follow the surrounding text color so it works on light AND dark
   sections, and pick up Avada global colors / typography or block-theme presets. */
.hrt--theme-site {
	--hrt-text: inherit;
	--hrt-name: var(--awb-color8, var(--wp--preset--color--contrast, currentColor));
	--hrt-bg: color-mix(in srgb, currentColor 5%, transparent);
	--hrt-bg-solid: var(--awb-color2, var(--wp--preset--color--base-2, var(--wp--preset--color--base, #f4f4f4)));
	--hrt-border: color-mix(in srgb, currentColor 10%, transparent);
	--hrt-meta: color-mix(in srgb, currentColor 62%, transparent);
	--hrt-star-off: color-mix(in srgb, currentColor 22%, transparent);
	--hrt-accent: var(--awb-color5, var(--wp--preset--color--primary, currentColor));
	--hrt-radius: var(--awb-border-radius, var(--wp--custom--border-radius, 6px));
	--hrt-name-font: var(--awb-typography1-font-family, var(--h4_typography-font-family, var(--wp--preset--font-family--heading, inherit)));
}
.hrt--theme-site .hrt-name { color: inherit; }
.hrt--theme-site .hrt-text { font-family: var(--awb-typography4-font-family, var(--body_typography-font-family, inherit)); }

/* ---------- Responsive columns (container queries: works in sidebars too) ---------- */
@container (min-width: 560px) { .hrt-slider, .hrt-grid, .hrt-masonry, .hrt-list { --hrt-cols: var(--hrt-cols-t, 2); } }
@container (min-width: 900px) { .hrt-slider, .hrt-grid, .hrt-masonry, .hrt-list { --hrt-cols: var(--hrt-cols-d, 3); } }

/* ---------- Card ---------- */
.hrt-item { min-width: 0; display: flex; }
.hrt-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: .8em;
	flex: 1;
	min-width: 0;
	padding: var(--hrt-pad);
	background: var(--hrt-bg);
	color: var(--hrt-text);
	border: 1px solid var(--hrt-border);
	border-radius: var(--hrt-radius);
	box-shadow: var(--hrt-shadow);
	text-align: start;
	word-wrap: break-word;
}
.hrt-author { display: flex; align-items: center; gap: .9em; min-width: 0; }
.hrt-meta { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.hrt .hrt-name { font-family: var(--hrt-name-font); font-weight: 700; font-size: 1.05em; color: var(--hrt-name); }
.hrt .hrt-role { color: var(--hrt-meta); font-size: .85em; }
.hrt .hrt-role a { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
.hrt .hrt-date { color: var(--hrt-meta); font-size: .8em; }

/* Avatars */
.hrt .hrt-avatar {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--hrt-avatar);
	height: var(--hrt-avatar);
	max-width: none;
	margin: 0;
	border-radius: 50%;
	object-fit: cover;
}
.hrt .hrt-avatar--lg { width: var(--hrt-avatar-lg); height: var(--hrt-avatar-lg); }
.hrt .hrt-initials {
	display: flex;
	align-items: center;
	justify-content: center;
	background: hsl(var(--hrt-hue, 210) 45% 88%);
	color: hsl(var(--hrt-hue, 210) 45% 28%);
	font-weight: 700;
	font-size: calc(var(--hrt-avatar) * .36);
	letter-spacing: .02em;
	line-height: 1;
}
.hrt .hrt-avatar--lg.hrt-initials { font-size: calc(var(--hrt-avatar-lg) * .34); }

/* Stars: one element, masked gradient (1–5) */
.hrt-stars {
	display: block;
	flex: none;
	width: calc(var(--hrt-star-size) * 5);
	height: var(--hrt-star-size);
	background: linear-gradient(90deg, var(--hrt-star) calc(var(--hrt-rating, 5) * 20%), var(--hrt-star-off) 0);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 24'%3E%3Cpath d='M12 1.5l3.1 6.6 7.2.8-5.4 4.9 1.5 7.1L12 17.3l-6.4 3.6 1.5-7.1L1.7 8.9l7.2-.8z'/%3E%3C/svg%3E") 0 0 / var(--hrt-star-size) var(--hrt-star-size) repeat-x;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 24'%3E%3Cpath d='M12 1.5l3.1 6.6 7.2.8-5.4 4.9 1.5 7.1L12 17.3l-6.4 3.6 1.5-7.1L1.7 8.9l7.2-.8z'/%3E%3C/svg%3E") 0 0 / var(--hrt-star-size) var(--hrt-star-size) repeat-x;
}

/* Text */
.hrt-text { position: relative; }
.hrt-text-inner > * + * { margin-top: .6em; }
.hrt-text--clamp .hrt-text-inner {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--hrt-lines, 5);
	line-clamp: var(--hrt-lines, 5);
	overflow: hidden;
}
.hrt-text--clamp.is-expanded .hrt-text-inner { display: block; -webkit-line-clamp: unset; line-clamp: none; }
.hrt-text--scroll .hrt-text-inner {
	max-height: calc(var(--hrt-lines, 5) * var(--hrt-line) * 1em);
	overflow-y: auto;
	padding-inline-end: .8em;
	scrollbar-width: thin;
	scrollbar-color: var(--hrt-accent) transparent;
}
.hrt .hrt-more {
	all: unset;
	display: inline-block;
	margin-top: .5em;
	font-weight: 700;
	font-size: .9em;
	color: var(--hrt-name);
	cursor: pointer;
}
.hrt .hrt-more[hidden] { display: none; }
.hrt .hrt-more:hover { text-decoration: underline; }
.hrt .hrt-more:focus-visible { outline: 2px solid var(--hrt-accent); outline-offset: 2px; }

/* ---------- Card templates ---------- */

/* Speech bubble */
.hrt-card--bubble,
.hrt-card--bubble-top,
.hrt-card--bubble-centered { padding: 0; background: none; border: 0; box-shadow: none; gap: 1.1em; }
.hrt-bubble {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: .8em;
	flex: 1;
	padding: var(--hrt-pad);
	background: var(--hrt-bg);
	border: 1px solid var(--hrt-border);
	border-radius: var(--hrt-radius);
	box-shadow: var(--hrt-shadow);
}
.hrt-bubble::after {
	content: "";
	position: absolute;
	left: calc(var(--hrt-avatar) / 2 + .3em);
	bottom: -8px;
	width: 14px;
	height: 14px;
	background: var(--hrt-bg);
	border: 1px solid var(--hrt-border);
	border-top: 0;
	border-left: 0;
	transform: rotate(45deg);
}
.hrt-card--bubble .hrt-author { padding-inline-start: .35em; }
.hrt-card--bubble-top .hrt-bubble::after { bottom: auto; top: -8px; transform: rotate(-135deg); }
/* Opaque backgrounds only: a translucent bubble tail would double up. */
.hrt--theme-dark-glass .hrt-bubble::after,
.hrt--auto-dark .hrt-bubble::after,
.hrt--theme-site .hrt-bubble::after,
.hrt--theme-minimal .hrt-bubble::after { display: none; }
/* Card opacity setting: solid cards get the tail back, see-through cards lose it. */
.hrt.hrt--bg-solid .hrt-bubble::after { display: block; }
.hrt.hrt--bg-see-through .hrt-bubble::after { display: none; }

/* Bubble centered with big avatar below */
.hrt-card--bubble-centered { text-align: center; align-items: stretch; }
.hrt-card--bubble-centered .hrt-bubble { align-items: center; }
.hrt-card--bubble-centered .hrt-bubble::after { left: calc(50% - 7px); }
.hrt-card--bubble-centered .hrt-author { flex-direction: column; gap: .6em; }
.hrt-card--bubble-centered .hrt-meta { align-items: center; }

/* Centered with overlapping avatar */
.hrt-card--centered {
	align-items: center;
	text-align: center;
	margin-top: calc(var(--hrt-avatar-lg) / 2);
	padding-top: calc(var(--hrt-avatar-lg) / 2 + .8em);
}
.hrt .hrt-card--centered > .hrt-avatar {
	position: absolute;
	top: calc(var(--hrt-avatar-lg) / -2);
	left: 50%;
	transform: translateX(-50%);
	box-shadow: 0 0 0 4px var(--hrt-avatar-ring, transparent);
}
.hrt-card--centered .hrt-meta,
.hrt-card--plain .hrt-meta { align-items: center; }

/* Plain (no card chrome) */
.hrt-card--plain { align-items: center; text-align: center; background: none; border: 0; box-shadow: none; padding-inline: .5em; }

/* Large photo on top */
.hrt-card--photo-top { padding: 0; overflow: hidden; align-items: stretch; text-align: center; gap: 0; }
.hrt-card--photo-top .hrt-body { display: flex; flex-direction: column; align-items: center; gap: .8em; padding: var(--hrt-pad); }
.hrt-card--photo-top .hrt-meta { align-items: center; }
.hrt-photo { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: color-mix(in srgb, var(--hrt-text) 8%, transparent); }
.hrt .hrt-photo-img { display: block; width: 100%; height: 100%; max-width: none; margin: 0; object-fit: cover; border-radius: 0; }
.hrt .hrt-photo .hrt-initials { width: 100%; height: 100%; font-size: 3em; }

/* Large photo on the side */
.hrt-card--photo-side { flex-direction: row; padding: 0; overflow: hidden; gap: 0; align-items: stretch; }
.hrt-card--photo-side .hrt-photo { flex: 0 0 35%; aspect-ratio: auto; min-height: 220px; }
.hrt-card--photo-side .hrt-body { display: flex; flex-direction: column; gap: .8em; flex: 1; min-width: 0; padding: var(--hrt-pad); justify-content: center; }
.hrt-card--photo-side .hrt-meta { margin-top: .3em; }
@container (max-width: 480px) {
	.hrt-card--photo-side { flex-direction: column; }
	.hrt-card--photo-side .hrt-photo { flex-basis: auto; aspect-ratio: 1 / 1; min-height: 0; }
}

/* Avatar overlapping the left edge */
.hrt-card--avatar-edge {
	margin-inline-start: calc(var(--hrt-avatar-lg) / 2);
	padding-inline-start: calc(var(--hrt-avatar-lg) / 2 + 1.1em);
}
.hrt .hrt-card--avatar-edge > .hrt-avatar {
	position: absolute;
	top: 1.1em;
	left: calc(var(--hrt-avatar-lg) / -2);
}
.hrt-card--avatar-edge .hrt-body { display: flex; flex-direction: column; gap: .8em; }
.hrt-card--avatar-edge .hrt-meta { min-height: calc(var(--hrt-avatar-lg) * .75); justify-content: center; }

/* Alignment overrides */
.hrt--align-center .hrt-card, .hrt--align-center .hrt-bubble, .hrt--align-center .hrt-body { text-align: center; align-items: center; }
.hrt--align-center .hrt-author { justify-content: center; }
.hrt--align-left .hrt-card, .hrt--align-left .hrt-bubble, .hrt--align-left .hrt-body { text-align: start; align-items: flex-start; }
.hrt--align-left .hrt-meta { align-items: flex-start; }
.hrt--align-left .hrt-card > .hrt-stars, .hrt--align-left .hrt-text { align-self: stretch; }

/* Compact (sidebars) */
.hrt--compact { --hrt-avatar: 40px; --hrt-pad: 1.1em; --hrt-gap: 16px; --hrt-star-size: 1em; font-size: var(--hrt-font-size, .92em); }

/* ---------- Containers ---------- */
.hrt-grid {
	display: grid;
	grid-template-columns: repeat(var(--hrt-cols), minmax(0, 1fr));
	gap: var(--hrt-gap);
}
.hrt--card-centered .hrt-grid { row-gap: calc(var(--hrt-gap) + 8px); }
.hrt-list { display: grid; gap: var(--hrt-gap); }
.hrt-masonry { columns: var(--hrt-cols); column-gap: var(--hrt-gap); }
.hrt-masonry > .hrt-item { break-inside: avoid; margin-bottom: var(--hrt-gap); }
.hrt-masonry > .hrt-item > .hrt-card { width: 100%; }

/* Slider */
.hrt-slider { position: relative; }
.hrt-track {
	display: flex;
	gap: var(--hrt-gap);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scroll-padding-inline: 6px;
	padding: 6px 6px 18px;
	margin: -6px -6px 0;
	scrollbar-width: none;
	outline: none;
}
.hrt-track::-webkit-scrollbar { display: none; }
.hrt-track:focus-visible { box-shadow: inset 0 0 0 2px var(--hrt-accent); border-radius: var(--hrt-radius); }
.hrt-track > .hrt-item {
	flex: 0 0 calc((100% - (var(--hrt-cols) - 1) * var(--hrt-gap)) / var(--hrt-cols));
	scroll-snap-align: start;
}
.hrt--card-centered .hrt-track,
.hrt--card-bubble-centered .hrt-track { padding-top: 10px; }

.hrt-slider--arrows { padding-inline: 44px; }
.hrt-arrows { display: contents; }
.hrt .hrt-arrow {
	all: unset;
	position: absolute;
	top: 50%;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin-top: -27px;
	border-radius: 50%;
	color: var(--hrt-accent);
	cursor: pointer;
	transition: opacity .2s, background-color .2s;
}
.hrt .hrt-arrow svg { width: 26px; height: 26px; }
.hrt .hrt-arrow:hover { background: color-mix(in srgb, var(--hrt-accent) 14%, transparent); }
.hrt .hrt-arrow:focus-visible { outline: 2px solid var(--hrt-accent); outline-offset: 2px; }
.hrt .hrt-arrow[disabled] { opacity: .25; cursor: default; background: none; }
.hrt .hrt-arrow--prev { left: 0; }
.hrt .hrt-arrow--next { right: 0; }
[dir="rtl"] .hrt .hrt-arrow--prev { left: auto; right: 0; transform: scaleX(-1); }
[dir="rtl"] .hrt .hrt-arrow--next { right: auto; left: 0; transform: scaleX(-1); }

/* Arrows in the top corner (sidebar sliders) */
.hrt-slider--arrows-top { padding-inline: 0; }
.hrt-slider--arrows-top .hrt-arrows { display: flex; position: absolute; top: calc(var(--hrt-pad) - 6px); right: 4px; gap: 2px; z-index: 2; }
.hrt-slider--arrows-top .hrt-arrow { position: static; margin: 0; width: 28px; height: 28px; }
.hrt-slider--arrows-top .hrt-arrow svg { width: 18px; height: 18px; }
.hrt-slider--arrows-top .hrt-card--header .hrt-author,
.hrt-slider--arrows-top .hrt-card--bubble-top .hrt-author { padding-inline-end: 64px; }
.hrt--card-bubble-top .hrt-slider--arrows-top .hrt-arrows { top: calc(var(--hrt-avatar) / 2 - 8px); }

@container (max-width: 420px) {
	.hrt-slider--arrows:not(.hrt-slider--arrows-top) { padding-inline: 0; }
	.hrt-slider--arrows:not(.hrt-slider--arrows-top) .hrt-arrow { display: none; }
}

/* Dots */
.hrt-dots { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.hrt-dots:empty { display: none; }
.hrt .hrt-dot {
	all: unset;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--hrt-accent);
	opacity: .3;
	cursor: pointer;
	transition: opacity .2s, transform .2s;
}
.hrt .hrt-dot[aria-current="true"] { opacity: 1; }
.hrt .hrt-dot:focus-visible { outline: 2px solid var(--hrt-accent); outline-offset: 2px; }

/* ---------- Floating ---------- */
.hrt.hrt--type-floating {
	container-type: normal;
	position: fixed;
	bottom: 20px;
	z-index: 99990;
	width: min(380px, calc(100vw - 32px));
	margin: 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(16px);
	transition: opacity .35s ease, transform .35s ease, visibility 0s linear .35s;
	--hrt-bg: #fff;
	--hrt-bg-solid: #fff;
	--hrt-border: #e6e6e6;
	--hrt-shadow: 0 8px 28px rgba(0, 0, 0, .14);
	--hrt-avatar: 52px;
	--hrt-pad: .9em 1em;
	--hrt-star-size: 1em;
	font-size: var(--hrt-font-size, 14px);
}
.hrt--type-floating.hrt--theme-navy { --hrt-bg: #232a3f; --hrt-bg-solid: #232a3f; --hrt-border: #232a3f; }
.hrt--type-floating.hrt--theme-dark { --hrt-bg: #222; --hrt-bg-solid: #222; --hrt-border: #222; }
.hrt--type-floating.hrt--theme-dark-glass,
.hrt--type-floating.hrt--auto-dark { --hrt-bg: #1d1f24; --hrt-bg-solid: #1d1f24; --hrt-border: #33363d; }
.hrt--type-floating.hrt--theme-site { --hrt-bg: var(--awb-color1, var(--wp--preset--color--base, #fff)); --hrt-bg-solid: var(--awb-color1, var(--wp--preset--color--base, #fff)); color: var(--awb-color8, var(--wp--preset--color--contrast, #1f1f1f)); }
.hrt--pos-bottom-left { left: 16px; }
.hrt--pos-bottom-right { right: 16px; }
.hrt--type-floating.is-visible { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.hrt-card--floating, .hrt-card--floating-2 { flex-direction: row; align-items: center; gap: .9em; }
.hrt-card--floating .hrt-body, .hrt-card--floating-2 .hrt-body { display: flex; flex-direction: column; gap: .3em; min-width: 0; padding-inline-end: 1em; }
.hrt .hrt-excerpt { line-height: 1.45; }
.hrt .hrt-byline { font-size: .9em; line-height: 1.35; }
.hrt .hrt-byline .hrt-name { font-size: 1em; }
.hrt .hrt-byline .hrt-role { font-size: 1em; }
.hrt-card--floating-2 .hrt-byline:last-child { display: flex; align-items: center; gap: .6em; flex-wrap: wrap; }
.hrt .hrt-close {
	all: unset;
	position: absolute;
	top: 6px;
	right: 6px;
	z-index: 2;
	width: 22px;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: var(--hrt-meta);
	cursor: pointer;
}
.hrt .hrt-close svg { width: 12px; height: 12px; }
.hrt .hrt-close:hover { color: var(--hrt-name); }
.hrt .hrt-close:focus-visible { outline: 2px solid var(--hrt-accent); }

@media (prefers-reduced-motion: reduce) {
	.hrt-track { scroll-behavior: auto; }
	.hrt.hrt--type-floating { transition: none; }
}
@media print {
	.hrt--type-floating, .hrt-arrow, .hrt-dots { display: none !important; }
}