/**
 * Lawyer Rumble 2027 RSVP form — brand styles
 *
 * Scoped to `form.lr-rsvp-form` so nothing here can leak into other Gravity
 * Forms on the site.
 *
 * Gravity Forms ships three markup generations and we cannot know which one is
 * active on the site, so this file covers all of them:
 *   1. Theme framework / "orbital" (GF 2.7+) — driven by CSS custom properties.
 *   2. gravity-theme (GF 2.5+)              — a native 12-column CSS grid.
 *   3. legacy (<= GF 2.4)                   — <ul>/<li> markup.
 *
 * The custom properties below are a clean hand-off to orbital when it is
 * present. The explicit rules that follow are the guarantee, and they carry
 * !important because they have to win against a plugin theme we do not control.
 */

/* -------------------------------------------------------------------------
   1. Tokens
   ---------------------------------------------------------------------- */

form.lr-rsvp-form {
	/* Lawyer Rumble brand tokens */
	--lr-navy: #1e3a5f;
	--lr-orange: #f26120;
	--lr-orange-dark: #d9551a;
	--lr-orange-darker: #c24b10;
	--lr-card: #1e2535;
	--lr-input: #252d3f;
	--lr-border: #2d3748;
	--lr-white: #ffffff;
	--lr-text-secondary: #94a3b8;
	--lr-text-muted: #64748b;
	/* Brand's #64748b only reaches 2.89:1 on the input background, under the 3:1
	   WCAG floor for placeholder text, so placeholders use a lifted variant. */
	--lr-placeholder: #7a8799;
	--lr-font: "Montserrat", "Helvetica Neue", Arial, sans-serif;

	/* Hand-off to the GF 2.7+ theme framework. Harmless when absent. */
	--gf-ctrl-bg-color: var(--lr-input);
	--gf-ctrl-border-color: var(--lr-border);
	--gf-ctrl-border-color-focus: var(--lr-orange);
	--gf-ctrl-border-color-hover: var(--lr-orange);
	--gf-ctrl-color: var(--lr-white);
	--gf-ctrl-placeholder-color: var(--lr-placeholder);
	--gf-ctrl-label-color-primary: var(--lr-white);
	--gf-ctrl-label-color-secondary: var(--lr-text-secondary);
	--gf-ctrl-desc-color: var(--lr-text-secondary);
	--gf-ctrl-btn-bg-color-primary: var(--lr-orange);
	--gf-ctrl-btn-bg-color-hover-primary: var(--lr-orange-dark);
	--gf-ctrl-btn-bg-color-active-primary: var(--lr-orange-darker);
	--gf-ctrl-btn-color-primary: var(--lr-white);
	--gf-ctrl-btn-border-color-primary: var(--lr-orange);
	--gf-local-color-primary: var(--lr-orange);
}

/* -------------------------------------------------------------------------
   2. The card
   ---------------------------------------------------------------------- */

form.lr-rsvp-form {
	box-sizing: border-box;
	max-width: 620px;
	margin: 0 auto;
	padding: 36px 34px 32px;
	background: var(--lr-card) !important;
	border: 1px solid var(--lr-border);
	border-radius: 14px;
	font-family: var(--lr-font) !important;
	color: var(--lr-white);
	box-shadow: 0 18px 44px rgba(0, 0, 0, 0.32);
	text-align: left;
}

form.lr-rsvp-form *,
form.lr-rsvp-form *::before,
form.lr-rsvp-form *::after {
	box-sizing: border-box;
}

/* Strip the wrapper's own chrome so the card is the only visible container. */
.gform_wrapper:has(form.lr-rsvp-form) {
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	max-width: none !important;
}

/* -------------------------------------------------------------------------
   3. Headline block
   ---------------------------------------------------------------------- */

form.lr-rsvp-form .lr-rsvp-title {
	margin: 0 0 8px !important;
	padding: 0;
	font-family: var(--lr-font) !important;
	font-size: clamp(23px, 3.4vw, 31px) !important;
	font-weight: 900 !important;
	line-height: 1.12 !important;
	letter-spacing: -0.02em !important;
	text-transform: uppercase !important;
	color: var(--lr-white) !important;
}

form.lr-rsvp-form .lr-rsvp-subtitle {
	margin: 0 0 4px !important;
	padding: 0;
	font-family: var(--lr-font) !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	line-height: 1.5 !important;
	color: var(--lr-text-secondary) !important;
}

/* Kill the default GF margin on the HTML field so spacing stays ours. */
form.lr-rsvp-form .lr-rsvp-header {
	margin-bottom: 4px !important;
	padding: 0 !important;
}

/* -------------------------------------------------------------------------
   4. Layout — ride GF's native 12-column grid
   ---------------------------------------------------------------------- */

form.lr-rsvp-form .gform_fields {
	display: grid !important;
	grid-template-columns: repeat(12, 1fr) !important;
	column-gap: 16px !important;
	row-gap: 18px !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

form.lr-rsvp-form .gfield {
	grid-column: 1 / -1;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	background: none !important;
	border: 0 !important;
}

form.lr-rsvp-form .gfield.lr-col-half {
	grid-column: span 6;
}

form.lr-rsvp-form .gfield.lr-col-full {
	grid-column: 1 / -1;
}

/* Legacy (<= GF 2.4) has no grid; the media query below handles the stack. */
form.lr-rsvp-form .gform_fields > li.gfield::before,
form.lr-rsvp-form .gform_fields > li.gfield::after {
	content: none !important;
}

/* -------------------------------------------------------------------------
   5. Labels
   ---------------------------------------------------------------------- */

form.lr-rsvp-form .gfield_label,
form.lr-rsvp-form legend.gfield_label {
	display: block !important;
	margin: 0 0 7px !important;
	padding: 0 !important;
	font-family: var(--lr-font) !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	color: var(--lr-white) !important;
}

/* The required asterisk in brand orange rather than GF's default red. */
form.lr-rsvp-form .gfield_required,
form.lr-rsvp-form .gfield_required_asterisk,
form.lr-rsvp-form .gfield_required_text {
	color: var(--lr-orange) !important;
	font-weight: 700 !important;
	margin-left: 3px;
}

form.lr-rsvp-form .gfield_description,
form.lr-rsvp-form .gform_fileupload_rules {
	padding: 6px 0 0 !important;
	font-family: var(--lr-font) !important;
	font-size: 12px !important;
	font-weight: 400 !important;
	line-height: 1.5 !important;
	color: var(--lr-text-secondary) !important;
}

/* -------------------------------------------------------------------------
   6. Inputs
   ---------------------------------------------------------------------- */

form.lr-rsvp-form input[type="text"],
form.lr-rsvp-form input[type="email"],
form.lr-rsvp-form input[type="tel"],
form.lr-rsvp-form input[type="url"],
form.lr-rsvp-form input[type="number"],
form.lr-rsvp-form textarea,
form.lr-rsvp-form select {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	min-height: 50px !important;
	margin: 0 !important;
	padding: 13px 15px !important;
	background-color: var(--lr-input) !important;
	background-image: none !important;
	border: 1px solid var(--lr-border) !important;
	border-radius: 8px !important;
	font-family: var(--lr-font) !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	line-height: 1.4 !important;
	color: var(--lr-white) !important;
	box-shadow: none !important;
	outline: none !important;
	transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
	-webkit-appearance: none;
	appearance: none;
}

/* Placeholders — muted, never invisible. Firefox dims them to 0.54 opacity by
   default, which would undo the contrast fix, hence the explicit opacity: 1. */
form.lr-rsvp-form input::placeholder,
form.lr-rsvp-form textarea::placeholder {
	color: var(--lr-placeholder) !important;
	opacity: 1 !important;
	font-weight: 400 !important;
}

form.lr-rsvp-form input::-webkit-input-placeholder,
form.lr-rsvp-form textarea::-webkit-input-placeholder {
	color: var(--lr-placeholder) !important;
	opacity: 1 !important;
}

form.lr-rsvp-form input::-moz-placeholder,
form.lr-rsvp-form textarea::-moz-placeholder {
	color: var(--lr-placeholder) !important;
	opacity: 1 !important;
}

form.lr-rsvp-form input:hover,
form.lr-rsvp-form textarea:hover,
form.lr-rsvp-form select:hover {
	border-color: #3d4a63 !important;
}

form.lr-rsvp-form input:focus,
form.lr-rsvp-form textarea:focus,
form.lr-rsvp-form select:focus {
	background-color: #2a3346 !important;
	border-color: var(--lr-orange) !important;
	box-shadow: 0 0 0 3px rgba(242, 97, 32, 0.22) !important;
	outline: none !important;
}

/* Chrome's autofill repaints the input yellow. This is the only reliable
   way to keep it on-brand: a very long inset shadow fakes the background. */
form.lr-rsvp-form input:-webkit-autofill,
form.lr-rsvp-form input:-webkit-autofill:hover,
form.lr-rsvp-form input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--lr-white) !important;
	-webkit-box-shadow: 0 0 0 1000px var(--lr-input) inset !important;
	box-shadow: 0 0 0 1000px var(--lr-input) inset !important;
	caret-color: var(--lr-white);
	transition: background-color 9999s ease-in-out 0s;
}

/* GF wraps inputs in .ginput_container; it must not add its own spacing. */
form.lr-rsvp-form .ginput_container {
	margin: 0 !important;
	padding: 0 !important;
}

/* -------------------------------------------------------------------------
   7. Consent checkbox
   ---------------------------------------------------------------------- */

/* The consent field's label is redundant next to the checkbox text. */
form.lr-rsvp-form .lr-rsvp-consent > .gfield_label,
form.lr-rsvp-form .lr-rsvp-consent > legend.gfield_label {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

form.lr-rsvp-form .lr-rsvp-consent .ginput_container_consent {
	display: flex !important;
	align-items: flex-start !important;
	gap: 11px !important;
	padding: 2px 0 0 !important;
}

form.lr-rsvp-form .lr-rsvp-consent input[type="checkbox"] {
	flex: 0 0 auto !important;
	width: 19px !important;
	height: 19px !important;
	min-height: 19px !important;
	margin: 1px 0 0 !important;
	padding: 0 !important;
	background-color: var(--lr-input) !important;
	border: 1px solid #45526b !important;
	border-radius: 4px !important;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	position: relative;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

form.lr-rsvp-form .lr-rsvp-consent input[type="checkbox"]:hover {
	border-color: var(--lr-orange) !important;
}

form.lr-rsvp-form .lr-rsvp-consent input[type="checkbox"]:checked {
	background-color: var(--lr-orange) !important;
	border-color: var(--lr-orange) !important;
}

/* Checkmark drawn with a rotated border — no icon font, no SVG request. */
form.lr-rsvp-form .lr-rsvp-consent input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 1px;
	width: 6px;
	height: 11px;
	border: solid var(--lr-white);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

form.lr-rsvp-form .lr-rsvp-consent input[type="checkbox"]:focus-visible {
	box-shadow: 0 0 0 3px rgba(242, 97, 32, 0.32) !important;
	outline: none !important;
}

form.lr-rsvp-form .lr-rsvp-consent label,
form.lr-rsvp-form .lr-rsvp-consent .gfield_consent_label {
	margin: 0 !important;
	padding: 0 !important;
	font-family: var(--lr-font) !important;
	font-size: 12.5px !important;
	font-weight: 400 !important;
	line-height: 1.55 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: var(--lr-text-secondary) !important;
	cursor: pointer;
}

/* -------------------------------------------------------------------------
   8. Submit button
   ---------------------------------------------------------------------- */

form.lr-rsvp-form .gform_footer,
form.lr-rsvp-form .gform-footer {
	margin: 22px 0 0 !important;
	padding: 0 !important;
	display: block !important;
}

form.lr-rsvp-form .gform_button,
form.lr-rsvp-form input[type="submit"],
form.lr-rsvp-form button[type="submit"] {
	display: block !important;
	width: 100% !important;
	min-height: 54px !important;
	margin: 0 !important;
	padding: 16px 26px !important;
	background: var(--lr-orange) !important;
	background-image: none !important;
	border: 0 !important;
	border-radius: 8px !important;
	font-family: var(--lr-font) !important;
	/* 19px at weight 800 counts as WCAG "large text", where the required
	   contrast drops to 3:1. White on brand #f26120 is 3.23:1, so the CTA keeps
	   the brand orange and still passes AA. Do not shrink this below 18.66px. */
	font-size: 19px !important;
	font-weight: 800 !important;
	line-height: 1.2 !important;
	letter-spacing: 0.06em !important;
	text-transform: uppercase !important;
	text-shadow: none !important;
	color: var(--lr-white) !important;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(242, 97, 32, 0.26) !important;
	transition: background-color 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
	-webkit-appearance: none;
	appearance: none;
}

form.lr-rsvp-form .gform_button:hover,
form.lr-rsvp-form input[type="submit"]:hover,
form.lr-rsvp-form button[type="submit"]:hover {
	background: var(--lr-orange-dark) !important;
	box-shadow: 0 9px 24px rgba(242, 97, 32, 0.34) !important;
	transform: translateY(-1px);
}

form.lr-rsvp-form .gform_button:active,
form.lr-rsvp-form input[type="submit"]:active,
form.lr-rsvp-form button[type="submit"]:active {
	background: var(--lr-orange-darker) !important;
	transform: translateY(0);
	box-shadow: 0 4px 12px rgba(242, 97, 32, 0.24) !important;
}

form.lr-rsvp-form .gform_button:focus-visible,
form.lr-rsvp-form input[type="submit"]:focus-visible {
	outline: 3px solid rgba(242, 97, 32, 0.55) !important;
	outline-offset: 2px !important;
}

form.lr-rsvp-form .gform_button[disabled] {
	opacity: 0.65 !important;
	cursor: not-allowed;
	transform: none !important;
}

/* AJAX spinner */
form.lr-rsvp-form .gform_ajax_spinner {
	display: inline-block;
	margin-left: 10px;
	vertical-align: middle;
}

/* -------------------------------------------------------------------------
   9. Validation — legibility is the whole point here
   ---------------------------------------------------------------------- */

/* Summary banner at the top of the form. */
form.lr-rsvp-form .gform_validation_errors,
form.lr-rsvp-form #gform_validation_errors {
	margin: 0 0 20px !important;
	padding: 13px 16px !important;
	background: rgba(242, 97, 32, 0.12) !important;
	border: 1px solid var(--lr-orange) !important;
	border-radius: 8px !important;
	box-shadow: none !important;
}

form.lr-rsvp-form .gform_validation_errors > h2,
form.lr-rsvp-form .gform_validation_errors .gform_submission_error {
	margin: 0 !important;
	padding: 0 !important;
	font-family: var(--lr-font) !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	line-height: 1.45 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: var(--lr-orange) !important;
}

form.lr-rsvp-form .gform_validation_errors h2::before,
form.lr-rsvp-form .gform_validation_errors svg {
	display: none !important;
}

/* Per-field message. */
form.lr-rsvp-form .gfield_validation_message,
form.lr-rsvp-form .validation_message,
form.lr-rsvp-form .gfield_description.validation_message {
	margin: 7px 0 0 !important;
	padding: 8px 11px !important;
	background: rgba(242, 97, 32, 0.1) !important;
	border: 0 !important;
	border-left: 3px solid var(--lr-orange) !important;
	border-radius: 0 5px 5px 0 !important;
	font-family: var(--lr-font) !important;
	font-size: 12.5px !important;
	font-weight: 600 !important;
	line-height: 1.45 !important;
	color: #ff8a52 !important;
}

form.lr-rsvp-form .gfield_error {
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
}

form.lr-rsvp-form .gfield_error .gfield_label {
	color: var(--lr-white) !important;
}

form.lr-rsvp-form .gfield_error input,
form.lr-rsvp-form .gfield_error textarea,
form.lr-rsvp-form .gfield_error select,
form.lr-rsvp-form input[aria-invalid="true"],
form.lr-rsvp-form textarea[aria-invalid="true"] {
	border-color: var(--lr-orange) !important;
	background-color: #2b2530 !important;
}

/* Honeypot must stay invisible without breaking the grid. */
form.lr-rsvp-form .gform_validation_container,
form.lr-rsvp-form .gfield--type-honeypot {
	display: none !important;
	position: absolute !important;
	left: -9000px !important;
}

/* -------------------------------------------------------------------------
   10. Confirmation message
   ---------------------------------------------------------------------- */

.gform_confirmation_wrapper .lr-rsvp-success,
.lr-rsvp-success {
	box-sizing: border-box;
	max-width: 620px;
	margin: 0 auto;
	padding: 40px 34px;
	background: var(--lr-card, #1e2535);
	border: 1px solid #2d3748;
	border-top: 3px solid #f26120;
	border-radius: 14px;
	font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
	text-align: center;
	box-shadow: 0 18px 44px rgba(0, 0, 0, 0.32);
}

.lr-rsvp-success h3 {
	margin: 0 0 10px !important;
	font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif !important;
	font-size: 25px !important;
	font-weight: 900 !important;
	line-height: 1.15 !important;
	letter-spacing: -0.02em !important;
	text-transform: uppercase !important;
	color: #ffffff !important;
}

.lr-rsvp-success p {
	margin: 0 !important;
	font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	line-height: 1.55 !important;
	color: #94a3b8 !important;
}

/* -------------------------------------------------------------------------
   11. Mobile
   ---------------------------------------------------------------------- */

@media only screen and (max-width: 640px) {

	form.lr-rsvp-form {
		padding: 26px 20px 24px;
		border-radius: 12px;
	}

	form.lr-rsvp-form .gform_fields {
		grid-template-columns: 1fr !important;
		row-gap: 15px !important;
	}

	/* Everything stacks — no half-width fields on a phone. */
	form.lr-rsvp-form .gfield,
	form.lr-rsvp-form .gfield.lr-col-half,
	form.lr-rsvp-form .gfield.lr-col-full {
		grid-column: 1 / -1 !important;
	}

	form.lr-rsvp-form .lr-rsvp-title {
		font-size: 22px !important;
	}

	form.lr-rsvp-form .lr-rsvp-subtitle {
		font-size: 14px !important;
	}

	/* 16px minimum stops iOS Safari from zooming on focus. */
	form.lr-rsvp-form input[type="text"],
	form.lr-rsvp-form input[type="email"],
	form.lr-rsvp-form input[type="tel"],
	form.lr-rsvp-form textarea,
	form.lr-rsvp-form select {
		font-size: 16px !important;
		min-height: 48px !important;
	}

	/* Stays >= 18.66px so the 3:1 large-text allowance still applies on phones. */
	form.lr-rsvp-form .gform_button,
	form.lr-rsvp-form input[type="submit"] {
		font-size: 19px !important;
		min-height: 52px !important;
	}

	.lr-rsvp-success {
		padding: 30px 20px;
	}

	.lr-rsvp-success h3 {
		font-size: 21px !important;
	}
}

/* -------------------------------------------------------------------------
   12. Accessibility
   ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	form.lr-rsvp-form,
	form.lr-rsvp-form * {
		transition: none !important;
		animation: none !important;
	}

	form.lr-rsvp-form .gform_button:hover {
		transform: none !important;
	}
}

@media (prefers-contrast: more) {
	form.lr-rsvp-form input,
	form.lr-rsvp-form textarea,
	form.lr-rsvp-form select {
		border-color: #64748b !important;
	}

	form.lr-rsvp-form .lr-rsvp-consent label {
		color: #cbd5e1 !important;
	}
}