/* ==========================================================================
   ECR Breadcrumbs — visible navigation + schema.org BreadcrumbList pairing.
   Enqueued on demand by template-parts/ecr-breadcrumbs.php.
   ========================================================================== */

.ecr-breadcrumbs {
  color: #4a5568;
  font-family: var(--font-sans, 'Manrope', sans-serif);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  margin: 0 0 16px;
  max-width: 100%;
}

.ecr-breadcrumbs ol {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  white-space: nowrap;
}

.ecr-breadcrumbs ol::-webkit-scrollbar {
  display: none;
}

.ecr-breadcrumbs li {
  align-items: center;
  display: inline-flex;
  flex-shrink: 0;
}

.ecr-breadcrumbs li:not(:last-child)::after {
  color: #B08D2E;
  content: "\203A";
  display: inline-block;
  font-weight: 700;
  margin: 0 7px;
}

.ecr-breadcrumbs a,
.ecr-breadcrumbs span {
  display: inline-block;
  max-width: 48ch;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ecr-breadcrumbs a {
  color: #4a5568;
  text-decoration: none;
}

.ecr-breadcrumbs a:hover,
.ecr-breadcrumbs a:focus-visible {
  color: #9a741e;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ecr-breadcrumbs span[aria-current="page"] {
  color: #1a2e1d;
  font-weight: 700;
}

/* Dark variant — used over photo heroes / forest-green backgrounds. */
.ecr-breadcrumbs--dark {
  color: rgba(247, 243, 236, 0.72);
}

.ecr-breadcrumbs--dark li:not(:last-child)::after {
  color: rgba(176, 141, 46, 0.9);
}

.ecr-breadcrumbs--dark a {
  color: rgba(247, 243, 236, 0.82);
}

.ecr-breadcrumbs--dark a:hover,
.ecr-breadcrumbs--dark a:focus-visible {
  color: #B08D2E;
}

.ecr-breadcrumbs--dark span[aria-current="page"] {
  color: #F7F3EC;
}

@media (max-width: 320px) {
  .ecr-breadcrumbs {
    font-size: 0.75rem;
  }

  .ecr-breadcrumbs a,
  .ecr-breadcrumbs span {
    max-width: 30ch;
  }
}

/* Street and home pages carry the same trail in the sticky wayfinder; the
   standalone trail would sit underneath it. (BreadcrumbList schema is
   emitted separately.) */
.ecr-wayfinder ~ .ecr-breadcrumbs {
  display: none;
}

/* --------------------------------------------------------------------------
   Breadcrumb as the first element of a page whose hero sits under the fixed
   site header (72px): float the trail over the top of the hero, just below
   the header, in light text, inside the content column.
   -------------------------------------------------------------------------- */
.ecr-shopping:has(> .ecr-breadcrumbs:first-child),
.ecr-amenities:has(> .ecr-breadcrumbs:first-child),
.ecr-parks:has(> .ecr-breadcrumbs:first-child),
.ecr-school:has(> .ecr-breadcrumbs:first-child),
.ecr-pk:has(> .ecr-breadcrumbs:first-child),
.ecr-pz:has(> .ecr-breadcrumbs:first-child),
.ecr-cv:has(> .ecr-breadcrumbs:first-child),
.ecr-environment:has(> .ecr-breadcrumbs:first-child),
.ecr-census-page:has(> .ecr-breadcrumbs:first-child),
.ecr-hist:has(> .ecr-breadcrumbs:first-child) {
  position: relative;
}

.ecr-shopping > .ecr-breadcrumbs:first-child,
.ecr-amenities > .ecr-breadcrumbs:first-child,
.ecr-parks > .ecr-breadcrumbs:first-child,
.ecr-school > .ecr-breadcrumbs:first-child,
.ecr-pk > .ecr-breadcrumbs:first-child,
.ecr-pz > .ecr-breadcrumbs:first-child,
.ecr-cv > .ecr-breadcrumbs:first-child,
.ecr-environment > .ecr-breadcrumbs:first-child,
.ecr-census-page > .ecr-breadcrumbs:first-child,
.ecr-hist > .ecr-breadcrumbs:first-child {
  box-sizing: border-box;
  color: rgba(255, 255, 255, 0.85);
  left: 50%;
  margin: 0;
  max-width: 1200px;
  padding: 0 clamp(20px, 5vw, 48px);
  position: absolute;
  top: 86px;
  transform: translateX(-50%);
  width: 100%;
  z-index: 3;
}

.ecr-shopping > .ecr-breadcrumbs:first-child a,
.ecr-amenities > .ecr-breadcrumbs:first-child a,
.ecr-parks > .ecr-breadcrumbs:first-child a,
.ecr-school > .ecr-breadcrumbs:first-child a,
.ecr-pk > .ecr-breadcrumbs:first-child a,
.ecr-pz > .ecr-breadcrumbs:first-child a,
.ecr-cv > .ecr-breadcrumbs:first-child a,
.ecr-environment > .ecr-breadcrumbs:first-child a,
.ecr-census-page > .ecr-breadcrumbs:first-child a,
.ecr-hist > .ecr-breadcrumbs:first-child a {
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.ecr-shopping > .ecr-breadcrumbs:first-child span[aria-current="page"],
.ecr-amenities > .ecr-breadcrumbs:first-child span[aria-current="page"],
.ecr-parks > .ecr-breadcrumbs:first-child span[aria-current="page"],
.ecr-school > .ecr-breadcrumbs:first-child span[aria-current="page"],
.ecr-pk > .ecr-breadcrumbs:first-child span[aria-current="page"],
.ecr-pz > .ecr-breadcrumbs:first-child span[aria-current="page"],
.ecr-cv > .ecr-breadcrumbs:first-child span[aria-current="page"],
.ecr-environment > .ecr-breadcrumbs:first-child span[aria-current="page"],
.ecr-census-page > .ecr-breadcrumbs:first-child span[aria-current="page"],
.ecr-hist > .ecr-breadcrumbs:first-child span[aria-current="page"] {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.ecr-shopping > .ecr-breadcrumbs:first-child li:not(:last-child)::after,
.ecr-amenities > .ecr-breadcrumbs:first-child li:not(:last-child)::after,
.ecr-parks > .ecr-breadcrumbs:first-child li:not(:last-child)::after,
.ecr-school > .ecr-breadcrumbs:first-child li:not(:last-child)::after,
.ecr-pk > .ecr-breadcrumbs:first-child li:not(:last-child)::after,
.ecr-pz > .ecr-breadcrumbs:first-child li:not(:last-child)::after,
.ecr-cv > .ecr-breadcrumbs:first-child li:not(:last-child)::after,
.ecr-environment > .ecr-breadcrumbs:first-child li:not(:last-child)::after,
.ecr-census-page > .ecr-breadcrumbs:first-child li:not(:last-child)::after,
.ecr-hist > .ecr-breadcrumbs:first-child li:not(:last-child)::after {
  color: #e2c46b;
}

/* Streets hub: the trail sits below the map hero; keep it in the column. */
.ecr-streets-hub > .ecr-breadcrumbs {
  box-sizing: border-box;
  margin: 0 auto;
  max-width: 1200px;
  padding: 18px clamp(20px, 5vw, 48px) 0;
}

/* A dark pill keeps the trail readable over light skies in hero photos. */
.ecr-shopping > .ecr-breadcrumbs:first-child ol,
.ecr-amenities > .ecr-breadcrumbs:first-child ol,
.ecr-parks > .ecr-breadcrumbs:first-child ol,
.ecr-school > .ecr-breadcrumbs:first-child ol,
.ecr-pk > .ecr-breadcrumbs:first-child ol,
.ecr-pz > .ecr-breadcrumbs:first-child ol,
.ecr-cv > .ecr-breadcrumbs:first-child ol,
.ecr-environment > .ecr-breadcrumbs:first-child ol,
.ecr-census-page > .ecr-breadcrumbs:first-child ol,
.ecr-hist > .ecr-breadcrumbs:first-child ol {
  background: rgba(22, 32, 24, 0.55);
  border-radius: 999px;
  display: inline-flex;
  max-width: 100%;
  padding: 6px 14px;
}

/* Hero copy starts below the trail (header 72px + trail ~32px + gap). */
.ecr-pz:has(> .ecr-breadcrumbs:first-child) .ecr-pz-hero__inner,
.ecr-pk:has(> .ecr-breadcrumbs:first-child) .ecr-pk-hero__inner,
.ecr-cv:has(> .ecr-breadcrumbs:first-child) .ecr-cv-hero__inner {
  padding-top: max(136px, var(--ecr-hero-pt, 0px));
}

/* Plain (no photo) page heroes centre their copy on solid forest, so the
   trail centres with it and drops the pill: the pill only exists for
   contrast over photos. */
:is(.ecr-shopping, .ecr-amenities, .ecr-parks, .ecr-school, .ecr-pk, .ecr-pz, .ecr-cv, .ecr-environment, .ecr-census-page, .ecr-hist) > .ecr-breadcrumbs:first-child:has(+ .ecr-page-hero:not(.ecr-page-hero--photo), + script + .ecr-page-hero:not(.ecr-page-hero--photo)) {
  text-align: center;
}
:is(.ecr-shopping, .ecr-amenities, .ecr-parks, .ecr-school, .ecr-pk, .ecr-pz, .ecr-cv, .ecr-environment, .ecr-census-page, .ecr-hist) > .ecr-breadcrumbs:first-child:has(+ .ecr-page-hero:not(.ecr-page-hero--photo), + script + .ecr-page-hero:not(.ecr-page-hero--photo)) ol {
  background: none;
  display: flex;
  /* "safe" falls back to start-aligned (scrollable) when a long trail
     overflows a phone screen, instead of clipping both ends. */
  justify-content: safe center;
  padding: 6px 0;
}
/* Phones: the plain hero's copy starts below the floating trail. */
@media (max-width: 768px) {
  :is(.ecr-shopping, .ecr-amenities, .ecr-parks, .ecr-school, .ecr-environment, .ecr-census-page, .ecr-hist) > .ecr-breadcrumbs:first-child ~ .ecr-page-hero:not(.ecr-page-hero--photo) {
    padding-top: 84px;
  }
}
:is(.ecr-shopping, .ecr-amenities, .ecr-parks, .ecr-school, .ecr-pk, .ecr-pz, .ecr-cv, .ecr-environment, .ecr-census-page, .ecr-hist) > .ecr-breadcrumbs:first-child:has(+ .ecr-page-hero:not(.ecr-page-hero--photo), + script + .ecr-page-hero:not(.ecr-page-hero--photo)) :is(a, span) {
  text-shadow: none;
}