/* Applicant photo upload slot + modern 2-column form layout.
   Shared across public application forms: /spontanbewerbung (de/en/fr)
   and the job-specific Bewerbung form rendered by
   server/job-template-loader.js. Pair with /public/js/applicant-photo.js. */

/* Work-permit fieldset is hidden until a non-Swiss nationality is chosen.
   Each spontan file used to carry this rule inline; centralizing it here
   so the master job template gets it too (otherwise the field flashes
   visible on the first paint before the nationality script runs). */
.application_details .fieldset-arbeitsbewilligung.ab-hidden {
  display: none !important;
}

/* No outer width/padding overrides on the application wrapper or its
   surrounding Elementor section — the WP page layout controls those
   widths natively, the same way it did before the photo-upload work
   started. The form's per-section .form-grid layout still gives the
   2-col / 3-col packing on its own, independent of the wrapper width. */


/* Custom chevron on <select> elements. Browsers' native chevron sits flush
   against the right edge with no breathing room; we disable it and draw a
   slate-500 SVG chevron 14px from the right edge, with 40px right padding
   so option text never collides with it. */
.application_details select.input-text,
.application_details select.sprach-level-select,
.application_details select#sprachLevel {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2364748b'><path fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 14px !important;
  padding-right: 40px !important;
}

/* --- 2-column section grid -----------------------------------------------
   Wrap each form section's fieldsets in <div class="form-grid"> to pack
   logical pairs side-by-side on desktop. Long fields (Adresse,
   Sprachkenntnisse, textareas) take .span-2 to span both columns.
   The existing WP override `.application_details fieldset { width:100% !important }`
   is overridden here so grid items can shrink to their column.
*/
.application_details .form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 20px;
  padding: 6px 0 10px;
  margin: 0 0 8px;
  border-bottom: 1px solid #e5e7eb;
}

/* Section 1 carries the photo. Use a 3-column layout so that the two name
   fields can sit side-by-side on the left and the narrow photo slot takes
   the right rail. Without this, the photo's 120px footprint left a large
   empty gap to the left of it (its grid cell was half the form width). */
.application_details .form-grid.has-photo {
  grid-template-columns: 1fr 1fr auto;
}

.application_details .form-grid:last-of-type {
  border-bottom: none;
}

.application_details .form-grid > fieldset {
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border-bottom: none !important;
  min-width: 0;
}

.application_details .form-grid > .span-2 {
  grid-column: 1 / -1;
}

/* Photo lives in the right rail of section 1, spanning enough rows to sit
   next to vorname/nachname/anrede on the left. Source order keeps the
   photo fieldset at the end of section 1, so tab order is name fields
   first, photo last. */
.application_details .form-grid.has-photo > .fieldset-bewerbungsfoto {
  grid-column: 3;
  grid-row: 1 / span 3;
  align-self: start;
}

@media (max-width: 600px) {
  .application_details .form-grid,
  .application_details .form-grid.has-photo {
    grid-template-columns: 1fr;
  }
  .application_details .form-grid.has-photo > .fieldset-bewerbungsfoto {
    grid-column: 1;
    grid-row: auto;
    margin-top: 4px !important;
  }
}

/* --- Photo slot ----------------------------------------------------------- */
.fieldset-bewerbungsfoto {
  text-align: center;
}

/* Override the inline rule `.application_details fieldset > label
   { text-align: left !important }` for this specific label so the
   "Bewerbungsfoto (freiwillig)" sits centered above the slot,
   matching the centered help text below. */
.application_details .fieldset-bewerbungsfoto > label {
  text-align: center !important;
}

.fieldset-bewerbungsfoto > label {
  display: block;
  margin-bottom: 6px;
}

.fieldset-bewerbungsfoto > label small {
  color: #64748b;
}

.profile-photo-slot {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 160px;
  border: 2px dashed #cbd5e1;
  border-radius: 8px;
  background-color: #f8fafc;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  text-align: center;
  padding: 8px;
  box-sizing: border-box;
  transition: border-color 0.15s, background-color 0.15s;
  outline-offset: 2px;
}

/* Small X overlay top-right of the slot. Hidden until .has-image is added.
   All properties carry !important because the surrounding WP/Elementor
   page CSS injects heavy default button styles (padding, min-height,
   background, etc.) that would otherwise win. */
.profile-photo-remove {
  position: absolute !important;
  top: 6px !important;
  right: 6px !important;
  left: auto !important;
  bottom: auto !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  border-radius: 50% !important;
  background: rgba(15, 23, 42, 0.78) !important;
  color: #ffffff !important;
  border: none !important;
  outline: none !important;
  cursor: pointer !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  z-index: 2 !important;
  box-shadow: none !important;
  font: inherit !important;
  text-align: center !important;
  line-height: 1 !important;
  transition: background 0.15s ease !important;
}

.profile-photo-remove > svg {
  width: 14px !important;
  height: 14px !important;
  display: block !important;
  fill: none !important;
  stroke: currentColor !important;
}

.profile-photo-remove:hover,
.profile-photo-remove:focus-visible {
  background: rgba(15, 23, 42, 0.95) !important;
}

.profile-photo-slot.has-image .profile-photo-remove {
  display: inline-flex !important;
}

.profile-photo-slot:hover,
.profile-photo-slot:focus-visible {
  border-color: #94a3b8;
  background-color: #f1f5f9;
}

.profile-photo-slot.has-image {
  border-style: solid;
  border-color: #cbd5e1;
  background-color: transparent;
  padding: 0;
}

.profile-photo-slot.has-image .profile-photo-icon,
.profile-photo-slot.has-image .profile-photo-hint {
  display: none;
}

.profile-photo-icon {
  color: #94a3b8;
  margin-bottom: 8px;
  flex-shrink: 0;
}

.profile-photo-hint {
  font-size: 12px;
  color: #475569;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  max-width: 100%;
}

.profile-photo-help {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: #94a3b8;
}

/* Visually hidden but focusable input — clip-path pattern keeps the focus
   ring on the slot via :focus-visible since the slot itself is the
   keyboard-reachable button. */
.profile-photo-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}