/* ==========================================================================
   Components - Buttons, Widgets, Post Snippets
   ========================================================================== */

/* Buttons */
.btn {
  border-radius: unset;
  border: unset;
  padding: 0.35em 1em;
  text-transform: uppercase;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.05em;
  font-family: var(--font-heading);

  i {
    position: relative;
    top: 0px;
    margin-left: 0.125em;
    color: var(--color-highlight);
    line-height: 1;
  }

  &.btn-primary {
    background-color: var(--color-action);

    &:hover {
      background-color: var(--color-surface-dark);
    }
  }

  &.btn-secondary {
    background-color: var(--color-highlight);
    color: var(--color-text-base);

    &:hover {
      background-color: var(--color-border);
    }

    i {
      color: var(--color-action);
    }
  }

  &.btn-tertiary {
    color: var(--color-text-inverse) !important;
    background-color: var(--color-surface-dark);

    &:hover {
      color: var(--color-text-inverse) !important;
      background-color: var(--color-action);
    }

    i {
      color: var(--color-highlight);
    }
  }

  &.btn-dark {
    color: var(--color-text-inverse) !important;
    background-color: var(--color-surface-dark);

    &:hover {
      color: var(--color-text-inverse) !important;
      background-color: var(--color-text-strong);
    }

    i {
      color: var(--color-highlight);
    }
  }

  &.btn-offcanvas:hover {
    color: var(--color-action);
  }
}

/* Widgets */
.widget {
  font-size: 0.875rem;

  h3 {
    font-size: 1rem;
    margin-bottom: 0.25em;
  }

  .network-article {
    margin-top: 0.675em;
    font-size: x-small;
    font-family: var(--font-ui);
  }
}

aside .widget {
  margin-bottom: 2rem;
  width: 300px;
}

.widget-title a {
  text-decoration: none;
}

/* Widget Titles */
h2.widget-title,
.archive-label {
  font-size: 1rem;
  text-transform: uppercase;
  font-family: var(--font-ui);
  color: var(--color-text-base);
  display: inline-block;
  position: relative;
  padding: 0.35em 0.5em 0 0.5em;
  margin-bottom: 0.875em;
  z-index: 1;
  font-weight: 700; /* matches the heaviest Open Sans cut actually loaded */
  /*letter-spacing: 0.05em;*/
  line-height: 1;
  /* border-top: 3px solid var(--color-highlight);
  border-left: 3px solid var(--color-highlight); */
  border-top: 3px solid #4f558c;
  border-left: 3px solid #3a3f68;

  &.brand {
    display: inline-flex;
    align-items: center;
    align-content: center;

    .icon {
      &:before {
        display: none;
        content: '|';
        margin-left: 0.25em;
        text-align: center;
        color: var(--color-border);
      }

      svg {
        height: 1.25rem;
        width: auto;
        padding: 0.125em;
        color: var(--color-border);
        margin-left: 0.5em;
      }

      &.cyn svg {
        height: 0.8rem;
        top: -1px;
      }

      &.prn svg,
      &.lds svg,
      &.cfx svg {
        height: 1rem;
        top: -1px;
      }

      &.em svg,
      &.mcm svg {
        height: 1.125rem;
        top: -1px;
      }

      &.cyn svg,
      &.prn svg,
      &.em svg,
      &.lds svg,
      &.mcm svg,
      &.cfx svg {
        position: relative;
      }
    }
  }
}

h3.network-title {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-family: var(--font-ui);
  color: var(--color-surface-dark-deep);
  display: inline-flex;
  align-items: center;
  position: relative;
  padding: unset;
  margin-bottom: 0.875em !important;
  z-index: 1;
  top: -1px;
  left: -3px;

  &:after {
    display: none;
    content: '';
    background-color: var(--color-surface-dark);
    position: absolute;
    width: 100%;
    height: 100%;
    transform: skew(-9deg);
    left: 0;
    top: 0;
    z-index: -1;
    box-shadow: 3px 3px 0 var(--color-border);
  }

  .logo {
    color: var(--color-surface-dark);

    &:before {
      content: '|';
      color: var(--color-border);
      padding: 0 0.25em;
    }
  }
}

/* Post Lists */
.post-list {
  margin-bottom: 0;

  > li:not(:last-child) {
    margin-bottom: 0.75em;
    padding-bottom: 0.75em;
    border-bottom: 1px solid var(--bs-gray-300);
  }

  .article-category,
  .archive-list .arcticle-category {
    font-size: small;
    margin-bottom: 0.25em;
  }
}

.list-posts > li:not(:last-of-type) {
  border-bottom: var(--border-default);
}

/* Post Links */
a.post-link {
  text-decoration: none;
  cursor: pointer;

  &:hover {
    color: var(--color-action);
    text-decoration: underline;
  }

  &.dropdown-toggle {
    font-weight: 600;
    font-size: 0.8em;
    font-family: var(--font-heading);
    display: block;

    &:after {
      color: var(--color-action);
      vertical-align: middle;
      margin-left: 0.15em;
      font-size: 1rem;
    }
  }
}

a.post-link-toggle:hover {
  color: var(--color-text-base);
  text-decoration: underline;
}

/* Pagination */
a.page-numbers {
  text-decoration: none;
  color: var(--color-surface-dark-deep);

  &:hover {
    /* color: var(--color-action); */
  }
}

.page-numbers {
  margin: 0 0.25em;
  display: inline-block;
}

/* Event/Archive Links */
a.evt-link,
a.archive-link {
  text-decoration: none;
  color: var(--color-action);
  font-family: var(--font-heading);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;

  &:hover {
    color: var(--color-surface-dark);
  }

  i {
    vertical-align: baseline;
  }
}

/* a {
    color: var(--color-text-base);
    text-decoration-color: var(--color-highlight);
} */
.article-category {
    position: relative;
    color: var(--color-text-base);
    font-size: 0.85em;
    display: inline-block;
    line-height: 1;
    margin-bottom: 0.5em;
    font-weight: 600;
    font-family: var(--font-ui);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background-color: var(--color-highlight);
    padding: 0.125em 0.35em;

    &:hover, &:focus {
      color: var(--color-text-base);
      background-color: var(--color-border);
    }
}
/* Post Snippets */
.post-snippet {
  .d-flex div {
    line-height: 1;

    p {
      line-height: 1.3;
    }
  }

  figure {
    margin-bottom: 0.5rem;
    &.square {
      overflow: hidden;
      flex-shrink: 0;
    }

    img {
      aspect-ratio: 2;
      object-fit: cover;
      object-position: center;
      width: 100%;
      height: auto;
    }

    &.square img {
      aspect-ratio: 1;
      width: 90px;
      height: 90px;
    }

    &.square.w-100 img {
      aspect-ratio: 1;
      width: 100%;
      height: auto;
    }

    &.rectangle img {
      aspect-ratio: 300 / 250;
    }

    &.rectangle-2 img {
      aspect-ratio: 300 / 250;
      width: 120px;
      height: auto;
    }

    &.square-lg {
      img {
        aspect-ratio: 1;
      }

      &.magazine img {
        aspect-ratio: 1;
        object-fit: contain;
      }
    }
  }

  time {
    font-family: var(--font-ui);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .article-category {
    font-size: 0.8em;
    margin-bottom: 0.35em;

    &:after {
      left: unset;
    }
  }

  .video-center & {
    figure img {
      aspect-ratio: 16 / 9;
    }
  }
}

.post-excerpt p:last-of-type {
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .post-snippet figure.square-lg img {
    width: 250px;
  }
}

/* Video Container */
.video-container {
  height: 0;
  width: 100%;
  padding-bottom: calc((100% / 16) * 9);
  position: relative;
  margin-bottom: 0.5em;

  iframe {
    position: absolute;
    width: 100%;
    height: 100%;
  }
}

/* Miscellaneous */
.rounded-circle {
  border-right: 4px solid var(--color-highlight-warm);
  border-bottom: 4px solid var(--color-highlight-warm);
  box-sizing: content-box;
}

.ad img {
  max-width: 100%;
  height: auto;
}

.sticky-five {
  position: sticky;
  top: 5em;
}

/* Awards Slide */
figure.awards-slide {
  background-color: white;
  text-align: center;
  border-bottom: 0;
  margin-bottom: 0.5em;

  img {
    aspect-ratio: 300 / 250;
    object-fit: contain;
    width: 100%;
    object-position: center;
    padding: 0.5em;
    border: 1px solid var(--color-border);
    border-bottom: unset;
  }

  figcaption {
    background-color: var(--color-surface-dark);
    padding: 0.25em 0.5em;
    color: var(--color-text-inverse);

    a {
      font-weight: normal;
      color: var(--color-highlight-warm);
      text-decoration: underline;
      text-decoration-color: var(--color-highlight-warm);

      &:hover {
        font-weight: normal;
        color: var(--color-highlight-warm);
        text-decoration: none;
      }
    }
  }
}

/* Dots */
li.dot {
  background: var(--color-surface-dark);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin: 0 0.5em;
  cursor: pointer;

  &:hover {
    background-color: var(--color-accent-purple);
  }
}

/* Trending */
.trending {
  &-now {
    img {
      aspect-ratio: 1;
      object-fit: cover;
    }

    .article-byline {
      display: none;
    }
  }

  ol {
    counter-reset: trending-item;
  }
  ol li {
    counter-increment: trending-item;
    display: flex;
    &::marker {
      display: none;
    }
  }
  ol li::before {
      transform: translateX(-1rem);
      font-size: calc(2.675rem / 1.5);
      content: counter(trending-item) " ";
      color: var(--color-text-muted);
      font-family: var(--font-ui);
      font-weight: bold;
  }
}

/* Slick Carousel */
.slick-dots li {
  margin: 0 2px;
  transform: translateY(-8px);

  button:before,
  &.slick-active button:before {
    font-size: 9px;
    line-height: 27px;
    color: var(--color-surface-dark);
  }
}

.img--inverted {
  filter: invert(100%);
}


.img--headshot {
  border-radius: 50% !important;
  /* object-fit: cover;
  object-position: center; */

}
.img--headshot {
    box-shadow: -3px 3px var(--bs-warning);
    transition: box-shadow .3s linear;
}

.video-js .vjs-big-play-button {
  color: var(--color-action);
  background-color: var(--color-surface-mid);
  border-color: var(--color-action);
  border-width: 3px;
}

/* Publication Badges */
/* Jobs Widget */
.jobs-widget {
  margin-bottom: 2rem;
}

.jobs-widget .widget-title {
  margin-bottom: 0.875em;
}

.job-listings {
  margin-bottom: 1.25em;
  list-style: none;
  padding-left: 0;
}

.job-item {
  padding: 0.65em 0;
  border-bottom: 1px solid var(--bs-gray-300);
}

.job-item:first-child {
  padding-top: 0;
}

.job-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.job-link {
  display: flex;
  flex-direction: column;
  gap: 0.2em;
  text-decoration: none;
  cursor: pointer;
}

.job-link:hover,
.job-link:focus {
  text-decoration: none;
}

.job-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.3;
  color: var(--color-text-strong);
  transition: color 0.2s ease;
}

.job-link:hover .job-title,
.job-link:focus .job-title {
  color: var(--color-action);
  text-decoration: underline;
}

.job-company {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.8em;
  color: var(--color-action);
}

.job-location {
  font-family: var(--font-ui);
  font-size: 0.75em;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;

  i {
    margin-right: 0.25em;
    font-size: 0.9em;
  }
}

.job-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25em 0.9em;
}

.job-action-link {
  color: var(--color-action);
  font-size: 0.8em;
  font-weight: 600;
  font-family: var(--font-ui);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;
  transition: color 0.2s ease;

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

  &:not(:last-child)::after {
    content: '/';
    margin-left: 0.9em;
    color: var(--color-border);
  }
}

/* Marketo / reCAPTCHA Embed */
.marketo-recaptcha-form .g-recaptcha {
  visibility: hidden;
  margin-top: 1.25em;
}

.marketo-recaptcha-form .mktoForm .g-recaptcha {
  visibility: visible;
}

.marketo-recaptcha-form .g-recaptcha > div {
  width: 300px !important;
}

.marketo-recaptcha-form .g-recaptcha > div > div {
  border-left: 5px solid transparent;
  border-top: 5px solid transparent;
  border-radius: 5px;
  transition: background-color 0.4s ease-out;
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/250687/spiffygif_86x86.gif);
  background-size: 25px;
  background-repeat: no-repeat;
  background-position: center center;
}

.marketo-recaptcha-form .g-recaptcha.mktoInvalid > div > div {
  background-color: #f63c00;
  transition: background-color 0.4s ease-in;
}

/* Partner Content Widget */
.partner-content-widget {
  margin-bottom: 2rem;
}

.partner-content-widget .widget-title {
  margin-bottom: 0.875em;
}

.partner-content-listings {
  margin-bottom: 1.25em;
  list-style: none;
  padding-left: 0;
}

.partner-content-item {
  padding: 0.65em 0;
  border-bottom: 1px solid var(--bs-gray-300);
}

.partner-content-item:first-child {
  padding-top: 0;
}

.partner-content-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.partner-content-link {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.3;
  color: var(--color-text-strong);
  transition: color 0.2s ease;
}

.partner-content-link:hover,
.partner-content-link:focus {
  color: var(--color-action);
  text-decoration: underline;
}

.partner-content-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25em 0.9em;
}

.partner-content-action-link {
  color: var(--color-action);
  font-size: 0.8em;
  font-weight: 600;
  font-family: var(--font-ui);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;
  transition: color 0.2s ease;

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