/* ==========================================================
   LIST OF ALL JOBS — aplify_job_list_render() in shortcodes/job_list.php,
   shown by the plugin's /all-jobs/ page and by [aplify_job_list].
   The search box and the town / A–Z switch share one field: the switch
   sits at its right-hand end. Jobs are rows with a chevron, filed under
   their town in two columns, or one A–Z list with the town under each
   title. Colours, type and field shapes all come from the Design Tokens,
   like the apply form, so it matches the rest of the plugin.

   Inside a client's own page the theme's link, button and input styles
   are all around it (Hello Elementor restyles all three), so those rules
   carry !important where a theme's would otherwise win — the same choice
   recently_viewed.css made after hitting it.
   ========================================================== */

.aplify-all-jobs {
  font-family: var(--font-family);
  color: var(--fg);
}

.aplify-all-jobs h2,
.aplify-all-jobs h3,
.aplify-all-jobs button,
.aplify-all-jobs input {
  font-family: inherit;
  letter-spacing: normal;
  text-transform: none;
}

.aplify-all-jobs-intro {
  margin: 0 0 24px;
}

.aplify-all-jobs .aplify-all-jobs-intro h2 {
  margin: 0 0 6px;
  color: var(--primary);
  font-size: var(--text-2xl, 24px);
  font-weight: var(--display-weight, 550);
  line-height: 1.25;
  text-wrap: balance;
}

.aplify-all-jobs .aplify-all-jobs-intro p {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-md, 16px);
}

.aplify-all-jobs-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ── Search field, with the switch inside it ────────────────── */

.aplify-all-jobs-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  max-width: 48rem; /* a full-width theme page would stretch it to 1100px+ */
  min-height: var(--field-h, 52px);
  margin: 0 0 8px;
  padding: 0 5px 0 18px;
  background: var(--input-bg, #fff);
  border: var(--field-border-w, 1.5px) solid var(--field-border, #e6e9f0);
  border-radius: var(--field-radius, 12px);
}

.aplify-all-jobs-search:hover {
  border-color: var(--field-border-hover, #d5dbe6);
}

.aplify-all-jobs-search:focus-within {
  border-color: var(--ring);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 20%, transparent);
}

.aplify-all-jobs-search > i {
  flex-shrink: 0;
  font-size: 20px;
  color: var(--muted);
}

.aplify-all-jobs-search .aplify-all-jobs-input {
  flex: 1;
  width: auto !important;
  min-width: 0;
  height: auto !important;
  margin: 0 !important;
  padding: 12px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  font-size: var(--text-md, 16px);
  line-height: 1.4;
  color: var(--fg) !important;
}

/* The browser's own clear button would sit beside ours. */
.aplify-all-jobs-search input::-webkit-search-cancel-button,
.aplify-all-jobs-search input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

.aplify-all-jobs-search input::placeholder {
  color: var(--placeholder-color, #868d97);
  opacity: var(--placeholder-opacity, .9);
}

.aplify-all-jobs .aplify-all-jobs-clear {
  flex-shrink: 0;
  display: none;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: var(--muted) !important;
  font-size: 17px;
  cursor: pointer;
}

.aplify-all-jobs .aplify-all-jobs-clear:hover {
  background: var(--dropdown-hover, #eef0f5) !important;
}

.aplify-all-jobs-search.has-value .aplify-all-jobs-clear {
  display: grid;
}

.aplify-all-jobs-view {
  flex-shrink: 0;
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--flow-tabs-bg, #edf0f6);
  border-radius: calc(var(--field-radius, 12px) - 4px);
}

.aplify-all-jobs .aplify-all-jobs-view button {
  margin: 0;
  padding: 7px 12px !important;
  border: 0 !important;
  border-radius: calc(var(--field-radius, 12px) - 6px) !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: var(--text-sm, 13px) !important;
  font-weight: 500 !important;
  line-height: 1.3;
  color: var(--muted) !important;
  white-space: nowrap;
  cursor: pointer;
}

.aplify-all-jobs .aplify-all-jobs-view button[aria-pressed="true"] {
  background: var(--input-bg, #fff) !important;
  color: var(--fg) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08) !important;
}

.aplify-all-jobs-view button:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 1px;
}

.aplify-all-jobs-short {
  display: none;
}

.aplify-all-jobs-status {
  min-height: 1.5em;
  margin: 0 0 20px;
  color: var(--muted);
  font-size: var(--text-sm, 13px);
}

/* ── The list ───────────────────────────────────────────────── */

.aplify-all-jobs-towns {
  /* As many 15rem columns as fit, up to three: two in the flow card, three
     across a wide theme page, one on a phone. */
  columns: 15rem 3;
  column-gap: 40px;
}

.aplify-all-jobs-town {
  break-inside: avoid;
  /* Padding, not margin: a top margin is dropped at the head of a column
     in some browsers and kept in others, which staggers the columns. */
  padding-bottom: 24px;
}

.aplify-all-jobs .aplify-all-jobs-town h3 {
  margin: 0;
  padding: 0 0 8px;
  border-bottom: var(--panel-border-w, 1px) solid var(--panel-border);
  font-size: var(--text-md, 16px);
  font-weight: var(--display-weight, 550);
  color: var(--fg);
}

.aplify-all-jobs .aplify-all-jobs-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.aplify-all-jobs .aplify-all-jobs-list li {
  margin: 0;
  padding: 0;
  border-bottom: var(--panel-border-w, 1px) solid var(--panel-border);
}

.aplify-all-jobs .aplify-all-jobs-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 10px 12px 0;
  border-radius: 6px;
  color: var(--job-title-color, var(--primary)) !important;
  font-size: var(--text-md, 16px);
  font-weight: 500;
  line-height: 1.35;
  text-decoration: none !important;
  box-shadow: none !important;
}

.aplify-all-jobs-list a > span {
  min-width: 0;
}

.aplify-all-jobs-town-name {
  display: block;
  margin-top: 2px;
  font-size: var(--text-sm, 13px);
  font-weight: var(--weight-body, 400);
  color: var(--muted);
}

.aplify-all-jobs-list a i {
  flex-shrink: 0;
  font-size: 18px;
  color: var(--muted);
  transition: transform .15s ease, color .15s ease;
}

.aplify-all-jobs .aplify-all-jobs-list a:hover {
  color: var(--job-title-color-hover, var(--job-title-color, var(--primary))) !important;
}

.aplify-all-jobs-list a:hover i {
  color: var(--job-title-color, var(--primary));
  transform: translateX(3px);
}

.aplify-all-jobs-list a:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

.aplify-all-jobs mark {
  padding: 0 1px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--job-title-color, var(--primary)) 18%, transparent);
  color: inherit;
}

.aplify-all-jobs [hidden] {
  display: none !important;
}

/* ── Nothing to show ────────────────────────────────────────── */

.aplify-all-jobs-empty {
  display: none;
  padding: 28px 24px;
  text-align: center;
  border: var(--panel-border-w, 1px) dashed var(--panel-border);
  border-radius: 16px;
}

.aplify-all-jobs.is-empty .aplify-all-jobs-empty {
  display: block;
}

.aplify-all-jobs-empty p {
  margin: 0 0 12px;
  color: var(--fg);
}

.aplify-all-jobs .aplify-all-jobs-show-all {
  padding: 10px 20px !important;
  border: 0 !important;
  border-radius: var(--btn-radius, 999px) !important;
  background: var(--primary) !important;
  color: var(--button-text-color, #fff) !important;
  font-size: var(--text-md, 16px) !important;
  font-weight: var(--button-weight, 600) !important;
  text-transform: var(--btn-text-transform, none);
  cursor: pointer;
}

.aplify-all-jobs .aplify-all-jobs-state {
  max-width: 40rem;
  margin: 0;
  padding: 20px 24px;
  color: var(--fg);
  font-size: var(--text-md, 16px);
  line-height: 1.5;
  background: var(--job-card-bg, var(--input-bg));
  border: var(--panel-border-w, 1px) solid var(--panel-border);
  border-radius: 12px;
}

/* A phone has no room for the long labels beside the search box; the
   script swaps the placeholder to "Job or town" at the same width. */
@media (max-width: 480px) {
  .aplify-all-jobs-long {
    display: none;
  }

  .aplify-all-jobs-short {
    display: inline;
  }

  .aplify-all-jobs-view button {
    padding: 7px 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .aplify-all-jobs-list a i {
    transition: none;
  }
}