/* Dataway careers page. All rules are scoped under .dw-careers and #job-modal
   so they never collide with the legacy .adam-careers-* / .career-item styles.

   SHAPE RULE (one radius per role, never mixed):
     buttons and pills = 999px  |  cards, rows of surfaces and the modal = 20px  |  inputs = 10px
   MOTION RULE: one authored moment (the hero entrance). Everything else is feedback:
     press = scale(.97), hover lift = 200ms, modal = 250ms in / 180ms out, card stagger = 260ms.
   Exponential ease-out only, from an already-visible default.
   prefers-reduced-motion: reduce -> hero and cards do not animate at all, modal opens and closes instantly;
   only colour / opacity hover transitions remain. */

.dw-careers,
#job-modal {
  --dw-navy: var(--e-global-color-primary, #233563);
  --dw-blue: var(--e-global-color-secondary, #2C57A2);
  --dw-green: var(--e-global-color-accent, #21ECA3);
  --dw-ink: #0B1220;
  /* Body-size copy on the light tint and on white: 5.6:1 and 6.5:1 (the home page grey #717E8C is for large text only). */
  --dw-text-strong: #56657A;
  --dw-line: rgba(35, 53, 99, 0.12);
  --dw-grad: linear-gradient(210deg, var(--dw-blue), var(--dw-navy));
  --dw-tint: #F5F8FC;
  --dw-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --dw-expo: cubic-bezier(0.16, 1, 0.3, 1);
  font-family: "Ploni", assistant, sans-serif;
  color: var(--dw-text-strong);
  line-height: 1.5;
  caret-color: var(--dw-blue);
}

.dw-careers *,
.dw-careers *::before,
.dw-careers *::after,
#job-modal *,
#job-modal *::before,
#job-modal *::after {
  box-sizing: border-box;
}

.dw-careers [hidden],
#job-modal [hidden] {
  display: none !important;
}

/* Browser surfaces themed from the palette */
.dw-careers ::selection,
#job-modal ::selection {
  background: var(--dw-navy);
  color: #fff;
}

.dw-careers .dw-hero ::selection,
.dw-careers .dw-band ::selection {
  background: var(--dw-green);
  color: var(--dw-ink);
}

.dw-careers a,
#job-modal a {
  text-underline-offset: 3px;
}

/* The wrapper is full width: each section is a full-bleed band with a 1140px container inside. */
.dw-careers {
  width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: clip;
}

.dw-careers .dw-container {
  max-width: 1140px;
  margin-inline: auto;
  padding-inline: 15px;
}

/* ---------- Hero (photo layer + navy overlay, text stays on the dark right side) ---------- */
.dw-careers .dw-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: max(440px, 60vh);
  padding-block: 72px;
  background-color: var(--dw-navy);
  color: #fff;
}

/* photo layer: separate from the section so it can settle from scale(1.04) to 1 */
.dw-careers .dw-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: url("/careers/assets/hero.webp"); /* תמונת הירו של דף המשרות (1916×821) */
  background-position: center 38%;
  background-size: cover;
  background-repeat: no-repeat;
  transform-origin: center right;
  pointer-events: none;
}

/* Overlay carries the legibility (no text-shadow glow): the stops keep white text at 4.5:1 or better
   over the light wall of the photo; the left side stays light enough to show the people. */
.dw-careers .dw-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(90deg, rgba(35, 53, 99, 0.3) 18%, rgba(35, 53, 99, 0.78) 42%, rgba(35, 53, 99, 0.94) 100%);
  pointer-events: none;
}

.dw-careers .dw-hero .dw-container {
  width: 100%;
}

.dw-careers .dw-hero-text {
  max-width: 720px; /* stays on the right (dark) side of the photo, like the home page */
  text-align: start;
}

.dw-careers .dw-hero-h1 {
  margin: 0;
  font-family: "Ploni", assistant, sans-serif;
  font-size: 60px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-wrap: balance;
  overflow-wrap: anywhere;
  color: #fff;
}

.dw-careers .dw-hero-h1 .dw-h1-line {
  display: block;
}

.dw-careers .dw-nowrap {
  white-space: nowrap;
}

.dw-careers .dw-hero-h1 .dw-accent {
  color: var(--dw-green);
}

.dw-careers .dw-hero-sub {
  max-width: 46ch;
  margin: 24px 0 36px;
  font-size: 20px;
  line-height: 1.5;
  text-wrap: pretty;
  color: #fff;
}

.dw-careers .dw-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 16px;
}

/* THE one authored motion moment: line 1, line 2, subtext and CTA row rise in sequence (90ms stagger),
   the photo settles. The default state is visible; the keyframes supply the hidden "from" only while animating. */
@keyframes dw-rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

@keyframes dw-settle {
  from { transform: scale(1.04); }
  to { transform: scale(1); }
}

@media (prefers-reduced-motion: no-preference) {
  .dw-careers .dw-hero::after {
    animation: dw-settle 1200ms var(--dw-expo) backwards;
  }

  .dw-careers .dw-hero-h1 .dw-h1-line:nth-child(1),
  .dw-careers .dw-hero-h1 .dw-h1-line:nth-child(2),
  .dw-careers .dw-hero-sub,
  .dw-careers .dw-hero-actions {
    animation: dw-rise 600ms var(--dw-expo) backwards;
  }

  .dw-careers .dw-hero-h1 .dw-h1-line:nth-child(2) { animation-delay: 90ms; }
  .dw-careers .dw-hero-sub { animation-delay: 180ms; }
  .dw-careers .dw-hero-actions { animation-delay: 270ms; }
}

/* ---------- Sections ---------- */
.dw-careers .dw-section {
  padding-block: 96px 80px;
  background-color: #fff;
  scroll-margin-top: 100px;
}

.dw-careers .dw-browse {
  background-color: var(--dw-tint);
}

.dw-careers .dw-h2 {
  margin: 0;
  font-family: "Ploni", assistant, sans-serif;
  font-size: 48px;
  font-weight: 700;
  line-height: 1.12;
  text-align: center;
  text-wrap: balance;
  overflow-wrap: anywhere;
  color: var(--dw-navy);
}

.dw-careers #browse-title {
  margin-block-end: 32px;
}

.dw-careers .dw-lead {
  max-width: 60ch;
  margin: 16px auto 56px;
  font-size: 20px;
  line-height: 1.55;
  text-align: center;
  text-wrap: pretty;
  color: var(--dw-text-strong);
}

.dw-careers .dw-status {
  margin: 0 0 24px;
  font-size: 20px;
  text-align: center;
  color: var(--dw-navy);
}

.dw-careers .dw-status.is-error {
  padding: 16px 20px;
  border: 1px solid #B4231833;
  border-radius: 10px;
  background: #B423180F;
  color: #8A1C13;
}

/* ---------- Category index (rows, no card chrome) ---------- */
.dw-careers .dw-cat-index {
  display: flex;
  flex-direction: column;
}

.dw-careers .dw-cat,
.dw-careers .dw-cat:hover,
.dw-careers .dw-cat:focus {
  /* neutralises the theme's button hover/focus fill; the real hover is gated below */
  border: 0;
  border-radius: 0;
  background-color: transparent;
  color: var(--dw-navy);
  box-shadow: none;
}

.dw-careers .dw-cat {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  grid-template-areas: "icon text count arrow";
  align-items: center;
  gap: 0 24px;
  width: calc(100% + 30px);
  margin: 0 -15px;
  padding: 28px 15px;
  font: inherit;
  text-align: start;
  white-space: normal;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color 180ms var(--dw-ease);
}

.dw-careers .dw-cat + .dw-cat {
  border-block-start: 1px solid var(--dw-line);
}

.dw-careers .dw-cat-icon {
  grid-area: icon;
  display: inline-flex;
  color: var(--dw-blue);
}

.dw-careers .dw-cat-icon svg {
  width: 32px;
  height: 32px;
}

.dw-careers .dw-cat-text {
  grid-area: text;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.dw-careers .dw-cat-label {
  font-family: "Ploni", assistant, sans-serif;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--dw-navy);
  transition: color 180ms var(--dw-ease);
}

.dw-careers .dw-cat-blurb {
  max-width: 65ch;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--dw-text-strong);
}

.dw-careers .dw-cat-count {
  grid-area: count;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--dw-navy);
}

.dw-careers .dw-cat-count.is-empty {
  font-weight: 400;
  color: var(--dw-text-strong);
}

.dw-careers .dw-cat-arrow {
  grid-area: arrow;
  display: inline-flex;
  color: var(--dw-blue);
  transition: transform 180ms var(--dw-ease);
}

.dw-careers .dw-cat-arrow svg {
  width: 24px;
  height: 24px;
}

/* rows without open jobs: quieter, still clickable (the empty view offers the CV link) */
.dw-careers .dw-cat.is-empty .dw-cat-label {
  color: #56657A;
}

.dw-careers .dw-cat.is-empty .dw-cat-blurb {
  color: #5F6B79;
}

.dw-careers .dw-cat.is-empty .dw-cat-icon {
  opacity: 0.55;
}

.dw-careers .dw-cat.is-empty .dw-cat-arrow {
  visibility: hidden; /* keeps the count column aligned with the other rows */
}

@media (hover: hover) and (pointer: fine) {
  .dw-careers .dw-cat:hover {
    background-color: rgba(44, 87, 162, 0.06);
  }

  .dw-careers .dw-cat:hover .dw-cat-label {
    color: var(--dw-blue);
  }

  .dw-careers .dw-cat:hover .dw-cat-arrow {
    transform: translateX(-4px); /* toward the reading direction (left) */
  }

  .dw-careers .dw-cat.is-empty:hover .dw-cat-label {
    color: #56657A;
  }
}

.dw-careers .dw-cat:focus-visible {
  outline: 3px solid var(--dw-green);
  outline-offset: 2px;
  background-color: rgba(44, 87, 162, 0.06);
}

/* ---------- Jobs view: category switcher ---------- */
.dw-careers .dw-switcher {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  margin: -6px;
  padding: 6px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.dw-careers .dw-switcher::-webkit-scrollbar {
  display: none;
}

.dw-careers .dw-switcher .dw-pill:first-child { margin-inline-start: auto; }
.dw-careers .dw-switcher .dw-pill:last-child { margin-inline-end: auto; }

.dw-careers .dw-pill,
.dw-careers .dw-pill:hover,
.dw-careers .dw-pill:focus {
  border: 1.5px solid var(--dw-navy);
  background-color: transparent;
  color: var(--dw-navy);
  box-shadow: none;
}

.dw-careers .dw-pill {
  flex: none;
  scroll-snap-align: start;
  min-height: 44px;
  max-width: 100%;
  margin: 0;
  padding: 8px 22px;
  border-radius: 999px;
  font-family: "Ploni", assistant, sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: transform 160ms var(--dw-ease), background-color 180ms var(--dw-ease), color 180ms var(--dw-ease);
}

.dw-careers .dw-pill.is-active,
.dw-careers .dw-pill.is-active:hover,
.dw-careers .dw-pill.is-active:focus {
  background-color: var(--dw-navy);
  color: #fff;
}

.dw-careers .dw-pill:active {
  transform: scale(0.97);
}

@media (hover: hover) and (pointer: fine) {
  .dw-careers .dw-pill:not(.is-active):hover {
    background-color: rgba(35, 53, 99, 0.08);
  }
}

@media (min-width: 768px) {
  .dw-careers .dw-switcher {
    flex-wrap: wrap;
    justify-content: center;
    overflow: visible;
  }

  .dw-careers .dw-pill {
    max-width: 260px;
  }
}

/* mobile: the row scrolls sideways edge to edge; 16px side padding keeps the first / last pill clear of the edge,
   a soft fade on both edges shows that more is there */
@media (max-width: 767px) {
  .dw-careers .dw-switcher {
    margin: -6px -15px;
    padding: 6px 16px;
    scroll-padding-inline: 16px;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
  }
}

.dw-careers .dw-back-link,
.dw-careers .dw-back-link:hover,
.dw-careers .dw-back-link:focus {
  border: 0;
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
  color: var(--dw-blue);
}

.dw-careers .dw-back-link {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin: 12px auto 0;
  padding: 8px 12px;
  font-family: "Ploni", assistant, sans-serif;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.dw-careers .dw-back-link svg {
  flex: none;
  width: 18px;
  height: 18px;
}

@media (hover: hover) and (pointer: fine) {
  .dw-careers .dw-back-link:hover span {
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}

.dw-careers .dw-jobs-title {
  margin-block: 40px 32px;
  font-size: 36px;
}

.dw-careers .dw-jobs-title:focus {
  outline: none;
}

/* ---------- Job cards ---------- */
.dw-careers .dw-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  margin: 0;
  padding: 0;
}

/* כשיש פחות כרטיסים מעמודות, הגריד מתמרכז במקום להשאיר חור בצד */
@media (min-width: 640px) {
  .dw-careers .dw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dw-careers .dw-grid.dw-grid--few { grid-template-columns: repeat(auto-fit, minmax(300px, 364px)); justify-content: center; }
}

@media (min-width: 1024px) {
  .dw-careers .dw-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.dw-careers .dw-job {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px;
  border: 0;
  border-radius: 20px;
  background-color: #fff;
  box-shadow: 0 8px 24px -12px rgba(35, 53, 99, 0.18);
  cursor: pointer;
  transition: transform 200ms var(--dw-ease), box-shadow 200ms var(--dw-ease);
}

.dw-careers .dw-job:focus-within {
  box-shadow: 0 16px 32px -14px rgba(35, 53, 99, 0.28);
}

@media (hover: hover) and (pointer: fine) {
  .dw-careers .dw-job:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 32px -14px rgba(35, 53, 99, 0.28);
  }
}

/* stagger entrance when a category is chosen: 260ms per card, 40ms steps, total capped at 400ms (see --i in JS) */
@keyframes dw-card-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .dw-careers .dw-job {
    animation: dw-card-in 260ms var(--dw-ease) backwards;
    animation-delay: calc(var(--i, 0) * 40ms);
  }
}

.dw-careers .dw-job-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  margin: 0;
  overflow: hidden;
  overflow-wrap: anywhere;
  font-family: "Ploni", assistant, sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  text-wrap: balance;
  color: var(--dw-navy);
}

.dw-careers .dw-job-summary {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  margin: 0;
  overflow: hidden;
  overflow-wrap: anywhere;
  font-size: 17px;
  line-height: 1.5;
  color: var(--dw-text-strong);
}

.dw-careers .dw-job-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  margin: auto 0 0;
  padding-block-start: 8px;
  font-size: 14px;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  color: var(--dw-text-strong);
}

.dw-careers .dw-job-where {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  min-width: 0;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.dw-careers .dw-job .dw-btn {
  align-self: flex-start;
  margin-block-start: 8px;
}

/* ---------- Empty state ---------- */
.dw-careers .dw-empty {
  margin: 0;
  padding: 24px 0 8px;
  text-align: center;
}

.dw-careers .dw-empty p {
  margin: 0 0 12px;
  font-size: 20px;
  color: var(--dw-text-strong);
}

.dw-careers .dw-empty a {
  font-size: 18px;
  font-weight: 600;
  color: var(--dw-blue);
}

.dw-careers .dw-empty a:hover {
  color: var(--dw-navy);
}

/* ---------- Chips (modal meta and generated static job page) ---------- */
.dw-careers .dw-chips,
#job-modal .dw-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dw-careers .dw-chips li,
#job-modal .dw-chips li {
  max-width: 100%;
  margin: 0;
  padding: 3px 14px 4px;
  border-radius: 16px;
  overflow-wrap: anywhere;
  background: rgba(35, 53, 99, 0.08);
  font-size: 16px;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  color: var(--dw-navy);
}

/* ---------- Buttons (pills) ---------- */
.dw-careers .dw-btn,
#job-modal .dw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  margin: 0;
  padding: 12px 30px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font-family: "Ploni", assistant, sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: transform 160ms var(--dw-ease), filter 200ms var(--dw-ease), background-color 200ms var(--dw-ease), box-shadow 200ms var(--dw-ease);
}

.dw-careers .dw-btn:active,
#job-modal .dw-btn:active,
#job-modal .dw-file-btn:active {
  transform: scale(0.97);
}

.dw-careers .dw-btn-primary {
  color: #fff !important; /* explicit: the theme's a{color} must never reach a gradient pill */
}

.dw-careers .dw-btn-primary,
.dw-careers .dw-btn-primary:hover,
.dw-careers .dw-btn-primary:focus,
.dw-careers .dw-btn-primary:visited {
  border-color: transparent;
  background-color: var(--dw-blue);
  background-image: var(--dw-grad);
  color: #fff;
}

/* Secondary on the photo: white outline, fills 12% white on hover */
.dw-careers .dw-btn-ghost,
.dw-careers .dw-btn-ghost:hover,
.dw-careers .dw-btn-ghost:focus,
.dw-careers .dw-btn-ghost:visited {
  border-color: #fff;
  background-color: transparent;
  background-image: none;
  color: #fff;
}

/* Accent pill: #0B1220 on #21ECA3 passes AA */
.dw-careers .dw-btn-accent,
.dw-careers .dw-btn-accent:hover,
.dw-careers .dw-btn-accent:focus {
  padding: 14px 40px;
  border-color: transparent;
  background-color: var(--dw-green);
  background-image: none;
  font-size: 22px;
  color: var(--dw-ink);
}

#job-modal .dw-btn-submit,
#job-modal .dw-btn-submit:hover,
#job-modal .dw-btn-submit:focus {
  border-color: transparent;
  background-color: var(--dw-green);
  background-image: none;
  color: var(--dw-ink);
}

@media (hover: hover) and (pointer: fine) {
  .dw-careers .dw-btn-primary:hover {
    filter: brightness(1.12);
  }

  .dw-careers .dw-btn-ghost:hover {
    background-color: rgba(255, 255, 255, 0.12);
  }

  .dw-careers .dw-btn-accent:hover,
  #job-modal .dw-btn-submit:hover {
    filter: brightness(0.95);
  }
}

#job-modal .dw-btn-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  filter: none;
}

/* ---------- Bands (blue "why us" and closing CTA) ---------- */
.dw-careers .dw-band {
  position: relative;
  isolation: isolate;
  padding-block: 96px 80px;
  color: #fff;
}

.dw-careers .dw-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.dw-careers .dw-band .dw-h2 {
  color: #fff;
}

.dw-careers .dw-why {
  background-color: #2C57A2;
}

.dw-careers .dw-why::before {
  background-image: url("/wp-content/uploads/2025/04/1.webp");
  background-position: center right;
  background-repeat: no-repeat;
  background-attachment: fixed;
  opacity: 0.08; /* decorative arc only: keeps white text at 4.5:1 or better */
}

/* Asymmetric split on the 12-column grid: heading 5/12 (start), definition list 7/12 (end) */
.dw-careers .dw-why-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  row-gap: 40px;
  align-items: start;
}

.dw-careers .dw-why-head {
  grid-column: 1 / span 5;
}

.dw-careers .dw-why .dw-h2 {
  text-align: start;
}

.dw-careers .dw-why-lead {
  max-width: 34ch;
  margin: 20px 0 0;
  font-size: 20px;
  line-height: 1.5;
  text-wrap: pretty;
  color: rgba(255, 255, 255, 0.9);
}

.dw-careers .dw-why-list {
  grid-column: 6 / span 7;
  margin: 0;
  padding: 0;
}

.dw-careers .dw-why-item {
  margin: 0;
  padding-block: 28px;
}

.dw-careers .dw-why-item:first-child {
  padding-block-start: 0;
}

.dw-careers .dw-why-item:last-child {
  padding-block-end: 0;
}

.dw-careers .dw-why-item + .dw-why-item {
  border-block-start: 1px solid rgba(255, 255, 255, 0.18);
}

.dw-careers .dw-why-item dt {
  margin: 0 0 8px;
  font-family: "Ploni", assistant, sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
}

.dw-careers .dw-why-item dd {
  max-width: 60ch;
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.85);
}

.dw-careers .dw-closing {
  display: flex;
  align-items: center;
  background-color: #233563;
  background-image: url("/wp-content/uploads/2025/04/down-4.webp");
  background-position: top center;
  background-size: cover;
  background-repeat: no-repeat;
  text-align: center;
}

.dw-careers .dw-closing::before {
  background-image: linear-gradient(210deg, #2C57A2 20%, #233563 100%);
  opacity: 0.74; /* photo stays visible; white text stays at 4.5:1 or better */
}

.dw-careers .dw-closing .dw-container {
  width: 100%;
}

.dw-careers .dw-closing .dw-lead {
  margin-block: 16px 36px;
  color: #fff;
}

/* ---------- Generated per-job pages (tools/jobs/build.py) ---------- */
body[data-generated]:not(.dw-list-mode) .dw-careers .dw-browse {
  display: none;
}

body .dw-careers > .dw-job-static {
  max-width: 1140px;
  margin-inline: auto;
  padding: 56px 15px 64px;
}

body .dw-careers > .dw-job-static > * {
  max-width: 860px;
}

/* ---------- Focus (green ring backed by a navy ring so it reads on any background) ---------- */
.dw-careers button:focus-visible,
.dw-careers a:focus-visible,
.dw-careers [tabindex]:focus-visible,
#job-modal button:focus-visible,
#job-modal a:focus-visible,
#job-modal [tabindex]:focus-visible {
  outline: 3px solid var(--dw-green);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--dw-navy);
}

/* the hero and bands are dark: a navy backing ring would vanish, the green ring alone reads */
.dw-careers .dw-hero a:focus-visible,
.dw-careers .dw-band button:focus-visible {
  box-shadow: none;
}

/* light surfaces: green ring + navy backing ring, so the indicator reaches 3:1 against white
   (these elements neutralise the theme's :focus box-shadow with equal specificity, hence the explicit list) */
.dw-careers .dw-cat:focus-visible,
.dw-careers .dw-pill:focus-visible,
.dw-careers .dw-back-link:focus-visible,
.dw-careers .dw-empty a:focus-visible,
.dw-careers .dw-job .dw-btn:focus-visible {
  outline: 3px solid var(--dw-green);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--dw-navy);
}

/* ---------- Modal ---------- */
/* נעילת גלילה כשהמודאל פתוח. scrollbar-gutter שומר את מקום פס הגלילה (בצד שמאל ב-RTL),
   כך שההדר והתוכן לא קופצים כשהפס נעלם. */
html {
  scrollbar-gutter: stable;
}

body.dw-modal-open {
  overflow: hidden;
}

#job-modal {
  width: min(760px, calc(100vw - 32px));
  max-width: 760px;
  max-height: 90vh;
  padding: 0;
  border: 0;
  border-radius: 20px;
  overflow: auto;
  overscroll-behavior: contain;
  background: #fff;
  color: var(--dw-text-strong);
  box-shadow: 0 30px 80px -20px rgba(11, 18, 32, 0.4);
  transform-origin: center; /* modals are not anchored to a trigger */
  scrollbar-width: thin;
  scrollbar-color: rgba(35, 53, 99, 0.35) transparent;
}

#job-modal::backdrop {
  background: rgba(35, 53, 99, 0.6);
}

@keyframes dw-modal-in {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: none; }
}

@keyframes dw-modal-out {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: scale(0.96); }
}

@keyframes dw-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes dw-backdrop-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@media (prefers-reduced-motion: no-preference) {
  #job-modal[open] {
    animation: dw-modal-in 250ms var(--dw-ease);
  }

  #job-modal[open]::backdrop {
    animation: dw-backdrop-in 250ms var(--dw-ease);
  }

  /* closing state added by careers.js; the dialog is closed after 180ms */
  #job-modal.is-closing {
    animation: dw-modal-out 180ms var(--dw-ease) forwards;
  }

  #job-modal.is-closing::backdrop {
    animation: dw-backdrop-out 180ms var(--dw-ease) forwards;
  }
}

@media (prefers-reduced-motion: reduce) {
  #job-modal[open],
  #job-modal[open]::backdrop,
  #job-modal.is-closing,
  #job-modal.is-closing::backdrop {
    animation: none;
  }
}

#job-modal .dw-modal-bar {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: flex-end; /* RTL: the X sits at the inline end (left) */
  height: 64px;
  padding-inline: 14px;
  background: #fff;
  border-block-end: 1px solid var(--dw-line);
}

#job-modal .dw-modal-close,
#job-modal .dw-modal-close:hover,
#job-modal .dw-modal-close:focus {
  border: 1px solid var(--dw-line);
  background-color: #fff;
  color: var(--dw-navy);
}

#job-modal .dw-modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 160ms var(--dw-ease), background-color 180ms var(--dw-ease);
}

#job-modal .dw-modal-close:active {
  transform: scale(0.97);
}

@media (hover: hover) and (pointer: fine) {
  #job-modal .dw-modal-close:hover {
    background-color: #EEF1F6;
  }
}

#job-modal .dw-modal-close svg {
  width: 20px;
  height: 20px;
  pointer-events: none;
}

#job-modal .dw-modal-panel {
  padding: 28px 40px 40px;
}

#job-modal .dw-modal-title {
  margin: 0 0 16px;
  font-family: "Ploni", assistant, sans-serif;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.2;
  text-wrap: balance;
  overflow-wrap: anywhere;
  color: var(--dw-navy);
}

#job-modal .dw-modal-title:focus {
  outline: none;
  box-shadow: none;
}

#job-modal h3 {
  margin: 32px 0 10px;
  font-family: "Ploni", assistant, sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--dw-navy);
}

#job-modal p,
#job-modal li {
  overflow-wrap: anywhere;
}

#job-modal p {
  max-width: 65ch;
  margin: 0 0 12px;
  font-size: 18px;
  line-height: 1.6;
}

#job-modal ul.dw-list {
  max-width: 65ch;
  margin: 0;
  padding: 0;
  padding-inline-start: 1.4em;
  list-style: disc;
}

#job-modal ul.dw-list li {
  margin: 0 0 8px;
  font-size: 18px;
  line-height: 1.55;
}

#job-modal .dw-equal {
  margin-block-start: 20px;
  font-size: 16px;
  color: var(--dw-text-strong);
}

/* ---------- Application form ---------- */
#job-modal form {
  scroll-margin-top: 80px; /* clears the sticky top bar when the apply bar scrolls here */
  margin-block-start: 32px;
  padding-block-start: 12px;
  border-block-start: 1px solid var(--dw-line);
}

#job-modal .dw-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px 16px;
}

@media (min-width: 640px) {
  #job-modal .dw-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #job-modal .dw-field-full { grid-column: 1 / -1; }
}

#job-modal .dw-field {
  min-width: 0;
}

#job-modal .dw-field label {
  display: block;
  margin-block-end: 8px;
  font-family: "Ploni", assistant, sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--dw-navy);
}

#job-modal .dw-req {
  color: #2C57A2;
  font-weight: 700;
}

#job-modal .dw-field input[type="text"],
#job-modal .dw-field input[type="email"],
#job-modal .dw-field input[type="tel"],
#job-modal .dw-field textarea {
  display: block;
  width: 100%;
  height: 52px;
  margin: 0;
  padding: 0 16px;
  border: 1px solid rgba(35, 53, 99, 0.22);
  border-radius: 10px;
  background-color: #fff;
  font-family: "Ploni", assistant, sans-serif;
  font-size: 18px;
  line-height: 1.5;
  color: var(--dw-ink);
  caret-color: var(--dw-blue);
  transition: border-color 180ms var(--dw-ease), box-shadow 180ms var(--dw-ease);
}

#job-modal .dw-field textarea {
  height: auto;
  min-height: 96px;
  padding: 12px 16px;
  resize: vertical;
}

#job-modal .dw-field input:focus,
#job-modal .dw-field input:focus-visible,
#job-modal .dw-field textarea:focus,
#job-modal .dw-field textarea:focus-visible {
  outline: none;
  border-color: var(--dw-blue);
  background-color: #fff;
  box-shadow: 0 0 0 3px rgba(44, 87, 162, 0.18);
}

#job-modal .dw-field [aria-invalid="true"] {
  border-color: #B42318;
  background-color: #FFF8F7;
}

#job-modal .dw-field input[aria-invalid="true"]:focus,
#job-modal .dw-field textarea[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.18);
}

/* Custom Hebrew file picker: the real input stays focusable but visually hidden */
#job-modal .dw-file {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
}

#job-modal .dw-field input.dw-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

#job-modal .dw-field .dw-file-btn,
#job-modal .dw-field .dw-file-btn:hover,
#job-modal .dw-field .dw-file-btn:focus {
  background-color: var(--dw-blue);
  background-image: var(--dw-grad);
  color: #fff;
}

#job-modal .dw-field .dw-file-btn {
  color: #fff !important;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 0;
  padding: 8px 26px;
  border-radius: 999px;
  font-family: "Ploni", assistant, sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
  transition: transform 160ms var(--dw-ease), filter 200ms var(--dw-ease), box-shadow 200ms var(--dw-ease);
}

@media (hover: hover) and (pointer: fine) {
  #job-modal .dw-field .dw-file-btn:hover {
    filter: brightness(1.12);
  }
}

#job-modal .dw-field .dw-file-input:focus-visible + .dw-file-btn {
  outline: 3px solid var(--dw-green);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--dw-navy);
}

#job-modal .dw-field .dw-file-input[aria-invalid="true"] + .dw-file-btn {
  box-shadow: 0 0 0 2px #B42318;
}

#job-modal .dw-file-name {
  min-width: 0;
  font-family: "Ploni", assistant, sans-serif;
  font-size: 16px;
  line-height: 1.4;
  color: var(--dw-text-strong);
  overflow-wrap: anywhere;
}

#job-modal .dw-hint {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--dw-text-strong);
}

#job-modal .dw-err {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.4;
  color: #B42318;
}

#job-modal .dw-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

#job-modal .dw-consent input[type="checkbox"] {
  flex: none;
  width: 22px;
  height: 22px;
  margin: 2px 0 0;
  accent-color: var(--dw-blue);
  cursor: pointer;
}

#job-modal .dw-consent label {
  display: inline;
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--dw-navy);
}

#job-modal .dw-consent a {
  color: var(--dw-blue);
  text-decoration: underline;
}

#job-modal .dw-consent a:hover {
  color: var(--dw-navy);
}

#job-modal .dw-turnstile {
  min-height: 65px;
}

#job-modal .dw-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

#job-modal .dw-reassure {
  max-width: 65ch;
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #56657A;
}

#job-modal .dw-note {
  max-width: 65ch;
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--dw-text-strong);
}

#job-modal .dw-form-msg {
  margin-block-start: 18px;
}

#job-modal .dw-form-msg:empty {
  display: none;
}

#job-modal .dw-form-msg > div {
  padding: 14px 18px;
  border-radius: 10px;
  font-size: 18px;
  line-height: 1.5;
}

#job-modal .dw-form-msg .is-success {
  border: 1px solid var(--dw-green);
  background: #21ECA329;
  color: var(--dw-navy);
}

#job-modal .dw-form-msg .is-error {
  border: 1px solid #B4231855;
  background: #B423180F;
  color: #8A1C13;
}

#job-modal .dw-form-msg > div:focus {
  outline: none;
}

/* ---------- Apply bar: white, hairline on top, gradient pill. Modal: sticky inside the dialog; job page: see build.py ---------- */
.dw-careers .dw-apply-bar {
  display: flex;
  justify-content: center;
  padding: 12px 20px;
  border-block-start: 1px solid rgba(35, 53, 99, 0.12);
  background: #fff;
  opacity: 1;
  transition: opacity 150ms ease, visibility 0s linear 0s;
}

.dw-careers .dw-apply-bar.is-hidden {
  opacity: 0;
  visibility: hidden; /* out of the tab order while hidden */
  pointer-events: none;
  transition: opacity 150ms ease, visibility 0s linear 150ms;
}

.dw-careers .dw-apply-bar .dw-btn {
  min-width: 240px;
}

/* inside the dialog the bar overlaps the last 75px of the content (negative margin) so it takes no space of its own */
#job-modal .dw-apply-bar {
  position: sticky;
  bottom: 0;
  z-index: 3;
  margin-block-start: -75px;
}

/* ---------- Header pill "משרות" (all pages): white text on the gradient ---------- */


/* ---------- Tablet ---------- */
@media (max-width: 1023px) {
  .dw-careers .dw-why-head,
  .dw-careers .dw-why-list {
    grid-column: 1 / -1;
  }
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
  .dw-careers .dw-hero {
    min-height: max(440px, 60vh);
    padding-block: 56px;
  }

  .dw-careers .dw-hero::after {
    background-image: url("/careers/assets/hero.webp"); /* אותה תמונה; חיתוך שממקד את האנשים */
    background-position: 30% center;
    transform-origin: center center;
  }

  .dw-careers .dw-hero::before {
    background-image: linear-gradient(180deg, rgba(35, 53, 99, 0.7) 0%, rgba(35, 53, 99, 0.88) 100%);
  }

  .dw-careers .dw-hero-h1,
  .dw-careers .dw-h2 {
    font-size: 44px;
  }

  .dw-careers .dw-hero-sub {
    margin-block: 20px 28px;
    font-size: 19px;
  }

  .dw-careers .dw-hero-actions .dw-btn {
    min-height: 48px;
    padding: 10px 24px;
    font-size: 18px;
  }

  .dw-careers .dw-section,
  .dw-careers .dw-band {
    padding-block: 56px 48px;
  }

  .dw-careers .dw-h2 {
    font-size: 36px;
  }

  .dw-careers .dw-jobs-title {
    margin-block: 32px 24px;
    font-size: 30px;
  }

  .dw-careers .dw-lead {
    margin-block-end: 36px;
    font-size: 18px;
  }

  .dw-careers .dw-cat {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "icon text arrow"
      ". count .";
    gap: 8px 16px;
    width: calc(100% + 24px);
    margin-inline: -12px;
    padding: 24px 12px;
  }

  .dw-careers .dw-cat-label {
    font-size: 26px;
  }

  .dw-careers .dw-cat-icon svg {
    width: 28px;
    height: 28px;
  }

  .dw-careers .dw-why::before {
    background-attachment: scroll;
  }

  .dw-careers .dw-why-lead {
    max-width: none;
  }

  .dw-careers .dw-closing .dw-lead {
    font-size: 18px;
  }

  body .dw-careers > .dw-job-static {
    padding-block: 36px 48px;
  }
}

@media (max-width: 639px) {
  #job-modal {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    border-radius: 0;
  }

  #job-modal .dw-modal-panel {
    padding: 20px 20px 32px;
  }

  #job-modal .dw-modal-title {
    font-size: 26px;
  }

  .dw-careers .dw-apply-bar .dw-btn {
    width: 100%;
  }

  #job-modal .dw-btn-submit {
    width: 100%;
  }

  #job-modal .dw-actions {
    align-items: stretch;
  }
}

/* ---------- Reduced motion: no translate, no scale, no parallax ---------- */
@media (prefers-reduced-motion: reduce) {
  .dw-careers .dw-btn,
  .dw-careers .dw-pill,
  .dw-careers .dw-job,
  .dw-careers .dw-cat-arrow,
  #job-modal .dw-file-btn,
  #job-modal .dw-btn,
  #job-modal .dw-modal-close {
    transition-property: background-color, color, filter, box-shadow, border-color;
  }

  .dw-careers .dw-job:hover,
  .dw-careers .dw-cat:hover .dw-cat-arrow,
  .dw-careers .dw-btn:active,
  .dw-careers .dw-pill:active,
  #job-modal .dw-btn:active,
  #job-modal .dw-file-btn:active,
  #job-modal .dw-modal-close:active {
    transform: none;
  }

  .dw-careers .dw-why::before {
    background-attachment: scroll;
  }
}