/* ============================================================
   PORTUGALIST — GRAVITY FORMS STYLING
   Brands Gravity Forms (2.9 / 2.10, "orbital" theme) to the
   Portugalist design system.

   ISOLATED ON PURPOSE: this is the only file that knows about a
   form plugin. If the site ever moves off Gravity Forms, only
   this file is rewritten — design-system.css does not change.

   Most of the work is done by remapping Gravity Forms' Theme
   Framework CSS variables (--gf-*) to the design tokens (--pg-*).
   A little direct CSS follows for the button feel, the multi-page
   progress bar, and headings.

   Contents:
     1. Theme Framework variable mapping
     2. Form container (card)
     3. Buttons
     4. Multi-page progress bar
     5. Heading & confirmation
   ============================================================ */

/* 1. THEME FRAMEWORK VARIABLE MAPPING ----------------------- */
/* Gravity Forms defines these on .gform-theme--framework. We
   re-point them at the design tokens. The few -rgb triples can't
   be tokens (they feed rgba()), so they mirror the palette by hand. */
.gform-theme--framework,
.gform-theme--api {
	/* Brand accent — buttons, focus, progress, checked controls */
	--gf-color-primary:           var(--pg-custard);
	--gf-color-primary-rgb:       245, 193, 61;   /* #F5C13D */
	--gf-color-primary-contrast:  var(--pg-ink);
	--gf-color-primary-contrast-rgb: 28, 26, 23;  /* #1C1A17 */
	--gf-color-primary-darker:    var(--pg-custard-deep);
	--gf-color-primary-lighter:   var(--pg-custard-soft);

	/* Text outside controls — labels, descriptions, hairlines */
	--gf-color-out-ctrl-dark:         var(--pg-ink);
	--gf-color-out-ctrl-dark-darker:  var(--pg-ink);
	--gf-color-out-ctrl-dark-lighter: var(--pg-ink-mid);
	--gf-color-out-ctrl-light:        var(--pg-border);

	/* Controls — inputs, selects, textareas */
	--gf-ctrl-bg-color:            var(--pg-white);
	--gf-ctrl-color:               var(--pg-ink);
	--gf-ctrl-border-color:        var(--pg-border);
	--gf-ctrl-border-color-hover:  var(--pg-border-strong);
	--gf-ctrl-border-color-focus:  var(--pg-custard);
	--gf-ctrl-border-color-error:  var(--pg-fail);
	--gf-ctrl-accent-color:        var(--pg-custard);
	--gf-ctrl-radius:              var(--pg-radius-sm);

	/* Corner radius */
	--gf-radius: var(--pg-radius-sm);

	/* State colours */
	--gf-color-danger:      var(--pg-fail);
	--gf-color-danger-rgb:  181, 70, 46;   /* #B5462E */
	--gf-color-success:     var(--pg-pass);
	--gf-color-success-rgb: 79, 122, 61;   /* #4F7A3D */
}

/* 2. FORM CONTAINER ----------------------------------------- */
/* The form sits on a white card so it stands clear of the cream
   page background. If a form is ever placed inside an already-white
   band, drop this card by overriding .gform_wrapper there. */
.gform_wrapper {
	background: var(--pg-white);
	border: 1px solid var(--pg-border);
	border-radius: var(--pg-radius);
	box-shadow: var(--pg-shadow);
	padding: 28px;
}

/* 3. BUTTONS ------------------------------------------------ */
/* The accent variables already make the primary button custard
   with ink text; this adds the design-system lift + shadow. */
.gform_wrapper .gform-theme-button,
.gform_wrapper .gform_button {
	box-shadow: 0 2px 6px rgba(28, 26, 23, .15);
	transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.gform_wrapper .gform-theme-button:hover,
.gform_wrapper .gform_button:hover {
	transform: translateY(-1px);
	box-shadow: 0 5px 14px rgba(28, 26, 23, .2);
}

/* 4. MULTI-PAGE PROGRESS BAR -------------------------------- */
/* Recolours the percentage progress bar from GF's blue to the
   brand custard. The fill width is set inline by GF; only the
   colours are overridden here. */
.gform_wrapper .gf_progressbar_title {
	color: var(--pg-ink-muted);
	font-weight: 600;
}
.gform_wrapper .gf_progressbar {
	background: var(--pg-pastry);
	border-radius: 99px;
}
.gform_wrapper .gf_progressbar_percentage {
	background: var(--pg-custard);
	border-radius: 99px;
}
.gform_wrapper .gf_progressbar_percentage span {
	color: var(--pg-ink);
}

/* 5. HEADING & CONFIRMATION --------------------------------- */
.gform_wrapper .gform_title {
	color: var(--pg-ink);
}
.gform_confirmation_message {
	background: var(--pg-pass-bg);
	color: var(--pg-ink-mid);
	border-radius: var(--pg-radius);
	padding: 16px 18px;
}