:root {
  --breadcrumb-bar-height: var(--tienvoud-site-header-height);
}

.content-main,
.blog-grid-field {
  padding-top: var(--breadcrumb-bar-height);
}

.article-main {
  padding-top: calc(var(--breadcrumb-bar-height) + var(--blog-grid));
}

[data-breadcrumb-shell]:not([hidden]) {
  animation: breadcrumbBarEnter 220ms cubic-bezier(.333333, 1, .666667, 1) both;
}

@keyframes breadcrumbBarEnter {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.content-breadcrumb,
.article-breadcrumb {
  position: fixed;
  top: var(--tienvoud-site-header-height);
  right: 0;
  left: 0;
  z-index: 35;
  width: 100%;
  height: var(--breadcrumb-bar-height);
  margin: 0;
  padding: 0 var(--content-shell-edge, var(--blog-page-pad, 56px));
  display: flex;
  align-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--line, #e5e5e5);
  background: #ffffff;
  color: var(--ink);
  font-family: "Carter One", cursive;
  font-size: 17px;
  font-weight: 400;
  line-height: 1;
}

.content-breadcrumb ol,
.article-breadcrumb ol {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  overflow-x: auto;
  list-style: none;
  scrollbar-width: none;
}

.content-breadcrumb ol::-webkit-scrollbar,
.article-breadcrumb ol::-webkit-scrollbar {
  display: none;
}

.content-breadcrumb li,
.article-breadcrumb li {
  display: inline-flex;
  flex: none;
  align-items: center;
  min-height: 44px;
  white-space: nowrap;
}

.content-breadcrumb li:nth-child(odd),
.article-breadcrumb li:nth-child(odd) { color: var(--ink); }

.content-breadcrumb li:nth-child(even),
.article-breadcrumb li:nth-child(even) { color: var(--pink); }

.content-breadcrumb li + li::before,
.article-breadcrumb li + li::before {
  width: 12px;
  height: 16px;
  margin-right: 12px;
  flex: none;
  background: currentColor;
  content: "";
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 16'%3E%3Cpath d='M3 2l6 6-6 6' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 16'%3E%3Cpath d='M3 2l6 6-6 6' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E");
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.content-breadcrumb a,
.article-breadcrumb a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: inherit;
  text-decoration: none;
  transition: color 160ms ease;
}

.content-breadcrumb li:nth-child(odd) a:hover,
.content-breadcrumb li:nth-child(odd) a:focus-visible,
.article-breadcrumb li:nth-child(odd) a:hover,
.article-breadcrumb li:nth-child(odd) a:focus-visible {
  color: var(--pink);
}

.content-breadcrumb li:nth-child(even) a:hover,
.content-breadcrumb li:nth-child(even) a:focus-visible,
.article-breadcrumb li:nth-child(even) a:hover,
.article-breadcrumb li:nth-child(even) a:focus-visible {
  color: var(--ink);
}

.content-breadcrumb a:focus-visible,
.article-breadcrumb a:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}

@media (max-width: 760px) {
  .content-breadcrumb,
  .article-breadcrumb {
    padding-inline: var(--content-shell-edge, var(--blog-page-pad, 24px));
    font-size: 13px;
  }

  .content-breadcrumb ol,
  .article-breadcrumb ol { gap: 9px; }

  .content-breadcrumb li + li::before,
  .article-breadcrumb li + li::before { margin-right: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  [data-breadcrumb-shell]:not([hidden]) { animation: none; }

  .content-breadcrumb a,
  .article-breadcrumb a { transition: none; }
}