/*
 * Gravity Forms styling for the Trime 2026 theme.
 *
 * GF emits a per-form rule (#gform_wrapper_X[data-form-index="0"].gform-theme)
 * that hardcodes ~50 CSS custom properties from each form's saved Style
 * Settings. That selector's specificity (1,2,0) is unreachable from a
 * theme-level selector, so the variable overrides below use !important.
 *
 * This aligns with the theme directive that editors should not be able to
 * override form/input/label/description/button styles per insertion — the
 * theme is the single source of truth, full stop.
 *
 * The submit button is rebuilt as <button class="wp-block-button__link"> in
 * PHP (gform_submit_button filter) so the core/button styles and wave-hover
 * script apply automatically — no GF-specific button CSS lives here.
 */

.gform_wrapper.gform-theme--framework {
	/* Inputs --------------------------------------------------------- */
	--gf-ctrl-radius: 12px !important;
	--gf-ctrl-textarea-radius: 12px !important;
	--gf-ctrl-multiselect-radius: 12px !important;
	--gf-ctrl-padding-y: 14px !important;
	--gf-ctrl-padding-x: 18px !important;
	--gf-ctrl-font-size: 1.125rem !important;
	--gf-ctrl-line-height: 1.4 !important;
	--gf-ctrl-size: auto !important;
	--gf-ctrl-bg-color: var(--wp--preset--color--base) !important;
	--gf-ctrl-color: var(--wp--preset--color--contrast) !important;
	--gf-ctrl-border-color: color-mix(in srgb, var(--wp--preset--color--contrast) 15%, transparent) !important;
	--gf-ctrl-border-width: 1px !important;
	--gf-ctrl-shadow: none !important;

	/* Focus ---------------------------------------------------------- */
	--gf-ctrl-border-color-focus: var(--wp--preset--color--contrast) !important;
	--gf-ctrl-border-color-hover: color-mix(in srgb, var(--wp--preset--color--contrast) 28%, transparent) !important;

	/* Labels & descriptions ----------------------------------------- */
	--gf-ctrl-label-color-primary: var(--wp--preset--color--contrast) !important;
	--gf-ctrl-label-color-secondary: color-mix(in srgb, var(--wp--preset--color--contrast) 60%, transparent) !important;
	--gf-ctrl-desc-color: color-mix(in srgb, var(--wp--preset--color--contrast) 70%, transparent) !important;
	--gf-ctrl-required-color: var(--wp--preset--color--accent-3) !important;

	/* Checkboxes & radios — GF leaves them as native UI with appearance:
	 * auto and an `accent-color: var(--gf-ctrl-accent-color)`. The
	 * browser draws the check/dot using that color, so overriding that
	 * one variable is the only thing that actually affects the visual. */
	--gf-ctrl-accent-color: var(--wp--preset--color--accent-1) !important;
	--gf-ctrl-checkbox-check-bg-color-selected: var(--wp--preset--color--accent-1) !important;
	--gf-ctrl-checkbox-check-border-color-selected: var(--wp--preset--color--accent-1) !important;
	--gf-ctrl-checkbox-check-color-selected: var(--wp--preset--color--contrast) !important;
	--gf-ctrl-checkbox-check-radius: 6px !important;
	--gf-ctrl-radio-check-bg-color-selected: var(--wp--preset--color--accent-1) !important;
	--gf-ctrl-radio-check-border-color-selected: var(--wp--preset--color--accent-1) !important;
	--gf-ctrl-radio-check-color-selected: var(--wp--preset--color--contrast) !important;

	/* Brand accent — most secondary uses (focus glow, choice highlights,
	 * progress) read through --gf-color-primary, so aligning it with
	 * accent-1 propagates the green throughout. */
	--gf-color-primary: var(--wp--preset--color--accent-1) !important;
	--gf-color-primary-darker: color-mix(in srgb, var(--wp--preset--color--accent-1) 80%, var(--wp--preset--color--contrast)) !important;
	--gf-color-primary-contrast: var(--wp--preset--color--contrast) !important;
	--gf-color-out-ctrl-light: color-mix(in srgb, var(--wp--preset--color--contrast) 10%, transparent) !important;
	--gf-color-out-ctrl-light-darker: color-mix(in srgb, var(--wp--preset--color--contrast) 35%, transparent) !important;
	--gf-color-out-ctrl-dark: color-mix(in srgb, var(--wp--preset--color--contrast) 70%, transparent) !important;
}

/* Heading & layout rhythm ------------------------------------------- */

.gform_wrapper .gform_heading {
	margin-bottom: 32px;
}

/* Required asterisk — accent-3 (dark green) instead of GF's red danger
 * color. Real validation errors keep --gf-color-danger so they still
 * read as alarming. Two classes on the wrapper plus the GF descendants
 * to win against the framework rule at (0,3,0). */
.gform_wrapper.gform-theme--framework .gfield_required,
.gform_wrapper.gform-theme--framework .gform_required_legend .gfield_required {
	color: var(--wp--preset--color--accent-3);
}

.gform_wrapper .gform_fields {
	row-gap: 24px;
}

.gform_wrapper .gfield_label {
	font-weight: 500;
}

/* Section heading underline — soften from the form's default purple */
.gform_wrapper .gsection {
	border-bottom-color: color-mix(in srgb, var(--wp--preset--color--contrast) 12%, transparent);
	padding-bottom: 12px;
	margin-bottom: 8px;
}

/* Inputs — typography / focus glow ---------------------------------- */

.gform_wrapper :is(input, select, textarea) {
	line-height: 1.4;
	font-family: inherit;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.gform_wrapper textarea {
	min-height: 140px;
	resize: vertical;
}

.gform_wrapper :is(input, textarea)::placeholder {
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 45%, transparent);
	opacity: 1;
}

/* Soft accent-1 glow on focus — not exposed via a GF variable. */
.gform_wrapper :is(input, select, textarea):focus,
.gform_wrapper :is(input, select, textarea):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-1);
	outline-offset: 0;
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--wp--preset--color--accent-1) 25%, transparent);
}

/* Select chevron — brand-aware replacement for default arrow */
.gform_wrapper select {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%23141c16' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
	background-repeat: no-repeat !important;
	background-position: right 18px center !important;
	padding-right: 44px !important;
}

/* File upload ------------------------------------------------------ */

/* Native <input type="file"> can be styled via ::file-selector-button.
 * Theme the host element like our other inputs (white pill) and turn
 * the browser's default "Choose file" button into a small contrast pill
 * that matches the theme's button style. The "No file selected" label
 * is browser-localized text we don't control, but it now sits inside a
 * properly-themed container instead of looking like a foreign control. */
.gform_wrapper.gform-theme--framework input[type="file"] {
	display: flex !important;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: 52px;
	background-color: var(--wp--preset--color--base) !important;
	color: var(--wp--preset--color--contrast) !important;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 15%, transparent) !important;
	border-radius: 12px !important;
	padding: 8px 18px 8px 8px !important;
	font-family: inherit !important;
	font-size: 1.125rem !important;
	line-height: 1.4 !important;
	cursor: pointer;
}

.gform_wrapper.gform-theme--framework input[type="file"]::file-selector-button {
	flex-shrink: 0;
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	border: 0;
	border-radius: 9999px;
	padding: 8px 18px;
	margin: 0;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.4;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.gform_wrapper.gform-theme--framework input[type="file"]::file-selector-button:hover {
	background-color: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--contrast);
}

/* Choices ------------------------------------------------------------ */

.gform_wrapper .gchoice + .gchoice {
	margin-top: 6px;
}

.gform_wrapper .gchoice label {
	cursor: pointer;
}

/* GF maps choice / consent labels onto --gf-ctrl-label-color-secondary
 * and a 14px choice-label font size, so they render in the same dim/
 * small style as the sub-labels (First, Last) — which makes the actual
 * checkbox/radio/consent options feel secondary. They're the primary
 * content of the field, so pull the color back to the default text
 * color and the size up to body text size. Specificity is bumped to win
 * over the framework rule. */
.gform_wrapper.gform-theme--framework .gchoice label,
.gform_wrapper.gform-theme--framework .gchoice .gform-field-label,
.gform_wrapper.gform-theme--framework .gfield_consent_label {
	color: var(--wp--preset--color--contrast) !important;
	font-size: 1.125rem !important;
}

/* Custom check/radio styling. Native `accent-color` only repaints the
 * fill, so accent-1 inside a light-on-light context (cream card → green
 * box → Chrome's auto-glyph) reads poorly. Dark box + light check gives
 * us readable contrast on any card background. */
.gform_wrapper.gform-theme--framework input[type="checkbox"],
.gform_wrapper.gform-theme--framework input[type="radio"] {
	appearance: none !important;
	-webkit-appearance: none !important;
	width: 20px !important;
	height: 20px !important;
	min-width: 20px !important;
	min-height: 20px !important;
	flex-shrink: 0;
	margin: 0;
	background-color: var(--wp--preset--color--base) !important;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 25%, transparent) !important;
	box-shadow: none !important;
	cursor: pointer;
	position: relative;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.gform_wrapper.gform-theme--framework input[type="checkbox"] {
	border-radius: 6px !important;
}

.gform_wrapper.gform-theme--framework input[type="radio"] {
	border-radius: 50% !important;
}

.gform_wrapper.gform-theme--framework input[type="checkbox"]:hover,
.gform_wrapper.gform-theme--framework input[type="radio"]:hover {
	border-color: color-mix(in srgb, var(--wp--preset--color--contrast) 50%, transparent) !important;
}

.gform_wrapper.gform-theme--framework input[type="checkbox"]:checked,
.gform_wrapper.gform-theme--framework input[type="radio"]:checked {
	background-color: var(--wp--preset--color--contrast) !important;
	border-color: var(--wp--preset--color--contrast) !important;
}

/* Checkmark — single white tick, drawn over the dark box on :checked. */
.gform_wrapper.gform-theme--framework input[type="checkbox"]:checked::before {
	content: "" !important;
	position: absolute !important;
	inset: 0 !important;
	width: auto !important;
	height: auto !important;
	background: none !important;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'><path d='M3 8.5L6.5 12L13 4.5' stroke='%23ffffff' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: 14px 14px !important;
	opacity: 1 !important;
	transform: none !important;
}

/* Radio dot — small white inner circle. */
.gform_wrapper.gform-theme--framework input[type="radio"]:checked::before {
	content: "" !important;
	position: absolute !important;
	inset: 5px !important;
	width: auto !important;
	height: auto !important;
	border-radius: 50% !important;
	background: var(--wp--preset--color--base) !important;
	background-image: none !important;
	opacity: 1 !important;
	transform: none !important;
}

.gform_wrapper.gform-theme--framework input[type="checkbox"]:focus-visible,
.gform_wrapper.gform-theme--framework input[type="radio"]:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-1) !important;
	outline-offset: 2px !important;
	box-shadow: none !important;
}

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

.gform_wrapper .gform_footer {
	margin-top: 32px;
	padding-top: 0;
	border-top: 0;
}

/* Custom select / combobox ------------------------------------------ */

.gform_wrapper.gform-theme--framework .trime2026-select {
	position: relative;
}

/* Hide the native <select> visually but keep it in the DOM for form
 * submission. We can't use display:none because some browsers won't
 * submit the value; sr-only-style absolute positioning is safe. */
.gform_wrapper.gform-theme--framework .trime2026-select > select {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	opacity: 0 !important;
	pointer-events: none !important;
	z-index: -1 !important;
	margin: 0 !important;
}

.gform_wrapper.gform-theme--framework .trime2026-select__button {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: 52px;
	text-align: left;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 15%, transparent);
	border-radius: 12px;
	padding: 14px 18px;
	font-family: inherit;
	font-size: 1.125rem;
	line-height: 1.4;
	cursor: pointer;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.gform_wrapper.gform-theme--framework .trime2026-select__button:hover {
	border-color: color-mix(in srgb, var(--wp--preset--color--contrast) 28%, transparent);
}

.gform_wrapper.gform-theme--framework .trime2026-select__button:focus,
.gform_wrapper.gform-theme--framework .trime2026-select__button:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-1);
	outline-offset: 0;
	border-color: var(--wp--preset--color--contrast);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--wp--preset--color--accent-1) 25%, transparent);
}

.gform_wrapper.gform-theme--framework .trime2026-select__button[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
}

.gform_wrapper.gform-theme--framework .trime2026-select__value {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.gform_wrapper.gform-theme--framework .trime2026-select__value--placeholder {
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 45%, transparent);
}

.gform_wrapper.gform-theme--framework .trime2026-select__chevron {
	flex-shrink: 0;
	width: 12px;
	height: 8px;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%23141c16' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
	background-repeat: no-repeat;
	background-position: center;
	transition: transform 0.2s ease;
}

.gform_wrapper.gform-theme--framework .trime2026-select.is-open .trime2026-select__chevron {
	transform: rotate(180deg);
}

.gform_wrapper.gform-theme--framework .trime2026-select__listbox {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	z-index: 100;
	margin: 0;
	padding: 6px;
	list-style: none;
	background-color: var(--wp--preset--color--base);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 15%, transparent);
	border-radius: 12px;
	box-shadow: 0 12px 32px color-mix(in srgb, var(--wp--preset--color--contrast) 15%, transparent);
	max-height: 280px;
	overflow-y: auto;
	overscroll-behavior: contain;
	display: none;
}

.gform_wrapper.gform-theme--framework .trime2026-select.is-open .trime2026-select__listbox {
	display: block;
}

.gform_wrapper.gform-theme--framework .trime2026-select__option {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	border-radius: 8px;
	cursor: pointer;
	user-select: none;
	color: var(--wp--preset--color--contrast);
	line-height: 1.4;
}

.gform_wrapper.gform-theme--framework .trime2026-select__option.is-active {
	background-color: color-mix(in srgb, var(--wp--preset--color--contrast) 8%, transparent);
}

.gform_wrapper.gform-theme--framework .trime2026-select__option[aria-selected="true"] {
	font-weight: 500;
}

.gform_wrapper.gform-theme--framework .trime2026-select__option[aria-selected="true"]::after {
	content: "";
	margin-left: auto;
	flex-shrink: 0;
	width: 14px;
	height: 14px;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'><path d='M3 8.5L6.5 12L13 4.5' stroke='%23141c16' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
	background-repeat: no-repeat;
	background-position: center;
}

.gform_wrapper.gform-theme--framework .trime2026-select__option[aria-disabled="true"] {
	opacity: 0.4;
	cursor: not-allowed;
}