/* Implementation overrides - custom styles go here. */

:root {
  /**
   * Site-specific brand colors
   *
   * Set these variables and the CD Header/Footer will re-color to your brand.
   */
  --brand-primary: var(--cd-ocha-blue);
  --brand-primary--light: var(--cd-blue--brighter);
  --brand-primary--dark: var(--cd-blue--dark);
  --brand-highlight: var(--cd-highlight-red);
  --brand-grey: var(--cd-blue-grey);
  --brand-logo-width: 186px;
}


/**
 * Mobile logo
 */
@media (max-width: 767px) {
  .cd-site-logo {
    background: url(../images/logos/ocha-logo-blue.svg) center no-repeat;
  }
}

/**
 * Mimic legacy styles from previous TaaS site.
 */
.wp-block-latest-posts__list.is-grid {
  --num-cols: 1;
  --grid-gap: 2rem;
  gap: var(--grid-gap);
}

.wp-block-latest-posts__list.is-grid > li {
  border: none;
  border-top: 3px solid var(--brand-primary);
  background: var(--cd-grey--light);
  padding: 2rem;
  margin: 0;
  font-size: 1rem;
}

.wp-block-latest-posts.columns-2 > li {
  flex: 1 1 calc((100% / var(--num-cols)) - (var(--grid-gap) * (var(--num-cols) - 1)));
}

@media screen and (min-width: 768px) {
  .wp-block-latest-posts__list.is-grid {
    --num-cols: 2;
  }
}

.wp-block-latest-posts__post-title {
  margin-top: 0;
  margin-bottom: .5rem;
  text-transform: uppercase;
  font-size: var(--cd-font-size--medium);
  font-weight: 400;
  color: var(--brand-primary);
}

.wp-block-latest-posts strong {
  color: var(--brand-primary);
}