/* =============================================================
   Best Work Culture — form styles
   Loaded only on pages that render a form (see $page['styles']).
   ============================================================= */

.form-page { padding-block: 4rem 6rem; }
/* The shared .section-head opens a marketing section and carries 4rem below
   it. Above a form the first card should follow closely. */
.form-page .section-head { text-align: left; margin-inline: 0; max-width: 40rem; margin-bottom: 1rem; }
/* The page heading sits above a dense form rather than opening a marketing
   section, so it is set much smaller than the shared .section-title clamp.
   Scoped to .form-page, which only this page uses, so the recognition, health
   check and 404 headings keep their original size. */
.form-page .section-title { font-size: 21px; margin-bottom: 0.75rem; }

/* ---------- Alerts ---------- */
.alert {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 1.125rem 1.25rem;
  border-radius: var(--radius);
  margin-bottom: 2rem;
}
.alert .icon { width: 20px; height: 20px; margin-top: 0.125rem; }
.alert--error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
}
.alert p { font-size: 0.9375rem; }

/* ---------- Form shell ---------- */
.form { max-width: 44rem; }

.form-section {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: 1.75rem;
  margin: 0 0 1.5rem;
}
/* A <legend> is painted on the fieldset's top border, so the page background
   showed through behind the heading while the rest of the card was white.
   Floating it at full width drops it into normal flow inside the padding box,
   which puts the card's own background behind it and leaves the border whole. */
.form-section__title {
  float: left;
  width: 100%;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  padding: 0;
  /* Room for sections that go straight into fields. Sections with a hint pull
     it back up, so the heading still reads as attached to its own hint. */
  margin-bottom: 1.125rem;
}
/* Clear the float so the first element does not wrap beside the heading. */
.form-section__title + * { clear: both; }
.form-section__title + .form-section__hint { margin-top: -0.75rem; }
.form-section__hint {
  font-size: 0.875rem;
  color: var(--text-soft);
  line-height: 1.6;
  margin-bottom: 1.25rem;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}
.form-row + .form-row { margin-top: 1.25rem; }

/* ---------- Fields ---------- */
.field { display: flex; flex-direction: column; margin: 0; }
.field + .field { margin-top: 1.25rem; }
/* Inside a row the grid gap handles spacing; the sibling margin would push
   the second column down and break the label baseline. */
.form-row .field + .field { margin-top: 0; }

.field__label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--secondary);
  margin-bottom: 0.4375rem;
}
.field__req { color: #dc2626; margin-left: 0.125rem; }
.field__optional {
  font-weight: 500;
  font-size: 0.75rem;
  color: var(--text-faint);
  margin-left: 0.25rem;
}

.field__input {
  width: 100%;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid #dbe2ea;
  border-radius: var(--radius-sm);
  padding: 0.75rem 0.875rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.field__input::placeholder { color: #a8b3c1; }
.field__input:hover { border-color: #c3ccd8; }
.field__input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}
.field__input--area { resize: vertical; min-height: 7rem; line-height: 1.6; }

select.field__input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 18px;
  padding-right: 2.5rem;
}

.field__hint {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--text-soft);
  margin-top: 0.4375rem;
}
.field__count { font-variant-numeric: tabular-nums; color: var(--text-faint); }
.field__count.is-near { color: var(--accent-deep); }
/* Counting up to a minimum rather than down to a limit: stays marked until the
   summary is long enough, then returns to the resting colour. */
.field__count.is-short { color: var(--accent-deep); font-weight: 600; }

.field__error {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #b91c1c;
  margin-top: 0.4375rem;
}
.field--error .field__input { border-color: #f0a3a3; background: #fffbfb; }
.field--error .field__input:focus { box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.12); }

/* Checkbox row */
.field--check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: start;
  padding: 1.25rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  margin-bottom: 1.5rem;
}
.field--check input {
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.1875rem;
  accent-color: var(--primary);
}
.field--check label { font-size: 0.875rem; color: var(--text-muted); line-height: 1.6; }
.field--check .field__error { grid-column: 1 / -1; }
.field--check.field--error { border-color: #f0a3a3; background: #fffbfb; }

/* .form-honeypot now lives in style.css: it is needed on pages that do not
   load this sheet, such as the newsroom. */

/* ---------- Photo upload ---------- */
.photo-field {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.photo-field__preview {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--bg);
  border: 1px solid var(--line);
}
.photo-field__preview img { width: 100%; height: 100%; object-fit: cover; }
.photo-field__control { flex: 1 1 16rem; }

.photo-drop {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 1.5rem 1.25rem;
  text-align: center;
  border: 2px dashed #cbd5e1;
  border-radius: var(--radius);
  background: var(--bg);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.photo-drop:hover { border-color: var(--primary); background: rgba(37, 99, 235, 0.04); }
.photo-drop.is-dragging {
  border-color: var(--primary);
  background: rgba(37, 99, 235, 0.08);
}
.photo-drop:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}
.photo-drop__label { font-weight: 600; font-size: 0.9375rem; color: var(--primary-dark); }
.photo-drop__hint { font-size: 0.8125rem; color: var(--text-soft); }

/* Keep the input focusable for keyboard users instead of display:none. */
/* Transparent but full-size, rather than a 1px sliver. A `required` control has
   to be focusable or Chrome blocks the submit without showing a message, and
   the validation bubble needs something real to anchor to. */
.photo-drop input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.photo-drop:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.14);
}

.photo-field__file {
  font-size: 0.8125rem;
  color: var(--text-soft);
  margin-top: 0.5rem;
  word-break: break-word;
}
.photo-field--error .photo-drop { border-color: #f0a3a3; background: #fffbfb; }

/* ---------- Actions ---------- */
.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}
.form-actions__note { font-size: 0.8125rem; color: var(--text-soft); }
.btn[aria-disabled="true"] { opacity: 0.65; pointer-events: none; }

/* ---------- Success ---------- */
.form-result { max-width: 38rem; }
.form-result__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: rgba(22, 163, 74, 0.1);
  color: #16a34a;
  margin-bottom: 1.5rem;
}
.form-result__icon .icon { width: 28px; height: 28px; }
.form-result .section-title { margin-bottom: 1rem; }
.form-result__ref {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.06em;
  background: var(--primary-soft);
  color: var(--primary-dark);
  padding: 0.125rem 0.5rem;
  border-radius: 6px;
}
.form-result__body {
  color: var(--text-muted);
  line-height: 1.7;
  margin-block: 1.25rem 2rem;
}

/* ---------- Responsive ---------- */
@media (max-width: 639px) {
  .form-row { grid-template-columns: minmax(0, 1fr); }
  .form-row + .form-row { margin-top: 0; }
  .form-row .field + .field { margin-top: 1.25rem; }
  .form-section { padding: 1.25rem; }
  .photo-field { gap: 1rem; }
  .photo-field__preview { width: 88px; height: 88px; }
  .form-actions .btn { width: 100%; }
}


/* ---------- reCAPTCHA ---------- */
/* The widget is a fixed-width iframe from Google. Below ~330px of available
   space it would push the layout out, so scale it down rather than let the
   page scroll sideways. */
.form-captcha { margin-block: 1.25rem; }
.form-captcha .g-recaptcha,
.newsletter__captcha .g-recaptcha { display: inline-block; }

@media (max-width: 360px) {
  .form-captcha .g-recaptcha,
  .newsletter__captcha .g-recaptcha {
    transform: scale(0.86);
    transform-origin: 0 0;
  }
}