/**
 * HH Gravity Forms Styler for Bricks: base styles.
 *
 * Everything decorative lives in the Bricks element controls. This file only
 * ships the structural rules those controls rely on, plus the floating label
 * mechanics. All floating label knobs are CSS custom properties so the values
 * set by Bricks controls (scoped to an element ID or a global class) can
 * never lose a specificity fight against the state rules below.
 *
 * Selectors double the root class and route through .gform_wrapper on
 * purpose: Gravity Forms prints its theme CSS late (in the footer) with
 * (0,3,x) selectors like `.gform_wrapper.gravity-theme .gfield_label`, so
 * these rules need (0,4,x) to win without resorting to !important.
 */

/* Footer becomes a flex row so the button alignment control can use justify-content. */
.hh-gf-bricks.hh-gf-bricks .gform_wrapper .gform_footer,
.hh-gf-bricks.hh-gf-bricks .gform_wrapper .gform_page_footer {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

/* Gravity theme bottom-aligns footer inputs; keep them centered in our row. */
.hh-gf-bricks.hh-gf-bricks .gform_wrapper .gform_footer input,
.hh-gf-bricks.hh-gf-bricks .gform_wrapper .gform_page_footer input {
	align-self: center;
}

/* ------------------------------------------------------------------------- *
 * Floating labels
 * ------------------------------------------------------------------------- */

.hh-gf-float.hh-gf-float .gform_wrapper .hh-float-field {
	position: relative;
}

/* Resting state: the label sits over the input, aligned with the typed text. */
.hh-gf-float.hh-gf-float .gform_wrapper .hh-float-field > .gfield_label {
	position: absolute;
	z-index: 2;
	top: var(--hh-float-y, 0.8em);
	left: var(--hh-float-x, 16px);
	margin: 0;
	padding: 0 0.35em;
	line-height: 1.2;
	border-radius: 3px;
	background-color: transparent;
	pointer-events: none;
	white-space: nowrap;
	max-width: calc(100% - (var(--hh-float-x, 16px) * 2));
	overflow: hidden;
	text-overflow: ellipsis;
	transition-property: top, transform, font-size, color, background-color;
	transition-duration: var(--hh-float-speed, 0.25s);
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hide native placeholders until the label has floated out of the way. */
.hh-gf-float.hh-gf-float .gform_wrapper .hh-float-field:not(.hh-float-active):not(:focus-within) ::placeholder {
	opacity: 0;
}

/*
 * Floated state, "on the border" (notch) style: the label straddles the top
 * border with a background that masks the border behind it.
 * :focus-within doubles as a no-JS fallback for the focus half of the state.
 */
.hh-gf-float.hh-gf-float .gform_wrapper .hh-float-field.hh-float-active > .gfield_label,
.hh-gf-float.hh-gf-float .gform_wrapper .hh-float-field:focus-within > .gfield_label {
	top: 0;
	transform: translateY(-50%);
	font-size: var(--hh-float-size, 0.75em);
	background-color: var(--hh-float-bg, #fff);
}

/* Floated state, "inside the field" style: the label tucks into the input's
 * top padding instead of sitting on the border. */
.hh-gf-float--inside.hh-gf-float--inside .gform_wrapper .hh-float-field.hh-float-active > .gfield_label,
.hh-gf-float--inside.hh-gf-float--inside .gform_wrapper .hh-float-field:focus-within > .gfield_label {
	top: var(--hh-float-y-floated, 6px);
	transform: none;
	background-color: transparent;
}

/* Reduced motion: snap instead of glide. */
@media (prefers-reduced-motion: reduce) {
	.hh-gf-float.hh-gf-float .gform_wrapper .hh-float-field > .gfield_label {
		transition-duration: 0s;
	}
}