/*
 * File: assets/css/mghf-quiz.css
 * Version: 1.14
 * Created: 2026-05-06
 * Last Modified: 2026-05-07
 *
 * CHANGELOG
 * v1.14 (2026-05-07) — Two adjustments to the results-screen primary
 *                       and secondary lists.
 *                       (1) Horizontal inset on
 *                       .mghf-quiz__community-grid and
 *                       .mghf-quiz__community-list bumped from 1.25em
 *                       to 4em (replaces prior 1.25em, no other
 *                       changes to those rules).
 *                       (2) text-transform: none added to
 *                       .mghf-quiz__primary-result-tagline as a
 *                       defensive override against host-theme
 *                       paragraph rules forcing uppercase / title
 *                       case on the subtitle. Mirrors the FIX 3
 *                       (v1.7) pattern applied to user-facing leaves
 *                       elsewhere in this file.
 * v1.13 (2026-05-07) — Added the dev-only "Skip" button styling.
 *                       .mghf-quiz__dev-skip-row centers the button
 *                       under the consent notice; .mghf-quiz__btn--
 *                       dev-skip overrides the base .mghf-quiz__btn
 *                       chrome to render small + muted with a thin
 *                       red outline so it's clearly not part of the
 *                       user-facing flow. Tap-target floor is
 *                       intentionally not enforced here — this
 *                       button only ever appears in dev mode (server
 *                       gates via MGHF.dev_skip), where mobile-
 *                       accessibility constraints don't apply.
 * v1.12 (2026-05-07) — Three results-screen polish tweaks.
 *                       (1) Tagline subtitle bumped from italic
 *                       EB Garamond at 1em to upright Julius Sans
 *                       One at 1.0625em, 0.85 contrast — reads as a
 *                       subtitle rather than a footnote.
 *                       (2) Primary community grid gets 1.25em
 *                       horizontal inset padding so names + Learn
 *                       more → links pull in from the card edges.
 *                       (3) Secondary "more communities" list switched
 *                       from single-column flex to a 2-column grid
 *                       (1fr 1fr) with the same 1.25em inset; unlinked
 *                       names sit in the same layout as plain text.
 * v1.11 (2026-05-07) — Added .mghf-quiz__photo-disclaimer rule for
 *                       the new "Photos are for illustrative
 *                       purposes only…" line at the bottom of the
 *                       contact block. Tuned for the dark variant
 *                       (white-on-navy at 0.6 opacity); a fallback
 *                       rule covers the light variant in case the
 *                       contact block is ever rendered without
 *                       --dark.
 * v1.10 (2026-05-07) — Primary block layout tightened.
 *                       New .mghf-quiz__primary-result-tagline rule
 *                       renders the bucket tagline once as a subtitle
 *                       directly below the heading. The per-row
 *                       description that repeated the tagline on
 *                       every community row is gone, along with the
 *                       .mghf-quiz__community-desc rule and the
 *                       grid-template-areas tablet layout that
 *                       supported it. Each row is now a simple flex:
 *                       name on one side, "Learn more →" CTA on the
 *                       other (inline at tablet+, stacked on mobile).
 *                       .mghf-quiz__community-cta wrapper rule
 *                       removed since the CTA link is now a direct
 *                       child of the <li>.
 * v1.9 (2026-05-07) — v0.3.0 verification pass:
 *                       U1 — bucket thumbnail at top of result cards.
 *                         16:9 aspect ratio, object-fit: cover, rounded
 *                         corners, mobile-first.
 *                       U2 — Browse-all CTA below secondary block uses
 *                         the existing .mghf-quiz__btn--secondary chrome
 *                         in a centered .mghf-quiz__browse-all wrapper.
 *                         Old between-blocks .mghf-quiz__primary-result
 *                         -cta retained for any caller still using it
 *                         but unused on the new page.
 *                       U3 + U7 — Per-community "Learn more →" link
 *                         under each linked name in the primary block.
 *                         Secondary list now bold + chevron with hover
 *                         color shift; arrow nudges right on hover.
 *                         New unlinked variants for both blocks render
 *                         the name as plain text.
 *                       U4 — .mghf-quiz__contact-block--dark modifier
 *                         flips the contact block to deep-navy bg /
 *                         white text / light-blue links. Logo inverted
 *                         via brightness(0) invert(1) — works because
 *                         the May Group logo is dark on transparent.
 *                       U5 — .mghf-quiz__ranker-answer renders the
 *                         "You answered: …" sublabel under each ranker
 *                         row in muted body text.
 *                       Tablet (≥ 768px) community-row grid switched
 *                         to grid-template-areas so the per-community
 *                         CTA can sit under the name in the left column
 *                         while the description spans both rows in the
 *                         right column.
 * v1.8 (2026-05-06) — Pre-Phase-5 Round 2 fixes:
 *                       FIX 1 — Widget background #FFFFFF → #EEEEEE.
 *                         Cream stays as deep accent; white still
 *                         used inside individual cards/blocks.
 *                       FIX 2 — Primary button bg/hover swapped to
 *                         match the live site: #8C1C29 default,
 *                         #BA002B hover (was #AA1120 / #660000).
 *                       FIX 3 — Selected answer state rebuilt:
 *                         white bg, 2px solid #8C1C29 border, plus a
 *                         4px left accent, text stays #232323.
 *                       FIX 4 — Loading-state styles for primary
 *                         buttons (`.is-loading` class set by JS).
 *                       FIX 6 — Results screen rebuilt: outer panel
 *                         #EEEEEE (matches widget), header bar deep
 *                         navy with white type, body block white.
 *                       FIX 7 — Logo img max-width pinned to 200px
 *                         (px exception — physical pixel size matters
 *                         for the brand mark).
 *                       FIX 8 — Contact address word-wrap + each line
 *                         on its own line; container guards overflow.
 *                       FIX 9 — Brand-new result-card styles for the
 *                         community-first redesign (D050): primary
 *                         result card with two-column community grid
 *                         on tablet+, single-column on mobile;
 *                         secondary section as a simple linked list.
 *                         Old `.mghf-quiz__result-card`, layout-A/B
 *                         modifier, and result-list styles deleted.
 * v1.7 (2026-05-06) — Pre-Phase-5 UX/CSS fixes:
 *                       FIX 3 — explicit text-transform: none on every
 *                         user-input / answer / label rule to defend
 *                         against theme buttons forcing uppercase.
 *                       FIX 4 — hover state on answer options pinned
 *                         to background #F7F5EE with explicit
 *                         color: #232323 (defends against theme button
 *                         hover that swaps text to white).
 *                       FIX 5 — progress bar rebuilt: label is now
 *                         a paragraph ABOVE the bar (Option A), bar
 *                         shrunk to 0.5em with no text overlay. Old
 *                         `.mghf-quiz__progress-fill { position:absolute;
 *                         inset:0 auto 0 0 }` + `.mghf-quiz__progress-
 *                         text { absolute }` rules replaced.
 *                       FIX 6 — widget container background now
 *                         #FFFFFF (was #F7F5EE). Cream stays as accent
 *                         on hover, ranker items, contact block, TCPA
 *                         callout, progress track.
 *                       FIX 7 — widget gets a soft shadow + border so
 *                         it separates from any host-page background.
 *                         Results panel additionally pinned to
 *                         `background: #FFFFFF` and 1.5em padding.
 *                       FIX 2 — `.has-error` border color stays
 *                         #AA1120; field-error text already had the
 *                         right size/color/family. No CSS change for
 *                         the new client-side scroll-to-first-error
 *                         and clear-on-input behaviour (JS-only).
 * v1.6 (2026-05-06) — Phase 4 results-screen styles. Result cards
 *                     animate in with a fade-up stagger driven by a
 *                     `--mghf-card-index` custom property set inline
 *                     per <li>. Layout A (rank-1 prominent on navy
 *                     background, rank-2 muted, rank-3 hidden via
 *                     template) + Layout B (three equal cards in a
 *                     row at tablet+, column on mobile) both styled.
 *                     Contact block (logo + address + tel:/mailto:)
 *                     beneath the results. prefers-reduced-motion
 *                     short-circuits the fade-up animation.
 * v1.5 (2026-05-06) — Phase 3 lead-capture form styles. New rules cover
 *                     .mghf-quiz__form, .mghf-quiz__honeypot (off-screen
 *                     positioning so bots still find it), inputs, radio
 *                     and checkbox labels (tap targets on the labels,
 *                     not the controls), the TCPA notice (left-rule
 *                     callout per BRANDING.md), and inline / form-wide
 *                     error messages in #AA1120. All interactive
 *                     surfaces use min-height: max(2.75em, 44px).
 * v1.4 (2026-05-06) — Tap-target fix: every interactive element now uses
 *                     min-height: max(2.75em, 44px) to guarantee the 44px
 *                     non-negotiable tap floor regardless of the
 *                     element's own font-size. Caught while verifying
 *                     v1.3 — secondary buttons and ranker items had
 *                     font-size 0.9375em which made 2.75em compute to
 *                     41.25px on a 16px container. The max() pattern
 *                     keeps em as primary, with px as a hard floor (one
 *                     px exception per rule, used only as a safety
 *                     check). Applied to .mghf-quiz__option,
 *                     .mghf-quiz__btn (covers primary + secondary), and
 *                     .mghf-quiz__ranker-item.
 * v1.3 (2026-05-06) — Per D038, every sizing value inside .mghf-quiz
 *                     converted from rem to em so it derives from the
 *                     widget's own 16px context instead of the document
 *                     root. Numeric values from BRANDING.md preserved
 *                     1:1 — only the unit changed. Border widths stay
 *                     in px (BRANDING.md UNIT CONVENTION). The
 *                     @media (min-width: 48rem) breakpoint had to move
 *                     to (min-width: 768px) — media-query rem still
 *                     derives from the document root, so 48rem on
 *                     bb-theme (root 10px) would have evaluated as
 *                     480px instead of the intended 768px.
 *                     Tap targets now compute as 2.75em × 16px = 44px
 *                     exactly, regardless of host theme root font-size.
 * v1.2 (2026-05-06) — Pinned the wrapper's inherited font-size to 16px
 *                     so descendants without explicit font-size land at
 *                     a sensible baseline regardless of theme/BB
 *                     parent-cascade. NOTE: this does NOT change rem
 *                     resolution — rem still derives from <html>.
 *                     Existing universal box-sizing reset (already in
 *                     v1.0) confirmed in place.
 * v1.1 (2026-05-06) — Replaced Glacial Indifference with Julius Sans One
 *                     to match the production font stack on
 *                     marketgrandrapids.com (per D037). Updated the
 *                     consolidated @import to load EB Garamond at all
 *                     four weights (300/400/600/700) plus italic
 *                     variants — same set the live site already loads,
 *                     so no extra cost. Hammersmith One unchanged.
 * v1.0 (2026-05-06) — Phase 2 Chunk C. Mobile-first quiz styles per
 *                     BRANDING.md (D031, D032, D036). All sizing in rem.
 *                     Borders in px (per BRANDING.md unit convention).
 *                     Min tap target 2.75rem on every interactive element.
 *                     Progress bar holds "Question X of Y" centered in
 *                     the fill (resolved from the BRANDING.md 4px-bar
 *                     spec — flagged at Phase 2 kickoff).
 */

@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600;1,700&family=Hammersmith+One&family=Julius+Sans+One&display=swap');

/* ====================================================================
   Scope reset — every rule below is namespaced under .mghf-quiz so the
   plugin doesn't bleed into theme styles.
   ==================================================================== */

.mghf-quiz,
.mghf-quiz *,
.mghf-quiz *::before,
.mghf-quiz *::after {
	box-sizing: border-box;
}

/* ====================================================================
   Container — mobile baseline (< 768px viewport)
   ==================================================================== */

.mghf-quiz {
	/* Pin our own font-size context to 16px. Every em inside .mghf-quiz
	   derives from this, sidestepping host-theme html { font-size }
	   tampering (e.g., bb-theme's html { font-size: 10px }). */
	font-size: 16px;
	font-family: "Julius Sans One", "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: #232323;
	background: #EEEEEE;
	border: 1px solid rgba(35, 35, 35, 0.1);
	border-radius: 0.5em;
	box-shadow: 0 0.125em 0.5em rgba(0, 14, 53, 0.08);
	padding: 1.5em;
	max-width: 100%;
	line-height: 1.5;
	text-transform: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.mghf-quiz__viewport {
	display: block;
}

.mghf-quiz__panel {
	display: block;
}

/* ====================================================================
   Type — applies to every panel
   ==================================================================== */

.mghf-quiz__title {
	font-family: "Hammersmith One", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 400;
	font-size: 1.5em;
	line-height: 1.2;
	color: #000E35;
	margin: 0 0 0.75em;
}

.mghf-quiz__lede {
	font-family: "EB Garamond", Georgia, "Times New Roman", serif;
	font-size: 1.0625em;
	line-height: 1.45;
	color: #232323;
	margin: 0 0 1.5em;
}

.mghf-quiz__question {
	font-family: "Hammersmith One", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 400;
	font-size: 1.25em;
	line-height: 1.3;
	color: #000E35;
	margin: 1em 0;
}

.mghf-quiz__fineprint {
	font-size: 0.8125em;
	color: rgba(35, 35, 35, 0.7);
	margin: 1em 0 0;
	line-height: 1.5;
}

.mghf-quiz__error {
	color: #AA1120;
	padding: 1em;
	font-size: 0.9375em;
}

/* ====================================================================
   Progress bar — label sits ABOVE the fill (FIX 5 / Option A).
   Earlier "label centered inside fill" approach was unreadable when
   the fill covered only a small portion of the bar (e.g. Q1).
   ==================================================================== */

.mghf-quiz__progress {
	margin: 0 0 1.25em;
}

.mghf-quiz__progress-text {
	margin: 0 0 0.5em;
	font-family: "Julius Sans One", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 0.8125em;
	color: #232323;
	letter-spacing: 0.04em;
	line-height: 1;
	text-transform: none;
}

.mghf-quiz__progress-bar {
	position: relative;
	height: 0.5em;
	background: #F7F5EE;
	border: 1px solid rgba(35, 35, 35, 0.1);
	border-radius: 0.25em;
	overflow: hidden;
}

.mghf-quiz__progress-fill {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	background: #AA1120;
	width: 0%;
	transition: width 0.35s cubic-bezier(0.2, 0.7, 0.4, 1);
}

/* ====================================================================
   Answer option cards
   ==================================================================== */

.mghf-quiz__options {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.625em;
}

.mghf-quiz__option {
	-webkit-appearance: none;
	appearance: none;
	display: block;
	width: 100%;
	min-height: max(2.75em, 44px);
	cursor: pointer;
	background: #FFFFFF;
	color: #232323;
	font-family: inherit;
	font-size: 1.0625em;
	line-height: 1.4;
	text-align: left;
	text-transform: none;
	letter-spacing: normal;
	padding: 0.875em 1em;
	border: 1px solid rgba(35, 35, 35, 0.3);
	border-radius: 0.375em;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.mghf-quiz__option:hover:not(.is-selected) {
	/* Pinned to cream background + dark gray text. Defends against host-theme
	   button hovers that swap to dark navy + white (FIX 4). */
	background: #F7F5EE;
	border-color: #0C2749;
	color: #232323;
}

.mghf-quiz__option:focus-visible {
	outline: 2px solid #0043FF;
	outline-offset: 2px;
}

.mghf-quiz__option.is-selected {
	background: #FFFFFF;
	border: 2px solid #8C1C29;
	border-left: 4px solid #8C1C29;
	color: #232323;
	/* Compensate for the 2px+4px border bumps so neighbours don't
	   shift when an option becomes selected. */
	padding: calc(0.875em - 1px) calc(1em - 1px) calc(0.875em - 1px) calc(1em - 3px);
}

/* ====================================================================
   Action row — Back + Next/Finish
   ==================================================================== */

.mghf-quiz__actions {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.75em;
	margin: 1.5em 0 0.25em;
	flex-wrap: wrap;
}

.mghf-quiz__welcome .mghf-quiz__actions {
	justify-content: flex-start;
}

.mghf-quiz__actions-spacer {
	width: 0;
	height: 1px;
}

.mghf-quiz__btn {
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	font-family: "Hammersmith One", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 1em;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	border-radius: 0.25em;
	min-height: max(2.75em, 44px);
	padding: 0.875em 1.5em;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.mghf-quiz__btn[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
}

.mghf-quiz__btn:focus-visible {
	outline: 2px solid #0043FF;
	outline-offset: 2px;
}

.mghf-quiz__btn--primary {
	background-color: #8C1C29;
	color: #FFFFFF;
	border: 1px solid transparent;
}

.mghf-quiz__btn--primary:hover:not([disabled]),
.mghf-quiz__btn--primary:focus-visible:not([disabled]) {
	background-color: #BA002B;
}

/* Loading state set by JS the moment the user clicks (FIX 4) so a
   slow AJAX RTT never feels silent. The original button text is
   preserved in data-original-text by the controller. */
.mghf-quiz__btn.is-loading {
	opacity: 0.85;
	cursor: wait;
}

.mghf-quiz__btn--secondary {
	background: transparent;
	color: #0C2749;
	border: 1px solid #0C2749;
	font-family: "Julius Sans One", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 0.9375em;
	padding: 0.75em 1.25em;
}

.mghf-quiz__btn--secondary:hover {
	background: #0C2749;
	color: #FFFFFF;
}

/* Dev-only "Skip" affordance on the lead-capture form. Visually
   distinct from the brand CTAs — small, outlined, mid-red — so it's
   obvious at a glance this isn't a user-facing element. Server-gated
   via MGHF.dev_skip; never reaches production rendering. */
.mghf-quiz__dev-skip-row {
	margin: 0.75em 0 0.5em;
	text-align: center;
}

.mghf-quiz__btn--dev-skip {
	background: transparent;
	color: #AA1120;
	border: 1px solid rgba(170, 17, 32, 0.5);
	border-radius: 0.25em;
	font-family: "Julius Sans One", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 0.8125em;
	letter-spacing: 0.04em;
	padding: 0.5em 1em;
	min-height: 0;
	cursor: pointer;
}

.mghf-quiz__btn--dev-skip:hover,
.mghf-quiz__btn--dev-skip:focus-visible {
	background: rgba(170, 17, 32, 0.08);
	color: #AA1120;
	border-color: #AA1120;
}

/* ====================================================================
   Q9 ranker — drag-to-reorder list
   ==================================================================== */

.mghf-quiz__ranker {
	margin: 1.25em 0 0;
	padding: 1em;
	background: #FFFFFF;
	border: 1px solid rgba(35, 35, 35, 0.15);
	border-radius: 0.375em;
}

.mghf-quiz__ranker[hidden] {
	display: none;
}

.mghf-quiz__ranker-help {
	font-size: 0.875em;
	margin: 0 0 0.75em;
	color: rgba(35, 35, 35, 0.75);
}

.mghf-quiz__ranker-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 0.5em;
	counter-reset: rank;
}

.mghf-quiz__ranker-item {
	counter-increment: rank;
	display: flex;
	align-items: center;
	gap: 0.75em;
	padding: 0.5em 0.75em;
	min-height: max(2.75em, 44px);
	background: #F7F5EE;
	border: 1px solid rgba(35, 35, 35, 0.2);
	border-radius: 0.25em;
	font-size: 0.9375em;
	line-height: 1.3;
	cursor: grab;
	user-select: none;
	-webkit-user-select: none;
	touch-action: none; /* let SortableJS handle touch */
}

.mghf-quiz__ranker-item::before {
	content: counter(rank);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 1.625em;
	height: 1.625em;
	background: #000E35;
	color: #FFFFFF;
	border-radius: 50%;
	font-family: "Hammersmith One", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 0.8125em;
}

.mghf-quiz__ranker-item.sortable-chosen {
	cursor: grabbing;
}

.mghf-quiz__ranker-item.sortable-ghost {
	opacity: 0.4;
	background: #FFF;
}

.mghf-quiz__ranker-handle {
	color: rgba(35, 35, 35, 0.45);
	font-size: 1.25em;
	letter-spacing: -0.4em;
	flex-shrink: 0;
	line-height: 1;
}

.mghf-quiz__ranker-label {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.125em;
}

.mghf-quiz__ranker-question {
	color: #232323;
	line-height: 1.3;
}

/* U5 — "You answered: …" sublabel under each ranker row. Lighter,
   smaller, italic so it visually subordinates to the question text
   while still being readable. */
.mghf-quiz__ranker-answer {
	font-size: 0.8125em;
	font-style: italic;
	color: rgba(35, 35, 35, 0.6);
	line-height: 1.3;
}

/* ====================================================================
   Lead capture form (Phase 3)
   ==================================================================== */

.mghf-quiz__lead-panel {
	display: block;
}

.mghf-quiz__form {
	display: flex;
	flex-direction: column;
	gap: 1em;
}

/* Honeypot — kept off-screen via the position trick rather than
   display:none so most bots still find and fill it. */
.mghf-quiz__honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.mghf-quiz__field {
	display: block;
}

.mghf-quiz__field--fieldset {
	border: 0;
	padding: 0;
	margin: 0;
}

.mghf-quiz__label {
	display: block;
	font-size: 0.9375em;
	color: #232323;
	margin: 0 0 0.375em;
	font-weight: 400;
}

.mghf-quiz__input {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	display: block;
	font-family: inherit;
	font-size: 1em;
	line-height: 1.4;
	color: #232323;
	background: #FFFFFF;
	padding: 0.75em 1em;
	border: 1px solid rgba(35, 35, 35, 0.4);
	border-radius: 0.25em;
	min-height: max(2.75em, 44px);
	text-transform: none;
	letter-spacing: normal;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.mghf-quiz__input:focus {
	outline: none;
	border-color: #0043FF;
	box-shadow: 0 0 0 3px rgba(0, 67, 255, 0.18);
}

.mghf-quiz__input.has-error {
	border-color: #AA1120;
}

.mghf-quiz__radio,
.mghf-quiz__check {
	display: flex;
	align-items: flex-start;
	gap: 0.625em;
	padding: 0.375em 0;
	min-height: max(2.75em, 44px);
	cursor: pointer;
	font-size: 0.9375em;
	line-height: 1.4;
	color: #232323;
	text-transform: none;
	letter-spacing: normal;
}

.mghf-quiz__radio input[type="radio"],
.mghf-quiz__check input[type="checkbox"] {
	margin: 0.2em 0 0;
	flex-shrink: 0;
	/* Native control. Sized in px so it doesn't compound with the label
	   font-size; touch target is provided by the surrounding label. */
	width: 18px;
	height: 18px;
	accent-color: #AA1120;
}

.mghf-quiz__tcpa {
	font-size: 0.8125em;
	color: rgba(35, 35, 35, 0.8);
	font-style: italic;
	background: #F7F5EE;
	border-left: 3px solid #A3D4F2;
	padding: 0.75em 1em;
	margin: 0;
	line-height: 1.5;
}

.mghf-quiz__field-error {
	color: #AA1120;
	font-size: 0.8125em;
	margin: 0.375em 0 0;
	line-height: 1.4;
}

.mghf-quiz__field-error[hidden] {
	display: none;
}

.mghf-quiz__form-error {
	color: #AA1120;
	font-size: 0.9375em;
	margin: 0;
	padding: 0.625em 0.875em;
	background: rgba(170, 17, 32, 0.08);
	border: 1px solid rgba(170, 17, 32, 0.4);
	border-radius: 0.25em;
}

.mghf-quiz__form-error[hidden] {
	display: none;
}

/* ====================================================================
   Results screen (D050 — community-first redesign)
   ==================================================================== */

.mghf-quiz__results {
	display: block;
	background: #EEEEEE;
}

.mghf-quiz__results-header {
	background: #000E35;
	color: #FFFFFF;
	padding: 1.5em;
	border-radius: 0.375em 0.375em 0 0;
	margin: 0 0 1em;
}

.mghf-quiz__results-title {
	font-family: "Hammersmith One", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 1.5em;
	font-weight: 400;
	line-height: 1.2;
	color: #FFFFFF;
	margin: 0 0 0.375em;
}

.mghf-quiz__results-subtitle {
	font-family: "EB Garamond", Georgia, "Times New Roman", serif;
	font-size: 1.0625em;
	line-height: 1.45;
	color: #A3D4F2;
	margin: 0;
}

.mghf-quiz__results-body {
	background: #FFFFFF;
	border: 1px solid rgba(35, 35, 35, 0.1);
	border-radius: 0.375em;
	padding: 1.5em;
}

/* ----- Primary result (winning bucket) ----- */

/* Bucket thumbnail at top of each result card (U1). 16:9 aspect, cover
   crop, rounded to match the card chrome. Falls back gracefully when
   thumbnail_url is missing — the <figure> isn't rendered. */
.mghf-quiz__community-thumb {
	margin: 0 0 1.25em;
	padding: 0;
	overflow: hidden;
	border-radius: 0.375em;
	background: rgba(35, 35, 35, 0.05);
	aspect-ratio: 16 / 9;
}

.mghf-quiz__community-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mghf-quiz__community-thumb--secondary {
	margin: 0 0 1em;
}

.mghf-quiz__primary-result-heading {
	font-family: "Hammersmith One", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 1.25em;
	font-weight: 400;
	line-height: 1.3;
	color: #000E35;
	margin: 0 0 0.375em;
}

/* v0.9.1 — bucket TAGLINE rendered as an italic accent subtitle
   between the bucket-name heading and the description. Color is
   #AA1120 per BRANDING.md — the established results-screen accent
   (top-match accent + match percentage display). Slightly larger
   than body to land as an emotional hook without competing with
   the heading. */
.mghf-bucket-tagline {
	margin: 0 0 0.625em;
	font-family: "EB Garamond", Georgia, "Times New Roman", serif;
	font-size: 1.125em;
	font-style: italic;
	line-height: 1.4;
	color: #AA1120;
}

/* v0.9.1 — bucket DESCRIPTION rendered as body copy below the
   tagline. EB Garamond per BRANDING.md result-description type
   scale. Replaces v3.3's repurposed primary-result-tagline class. */
.mghf-quiz__primary-result-description,
.mghf-quiz__secondary-result-description {
	margin: 0 0 1.25em;
	font-family: "EB Garamond", Georgia, "Times New Roman", serif;
	font-size: 1.0625em;
	font-style: normal;
	line-height: 1.55;
	color: #232323;
}

/* DEPRECATED — kept so v3.3-era markup in cached pages doesn't lose
   styling during the rollout window. Mirrors the new description
   styling so the visual result is identical even if a stale render
   slips through. */
.mghf-quiz__primary-result-tagline {
	margin: 0 0 1.25em;
	font-family: "EB Garamond", Georgia, "Times New Roman", serif;
	font-size: 1.0625em;
	font-style: normal;
	line-height: 1.55;
	color: #232323;
}

/* Inset the community grid so names (left) and Learn more → links
   (right) sit pulled in from the card edges, not flush with the body
   padding. */
.mghf-quiz__community-grid {
	list-style: none;
	margin: 0 0 0.5em;
	padding: 0 4em;
	display: flex;
	flex-direction: column;
	gap: 0;
}

/* Mobile: name on top, "Learn more →" below (stacked). Tablet+
   promotes to inline (name on the left, CTA on the right) — see the
   @media block below. */
.mghf-quiz__community-row {
	display: flex;
	flex-direction: column;
	gap: 0.125em;
	padding: 0.875em 0;
	margin: 0;
	border-bottom: 1px solid rgba(35, 35, 35, 0.1);
}

.mghf-quiz__community-row:last-child {
	border-bottom: 0;
}

.mghf-quiz__community-name {
	margin: 0;
}

.mghf-quiz__community-name a {
	color: #000E35;
	text-decoration: underline;
	text-decoration-color: rgba(0, 14, 53, 0.4);
	text-underline-offset: 0.15em;
	font-family: "Hammersmith One", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 1.0625em;
	line-height: 1.3;
	min-height: max(2.75em, 44px);
	display: inline-flex;
	align-items: center;
}

.mghf-quiz__community-name a:hover,
.mghf-quiz__community-name a:focus-visible {
	color: #8C1C29;
	text-decoration-color: #8C1C29;
}

/* Plain-text variant when the community has no live URL yet. Same
   typographic weight as the linked name so the row doesn't look like
   it's missing data — just doesn't pretend to be clickable. */
.mghf-quiz__community-name-text {
	display: inline-flex;
	align-items: center;
	min-height: max(2.75em, 44px);
	font-family: "Hammersmith One", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 1.0625em;
	line-height: 1.3;
	color: #000E35;
}

.mghf-quiz__community-row--unlinked .mghf-quiz__community-name-text {
	color: rgba(0, 14, 53, 0.7);
}

/* "Learn more →" affordance per community row (U3). Stacks under the
   name on mobile; sits inline on the right at tablet+ via the @media
   rule below. Hover nudges the arrow right. */
.mghf-quiz__learn-more {
	display: inline-flex;
	align-items: center;
	gap: 0.375em;
	font-family: "Julius Sans One", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 0.8125em;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #8C1C29;
	text-decoration: none;
	min-height: max(2.75em, 44px);
	padding: 0.25em 0;
}

.mghf-quiz__learn-more-arrow {
	display: inline-block;
	transition: transform 0.2s ease;
}

.mghf-quiz__learn-more:hover,
.mghf-quiz__learn-more:focus-visible {
	color: #BA002B;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.mghf-quiz__learn-more:hover .mghf-quiz__learn-more-arrow,
.mghf-quiz__learn-more:focus-visible .mghf-quiz__learn-more-arrow {
	transform: translateX(0.25em);
}

/* Legacy CTA wrapper kept in case any caller still uses it. The new
   browse-all button below the secondary block (U2) lives in
   .mghf-quiz__browse-all instead. */
.mghf-quiz__primary-result-cta {
	margin: 1.25em 0 0;
}

/* ----- Secondary result section ----- */

.mghf-quiz__secondary-result {
	margin: 1.75em 0 0;
	padding: 1.5em 0 0;
	border-top: 1px solid rgba(35, 35, 35, 0.15);
}

.mghf-quiz__secondary-result-heading {
	font-family: "Hammersmith One", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 1.0625em;
	font-weight: 400;
	color: #000E35;
	line-height: 1.3;
	margin: 0 0 0.75em;
}

/* Secondary list (U7). Old plain-underlined-anchor look replaced with
   a chip-style pill: bold name, right-arrow chevron, hover slides the
   arrow right. Reads as something to click rather than a footnote.
   v1.12 — switched from single-column flex to a 2-column grid with
   1.25em inset to match the primary block above it. */
.mghf-quiz__community-list {
	list-style: none;
	margin: 0;
	padding: 0 4em;
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 1.5em;
	row-gap: 0.25em;
}

.mghf-quiz__community-list-item {
	margin: 0;
}

.mghf-quiz__community-list a {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	color: #000E35;
	font-family: "Hammersmith One", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 1em;
	font-weight: 400;
	line-height: 1.3;
	min-height: max(2.75em, 44px);
	padding: 0.375em 0.75em 0.375em 0;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color 0.18s ease, border-color 0.18s ease;
}

.mghf-quiz__community-list-arrow {
	display: inline-block;
	color: rgba(0, 14, 53, 0.55);
	transition: transform 0.18s ease, color 0.18s ease;
}

.mghf-quiz__community-list a:hover,
.mghf-quiz__community-list a:focus-visible {
	color: #8C1C29;
	border-bottom-color: rgba(140, 28, 41, 0.4);
}

.mghf-quiz__community-list a:hover .mghf-quiz__community-list-arrow,
.mghf-quiz__community-list a:focus-visible .mghf-quiz__community-list-arrow {
	color: #8C1C29;
	transform: translateX(0.25em);
}

/* Unlinked variant — plain text at the same weight as the linked
   names, dimmed slightly so the linked rows still feel primary. */
.mghf-quiz__community-list-text {
	display: inline-flex;
	align-items: center;
	min-height: max(2.75em, 44px);
	padding: 0.375em 0;
	font-family: "Hammersmith One", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 1em;
	color: rgba(0, 14, 53, 0.6);
}

/* "Browse all Grand Rapids communities" CTA below the secondary block
   (U2). Same .mghf-quiz__btn--secondary chrome that's used on Back
   buttons inside the quiz, so visual weight is below the per-community
   "Learn more →" links above. */
.mghf-quiz__browse-all {
	margin: 1.5em 0 1.5em; /* B5 / B3 — bottom padding before the contact footer */
	text-align: center;
}

.mghf-quiz__browse-all .mghf-quiz__btn--secondary {
	/* v0.5.3 Fix 4 — long button label was still spilling past the
	   card on mobile after the v0.5.2 attempt. Root cause: rendered
	   as an <a>, default display: inline, so the button-style chrome
	   (padding/min-height) was being computed against a single inline
	   line box that ignored the wrap. Switching to inline-block +
	   box-sizing: border-box makes max-width: 100% actually constrain
	   the box; white-space: normal lets the label wrap onto a second
	   line; width: auto keeps it from going full-width on desktop. */
	display: inline-block;
	width: auto;
	max-width: 100%;
	box-sizing: border-box;
	white-space: normal;
	line-height: 1.3;
	text-align: center;
}

/* ----- Contact block (FIX 7 + FIX 8 + U4) ----- */

.mghf-quiz__contact-block {
	margin: 1.5em 0 0.75em;
	padding: 1.5em;
	background: #FFFFFF;
	border: 1px solid rgba(35, 35, 35, 0.1);
	border-radius: 0.375em;
	text-align: center;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

.mghf-quiz__contact-logo img {
	display: block;
	max-width: 200px;
	width: 100%;
	height: auto;
	margin: 0 auto 1em auto;
}

.mghf-quiz__contact-address {
	margin: 0 0 0.75em;
	font-style: normal;
	line-height: 1.5;
}

.mghf-quiz__contact-address-line {
	display: block;
	font-size: 0.9375em;
	color: #232323;
}

.mghf-quiz__contact-details p {
	margin: 0 0 0.375em;
	font-size: 0.9375em;
	line-height: 1.45;
	color: #232323;
}

.mghf-quiz__contact-phone a,
.mghf-quiz__contact-email a {
	color: #0043FF;
	text-decoration: underline;
	min-height: max(2.75em, 44px);
	display: inline-block;
	padding: 0.25em 0;
}

.mghf-quiz__contact-phone a:hover,
.mghf-quiz__contact-email a:hover {
	color: #000E35;
}

.mghf-quiz__contact-note {
	margin: 0.875em 0 0;
	font-size: 0.875em;
	color: rgba(35, 35, 35, 0.75);
	font-style: italic;
}

/* Dark contact block (U4). Deep navy background, white text, light
   blue links. Logo is the existing color asset inverted via filter —
   works because the May Group / RE/MAX mark is dark on transparent.
   No-op if a real white asset replaces $logo_url later. */
.mghf-quiz__contact-block--dark {
	background: #000E35;
	border-color: rgba(255, 255, 255, 0.12);
}

.mghf-quiz__contact-block--dark .mghf-quiz__contact-logo img {
	filter: brightness(0) invert(1);
}

.mghf-quiz__contact-block--dark .mghf-quiz__contact-address-line {
	color: #FFFFFF;
}

.mghf-quiz__contact-block--dark .mghf-quiz__contact-details p {
	color: #FFFFFF;
}

.mghf-quiz__contact-block--dark .mghf-quiz__contact-phone a,
.mghf-quiz__contact-block--dark .mghf-quiz__contact-email a {
	color: #A3D4F2;
}

.mghf-quiz__contact-block--dark .mghf-quiz__contact-phone a:hover,
.mghf-quiz__contact-block--dark .mghf-quiz__contact-phone a:focus-visible,
.mghf-quiz__contact-block--dark .mghf-quiz__contact-email a:hover,
.mghf-quiz__contact-block--dark .mghf-quiz__contact-email a:focus-visible {
	color: #FFFFFF;
}

.mghf-quiz__contact-block--dark .mghf-quiz__contact-note {
	color: rgba(255, 255, 255, 0.8);
}

/* Photo disclaimer — rendered as a footnote-style line at the bottom
   of the contact block. Tuned for the dark variant (which is what the
   results page actually uses). The light-variant fallback exists in
   case the contact block is ever rendered without --dark. */
.mghf-quiz__photo-disclaimer {
	margin: 1em 0 0;
	font-size: 0.75em;
	line-height: 1.45;
	font-style: italic;
}

.mghf-quiz__contact-block--dark .mghf-quiz__photo-disclaimer {
	color: rgba(255, 255, 255, 0.6);
}

.mghf-quiz__contact-block:not(.mghf-quiz__contact-block--dark) .mghf-quiz__photo-disclaimer {
	color: rgba(35, 35, 35, 0.6);
}

/* ====================================================================
   Tablet (≥ 768px viewport)
   Note: media-query rem/em derives from <html>, so the breakpoint must
   be in px to be reliable across host themes that override html
   { font-size } (e.g., bb-theme sets it to 10px).
   ==================================================================== */

@media (min-width: 768px) {
	.mghf-quiz {
		padding: 2em;
		max-width: 50em;
		margin: 0 auto;
	}
	.mghf-quiz__title {
		font-size: 1.75em;
	}
	.mghf-quiz__question {
		font-size: 1.375em;
	}
	.mghf-quiz__lede {
		font-size: 1.125em;
	}

	/* Community row at tablet+: name on the left, "Learn more →" on
	   the right. Stacked layout (mobile-first default) is overridden
	   here, not by adding grid template areas. */
	.mghf-quiz__community-row {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 1.5em;
	}
}

/* ====================================================================
   Reduced motion
   ==================================================================== */

/* B3 — Mobile (≤500px): collapse the secondary community grid to a
   single column and shrink the 4em horizontal inset so there's room
   for the names + chevrons. Same padding reduction on the primary
   grid. */
@media (max-width: 500px) {
	.mghf-quiz__community-grid,
	.mghf-quiz__community-list {
		padding: 0 1.5em;
	}
	.mghf-quiz__community-list {
		grid-template-columns: 1fr;
		row-gap: 0.5em;
	}
	.mghf-quiz__browse-all {
		padding: 0 1em;
	}
	/* v0.5.3 Fix 4 — at narrow viewports, let the button stretch
	   to fill the available row width and shrink padding/font so
	   "Browse all Grand Rapids communities" wraps to two lines
	   inside the card without any horizontal overflow. */
	.mghf-quiz__browse-all .mghf-quiz__btn--secondary {
		width: 100%;
		font-size: 0.875em;
		padding: 0.75em 1em;
		line-height: 1.25;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mghf-quiz__progress-fill,
	.mghf-quiz__option,
	.mghf-quiz__btn {
		transition: none;
	}
}