/* ========================================
WITT PLEDGE FORM: GRAVITY FORMS (ORBITAL)
CSS VARIABLE OVERRIDES

WHY this selector:
GF injects a <style> block inside the <body> (inside the form wrapper) with:
#gform_wrapper_1[data-form-index="0"].gform-theme { ... }   → specificity (1,2,0)
Our stylesheet is linked in <head>, so it loads BEFORE that inline block in
document order. To win on specificity we need > (1,2,0). Adding one class
(.witt-pledge-form_wrapper) gives us (1,3,0) — beats GF on specificity
regardless of load order.

This is the correct place to override anything GF exposes as a CSS variable.
Direct property overrides below are only for things not controllable via variables.
======================================== */

#gform_wrapper_1[data-form-index="0"].gform-theme.witt-pledge-form_wrapper {

	/* INPUTS — borders/radius */
	--gf-ctrl-border-size: 0;
	--gf-ctrl-border-color: transparent;
	--gf-ctrl-radius: 5px;
	--gf-ctrl-shadow: none;
	--gf-ctrl-bg-color: #fff;
	--gf-ctrl-bg-color-hover: #f5f5f5;

	/* LABELS */
	--gf-ctrl-label-font-weight-primary: 600;

	/* REQUIRED ASTERISKS */
	--gf-ctrl-label-font-size-req: 16px;
	--gf-ctrl-label-color-req: #f00;

	/* FORM GRID */
	--gf-form-gap-y: 35px;

	/* SECTIONS */
	--gf-field-section-border-width: 0;
	--gf-field-section-border-style: solid;
	--gf-field-section-border-color: transparent;
	--gf-field-section-padding-y-end: 0;

	/* BUTTON — background and text colour.
	--gf-color-primary drives the submit button background in Orbital.
	It also affects radio/checkbox accent and input focus rings, which are
	handled separately below via accent-color and direct overrides. */
	--gf-color-primary: #fcb22d;
	--gf-color-primary-rgb: 252, 178, 45;
	--gf-color-primary-contrast: #212529;
	--gf-color-primary-contrast-rgb: 33, 37, 41;
	--gf-color-primary-darker: #e09a1a;
	--gf-color-primary-lighter: #ffd060;

	/* Mirror the primary overrides inside controls (used for focus rings etc.) */
	--gf-color-in-ctrl-primary: #fcb22d;
	--gf-color-in-ctrl-primary-rgb: 252, 178, 45;
	--gf-color-in-ctrl-primary-contrast: #212529;
	--gf-color-in-ctrl-primary-contrast-rgb: 33, 37, 41;
	--gf-color-in-ctrl-primary-darker: #e09a1a;
	--gf-color-in-ctrl-primary-lighter: #ffd060;

	/* RADIO/CHECKBOX — inner dot drawn by GF's ::before pseudo-element */
	--gf-ctrl-choice-check-color: #fff;
}


/* ========================================
WITT PLEDGE FORM: GRAVITY FORMS (ORBITAL)
DIRECT CSS OVERRIDES

WHY direct overrides (not variables) below:
- Border-radius: 100px (pill) is intentionally different from input radius;
--gf-ctrl-radius would make all inputs pill-shaped.
- Font stack, size, weight, padding: GF's button variables are size-tier
aliases (md/lg/sm) that don't map cleanly to these custom values.
- box-shadow: not exposed as a GF variable.

witt-pledge-form.css loads AFTER gravity-forms-orbital-theme.min.css in the
<head>, so cascade order already favours us over GF stylesheet rules.
!important is only used where GF's own stylesheet also uses it.
======================================== */

/* Hide the default gravity forms heading */
.gform-theme--framework.witt-pledge-form_wrapper .gform_heading {
	display: none;
	visibility: hidden;
}

/* Intro section */
.gform-theme--framework.witt-pledge-form_wrapper .witt-pledge-form__intro {
	text-align: center;
}

.gform-theme--framework.witt-pledge-form_wrapper .witt-pledge-form__intro .gsection_title {
	color: #192E57;
	font-size: 32px;
	line-height: 40px;
	margin-bottom: 15px;
	padding-bottom: 0;
	text-align: center;
}

.gform-theme--framework.witt-pledge-form_wrapper .witt-pledge-form__intro .gsection_description {
	line-height: 30px;
	font-size: 16px;
	font-weight: bold;
}

/* Form labels */
.gform-theme--framework.witt-pledge-form_wrapper .gform-field-label {
	font-size: 1.6rem;
	margin-bottom: 13px;
}

/* Hide the character counter for input fields (employee number) */
.gform-theme--framework.witt-pledge-form_wrapper .ginput_counter {
	display: none;
}

/* Tighten the row gap below section heading fields ("Your info", "Your Costco employee info").
row-gap on .gform_fields is uniform; negative margin-bottom on the section grid item
compensates without touching the gap elsewhere. Exclude the intro, which has its own layout. */
.gform-theme--framework.witt-pledge-form_wrapper .gfield--type-section:not(.witt-pledge-form__intro) {
	margin-bottom: -15px;
}

/* Form section titles and employment-status field label */
.gform-theme--framework.witt-pledge-form_wrapper .gsection_title,
.gform-theme--framework.witt-pledge-form_wrapper .witt-pledge-form__employment-status .gfield_label {
	color: #103C89;
	font-family: Solway;
	font-size: 20px;
	font-style: normal;
	font-weight: 700;
	line-height: 33px;
	margin: 0;
	padding-bottom: 0;
	text-align: left;
}

.gform-theme--framework.witt-pledge-form_wrapper .witt-pledge-form__employment-status .gfield_label {
	padding-bottom: 13px;
}

.gform-theme--framework.witt-pledge-form_wrapper .witt-pledge-form__employment-status .gfield_label .gfield_required {
	color: #103C89;
	font-size: 20px;
	margin-left: -3px;
}

/* Radio box labels */
.gform-theme--framework.witt-pledge-form_wrapper .gform-field-label--type-inline {
	font-size: 1.6rem;
	font-weight: 400;
	line-height: 1.6rem;
	margin-bottom: 0;
	margin-left: 0;
}

/* ========================================
RADIO BUTTONS CUSTOM APPEARANCE

GF Orbital already uses appearance:none on these, so accent-color is ignored.
We redraw them entirely: unchecked = white + gray border; checked = blue + white dot.
!important needed on dimension/border/background because GF framework sets those with !important.
======================================== */

.gform-theme--framework.witt-pledge-form_wrapper .gfield-choice-input[type="radio"] {
	appearance: none;
	accent-color: #fff !important;
	-webkit-appearance: none;
	width: 15px !important;
	height: 15px !important;
	min-width: 15px !important;
	border: 1px solid #888 !important;
	border-radius: 50% !important;
	background-color: #fff !important;
	background-image: none !important;
	box-shadow: none !important;
	margin: 0 !important;
	padding: 0 !important;
	cursor: pointer;
	flex-shrink: 0;
}

.gform-theme--framework.witt-pledge-form_wrapper .gfield-choice-input[type="radio"]:checked {
	background-color: #007bff !important;
	border-color: transparent !important;
}

/* ========================================
CHECKBOXES

GF draws the check mark as a white icon-glyph (::before), coloured via the
--gf-ctrl-choice-check-color override above (set to #fff for the radio dot's sake). Checkboxes
have no custom checked background, so that white glyph was invisible on the box's white
background. Give the box a colored background on :checked so the white check mark shows.
======================================== */

.gform-theme--framework.witt-pledge-form_wrapper .gfield-choice-input[type="checkbox"]:checked {
	background-color: #007bff !important;
	border-color: #007bff !important;
}

/* SMS consent checkbox label */
.gform-theme--framework.witt-pledge-form_wrapper .gfield_checkbox .gform-field-label {
	color: #26385c;
	font-size: 1.6rem;
	font-weight: 600;
	line-height: 33px;
	margin: -6px 15px 13px;
	margin-bottom: 13px;
}

.gform-theme--framework.witt-pledge-form_wrapper .gfield_checkbox .gform-field-label br {
	display: block;
}

/* Center the page footer button(s) */
.gform-theme--framework.witt-pledge-form_wrapper .gform_page_footer {
	justify-content: center;
}

/* ========================================
NEXT + SUBMIT BUTTONS

Background and text colour come from --gf-color-primary overrides above. The remaining declarations 
cover properties not addressable via GF variables (pill radius, custom font, padding, shadow).
- Next button: type="button" .gform_next_button
- Submit button: type="submit" .gform_button
======================================== */

#gform_wrapper_1.witt-pledge-form_wrapper .gform_page_footer input[type="button"].gform_next_button,
#gform_wrapper_1.witt-pledge-form_wrapper .gform_page_footer input[type="submit"].gform_button,
#gform_wrapper_1.witt-pledge-form_wrapper .witt-pledge-form__submit-target input[type="submit"].gform_button {
	border-radius: 100px !important;
	border: none !important;
	padding: 15px 45px !important;
	box-shadow: 0px 5px 1px rgba(252, 178, 45, 0.3);
	font-family: "Solway", "Arbutus Slab", serif !important;
	font-weight: bold !important;
	font-size: 22px !important;
	line-height: 33px !important;
	text-transform: none !important;
	cursor: pointer;
}

#gform_wrapper_1.witt-pledge-form_wrapper .gform_page_footer input[type="button"].gform_next_button:hover,
#gform_wrapper_1.witt-pledge-form_wrapper .gform_page_footer input[type="submit"].gform_button:hover,
#gform_wrapper_1.witt-pledge-form_wrapper .witt-pledge-form__submit-target input[type="submit"].gform_button:hover {
	box-shadow: 0px 5px 1px rgba(224, 154, 26, 0.3);
}

/* ========================================
SHARED GRAVITY FORMS FIELD TOOLTIP

Injected by witt_gf_render_field_tooltip() next to any field's label, on any Gravity Forms form
(inc/gravityforms.php). Visual styling ported from the ACF form's .simple-tooltip/.tooltiptext
(styles/_tooltip.scss), renamed with the witt_gf_ prefix. Scoped to .gform_wrapper (present on
every GF form) rather than a single form's wrapper class, so it works form-wide. Keep it here
until shared Gravity Forms styles have a dedicated stylesheet in the rebuilt CSS pipeline.
======================================== */

.gform_wrapper .witt_gf_tooltip {
	position: relative;
	display: inline-flex;
	vertical-align: middle;
	margin-left: 6px;
	color: #d0d5f1;
}

.gform_wrapper .witt_gf_tooltip__icon {
	font-family: "Font Awesome 5 Free" !important;
	font-weight: 900 !important;
	font-style: normal !important;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
}

/* Focus ring on the icon itself (keyboard users tabbing to it). */
.gform_wrapper .witt_gf_tooltip__icon:focus-visible {
	outline: 2px solid #344199;
	outline-offset: 2px;
	border-radius: 50%;
}

.gform_wrapper .witt_gf_tooltip__text {
	visibility: hidden;
	opacity: 0;
	position: absolute;
	bottom: 100%;
	left: 50%;
	z-index: 1;
	width: 240px;
	margin-left: -120px;
	padding: 10px;
	border-radius: 10px;
	background-color: #344199;
	box-shadow: 0 8px 2px -2px #d0d5f1;
	color: #fff;
	font-size: 14px;
	line-height: 18px;
	text-align: center;
	transition: opacity .5s;
}

.gform_wrapper .witt_gf_tooltip__text::after {
	content: " ";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -10px;
	border-width: 10px;
	border-style: solid;
	border-color: #344199 transparent transparent transparent;
}

/* Reveal on mouse hover, keyboard focus, and tap (".is-active" toggled by JS for touch devices). */
.gform_wrapper .witt_gf_tooltip:hover .witt_gf_tooltip__text,
.gform_wrapper .witt_gf_tooltip:focus-within .witt_gf_tooltip__text,
.gform_wrapper .witt_gf_tooltip.is-active .witt_gf_tooltip__text {
	visibility: visible;
	opacity: 1;
}

/* ========================================
WITT PLEDGE FORM: WAVE TEMPLATE OVERRIDES

These rules apply only when the pledge form uses the reusable WITT Wave template.
======================================== */

/* Back button injected into the Wave hero by JavaScript; hidden until page 2. */
.witt-pledge-form__back-button {
	display: none;
}

.witt-hero-wave .witt-pledge-form__back-button {
	position: relative;
	z-index: 1;
  top: 10px;
  left: 0;
	pointer-events: all;
}

@media (min-width: 768px) {
  .witt-hero-wave .witt-pledge-form__back-button {
    left: -100px;
  }
}

.witt-hero-wave .witt-pledge-form__back-link {
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	padding: 0;
	text-decoration: none;
}

.witt-hero-wave .witt-pledge-form__back-link:hover {
	color: rgba(255, 255, 255, 0.8);
	text-decoration: none;
}

/* Pledge summary */
.witt-template-wave .site-content .witt-pledge-form__confirmation-title,
.witt-template-wave .site-content .witt-pledge-form__pledge-title {
	margin-top: 0;
}

/* Page-two hero state */
body.gf-page-2.witt-template-wave .top-container {
  min-height: 170px;
}

body.gf-page-2 .witt-hero-wave {
	position: relative;
	z-index: 9999;
}

/* Hide Hero Subtitle and Content */
body.gf-page-2 .witt-hero-wave .witt-hero-wave__subtitle,
body.gf-page-2 .witt-hero-wave .witt-hero-wave__content {
	display: none;
	visibility: hidden;
}

body.gf-page-2 .witt-pledge-form__back-button {
	display: block;
}

.witt-pledge-form__pledge-summary {
  padding: 0;
}
