/**
 * Single survey page (single-surveys.php) — hero + voting wizard + results.
 *
 * Desktop-first (base = 1350px desktop; tablet/mobile via max-width overrides
 * so the fit-desktop generator can revert them). RTL-native: logical
 * properties only; bar fills grow from inline-start (= right).
 *
 * Animations are gated on html.hm-anim (added by single-surveys.js only when
 * prefers-reduced-motion is NOT set) — without JS the page renders its final
 * state.
 */

/* =========================================================================
   Hero — dark immersive header
   ========================================================================= */

.hm-survey-hero {
	position: relative;
	background-color: var(--hm-color-primary);
	border-block-end: 4px solid var(--hm-color-accent);
	overflow: hidden;
}

/* Red radial glow — carries the design when there's no survey image. */
.hm-survey-hero::before {
	content: '';
	position: absolute;
	inset-block-start: -220px;
	inset-inline-start: 50%;
	transform: translateX(50%);
	inline-size: 900px;
	block-size: 620px;
	background: radial-gradient(closest-side, rgba(255, 23, 62, 0.22), transparent 72%);
	pointer-events: none;
}

.hm-survey-hero__media {
	position: absolute;
	inset: 0;
}

.hm-survey-hero__img {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	opacity: 0.35;
}

.hm-survey-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(33, 33, 33, 0.55) 0%, rgba(33, 33, 33, 0.85) 62%, #212121 100%);
}

.hm-survey-hero__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start; /* RTL: right-aligned */
	gap: 22px;
	padding-block: 64px 56px;
	padding-inline: 70px;
}

.hm-survey-hero__meta {
	display: flex;
	align-items: center;
	gap: 14px;
}

.hm-survey-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background-color: var(--hm-color-accent);
	color: #fff;
	font-family: var(--hm-font-primary);
	font-weight: 700;
	font-size: 16px;
	line-height: 1;
	padding: 8px 14px;
	border-radius: var(--hm-radius-sm);
}

.hm-survey-hero__badge-dot {
	flex-shrink: 0;
}

.hm-survey-hero__sep {
	inline-size: 1px;
	block-size: 15px;
	background-color: rgba(238, 238, 238, 0.5);
}

.hm-survey-hero__date {
	color: rgba(238, 238, 238, 0.75);
	font-weight: 300;
	font-size: 15px;
	line-height: 1;
}

.hm-survey-hero__title {
	color: #fff;
	font-weight: 900;
	font-size: 64px;
	line-height: 1.05;
	max-inline-size: 900px;
	text-box-trim: both;
	text-box-edge: cap alphabetic;
	unicode-bidi: isolate;
	margin-block: 10px 0;
}

/* --- Voters counter --- */

.hm-survey-hero__counter {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin-block: 6px 0;
}

.hm-survey-hero__counter-num {
	display: inline-block;
	min-inline-size: calc(var(--hm-digits, 4) * 1ch);
	text-align: center;
	color: var(--hm-color-accent);
	font-weight: 900;
	font-size: 56px;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	unicode-bidi: isolate;
	direction: ltr;
}

.hm-survey-hero__counter-label {
	color: #eeeeee;
	font-weight: 300;
	font-size: 20px;
	line-height: 1;
}

/* --- "Survey still live" tag (gated results view) --- */

.hm-survey-hero__live-tag {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: #eeeeee;
	font-weight: 700;
	font-size: 20px;
	line-height: 1;
	margin-block: 6px 0;
}

.hm-survey-hero__live-dot {
	inline-size: 11px;
	block-size: 11px;
	border-radius: 50%;
	background-color: var(--hm-color-accent);
	animation: hm-survey-pulse 1.6s ease-in-out infinite;
	/* Stop the paint loop eventually — decorative only. */
	animation-iteration-count: 20;
}

@keyframes hm-survey-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(255, 23, 62, 0.5); }
	55%      { box-shadow: 0 0 0 8px rgba(255, 23, 62, 0); }
}

/* =========================================================================
   Share buttons (hero + pending CTA)
   ========================================================================= */

.hm-survey-share {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
}

.hm-survey-share__btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	background-color: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 999px;
	color: #fff;
	font-family: var(--hm-font-primary);
	font-weight: 300;
	font-size: 15px;
	line-height: 1;
	padding: 11px 20px;
	cursor: pointer;
	text-decoration: none;
	transition: background-color var(--hm-transition-fast), border-color var(--hm-transition-fast);
}

.hm-survey-share__btn svg {
	inline-size: 17px;
	block-size: 17px;
	flex-shrink: 0;
}

/* Native-share button — the primary action, solid accent. */
.hm-survey-share__btn--native {
	background-color: var(--hm-color-accent);
	border-color: var(--hm-color-accent);
	font-weight: 700;
}

.hm-survey-share__btn--native:hover,
.hm-survey-share__btn--native:focus-visible {
	background-color: #d90f33;
	border-color: #d90f33;
}

.hm-survey-share__btn--copy:hover,
.hm-survey-share__btn--copy:focus-visible {
	background-color: var(--hm-color-accent);
	border-color: var(--hm-color-accent);
}

.hm-survey-share__btn.is-copied {
	background-color: var(--hm-color-accent);
	border-color: var(--hm-color-accent);
}

/* =========================================================================
   Shared content-section shell
   ========================================================================= */

.hm-survey-vote__container,
.hm-survey-results__container {
	max-inline-size: 900px;
	margin-inline: auto;
	padding-block: 56px 80px;
	padding-inline: 16px;
}

/* =========================================================================
   Voting wizard
   ========================================================================= */

.hm-survey-vote__progress-wrap {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	margin-block-end: 34px;
}

.hm-survey-vote__kicker {
	color: var(--hm-color-text-muted);
	font-weight: 300;
	font-size: 16px;
	line-height: 1;
	margin-block: 0;
}

.hm-survey-vote__kicker b {
	font-weight: 700;
	color: var(--hm-color-text);
}

.hm-survey-vote__progress {
	inline-size: 100%;
	block-size: 6px;
	background-color: var(--hm-color-bg-alt);
	border-radius: 999px;
	overflow: hidden;
}

.hm-survey-vote__progress-fill {
	display: block;
	block-size: 100%;
	background-color: var(--hm-color-accent);
	border-radius: inherit;
	transition: inline-size var(--hm-transition-base);
}

/* Steps — stacked grid, only the active one visible (same technique as the
   homepage widget). */
.hm-survey-vote__steps {
	display: grid;
}

.hm-survey-vote__step {
	grid-area: 1 / 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 28px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(10px);
	transition: opacity var(--hm-transition-base), visibility var(--hm-transition-base), transform var(--hm-transition-base);
}

.hm-survey-vote__step.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
}

.hm-survey-vote__question {
	display: flex;
	align-items: flex-end;
	gap: 15px;
	color: var(--hm-color-text);
	font-weight: 900;
	font-size: 32px;
	line-height: 1;
	margin-block: 0;
	unicode-bidi: isolate;
}

.hm-survey-vote__dot {
	flex-shrink: 0;
	margin-block-end: 2px;
}

.hm-survey-vote__options {
	display: flex;
	flex-direction: column;
	gap: 14px;
	inline-size: 100%;
	border: 0;
	padding: 0;
	margin: 0;
}

.hm-survey-vote__option {
	display: flex;
	align-items: center;
	gap: 16px;
	inline-size: 100%;
	background-color: var(--hm-color-bg-alt);
	border: 0.5px solid rgba(33, 33, 33, 0.25);
	border-radius: var(--hm-radius-lg);
	padding: 20px 24px;
	cursor: pointer;
	transition: border-color var(--hm-transition-fast), background-color var(--hm-transition-fast), color var(--hm-transition-fast);
}

.hm-survey-vote__option:hover {
	border-color: var(--hm-color-accent);
}

.hm-survey-vote__radio {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.hm-survey-vote__option-check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 26px;
	block-size: 26px;
	flex-shrink: 0;
	border: 1.5px solid rgba(33, 33, 33, 0.35);
	border-radius: 50%;
	color: transparent;
	transition: border-color var(--hm-transition-fast), background-color var(--hm-transition-fast), color var(--hm-transition-fast);
}

.hm-survey-vote__option-label {
	color: var(--hm-color-text);
	font-weight: 300;
	font-size: 20px;
	line-height: 1.3;
	overflow-wrap: anywhere;
	unicode-bidi: isolate;
}

.hm-survey-vote__option:has(.hm-survey-vote__radio:checked) {
	background-color: var(--hm-color-accent);
	border-color: var(--hm-color-accent);
}

.hm-survey-vote__option:has(.hm-survey-vote__radio:checked) .hm-survey-vote__option-label {
	color: #fff;
	font-weight: 700;
}

.hm-survey-vote__option:has(.hm-survey-vote__radio:checked) .hm-survey-vote__option-check {
	background-color: #fff;
	border-color: #fff;
	color: var(--hm-color-accent);
}

/* Visible focus for keyboard users (radio itself is visually hidden). */
.hm-survey-vote__option:has(.hm-survey-vote__radio:focus-visible) {
	outline: 2px solid var(--hm-color-accent);
	outline-offset: 2px;
}

.hm-survey-vote__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 220px;
	background-color: var(--hm-color-accent);
	border: none;
	border-radius: 6px;
	color: #fff;
	font-family: var(--hm-font-primary);
	font-weight: 700;
	font-size: 18px;
	line-height: 1;
	padding: 16px 34px;
	cursor: pointer;
	transition: opacity var(--hm-transition-fast), transform var(--hm-transition-fast);
}

.hm-survey-vote__btn:hover:not(:disabled) {
	transform: translateY(-2px);
}

.hm-survey-vote__btn:disabled {
	opacity: 0.45;
	cursor: default;
}

.hm-survey-vote__btn.is-loading {
	opacity: 0.7;
	cursor: wait;
}

/* --- Thank-you state --- */

.hm-survey-vote__step--thanks {
	align-items: center;
	text-align: center;
	gap: 20px;
	padding-block: 30px;
}

.hm-survey-vote__thanks-msg {
	color: var(--hm-color-text);
	font-weight: 900;
	font-size: 32px;
	line-height: 1.1;
	margin-block: 0;
	unicode-bidi: isolate;
}

.hm-survey-vote__results-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background-color: var(--hm-color-accent);
	border-radius: 6px;
	color: #fff;
	font-weight: 700;
	font-size: 18px;
	line-height: 1;
	padding: 15px 30px;
	text-decoration: none;
	transition: transform var(--hm-transition-fast);
}

.hm-survey-vote__results-link:hover {
	transform: translateY(-2px);
}

/* =========================================================================
   Results view
   ========================================================================= */

.hm-survey-results__question + .hm-survey-results__question {
	margin-block-start: var(--hm-space-section);
	padding-block-start: var(--hm-space-2xl);
	border-block-start: 1px solid var(--hm-color-border);
	content-visibility: auto;
	contain-intrinsic-size: auto 500px;
}

.hm-survey-results__kicker {
	color: var(--hm-color-text-muted);
	font-weight: 300;
	font-size: 16px;
	line-height: 1;
	margin-block: 0 14px;
}

.hm-survey-results__q-title {
	display: flex;
	align-items: flex-end;
	gap: 15px;
	color: var(--hm-color-text);
	font-weight: 900;
	font-size: 32px;
	line-height: 1;
	margin-block: 0 26px;
	unicode-bidi: isolate;
}

.hm-survey-results__dot {
	flex-shrink: 0;
	margin-block-end: 2px;
}

/* --- Stacked consensus bar --- */

.hm-survey-results__consensus {
	display: flex;
	block-size: 14px;
	border-radius: 999px;
	overflow: hidden;
	gap: 3px;
	margin-block-end: 26px;
}

.hm-survey-results__seg {
	flex: var(--hm-votes, 0) 1 0;
	min-inline-size: 6px;
	background-color: rgba(33, 33, 33, 0.24);
}

.hm-survey-results__seg--leading {
	background-color: var(--hm-color-accent);
}

/* Charcoal ramp for the non-leading segments (production max = 5 answers).
   nth-child ordering keeps the visual language red + descending charcoal. */
.hm-survey-results__seg:not(.hm-survey-results__seg--leading):nth-child(1) { background-color: rgba(33, 33, 33, 0.75); }
.hm-survey-results__seg:not(.hm-survey-results__seg--leading):nth-child(2) { background-color: rgba(33, 33, 33, 0.6); }
.hm-survey-results__seg:not(.hm-survey-results__seg--leading):nth-child(3) { background-color: rgba(33, 33, 33, 0.46); }
.hm-survey-results__seg:not(.hm-survey-results__seg--leading):nth-child(4) { background-color: rgba(33, 33, 33, 0.34); }
.hm-survey-results__seg:not(.hm-survey-results__seg--leading):nth-child(n+5) { background-color: rgba(33, 33, 33, 0.24); }

/* --- Detailed answer bars --- */

.hm-survey-results__answers {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 22px;
	margin: 0;
	padding: 0;
}

.hm-survey-results__answer-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 6px 16px;
	margin-block-end: 9px;
}

.hm-survey-results__answer-label {
	color: var(--hm-color-text);
	font-weight: 300;
	font-size: 19px;
	line-height: 1.3;
	overflow-wrap: anywhere;
	unicode-bidi: isolate;
}

.hm-survey-results__answer--leading .hm-survey-results__answer-label {
	font-weight: 700;
}

.hm-survey-results__leading-tag {
	display: inline-block;
	background-color: var(--hm-color-accent);
	color: #fff;
	font-weight: 700;
	font-size: 12px;
	line-height: 1;
	padding: 5px 10px;
	border-radius: 999px;
	margin-inline-start: 10px;
	vertical-align: middle;
	white-space: nowrap;
}

.hm-survey-results__answer-value {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	white-space: nowrap;
}

.hm-survey-results__pct {
	display: inline-block;
	color: var(--hm-color-text);
	font-weight: 900;
	font-size: 26px;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	min-inline-size: 3.2ch;
	text-align: end;
	unicode-bidi: isolate;
	direction: ltr;
}

.hm-survey-results__answer--leading .hm-survey-results__pct {
	color: var(--hm-color-accent);
}

.hm-survey-results__votes {
	color: var(--hm-color-text-muted);
	font-weight: 300;
	font-size: 14px;
	line-height: 1;
}

.hm-survey-results__track {
	block-size: 46px;
	background-color: var(--hm-color-bg-alt);
	border-radius: var(--hm-radius-lg);
	overflow: hidden;
}

.hm-survey-results__fill {
	display: block;
	block-size: 100%;
	inline-size: var(--hm-pct, 0%);
	background-color: rgba(33, 33, 33, 0.16);
	border-radius: inherit;
}

.hm-survey-results__answer--leading .hm-survey-results__fill {
	background-color: var(--hm-color-accent);
}

/* Bar-fill entrance — only when JS enabled + motion allowed. */
html.hm-anim .hm-survey-results__fill {
	transform: scaleX(0);
	transform-origin: right center; /* grows from the right (RTL reading start) */
	transition: transform 900ms cubic-bezier(0.22, 0.9, 0.35, 1);
	will-change: transform;
}

html.hm-anim .is-in .hm-survey-results__fill {
	transform: scaleX(1);
}

html.hm-anim .hm-survey-results__seg {
	opacity: 0;
	transition: opacity 500ms ease;
	transition-delay: calc(var(--hm-i, 0) * 70ms);
}

html.hm-anim .is-in .hm-survey-results__seg {
	opacity: 1;
}

.hm-survey-results__q-total {
	color: var(--hm-color-text-muted);
	font-weight: 300;
	font-size: 14px;
	line-height: 1;
	margin-block: 18px 0;
}

/* --- Pending (gated) state --- */

.hm-survey-results__pending-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 16px;
	background-color: var(--hm-color-bg-alt);
	border-radius: var(--hm-radius-xl);
	padding: 44px 40px;
	margin-block-end: var(--hm-space-2xl);
}

.hm-survey-results__pending-title {
	color: var(--hm-color-text);
	font-weight: 900;
	font-size: 32px;
	line-height: 1;
	margin-block: 0;
}

.hm-survey-results__pending-msg {
	color: var(--hm-color-text-muted);
	font-weight: 300;
	font-size: 18px;
	line-height: 1.4;
	margin-block: 0;
	max-inline-size: 480px;
}

.hm-survey-results__pending-actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	margin-block-start: 8px;
}

.hm-survey-results__vote-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background-color: var(--hm-color-accent);
	border-radius: 6px;
	color: #fff;
	font-weight: 700;
	font-size: 18px;
	line-height: 1;
	padding: 15px 30px;
	text-decoration: none;
	transition: transform var(--hm-transition-fast);
}

.hm-survey-results__vote-link:hover {
	transform: translateY(-2px);
}

/* Dark ghost pills read poorly on the light band — flip to outlined light.
   The solid-red native-share button keeps its accent styling as-is. */
.hm-survey-results__pending-actions .hm-survey-share__btn:not(.hm-survey-share__btn--native) {
	background-color: transparent;
	border-color: rgba(33, 33, 33, 0.3);
	color: var(--hm-color-text);
}

.hm-survey-results__pending-actions .hm-survey-share__btn:not(.hm-survey-share__btn--native):hover,
.hm-survey-results__pending-actions .hm-survey-share__btn:not(.hm-survey-share__btn--native):focus-visible,
.hm-survey-results__pending-actions .hm-survey-share__btn:not(.hm-survey-share__btn--native).is-copied {
	color: #fff;
}

/* Indeterminate shimmer bars — no numbers, no fills. */
.hm-survey-results__track--pending {
	position: relative;
}

.hm-survey-results__track--pending::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(90deg, rgba(33, 33, 33, 0) 0%, rgba(33, 33, 33, 0.09) 50%, rgba(33, 33, 33, 0) 100%);
	background-size: 200% 100%;
	animation: hm-survey-shimmer 1.6s ease-in-out infinite;
	/* Decorative — cap the paint loop. */
	animation-iteration-count: 12;
}

@keyframes hm-survey-shimmer {
	0%   { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
	.hm-survey-results__track--pending::after,
	.hm-survey-hero__live-dot {
		animation: none;
	}
}

/* Latest-posts feed styles live in components/latest-posts-feed.css —
   the section is shared with regular single posts. */

/* =========================================================================
   Empty state (no survey data)
   ========================================================================= */

.hm-survey-empty {
	padding-block: 80px;
	padding-inline: 20px;
	text-align: center;
}

.hm-survey-empty__msg {
	color: var(--hm-color-text);
	font-weight: 700;
	font-size: 22px;
	margin-block: 0 18px;
}

.hm-survey-empty__link {
	color: var(--hm-color-accent);
	font-weight: 700;
	font-size: 17px;
	text-decoration: none;
}

.hm-survey-empty__link:hover {
	text-decoration: underline;
}

/* =========================================================================
   Tablet (≤1023px)
   ========================================================================= */

@media (max-width: 1023px) {
	.hm-survey-hero__inner {
		padding-block: 48px 42px;
		padding-inline: 32px;
		gap: 18px;
	}

	.hm-survey-hero__title {
		font-size: 44px;
	}

	.hm-survey-hero__counter-num {
		font-size: 44px;
	}

	.hm-survey-vote__container,
	.hm-survey-results__container {
		padding-block: 44px 60px;
	}
}

/* =========================================================================
   Mobile (≤767px)
   ========================================================================= */

@media (max-width: 767px) {
	.hm-survey-hero__inner {
		padding-block: 36px 32px;
		padding-inline: 20px;
		gap: 16px;
	}

	.hm-survey-hero__title {
		font-size: 34px;
		line-height: 1.1;
	}

	.hm-survey-hero__counter-num {
		font-size: 36px;
	}

	.hm-survey-hero__counter-label {
		font-size: 16px;
	}

	.hm-survey-share__btn {
		padding: 10px 16px;
		font-size: 14px;
	}

	.hm-survey-vote__container,
	.hm-survey-results__container {
		padding-block: 34px 48px;
		padding-inline: 20px;
	}

	.hm-survey-vote__question,
	.hm-survey-results__q-title,
	.hm-survey-vote__thanks-msg,
	.hm-survey-results__pending-title {
		font-size: 26px;
	}

	.hm-survey-vote__option {
		padding: 16px 18px;
		border-radius: 10px;
	}

	.hm-survey-vote__option-label {
		font-size: 17px;
	}

	.hm-survey-vote__btn {
		inline-size: 100%;
	}

	.hm-survey-results__answer-head {
		flex-direction: column;
		align-items: flex-start;
	}

	.hm-survey-results__pct {
		font-size: 22px;
	}

	.hm-survey-results__track {
		block-size: 38px;
		border-radius: 10px;
	}

	.hm-survey-results__consensus {
		block-size: 11px;
	}

	.hm-survey-results__pending-card {
		padding: 32px 20px;
		border-radius: 10px;
	}

	/* Survey pages skip the footer contact form on mobile — the page has its
	   own primary actions (vote / share) and the tall form buries the bottom
	   bar. CSS-only on the page's own body class: the footer fragment stays
	   shared/cached and the form keeps working everywhere else (and on
	   desktop here). */
	.single-surveys .hm-footer__form-wrap {
		display: none;
	}

}