/* ==========================================================================
   Forms  (August 2026)

   Replaces three embedded Google Forms with real forms posting to Formspree.
   The embeds were iframes on another origin, which meant three things: the
   questions were invisible to search engines and AI assistants, the styling was
   Google's rather than the site's, and a headless browser hit a sign-in wall.

   One stylesheet for all three so they stay identical. Field markup is plain
   label + control; nothing here depends on the JS in the page.
   ========================================================================== */

/* The form sits in a panel that borrows the site's one recurring card treatment —
   white, hairline rule, accent bar across the top — so it reads as part of the page
   rather than as something dropped onto it. Same shape as .services-consult. */
.fl-form {
  max-width: 720px;
  margin: 0 auto;
  padding: 34px 34px 30px;
  border: 1px solid var(--rule);
  border-top: 3px solid var(--accent);
  border-radius: 3px;
  background: var(--surface);
}
@media (max-width: 600px) { .fl-form { padding: 24px 20px 22px; } }

.fl-field { margin: 0 0 20px; }

/* Two-up on desktop for the short fields, stacked on a phone. */
.fl-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
@media (max-width: 640px) { .fl-row { grid-template-columns: 1fr; } }

.fl-label {
  display: block;
  margin: 0 0 6px;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.6px;
  line-height: 1.4;
  color: var(--heading);
}
.fl-req { color: var(--accent); margin-left: 2px; }
.fl-hint {
  display: block;
  margin: 4px 0 0;
  font-size: 12.5px;
  font-style: italic;
  color: #8c8c8c;
}

.fl-input,
.fl-select,
.fl-textarea {
  display: block;
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: #ffffff;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--heading);
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.fl-textarea { min-height: 130px; resize: vertical; }

/* A select has to keep its arrow once appearance is stripped. */
.fl-select {
  padding-right: 38px;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23666' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

.fl-input:focus,
.fl-select:focus,
.fl-textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(70, 183, 191, 0.16);
}
/* Error state only after the visitor has actually interacted with the field.
   :invalid alone paints every required field red the moment the page loads —
   an untouched form that looks like it is already full of mistakes. :user-invalid
   waits for a blur or a submit attempt. Browsers without it simply show no red,
   which is the safe way to fail. */
.fl-input:user-invalid,
.fl-select:user-invalid,
.fl-textarea:user-invalid { border-color: #c0392b; }
.fl-input:user-invalid:focus,
.fl-select:user-invalid:focus,
.fl-textarea:user-invalid:focus { box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.14); }

.fl-file {
  display: block;
  width: 100%;
  padding: 14px;
  border: 1px dashed var(--rule);
  border-radius: 3px;
  background: var(--surface-alt);
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--text);
  cursor: pointer;
}
.fl-file:focus { outline: 2px solid var(--accent); outline-offset: 2px; }

/* The honeypot. Off-screen rather than display:none, which some bots skip. */
.fl-gotcha {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* ------------------------------------------------------------ what's next -- */
.fl-next {
  margin: 30px 0 24px;
  padding: 20px 24px;
  border-left: 3px solid var(--accent);
  border-radius: 3px;
  background: var(--surface-alt);
}
.fl-next__title {
  margin: 0 0 8px;
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: var(--heading);
}
.fl-next p { margin: 0; font-size: 0.875rem; line-height: 1.7; }

/* ---------------------------------------------------------------- submit -- */
.fl-submit {
  display: inline-block;
  padding: 13px 38px;
  border: 0;
  border-radius: 2px;
  background: var(--accent);
  box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset;
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #ffffff;
  cursor: pointer;
  transition: opacity 0.15s, background 0.15s;
}
.fl-submit:hover { opacity: 0.9; }
.fl-submit:focus-visible { outline: 2px solid var(--heading); outline-offset: 3px; }
.fl-submit[disabled] { opacity: 0.55; cursor: default; }
.fl-actions { text-align: center; }

/* --------------------------------------------------------------- status --- */
.fl-status {
  margin: 18px 0 0;
  padding: 0;
  font-size: 0.9375rem;
  line-height: 1.7;
}
.fl-status:empty { display: none; }
.fl-status--ok {
  padding: 18px 22px;
  border-left: 3px solid var(--accent);
  border-radius: 3px;
  background: var(--surface-alt);
  color: var(--heading);
}
.fl-status--err {
  padding: 14px 18px;
  border-left: 3px solid #c0392b;
  border-radius: 3px;
  background: #fdf2f0;
  color: #8c2c20;
}

/* -------------------------------------------------- checkbox acknowledgement -- */
.fl-check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 11px;
  align-items: start;
  margin: 0 0 22px;
}
.fl-checkbox {
  width: 17px;
  height: 17px;
  margin: 2px 0 0;
  accent-color: var(--accent);
  cursor: pointer;
}
.fl-check__label {
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--text);
  cursor: pointer;
}

/* ------------------------------------------------------------------ legal -- */
.fl-legal {
  margin: 30px 0 24px;
  padding: 22px 24px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--surface-alt);
}
.fl-legal__title {
  margin: 0 0 12px;
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--heading);
}
.fl-legal__p {
  margin: 0 0 12px;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  line-height: 1.75;
  color: var(--text);
}
.fl-legal__p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------ form title -- */
.jobs-form-title {
  margin: 0 0 22px;
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--heading);
  text-align: center;
}
@media (min-width: 768px) {
  .jobs-form-title { font-size: 28px; }
}

/* ==========================================================================
   Job application (August 2026)

   Added when the original Google Form was recovered and the short proposed
   field list was replaced with its real 96 items. Everything below exists to
   support question types the other two forms never needed: section headers,
   Yes/No radio groups, the availability grid and the conditional block.
   ========================================================================== */

/* Section headers. The original form paginated — one section per screen. On a
   single page the same divisions have to be visible without pagination, so each
   becomes a ruled band. Deliberately quieter than .jobs-form-title: these are
   waypoints inside one form, not headings that compete with the page's own. */
.fl-sec {
  margin: 38px 0 20px;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--rule);
}
.fl-sec:first-child { margin-top: 0; }
.fl-sec__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--accent);
}
.fl-sec__desc {
  margin: 7px 0 0;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--text);
}

/* Employer 1-3, Reference 1-3. */
.fl-sub {
  margin: 26px 0 14px;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--heading);
}

/* City / State / Zip. Collapses to one column with the rest of .fl-row. */
.fl-row--3 { grid-template-columns: 2fr 1fr 1fr; }
@media (max-width: 640px) { .fl-row--3 { grid-template-columns: 1fr; } }

/* Help text carried over from the original form's own field descriptions —
   "(Email or phone number)", the criminal-conviction note. Distinct from
   .fl-hint, which is the rebuild's own voice and is italic. */
.fl-note {
  margin: 0 0 7px;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  line-height: 1.65;
  color: #6f6f6f;
}

/* A group of related controls under one question. A fieldset carries the
   grouping for a screen reader; the reset undoes the browser's default box so
   it measures the same as a .fl-field div. */
.fl-group {
  min-width: 0;
  margin: 0 0 20px;
  padding: 0;
  border: 0;
}
.fl-group__legend {
  float: left;      /* a legend ignores display:block in Chrome; the float and */
  width: 100%;      /* the clearfix below give it a normal block flow instead. */
  padding: 0;
}
.fl-group__legend + * { clear: both; }

.fl-radios { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.fl-radio,
.fl-check__inline {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--text);
  cursor: pointer;
}
.fl-radio input[type="radio"] {
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}
.fl-checks { display: flex; flex-direction: column; gap: 11px; }
.fl-check__inline .fl-checkbox { margin: 0; flex: none; }

/* Work Availability: a checkbox grid, Morning/Noon/Evening against the seven
   days. Scrolls inside itself rather than widening the form on a phone. */
.fl-avail { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.fl-avail__table {
  width: 100%;
  min-width: 400px;
  border-collapse: collapse;
  font-family: var(--font-body);
}
.fl-avail__table th {
  padding: 8px 6px;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--heading);
}
.fl-avail__table thead th { border-bottom: 1px solid var(--rule); }
.fl-avail__table tbody th { text-align: left; white-space: nowrap; padding-left: 0; }
.fl-avail__table td { padding: 9px 6px; text-align: center; }
.fl-avail__table tbody tr + tr th,
.fl-avail__table tbody tr + tr td { border-top: 1px solid var(--rule); }
.fl-avail__table abbr { text-decoration: none; border: 0; }
.fl-avail__corner { border-bottom: 1px solid var(--rule); }

/* The conditional Education block. [hidden] alone is enough — the script sets
   it — but grid and flex containers override it, so it is stated explicitly. */
.fl-cond[hidden] { display: none; }

/* In a two-up row one field may carry help text — "Leave blank if currently
   employed in this position." — and its neighbour none, which drops its control
   a line or two below the neighbour's. Stretch both to the row height and push
   the control to the bottom, so the inputs line up whatever the labels above
   them do. Only while the row is actually two-up; stacked, there is nothing to
   align against. Every .fl-row holds plain inputs, so nothing tall is affected. */
@media (min-width: 641px) {
  .fl-row > .fl-field { display: flex; flex-direction: column; }
  .fl-row > .fl-field > .fl-input,
  .fl-row > .fl-field > .fl-select { margin-top: auto; }
}

/* --------------------------------------------------------- jobs heading ---
   "Apply" on its own read as plain, which Christi flagged in August 2026. The
   eyebrow above it is the Google Form's own title, recovered with the rest of
   the form — real copy, not written for the occasion — and the rule beneath
   borrows the accent bar the rest of the site uses to open a section.
   See build-plan.md #40. */
.jobs-form-head { margin: 0 0 26px; text-align: center; }
.jobs-form-eyebrow {
  margin: 0 0 8px;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--accent);
}
.jobs-form-head .jobs-form-title { margin: 0; }
.jobs-form-head .jobs-form-title::after {
  content: "";
  display: block;
  width: 62px;
  height: 3px;
  margin: 14px auto 0;
  background: var(--accent);
  border-radius: 2px;
}

/* The availability grid had a 400px floor, which on a phone meant a table that
   scrolled sideways inside the form — it reads as the page being misaligned
   rather than as a scrollable control. Christi reported exactly that in August
   2026. Below 600px the floor is dropped and the cells tighten instead, so the
   seven days fit the screen. See build-plan.md #41. */
@media (max-width: 600px) {
  .fl-avail__table { min-width: 0; }
  .fl-avail__table th { padding: 6px 1px; font-size: 11px; letter-spacing: 0; }
  .fl-avail__table tbody th { padding-right: 6px; font-size: 11.5px; }
  .fl-avail__table td { padding: 8px 1px; }
  .fl-avail__table .fl-checkbox { width: 15px; height: 15px; }
}

/* The eyebrow is a long line of tracked-out capitals; it needs to give some of
   that back on a narrow screen rather than push the form wide. */
@media (max-width: 480px) {
  .jobs-form-eyebrow { font-size: 10.5px; letter-spacing: 0.8px; }
}

/* A blank required field is scrolled to when submission is refused. The site header
   is sticky and 182px tall, so without this the field can land underneath it. */
.fl-form input,
.fl-form select,
.fl-form textarea { scroll-margin-top: 200px; }