/* ==========================================================================
   Employer profile v2 — template-specific styles.
   Shared classes live in v2-core.css; everything here is empv2- prefixed.
   ========================================================================== */

/* Hero try-one (situational) aside */
.empv2-hq {
  border: 1px solid #E4E9F1; border-radius: 10px; background: #F8FAFD;
  padding: 20px 20px 18px;
  /* HANDOFF S19: the design file offset this card by a fixed 82px to line it
     up with the intro paragraph. That is a number compensating for the height
     of the text above it, and it breaks the moment the H1 wraps -- which it
     does on dozens of the 312 employers ("Defence Science and Technology
     Laboratory"). The card now top-aligns with the hero grid instead. */
  margin-top: 0;
}
/* No suitable sample question for the aside: the hero runs full width rather
   than leaving a 344px empty track. */
/* No peer-employer list for this page: the guide runs full width. */
.empv2-hq__letter {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font: 500 11px 'IBM Plex Mono', monospace;
  border: 1.5px solid #C7CCD8; background: #fff; color: #5A6478;
}
.empv2-hq__mark { margin: 12px 0 0; padding-top: 11px; border-top: 1px solid #EDEFF4; font-size: 14px; line-height: 1.5; color: #5A6478; }
.empv2-hq__mark.is-right { color: #0E7A50; }
.empv2-hq__mark.is-wrong { color: #C22A22; }

/* Entity band — who this employer is */
.empv2-entity { background: #F6F8FC; border-bottom: 1px solid #EDEFF4; padding: 18px 0; }
.empv2-entity__inner {
  max-width: 1120px; margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; gap: 12px 40px; flex-wrap: wrap;
  justify-content: center;
}
/* `flex: none` here sized the label to max-content and stopped it wrapping, so a long
   employer name ran off the page: "Who The South African Police Service (SAPS) is" was
   364px in a 320px row, the one page in the v2 estate that still scrolled sideways at
   375px (measured 2026-09-02). It shrinks and wraps now, which changes nothing on a
   screen wide enough to hold it. */
.empv2-entity__label { font: 500 12px/1.4 'IBM Plex Mono', monospace; letter-spacing: .06em; text-transform: uppercase; color: #5A6478; flex: 0 1 auto; min-width: 0; }
.empv2-entity__facts { margin: 0; flex: 0 1 auto; min-width: 0; max-width: 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 36px; align-items: baseline; }
.empv2-entity__fact { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.empv2-entity__fact dt { font-size: 14px; color: #5A6478; white-space: nowrap; }
.empv2-entity__fact dd { margin: 0; font-size: 15px; line-height: 1.4; font-weight: 500; color: #14203A; }
.tv2 .empv2-entity__fact dd a { color: #1257E8; }

/* Process heading + stages timeline */
.empv2-process-head { margin-top: 40px; padding-top: 32px; border-top: 1px solid #DFE3EA; scroll-margin-top: 16px; }
.empv2-process-head h2 { margin: 0 0 10px; font-size: 26px; line-height: 1.25; font-weight: 500; color: #14203A; }
.empv2-process-head p { margin: 0; font-size: 16px; line-height: 1.6; color: #414B5E; max-width: 60ch; }

.empv2-stages { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0,1fr); gap: 0; }
.empv2-stage { display: grid; grid-template-columns: 34px minmax(0,1fr); column-gap: 20px; min-width: 0; }
.empv2-stage__rail { position: relative; display: flex; justify-content: center; }
.empv2-stage__line { position: absolute; top: 34px; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: #DFE3EA; }
.empv2-stage--last .empv2-stage__line { background: transparent; }
.empv2-stage__node {
  position: relative; z-index: 1; width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font: 500 15px 'IBM Plex Mono', monospace;
  background: #fff; color: #5A6478; border: 1.5px solid #DFE3EA;
}
.empv2-stage__node--test { background: #1257E8; color: #fff; border-color: #1257E8; }
.empv2-stage__body { min-width: 0; padding: 0 0 34px; }
/* Stage bodies carry only a title (no per-stage body field exists in this
   family), so the rail steps tighten up. */
.empv2-stage__body--bare { padding-bottom: 24px; }
.empv2-stage--last .empv2-stage__body { padding-bottom: 0; }
.empv2-stage__title-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 5px; }
.empv2-stage__title-row h3 { margin: 0; font-size: 19px; line-height: 1.3; font-weight: 500; color: #14203A; }
.tv2 a.empv2-stage__chip {
  font: 500 11px/1 'IBM Plex Mono', monospace; letter-spacing: .06em; text-transform: uppercase;
  color: #1257E8; background: #EEF4FF; border: 1px solid #C9DCFF;
  padding: 5px 8px; border-radius: 999px; text-decoration: none;
}
.tv2 a.empv2-stage__chip:hover { background: #DCE8FF; color: #1257E8; text-decoration: none; }
.empv2-stage__body > p { margin: 0 0 12px; font-size: 16px; line-height: 1.6; color: #414B5E; max-width: 62ch; text-wrap: pretty; }

/* Intro right column — at-a-glance card + contents */

/* Sample question */
.empv2-sample { padding: 44px 0 0; scroll-margin-top: 16px; }
.empv2-sample__lede { margin: 0 0 26px; font-size: 16px; line-height: 1.6; color: #414B5E; max-width: 62ch; }
.empv2-q { margin: 0 0 20px; padding: 26px; border: 1px solid #DFE3EA; border-radius: 10px; background: #fff; min-width: 0; }
.empv2-q__tags { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.empv2-q__num { font: 600 13px 'IBM Plex Mono', monospace; color: #14203A; font-variant-numeric: tabular-nums; }
.empv2-q__tag {
  font: 500 11px/1 'IBM Plex Mono', monospace; letter-spacing: .06em; text-transform: uppercase;
  color: #5A6478; background: #F6F8FC; border: 1px solid #DFE3EA; padding: 5px 8px; border-radius: 999px;
}
.empv2-q__grid { display: grid; grid-template-columns: minmax(min(300px,100%),1fr) minmax(min(280px,100%),360px); gap: 28px 40px; align-items: start; }
.empv2-q__stem-col { min-width: 0; }
.empv2-q__stem { margin: 0; font-size: 18px; line-height: 1.6; color: #14203A; max-width: 58ch; text-wrap: pretty; }
.empv2-q__opts { display: grid; grid-template-columns: minmax(0,1fr); gap: 10px; align-content: start; }
.empv2-q__option {
  display: flex; align-items: center; gap: 14px; padding: 15px 17px; border-radius: 8px;
  cursor: pointer; min-height: 56px; border: 1.5px solid #DFE3EA; background: #fff; position: relative;
}
.empv2-q__option:hover { border-color: #1257E8; }
.empv2-q__option input { position: absolute; opacity: 0; width: 0; height: 0; }
.empv2-q__letter {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font: 500 14px 'IBM Plex Mono', monospace;
  border: 1.5px solid #C7CCD8; background: #fff; color: #5A6478;
}
.empv2-q__body { font-size: 16px; line-height: 1.5; color: #14203A; font-variant-numeric: tabular-nums; }
.empv2-q__mark { margin-left: auto; font: 500 12px 'IBM Plex Mono', monospace; color: #5A6478; }
.empv2-q__option.is-revealed-right { border-color: #0E7A50; background: #E6F6EE; }
.empv2-q__option.is-revealed-right .empv2-q__letter { border-color: #0E7A50; background: #0E7A50; color: #fff; }
.empv2-q__option.is-revealed-right .empv2-q__body { font-weight: 500; }
.empv2-q__option.is-revealed-right .empv2-q__mark { color: #0E7A50; }
.empv2-q__option.is-picked-wrong { border-color: #C22A22; background: #FCEBEA; }
.empv2-q__option.is-picked-wrong .empv2-q__letter { border-color: #C22A22; background: #C22A22; color: #fff; }
.empv2-q__option.is-picked-wrong .empv2-q__mark { color: #C22A22; }

/* Sample-question stimulus: a data table (132 pages) and/or a figure (16). */
.empv2-q__stimulus { margin: 0 0 20px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.empv2-q__stimulus table { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 420px; }
.empv2-q__stimulus th, .empv2-q__stimulus td { text-align: left; padding: 8px 12px; border-bottom: 1px solid #EDEFF4; vertical-align: top; white-space: nowrap; }
.empv2-q__stimulus th { color: #14203A; font-weight: 500; background: #F6F8FC; }
.empv2-q__stimulus p { margin: 0 0 12px; font-size: 16px; line-height: 1.6; color: #414B5E; }
.empv2-q__figure { margin: 0 0 20px; }
.empv2-q__figure img { display: block; max-width: 100%; height: auto; border: 1px solid #EDEFF4; border-radius: 8px; }

/* CMS fields that may contain markdown (10 summaries, 16 FAQ answers) are
   markdownified into a block container rather than printed raw inside a <p>. */

/* Score panel */
.empv2-score {
  margin-bottom: 56px; border: 1px solid #DFE3EA; border-radius: 10px; background: #fff;
  overflow: hidden; box-shadow: 0 1px 2px rgba(20,32,58,.06), 0 2px 8px rgba(20,32,58,.05);
}
.empv2-score__inner { margin: 0; min-width: 0; padding: 28px; }
.empv2-score__copy { min-width: 0; }
.empv2-score__eyebrow { margin: 0 0 12px; font: 500 11px/1 'IBM Plex Mono', monospace; letter-spacing: .07em; text-transform: uppercase; color: #5A6478; }
.empv2-score__copy h3 { margin: 0 0 10px; font-size: 22px; line-height: 1.3; font-weight: 500; color: #14203A; max-width: 28ch; text-wrap: balance; }
.empv2-score__body { margin: 0; font-size: 16px; line-height: 1.6; color: #414B5E; max-width: 44ch; text-wrap: pretty; }

/* Score note: the design file's curve carried figures sourced for the exemplar
   only, so the chart is gone and the panel is a single copy column. */
.empv2-score--note .empv2-score__body { max-width: 78ch; }
.empv2-score--note .empv2-score__copy h3 { max-width: 40ch; }

/* Markdownified body copy (body1/body2/body3). tv2-guide__section already
   styles h2, p, ul, ol, table and links; these are the elements the CMS
   markdown adds on top of it. */

/* Tests-used band */
.tv2 a.empv2-tcard {
  display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 12px; align-items: start;
  background: #fff; border: 1px solid #DFE3EA; border-radius: 9px; padding: 13px 14px; text-decoration: none;
}

/* Reviews — numeric score in the title row (design shows a number, not stars) */

/* Trademark note */
.empv2-trademark { background: transparent; padding: 8px 0 8px; }
.empv2-trademark p { margin: 0; font-size: 13px; line-height: 1.6; color: #5A6478; }

/* ==========================================================================
   Responsive — per the design's breakpoint set
   ========================================================================== */
@media (max-width: 980px) {
  .empv2-hq { margin-top: 0; max-width: 460px; }
  .empv2-q__grid { grid-template-columns: minmax(0,1fr); gap: 28px; }
}
@media (max-width: 620px) {
  .empv2-entity__inner { padding-left: 20px; padding-right: 20px; }
}
/* Below ~480px the score chart column is narrower than the two nowrap labels
   combined, so they stop being positional and become a plain end-to-end row. */
@media (max-width: 480px) {
}

/* Which publisher powers this employer's tests (reverse index over used_by) */
.empv2-publishers { margin-top: 26px; padding: 20px 22px; background: #F6F8FC; border-radius: 10px; }
.empv2-publishers h3 { margin: 0 0 12px; font: 500 17px/1.35 'Circular', sans-serif; color: #14203A; }
.empv2-publishers ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.empv2-publishers li { font-size: 15px; line-height: 1.5; color: #414B5E; }
.empv2-publishers li a.empv2-publishers__link { font-weight: 500; color: #1F4FD8; text-decoration: underline; }
.empv2-publishers li span { color: #5A6478; }
.empv2-publishers__note { margin: 13px 0 0; font-size: 13px; line-height: 1.5; color: #5A6478; }