/* ==========================================================================
   Gravity Forms - footer contact panel
   figma/contact form/gravity-contact-form.png

   Scoped to .mcg-gform, the wrapper footer.php puts around the shortcode, so
   a form embedded anywhere else keeps the stock Gravity Forms look.

   Loaded after gform_basic and gform_theme - see inc/gravity-forms.php - so
   plain specificity is enough and nothing here needs !important.

   Measurements taken off the comp at 1:1:
     field row      65px  (22px padding, 16px/20px text, 1px rule)
     row / col gap  0     Name and Email share one continuous rule
     textarea       137px
     rule           1px, the same white/22 the native form uses
     placeholder    #A4B7C7
     button         217 x 52, #246EB7
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Wrapper chrome we do not want
   Title and description are already off in the shortcode; this covers the
   heading block, the required-field legend and the per-label asterisks, none
   of which appear in the comp. Labels themselves stay in the markup - every
   field is set to "hidden label", which Gravity Forms renders visually hidden
   but still readable by screen readers.
   -------------------------------------------------------------------------- */

.mcg-gform .gform_wrapper.gravity-theme .gform_heading,
.mcg-gform .gform_wrapper.gravity-theme .gform_required_legend,
.mcg-gform .gform_wrapper.gravity-theme .gfield_required {
	display: none;
}

/* --------------------------------------------------------------------------
   2. Grid
   Zero gaps in both directions. The rules under Name and Email then butt up
   against each other and read as the single line the comp draws, and the rows
   below stack at an even 65px pitch.
   -------------------------------------------------------------------------- */

.mcg-gform .gform_wrapper.gravity-theme .gform_fields {
	grid-column-gap: 0;
	grid-row-gap: 0;
}

/* --------------------------------------------------------------------------
   3. Fields
   -------------------------------------------------------------------------- */

.mcg-gform .gform_wrapper.gravity-theme .gfield input[type="text"],
.mcg-gform .gform_wrapper.gravity-theme .gfield input[type="email"],
.mcg-gform .gform_wrapper.gravity-theme .gfield input[type="tel"],
.mcg-gform .gform_wrapper.gravity-theme .gfield input[type="url"],
.mcg-gform .gform_wrapper.gravity-theme .gfield input[type="number"],
.mcg-gform .gform_wrapper.gravity-theme .gfield select,
.mcg-gform .gform_wrapper.gravity-theme .gfield textarea {
	width: 100%;
	background: transparent;
	border: 0;
	border-bottom:1px solid rgb(255 255 255 / 17%);
	border-radius: 0;
	color: #ffffff;
	font-family: "Open Sans", sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 20px;
	padding: 22px 0;
	transition: border-color 0.3s ease;
}

.mcg-gform .gform_wrapper.gravity-theme .gfield input::placeholder,
.mcg-gform .gform_wrapper.gravity-theme .gfield textarea::placeholder {
	color: #A4B7C7;
	opacity: 1; /* Firefox dims placeholders by default. */
}

.mcg-gform .gform_wrapper.gravity-theme .gfield input:focus,
.mcg-gform .gform_wrapper.gravity-theme .gfield select:focus,
.mcg-gform .gform_wrapper.gravity-theme .gfield textarea:focus {
	outline: none;
	border-bottom-color: #246EB7;
}

/* Chrome paints a white block over autofilled inputs, which would punch a
   hole in the dark panel. A large inset shadow repaints the field. */
.mcg-gform .gform_wrapper.gravity-theme .gfield input:-webkit-autofill,
.mcg-gform .gform_wrapper.gravity-theme .gfield input:-webkit-autofill:hover,
.mcg-gform .gform_wrapper.gravity-theme .gfield input:-webkit-autofill:focus {
	-webkit-text-fill-color: #ffffff;
	-webkit-box-shadow: 0 0 0 1000px #0C2640 inset;
	caret-color: #ffffff;
	transition: background-color 5000s ease-in-out 0s;
}

/* Select
   Gravity Forms renders the placeholder as the first <option>, not as a real
   placeholder attribute, so the resting state is coloured on the element and
   the rule below repaints it white once a real choice is picked. Done in that
   order so browsers without :has() still get the comp's resting state. */
.mcg-gform .gform_wrapper.gravity-theme .gfield select {
	color: #A4B7C7;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	cursor: pointer;
	padding-right: 28px;
	background-image: url("http://mcgillivray.test/wp-content/uploads/2026/08/icon_arrow-down.png");
	background-repeat: no-repeat;
	background-position: right center;
	/* 17px box puts the visible chevron at the comp's 10x5. */
	background-size: 11px;
}

.mcg-gform .gform_wrapper.gravity-theme .gfield select:has(option:not(.gf_placeholder):checked) {
	color: #ffffff;
}

/* The dropdown list itself renders in the OS palette, so give the options a
   light background rather than white-on-white. */
.mcg-gform .gform_wrapper.gravity-theme .gfield select option {
	color: #0C2640;
	background-color: #ffffff;
}

/* Textarea
   137px total against the comp; Gravity Forms otherwise forces 288px through
   its .large size class.

   display:block matters: left inline, the textarea sits on a text baseline and
   drags ~5px of descender space along under its rule, which shows up as a gap
   before the submit button. No resize grip - the comp's corner is clean. */
.mcg-gform .gform_wrapper.gravity-theme .gfield textarea,
.mcg-gform .gform_wrapper.gravity-theme .gfield textarea.large,
.mcg-gform .gform_wrapper.gravity-theme .gfield textarea.medium,
.mcg-gform .gform_wrapper.gravity-theme .gfield textarea.small {
	display: block;
	height: 137px;
	min-height: 137px;
	resize: none;
}

/* --------------------------------------------------------------------------
   4. Submit button
   Mirrors .btn / .btn-primary in theme.css. It cannot inherit them: Gravity
   Forms renders a bare <input type="submit"> with its own classes, and this
   sheet loads after the plugin CSS, so the rules have to be restated here.
   The arrow is a background image because an <input> holds no child nodes.
   -------------------------------------------------------------------------- */

.mcg-gform .gform_wrapper.gravity-theme .gform_footer {
	margin: 30px 0 0;
	padding: 0;
}

.mcg-gform .gform_wrapper.gravity-theme .gform_footer input[type="submit"] {
	width: auto;
	margin: 0;
	background-color: #246EB7;
	color: #ffffff;
	border: 1px solid #246EB7;
	border-radius: 0;
	font-family: "IBM Plex Sans", sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 18px 55px 18px 30px;
	cursor: pointer;
	transition: all 0.3s ease, background-position 0.3s ease;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='12' viewBox='0 0 15 12' fill='none'%3E%3Cpath d='M9 1L14 6L9 11M14 6H0' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='square'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 30px center;
	background-size: 13px 14px;
}

.mcg-gform .gform_wrapper.gravity-theme .gform_footer input[type="submit"]:hover,
.mcg-gform .gform_wrapper.gravity-theme .gform_footer input[type="submit"]:focus-visible {
	background-color: #ffffff;
	color: #090909;
	border-color: #246EB7;
	/* Same 4px nudge .btn:hover svg gives the arrow elsewhere. */
	background-position: right 26px center;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='12' viewBox='0 0 15 12' fill='none'%3E%3Cpath d='M9 1L14 6L9 11M14 6H0' stroke='%23090909' stroke-width='1.6' stroke-linecap='square'/%3E%3C/svg%3E");
}

.mcg-gform .gform_wrapper.gravity-theme .gform_footer input[type="submit"]:disabled {
	opacity: 0.6;
	cursor: default;
}

.mcg-gform .gform_wrapper.gravity-theme .gform_ajax_spinner {
	margin-left: 12px;
	align-self: center;
}

/* --------------------------------------------------------------------------
   5. Errors and confirmation
   Gravity Forms styles both for a light page - boxed, near-black text on
   near-white fills - which is unreadable here.
   -------------------------------------------------------------------------- */

.mcg-gform .gform_wrapper .gform_validation_errors {
	background: rgba(224, 108, 91, 0.08);
	border: 1px solid rgba(224, 108, 91, 0.5);
	border-radius: 0;
	box-shadow: none;
	margin: 0 0 24px;
	padding: 16px 20px;
}

.mcg-gform .gform_wrapper .gform_validation_errors > h2,
.mcg-gform .gform_wrapper .gform_validation_errors > ol li,
.mcg-gform .gform_wrapper .gform_validation_errors > ol a {
	color: #F0A99C;
	font-family: "Open Sans", sans-serif;
	font-size: 15px;
	line-height: 24px;
}

/* This is an <h2>, so it arrives carrying the global heading rules from
   theme.css - Inter Tight at 2px tracking. Reset it back to body copy. */
.mcg-gform .gform_wrapper .gform_validation_errors > h2 {
	margin: 0;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
}

/* Gravity Forms prefixes the heading with a glyph from its own icon font,
   which is an admin asset - on the front end it renders as tofu. */
.mcg-gform .gform_wrapper .gform_validation_errors > h2 .gform-icon,
.mcg-gform .gform_wrapper .gform_validation_errors > h2::before {
	display: none;
}

/* Per-field message: a plain line under the rule, not a boxed alert. The rows
   have no gap, so keep it tight or it shunts the fields below it. */
.mcg-gform .gform_wrapper .gfield_validation_message,
.mcg-gform .gform_wrapper .validation_message {
	background: none;
	border: 0;
	color: #F0A99C;
	font-family: "Open Sans", sans-serif;
	font-size: 13px;
	line-height: 18px;
	margin: 6px 0 0;
	padding: 0;
}

/* Gravity Forms boxes invalid inputs in red on all four sides. */
.mcg-gform .gform_wrapper .gfield_error [aria-invalid="true"],
.mcg-gform .gform_wrapper.gravity-theme .gfield_error input,
.mcg-gform .gform_wrapper.gravity-theme .gfield_error select,
.mcg-gform .gform_wrapper.gravity-theme .gfield_error textarea {
	border: 0;
	border-bottom: 1px solid #E06C5B;
}

.mcg-gform .gform_wrapper.gravity-theme .gfield_error {
	background: none;
	border: 0;
	padding: 0;
}

.mcg-gform .gform_confirmation_wrapper,
.mcg-gform .gform_confirmation_message {
	color: #ffffff;
	font-family: "Open Sans", sans-serif;
	font-size: 18px;
	line-height: 28px;
}



/* div#gform_wrapper_1 input#input_1_1, div#gform_wrapper_1 input#input_1_3, div#gform_wrapper_1 input#input_1_4, div#gform_wrapper_1 div#field_1_5,
div#gform_wrapper_1 div#field_1_6 */

@media only screen and (min-width: 640px) {
div#gform_wrapper_1 input#input_1_1{
padding-right:10px;
}
}
/* --------------------------------------------------------------------------
   6. Small screens
   Gravity Forms already drops every field to full width under 640px, so the
   half-width Name and Email stack on their own and the button stays at its
   natural size. One thing does need undoing: the plugin bumps inputs to
   line-height 2 with a 32px floor "for mobile devices", which pushes the 65px
   rows out to 77 and breaks the even pitch as soon as the fields stack.

   The selector repeats the plugin's :not() chain because that chain is what
   gives its rule the weight to win - matching it and adding .mcg-gform is what
   puts this one on top. The 641px breakpoint is the plugin's, not a typo.
   -------------------------------------------------------------------------- */

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

	.mcg-gform .gform_wrapper.gravity-theme input:not([type="radio"]):not([type="checkbox"]):not([type="image"]):not([type="file"]) {
		line-height: 20px;
		min-height: 0;
	}

	/* The same plugin rule catches the submit button, which wants its own
	   tight line-height back or it grows from 52px to 66px. */
	.mcg-gform .gform_wrapper.gravity-theme .gform_footer input[type="submit"]:not([type="image"]):not([type="file"]) {
		line-height: 1;
	}
}