/*
 * Local Trades Research landing page.
 *
 * Loaded ONLY on the page with slug `local-trades-research` (see the
 * conditional enqueue in functions.php), so everything here is page-scoped by
 * virtue of not being served anywhere else. Selectors are additionally scoped
 * under .ch-research, which appears only on that page's <main>.
 *
 * Colours, type and spacing all come from theme.json presets — no new design
 * tokens are introduced here.
 */

.ch-research {
	/* Height of the embedded Google Form.
	 * Google Forms iframes cannot report their own height, so this is set
	 * manually. Tune this single value once you have seen the real form:
	 * too small gives an inner scrollbar, too large leaves a blank gap. */
	--ch-form-height: 1400px;
}

/* --- Smooth scroll for the hero CTA -> #survey -------------------------- */
/* Scoped by file: research.css is enqueued on this page only. */
html {
	scroll-behavior: smooth;
}

/* Stop the sticky header covering the heading when the CTA jumps to #survey. */
.ch-research__survey {
	scroll-margin-top: 1.5rem;
}

/* --- Form container ----------------------------------------------------- */
/* The .alignwide selector is repeated deliberately: WordPress emits a layout
 * rule (.wp-container-N > .alignwide) for the parent constrained group, which
 * would otherwise win on specificity and stretch this to the 1200px wide-size.
 * A Google Form only renders ~640px of content, so a 1200px card leaves a wide
 * empty white surround. */
.ch-research .ch-research__form.alignwide {
	max-width: 820px;
	margin-inline: auto;
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--card, 8px);
	box-shadow:
		0 2px 4px rgba(0, 0, 0, 0.04),
		0 10px 28px rgba(0, 0, 0, 0.1);
	padding: clamp(0.5rem, 2vw, 1.25rem);
	overflow: hidden;
}

.ch-research__iframe {
	display: block;
	width: 100%;
	max-width: 100%;
	height: var(--ch-form-height);
	border: 0;
	border-radius: calc(var(--wp--custom--radius--card, 8px) - 2px);
}

/* --- Overflow safety ---------------------------------------------------- */
/* Nothing inside this page may push the document wider than the viewport. */
.ch-research img,
.ch-research iframe,
.ch-research table {
	max-width: 100%;
}

/* --- Small screens ------------------------------------------------------ */
@media (max-width: 600px) {
	.ch-research {
		/* Google Forms stack into a single narrow column on mobile, so the
		 * same form needs noticeably more vertical room. */
		--ch-form-height: 1750px;
	}

	.ch-research__form {
		padding: 0.5rem;
	}

	/* Long headings must wrap rather than overflow on narrow screens. */
	.ch-research h1,
	.ch-research h2,
	.ch-research h3 {
		overflow-wrap: break-word;
		hyphens: auto;
	}

	/* Comfortable tap target on the full-width CTAs. */
	.ch-research .wp-block-button__link {
		display: block;
		width: 100%;
		min-height: 48px;
	}
}

/* --- Focus visibility on the dark bands --------------------------------- */
/* theme.css uses the green accent for focus rings, which is low-contrast
 * against graphite. Use white on the dark sections instead. */
.ch-research__hero a:focus-visible,
.ch-research__cta a:focus-visible,
.ch-research__hero .wp-element-button:focus-visible,
.ch-research__cta .wp-element-button:focus-visible {
	outline: 3px solid #ffffff;
	outline-offset: 3px;
}

/* --- Reduced motion ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}