/******************************************************************
Site Name: VocoVision
Author: Soliant MC

Stylesheet: Variables

Here is where we declare all our variables like colors, fonts,
base values, and defaults. We want to make sure this file ONLY
contains variables that way our files don't get all messy.
No one likes a mess.

******************************************************************/
/*********************
COLORS
*********************/
/*********************
BREAKPOINT MIXINS
These mixins help manage responsive styles consistently.
*********************/
/*
* RESOURCES
* use: Resources index, category archives, and single resource posts
*/
.term-parents .page-hero {
  background-image: url("/wp-content/themes/vocovision/images/headers/resources-parents.jpg");
}

.term-therapists .page-hero {
  background-image: url("/wp-content/themes/vocovision/images/headers/resources-therapists.jpg");
}

.term-schools .page-hero {
  background-image: url("/wp-content/themes/vocovision/images/headers/resources-schools.jpg");
}

.sec-resource-main div [class*=col-] {
  margin-bottom: 2.5rem;
}

.resource-card {
  border: 1px solid var(--smoke-100, #f6f7f9);
  border-radius: 1.2rem;
  background: var(--white, #ffffff);
  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1);
  height: 100%;
  position: relative;
  transition: box-shadow 0.2s ease-in-out;
}
.resource-card:hover, .resource-card:focus-within {
  box-shadow: 0 8px 15px 0 rgba(0, 0, 0, 0.2);
}
.resource-card:hover .resource-card__cta, .resource-card:focus-within .resource-card__cta {
  border-radius: 5rem;
  text-decoration: none;
}
.resource-card__link {
  color: inherit;
  font-size: inherit;
  line-height: inherit;
  text-decoration: none;
}
.resource-card__link:hover, .resource-card__link:focus {
  color: inherit;
  text-decoration: none;
}
.resource-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
}
.resource-card__link:focus-visible {
  outline: none;
}
.resource-card__link:focus-visible::after {
  outline: 2px solid #74c2df;
  outline-offset: 4px;
}
.resource-card__media {
  height: 12rem;
  background-color: teal;
  border-radius: 1.2rem 1.2rem 0 0;
  width: 100%;
  overflow: hidden;
}
.resource-card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
}
.resource-card__content {
  padding: 3rem 4rem;
}
.resource-card__cta {
  display: inline-block;
  margin-top: 3rem;
  pointer-events: none;
}
@media (min-width: 1240px) {
  .resource-card h3 {
    font-size: 3rem;
    line-height: 3.6rem;
  }
}