/*
 Theme Name:   Web Services - Ë¿¹ÏÊÓƵ
 Theme URI:    https://www.pcc.edu/web-services/
 Description:  A custom theme for PCC Web Services. Child of pcc.
 Author:       Ë¿¹ÏÊÓƵ
 Author URI:   https://www.pcc.edu/
 Version:      1.0
 Template:     pcc
*/


/* ----------------------------------------------------------------
    headings
---------------------------------------------------------------- */
.style-heading {margin-top:3.75rem;} /* toRem(60), more than regular headings */
.style-heading::before {
  color:#008099; /* $teal */
  content:"\f105 \f105 \f105"; /* angle-right icon */
  font-family:FontAwesome;
  font-size:1.5rem;
  padding-right:0.625rem; /* toRem(10) */
}



/* ----------------------------------------------------------------
    color swatches
---------------------------------------------------------------- */
.color-swatch {
  display:block;
  height:5rem; /* toRem(80) */
  width:100%;
}
.color-swatch.teal {background:#008099;} /* $teal */
.color-swatch.navy {background:#263c53;} /* $navy */
.color-swatch.green {background:#1c8264;} /* $green */
.color-swatch.orange {background:#c7502a;} /* $orange */
.color-swatch.purple {background:#3f2b54;} /* $purple */
.color-swatch.red {background:#9e0c0f;} /* $red */
.color-swatch.light-gray {background:#e9e9e9;} /* $light-gray */
.color-swatch.dark-gray {background:#333333;} /* $dark-gray */
.color-swatch.medium-gray {background:#c1c1c1;} /* $medium-gray */
.color-swatch.dark-teal {background:#00667a;} /* $dark-teal */
.color-swatch.yellow {background:#ffd13e;} /* mypcc, no variable */
.color-swatch.red-mypcc {background:#e0563f;} /* mypcc, no variable */
.color-swatch.pink {background:#fddbda;} /* mypcc, no variable */



/* ----------------------------------------------------------------
    clearing examples
---------------------------------------------------------------- */
.clearing-example {
  float:left;
  margin-right:toRem(10);
  width:45%;
}



/* ----------------------------------------------------------------
    panels
---------------------------------------------------------------- */
.panel {
  background:#f4f4f4;
  border:0.0625rem solid #c1c1c1; /* toRem(1), $medium-gray */
  margin:1.25rem 0 0.625rem;  /* toRem(20), toRem(10) */
  padding:0.9375rem;  /* toRem(15) */
}
.panel::after {
  clear:both;
  content:"";
  display:block;
}
.panel h5 {margin-top:0;}



/* ----------------------------------------------------------------
    stylesheet location
---------------------------------------------------------------- */
.stylesheet-location code:not(:last-of-type)::after {
  content:", ";
}



/* ----------------------------------------------------------------
    more space below example HTML
---------------------------------------------------------------- */
.open-sesame pre {margin-bottom:2.5rem;} /* toRem(40) */



/* ----------------------------------------------------------------
    ACF adding breaks in cards, remove them
---------------------------------------------------------------- */
.card > br:first-child, .card > a > br:first-child {display:none;}



/* ----------------------------------------------------------------
    page lists in cards
---------------------------------------------------------------- */
.card .children li {
  display:inline-block;
  padding:0.0625rem 0; /* toRem(1) */
}
.card .children li:not(:first-of-type) {text-transform:lowercase;}
.card .children li:not(:last-of-type)::after {
  content:", ";
  padding-right:0.0625rem; /* toRem(1) */
}
.card .children li:first-of-type::before {
  content:"";
  display:list-item; /* re-add the bullet removed by inline-block */
  position:absolute;
}



/* ----------------------------------------------------------------
    subsections and subpages in cards
---------------------------------------------------------------- */
.card .less-padding {padding-bottom:0.3125rem;} /* toRem(5) */