/*------------------------------------
 #LINKS
------------------------------------*/

 /**
  * Link base styles
  */
a {
  color: var(--color-links);
  text-decoration: none;

  &:active {
    color: var(--color-links-active);
  }

  &:focus,
  &:hover {
    text-decoration: underline;
  }

  &[href$=".pdf"] {
    
    background-position: 100% 50%;
    background-repeat: no-repeat;
    background-size: 12px auto;
    padding-right: 18px;
  }

  &[target="_blank"] {
    
    background-position: calc(100% - 1px) 50%;
    background-repeat: no-repeat;
    background-size: 12px auto;
    padding-right: 18px;
  }
}
a.c-social-media__link {
  background-image: none !important;
}

/* [href$=".pdf"][target="_blank"],
.orange-caps [href$=".pdf"][target="_blank"], 
.orange-caps[href$=".pdf"][target="_blank"] {
 
} */

.c-btn[href$=".pdf"][target="_blank"] {
  background-image: linear-gradient(to right, var(--orange), var(--color-brand-yellow-orange), var(--color-brand-yellow-orange), var(--orange));

  &.c-btn--outline {
    background-color: transparent;
    background-image: linear-gradient(to right, rgba(255, 95, 47, 0), rgba(250, 166, 52, 0), rgba(250, 166, 52, 0), rgba(255, 95, 47, 0));

    &:hover {
      background-image: linear-gradient(to right, var(--orange), var(--color-brand-yellow-orange), var(--color-brand-yellow-orange), var(--orange));
    }
  }
}

a.orange-caps,
.orange-caps a {
  text-decoration: none;

  &:hover,
  &:focus {
    color: var(--color-links);
    text-decoration: underline;
  }

   /*ADAM: I removed this for this page (see COURSE EVALUATION link):
   https:hangerclinic.amdevel.com/for-professionals/continuing-education/course-introduction-to-prosthetic-feet-finding-the-foot-that-fits
   &[target="_blank"] {
     background: none;
     padding-right: 0;
   }*/
}

.orange-caps {
  text-decoration: none;
}

.c-footer-nav__item {
  a {
    &[href$=".pdf"] {
      display: inline-block;
    }

    &[target="_blank"] {
      display: inline-block;
    }
  }
}

.orange-caps a,
.orange-caps {
  color: var(--color-brand-red-orange);
  font-weight: 700;
  text-transform: uppercase;
}

a.white-link {
  color: var(--color-neutral-white);
  text-decoration: underline;
  &:hover {
    color: var(--color-neutral-gray-08);
    text-decoration: none;
  }
}