/* ============================================================
   JOB POST CONTENT  ·  .jb-*
   Styles markup Casey writes into post_content on 320 jobs.
   Scoped to .nrh-job-content so it cannot leak into chrome.
   Zero !important: the theme owns the cascade now.
   ============================================================ */

.nrh-job-content {
  max-width: var(--nrh-measure-job);
  margin-inline: auto;
  font-family: var(--nrh-font);
  color: var(--nrh-ink-body);
  font-size: var(--nrh-text-base);
  line-height: var(--nrh-leading);
}

/* WPJM/editor artefacts we never want inside job content */
.nrh-job-content hr,
.nrh-job-content .wp-block-separator { display: none; }

/* ---- dashboard -------------------------------------------- */
.jb-dashboard {
  background: var(--nrh-surface);
  border: 1px solid var(--nrh-line);
  border-radius: var(--nrh-radius);
  box-shadow: var(--nrh-shadow-sm);
  padding: 28px;
  margin-bottom: var(--nrh-gap-lg);
}
.jb-dashboard h2 {
  font-size: var(--nrh-h2);
  font-weight: 700;
  color: var(--nrh-ink);
  margin-bottom: 8px;
}
.jb-dashboard p {
  color: var(--nrh-ink-muted);
  font-size: 0.88rem;
  margin-bottom: var(--nrh-gap);
}

/* ---- buttons ---------------------------------------------- */
.jb-btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--nrh-gap-sm);
}
/* the editor wraps buttons in <p>; unwrap without touching layout */
.jb-btn-row p { display: contents; }
.jb-btn br { display: none; }

.jb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--nrh-gap-xs);
  padding: 11px 20px;
  border: none;
  border-radius: var(--nrh-radius-sm);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s ease, transform .2s ease;
}
.jb-btn:hover { transform: translateY(-1px); }
.jb-btn:focus-visible {
  outline: 3px solid var(--nrh-secondary);
  outline-offset: 2px;
}

/* accessible fills: raw brand tokens fail AA with white text */
.jb-btn.green           { background: var(--nrh-apply-ink); color: #fff; }
.jb-btn.green:hover     { background: var(--nrh-apply-hover); }
.jb-btn.amber           { background: var(--nrh-save-ink);  color: #fff; }
.jb-btn.amber:hover     { background: var(--nrh-save-hover); }
.jb-btn.outline         { background: var(--nrh-surface); color: var(--nrh-secondary); border: 1.5px solid var(--nrh-secondary); }
.jb-btn.outline:hover   { background: var(--nrh-info-bg); }

a.jb-btn,
a.jb-btn:visited,
a.jb-btn:hover,
a.jb-btn:focus,
a.jb-btn:active { text-decoration: none; }
a.jb-btn.green, a.jb-btn.green:visited, a.jb-btn.green:hover   { color: #fff; }
a.jb-btn.amber, a.jb-btn.amber:visited, a.jb-btn.amber:hover   { color: #fff; }
a.jb-btn.outline, a.jb-btn.outline:visited, a.jb-btn.outline:hover { color: var(--nrh-secondary); }

/* ---- table of contents ------------------------------------ */
.jb-toc {
  background: var(--nrh-surface);
  border: 1px solid var(--nrh-line);
  border-radius: 10px;
  padding: 20px var(--nrh-gap-lg);
  margin-bottom: var(--nrh-gap-lg);
}
.jb-toc-title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--nrh-ink-soft);
  margin-bottom: var(--nrh-gap-sm);
}
.jb-toc ul {
  list-style: none;
  padding: 0;
  columns: 2;
  column-gap: var(--nrh-gap-lg);
}
/* Matches the 7px row padding in the overview list above it, so the two
   halves of the card share one rhythm instead of one looking cramped
   next to the other. */
.jb-toc li { margin-bottom: var(--nrh-gap-sm); }
.jb-toc a {
  color: var(--nrh-secondary);
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
}
.jb-toc a:hover { text-decoration: underline; }

/* ---- grouped card ----------------------------------------- */
.jb-group-card {
  background: var(--nrh-surface);
  border: 1px solid var(--nrh-line);
  border-radius: var(--nrh-radius);
  box-shadow: var(--nrh-shadow-sm);
  padding: var(--nrh-pad-card);
  margin-bottom: var(--nrh-gap-lg);
}
.jb-card-label {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--nrh-ink-faint);
  margin-bottom: 20px;
}
.jb-inner-section {
  margin-bottom: var(--nrh-gap-xl);
  padding-bottom: 28px;
  border-bottom: 1px solid var(--nrh-line-soft);
}
.jb-inner-section:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.jb-section-header {
  display: flex;
  align-items: center;
  gap: var(--nrh-gap-sm);
  margin-bottom: 14px;
}
.jb-section-header svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--nrh-secondary);
}
.jb-section-header h2 {
  margin: 0;
  padding: 0;
  border: none;
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--nrh-ink);
}

/* ---- overview list ---------------------------------------- */
.jb-overview-list { list-style: none; padding: 0; }
.jb-overview-list li {
  display: flex;
  padding: 7px 0;
  margin-bottom: 0;
  border-bottom: 1px solid var(--nrh-line-soft);
  font-size: 0.9rem;
}
.jb-overview-list li:last-child { border-bottom: none; }
/* 104px, not 170px. The widest label the theme or Casey can emit is
   "Qualification" at 77px, so 170px left a 93px void after the longest
   one and 119px after a short one like "Industry": the value read as a
   separate column rather than as the answer to its label. 104px keeps
   every value aligned with a 27px gutter after the worst case. */
.jb-ov-label {
  width: 104px;
  flex-shrink: 0;
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--nrh-ink-soft);
}
.jb-ov-value { color: var(--nrh-ink-strong); font-weight: 500; }

/* ---- prose inside cards ----------------------------------- */
.jb-group-card p  { margin-bottom: 14px; color: var(--nrh-ink-body); }
.jb-group-card :where(ul) { list-style: disc outside; padding-left: 20px; margin-bottom: var(--nrh-gap); }
.jb-group-card :where(ol) { list-style: decimal outside; padding-left: 20px; margin-bottom: var(--nrh-gap); }

/* These two opt out of markers on purpose. Stated at higher specificity so
   the prose default above can never win, whatever the source order. */
.jb-group-card .jb-overview-list { list-style: none; padding-left: 0; }
.jb-group-card .jb-toc ul        { list-style: none; padding-left: 0; }
.jb-group-card .jb-toc ol.nrh-toc-list { list-style: decimal outside; padding-left: 22px; }
.jb-group-card li { margin-bottom: 8px; color: var(--nrh-ink-body); }
.jb-group-card li::marker { color: var(--nrh-secondary); }
.jb-group-card h3 {
  font-size: var(--nrh-h3);
  font-weight: 600;
  color: var(--nrh-ink-strong);
  margin: 18px 0 8px;
}
.jb-group-card strong { color: var(--nrh-ink); }
.jb-group-card a { color: var(--nrh-secondary); text-decoration: none; }
.jb-group-card a:hover { text-decoration: underline; }

/* ---- apply CTA -------------------------------------------- */
.jb-apply-cta {
  background: var(--nrh-primary);
  border-radius: 10px;
  padding: var(--nrh-gap-lg) 28px;
  text-align: center;
  margin-bottom: var(--nrh-gap-lg);
}
.jb-apply-cta p {
  color: var(--nrh-on-dark-soft);
  font-size: 0.82rem;
  margin-bottom: 12px;
}
.jb-apply-cta a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px var(--nrh-gap-xl);
  background: var(--nrh-apply-ink);
  color: #fff;
  border-radius: var(--nrh-radius-sm);
  font-size: 0.94rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .2s ease;
}
.jb-apply-cta a:hover { background: var(--nrh-apply-hover); }
.jb-apply-cta a:visited,
.jb-apply-cta a:focus,
.jb-apply-cta a:active { color: #fff; text-decoration: none; }

/* ---- responsive ------------------------------------------- */
@media (max-width: 768px) {
  .jb-dashboard,
  .jb-group-card      { padding: var(--nrh-pad-card-sm); }
  .jb-toc ul          { columns: 1; }
  .jb-overview-list li { flex-direction: column; gap: 2px; }
  .jb-ov-label        { width: auto; }
  .jb-section-header h2 { font-size: 1.2rem; }
}

@media (max-width: 600px) {
  .jb-btn-row { flex-direction: column; align-items: stretch; }
  .jb-btn     { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .jb-btn:hover { transform: none; }
}

/* ---- chips (theme-rendered, not authored in post_content) ---- */
.jb-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nrh-gap-xs);
  margin-bottom: 14px;
}
.jb-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: var(--nrh-radius-pill);
  background: var(--nrh-info-bg);
  color: var(--nrh-primary);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.jb-chip--deadline { background: #fdf1dc; color: #8a5303; }
.jb-chip--featured { background: var(--nrh-ok-bg); color: var(--nrh-ok-ink); }

/* ---- FAQ accordion (details/summary in post content) ------------- */
.nrh-job-content details {
  background: var(--nrh-surface-alt);
  border: 1px solid var(--nrh-line);
  border-radius: 10px;
  padding: 12px 15px;
  margin-bottom: 9px;
}
.nrh-job-content details + details { margin-top: 0; }
.nrh-job-content summary {
  font-size: 1rem;
  font-weight: 700;
  color: var(--nrh-primary);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.nrh-job-content summary::-webkit-details-marker { display: none; }
.nrh-job-content summary::before {
  content: '\25B8';
  flex-shrink: 0;
  color: var(--nrh-secondary);
  transition: transform .18s ease;
}
.nrh-job-content details[open] summary::before { transform: rotate(90deg); }
.nrh-job-content details > *:not(summary) {
  margin: 9px 0 0;
  font-size: 0.97rem;
  color: var(--nrh-ink-muted);
}

/* Legacy Casey summary card. The PHP filter removes it; this is the net
   for any variant the filter does not recognise. The theme hero already
   renders the title, apply, save and share. */
.nrh-job-content .jb-dashboard,
.nrh-job-content .job-dashboard,
.nrh-job-content [class$="-dashboard"],
.nrh-job-content [class*="-dashboard "] { display: none; }

/* WPJM's own meta and application blocks. The theme overrides
   content-single-job_listing.php so these should never render now;
   kept as a net in case a plugin re-adds them. */
.single_job_listing .job_listing_meta,
.single_job_listing .company,
.single_job_listing .application { display: none; }

/* ---- folded body sections ------------------------------------
   The heavier sections open collapsed. The summary reuses the
   section header so a folded section is visually identical to an
   open one, with a chevron added on the right.
   -------------------------------------------------------------- */
.nrh-job-content details.nrh-fold {
  /* The FAQ rule above styles every <details> as a grey bordered box.
     A folded section is a section, not an FAQ card, so it opts out and
     keeps the same rhythm as the open sections around it. */
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin-bottom: var(--nrh-gap-xl);
  padding-bottom: 0;
  border-bottom: 1px solid var(--nrh-line);
}
.nrh-job-content details.nrh-fold:last-child { border-bottom: 0; }

.nrh-job-content details.nrh-fold > summary {
  display: flex;
  align-items: center;
  gap: var(--nrh-gap-sm);
  list-style: none;
  cursor: pointer;
  padding: 0 0 14px;
  border: 0;
  background: none;
}
.nrh-job-content details.nrh-fold > summary::-webkit-details-marker { display: none; }
.nrh-job-content details.nrh-fold > summary::marker { content: ""; }

/* The FAQ summary draws a triangle on the left. This one has its own
   chevron on the right, so suppress the inherited one rather than
   showing two markers on the same row. */
.nrh-job-content details.nrh-fold > summary::before { content: none; }

/* the header sits inside the summary, so strip its own bottom spacing */
.nrh-job-content details.nrh-fold > summary .jb-section-header {
  flex: 1;
  margin-bottom: 0;
}

/* chevron on the right, rotates when open */
.nrh-job-content details.nrh-fold > summary::after {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  margin-left: auto;
  border-right: 2px solid var(--nrh-ink-faint);
  border-bottom: 2px solid var(--nrh-ink-faint);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .18s ease;
}
.nrh-job-content details.nrh-fold[open] > summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}
.nrh-job-content details.nrh-fold > summary:hover::after { border-color: var(--nrh-secondary); }
.nrh-job-content details.nrh-fold > summary:focus-visible {
  outline: 2px solid var(--nrh-primary);
  outline-offset: 3px;
  border-radius: 6px;
}

.nrh-job-content details.nrh-fold .nrh-fold-body { padding-bottom: 14px; }
.nrh-job-content details.nrh-fold .nrh-fold-body > *:last-child { margin-bottom: 0; }

/* Everything opens for print and for in-page search via the TOC. */
@media print {
  .nrh-job-content details.nrh-fold > .nrh-fold-body { display: block !important; }
}

/* ---- Job overview card keeps its original spacing ------------
   v0.12.9 tightened the spacing tokens globally to shorten the
   page. That was right for the body sections but it squeezed the
   overview card too, and the card reads better with room: it is a
   reference table, scanned rather than read, so the rows need air
   between them.

   Restated as tokens rather than as fixed padding values, so every
   descendant (card padding, the gap between At a glance and the
   table of contents, the row rhythm, the mobile padding) returns to
   its pre-0.12.9 value in one place and cannot drift apart later.
   -------------------------------------------------------------- */
.nrh-ov-card {
  --nrh-gap-xs:      6px;
  --nrh-gap-sm:      10px;
  --nrh-gap:         16px;
  --nrh-gap-lg:      24px;
  --nrh-gap-xl:      32px;
  --nrh-pad-card:    32px;
  --nrh-pad-card-sm: 20px;
}