/* ============================================================
   SINGLE JOB · theme-rendered furniture
   The gradient hero, the sidebar cards and the apply CTA.

   Deliberately NOT named .jb-dashboard: Casey writes that class
   into post_content and your existing CSS styles it as a white
   card. Restyling it would change 320 published posts. This is
   theme chrome, so it gets its own namespace.
   ============================================================ */

/* ---- hero ---------------------------------------------------- */
.nrh-job-hero {
  background: linear-gradient(135deg, var(--nrh-primary) 0%, var(--nrh-secondary) 100%);
  color: #fff;
  border-radius: var(--nrh-radius-lg);
  padding: 24px 28px;
  margin-bottom: 14px;
}
.nrh-job-hero h1 {
  color: #fff;
  font-size: clamp(23px, 3.3vw, 32px);
  font-weight: 800;
  letter-spacing: -.018em;
  margin: 0;
}
.nrh-job-hero-top {
  display: flex;
  gap: var(--nrh-gap);
  align-items: flex-start;
  flex-wrap: wrap;
}
.nrh-job-hero-body { flex: 1; min-width: 220px; }
.nrh-job-hero-company {
  font-size: 17px;
  font-weight: 600;
  color: rgba(255,255,255,.93);
  margin: 4px 0 0;
}


.nrh-job-logo:not(.nrh-job-logo--img) img { border-radius: 50%; display: block; }

/* on the gradient the solid navy would vanish, so go translucent there */
.nrh-job-hero .nrh-job-logo:not(.nrh-job-logo--img) {
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.22);
}
/* on the navy hero the logo keeps its white card, which is what makes a
   dark-lettered mark readable there at all */
.nrh-job-hero .nrh-job-logo--img { border-color: rgba(255,255,255,.5); }

/* chips on the gradient */
.nrh-job-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 11px;
}
.nrh-job-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  border-radius: var(--nrh-radius-pill);
  background: rgba(255,255,255,.18);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.nrh-job-chip--deadline { background: var(--nrh-save); color: #3f2504; }
.nrh-job-chip--closed   { background: #fecaca; color: #7f1d1d; }

/* hero button row */
.nrh-job-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nrh-gap-sm);
  margin-top: 18px;
}
.nrh-job-actions .nrh-btn { font-size: 15px; padding: 11px 18px; }
.nrh-btn--onblue {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,.55);
}
.nrh-btn--onblue:hover { background: rgba(255,255,255,.14); color: #fff; }

/* ---- apply CTA (theme-rendered, mirrors the mockup) ------------ */
.nrh-apply-cta {
  background: #f0fdf4;
  border: 2px dashed var(--nrh-apply);
  border-radius: var(--nrh-radius-lg);
  padding: 20px 22px;
  text-align: center;
  margin: 12px 0 0;
}
.nrh-apply-kicker {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--nrh-apply-ink);
}
.nrh-apply-cta h2 {
  font-size: 21px;
  font-weight: 800;
  color: var(--nrh-ink);
  margin: 8px 0 4px;
}
.nrh-apply-meta { font-size: 15px; color: var(--nrh-ink-muted); margin: 0 0 16px; }
.nrh-apply-cta .nrh-btn { font-size: 16.5px; padding: 14px 30px; }
.nrh-apply-note { font-size: 13px; color: var(--nrh-ink-soft); margin: 12px 0 0; }

/* the countdown doubles as the CTA kicker */
.nrh-apply-cta .nrh-countdown { justify-content: center; margin: 0 0 4px; }

/* ---- sidebar cards --------------------------------------------- */
.nrh-side-card {
  background: var(--nrh-surface);
  border: 1px solid var(--nrh-line);
  border-radius: 13px;
  padding: 17px;
  margin-bottom: 14px;
}
.nrh-side-label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--nrh-ink-soft);
}
.nrh-side-employer {
  display: flex;
  gap: 11px;
  align-items: center;
  margin-top: 11px;
}
.nrh-side-employer .nrh-job-logo { --nrh-logo-size: 46px; }
.nrh-side-name { font-size: 15.5px; font-weight: 700; line-height: 1.25; }
.nrh-side-meta { font-size: 14.5px; color: var(--nrh-ink-muted); margin: 12px 0 0; line-height: 1.6; }

/* ---- verified badge ------------------------------------------
   Shared by the sidebar and the hero. A bare tick character reads
   as a list marker; the filled rosette reads as a credential. */
.nrh-verified {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 700;
  color: var(--nrh-apply-ink);
  line-height: 1.2;
}
.nrh-verified-icon { flex: none; }
.nrh-side-verified { margin-top: 3px; }

/* Directly on the navy gradient, the ink green is unreadable, so use the
   lighter token that clears AA against it. */
.nrh-job-hero > .nrh-verified,
.nrh-job-hero-body > .nrh-verified { color: var(--nrh-apply-on-dark); }

/* ---- employer facts ------------------------------------------
   Labelled rows, not one dot-separated line: at 290px that line
   wrapped mid-value and the location was hard to pick out. */
.nrh-side-facts {
  margin: 13px 0 0;
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 6px 10px;
  align-items: baseline;
}
.nrh-side-facts dt {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--nrh-ink-faint);
}
.nrh-side-facts dd {
  margin: 0;
  font-size: 14px;
  color: var(--nrh-ink-body);
  word-break: break-word;
}


.nrh-side-stack { display: grid; gap: 7px; margin-top: 11px; }
.nrh-side-stack .nrh-btn { justify-content: center; font-size: 14.5px; }

/* the navy alert card */
.nrh-side-alert {
  background: var(--nrh-primary);
  color: #fff;
  border-radius: 13px;
  padding: 17px;
  margin-bottom: 14px;
}
.nrh-side-alert h2 { color: #fff; font-size: 16.5px; font-weight: 800; margin: 0; }
.nrh-side-alert p  { font-size: 14.5px; color: rgba(255,255,255,.88); margin: 7px 0 11px; }
.nrh-side-alert input {
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: var(--nrh-radius-sm);
  font-family: inherit;
  font-size: 14.5px;
}
.nrh-side-alert .nrh-btn { width: 100%; justify-content: center; margin-top: 8px; font-size: 14.5px; }

/* latest jobs list */
.nrh-side-jobs { display: grid; gap: 8px; margin-top: 9px; }
.nrh-side-job {
  display: block;
  background: var(--nrh-surface);
  border: 1px solid var(--nrh-line);
  border-radius: 10px;
  padding: 11px 13px;
  text-decoration: none;
}
.nrh-side-job:hover { border-color: #c3d4ee; text-decoration: none; }
.nrh-side-job-title { display: block; font-size: 14.5px; font-weight: 700; color: var(--nrh-primary); line-height: 1.3; }
.nrh-side-job-meta  { display: block; font-size: 13.5px; color: var(--nrh-ink-soft); margin-top: 3px; }

@media (max-width: 900px) {
  .nrh-job-hero { padding: 20px; border-radius: var(--nrh-radius); }
  .nrh-job-actions .nrh-btn { flex: 1 1 calc(50% - 5px); justify-content: center; font-size: 14.5px; padding: 11px 12px; }
  .nrh-job-actions .nrh-btn:first-child { flex: 1 1 100%; font-size: 16px; padding: 13px 16px; }
}

/* ---- countdown ------------------------------------------------- */
.nrh-countdown {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.nrh-countdown-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
}
.nrh-countdown-units { display: flex; flex-wrap: wrap; gap: 7px; }
.nrh-countdown-unit {
  display: flex;
  align-items: baseline;
  gap: 4px;
  padding: 5px 11px;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--nrh-radius-sm);
}
.nrh-countdown-num {
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.nrh-countdown-cap {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .03em;
  color: rgba(255,255,255,.75);
}
/* urgent: under 48 hours */
.nrh-countdown.is-urgent .nrh-countdown-unit {
  background: var(--nrh-save);
  border-color: var(--nrh-save);
}
.nrh-countdown.is-urgent .nrh-countdown-num,
.nrh-countdown.is-urgent .nrh-countdown-cap { color: #3f2504; }

/* hero variant: on the gradient. Explicit so the modifier the template
   emits is always defined, whatever the base rule does later. */
.nrh-countdown--hero .nrh-countdown-label { color: rgba(255,255,255,.72); }
.nrh-countdown--hero .nrh-countdown-unit {
  background: rgba(255,255,255,.15);
  border-color: rgba(255,255,255,.2);
}
.nrh-countdown--hero .nrh-countdown-num { color: #fff; }
.nrh-countdown--hero .nrh-countdown-cap { color: rgba(255,255,255,.75); }

/* card and cta variants, on light backgrounds */
.nrh-countdown--card .nrh-countdown-label,
.nrh-countdown--cta .nrh-countdown-label { color: var(--nrh-ink-soft); }
.nrh-countdown--card .nrh-countdown-unit,
.nrh-countdown--cta .nrh-countdown-unit {
  background: var(--nrh-info-bg);
  border-color: #d7e4f8;
}
.nrh-countdown--card .nrh-countdown-num,
.nrh-countdown--cta .nrh-countdown-num { color: var(--nrh-primary); }
.nrh-countdown--card .nrh-countdown-cap,
.nrh-countdown--cta .nrh-countdown-cap { color: var(--nrh-ink-soft); }

/* inside the dashed green box, the countdown takes the apply palette */
.nrh-apply-cta .nrh-countdown-label { color: var(--nrh-apply-ink); font-weight: 800; }
.nrh-apply-cta .nrh-countdown-unit {
  background: #dcfce7;
  border-color: var(--nrh-ok-line);
}
.nrh-apply-cta .nrh-countdown-num { color: #14532d; }
.nrh-apply-cta .nrh-countdown-cap { color: var(--nrh-ok-ink); }

/* closed hero reads as a header, not an advert */
.nrh-job-hero--closed {
  background: linear-gradient(135deg, #334155 0%, #475569 100%);
}

/* ---- more blocks ------------------------------------------------ */
.nrh-more-lead {
  font-size: 1.4rem;
  font-weight: 800;
  margin: 28px 0 4px;
}
.nrh-more-block { margin-top: 26px; }
.nrh-more-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.nrh-more-head h2 { font-size: 1.2rem; font-weight: 700; margin: 0; }
.nrh-more-head a  { font-size: 14.5px; font-weight: 700; white-space: nowrap; }

.nrh-job-rows { display: grid; gap: 10px; }
.nrh-job-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  background: var(--nrh-surface);
  border: 1px solid var(--nrh-line);
  border-radius: var(--nrh-radius);
  text-decoration: none;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.nrh-job-row:hover {
  border-color: #c3d4ee;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px -12px rgba(11,61,145,.32);
  text-decoration: none;
}
.nrh-job-row-body  { min-width: 0; }
.nrh-job-row-title {
  display: block;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--nrh-primary);
  line-height: 1.3;
}
.nrh-job-row-meta {
  display: block;
  font-size: 13.5px;
  color: var(--nrh-ink-soft);
  margin-top: 3px;
}
.nrh-job-row-deadline {
  font-size: 13px;
  font-weight: 600;
  color: #b45309;
  white-space: nowrap;
}
.nrh-job-row--compact { grid-template-columns: minmax(0, 1fr); padding: 11px 13px; }

.nrh-applybar-days {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: #b45309;
}

@media (max-width: 900px) {
  .nrh-job-row { grid-template-columns: 36px minmax(0, 1fr); }
  .nrh-job-row-deadline { display: none; }
  .nrh-countdown-num { font-size: 16px; }
  /* Four units instead of three, so buy back the horizontal room. */
  .nrh-countdown-unit  { padding: 5px 8px; gap: 3px; }
  .nrh-countdown-units { gap: 5px; }
}

/* ---- print: the Print button should produce something useful ----- */
@media print {
  .nrh-header, .nrh-footer, .nrh-job-sidebar, .nrh-applybar,
  .nrh-job-actions, .nrh-more-block, .nrh-more-lead,
  .nrh-crumbs, .skip-link, .nrh-countdown, .nrh-safety { display: none !important; }
  .nrh-shell { display: block; }
  .nrh-job-hero {
    background: none !important;
    color: #000;
    padding: 0 0 12px;
    border-bottom: 2px solid #000;
    border-radius: 0;
  }
  .nrh-job-hero h1,
  .nrh-job-hero-company { color: #000; }
  .nrh-job-chip {
    background: none !important;
    color: #000 !important;
    border: 1px solid #666;
  }
  .jb-group-card, .nrh-apply-cta {
    border: 1px solid #999;
    box-shadow: none;
    break-inside: avoid;
  }
  body { background: #fff; font-size: 12pt; }
}


/* ---- section header icon (theme-rendered cards) ------------------ */
.nrh-sec-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--nrh-info-bg);
}
.nrh-sec-icon::before {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--nrh-secondary);
}

/* ---- numbered table of contents ---------------------------------- */
.nrh-toc-list {
  list-style: decimal outside;
  margin: 10px 0 0;
  padding-left: 22px;
  columns: 2;
  column-gap: var(--nrh-gap-lg);
}
.nrh-toc-list li {
  margin-bottom: 7px;
  break-inside: avoid;
}
.nrh-toc-list li::marker {
  color: var(--nrh-secondary);
  font-weight: 600;
}
.nrh-toc-list a {
  color: var(--nrh-secondary);
  font-size: 14.5px;
  font-weight: 500;
  text-decoration: none;
}
.nrh-toc-list a:hover { text-decoration: underline; }

@media (max-width: 768px) {
  .nrh-toc-list { columns: 1; }
}

/* the TOC is a <nav> now, so restate the box it used to inherit */
nav.jb-toc {
  background: var(--nrh-surface);
  border: 1px solid var(--nrh-line);
  border-radius: 10px;
  padding: 20px var(--nrh-gap-lg);
}

/* headings need clearance when the TOC jumps to them */
.nrh-job-content h2 { scroll-margin-top: 20px; }

/* ---- sidebar deadline card ------------------------------------
   The sticky apply bar carries the countdown on phones and is
   hidden above 900px, so this is the desktop equivalent. It sits
   inside the sticky column, so the time left stays on screen for
   the whole read.
   -------------------------------------------------------------- */
.nrh-side-deadline {
  border-color: #c3d4ee;
  background: linear-gradient(180deg, var(--nrh-info-bg) 0%, var(--nrh-surface) 62px);
}

/* The card label already says "Applications close", so the
   countdown's own "Closes in" would state it twice in two lines. */
.nrh-side-deadline .nrh-countdown-label { display: none; }

.nrh-side-deadline .nrh-countdown {
  margin-top: 10px;
  gap: 6px;
}

/* Four units across 290px minus padding, since the countdown now
   carries seconds. Equal columns keep the numbers on a shared baseline
   as the values tick down and change width. */
.nrh-side-deadline .nrh-countdown-units {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  width: 100%;
}
.nrh-side-deadline .nrh-countdown-unit {
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 7px 2px;
}
/* Tabular figures so the column does not jitter every second as the
   digits change width. */
.nrh-side-deadline .nrh-countdown-num {
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}
.nrh-side-deadline .nrh-countdown-cap { font-size: 10.5px; }

.nrh-side-deadline-date {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--nrh-ink-soft);
  line-height: 1.45;
}
.nrh-side-deadline-cta {
  display: flex;
  justify-content: center;
  margin-top: 12px;
  font-size: 15px;
}

/* Under three days the whole card warms up, not just the digits,
   so the urgency is visible from the corner of the eye. */
.nrh-side-deadline.is-urgent {
  border-color: #f2d49b;
  background: linear-gradient(180deg, #fff7e8 0%, var(--nrh-surface) 62px);
}
.nrh-side-deadline.is-urgent .nrh-side-label { color: var(--nrh-save-ink); }

/* Deadline passed while the page was open. */
.nrh-side-deadline.is-closed {
  border-color: var(--nrh-line);
  background: var(--nrh-surface-alt);
}
.nrh-side-deadline.is-closed .nrh-side-deadline-cta,
.nrh-side-deadline.is-closed .nrh-side-deadline-date { display: none; }
.nrh-side-deadline.is-closed .nrh-countdown.is-closed {
  font-size: 14px;
  font-weight: 700;
  color: var(--nrh-warn-ink);
}