/* Shared components. Global tier, not tied to a page type. */

/* --- Breadcrumbs ----------------------------------------------------------- */

.whd-crumbs {
  padding-block: var(--space-md);
  font-family: var(--font-family-body);
}

/* Direct child only, so a wrapping container that also holds the crumbs keeps
   its padding. */
.e-con-inner:has(> .elementor-widget .whd-crumbs) {
  padding-block: 0;
}

/* nav. breaks a specificity tie with `.elementor-location-single ol`. */
nav.whd-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--color-neutral);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);
}

/* padding-block resets `.elementor-location-single ul li`. */
nav.whd-crumbs ol li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs) var(--space-sm);
  padding-block: 0;
}

/* wght700/opsz20 cut - a lighter one renders as a hairline at this size. */
.whd-crumbs li:not(:last-child)::after {
  content: "";
  inline-size: 0.44rem;
  block-size: 0.7rem;
  background-color: currentColor;
  -webkit-mask: url("../img/arrow-forward-sm.svg") center / contain no-repeat;
  mask: url("../img/arrow-forward-sm.svg") center / contain no-repeat;
  opacity: 0.6;
}

.whd-crumbs a {
  color: var(--color-contrast-2);
  text-decoration: none;
}

.whd-crumbs a:hover {
  text-decoration: underline;
}

.whd-crumbs [aria-current="page"] {
  color: var(--color-contrast);
}