.breadcrumb {
  --s: 15px; /* Adjust this value to change the arrow slant size */
}

.breadcrumb ol {
  display: flex;
  list-style: none;
  margin: 20px;
  padding: 0;
  gap: 5px;
}

.breadcrumb ol li {
  clip-path: polygon(0 0, calc(100% - var(--s)) 0, 100% 50%, calc(100% - var(--s)) 100%, 0 100%, var(--s) 50%);
  margin: 0 calc(var(--s) / -2);
}

.breadcrumb ol li:first-child {
  clip-path: polygon(0 0, calc(100% - var(--s)) 0, 100% 50%, calc(100% - var(--s)) 100%, 0 100%);
  margin-left: 0;
}

.breadcrumb ol li:last-child {
  margin-right: 0;
}

.breadcrumb ol li a,
.breadcrumb ol li span {
  display: block;
  height: 100%;
  padding: 10px calc(10px + var(--s));
  box-sizing: border-box;
  text-decoration: none;
  color: #fff;
  font-size: 18px;
  font-family: sans-serif;
}

/* Default background for most items */
.breadcrumb ol li a {
  background: #333; /* Light grey for chapter boxes */
}

/* Slightly darker background for "Legal Framework" */
.breadcrumb ol li:nth-child(2) a {
  background: #2a2a2a; /* Darker grey */
}

/* Unclickable last item */
.breadcrumb ol li span {
  cursor: default;
}

.breadcrumb ol li:last-child span {
  background: #2196f3; /* Blue for the active/last item */
}

.breadcrumb ol li a:hover,
.breadcrumb ol li a:focus-visible {
  background: #555; /* Hover state for clickable items */
}