/**
 * careers.css — /careers/ archive and single job pages.
 *
 * Loaded only on careers URLs (see nwn_careers_enqueue in functions.php) so the
 * 67 KB main stylesheet does not grow for a section most visitors never see.
 *
 * COLOUR — every pairing below was measured, not eyeballed. Brand green
 * #5BBF5B is a highlight colour, not a text background: white on it is 2.32:1,
 * which fails WCAG AA outright. The accessible pairing that still uses both
 * brand colours is CHARCOAL ON GREEN.
 *
 *   #2D2D2D on #5BBF5B   5.93:1  AA pass   ← button rest
 *   #2D2D2D on #4FB04F   5.02:1  AA pass   ← button hover
 *   #2D2D2D on #45A045   4.18:1  fails AA  ← why hover is #4FB04F, not green-dark
 *   #FFFFFF on #5BBF5B   2.32:1  fails AA  ← never used here
 *   #1a7f37 on #FFFFFF   5.08:1  AA pass   ← green link text
 *   #2D2D2D on #FFFFFF  13.77:1  AA pass
 */

/* ── Buttons ──────────────────────────────────────────────── */
.nwn-btn-green {
  display: inline-block;
  padding: 12px 20px;
  background: var(--nwn-green, #5BBF5B);
  color: #2D2D2D;                 /* 5.93:1 — see header note */
  font-weight: 700;
  font-size: .95rem;
  line-height: 1.2;
  text-decoration: none;
  border: 0;
  border-radius: var(--nwn-radius, 8px);
  cursor: pointer;
  transition: background .15s ease;
}
.nwn-btn-green:hover,
.nwn-btn-green:focus-visible {
  background: #4FB04F;            /* 5.02:1 with #2D2D2D */
  color: #2D2D2D;
}
.nwn-btn-green:focus-visible {
  outline: 3px solid #2D2D2D;
  outline-offset: 2px;
}

/* ── Archive: city filter ─────────────────────────────────── */
.nwn-careers-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 28px;
}
.nwn-careers-filter-label {
  font-weight: 600;
  color: #2D2D2D;
  margin-right: 2px;
}
.nwn-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 15px;
  border: 1.5px solid var(--nwn-border, #E5E7EB);
  border-radius: 999px;
  background: #fff;
  color: #2D2D2D;
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease;
}
.nwn-chip:hover { border-color: #5BBF5B; }
.nwn-chip.is-active {
  background: #5BBF5B;
  border-color: #5BBF5B;
  color: #2D2D2D;                 /* 5.93:1 */
}
.nwn-chip-n {
  display: inline-block;
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(45, 45, 45, .10);
  font-size: .78rem;
  font-weight: 700;
  text-align: center;
}
.nwn-chip.is-active .nwn-chip-n { background: rgba(45, 45, 45, .18); }

/* ── Archive: job cards ───────────────────────────────────── */
.nwn-careers-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.nwn-job-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 26px;
  background: #fff;
  border: 1px solid var(--nwn-border, #E5E7EB);
  border-left: 4px solid #5BBF5B;
  border-radius: var(--nwn-radius-lg, 14px);
  box-shadow: var(--nwn-shadow, 0 1px 3px rgba(0,0,0,.06));
}
.nwn-job-card-main { flex: 1 1 380px; min-width: 0; }
.nwn-job-card-title { margin: 0 0 10px; font-size: 1.2rem; line-height: 1.3; }
.nwn-job-card-title a { color: #2D2D2D; text-decoration: none; }
.nwn-job-card-title a:hover { color: #1a7f37; text-decoration: underline; }

.nwn-job-meta { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.nwn-job-meta li { font-size: .9rem; color: #4A4A4A; }
.nwn-job-meta-k {
  display: inline-block;
  min-width: 118px;
  color: var(--nwn-muted, #6B7280);
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  font-weight: 700;
}
.nwn-job-card-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  flex: 0 0 auto;
}
.nwn-job-city {
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--nwn-green-lite, #EAF7EA);
  color: #2D2D2D;                 /* 12.45:1 */
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.nwn-careers-empty {
  padding: 40px;
  text-align: center;
  color: var(--nwn-muted, #6B7280);
  background: #fff;
  border: 1px dashed var(--nwn-border, #E5E7EB);
  border-radius: var(--nwn-radius-lg, 14px);
}

/* ── Single job ───────────────────────────────────────────── */
.nwn-job-hero-sub { font-size: 1.02rem; opacity: .92; }

.nwn-job-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 36px;
  align-items: start;
}
.nwn-job-body { min-width: 0; }
.nwn-job-content {
  background: #fff;
  border: 1px solid var(--nwn-border, #E5E7EB);
  border-radius: var(--nwn-radius-lg, 14px);
  padding: 30px 32px;
  line-height: 1.75;
  color: #2D2D2D;
}
.nwn-job-content h2 { margin-top: 1.6em; font-size: 1.3rem; }
.nwn-job-content h2:first-child { margin-top: 0; }
.nwn-job-content h3 { margin-top: 1.4em; font-size: 1.08rem; }
/* style.css line 58 applies `ul, ol { list-style: none }` globally, so a pasted
   bulleted job description would silently render as unmarked indented lines.
   Restore real markers inside the description body only. */
.nwn-job-content ul { list-style: disc; padding-left: 24px; margin-bottom: 1em; }
.nwn-job-content ol { list-style: decimal; padding-left: 24px; margin-bottom: 1em; }
.nwn-job-content li { margin-bottom: .45em; }
.nwn-job-content a { color: #1a7f37; }  /* 5.08:1 */

/* Sticky facts rail */
.nwn-job-aside { position: sticky; top: 96px; }
.nwn-job-facts {
  background: #fff;
  border: 1px solid var(--nwn-border, #E5E7EB);
  border-top: 4px solid #5BBF5B;
  border-radius: var(--nwn-radius-lg, 14px);
  padding: 24px;
  box-shadow: var(--nwn-shadow, 0 1px 3px rgba(0,0,0,.06));
}
.nwn-job-facts h3 { margin: 0 0 16px; font-size: 1.05rem; color: #2D2D2D; line-height: 1.35; }
.nwn-job-facts dl { margin: 0 0 20px; }
.nwn-job-facts dt {
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--nwn-muted, #6B7280);
  font-weight: 700;
  margin-top: 14px;
}
.nwn-job-facts dt:first-child { margin-top: 0; }
.nwn-job-facts dd { margin: 3px 0 0; font-size: .93rem; color: #2D2D2D; }
.nwn-job-addr { color: #4A4A4A; font-size: .85rem; }
.nwn-job-apply-cta { display: block; text-align: center; }
.nwn-job-back {
  display: block;
  margin-top: 14px;
  text-align: center;
  font-size: .88rem;
  color: #1a7f37;
}

/* ── Apply form ───────────────────────────────────────────── */
.nwn-apply {
  margin-top: 28px;
  background: #fff;
  border: 1px solid var(--nwn-border, #E5E7EB);
  border-radius: var(--nwn-radius-lg, 14px);
  padding: 30px 32px;
}
.nwn-apply-h { margin: 0 0 20px; font-size: 1.25rem; color: #2D2D2D; }

/* Honeypot: removed from the visual and a11y trees, still submittable by a bot. */
.nwn-ap-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

.nwn-ap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0 18px;
}
.nwn-ap-field { margin: 0 0 18px; }
.nwn-ap-field label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  font-size: .9rem;
  color: #2D2D2D;
}
.nwn-req { color: #b32d2e; text-decoration: none; border: 0; }
.nwn-ap-field input[type=text],
.nwn-ap-field input[type=email],
.nwn-ap-field input[type=tel],
.nwn-ap-field input[type=file],
.nwn-ap-field select,
.nwn-ap-field textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1.5px solid var(--nwn-border, #E5E7EB);
  border-radius: var(--nwn-radius, 8px);
  font: inherit;
  font-size: .94rem;
  color: #2D2D2D;
  background: #fff;
}
.nwn-ap-field textarea { resize: vertical; }
.nwn-ap-field input:focus,
.nwn-ap-field select:focus,
.nwn-ap-field textarea:focus {
  outline: none;
  border-color: #5BBF5B;
  box-shadow: 0 0 0 3px var(--nwn-green-glow, rgba(91,191,91,.18));
}
.nwn-ap-help {
  display: block;
  margin-top: 5px;
  font-size: .8rem;
  color: var(--nwn-muted, #6B7280);
}
.nwn-ap-submit { margin: 4px 0 0; }

.nwn-apply-ok {
  padding: 26px 28px;
  background: var(--nwn-green-lite, #EAF7EA);
  border: 1px solid #BFE6BF;
  border-radius: var(--nwn-radius-lg, 14px);
  color: #2D2D2D;                 /* 12.45:1 on green-lite */
}
.nwn-apply-ok h3 { margin: 0 0 8px; color: #16621f; }
.nwn-apply-ok p  { margin: 0; }

.nwn-apply-err {
  margin-bottom: 18px;
  padding: 13px 16px;
  background: #FDECEA;
  border: 1px solid #F5C6C2;
  border-radius: var(--nwn-radius, 8px);
  color: #8A1F1B;                 /* 7.4:1 on #FDECEA */
  font-size: .92rem;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 900px) {
  .nwn-job-layout { grid-template-columns: 1fr; gap: 24px; }
  /* The facts rail becomes a normal block above the description on mobile;
     sticky positioning on a full-width block just eats the viewport. */
  .nwn-job-aside { position: static; order: -1; }
}
@media (max-width: 600px) {
  .nwn-job-card { flex-direction: column; align-items: stretch; padding: 20px; }
  /* The card switches to a column here, and in a column flex container
     `flex: 1 1 380px` resolves its basis against the HEIGHT — which padded every
     card with ~380px of dead space on a handset. Reset the basis to content. */
  .nwn-job-card-main { flex: 0 1 auto; }
  .nwn-job-card-cta { flex-direction: row; align-items: center; justify-content: space-between; }
  .nwn-job-content, .nwn-apply { padding: 22px 20px; }
  .nwn-job-meta-k { display: block; min-width: 0; }
}