/*
  career-impact.css
  Shared stylesheet for every program's "Career Impact" page.
  Upload once to Cascade's asset library and link it from each
  program's page - do not paste this file's content directly into
  a page's content region.

  Structure below follows the order things appear on the page:
  root/typography -> highlights row -> "Making Their Mark" intro
  -> pie chart + legend -> top roles -> rankings card -> employer list
*/

/* Root wrapper. Defines the brand color palette as CSS variables so
   every rule below can reference --navy, --gold, etc. instead of
   repeating hex codes. Change a color here once, it updates everywhere. */
.rc-career-root{--navy:#142c4f;--gold:#F6E30C;--teal:#167e98;--slate:#7a8794;--orange:#e2792e;--green:#3f8f5f;--ink:#1c2b3a;--line:#dfe4e9;font-family:Arial,Helvetica,sans-serif;color:var(--ink);max-width:1100px;margin:0 auto}

/* Consistent box-sizing so padding/border never blow out widths we set. */
.rc-career-root *{box-sizing:border-box}

/* The row of 2-4 big stat numbers near the top (e.g. "81.4% Accepted employment..."). */
.rc-highlights{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0;border-radius:6px;overflow:hidden;margin-bottom:32px}
.rc-hl{padding:22px 20px;text-align:center;border-left:3px solid var(--line)}
.rc-hl:first-child{border-left:none}
.rc-hl .num{color:var(--teal);font-weight:800;font-size:36px;line-height:1}
.rc-hl .lbl{font-size:12px;color:#5b6773;margin-top:8px}

/* Small print at the very bottom of the page (asterisked footnotes from the source report). */
.rc-footnotes{font-size:11px;color:#8b95a1;margin:8px 0 0;line-height:1.6;text-align:right}

/* "Making Their Mark" intro heading + paragraph, sits above the pie chart section. */
.rc-mark{margin:0 0 24px}
.rc-mark h3{color:var(--navy);font-size:18px;font-weight:800;text-transform:uppercase;letter-spacing:.02em;margin:0 0 10px;padding-bottom:10px;border-bottom:3px solid var(--navy)}
.rc-mark p{font-size:18px;line-height:1.4;margin:0 0 30px;max-width:640px}

/* Two-column layout: pie chart (+ legend + top roles) on the left, rankings card on the right.
   Wraps to a single column on narrow screens via the media query at the bottom of this file. */
.rc-maingrid{display:flex;flex-wrap:wrap;gap:36px;align-items:flex-start;margin-bottom:32px}

/* Left column wrapper: holds the "Employment by Industry" heading, the pie+legend row, and Top Roles below it. */
.rc-piecol-outer{flex:0 0 auto;max-width:100%}
.rc-piegroup h4{font-size:18px;font-weight:800;text-transform:uppercase;letter-spacing:.02em;color:var(--navy);border-bottom:3px solid var(--navy);padding-bottom:10px;margin:0 0 16px}
.rc-piegroup-spaced{margin-top:32px}

/* The pie chart and its legend sit side by side in this row. */
.rc-piecol{display:flex;gap:32px;align-items:center;flex-wrap:wrap}
.rc-pierow-wrap{flex:0 1 260px}
.rc-piesvg{display:block;width:100%;max-width:260px;height:auto}

/* Legend list: one row per pie slice, colored swatch + label + percentage. No connecting lines
   to the pie (that approach was tried and dropped — see chat history for why). */
.rc-legend2{list-style:none;margin:0;padding:0;flex:1;min-width:160px}
.rc-legend2 li{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);cursor:pointer;transition:background .15s,opacity .15s}
.rc-legend2 li:last-child{border-bottom:none}
.rc-legend2 .sw{width:18px;height:18px;border-radius:4px;flex-shrink:0}
.rc-legend2 .nm{font-size:14px;color:var(--ink)}
.rc-legend2 .pct{font-weight:700;color:var(--navy);margin-left:auto;font-size:14px}
.rc-piesvg path{cursor:pointer;transition:opacity .15s}

/* Hover/focus-linking between a pie slice and its legend row (see
   wirePieHover in career-impact.js): the linked pair gets a subtle
   highlight, everything else dims slightly. Legend rows are
   keyboard-focusable (tabindex="0"), so this also lights up on
   Tab, not just mouse hover. */
.rc-legend2 li.rc-hot{background:#f4f6f8}
.rc-legend2 li.rc-hot .nm,.rc-legend2 li.rc-hot .pct{font-weight:800}
.rc-legend2 li:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.rc-piesvg path.rc-hot{stroke:#fff;stroke-width:2}
.rc-legend2 li.rc-dim,.rc-piesvg path.rc-dim{opacity:.45}

/* Right column wrapper (holds just the rankings card, stacked vertically if more were added later). */
.rc-sidecol{display:flex;flex-direction:column;gap:24px;flex:1;min-width:220px;max-width:320px}

/* "Top Roles for [Program] Graduates" box, sits under the pie+legend row (left column). */
.rc-roles{margin-top:28px;max-width:340px}
.rc-roles h4, .rc-employers h3 {margin:0 0 10px;font-size:18px;font-weight:800;text-transform:uppercase;letter-spacing:.02em;color:var(--navy);border-bottom:3px solid var(--navy);padding-bottom:10px}
.rc-roles ul{list-style:none;margin:0;padding:0;font-size:15px;line-height:2}

/* Rankings card: navy header bar + gold body, one or more ranking entries stacked with a divider between them. */
.rc-rankcard{border-radius:6px;overflow:hidden}
.rc-rankcard-head{margin:0;background:var(--navy);color:#fff;font-size:15px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:16px 20px}
.rc-rankcard-body{background:var(--gold);padding:32px 24px}
.rc-rankitem{text-align:center;padding:6px 0}
.rc-rankitem .src{font-size:14px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:#0e51b2;margin-bottom:8px}
.rc-rankitem .num{font-size:64px;font-weight:800;color:var(--navy);line-height:1}
.rc-rankitem .lbl{font-size:15px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:#0d1f38;margin-top:8px}
.rc-rankdiv{height:1px;width:70%;background:rgba(13,31,56,.3);margin:20px auto}

/* "Connect with the Career Management Center!" card - fills the side
   column on pages that don't have a Rankings or Class Profile card. */
.rc-ccc{background:#eaf7fb;border:1px solid var(--line);border-radius:6px;padding:24px 26px}
.rc-ccc h4{margin:0 0 12px;font-size:17px;font-weight:800;color:var(--navy);line-height:1.3}
.rc-ccc p{font-size:13px;line-height:1.6;color:#3f4a56;margin:0 0 14px}
.rc-ccc ul{margin:0 0 18px;padding-left:18px;font-size:13px;line-height:1.8;color:#3f4a56}
.rc-ccc-contact{border-top:1px solid rgba(20,44,79,.15);padding-top:14px;font-size:13px}
.rc-ccc-contact div{margin-bottom:6px}
.rc-ccc-contact a{color:var(--navy);font-weight:700;text-decoration:none}
.rc-ccc-contact a:hover{text-decoration:underline}

/* Used only when a page has no pie chart: the side card (Rankings,
   Class Profile, or the Career Center fallback) drops below the
   employer list as its own block instead of sitting in a two-column
   row with nothing beside it. */
.rc-sidecard-solo{max-width:400px;margin-top:32px}

/* Class Profile card: same navy-header/gold-body shape as the
   Rankings card, but its body is a 2-column grid of small stat pairs
   (e.g. "15% Domestic" / "85% International") instead of one or two
   big ranking numbers. Stacks below the Rankings card automatically
   if a page has both (see .rc-sidecol's flex-direction:column). */
.rc-classcard{border-radius:6px;overflow:hidden}
.rc-classcard-head{margin:0;background:var(--navy);color:#fff;font-size:15px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:16px 20px}
.rc-classcard-body{background:var(--gold);padding:24px 22px}
.rc-classgrid{display:grid;grid-template-columns:1fr 1fr;gap:20px 20px}
.rc-classitem{text-align:center}
.rc-classitem .num{font-size:34px;font-weight:800;color:var(--navy);line-height:1}
.rc-classitem .lbl{font-size:11px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:#0d1f38;margin-top:6px}
.rc-classitem:last-child:nth-child(odd){grid-column:1/-1}

/* Employer list at the very bottom of the page, 3 columns on desktop. */
.rc-employers{padding-top:24px}
.rc-employers .intro{font-size:14px;color:#3f4a56;margin:0 0 16px;max-width:640px}
.rc-employers ul{columns:3;column-gap:36px;list-style:none;margin:0;padding:0;font-size:13px;line-height:1.9}
.rc-employers .note{font-size:11px;color:#8b95a1;margin-top:16px}

/* Full-width "roles accepted" section - a light grey callout box for
   a long list of job titles, distinct from the small topRoles list
   that sits under the pie chart. */
.rc-rolesaccepted{background:#f4f6f8;border-radius:6px;padding:24px 28px;margin-top:24px}
.rc-rolesaccepted h3{margin:0 0 14px;font-size:18px;font-weight:800;text-transform:uppercase;letter-spacing:.02em;color:var(--navy);border-bottom:3px solid var(--navy);padding-bottom:10px}
.rc-rolesaccepted ul{columns:2;column-gap:36px;list-style:none;margin:0;padding:0;font-size:13px;line-height:1.9}

/* Below 640px: stack the two-column grid into one column, stack the
   pie chart above its legend instead of side by side, let the pie
   shrink to fit the screen width, and scale down the largest text
   so nothing overflows a phone-width screen. */
@media(max-width:640px){
  .rc-employers ul{columns:1}
  .rc-rolesaccepted ul{columns:1}
  .rc-maingrid{flex-direction:column}
  .rc-piecol{flex-direction:column;align-items:flex-start}
  .rc-pierow-wrap{width:100%}
  .rc-legend2{width:100%}
  /* Always exactly 2 columns on narrow screens, regardless of how
     many highlights a page has (3, 4, whatever) - the !important is
     needed here because JS sets the real column count as an inline
     style, which normally beats an external stylesheet rule. */
  .rc-highlights{grid-template-columns:repeat(2,1fr) !important}
  .rc-hl .num{font-size:32px}
  .rc-rankitem .num{font-size:48px}
  .rc-classitem .num{font-size:26px}
  .rc-mark p{font-size:15px}
}