/*
 * Opt-in row styling.
 *
 * Every value resolves against the theme's theme.json presets -- the palette
 * slugs wp-theme-mmw-parent actually declares (base, subtle, surface, rule,
 * muted, meta, strong, accent, brand, brand-alt, primary), its font sizes and
 * its spacing scale. There is not a single hex value in this file, and there
 * must not be: the design mockup's colours are a layout reference, and a brand
 * skins this row by editing its own theme.json rather than this stylesheet.
 *
 * Fallbacks are all inherit/currentColor/transparent rather than a hard-coded
 * colour, so a theme without a given preset degrades to the surrounding type
 * instead of to some other brand's grey.
 */

.mmw-co-row {
	display: block;
	margin: var(--wp--preset--spacing--30, 1rem) 0 var(--wp--preset--spacing--20, 0.5rem);
	padding: var(--wp--preset--spacing--30, 1rem);
	background-color: var(--wp--preset--color--subtle, transparent);
	border: 1px solid var(--wp--preset--color--rule, currentColor);
}

.mmw-co-label {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	margin: 0;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--body, inherit);
}

.mmw-co-checkbox {
	flex: 0 0 auto;
	margin-top: 0.2em;
	width: 1rem;
	height: 1rem;
	accent-color: var(--wp--preset--color--accent, currentColor);
}

.mmw-co-text {
	display: block;
	font-size: var(--wp--preset--font-size--small, inherit);
	line-height: 1.5;
	color: var(--wp--preset--color--strong, inherit);
}

.mmw-co-sub {
	display: block;
	margin-top: 0.25rem;
	font-size: var(--wp--preset--font-size--x-small, inherit);
	line-height: 1.5;
	color: var(--wp--preset--color--muted, inherit);
}

/* Keyboard focus must stay visible: the label is the click target, so the
   checkbox's own ring is what a keyboard user has to go on. */
.mmw-co-checkbox:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent, currentColor);
	outline-offset: 2px;
}

.mmw-co-turnstile {
	margin: 0 0 var(--wp--preset--spacing--30, 1rem);
}

/* The widget is a fixed-width iframe; keep it from forcing a horizontal
   scrollbar on a narrow phone, which is a live defect on this box already. */
.mmw-co-turnstile iframe {
	max-width: 100%;
}