/* ==========================================================================
   CC Class Profile / Infographic / Chartist Styles
   Updated for Colorado College brand colors
   Updated July 2026

   Legacy color-name mappings:
   - strawberry  -> Sunset Pink / Rose Quartz
   - plum        -> Rocky Mountain Purple / Lavender
   - lime        -> Tava Green / Evergreen
   - grapefruit  -> Garden of the Gods / Sandstone
========================================================================== */


/* --------------------------------------------------------------------------
   Colorado College Brand Palette
-------------------------------------------------------------------------- */

:root {
  /* Primary */
  --cc-tiger-gold: #EAB337;
  --cc-black: #000000;
  --cc-white: #ffffff;

  /* Secondary: Jewel Tones */
  --cc-dark-sky: #1C2840;
  --cc-rocky-mountain-purple: #4C2D4E;
  --cc-sandstone: #A34D2D;
  --cc-desert-brown: #453A2D;
  --cc-evergreen: #43492D;

  /* Secondary: Brights */
  --cc-garden-of-the-gods: #C84E3C;
  --cc-sunset-pink: #D00070;
  --cc-bluebird-day: #288AA1;
  --cc-tava-green: #CEDA42;

  /* Secondary: Pastels */
  --cc-lavender: #9B7DAE;
  --cc-rose-quartz: #F0ADCB;
  --cc-sky-blue: #C1D8EA;
  --cc-desert-stone: #F3F0EB;

  /* Legacy alias colors */
  --cc-strawberry: var(--cc-sunset-pink);
  --cc-strawberry-light: var(--cc-rose-quartz);
  --cc-strawberry-dark: var(--cc-rocky-mountain-purple);

  --cc-plum: var(--cc-rocky-mountain-purple);
  --cc-plum-light: var(--cc-lavender);
  --cc-plum-dark: var(--cc-dark-sky);

  --cc-lime: var(--cc-tava-green);
  --cc-lime-light: var(--cc-desert-stone);
  --cc-lime-dark: var(--cc-evergreen);

  --cc-grapefruit: var(--cc-garden-of-the-gods);
  --cc-grapefruit-light: var(--cc-rose-quartz);
  --cc-grapefruit-dark: var(--cc-sandstone);

  /* Chart-specific aliases */
  --cc-chart-remainder: var(--cc-desert-stone);
  --cc-chart-label-bg: var(--cc-white);
  --cc-chart-label-text: var(--cc-black);
}


/* --------------------------------------------------------------------------
   Infographic Containers
-------------------------------------------------------------------------- */

.cc-infographic-container,
.cc-infographic-container-rev {
  /* height: 100%; */
  min-height: 260px;
  text-align: center;
  font-family: Montserrat, sans-serif;
  margin-left: 15px;
  margin-right: 15px;
  border-radius: 5px;
}

.cc-infographic-container-rev.cc-txt-strawberry {
  border: 5px solid var(--cc-strawberry);
}

.cc-infographic-container-rev.cc-txt-plum {
  border: 5px solid var(--cc-plum);
}

.cc-infographic-container-rev.cc-txt-lime {
  border: 5px solid var(--cc-lime);
}

.cc-infographic-container-rev.cc-txt-grapefruit {
  border: 5px solid var(--cc-grapefruit);
}


/* --------------------------------------------------------------------------
   Infographic Text
-------------------------------------------------------------------------- */

.cc-infographic-number {
  display: block;
  padding-top: 3rem;
  font-size: 3.6rem;
  font-weight: bold;
}

.cc-infographic-label {
  display: block;
  font-size: 1.8rem;
  line-height: 2.3rem;
}


/* --------------------------------------------------------------------------
   Center Donut Labels
-------------------------------------------------------------------------- */

.cc-chart-donut-label {
  text-align: center;
  font-size: 2.3rem;
  line-height: 1.5rem;
}

h3.cc-chart-donut-label .small {
  font-size: 44%;
  line-height: 16px;
}


/* --------------------------------------------------------------------------
   Chartist Donut Base Styles
-------------------------------------------------------------------------- */

.ct-chart-donut .ct-label {
  fill: var(--cc-white);
  font-size: 14px;
  font-weight: 700;
}

.ct-chart-donut .ct-slice-donut {
  stroke-width: 39px !important;
}


/* Optional SVG label background rectangles, if using the JS helper */
.ct-label-bg {
  fill: var(--cc-chart-label-bg);
  pointer-events: none;
}


/* --------------------------------------------------------------------------
   Legacy Chart Color Classes
-------------------------------------------------------------------------- */

/* Strawberry -> Sunset Pink / Rose Quartz */
.cc-chart-strawberry .ct-series-a .ct-slice-donut {
  stroke: var(--cc-strawberry-light);
}

.cc-chart-strawberry .ct-series-b .ct-slice-donut {
  stroke: var(--cc-strawberry);
}

.cc-chart-strawberry .ct-series-c .ct-slice-donut {
  stroke: var(--cc-strawberry-dark);
}


/* Plum -> Rocky Mountain Purple / Lavender */
.cc-chart-plum .ct-series-a .ct-slice-donut {
  stroke: var(--cc-plum-light);
}

.cc-chart-plum .ct-series-b .ct-slice-donut {
  stroke: var(--cc-plum);
}

.cc-chart-plum .ct-series-c .ct-slice-donut {
  stroke: var(--cc-plum-dark);
}


/* Lime -> Tava Green / Evergreen */
.cc-chart-lime .ct-series-a .ct-slice-donut {
  stroke: var(--cc-lime-light);
}

.cc-chart-lime .ct-series-b .ct-slice-donut {
  stroke: var(--cc-lime);
}

.cc-chart-lime .ct-series-c .ct-slice-donut {
  stroke: var(--cc-lime-dark);
}


/* Grapefruit -> Garden of the Gods / Sandstone */
.cc-chart-grapefruit .ct-series-a .ct-slice-donut {
  stroke: var(--cc-grapefruit-light);
}

.cc-chart-grapefruit .ct-series-b .ct-slice-donut {
  stroke: var(--cc-grapefruit);
}

.cc-chart-grapefruit .ct-series-c .ct-slice-donut {
  stroke: var(--cc-grapefruit-dark);
}


/* --------------------------------------------------------------------------
   Chart ID-Specific Overrides

   These are safer for the current class-profile donut set.
   They override the more generic legacy chart color classes above.
-------------------------------------------------------------------------- */

/* Two-part donuts:
   Series A = remainder
   Series B = actual percentage
*/

#accept_chart .ct-series-a .ct-slice-donut,
#dsoc_chart .ct-series-a .ct-slice-donut,
#fg_chart .ct-series-a .ct-slice-donut,
#int_chart .ct-series-a .ct-slice-donut {
  stroke: var(--cc-chart-remainder);
}

/* Admit rate */
#accept_chart .ct-series-b .ct-slice-donut {
  stroke: var(--cc-tiger-gold);
}

/* Domestic Students of Color */
#dsoc_chart .ct-series-b .ct-slice-donut {
  stroke: var(--cc-rocky-mountain-purple);
}

/* First-generation college students */
#fg_chart .ct-series-b .ct-slice-donut {
  stroke: var(--cc-bluebird-day);
}

/* International students */
#int_chart .ct-series-b .ct-slice-donut {
  stroke: var(--cc-garden-of-the-gods);
}


/* Gender identity donut:
   Series A = Female
   Series B = Male
   Series C = Non-binary / another gender
*/

#gender_chart .ct-series-a .ct-slice-donut {
  stroke: var(--cc-tiger-gold);
}

#gender_chart .ct-series-b .ct-slice-donut {
  stroke: var(--cc-dark-sky);
}

#gender_chart .ct-series-c .ct-slice-donut {
  stroke: var(--cc-sunset-pink);
}


/* --------------------------------------------------------------------------
   Optional fillDonut Plugin Support

   Some Chartist fillDonut output adds ct-fill-donut groups.
   These keep generated duplicate/background slices aligned.
-------------------------------------------------------------------------- */

#accept_chart .ct-series-a.ct-fill-donut .ct-slice-donut,
#dsoc_chart .ct-series-a.ct-fill-donut .ct-slice-donut,
#fg_chart .ct-series-a.ct-fill-donut .ct-slice-donut,
#int_chart .ct-series-a.ct-fill-donut .ct-slice-donut {
  stroke: var(--cc-chart-remainder);
}

#accept_chart .ct-series-b.ct-fill-donut .ct-slice-donut {
  stroke: var(--cc-tiger-gold);
}

#dsoc_chart .ct-series-b.ct-fill-donut .ct-slice-donut {
  stroke: var(--cc-rocky-mountain-purple);
}

#fg_chart .ct-series-b.ct-fill-donut .ct-slice-donut {
  stroke: var(--cc-bluebird-day);
}

#int_chart .ct-series-b.ct-fill-donut .ct-slice-donut {
  stroke: var(--cc-garden-of-the-gods);
}

#gender_chart .ct-series-a.ct-fill-donut .ct-slice-donut {
  stroke: var(--cc-tiger-gold);
}

#gender_chart .ct-series-b.ct-fill-donut .ct-slice-donut {
  stroke: var(--cc-dark-sky);
}

#gender_chart .ct-series-c.ct-fill-donut .ct-slice-donut {
  stroke: var(--cc-sunset-pink);
}


/* --------------------------------------------------------------------------
   Text Utilities
-------------------------------------------------------------------------- */

.cc-txt-white {
  color: var(--cc-white);
}

.cc-txt-black {
  color: var(--cc-black);
}

.cc-txt-strawberry {
  color: var(--cc-strawberry);
}

.cc-txt-plum {
  color: var(--cc-plum);
}

.cc-txt-lime {
  color: var(--cc-lime);
}

.cc-txt-grapefruit {
  color: var(--cc-grapefruit);
}


/* New brand-name text utilities */

.cc-txt-tiger-gold {
  color: var(--cc-tiger-gold);
}

.cc-txt-dark-sky {
  color: var(--cc-dark-sky);
}

.cc-txt-rocky-mountain-purple {
  color: var(--cc-rocky-mountain-purple);
}

.cc-txt-sandstone {
  color: var(--cc-sandstone);
}

.cc-txt-desert-brown {
  color: var(--cc-desert-brown);
}

.cc-txt-evergreen {
  color: var(--cc-evergreen);
}

.cc-txt-garden-of-the-gods {
  color: var(--cc-garden-of-the-gods);
}

.cc-txt-sunset-pink {
  color: var(--cc-sunset-pink);
}

.cc-txt-bluebird-day {
  color: var(--cc-bluebird-day);
}

.cc-txt-tava-green {
  color: var(--cc-tava-green);
}

.cc-txt-lavender {
  color: var(--cc-lavender);
}

.cc-txt-rose-quartz {
  color: var(--cc-rose-quartz);
}

.cc-txt-sky-blue {
  color: var(--cc-sky-blue);
}

.cc-txt-desert-stone {
  color: var(--cc-desert-stone);
}


/* --------------------------------------------------------------------------
   Background Utilities
-------------------------------------------------------------------------- */

.cc-bg-strawberry {
  background: var(--cc-strawberry-dark);
}

.cc-bg-grapefruit {
  background: var(--cc-grapefruit-dark);
}

.cc-bg-plum {
  background: var(--cc-plum-light);
}


/* Optional new brand-name background utilities */

.cc-bg-tiger-gold {
  background: var(--cc-tiger-gold);
}

.cc-bg-dark-sky {
  background: var(--cc-dark-sky);
}

.cc-bg-rocky-mountain-purple {
  background: var(--cc-rocky-mountain-purple);
}

.cc-bg-sandstone {
  background: var(--cc-sandstone);
}

.cc-bg-desert-brown {
  background: var(--cc-desert-brown);
}

.cc-bg-evergreen {
  background: var(--cc-evergreen);
}

.cc-bg-garden-of-the-gods {
  background: var(--cc-garden-of-the-gods);
}

.cc-bg-sunset-pink {
  background: var(--cc-sunset-pink);
}

.cc-bg-bluebird-day {
  background: var(--cc-bluebird-day);
}

.cc-bg-tava-green {
  background: var(--cc-tava-green);
}

.cc-bg-lavender {
  background: var(--cc-lavender);
}

.cc-bg-rose-quartz {
  background: var(--cc-rose-quartz);
}

.cc-bg-sky-blue {
  background: var(--cc-sky-blue);
}

.cc-bg-desert-stone {
  background: var(--cc-desert-stone);
}


/* --------------------------------------------------------------------------
   Profile Table
-------------------------------------------------------------------------- */

.cc-profile-table {
  width: 100%;
  margin: 30px 0;
  font-family: Montserrat, sans-serif;
}

.cc-profile-table thead {
  background: var(--cc-bluebird-day);
  color: var(--cc-white);
}

.cc-profile-table th,
.cc-profile-table td {
  border: 1px solid var(--cc-bluebird-day);
}

.cc-profile-table tr td:first-of-type {
  font-weight: bold;
}


/* --------------------------------------------------------------------------
   Profile Map Row
-------------------------------------------------------------------------- */

.cc-profile-maprow .cc-infographic-container,
.cc-profile-maprow .cc-infographic-container-rev {
  height: initial;
  min-height: initial;
  padding: 1rem 0;
}

.cc-profile-maprow .cc-infographic-container .cc-infographic-number,
.cc-profile-maprow .cc-infographic-container-rev .cc-infographic-number {
  padding: 0;
  font-size: 3rem;
}


/* --------------------------------------------------------------------------
   Responsive Styles
-------------------------------------------------------------------------- */

@media screen and (min-width: 1200px) and (max-width: 1600px) {
  #gender_chart .cc-chart-donut-label {
    font-size: 2rem;
    line-height: 1.1rem;
  }
}

@media screen and (min-width: 992px) and (max-width: 1200px) {
  #gender_chart .cc-chart-donut-label {
    font-size: 1rem;
    line-height: 1rem;
  }
}

@media screen and (max-width: 1200px) {
  h3.cc-chart-donut-label .small {
    font-size: 0.9rem;
    line-height: 0.5rem;
  }
}

@media screen and (max-width: 992px) {
  .cc-infographic-number {
    padding-top: initial;
  }

  .cc-infographic-container,
  .cc-infographic-container-rev {
    padding: 2rem 0;
  }

  .cc-chart-donut-label {
    font-size: 5rem;
    line-height: 2.5rem;
  }

  h3.cc-chart-donut-label .small {
    font-size: 1.2rem;
  }

  #gender_chart .cc-chart-donut-label {
    font-size: 1.2rem;
    line-height: 1.4rem;
  }
}

@media screen and (max-width: 600px) {
  .cc-chart-donut-label {
    font-size: 3.5rem;
    line-height: 1.5rem;
  }

  h3.cc-chart-donut-label .small {
    font-size: 1.3rem;
  }

  .cc-profile-table {
    font-size: 0.7rem;
  }
}