/* Loaded after page styles so housing and album overrides cannot change the standard. */
#primary.site-main:has(.site-breadcrumbs) {
  --page-top-gap: 20px;
  padding-top: var(--page-top-gap) !important;
  margin-top: 0 !important;
}

/* Only ancestors of the trail: preserve horizontal layout and sidebar spacing. */
#primary.site-main :is(div, article, section):has(.site-breadcrumbs) {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

:is(#breadcrumbs, .breadcrumbs).site-breadcrumbs {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  gap: 4px 6px !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  height: auto !important;
  font-family: 'Open Sans', sans-serif !important;
  font-size: 14.5px !important;
  line-height: 1.35 !important;
  font-weight: 400 !important;
  color: #888888 !important;
  text-align: left !important;
}

:is(#breadcrumbs, .breadcrumbs).site-breadcrumbs > * {
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  margin: 0 !important;
  padding: 0 !important;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

:is(#breadcrumbs, .breadcrumbs).site-breadcrumbs a {
  color: #1d1d1f !important;
  text-decoration: none !important;
}

:is(#breadcrumbs, .breadcrumbs).site-breadcrumbs a:hover {
  color: #037fff !important;
  text-decoration: underline !important;
}

:is(#breadcrumbs, .breadcrumbs).site-breadcrumbs > span {
  color: #888888 !important;
}

:is(#breadcrumbs, .breadcrumbs).site-breadcrumbs .breadcrumb-separator {
  flex: 0 0 auto;
}

/* The next visible block owns no extra gap; housing has one data script between them. */
#primary.site-main .site-breadcrumbs + :not(script, style, template),
#primary.site-main .site-breadcrumbs + script + .zilye-main-layout,
#primary.site-main .site-breadcrumbs + article > .entry-header,
#primary.site-main .site-breadcrumbs + article > .entry-header > h1,
#primary.site-main .site-breadcrumbs + :is(.page-header, .yfa-header) > h1 {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

@media (max-width: 767px) {
  #primary.site-main:has(.site-breadcrumbs) {
    --page-top-gap: 12px;
  }

  :is(#breadcrumbs, .breadcrumbs).site-breadcrumbs {
    margin: 0 0 8px !important;
    font-size: 13.5px !important;
  }
}