/**
 * Meridian Sections — Form Panel
 *
 * Figma 18:9827. A headed panel wrapping a Gravity Form.
 *
 * The fields themselves are Gravity Forms' markup, so the second half of this
 * file is a skin over it rather than our own inputs. Which fields exist, which
 * sit half-width, their placeholders and which are required are all set in the
 * Gravity Forms editor — this only makes them look like the comp.
 *
 * Verified against Gravity Forms 2.10.5 and its "Orbital" theme, which is
 * skinned through custom properties rather than overridden selector by selector.
 */

.md-section.md-form {
	padding-block: var(--md-section-pt, 5rem) var(--md-section-pb, 5rem);
	background-color: var(--md-white, #fff);
}

.md-form--ruled {
	border-block-end: var(--md-border-width, 1px) solid
		var(--md-color-rule, #ebebeb);
}

/* --- Panel --------------------------------------------------------------- */
.md-shead + .md-form__panel {
	margin-block-start: 2.5rem; /* 40px */
}

.md-form__panel {
	padding: var(--md-space-xl, 3rem); /* 49px in the comp */
	border: var(--md-border-width, 1px) solid var(--md-color-border, #e0e0e0);
	border-radius: 0.625rem; /* 10px */
	background-color: var(--md-color-surface-tint, #f9fafb);
}

.md-form__notice {
	margin: 0;
	color: var(--md-color-text-muted, rgba(10, 22, 40, 0.7));
	text-align: center;
}

/* --- Gravity Forms skin -------------------------------------------------- */
/*
 * Gravity Forms 2.7+ ships the "Orbital" theme: the markup carries
 * gform-theme--foundation / --framework / --orbital and there is no
 * `gravity-theme` class any more, so a skin written against that never applies.
 * Verified against Gravity Forms 2.10.5 rather than assumed.
 *
 * Orbital is themed through custom properties, which it declares on the wrapper
 * itself — so they are set on the wrapper here, not on the panel around it. A
 * value inherited from an ancestor loses to the element's own declaration.
 */
.md-form__panel .gform_wrapper.gform-theme--framework {
	/* Brand */
	--gf-color-primary: var(--md-blue, #006bb6);
	--gf-color-primary-darker: var(--md-blue-dark, #005893);

	/*
	 * Controls: 47px tall, 10px radius, 17px inset, 14px type. The height comes
	 * from the -md variant, which is what --gf-ctrl-size resolves to.
	 */
	--gf-ctrl-size-md: 2.9375rem;
	--gf-ctrl-radius: 0.625rem;
	--gf-ctrl-padding-x: 1.0625rem;
	/* Height does the vertical work, as Orbital intends. */
	--gf-ctrl-padding-y: 0;
	--gf-ctrl-border-width: var(--md-border-width, 1px);
	--gf-ctrl-border-color-hover: var(--md-color-border, #e0e0e0);
	--gf-ctrl-border-color-focus: var(--md-blue, #006bb6);
	--gf-ctrl-bg-color: var(--md-white, #fff);
	--gf-ctrl-color: var(--md-color-text, #0a1628);
	--gf-ctrl-font-family: var(--md-font-body, "Cabin", sans-serif);
	--gf-ctrl-font-size: 0.875rem;

	/* Placeholders: the comp's grey, at full strength. */
	--gf-ctrl-placeholder-color: var(--md-color-text-subtle, #99a1af);
	--gf-ctrl-placeholder-font-family: var(--md-font-body, "Cabin", sans-serif);
	--gf-ctrl-placeholder-font-size: 0.875rem;
	--gf-ctrl-placeholder-opacity: 1;

	/* Labels: 12px semibold, asterisk in the label's colour as drawn. */
	--gf-ctrl-label-color-req: var(--md-color-text-body, #364153);
	--gf-ctrl-label-font-family-primary: var(--md-font-body, "Cabin", sans-serif);
	--gf-ctrl-label-font-size-primary: 0.75rem;
	--gf-ctrl-label-font-weight-primary: var(--md-weight-semibold, 600);

	/* The message box: 194px at 21/14 leading. */
	--gf-ctrl-textarea-height: 12.125rem;
	--gf-ctrl-textarea-line-height: 1.5;
	--gf-ctrl-textarea-radius: 0.625rem;
	--gf-ctrl-textarea-padding-y: 0.8125rem;

	/*
	 * Orbital draws the select arrow from this property, so it takes the comp's
	 * own exported chevron rather than being switched off and replaced.
	 *
	 * A data URI, not a path: a relative url() inside a custom property resolves
	 * against the stylesheet that *uses* the property — Gravity's — not the one
	 * that declares it. `url(../img/select-chevron.svg)` therefore resolved to
	 * gravityforms/assets/css/img/ and 404'd, leaving the dropdown bare. Encoded
	 * from assets/img/select-chevron.svg; regenerate from there if it changes.
	 */
	--gf-ctrl-select-icon: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M4 6L8 10L12 6' stroke='%2399A1AF' stroke-width='1.16667' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E");
	--gf-ctrl-select-icon-hover: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M4 6L8 10L12 6' stroke='%2399A1AF' stroke-width='1.16667' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E");
	--gf-ctrl-select-icon-focus: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M4 6L8 10L12 6' stroke='%2399A1AF' stroke-width='1.16667' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E");
	--gf-ctrl-select-icon-size: 1rem 1rem;
	/* 12px from the edge, as drawn. Gravity otherwise derives this from the text
	 * inset, which puts it at 17px. */
	--gf-ctrl-select-icon-position: calc(100% - 0.75rem) center;

	/* Errors. The design tokens carry no error colour — worth adding one; until
	 * then a plain accessible red rather than an invented brand value. */
	--gf-color-danger: var(--md-color-error, #b42318);
	--gf-ctrl-border-color-error: var(--md-color-error, #b42318);
}

/*
 * These two, and only these two, Gravity also writes into a per-form <style>
 * block at `#gform_wrapper_{id}[data-form-index="0"].gform-theme` — an ID-level
 * selector no class rule can outrank. An important custom-property declaration
 * does, which is why these two carry it and the thirty above do not.
 */
.md-form__panel .gform_wrapper.gform-theme--framework {
	--gf-ctrl-border-color: var(--md-color-border, #e0e0e0) !important;
	--gf-ctrl-label-color-primary: var(--md-color-text-body, #364153) !important;
}

/*
 * Placeholders, stated rather than left to the property above.
 *
 * Gravity's own rule is `::placeholder:where(:not(…))`, and a pseudo-class may
 * not follow a pseudo-element — so browsers discard that selector outright and
 * the placeholder simply inherits the input's `color`, which is ink. The
 * property was set correctly and had nothing to read it.
 */
.md-form__panel .gform_wrapper input::placeholder,
.md-form__panel .gform_wrapper textarea::placeholder {
	color: var(--md-color-text-subtle, #99a1af);
	font-family: var(--md-font-body, "Cabin", sans-serif);
	font-size: 0.875rem; /* 14px */
	/* Firefox dims placeholders by default. */
	opacity: 1;
}

/*
 * A select showing its placeholder should read like an empty text field, not
 * like an answer. Gravity marks that option `gf_placeholder`, and the
 * empty-value form is covered too for choices added by hand.
 *
 * Only while it is the chosen option — pick a real one and the text goes back to
 * ink, which is what a filled field should look like.
 */
.md-form__panel .gform_wrapper select:has(option.gf_placeholder:checked),
.md-form__panel .gform_wrapper select:has(option[value=""]:checked) {
	color: var(--md-color-text-subtle, #99a1af);
}

/*
 * Gravity prints a '"*" indicates required fields' legend above the form. The
 * comp does not draw it, and it is not load-bearing: required fields carry
 * `aria-required`, which is what assistive tech actually announces.
 *
 * The wrapper goes with it. This widget renders the form with its title and
 * description switched off — the section's own head carries those — so the
 * legend is the only thing Gravity ever puts in .gform_heading, and leaving it
 * would hold open 29px of empty space above the first field.
 */
.md-form__panel .gform_wrapper .gform_heading {
	display: none;
}

/*
 * The comp's 24px rows and 32px columns, set on the grid itself. Gravity's own
 * gap reads from `--gf-form-gap-y/x`, which its stylesheets reference but never
 * define — so the value is stated here instead of aimed at a property that may
 * not exist. Orbital's rules sit inside :where() and weigh almost nothing, so two
 * classes are ample.
 */
.md-form__panel .gform_wrapper.gform-theme .gform_fields {
	row-gap: var(--md-space-md, 1.5rem); /* 24px */
	column-gap: var(--md-space-lg, 2rem); /* 32px */
}

/* Orbital has no property for the label-to-control gap. */
.md-form__panel .gform_wrapper.gform-theme .gfield_label {
	margin-block-end: 0.375rem; /* 6px */
}

/* --- Submit -------------------------------------------------------------- */
/*
 * The submit is the brand button, so it carries the same animation as the header
 * CTA: the disc is a ::before that grows to fill the pill on hover and focus,
 * while the label flips to white and the arrow nudges 2px.
 *
 * That needs a real <button> — an <input> is a replaced element and cannot have
 * pseudo-elements at all. class-form-panel.php swaps Gravity's input for one
 * through its gform_submit_button filter, keeping the id, onclick and data
 * attributes its scripts rely on.
 *
 * Only the sizing is stated here; everything else comes from .md-btn--primary in
 * the theme, so the two buttons cannot drift apart.
 */
.md-form__panel .gform_wrapper .gform_footer {
	margin: var(--md-space-md, 1.5rem) 0 0;
	padding: 0;
}

.md-form__panel .md-form__submit {
	/* 52px disc and control, against the header CTA's 56px. */
	--md-btn-disc: 3.25rem;

	min-height: 3.25rem;
	/* The comp's 24px between disc and label, not the component's 16px. */
	padding-inline: calc(var(--md-btn-disc) + var(--md-space-md, 1.5rem))
		var(--md-space-lg, 2rem);
	font-size: 1.0625rem; /* 17px */
	font-weight: var(--md-weight-semibold, 600);
}

/* --- Stacked ------------------------------------------------------------- */
@media (max-width: 47.9375em) {
	.md-form__panel {
		padding: var(--md-space-md, 1.5rem);
	}
}