:root{--page-title-display:none;}/* Start custom CSS *//* ════════════════════════════════════════════════════════
   Employment Application Page — Holistic Helpers Design
   Fonts: Fraunces (headings) | Satoshi (body)
   ════════════════════════════════════════════════════════ */

/* ── HERO SECTION LAYOUT ── */
.hero-outer {
  background-color: #4A6B50;
  padding: 128px 0 80px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.hero-inner {
  max-width: 1140px;
  width: 100%;
  padding: 0 32px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* ── Hero typography ── */
.hero-eyebrow { opacity: 0.65; }
.hero-subtitle { opacity: 0.72; }

/* ── Hero notice boxes ── */
.eeo-box {
  background-color: rgba(255, 253, 244, 0.10) !important;
  border: 1px solid rgba(255, 253, 244, 0.15) !important;
  border-radius: 16px;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.conf-box {
  background-color: rgba(255, 253, 244, 0.07) !important;
  border: 1px solid rgba(255, 253, 244, 0.12) !important;
  border-radius: 16px;
  padding: 16px 24px;
}

/* ── FORM SECTION LAYOUT ── */
.form-outer {
  background-color: #FFFDF4;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.form-inner {
  max-width: 1140px;
  width: 100%;
  padding: 64px 24px 80px;
  display: flex;
  flex-direction: column;
}

/* ── Hero notice box rgba backgrounds + borders (also via s- classes) ── */
.s-eeo-box {
  background-color: rgba(255, 253, 244, 0.10) !important;
  border: 1px solid rgba(255, 253, 244, 0.15) !important;
}

.s-conf-box {
  background-color: rgba(255, 253, 244, 0.07) !important;
  border: 1px solid rgba(255, 253, 244, 0.12) !important;
}

/* ════════════════════════════════════════════════════════
   Fluent Form #3 Styling
   ════════════════════════════════════════════════════════ */

/* Font baseline — use site fonts */
.fluentform_wrapper_3,
.fluentform_wrapper_3 input,
.fluentform_wrapper_3 textarea,
.fluentform_wrapper_3 select,
.fluentform_wrapper_3 button,
.fluentform_wrapper_3 label {
  font-family: 'Satoshi', Arial, sans-serif !important;
  box-sizing: border-box;
}

/* Hide the duplicate EEO notice already shown in the hero */
.fluentform_wrapper_3 .ff-el-group[data-name="custom_html-3_1"] {
  display: none;
}

/* ── Field group spacing ── */
.fluentform_wrapper_3 .ff-el-group {
  margin-bottom: 20px;
}

/* ── Labels ── */
.fluentform_wrapper_3 .ff-el-input--label label {
  display: block;
  font-family: 'Satoshi', Arial, sans-serif !important;
  font-size: 14px;
  font-weight: 600;
  color: #1E2A22;
  margin-bottom: 6px;
  line-height: 1.4;
}

/* Required asterisk — custom, hide Fluent's default */
.fluentform_wrapper_3 .ff-el-is-required .ff-el-input--label label::after {
  content: ' *';
  color: #66A825;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  vertical-align: middle;
}

.fluentform_wrapper_3 .ff-el-input--label .asterisk {
  display: none;
}

/* ── Form controls (inputs, textareas, selects) ── */
.fluentform_wrapper_3 .ff-el-form-control {
  width: 100%;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid #C4D4C7;
  background: #FFFFFF;
  font-family: 'Satoshi', Arial, sans-serif !important;
  font-size: 14px;
  color: #1E2A22;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  line-height: 1.5;
}

.fluentform_wrapper_3 .ff-el-form-control:focus {
  border-color: #66A825;
  box-shadow: 0 0 0 3px rgba(102, 168, 37, 0.15);
}

.fluentform_wrapper_3 .ff-el-form-control::placeholder {
  color: #6D7C70;
  opacity: 1;
}

/* ── Select dropdown arrow ── */
.fluentform_wrapper_3 select.ff-el-form-control {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%236D7C70' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
  background-color: #FFFFFF;
  padding-right: 44px;
  cursor: pointer;
}

/* ── Textarea ── */
.fluentform_wrapper_3 textarea.ff-el-form-control {
  resize: vertical;
  min-height: 90px;
}

/* ── Date input ── */
.fluentform_wrapper_3 input[type="date"].ff-el-form-control {
  cursor: pointer;
}

/* ── Number input ── */
.fluentform_wrapper_3 input[type="number"].ff-el-form-control::-webkit-inner-spin-button,
.fluentform_wrapper_3 input[type="number"].ff-el-form-control::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ── Section breaks — styled like React SectionHeader ── */
.fluentform_wrapper_3 .ff-el-group.ff-el-section-break {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-top: 52px;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(196, 212, 199, 0.35);
}

.fluentform_wrapper_3 .ff-el-group.ff-el-section-break:first-of-type {
  margin-top: 0;
}

.fluentform_wrapper_3 .ff-el-section-title {
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: 26px;
  font-weight: 400;
  color: #004F24;
  margin: 0;
  padding: 0;
  line-height: 1.3;
}

/* Hide the hr and spacer div inside section breaks */
.fluentform_wrapper_3 .ff-el-group.ff-el-section-break hr,
.fluentform_wrapper_3 .ff-el-group.ff-el-section-break .ff-section_break_desk {
  display: none;
}

/* ── Radio buttons ── */
.fluentform_wrapper_3 .ff-el-input--content > .ff-el-form-check {
  display: inline-flex;
  align-items: center;
  margin-right: 24px;
  margin-bottom: 4px;
}

.fluentform_wrapper_3 .ff-el-form-check-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Satoshi', Arial, sans-serif !important;
  font-size: 14px;
  font-weight: 400;
  color: #1E2A22;
  cursor: pointer;
}

.fluentform_wrapper_3 .ff-el-form-check-input {
  accent-color: #66A825;
  width: 16px;
  height: 16px;
  cursor: pointer;
  margin: 0;
  flex-shrink: 0;
}

/* ── Custom HTML blocks inside the form ── */
.fluentform_wrapper_3 .ff-el-group.ff-custom_html:not([data-name="custom_html-3_1"]) {
  background: #F2F8EE;
  border: 1px solid rgba(0, 79, 36, 0.08);
  border-radius: 12px;
  padding: 20px 24px;
  font-family: 'Satoshi', Arial, sans-serif !important;
  font-size: 14px;
  line-height: 1.75;
  color: #3A4E3D;
  margin-bottom: 24px;
}

.fluentform_wrapper_3 .ff-el-group.ff-custom_html p {
  margin: 0 0 8px;
}
.fluentform_wrapper_3 .ff-el-group.ff-custom_html p:last-child {
  margin: 0;
}

/* ── Submit button area ── */
.fluentform_wrapper_3 .ff_submit_btn_wrapper {
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid rgba(196, 212, 199, 0.3);
}

.fluentform_wrapper_3 .ff_btn_submit {
  background: #66A825 !important;
  color: #FFFFFF !important;
  font-family: 'Satoshi', Arial, sans-serif !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  letter-spacing: 0.01em !important;
  padding: 14px 40px !important;
  border-radius: 9999px !important;
  border: none !important;
  cursor: pointer !important;
  transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s !important;
  box-shadow: 0 4px 20px -4px rgba(102, 168, 37, 0.4) !important;
  display: inline-flex !important;
  align-items: center;
}

.fluentform_wrapper_3 .ff_btn_submit:hover {
  background: #5a9520 !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 28px -4px rgba(102, 168, 37, 0.5) !important;
}

.fluentform_wrapper_3 .ff_btn_submit:active {
  transform: translateY(0) scale(0.97);
}

/* ── Validation errors ── */
.fluentform_wrapper_3 .error {
  font-family: 'Satoshi', Arial, sans-serif;
  font-size: 12px;
  color: #C4441A;
  margin-top: 4px;
  font-weight: 400;
}

.fluentform_wrapper_3 .ff-el-is-error .ff-el-form-control {
  border-color: #C4441A !important;
  box-shadow: 0 0 0 3px rgba(196, 68, 26, 0.12) !important;
}

/* ── Form success message ── */
.fluentform_wrapper_3 .ff-message-success {
  background: #F2F8EE;
  border: 1px solid rgba(102, 168, 37, 0.3);
  border-radius: 16px;
  padding: 32px;
  text-align: center;
  color: #004F24;
  font-family: 'Satoshi', Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
}
/* ── File Upload Fields ── */
.fluentform_wrapper_3 .ff_file_upload_holder {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.fluentform_wrapper_3 .ff_upload_btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  background: transparent;
  color: #66A825;
  border: 1.5px solid #66A825;
  border-radius: 9999px;
  font-family: 'Satoshi', Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
  white-space: nowrap;
}

.fluentform_wrapper_3 .ff_upload_btn:hover {
  background: #66A825;
  color: #FFFFFF;
}

/* The actual hidden file input */
.fluentform_wrapper_3 .ff-screen-reader-element {
  position: absolute;
  clip: rect(0 0 0 0);
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Uploaded file list */
.fluentform_wrapper_3 .ff-upload-preview {
  font-size: 13px;
  color: #3A4E3D;
  margin-top: 6px;
}

.fluentform_wrapper_3 .ff-upload-preview .ff-upload-preview-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #F2F8EE;
  border: 1px solid rgba(102, 168, 37, 0.2);
  border-radius: 8px;
  padding: 6px 12px;
  margin-top: 6px;
}

/* Upload progress */
.fluentform_wrapper_3 .ff-upload-progress {
  height: 4px;
  background: #C4D4C7;
  border-radius: 4px;
  overflow: hidden;
  margin-top: 6px;
}

.fluentform_wrapper_3 .ff-upload-progress-bar {
  height: 100%;
  background: #66A825;
  transition: width 0.3s;
}
/* ── Form grid layout — flex wrap with named column classes ── */
.fluentform_wrapper_3 fieldset {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-start;
}

/* Remove the old per-field bottom margin so gap handles spacing */
.fluentform_wrapper_3 fieldset > .ff-el-group {
  margin-bottom: 0;
}

/* Column widths */
.fluentform_wrapper_3 .ff-col-12 { flex: 0 0 100%; max-width: 100%; }
.fluentform_wrapper_3 .ff-col-6  { flex: 0 0 calc(50% - 10px);     max-width: calc(50% - 10px); }
.fluentform_wrapper_3 .ff-col-4  { flex: 0 0 calc(33.333% - 14px); max-width: calc(33.333% - 14px); }
.fluentform_wrapper_3 .ff-col-3  { flex: 0 0 calc(25% - 15px);     max-width: calc(25% - 15px); }

/* Section breaks, custom HTML, and submit always span full row */
.fluentform_wrapper_3 .ff-el-section-break,
.fluentform_wrapper_3 .ff-custom_html,
.fluentform_wrapper_3 .ff_submit_btn_wrapper {
  flex: 0 0 100% !important;
  max-width: 100% !important;
}

/* Mobile: all fields full width below 640px */
@media (max-width: 640px) {
  .fluentform_wrapper_3 .ff-col-6,
  .fluentform_wrapper_3 .ff-col-4,
  .fluentform_wrapper_3 .ff-col-3 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* Tablet: quarter-width fields become half-width at tablet */
@media (min-width: 641px) and (max-width: 900px) {
  .fluentform_wrapper_3 .ff-col-3 {
    flex: 0 0 calc(50% - 10px);
    max-width: calc(50% - 10px);
  }
  .fluentform_wrapper_3 .ff-col-4 {
    flex: 0 0 calc(50% - 10px);
    max-width: calc(50% - 10px);
  }
}/* End custom CSS */