/**
 * HubSpot forms, wearing this theme.
 *
 * WHY THIS FILE EXISTS
 * assets/js/hubspot-form.js starts the embed with `css: ''` and
 * `cssRequired: ''`, which between them tell HubSpot to inject neither its
 * theme sheet nor its structural one. That leaves plain, unstyled form markup
 * in the page - and it is plain IN THE PAGE, not in an iframe, which is the
 * only reason any of this is possible. Everything the form looks like is
 * therefore decided here: layout, spacing, focus, errors, the success
 * message. Nothing falls back to a default, because there is no default left.
 *
 * One small sheet is appended regardless and cannot be turned off: the
 * "Created with HubSpot" link and a rule hiding the offscreen captcha target.
 * It touches nothing else.
 *
 * The earlier note in sections.css said the way to theme these fields was
 * HubSpot's own form editor. That was the wrong call. The editor sets a
 * handful of colours and sizes against a light-background assumption - the
 * label colour it holds for this form is a near-black brown, which on this
 * site is dark text on a dark panel - and it cannot reach the font stack, the
 * notch on the button, the focus ring or the error styling. Turning its
 * stylesheet off and owning the result is both simpler and more faithful.
 *
 * WHAT THIS IS MATCHED TO
 * The theme's own controls, in components.css: the newsletter field and its
 * button. A visitor who meets the footer signup and then the demo form should
 * not be able to tell that one of them is somebody else's software.
 *
 * SELECTOR NOTES
 * HubSpot's class names are the contract here, and they are not ours. The two
 * hooks we do control - .modularis-hs-form on the form and
 * .modularis-hs-submit on the button - come from the embed options, so the
 * rules below are anchored on those wherever it matters. Everything scoped
 * under .modularis-hs-form so nothing here can reach the theme's own forms.
 */

.modularis-hs-form {
	display: grid;
	gap: 18px;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--text);
}

/* ------------------------------------------------------------------ layout */

/*
 * HubSpot groups fields into fieldsets, one per row, carrying form-columns-1
 * or form-columns-2 to say how many are in it. The fields are NOT children of
 * the form, so the row rules belong here and not on the form itself.
 *
 * Which fields share a row is marketing's decision, made in HubSpot's form
 * editor - on the demo form it is first/last and then company/phone - and
 * honouring the class means that decision keeps working without a deploy.
 *
 * The reset on the fieldset is doing real work: the browser's own fieldset
 * carries a border, padding and margin, and HubSpot's structural sheet (now
 * switched off) capped it at 500px.
 */
.modularis-hs-form fieldset {
	display: grid;
	gap: 18px;
	max-inline-size: none;
	margin: 0;
	padding: 0;
	border: 0;
}

@media (min-width: 520px) {
	.modularis-hs-form fieldset.form-columns-2 {
		grid-template-columns: 1fr 1fr;
	}
}

/*
 * Some of these forms carry an empty group - a blank module left in the
 * editor. Without this it is an 18px hole above the first field.
 */
.modularis-hs-form fieldset:empty {
	display: none;
}

/* ------------------------------------------------------------------ fields */

.modularis-hs-form .hs-form-field {
	display: grid;
	gap: 7px;
	min-inline-size: 0;
	inline-size: auto;
	float: none;
}

/* The wrapper HubSpot puts around every control. */
.modularis-hs-form .input {
	margin: 0;
	min-inline-size: 0;
}

.modularis-hs-form .hs-form-field > label {
	color: var(--muted);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 500;
	letter-spacing: var(--wp--custom--tracking--label);
	text-transform: uppercase;
}

/*
 * The asterisk. HubSpot marks every required field with one, and on this form
 * every field is required - six asterisks saying the same thing. Toned down to
 * the point of a hint rather than removed, because "required" is still true.
 */
.modularis-hs-form .hs-form-required {
	margin-inline-start: 3px;
	color: var(--primary);
}

/* Help text under a label, where a field has any. */
.modularis-hs-form .hs-field-desc {
	margin: 0;
	padding: 0;
	border: 0;
	color: var(--faint);
	font-size: var(--wp--preset--font-size--xs);
}

/*
 * The controls, matched to .newsletter-form__input in components.css. No
 * radius and no clip-path: the notch is the button's job on this site, and
 * clipping an input would cut the focus ring off its own corner.
 */
.modularis-hs-form .hs-input {
	inline-size: 100%;
	max-inline-size: 100%;
	min-inline-size: 0;
	padding: 12px 14px;
	background: var(--surface);
	border: 1px solid var(--border-soft);
	border-radius: 0;
	color: var(--text);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.4;
	transition: border-color var(--wp--custom--effect--dur-base) ease;
}

.modularis-hs-form .hs-input::placeholder {
	color: var(--faint);
}

.modularis-hs-form .hs-input:hover {
	border-color: var(--border);
}

.modularis-hs-form .hs-input:focus {
	border-color: var(--primary);
}

/*
 * The select. appearance:none because the native control paints itself in the
 * operating system's colours - a white dropdown in a black panel - and the
 * arrow is drawn back on as a background so the field still reads as a menu.
 *
 * The arrow is a gradient rather than an SVG: audit-colors forbids literal
 * colours anywhere in this directory, data-URI SVGs included, and currentColor
 * cannot be used inside one. Two 1px-ish wedges make the same chevron.
 */
.modularis-hs-form select.hs-input {
	appearance: none;
	padding-inline-end: 38px;
	background-image:
		linear-gradient(45deg, transparent 50%, currentColor 50%),
		linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position:
		calc(100% - 19px) calc(50% + 1px),
		calc(100% - 14px) calc(50% + 1px);
	background-size:
		5px 5px,
		5px 5px;
	background-repeat: no-repeat;
	cursor: pointer;
}

/*
 * The open menu is the operating system's, not ours - the only part of a
 * <select> a page cannot style. Setting both colours here at least stops it
 * inheriting a transparent background on the browsers that do honour it.
 */
.modularis-hs-form select.hs-input option {
	background: var(--surface);
	color: var(--text);
}

.modularis-hs-form textarea.hs-input {
	min-block-size: 130px;
	resize: vertical;
}

/* Checkboxes and radios keep the browser's control, tinted. */
.modularis-hs-form .hs-input[type="checkbox"],
.modularis-hs-form .hs-input[type="radio"] {
	inline-size: auto;
	min-inline-size: 0;
	margin-inline-end: 8px;
	padding: 0;
	accent-color: var(--primary);
}

.modularis-hs-form .inputs-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.modularis-hs-form .hs-form-booleancheckbox-display,
.modularis-hs-form .hs-form-checkbox-display,
.modularis-hs-form .hs-form-radio-display {
	display: flex;
	align-items: flex-start;
	gap: 2px;
	color: var(--muted);
	font-size: var(--wp--preset--font-size--xs);
	text-transform: none;
	letter-spacing: normal;
}

/* ------------------------------------------------------------------ legal */

.modularis-hs-form .legal-consent-container,
.modularis-hs-form .hs-richtext {
	color: var(--faint);
	font-size: var(--wp--preset--font-size--xs);
	line-height: var(--wp--custom--leading--body);
}

.modularis-hs-form .hs-richtext p {
	margin-block: 0 8px;
}

.modularis-hs-form a {
	color: var(--primary);
}

/* ----------------------------------------------------------------- errors */

/*
 * HubSpot appends the error list inside the field it belongs to, and rolls the
 * whole set up again above the button. The rollup is hidden: on a form this
 * short it repeats what is already sitting under each field in red.
 */
.modularis-hs-form .hs-error-msgs {
	margin: 0;
	padding: 0;
	list-style: none;
}

.modularis-hs-form .hs-error-msg,
.modularis-hs-form .hs-error-msgs label {
	color: var(--danger-bright);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
}

.modularis-hs-form .hs_error_rollup {
	display: none;
}

/* The class the embed is told to put on a field that failed validation. */
.modularis-hs-form .hs-input.is-invalid,
.modularis-hs-form .hs-input.error {
	border-color: var(--danger-bright);
}

/* ----------------------------------------------------------------- submit */

.modularis-hs-form .hs-submit {
	display: grid;
	gap: 14px;
}

.modularis-hs-form .actions {
	margin: 0;
	padding: 0;
}

/*
 * The theme's button, from .newsletter-form__submit. An <input type="submit">
 * cannot hold the arrow span the block buttons use, so the notch carries the
 * house style on its own.
 */
.modularis-hs-form .modularis-hs-submit,
.modularis-hs-form input[type="submit"] {
	--notch: var(--wp--custom--notch--xs);
	inline-size: auto;
	padding: 13px 26px;
	border: 0;
	border-radius: 0;
	background: var(--primary);
	color: var(--bg);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	letter-spacing: var(--wp--custom--tracking--tight);
	cursor: pointer;
	clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%);
	transition:
		transform var(--wp--custom--effect--dur-fast) ease,
		box-shadow var(--wp--custom--effect--dur-base) ease;
}

.modularis-hs-form .modularis-hs-submit:hover:not(:disabled),
.modularis-hs-form input[type="submit"]:hover:not(:disabled) {
	transform: translateY(-2px);
	box-shadow: var(--wp--preset--shadow--glow-primary);
}

.modularis-hs-form .modularis-hs-submit:disabled,
.modularis-hs-form input[type="submit"]:disabled {
	opacity: 0.55;
	cursor: default;
}

/*
 * reCAPTCHA. This form has the v2 checkbox turned on, and the widget is a
 * Google iframe - the one thing on the page that genuinely cannot be restyled
 * from here, because its document is not ours. Its light card is left alone
 * and only given room; the alternative is a dark rectangle with a white box
 * floating in it, which looks more broken than the box does.
 */
.modularis-hs-form .hs-recaptcha {
	margin-block-start: 4px;
}

.modularis-hs-form .grecaptcha-badge {
	box-shadow: none;
}

/* ---------------------------------------------------------------- success */

/*
 * What replaces the form after a successful submit. Worth styling properly:
 * this one carries the link to A.J.'s calendar, so it is the last step of the
 * thing the page exists for, not a footnote.
 */
.hs-form-mount .submitted-message,
.hs-form-mount .hs-form__virality-link {
	color: var(--text);
	font-size: var(--wp--preset--font-size--md);
	line-height: var(--wp--custom--leading--body);
}

.hs-form-mount .submitted-message p {
	margin-block: 0 12px;
}

.hs-form-mount .submitted-message p:last-child {
	margin-block-end: 0;
}

.hs-form-mount .submitted-message a {
	color: var(--primary);
	font-weight: 600;
}

/*
 * The international phone field, if it is ever switched on: a country select
 * beside the number. HubSpot's structural sheet laid this out with floats and
 * !important widths, and that sheet is off, so it is described here instead.
 * No form on this site uses it today - the demo form's phone field is a plain
 * input - but it is one checkbox away in the form editor, and unstyled it
 * would stack a country dropdown on top of a number.
 */
.modularis-hs-form .hs-fieldtype-intl-phone.hs-input {
	display: flex;
	gap: 8px;
	padding: 0;
	background: none;
	border: 0;
}

.modularis-hs-form .hs-fieldtype-intl-phone.hs-input select {
	flex: 0 0 34%;
}

.modularis-hs-form .hs-fieldtype-intl-phone.hs-input input {
	flex: 1 1 auto;
}