/*
 Theme Name:   President - Portland Community College
 Theme URI:    https://www.pcc.edu/president/
 Description:  A custom theme for the PCC President website. Child of pcc
 Author:       Portland Community College
 Author URI:   https://www.pcc.edu/
 Version:      1.0
 Template:     pcc
*/


/* ----------------------------------------------------------------
    fancy intro section
---------------------------------------------------------------- */
.president-intro {
  align-items:center;
  background:url('/president/wp-content/themes/pcc-president/diamond.png') repeat top center #008099; /* $teal */
  background-size:2.5rem; /*  */
  border-radius:0.3125rem 0.3125rem 0 0; /* toRem(5) */
  box-shadow:0.1875rem 0.1875rem #005566; /* toRem(3), darkened $teal */
  text-align:center;
}
.president-intro .president-image {
  background:url('/president/wp-content/themes/pcc-president/president-bennings.jpg') no-repeat center right;
  background-size:cover;
  border-radius:0.3125rem 0 0; /* toRem(5), needed to be on the image as well, match amount on .president-intro */
  min-height:21.25rem; /* toRem(340) */
}
.president-intro .president-info {padding:0 1.25rem;} /* toRem(20) */
.president-intro h4 {
  color:#ffffff; /* $white */
  line-height:1.3; /* less */
  margin-top:-0.25rem; /* toRem(4) */
}
.president-intro p {
  color:#ffffff; /* $white */
  padding:0.625rem 0 1.25rem; /* toRem(10), toRem(20) */
}
.president-intro img {border:none !important;}
.president-intro .button {
  background:#263c53; /* $blue */
  border:none;
  box-shadow:0.1875rem 0.1875rem #0e161f; /* @include shadow($blue) */
  margin:0;
}
.president-intro .button:hover,
.president-intro .button:focus {
  background:#1e2f42; /* darkened $blue */
  box-shadow:0.1875rem 0.1875rem #06090d; /* darkened box shadow */
}


/* ------------------------------------
    custom medium screens
    $medium-min and custom
------------------------------------ */
@media only screen and (min-width:40em) and (max-width:49.375em) { /* 640px, 790px */
  .president-intro h4 {font-size:1.4em;} /* smaller to avoid space above and below image */
  .president-intro p {
    font-size:0.95em; /* smaller to avoid space above and below image */
    padding:0 0 0.3125rem; /* toRem(5), less */
  }
  .president-intro .button {font-size:0.85em !important;} /* smaller to avoid space above and below image */
}


/* ------------------------------------
    small screens
    $small-max
------------------------------------ */
@media only screen and (max-width:39.9375em) { /* 639px */
  .president-intro .president-info {padding:2.8125rem 1.25rem 3.125rem;} /* toRem(45), toRem(20), toRem(50) */
}



/* ----------------------------------------------------------------
    history and mission buttons
---------------------------------------------------------------- */
.college-buttons {
  background:#e9e9e9; /* $light-gray */
  border-radius:0 0 0.3125rem 0.3125rem; /* toRem(5), match amount on .president-intro */
  box-shadow:0.1875rem 0.1875rem #c3c3c3; /* toRem(3), match .card @shadow mixin color */
  margin-bottom:1.25rem; /* toRem(20) */
  padding:1.875rem 0.625rem; /* toRem(30), toRem(10) */
}
.college-buttons .cell {
  display:flex;
  justify-content:center; /* center the buttons */
}
.college-buttons .button {
  margin:0 0 0.375rem 0; /* toRem(6) */
  padding:0.75rem 3.125rem 0.8125rem 2.75rem; /* toRem(12), toRem(50), toRem(13), toRem(44), a little more on the sides */
}


/* ------------------------------------
    small screens
    $small-max
------------------------------------ */
@media only screen and (max-width:39.9375em) { /* 639px */
  .college-buttons .cell:first-of-type .button {margin-bottom:1.25rem;} /* toRem(20) */
}



/* ----------------------------------------------------------------
    social media
---------------------------------------------------------------- */
.president-social {
  display:flex;
  justify-content:space-between;
  list-style:none;
  margin:0 auto;
  width:40%;
}
.president-social i {font-size:4.375em;} /* 70px */


/* ------------------------------------
    small screens
    $small-max
------------------------------------ */
@media only screen and (max-width:39.9375em) { /* 639px */
  .president-social {width:60%;}
}


/* ------------------------------------
    print
------------------------------------ */
@media only print {
  .president-social {
    display:block;
    width:100%;
  }
}



/* ----------------------------------------------------------------
    miscellaneous
---------------------------------------------------------------- */
.youtube-container {margin-top:1.5625rem;} /* toRem(25), line up with the callout */