/**
 * @file
 * custom.css
 * 
 * Layout and Theme styles for the entire site
 * 
 * -------------------------------------------------
 * Attached thru `.info.yml`
 *
 ============================================================================ */

/**
 * Global
=========================================*/

body {
  font-family: 'Open Sans', Arial, sans-serif;
  line-height: 1.5;
  font-size: 16px;
}

/* Cards (Resuable element) */
.card__title {  margin: 0;  }

/**
 * Styled Header
=========================================*/
.font-family-serif {
  font-family: 'PT Serif', serif;
}

.styled-header__small {
  font-size: 1.4em;
  font-weight: bold;
  letter-spacing: 2px;
  /* color: #dba860; 
  color: #0057b7;*/
  color: #93c90f;
  text-transform: uppercase;
}

html .styled-header__big {
  font: bold 1.8em 'PT Serif', serif;
  margin: .5rem 0 0;
}

html .styled-header__big--large {
  font-size: 2.7em;
}

.styled-header:after {
  content: '';
  display: inline-block;
  width: 8em;
  margin: 2rem 0;
  /* border-top: 2px solid #dba860; */
  border-top: 2px solid #93c90f;
}

/**
 * Leaderboard
=========================================*/

.announcement {
  padding: 0.6em 0.6em;
  background: #b8312f;
  color: #fff;
}

.announcement--private {
  background: #661110;
}

.announcement__link {
  font-weight: bold;
}

.announcement__link:hover,
.announcement__link:focus {
  text-decoration: underline;
}

/* Bell */
.announcement__link:before {
  content: '';
  display: inline-block;
  background: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='white' d='M224 512c35.32 0 63.97-28.65 63.97-64H160.03c0 35.35 28.65 64 63.97 64zm215.39-149.71c-19.32-20.76-55.47-51.99-55.47-154.29 0-77.7-54.48-139.9-127.94-155.16V32c0-17.67-14.32-32-31.98-32s-31.98 14.33-31.98 32v20.84C118.56 68.1 64.08 130.3 64.08 208c0 102.3-36.15 133.53-55.47 154.29-6 6.45-8.66 14.16-8.61 21.71.11 16.4 12.98 32 32.1 32h383.8c19.12 0 32-15.6 32.1-32 .05-7.55-2.61-15.27-8.61-21.71z'%3E%3C/path%3E%3C/svg%3E");
  width: 1.3em;
  height: 1.4em;
  vertical-align: bottom;
  margin: 0 0.5em;
  animation: bellshake 4s cubic-bezier(.36,.07,.19,.97) both infinite;
  backface-visibility: hidden;
  transform-origin: top right;
  /* text-decoration: initial !important; */
}

.announcement__link:hover:before,
.announcement__link:focus:before {
  animation: none;
  text-decoration: initial;
}

@keyframes bellshake {
  0% { transform: rotate(0); }
  3% { transform: rotate(5deg); }
  6% { transform: rotate(-5deg); }
  9% { transform: rotate(4deg); }
  12% { transform: rotate(-4deg); }
  15% { transform: rotate(2deg); }
  17% { transform: rotate(-2deg); }
  19% { transform: rotate(1deg); }
  20% { transform: rotate(0); }
  100% { transform: rotate(0); }
}

.announcement__edit-link {
  color: #000;
  text-decoration: underline;
  padding-left: 0.4em;
}

/**
 * Styling Files
 */
.field-type-file .field__label {
  border-bottom: 1px solid #333;
  padding: 0 0 0.5em;
  max-width: 30em;
}

.field-type-file .field__items {
  margin: 1em 0.7em 1.5em;
}

.field-type-file a {
  color: #333;
}

.field-type-file .file {
  margin: 0 0 0.5em;
}

/**
 * Join our Team
 */
#block-letsgo-comejoinateamdedicated p a {
  display: block;
  width: 100%;
  background: #6cace4;
  color: #fff;
  text-align: center;
  padding: 0.5em 1em;
  font-weight: bold;
}

#block-letsgo-comejoinateamdedicated svg {
    fill: #fff;
    max-width: 1em;
    display: inline-block;
    vertical-align: middle;
    margin-left: 0.5em;
    margin-top: -0.2em;
}

/**
 * Staff
=========================================*/

.staff {
  overflow: hidden;
}

.staff .view-rows {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.staff .views-row {
  /*-ms-flex-preferred-size: 260px;*/
  /*    flex-basis: 260px;*/
  margin: 0.7em 0.7em 4em;
}

.staff .view-rows > h3 {
  grid-column: 1 / -1;
  margin: .7em;
  font: bold 1.5em 'PT Serif', serif;
}

/* Staff Photos */
.card__title--staff {
  margin: 0.5em 0 0;
}

/* Board Position */
.card__text--board {
  font-size: 1.05em;
  color: #444;
}

/* Job Title */
.card__text--job {
  margin: .3em 0 0;
  font-size: .95em;
  color: #666;
}

/* Connect Button */
.card__action--staff  {
  margin: 1.5em 0 0;
}

/* Contact Popup */
.card--contact-bio {
  margin: 0 0 2.5em;
}

.contact-bio__job-title {
  font-style: italic;
  font-size: 1.2em;
}


/**
 * Affilate Links
=========================================*/

.paragraph--type-affilate-links {
  max-width: 50em;
  margin: 0 auto 2rem;
}

.paragraph--type-affilate-links .field__items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  
}

.paragraph--type-affilate-links img {
  max-height: 150px;
  width: auto;
}

/**
 * Job Postings / Request for Proposals (RFP)
=========================================*/

.job-posting {
  margin: 3em 0 4em;
}


/* Used on RFP node page too */
.job-posting .buttons a,
.job-posting__apply-button {
  position: relative;
  margin: 0 0 .5em;
}

.job-posting__apply-button:before,
.job-posting__apply-button:after {
  content: '.';
  width: 1.7em;
  background: #fff;
  display: inline-block;
  vertical-align: bottom;
  padding: 0.2em 0;
  margin: -0.2em 1.2em -0.2em 0;
}

.job-posting__apply-button:after {
  content: '\02713';
  position: absolute;
  bottom: 0;
  left: 1rem;
  font-size: 3.3em;
  background: none;
 /* color: #9c7032; */
  color: #FF671F;
}

/**
 * Application Forms (Job Postings & Request for Proposals)
 */ 

.application-form .form-item {
  margin: 0 0 1em;
  overflow: hidden;
}

/* Basic Elements */
.application-form label {
  min-width: 8em;
  display: inline-block;
  margin: 0.1em 0;
}

.application-form input,
.application-form textarea,
.application-form select {
  max-width: 100%;
  padding: .3em .5em;
  color: #000;
  border: 1px solid #aaa;
}

/* Checkboxes */
.application-form .js-form-type-checkbox {
  display: flex;
  align-items: center;
  margin: 1em 0;
}

.application-form .form-checkbox {
  margin: 0 0.5em;
}

.application-form .webform-element-description {
  font-size: 0.9em;
  margin: 0.3em 0;
}


@media (min-width: 30em) {
  .application-form {
    max-width: 40em;
  }

  .form-item-posting-number {
    float: left;
    max-width: 10em;
    padding-right: 2em;
  }

  .form-item-posting-number + div + div {
    clear: both;
  }
}

.ui-widget-overlay {
  opacity: .8;
  background: #333;
}

/* Request for Proposals */
.node--type-request-for-proposals .field {
  margin: 1.5em 0;
}

.rfp-listings {  max-width: 60em;  }

.application-form--rfp label {
  width: 100%;
}

/**
 * Content Sections
=========================================*/

/* Connect Button */
.ui-dialog {
  max-width: 95%;
  z-index: 500 !important;
}

/* Success Stories */
.card__content--story {
  padding: 4em;
  background: #F1F0EC;
}

.stories-fp--stars {
  font-size: 3em;
  -webkit-text-fill-color: transparent;
 /* -webkit-text-stroke: 2px #333; */
  -webkit-text-stroke: 2px #FF671F
}

@media (min-width: 82em) {
  .card__text--story {
    width: 66%;
  }
}

.card__text--story {
  line-height: 2rem;
  color: #333;
  margin: 0 0 3rem;
}

.card__content--story,
.card__graphic--story{
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
}

.card__graphic--story {
  line-height: 0;
}

/* Featured Slides */
.featured-slides {
  padding: 4em 0 6em;
}

.card__content--featured,
.card__action--featured  {
  margin: 2em 0 0;
}

.flex-control-nav {  bottom: -3em;  } /* Bottom Dots */

.flex-direction-nav a { /* Left & Right Arrows */
  top: 17.05em;
  margin: 0.5em;
}

@media (min-width: 50.125em) { /* Stagger images */
  .story:nth-child(even) .card__content--story {
    -webkit-box-ordinal-group: 0;
        -ms-flex-order: -1;
            order: -1;
    background: #f7f5ef;
  }

  .card__content--story,
  .card__graphic--story {
    -ms-flex-preferred-size: 50%;
        flex-basis: 50%;
  }
}

/* Featured Slides - Grid format */
.featured-slides--programs-grid {
  overflow: hidden;
}

.featured-slides--programs-grid > .view-content {
  margin-right: -30px; /* Match below */
  margin-bottom:  -5.5em; /* Match below */
}

.featured-slides--programs-grid .views-row {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 400px;
          flex: 1 1 400px;
  margin-right: 30px;
  max-width: 400px;
}

.featured-slide--programs-grid {
  margin-bottom:  5.5em;
}

@media (max-width: 82rem) {
  .featured-slides--programs-grid > .view-content {
    -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
  }
}

/* Related Stories */
.related-pages {  overflow: hidden;  }

.related-pages > .view-content {
  margin: 0 -.5em;
  -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
}

.card-wrapper--related,
.related-pages .views-row--flex-spacers {
  padding: 2em .5em 0;
  width: 25em;
}

.card-wrapper--related,
.card__content--related,
.card__action--related {
  margin: 2em 0 0;
}

/* File Uploads */
.field-name-field-file-upload .field__item {
  margin: 0.5em 0;
}

/**
 * Highlighted Region
=========================================*/

/* Spotlight */
.block-highlighted-section {
  background: #F6F4F2;
  padding: 5em 0;
  margin: 0 0 2em; /* Match with subfooter */
}

.hero-section .styled-header__big {
  margin: 2rem 0;
}

/* Header Section */
.hero-section__body {
  line-height: 2;
}

/* Spotlight */
.card__title--spotlight {  font: bold 1.5em 'PT Serif', serif;  }

.card__text--spotlight {
  margin: .3em 0;
  color: #666;
  max-width: 20em;
}

.card__content--spotlight {
  margin: 1.5em 0;
}

@media (min-width: 60em) {
  .hero-section .styled-header__big {
    max-width: 80%;
  }

  .hero-section__information {
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
  }

  .hero-section__spotlight {
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2;
  }
}

/**
 * Header
=========================================*/
.header {
  padding: 0.5rem 0;
  border-bottom: 1px solid #ebebeb;
}

.menu-bar {
  margin-left: 2em;
}

@media (min-width: 810px) {
    .menu-bar {
        flex: 1;  
        margin-left: 3em;
    }
}

/* Top Menu */
@media (min-width: 700px) {
  #block-topmenu {
    text-align: right;
    margin: 0 0 -0.5em;
  } 
}

#block-topmenu a {
  font-size: 0.9rem;
  margin-left: 1em;
  color: #333;
  font-weight: 500;
}

/* Main Menu */
#superfish-main {
  margin: .7em 0;
}

#superfish-main ul {
  background: #fff;
}

#superfish-main .sf-depth-1 > a {
  font-weight: bold;
  text-transform: uppercase;
  padding: 1.3em;
}

#page .sf-sub-indicator:after {
  content: '\203a';
  -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
          transform: rotate(90deg);
  right: 0;
  font-weight: bold;
}

#page .sf-sub-indicator {
  right: 0.2em;
}

ul.sf-menu li:hover > ul,
ul.sf-menu li.sfHover > ul {
  top: 3.5em;
}

/**
 * Main Menu
 */
a.sf-depth-1 {
    font-weight: bold;
}

#block-mainnavigation {
    position: relative;
}

.sf-accordion-toggle a {
    color: inherit;
    padding: 0.5em 1em;
    border: 2px solid currentColor;
    width: 100%;
}

#superfish-main-accordion {
    position: absolute;
    top: 100% !important;
    background: #fff;
    border: 2px solid #000;
    margin-top: -2px;
    /* transition: all 0.4s; */
    /* width: 120px !important; */
}

.sf-expanded {
    min-width: 15em;
}

/**
 * Content Suffix
=========================================*/
.content-suffix {
  margin: 2em 0 0;
}

/* Sign up for Newsletter */
.block-newsletter {
 /* background: #DBA860; */
  background: #6cace4;
  color: #fff;
  padding: 2.5em 1em;
}

.block-newsletter .block__inner {
  max-width: 72rem;
  margin: 0 auto;
}

.block-newsletter h2 {
  font: 1.5em 'PT Serif', serif;
  margin: 0;
}

.newsletter__icon {
  display: inline-block;
  height: 2em;
  margin-right: 0.3em;
  vertical-align: middle;
 /* color: #af8140; */
  color: #fff;
}

/**
 * Content
=========================================*/
#block-letsgo-page-title,
#block-page-title-not-nodes {  margin: 3rem 0 2rem; }

/* Photo Gallery */
.node--type-program .field-node--field-images {
  overflow: hidden; /* Hide negative margin */
}

.node--type-program .field-node--field-images .field__items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin: 0 -15px; /* Match with items */
}

.node--type-program .field-node--field-images .field__item {
  padding: 15px; /* Match with related programs */
}

@media (min-width: 82em) {
  .node--type-program .field-node--field-images .field__item {
    -ms-flex-preferred-size: 33.33%;
        flex-basis: 33.33%;
  }
}

/**
 * Footer Region
=========================================*/
.layout-footer {
  padding: 4em 0 2em;
  background: #F6F4F2;
}

/**
 * Subfooter
--------------------------------*/
@media (min-width: 82em) {
  .subfooter {
    font-size: 0.95rem;
  }
    
  .subfooter-1 {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 60%;
    flex: 1 1 60%;
  }

  .subfooter-3,
  .subfooter-4 {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 19%;
    flex: 1 1 19%;
  }
}

/* Titles */
.block-footer-main-menu .is-parent > span,
.block-footer-take-action .is-parent > span,
.subfooter .block__title {
  font: bold 1em 'PT Serif', serif;
  font-weight: bold;
  margin: 0 0 0.5em;
  display: block;
  text-transform: uppercase;
}

.block-footer-main-menu .menu-level-2 > .is-parent > span {
  font-size: 0.95em;
  color: #222;
}

/* Footer Menu */
.subfooter .menu-level-3 {
  padding: 0 0 1rem;
}

.subfooter li {
  vertical-align: top;
  width: 100%;
  padding: 0 0 0.2em;
}

.subfooter li a {
  text-indent: -1em;
  padding-left: 1em;
}

.subfooter .menu-level-2,
.subfooter .menu-name--quick-links {
  margin: 0 0em 3em 0;
}

.block-footer-main-menu .menu-level-1 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.block-footer-main-menu .menu-level-1 > li:nth-child(n+3) {  display: none;  } /* Hide other than first two */

.block-footer-main-menu .menu-level-1 > li:nth-child(1) { /* What We Do */
  -webkit-box-flex: 1;
      -ms-flex: 1 1 12em;
          flex: 1 1 12em;
} 

/* Our Programs */
.block-footer-main-menu .menu-level-1 > li:nth-child(2) {
  -webkit-box-flex: 3;
      -ms-flex: 3 2 70%;
          flex: 3 2 70%;
}

.block-footer-main-menu .menu-level-1 > li:nth-child(2) > .menu {
  -webkit-columns: 2 15em;
  -moz-columns: 2 15em;
       columns: 2 15em;
  max-width: 50em;
}

/* Second-level List items */
#mlid-our-programs > ul > li {
  margin: 0 0 .7em;
  font-size: .95em;
}

#mlid-our-programs > ul > li > span {
  font: inherit;
  font-weight: bold;
  text-transform: none;
  margin: 0;
}

/* Take Action */
.block-footer-take-action .menu-level-1 > li:not(.menu__item-title--take-action) {
  display: none;
}

/* Contact Info */
.footer-name {
  margin: 0 0 1em;
  font-weight: bold;
 /* color: #DBA860; */
  color: #93c90f;
}

.footer-contact__icon-wrapper {
  width: 1.2em;
  text-align: center;
  margin: 0.1em 1.2em 0 0;
}

.footer-contact__icon {
  height: 1.3em;
  color: #777;
}

.footer-contact__info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 0 0 1em;
  white-space: nowrap;
}

/* Social */
.footer-contact__socials {
  max-width: 10.2em;
  margin-top: 2.5em;
  color: #555;
}

@media (min-width: 50em) { /* Match with footer logo absolute below */
  .footer-contact__socials {
    margin: 2.5em auto 0;
  }
}

.footer-contact__social {
  width: 3em;
  margin: 0 1.5em 0 0;
}

.footer-contact__social-text {
  font-size: 0.7em;
}

@media (max-width: 81.875em) and (min-width: 35.125em) {
  .subfooter {
    margin: 0 5%;
  }

  .subfooter-4 {  margin-right: auto;  }

  /* Align "Who We Are" and "Take Action/Quick Links" */
  .block-footer-main-menu .menu-level-1 > li:nth-child(1) {  min-width: 17em;  } /* What We Do */
  
  .subfooter-3 {max-width: 17em;}
}

/**
 * Footer
--------------------------------*/
.block-copyrightfooterlogo {
  position: relative;
  padding: 2em 0 0;
  margin: 1em 0 0;
  font-size: .9rem;
}

.footer-logo {
  margin: 0 0 1em;
}

@media (min-width: 50em) {
  .block-copyrightfooterlogo {
    padding: 1em 0 0;
    margin: 9em 0 0;
  }

  .footer-logo {
    position: absolute;
    bottom: 100%;
  }
}

/**
 * Responsive
=========================================*/
#block-operation-menu-sidemenu-title {
  font-size: 1.2em;
  font-weight: bold;
  margin: 0.7em 0 0;
}

.op-manual-menu-links .views-row {
  margin: .5em 0;
}

.op-manual .edit-region a[href*="/edit"] {
  right: -18px;
  top: -4px;
}

@media screen and (min-width: 900px) {

  .layout-sidebar {
    width: 21em;
    min-width: 21em;
    opacity: .9;
    margin-top: 3rem;
    margin-right: 2em;
  }

  .op-manual-menu-links {
    margin: 1.5em 0 1.5em 1em;
    font-size: 0.95em;
  }
}

/**
 * For Inclusion & Belonging / Social Media
=========================================*/
.fb-feed--responsive-wrapper {
    position: relative;
    padding-bottom: 60vh;
    width: 100%;
}

.fb-feed--responsive-wrapper span {
  position: initial;
}

.fb-feed--responsive-wrapper iframe {
    position: absolute;
    width: 100% !important;
    left: 0;
    right: 0;
    height: 100% !important;
}
