/* LEAF Purchase Program — eligibility/terms copy above a Contact Form 7
   application form.

   This is the one place we style non-tt- classes outside WooCommerce: CF7
   emits its own .wpcf7-* markup and we restyle it, same principle as the
   .wc-block-* rules (system.md §12). Values are read off the reference
   screenshots; no Figma for this page yet. */

.tt-leaf {
	padding: 80px 20px 100px;
}

.tt-leaf__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--oswald, "Oswald", sans-serif) !important;
	font-weight: 600 !important;
	font-size: 52px;
	line-height: 1.05;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink, #141412) !important;
}

.tt-leaf__title::after {
	content: "";
	display: block;
	width: 50px;
	height: 2px;
	margin: 20px auto 0;
	background: var(--wp--preset--color--red, #cf2026);
}

.tt-leaf__body {
	max-width: 680px;
	margin: 56px auto 0;
	font-family: var(--wp--preset--font-family--barlow, "Barlow", sans-serif);
	font-size: 16px;
	line-height: 1.6;
	color: var(--wp--preset--color--ink, #141412);
}

.tt-leaf__body p {
	margin: 0 0 20px;
}

.tt-leaf__body ul {
	margin: 0 0 24px;
	padding-left: 22px;
	list-style: disc;
}

.tt-leaf__body li {
	margin-bottom: 6px;
}

.tt-leaf__apply {
	margin-top: 32px;
}

.tt-leaf__rule-divider {
	height: 1px;
	margin: 32px 0;
	border: 0;
	background: #d5d5d5;
}

/* ---- Contact Form 7 ------------------------------------------------------ */
/* CF7 runs the form template through wpautop, so each field's label + control
   arrive wrapped in a <p> with a <br> between them. Left alone, that <p>
   inherits the body's 20px paragraph margin and the <br> adds a stray line
   break, which is what pushed every control away from its label. */
.tt-leaf-form__field p {
	margin: 0;
}

.tt-leaf-form__field br {
	display: none;
}

.tt-leaf-form__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px 24px;
}

/* Grid items default to min-width:auto, so CF7's size="40" inputs impose a
   min-content width wider than half the measure — the columns blow past the
   container and squeeze the gap to nothing. min-width:0 lets them shrink. */
.tt-leaf-form__field {
	min-width: 0;
}

.tt-leaf-form__field--full {
	grid-column: 1 / -1;
}

.tt-leaf-form__field label,
.tt-leaf-form__legend {
	display: block;
	margin-bottom: 6px;
	font-size: 16px;
	line-height: 1.5;
	color: var(--wp--preset--color--ink, #141412);
}

/* The required marker is an <abbr> so it carries a title for screen readers
   instead of being a bare asterisk. */
.tt-leaf-form__field abbr {
	text-decoration: none;
	border: 0;
}

.tt-leaf-form__field input[type="text"],
.tt-leaf-form__field input[type="email"],
.tt-leaf-form__field select,
.tt-leaf-form__field textarea {
	display: block;
	/* Without this the 12px side padding and 1px border are added ON TOP of
	   width:100%, so every control overruns its grid cell by 26px and eats the
	   column gap. WordPress doesn't set a global border-box. */
	box-sizing: border-box;
	width: 100%;
	padding: 9px 12px;
	border: 1px solid #2b2b3a;
	border-radius: 0;
	background: #fff;
	font-family: var(--wp--preset--font-family--barlow, "Barlow", sans-serif);
	font-size: 16px;
	line-height: 1.5;
	color: var(--wp--preset--color--ink, #141412);
	transition: border-color 0.2s ease;
}

.tt-leaf-form__field input[type="text"]:focus,
.tt-leaf-form__field input[type="email"]:focus,
.tt-leaf-form__field select:focus,
.tt-leaf-form__field textarea:focus {
	border-color: var(--wp--preset--color--red, #cf2026);
	outline: none;
}

.tt-leaf-form__field textarea {
	height: 56px;
	resize: vertical;
}

/* CF7 wraps every control in a .wpcf7-form-control-wrap span, which is inline
   by default and collapses the width:100% on the control inside it. */
.tt-leaf-form__field .wpcf7-form-control-wrap {
	display: block;
}

/* ---- Checkboxes / acceptance --------------------------------------------- */
.tt-leaf-form__field--checks .wpcf7-checkbox {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 28px;
}

.tt-leaf-form__field--checks .wpcf7-list-item {
	margin: 0;
}

.tt-leaf-form__field--checks label,
.tt-leaf-form__field--accept label {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	cursor: pointer;
}

.tt-leaf-form__field input[type="checkbox"] {
	width: 17px;
	height: 17px;
	margin: 0;
	accent-color: var(--wp--preset--color--red, #cf2026);
}

.tt-leaf-form__field--accept .wpcf7-list-item {
	margin: 0;
}

/* ---- File upload --------------------------------------------------------- */
.tt-leaf-form__field--file input[type="file"] {
	display: block;
	font-family: var(--wp--preset--font-family--barlow, "Barlow", sans-serif);
	font-size: 16px;
}

/* ---- Submit -------------------------------------------------------------- */
/* Black and full-width, matching the reference. The site's primary button is
   red (design.md) — worth reconciling once this page has a Figma frame. */
.tt-leaf-form__field--submit {
	margin-top: 12px;
}

.tt-leaf-form__field--submit input[type="submit"] {
	display: block;
	width: 100%;
	padding: 12px 24px;
	border: 0;
	border-radius: 0;
	background: #000;
	font-family: var(--wp--preset--font-family--barlow, "Barlow", sans-serif);
	font-weight: 700;
	font-size: 16px;
	color: #fff;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.tt-leaf-form__field--submit input[type="submit"]:hover {
	background: var(--wp--preset--color--red, #cf2026);
}

/* ---- CF7 validation / response messages ---------------------------------- */
.tt-leaf__body .wpcf7-not-valid-tip {
	margin-top: 4px;
	font-size: 14px;
	color: var(--wp--preset--color--red, #cf2026);
}

.tt-leaf__body .wpcf7-response-output {
	grid-column: 1 / -1;
	margin: 24px 0 0;
	padding: 12px 16px;
	border: 1px solid #d5d5d5;
	font-size: 16px;
}

.tt-leaf__body .wpcf7-spinner {
	margin-inline: 12px;
}

/* ---- Mobile (≤767px) ----------------------------------------------------- */
@media (max-width: 767px) {
	.tt-leaf {
		padding: 48px 20px 64px;
	}

	.tt-leaf__title {
		font-size: 36px;
	}

	.tt-leaf__body {
		margin-top: 40px;
	}

	/* Every field goes full width — the two-up rows are too tight at 440. */
	.tt-leaf-form__grid {
		grid-template-columns: 1fr;
	}
}