/*
 * Contact (page 3). Values: [m] audit/measure/contact-1440|390, [spec] design-spec 3b and 7.
 * Cards 3-up, 20px column gap, 10px row gap [m: row two starts 10px under row one]; 1-up at <= 767.
 */

/* ---------- Staff cards ---------- */
.canopy-staff { padding-top: 20px; } /* the #staff anchor widget's 20px [m y366-386] */

.canopy-staff__list { display: grid; gap: 10px 20px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) {
	.canopy-staff__list { grid-template-columns: repeat(3, 1fr); }
}
/* Rows don't align (R-8 reproduced): each photo is its natural size, so cards differ by a few px. */
.canopy-card { padding: 10px 0; background: var(--cc-white); box-shadow: var(--cc-shadow); text-align: center; }
.canopy-card__photo { display: block; max-width: 100%; height: auto; margin: 0 auto 15px; }
.canopy-card__photo--crop { width: 250px; height: 250px; object-fit: cover; }
.canopy-card__name { margin: 0; font-size: var(--cc-fs-h3-card); line-height: 26px; text-align: center; }
.canopy-card__role { margin: 0 0 20px; color: var(--cc-text-kit-on-white); font-family: var(--cc-font-body); font-size: 15px; font-weight: 700; line-height: 25px; }
.canopy-card__action { text-align: center; }

@media (max-width: 767px) {
	/* Mobile cards touch (shadows only), with the 10px row break after the third [m 390]. */
	.canopy-staff__list { gap: 0; }
	.canopy-card:nth-child(4) { margin-top: 10px; }
	.canopy-card__role { font-size: 14px; line-height: 23px; }
}

/* ---------- Headquarters and Camp rows ---------- */
/* Today: an empty card row (21px) + a 32px spacer section with -18px margin sit between the cards and the rows (R-4). */
.canopy-locations { margin-top: 65px; }

.canopy-loc { display: grid; }
@media (min-width: 768px) {
	/* 190 / 623 / 319 of 1140 today: 16 / 66 / 16 columns with Elementor's inline widths. */
	.canopy-loc { grid-template-columns: 190fr 623fr 319fr; }
	.canopy-loc--headquarters { min-height: 210px; }
	.canopy-loc--camp { min-height: 265px; }
}

.canopy-loc__logo { padding: 10px; }
.canopy-loc__img { display: block; width: 100%; max-width: 350px; height: auto; }
.canopy-loc--camp .canopy-loc__img { width: 150px; height: 150px; max-width: 100%; }

.canopy-loc__main,
.canopy-loc__details { padding-inline: 26px 27px; color: var(--cc-text-kit-on-white); }
.canopy-loc__main { padding-top: 20px; }

/* Name: 15px Arial bold green, 26px below + the 20px widget gap; text: Roboto 15px/25 [m]. */
.canopy-loc__name { margin: 0 0 46px; font-family: var(--cc-font-body); font-size: 15px; font-weight: 700; line-height: 25px; }
.canopy-loc__text { font-family: var(--cc-font-ui); font-size: 15px; line-height: 25px; }
.canopy-loc__text p { margin: 0 0 26px; }
.canopy-loc__text > :last-child { margin-bottom: 0; }

/* Address column: today's 3px line boxes + 26px margins become 25px lines + 4px margins (R-17); same 29px pitch. */
.canopy-loc__details { padding-top: 34px; font-family: var(--cc-font-ui); }
.canopy-loc--camp .canopy-loc__details { padding-top: 52px; padding-bottom: 126px; } /* 32px spacer + 20 gap; 20 + 50px spacer + the stripped Google markup's 56px */
.canopy-loc--headquarters .canopy-loc__details { padding-bottom: 2px; }
.canopy-loc__line { margin: 0 0 4px; font-size: 15px; line-height: 25px; }
.canopy-loc__line--strong { font-weight: 700; }

@media (max-width: 767px) {
	.canopy-loc__name { margin-bottom: 44px; font-size: 14px; line-height: 23px; }
	.canopy-loc__text,
	.canopy-loc__line { font-size: 14px; line-height: 23px; }
	.canopy-loc__text p { margin-bottom: 24px; }
	.canopy-loc--camp .canopy-loc__details { padding-bottom: 124px; }
}

/* ---------- General Questions ---------- */
/* The panel is flush against the footer (R-4/D13 reproduced): no space under this section. */
.canopy-ask__intro { padding: 10px 40px 10px 0; }
.canopy-ask__heading { margin: 0 0 20px; font-size: var(--cc-fs-h2); line-height: 1; }
.canopy-ask__text { color: var(--cc-text-kit-on-white); font-family: var(--cc-font-body); font-size: 15px; line-height: 25px; }
.canopy-ask__text p { margin: 0 0 26px; }
@media (max-width: 767px) {
	.canopy-ask__text { font-size: 14px; line-height: 23px; }
	.canopy-ask__text p { margin-bottom: 24px; }
}

.canopy-ask__panel { padding: 10px; background: var(--cc-panel-blue); }

/* Gravity Forms: A3 description and counter colour on the blue panel. */
.canopy-ask__panel .gfield_description,
.canopy-ask__panel .ginput_counter { color: var(--cc-gf-desc); }

/*
 * Form controls (variant B7 promoted, DECISIONS L19; retires R-29's plugin-blue Submit). Gravity Forms Orbital sizes
 * and colours everything from --gf-ctrl-* custom properties; the form's own inline block sets several of them on the
 * wrapper with an ID selector, so these are declared one level down, on the <form>, where the controls inherit them.
 * 16px text stops the iOS focus zoom; fields and Submit are 44px tall. Labels, placeholders and the button word are
 * unchanged. No !important.
 */
.canopy-ask__panel .gform-theme--framework form {
	--gf-ctrl-font-size: 16px;
	--gf-ctrl-size: 44px;
	--gf-ctrl-line-height: 1.4;
	--gf-ctrl-padding-x: 12px;
	--gf-ctrl-padding-y: 10px;
	--gf-ctrl-border-color-focus: var(--cc-green);
	/* Keyboard focus: Orbital draws its own ring (3px, primary blue at 65%) on fields and Submit, above the site's
	   :focus-visible rule; these make it the site ring instead (B9, L19): 3px --cc-focus, 2px offset. */
	--gf-ctrl-outline-color-focus: var(--cc-focus);
	--gf-ctrl-outline-width-focus: 3px;
	--gf-ctrl-outline-offset: 2px;
	--gf-ctrl-btn-size: 44px;
	--gf-ctrl-btn-padding-x: 24px;
	--gf-ctrl-btn-border-width-primary: 0;
	--gf-ctrl-btn-radius: var(--cc-radius-button);
	--gf-ctrl-btn-bg-color-primary: var(--cc-green); /* white text 6.30:1; vs the blue panel 3.69:1 */
	--gf-ctrl-btn-bg-color-hover-primary: var(--cc-green); /* no hover change on touch */
	--gf-ctrl-btn-color-primary: var(--cc-white);
	/* Orbital resolves these from the primary colour on the wrapper, so they are restated here or they stay blue. */
	--gf-ctrl-btn-bg-color-focus-primary: var(--cc-green);
	--gf-ctrl-btn-bg-color-disabled-primary: var(--cc-green);
	--gf-ctrl-btn-border-color-focus-primary: var(--cc-green);
	--gf-ctrl-btn-color-focus-primary: var(--cc-white);
	--gf-ctrl-btn-color-hover-primary: var(--cc-white);
	--gf-ctrl-btn-color-disabled-primary: var(--cc-white);
	--gf-ctrl-btn-font-family: var(--cc-font-ui);
	--gf-ctrl-btn-font-size: 15px;
	--gf-ctrl-btn-font-weight: 500;
	--gf-ctrl-btn-line-height: 1;
	--gf-ctrl-btn-shadow: none;
}
/*
 * Validation (L20, WCAG 1.4.3). GF's error red #c02b0a is 3.43:1 on the blue panel (3.28 over its own 3% tint), so
 * every colour Orbital derives from --gf-color-danger is restated here with the A3 companion --cc-gf-error #972208
 * (same hue, darker): 4.83 on the panel, 4.62 over the tint, 8.24 on white. Declared on the form and on the summary
 * box, so it holds wherever GF renders the summary. Errored fields keep the site focus ring (B9).
 */
.canopy-ask__panel .gform-theme--framework form,
.canopy-ask__panel .gform-theme--framework .gform_validation_errors {
	--gf-color-danger: var(--cc-gf-error);
	--gf-color-danger-rgb: var(--cc-gf-error-rgb);
	--gf-ctrl-border-color-error: var(--cc-gf-error);
	--gf-ctrl-desc-color-error: var(--cc-gf-error);
	--gf-ctrl-label-color-req: var(--cc-gf-error);
	--gf-form-validation-color: var(--cc-gf-error);
	--gf-form-validation-heading-color: var(--cc-gf-error);
	--gf-form-validation-summary-color: var(--cc-gf-error); /* the summary's field links */
	--gf-form-validation-heading-icon-color: var(--cc-gf-error);
	--gf-form-validation-bg-color: rgba(var(--cc-gf-error-rgb), 0.03);
	--gf-form-validation-border-color: rgba(var(--cc-gf-error-rgb), 0.25);
	--gf-form-validation-border-color-focus: var(--cc-gf-error);
	--gf-form-validation-heading-icon-bg-color: rgba(var(--cc-gf-error-rgb), 0.05);
	--gf-form-validation-heading-icon-border-color: rgba(var(--cc-gf-error-rgb), 0.25);
	--gf-form-validation-outline-color-focus: var(--cc-focus);
}
.canopy-ask__panel .gform-theme--framework textarea { line-height: 1.4; }
@media (hover: hover) and (pointer: fine) {
	.canopy-ask__panel .gform-theme--framework form { --gf-ctrl-btn-bg-color-hover-primary: var(--cc-green-hover); }
}

/* B10-1: the old site switched to phone type at <= 768px (Astra 4.7.3 inline responsive CSS: html 85.5%,
   h1 30 / h2 25 / h3 20), while columns stacked only at <= 767. These are this file's <= 767 type rules, repeated so
   768 gets them too; 769+ stays desktop, 390 is unchanged. Source: audit/measure/live-tablet-breakpoint.txt */
@media (max-width: 768px) {
	.canopy-card__role { font-size: 14px; line-height: 23px; }
	.canopy-loc__name { font-size: 14px; line-height: 23px; }
	.canopy-loc__text,
	.canopy-loc__line { font-size: 14px; line-height: 23px; }
	.canopy-ask__text { font-size: 14px; line-height: 23px; }
}