/**
 * Defer Forms — front-end styles for builder content blocks and the fieldset
 * caption used by radio/checkbox/file groups. Sizes use em so they scale with
 * the theme's own form typography.
 *
 * Scoped to both hosts, like controls.css: the builder preview renders the same
 * markup and imports this file through the admin bundle, so the two cannot
 * drift apart.
 */

/* Radio/checkbox/file groups wrap their caption in <fieldset> so a <label>
 * doesn't steal the first option's clicks — strip the browser's default
 * fieldset chrome so it reads like a normal field caption. */
:is( .wpcf7-form, .deferforms-preview ) .deferforms-fieldset {
	min-width: 0;
	/*
	 * margin-inline, not the shorthand.
	 *
	 * The browser's fieldset chrome is a 2px inline margin and nothing in the
	 * block direction, so that is all there is to reset here. `margin: 0` also
	 * cleared the gap under the field — controls.css sets margin-bottom on
	 * fieldsets for exactly the reason it says there, and this rule comes after
	 * it at the same specificity, so it won.
	 *
	 * Seen as: the checkbox under a radio group sat flush against it while every
	 * other field had space, on the front end as well as in the preview.
	 */
	margin-inline: 0;
	padding: 0;
	border: 0;
}
:is( .wpcf7-form, .deferforms-preview ) .deferforms-fieldset > legend {
	float: none;
	width: auto;
	padding: 0;
	margin-bottom: 0.35em;
	font-weight: 600;
	color: var( --deferforms-text );
}

/* Alignment */
:is( .wpcf7-form, .deferforms-preview ) .deferforms-align-left   { text-align: left; }
:is( .wpcf7-form, .deferforms-preview ) .deferforms-align-center { text-align: center; }
:is( .wpcf7-form, .deferforms-preview ) .deferforms-align-right  { text-align: right; }

/* Heading */
:is( .wpcf7-form, .deferforms-preview ) .deferforms-h {
	margin: 0.4em 0;
	font-weight: 700;
	line-height: 1.25;
	color: inherit;
}
:is( .wpcf7-form, .deferforms-preview ) .deferforms-h-h2 { font-size: 1.6em; }
:is( .wpcf7-form, .deferforms-preview ) .deferforms-h-h3 { font-size: 1.3em; }
:is( .wpcf7-form, .deferforms-preview ) .deferforms-h-h4 { font-size: 1.1em; }

/* Paragraph */
:is( .wpcf7-form, .deferforms-preview ) .deferforms-p    { margin: 0.4em 0; line-height: 1.6; }
:is( .wpcf7-form, .deferforms-preview ) .deferforms-p-sm { font-size: max( 14px, 0.9em ); }
:is( .wpcf7-form, .deferforms-preview ) .deferforms-p-md { font-size: 1em; }
:is( .wpcf7-form, .deferforms-preview ) .deferforms-p-lg { font-size: 1.15em; }

/* Divider (border-top-width comes from the inline style). Tiers are opacity
 * steps over whatever sits behind them, not palette colours, so they stay
 * literal. */
:is( .wpcf7-form, .deferforms-preview ) .deferforms-hr {
	border: 0;
	border-top-style: solid;
	border-top-color: rgba( 0, 0, 0, 0.12 );
	margin: 1em 0;
}
:is( .wpcf7-form, .deferforms-preview ) .deferforms-hr-dashed { border-top-style: dashed; }
:is( .wpcf7-form, .deferforms-preview ) .deferforms-hr-dotted { border-top-style: dotted; }
:is( .wpcf7-form, .deferforms-preview ) .deferforms-hr-subtle { border-top-color: rgba( 0, 0, 0, 0.1 ); }
:is( .wpcf7-form, .deferforms-preview ) .deferforms-hr-normal { border-top-color: rgba( 0, 0, 0, 0.22 ); }
:is( .wpcf7-form, .deferforms-preview ) .deferforms-hr-strong { border-top-color: rgba( 0, 0, 0, 0.4 ); }

/* Grid rows (built with the layout tool). Single column on small screens,
 * N columns from 600px up — responsive stacking. The gaps follow the same
 * token as the space between fields, so "Space between fields" in the Design
 * settings governs the whole rhythm rather than half of it. */
:is( .wpcf7-form, .deferforms-preview ) .deferforms-row {
	display: grid;
	gap: var( --deferforms-gap );
	grid-template-columns: 1fr;
}
:is( .wpcf7-form, .deferforms-preview ) .deferforms-col {
	display: flex;
	flex-direction: column;
	gap: var( --deferforms-gap );
	min-width: 0;
}
:is( .wpcf7-form, .deferforms-preview ) .deferforms-row > *,
:is( .wpcf7-form, .deferforms-preview ) .deferforms-col > * {
	margin: 0;
}
/* A stray <br> from wpautop would otherwise claim a whole grid cell and shunt
 * the columns out of line. Marker_Cleanup strips them; this is the backstop. */
:is( .wpcf7-form, .deferforms-preview ) .deferforms-row > br {
	display: none;
}
/* CF7 sizes text inputs from their `size` attribute (~40 characters) on top of
 * padding, so at content-box they render wider than the column and spill into
 * the gap — making neighbouring columns look glued together. Inside a grid the
 * control follows the column instead. */
:is( .wpcf7-form, .deferforms-preview ) .deferforms-col input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']),
:is( .wpcf7-form, .deferforms-preview ) .deferforms-col select,
:is( .wpcf7-form, .deferforms-preview ) .deferforms-col textarea {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}
:is( .wpcf7-form, .deferforms-preview ) .deferforms-col .wpcf7-form-control-wrap {
	display: block;
}
@media ( min-width: 600px ) {
	:is( .wpcf7-form, .deferforms-preview ) .deferforms-cols-2 { grid-template-columns: repeat( 2, 1fr ); }
	:is( .wpcf7-form, .deferforms-preview ) .deferforms-cols-3 { grid-template-columns: repeat( 3, 1fr ); }
	:is( .wpcf7-form, .deferforms-preview ) .deferforms-cols-4 { grid-template-columns: repeat( 4, 1fr ); }
}