/**
 * Embed - School Locator: minimal, unbranded baseline.
 *
 * No colors, fonts, or decorative choices on purpose — the embedding
 * partner's own stylesheet (loader.js's data-css) is meant to be the only
 * thing shaping how this looks. Every rule here exists purely so the form
 * stays usable and doesn't overflow its container across the 500px-991px
 * width range it's designed to sit in, nothing more.
 */

* {
	box-sizing: border-box;
}

img, svg {
	max-width: 100%;
	height: auto;
}

/* Gravity Forms' own "gravity-theme" CSS lays fields out on a 12-column CSS
   grid (.gform_fields{display:grid}), with paired fields (Phone, Grade
   Level, etc.) assigned a specific grid-column span. That grid apparently
   depends on something the site's own (now-dequeued) app.css/style.css
   supplied — without it, those spanned fields don't just relayout, they
   fail to render at all. Forcing single-column stacking sidesteps the grid
   entirely rather than chasing the exact missing dependency: purely
   structural (no color), guaranteed visible and non-overflowing at any
   width in the 500px-991px range this page is built for. */
.gform_wrapper .gform_fields .gfield {
	display: block !important;
	width: 100% !important;
	min-width: 0 !important;
	grid-column: 1 / -1 !important;
}

/* Grid/flex items default to min-width:auto (sized to their content), which
   quietly blocks shrinking below that even when width:100% is set — the
   classic cause of "won't respond to container width" overflow. Applies to
   the grid container itself and the Name field's internal First/Last
   sub-layout, which lays out independently of the .gfield rule above. */
.gform_wrapper,
.gform_wrapper form,
.gform_body,
.gform_fields,
.ginput_complex,
.ginput_complex > span,
.name_first,
.name_last {
	min-width: 0 !important;
}

.ginput_complex {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 8px;
	width: 100% !important;
}

.ginput_complex > span {
	flex: 1 1 140px;
}

/* Functional, not decorative: school-locator.js drives the search flow via
   #trigger-school-search — the form's own native submit button must stay
   hidden or a visitor could bypass that flow (and validation) entirely. */
#gform_submit_button_26 {
	position: absolute;
	visibility: hidden;
	opacity: 0;
	height: 0;
	width: 0;
	padding: 0;
	border: 0;
	margin: 0;
}

.ginput_container,
.ginput_container input,
.ginput_container select,
.ginput_container textarea,
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
}

button {
	max-width: 100%;
}

/* Inline results panel (replaces the form in place — see school-locator.js) */
.sl-inline-panel {
	width: 100%;
	margin-top: 16px;
}

.sl-inline-panel .sl-search-container {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.sl-inline-panel .sl-search-container input {
	flex: 1 1 100px;
	min-width: 90px;
}

.sl-inline-panel .sl-list-container {
	margin-top: 15px;
}

.sl-inline-panel .sl-school-item {
	margin-bottom: 10px;
}

.sl-inline-panel .sl-btn-primary {
	width: 100%;
}

/* Hides Form 21 until the "no school in range" case reveals it */
.sl-hidden {
	display: none !important;
}

/* Functional, not decorative: the raw list of all ~85 schools (Field 9's
   real checkboxes) exists only as a sync target for the custom results UI
   in school-locator.js — it was never meant to be seen directly. */
/* Higher specificity than .gform_wrapper .gform_fields .gfield above, on
   purpose — this must win regardless of source order. */
.gform_wrapper .gform_fields .gfield.hidden-school-checkboxes {
	display: none !important;
}

/* Functional, not decorative: some visual signal that a required field
   failed validation is a usability baseline, not a brand choice — kept
   deliberately minimal (a border only, no fill/background color). */
.sl-input-error {
	border: 2px solid #c00 !important;
}

.sl-checkbox-error .gfield_checkbox {
	outline: 2px solid #c00;
}