/**
 * Game Plan styling for Gravity Forms.
 *
 * Gravity Forms 2.7+ ships the "orbital" theme, which exposes around 790 CSS
 * custom properties. Overriding those is the intended way to brand it — writing
 * competing rules means fighting the theme's specificity on every element and
 * losing again the next time it updates.
 *
 * Every declaration in the first block carries !important. Gravity Forms
 * re-generates a per-form <style> block on every render, scoped with an ID
 * selector (#gform_wrapper_16.gform-theme) — (1,0,0) specificity, which beats
 * any class selector we can write here regardless of load order. It ships
 * with its own stock defaults (blue primary, grey borders) and there is no
 * site-wide colour setting to point it at ours instead, so !important is the
 * only way site branding wins over a form-level default nobody configured.
 *
 * Selectors also carry the theme class (.gform_wrapper.gform-theme) so these
 * still apply even if a future GF version's own defaults change shape.
 *
 * Values mirror the site's Elementor global styles rather than being invented.
 */

.gform_wrapper,
.gform_wrapper.gform-theme,
.gform_wrapper.gform-theme--framework {
	/* Brand */
	--gameplan-lime: #DEF340;
	--gameplan-orange: #FF5928;
	--gameplan-dark: #181818;

	/* Primary is the submit button and every accent Gravity Forms derives. */
	--gf-color-primary: #DEF340 !important;
	--gf-color-primary-rgb: 222, 243, 64 !important;
	--gf-color-primary-contrast: #181818 !important;
	--gf-color-primary-contrast-rgb: 24, 24, 24 !important;
	--gf-color-primary-darker: #181818 !important;
	--gf-color-primary-lighter: #E9F779 !important;

	/* Errors use the brand orange rather than Gravity Forms' red. */
	--gf-color-danger: #FF5928 !important;
	--gf-color-danger-rgb: 255, 89, 40 !important;
	--gf-color-danger-contrast: #FFFFFF !important;
	--gf-color-danger-darker: #E44A1D !important;
	--gf-color-danger-lighter: #FFE3DA !important;

	/* Inputs: a solid dark rule, generous radius, and more breathing room
	   inside every field than Gravity Forms' own default. */
	--gf-ctrl-border-color: #181818 !important;
	--gf-ctrl-border-color-hover: #181818 !important;
	--gf-ctrl-border-color-focus: #181818 !important;
	--gf-ctrl-border-width: 2px !important;
	--gf-ctrl-radius: 8px !important;
	--gf-ctrl-padding-x: 1rem !important;
	--gf-ctrl-padding-y: 0.85rem !important;
	/* Search icon in the school dropdown moved to the right-hand end, where it
	   is out of the way of what is being typed (it defaults to 1rem from the
	   left, directly under the first few characters). */
	--gf-ctrl-select-search-icon-position: right 1rem center !important;
	--gf-ctrl-select-padding-x: 1rem calc(1.75rem + 1rem) !important;
	--gf-ctrl-textarea-padding-y: 0.85rem !important;

	/* Buttons: pill-shaped, matching the site's SIGN UP button. */
	--gf-ctrl-btn-radius: 999px !important;
	--gf-ctrl-btn-font-weight: 700 !important;
	--gf-ctrl-btn-border-color-primary: #181818 !important;
	--gf-ctrl-btn-border-width-primary: 2px !important;
	--gf-ctrl-btn-bg-color-primary: #DEF340 !important;
	--gf-ctrl-btn-color-primary: #181818 !important;
	--gf-ctrl-btn-bg-color-hover-primary: #181818 !important;
	--gf-ctrl-btn-color-hover-primary: #DEF340 !important;
	--gf-ctrl-btn-border-color-hover-primary: #181818 !important;
	--gf-ctrl-btn-padding-x: 2rem !important;
	--gf-ctrl-btn-padding-y: 0.85rem !important;

	/* Tickboxes. The theme draws the tick in --gf-color-in-ctrl-primary, which
	   follows the primary colour above: lime, drawn inside a white box. The
	   tick was there but next to invisible, so ticking "Remember me" on the
	   login page looked like it had done nothing (Luke, 10 Sep), and "My
	   school is not listed here" on sign-up had the same problem. Only the
	   tick changes; the primary stays lime for the buttons. */
	--gf-ctrl-choice-check-color: #181818 !important;

	/* Labels */
	--gf-label-color-primary: #181818 !important;
	--gf-label-font-weight-primary: 700 !important;
	--gf-local-required-color: #FF5928 !important;
}

/* A little wider than Gravity Forms' own default (~436px), still centred and
   readable rather than stretching edge to edge of the page's content column.
   No theme variable controls this — it's a plain width rule in the form's own
   CSS, so it needs the same !important treatment as the per-form block above.
   --gf-ctrl-line-height is likewise a fixed pixel value in that per-form
   block (38px), which pinned every field's height regardless of the padding
   increase above — auto lets it grow with the field instead. */
.gform_wrapper,
.gform_wrapper.gform-theme,
.gform_wrapper.gform-theme--framework {
	--gf-ctrl-line-height: 1.5 !important;
	width: 100% !important;
	max-width: 600px !important;
}

/* Both forms sit inside Elementor Shortcode widgets, and those widgets are
   flex children with no width of their own — so they shrink to fit their
   content however much room the container has. The sign-up came out at 452px
   and the login at 192px inside a 1200px column. A flex item ignores width
   until its basis is set, hence the flex shorthand rather than width alone.

   Matched by "a shortcode widget containing a Gravity Form" so it stays
   correct if either form is ever moved or rebuilt; the two element IDs are
   kept as a fallback for anything that doesn't support :has(). */
.elementor-widget-shortcode:has(.gform_wrapper),
.elementor-widget-shortcode:has(.gform_wrapper) .elementor-shortcode,
.elementor-element-d3a702e,
.elementor-element-d3a702e .elementor-shortcode,
.elementor-element-dac8e7d,
.elementor-element-dac8e7d .elementor-shortcode {
	width: 100% !important;
	max-width: 600px !important;
	flex: 0 1 600px !important;
}

/* Something else in the theme still pins every text-style field to a fixed
   38px box regardless of --gf-ctrl-padding-y / --gf-ctrl-line-height (neither
   is a literal `height` rule we could out-specificity — every candidate we
   could find checks out at zero specificity). Letting height size itself from
   the new padding and line-height is what actually makes "a bit more
   padding" visible rather than just squeezing the same 38px box tighter. */
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="password"],
.gform_wrapper input[type="number"],
.gform_wrapper input[type="tel"],
.gform_wrapper select.gfield_select,
.gform_wrapper .chosen-container-single .chosen-single {
	height: auto !important;
}

/* The submit button, including the login form's, which is a <button>. */
.gform_wrapper .gform_footer .gform_button,
.gform_wrapper .gform_footer input[type="submit"],
.gform_wrapper .gform_page_footer .gform_button {
	text-transform: uppercase;
	letter-spacing: 0.06em;
	cursor: pointer;
}

/* The School Name field uses Gravity Forms' "Enhanced UI" (Chosen.js), which
   renders its own markup instead of the native <select> and has no idea the
   --gf-ctrl-* tokens above exist — it ships with its own plain grey styling.
   Matched by hand to the same border, radius and padding as every other
   field so it doesn't look like a different, older control living next to
   them. */
.gform_wrapper .chosen-container-single .chosen-single {
	height: auto;
	min-height: calc(1em + 2 * 0.85rem + 2 * 2px);
	line-height: 1.4;
	padding: 0.85rem 1rem;
	background: #FCFEEC;
	border: 2px solid #181818;
	border-radius: 8px;
	box-shadow: none;
}

/* Chosen draws its caret as a sprite image, which does not match anything
   else on the form. Blanking it leaves Gravity Forms' own chevron, which the
   orbital theme already paints on .chosen-single as an SVG background, and
   which is the same one every other select on the form uses.

   There used to be a hand-drawn CSS arrow here as well. That was the double
   chevron Ash spotted: the theme's chevron and ours, side by side. Nothing
   needs drawing, only the sprite needs removing. */
.gform_wrapper .chosen-container-single .chosen-single div b {
	background: none;
}

.gform_wrapper .chosen-container.chosen-with-drop .chosen-single {
	border-color: #181818;
}

.gform_wrapper .chosen-container-active.chosen-with-drop .chosen-single {
	box-shadow: 0 0 0 2px rgba(24, 24, 24, 0.15);
}

.gform_wrapper .chosen-container .chosen-drop {
	border: 2px solid #181818;
	border-top: none;
	border-radius: 0 0 8px 8px;
}

/* The icon itself is moved by --gf-ctrl-select-search-icon-position above.
   This just swaps the padding to match: room on the right for the icon, and a
   normal left inset so typed text lines up with every other field instead of
   starting behind an icon. */
.gform_wrapper .chosen-container .chosen-search input[type="text"] {
	width: 100% !important;
	border: 2px solid #181818;
	border-radius: 8px;
	padding: 0.65rem 2.75rem 0.65rem 1rem;
}

.gform_wrapper .chosen-container .chosen-results li.highlighted {
	background: #DEF340;
	color: #181818;
}

/* Post-sign-up confirmation. Gravity Forms' stock text ("Thanks for
   contacting us!") reads like a contact form and told a new teacher nothing
   about what to do next — nobody is logged in automatically, so the one thing
   this screen has to do is send them to the login page. */
.gform_confirmation_message .gameplan-confirmation {
	border: 2px solid #181818;
	border-radius: 12px;
	padding: 1.75rem;
	background: #FCFEEC;
	text-align: center;
}

.gform_confirmation_message .gameplan-confirmation h3 {
	margin: 0 0 0.5rem;
	font-weight: 700;
	font-size: 1.35rem;
	color: #181818;
}

.gform_confirmation_message .gameplan-confirmation p {
	margin: 0 0 1.25rem;
	color: #181818;
	line-height: 1.5;
}

.gform_confirmation_message .gameplan-confirmation__countdown {
	font-weight: 700;
}

.gform_confirmation_message .gameplan-confirmation__countdown [data-gp-countdown] {
	display: inline-block;
	min-width: 1.2em;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.gform_confirmation_message .gameplan-confirmation .gameplan-confirmation__button {
	display: inline-block;
	padding: 0.85rem 2rem;
	border: 2px solid #181818;
	border-radius: 999px;
	background: #DEF340;
	color: #181818;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	text-decoration: none;
}

.gform_confirmation_message .gameplan-confirmation .gameplan-confirmation__button:hover,
.gform_confirmation_message .gameplan-confirmation .gameplan-confirmation__button:focus {
	background: #181818;
	color: #DEF340;
}

/* The login links sit in a nav.gf_login_links that is a SIBLING of the form
   wrapper, not a child, so they cannot be reached through .gform_wrapper. */
.gf_login_links {
	margin-top: 0.9rem;
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
}

.gf_login_links a {
	color: var(--gameplan-dark, #181818);
	text-decoration: underline;
	font-size: 0.9rem;
}

.gf_login_links a:hover {
	color: var(--gameplan-orange, #FF5928);
}

/* Year groups: eight tickboxes laid out in a grid rather than a tall single
   column, so the question takes about as much room as the dropdown it
   replaced. Four across, two on a phone. */
.gform_wrapper .gameplan-year-groups .gfield_checkbox {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0.6rem 1rem;
}

@media (max-width: 480px) {
	.gform_wrapper .gameplan-year-groups .gfield_checkbox {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Everything must work down to 320px. */
@media (max-width: 480px) {
	.gform_wrapper .gform_footer .gform_button,
	.gform_wrapper .gform_footer input[type="submit"] {
		width: 100%;
	}
}