/* ==========================================================================
   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; }

/* Opt-in employer assessment routes and bank-backed practice sample. */
.empv2-routes { margin: 36px 0 56px; }
.empv2-routes h2 { font-size: 26px; line-height: 1.25; }
.empv2-routes__intro { line-height: 1.7; margin: 14px 0 24px; }
.empv2-routes__list { display: grid; gap: 20px; }
.empv2-route { border: 1px solid #dce3ee; border-radius: 14px; padding: 24px; background: linear-gradient(135deg,#f2f5ff,#fff 65%); }
.empv2-route__head { display: flex; align-items: center; gap: 16px; }
.empv2-route__number { display: grid; place-items: center; flex: 0 0 44px; height: 44px; background: #192543; color: #fff; border-radius: 10px; font: 500 16px 'IBM Plex Mono',monospace; }
.empv2-route h3 { margin: 0; font-size: 20px; line-height: 1.35; }
.empv2-route__head p { margin: 5px 0 0; color: #53617b; font-size: 13px; }
.empv2-route__steps { display: flex; flex-wrap: wrap; gap: 10px 20px; list-style: none; padding: 0; margin: 24px 0; }
.empv2-route__steps li { position: relative; background: #e5ebfa; color: #243665; border-radius: 6px; padding: 7px 10px; font-size: 12px; font-weight: 600; }
.empv2-route__steps li:not(:last-child)::after { content: '→'; position: absolute; right: -17px; color: #5466aa; }
.empv2-route__body { font-size: 14px; line-height: 1.75; margin: 0 0 20px; }
.empv2-route__links { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: baseline; }
.empv2-route__links a { font-size: 13px; }
.empv2-route__links a:first-child { font-weight: 600; }
.empv2-route__links a:last-child { color: #53617b; text-decoration: underline; text-underline-offset: 3px; }
.empv2-routes__checked { color: #667089; font-size: 12px; line-height: 1.6; margin-top: 20px; }
.empv2-practice { min-width: 0; border: 1px solid #d4deee; border-radius: 16px; padding: 0 32px 28px; overflow: hidden; box-shadow: 0 12px 35px #1a2a5510; margin: 28px 0 56px; }
.empv2-practice__legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.empv2-practice__top { margin: 0 -32px 28px; padding: 20px 32px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; background: #192543; color: #fff; }
.empv2-practice__top > span { font: 500 12px 'IBM Plex Mono',monospace; padding: 6px 10px; background: #ffffff18; border-radius: 5px; }
.empv2-practice__top .empv2-practice__brand { margin-left: auto; background: none; font-family: inherit; font-weight: 600; }
.empv2-practice h3 { font-size: 23px; line-height: 1.5; margin: 0 0 30px; max-width: 850px; }
.empv2-practice__grid { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(260px,1fr); gap: 36px; }
.empv2-practice__chart { margin: 0; padding: 18px; background: #f5f7fc; border-radius: 12px; }
.empv2-practice__chart svg { display: block; width: 100%; height: auto; }
.empv2-practice__chart figcaption { font-size: 12px; color: #53617b; line-height: 1.6; margin-top: 12px; }
.empv2-practice__data { margin-top: 16px; font-size: 13px; }
.empv2-practice summary { cursor: pointer; color: #194ac2; font-weight: 600; padding: 12px 0; }
.empv2-practice__table { overflow-x: auto; }
.empv2-practice table { border-collapse: collapse; width: 100%; font-size: 12px; }
.empv2-practice caption { text-align: left; padding: 8px 0; }
.empv2-practice th,.empv2-practice td { padding: 10px 8px; border-bottom: 1px solid #dce3ee; text-align: left; }
.empv2-practice__options { display: grid; gap: 12px; }
.empv2-practice__option { position: relative; display: flex; align-items: center; gap: 14px; padding: 16px; border: 2px solid #dce3ee; border-radius: 10px; cursor: pointer; font-size: 19px; }
.empv2-practice__option input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.empv2-practice__option:has(input:checked) { border-color: #4459ed; background: #f2f4ff; }
.empv2-practice__option:has(input:focus-visible) { outline: 3px solid #f5a623; outline-offset: -3px; }
.empv2-practice__letter { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 6px; background: #eaf0f8; font-weight: 600; font-size: 15px; }
.empv2-practice__mark { margin-left: auto; font-size: 11px; }
.empv2-practice__option.is-correct, .empv2-practice__option.is-correct:has(input:checked) { border-color: #178252; background: #edf9f2; }
.empv2-practice__option.is-wrong, .empv2-practice__option.is-wrong:has(input:checked) { border-color: #bd3535; background: #fff2f2; }
.empv2-practice__check { width: 100%; display: flex; justify-content: space-between; margin-top: 20px; padding: 16px 20px; border: 0; border-radius: 8px; color: #fff; background: #3455e5; font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.empv2-practice__check[hidden] { display: none; }
.empv2-practice__feedback { font-size: 14px; line-height: 1.6; margin: 14px 0 0; }
.empv2-practice__solution { background: #edf2fb; border-radius: 10px; padding: 8px 22px; margin-top: 28px; }
.empv2-practice__solution > div { padding-bottom: 16px; font-size: 15px; line-height: 1.8; }
.empv2-practice__formula { background: #fff; border-radius: 8px; padding: 16px; font-size: 17px; font-variant-numeric: tabular-nums; }
@media(max-width: 700px) {
 .empv2-practice { padding: 0 18px 20px; }
 .empv2-practice__top { margin: 0 -18px 24px; padding: 18px; }
 .empv2-practice__top .empv2-practice__brand { flex-basis: 100%; margin-left: 0; padding-left: 0; }
 .empv2-practice h3 { font-size: 20px; }
 .empv2-practice__grid { grid-template-columns: minmax(0,1fr); gap: 24px; }
 .empv2-practice__chart { padding: 8px; }
 .empv2-route { padding: 20px; }
}
.empv2-practice--text .empv2-practice__grid { grid-template-columns: minmax(0,1fr); }
.empv2-practice--text:not(.empv2-practice--scenario) .empv2-practice__options { grid-template-columns: repeat(2,minmax(0,1fr)); }
.empv2-practice--text .empv2-practice__check { max-width: 380px; }
.empv2-practice--scenario .empv2-practice__answer { font-size: 16px; line-height: 1.65; }
.empv2-practice__letter { flex-shrink: 0; }
.empv2-practice__diagram { padding: 30px; background: #f2f5fc; border-radius: 12px; color: #243665; }
.empv2-practice__diagram svg { width: 100%; max-height: 320px; display: block; }
@media(max-width: 600px) { .empv2-practice--text:not(.empv2-practice--scenario) .empv2-practice__options { grid-template-columns: minmax(0,1fr); } .empv2-practice__mark { max-width: 65px; flex-shrink: 0; } }