/* ===================== */
/* CREDENTIAL CHEVRONS    */
/* ===================== */
.umf-credential-levels {
  background: var(--umf-ivory);
  padding-block: 2px 10px;
}
.umf-levels-scroll {
  width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: #b39148 #eee9df;
}
.umf-levels-scroll:focus-visible {
  outline: 3px solid #4c9aff;
  outline-offset: -3px;
}
.umf-levels-list {
  display: flex;
  align-items: stretch;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  min-width: 1000px;
}
.umf-level-item {
  --umf-tile-background: linear-gradient(115deg, #e0e5e8, #c9d3db);
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  background: #fff;
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 50%, calc(100% - 26px) 100%, 0 100%, 26px 50%);
}
.umf-level-item + .umf-level-item {
  margin-left: -25px;
}
.umf-level-item:first-child {
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 50%, calc(100% - 26px) 100%, 0 100%);
}
.umf-level-tile {
  min-height: 140px;
  height: calc(100% - 2px);
  margin: 1px;
  padding: 17px 27px 13px 35px;
  background: var(--umf-tile-background);
  color: var(--umf-navy);
  text-align: center;
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 50%, calc(100% - 26px) 100%, 0 100%, 26px 50%);
}
.umf-level-item:first-child .umf-level-tile {
  padding-left: 15px;
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 50%, calc(100% - 26px) 100%, 0 100%);
}
.umf-level-item:nth-child(2) { --umf-tile-background: linear-gradient(115deg, #d5dee4, #c4d0dc); }
.umf-level-item:nth-child(3) { --umf-tile-background: linear-gradient(115deg, #c7d7e4, #afc3d5); }
.umf-level-item:nth-child(4) { --umf-tile-background: linear-gradient(115deg, #bdcfdf, #a6bfd2); }
.umf-level-item:nth-child(5) { --umf-tile-background: linear-gradient(115deg, #c4d5e1, #b1c5d5); }
.umf-level-item:nth-child(6) { --umf-tile-background: linear-gradient(115deg, #b6cbd9, #9db5c5); }
.umf-level-item:nth-child(7) { --umf-tile-background: linear-gradient(115deg, #e8cb84, #cfaa55); }
.umf-level-item:nth-child(8) { --umf-tile-background: linear-gradient(115deg, #dbb969, #c6a047); }
.umf-level-number {
  font-family: var(--umf-sans);
  font-size: .65rem;
  font-weight: 600;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-bottom: 3px;
  white-space: nowrap;
}
.umf-level-code {
  color: var(--umf-navy);
  font-family: var(--umf-editorial);
  font-size: clamp(1.45rem, 2.1vw, 2rem);
  line-height: 1.2;
  font-weight: 400;
  margin-bottom: 5px;
}
.umf-level-name {
  color: var(--umf-navy);
  font-family: var(--umf-editorial);
  font-size: .85rem;
  line-height: 1.2;
}
.umf-level-optional {
  font-size: .8rem;
}
.umf-levels-scroll-hint {
  display: none;
}
/* ===================== */
/* SCROLLABLE SMALL VIEW  */
/* ===================== */
@media (max-width: 1000px) {
  .umf-levels-scroll-hint {
    display: block;
    padding: 9px 20px;
    font-size: .73rem;
    line-height: 1.5;
    color: var(--umf-muted);
  }
  .umf-levels-scroll-hint span { margin-left: 10px; }
  .umf-levels-list { min-width: 1160px; }
  .umf-level-code { font-size: 1.75rem; }
  .umf-level-tile { min-height: 145px; }
}
@media print {
  .umf-levels-scroll { overflow: visible; }
  .umf-levels-list { min-width: 0; flex-wrap: wrap; }
  .umf-level-item { flex: 0 0 25%; clip-path: none; }
  .umf-level-item + .umf-level-item { margin-left: 0; }
  .umf-level-item .umf-level-tile { clip-path: none; padding: 12px; }
  .umf-levels-scroll-hint { display: none; }
}
