/**
 * Yoast breadcrumbs, site-wide: in the beige strip under page banners (synced
 * patterns) and under news post banners (.xpt-breadcrumbs-bar, single.twig).
 * Separator chevron: App\Helpers\Breadcrumbs.
 *
 * Plain CSS outside the Sass build; loaded by AssetsServiceProvider.
 */

.xpt-breadcrumbs-bar {
  padding: 0;
  background: var(--wp--preset--color--light-beige, #efeae6);
}

.xpt-breadcrumbs-bar .xpt-container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--global--container-horizontal-padding, 20px);
}

/* Page strips (synced patterns): drop the group's own padding so every strip
   is just the breadcrumb line plus the padding below. */
.wp-block-group:has(> .yoast-breadcrumbs):not(#xpt-crumbs) {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.yoast-breadcrumbs:not(#xpt-crumbs) {
  /* Only the vertical margins: the page strips' constrained layout centres
     the breadcrumb in the 1440px content box with auto side margins. */
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 14px 0 !important;
  font-family: "TradeGothicLT", "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: #5f6b67;
}

.yoast-breadcrumbs:not(#xpt-crumbs) a {
  color: #16201d;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.yoast-breadcrumbs:not(#xpt-crumbs) a:hover {
  color: #00744b;
  border-bottom-color: currentColor;
}

.yoast-breadcrumbs:not(#xpt-crumbs) a:focus-visible {
  outline: 3px solid #00ce7c;
  outline-offset: 2px;
}

.yoast-breadcrumbs:not(#xpt-crumbs) .breadcrumb_last {
  font-family: "TradeGothicLT-Bold", "Helvetica Neue", Arial, sans-serif;
  color: #16201d;
}

.xpt-breadcrumbs__sep {
  display: inline-block;
  margin: 0 6px;
  vertical-align: -3px;
  color: #00a866;
}

.xpt-breadcrumbs__sep svg { display: block; width: 16px; height: 16px; }

@media (prefers-reduced-motion: reduce) {
  .yoast-breadcrumbs:not(#xpt-crumbs) a { transition: none; }
}

/* News posts: same box as the banner text (.post-hero .xpt-container and
   .single-hero-content, see page-hero.css), so the breadcrumb lines up with
   the post title. */
.xpt-breadcrumbs-bar .xpt-container {
  padding-left: max(var(--global--container-horizontal-padding, 20px), min(56px, calc(56px - (100vw - 1440px) / 2)));
}

.xpt-breadcrumbs-bar .single-hero-content {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 25px;
}

@media (max-width: 781px) {
  .xpt-breadcrumbs-bar .xpt-container { padding-left: var(--global--container-horizontal-padding, 20px); }
}