/* Premium breadcrumb styling (SEO-safe, Elementor-friendly)
   Sluit aan op:
   - .breadcrumb-wrapper
   - nav.breadcrumb
   - ol.breadcrumb-list (of .breadcrumb ol)
   - .breadcrumb-item, .breadcrumb-link, .breadcrumb-current, .separator
*/

.breadcrumb-wrapper {
  margin: 0;
}

/* Nav container: maakt verticale centrering in het blok betrouwbaar */
.breadcrumb {
  display: flex;
  align-items: center;
}

/* Werkt met zowel .breadcrumb-list als .breadcrumb ol (backwards compatible) */
.breadcrumb .breadcrumb-list,
.breadcrumb ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;          /* baseline issues weg */
  gap: 0.5em;                   /* hoofd-spacing (Elementor kan dit overriden) */
}

/* Items: strak uitlijnen, geen “zwevende” separators nodig */
.breadcrumb .breadcrumb-item,
.breadcrumb li {
  display: inline-flex;
  align-items: center;
  min-height: 1.2em;            /* helpt bij consistente hoogte */
}

/* Separator: inline-flex + align-items = geen margin-top hacks */
.breadcrumb .separator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  line-height: 1;               /* voorkomt verticale shift */
  transform: translateY(-0.02em);/* mini-optische correctie, geen harde px-hack */
  color: #999;
  font-size: 1em;
}

/* Links */
.breadcrumb .breadcrumb-link,
.breadcrumb a {
  text-decoration: none;
  color: #007aff;
  font-weight: 500;
  transition: color 0.2s ease;
}

.breadcrumb .breadcrumb-link:hover,
.breadcrumb a:hover {
  color: #0056b3;
  text-decoration: underline;
}

/* Current item: aparte class + aria fallback */
.breadcrumb .breadcrumb-current,
.breadcrumb li span[aria-current="page"] {
  font-weight: 600;
  color: #555;
  pointer-events: none;
}

/* Accessibility: focus states (voor toetsenbordgebruik) */
.breadcrumb .breadcrumb-link:focus-visible,
.breadcrumb a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Mobile */
@media (max-width: 480px) {
  .breadcrumb .breadcrumb-list,
  .breadcrumb ol {
    font-size: 0.875rem;
    gap: 0.4em;
  }

  .breadcrumb .separator {
    transform: translateY(-0.01em);
  }
}