/**
 * Breadcrumbs — collapsed "…" popover.
 *
 * Loaded via the `inclind/breadcrumbs` library, attached in
 * inclind_preprocess_breadcrumb(). Plain CSS rather than Tailwind classes so
 * the feature ships without a rebuild of dist/assets/theme.css.
 *
 * Show/hide is CSS-only. The popover opens on :hover for pointer users and on
 * :focus-within for keyboard users — tabbing to the "…" button reveals the
 * popover, and because the links live inside the same wrapper, focus stays
 * "within" as you tab through them. No JS, no state to keep in sync.
 *
 * See templates/breadcrumb.html.twig for the markup this styles.
 */

/* ── The "…" item ────────────────────────────────────────────────────────── */

.breadcrumbs__collapsed {
  position: relative;
}

.breadcrumbs__toggle {
  /* Reset the UA button chrome; the Tailwind classes in the template supply
     colour/size so the "…" matches the sibling crumb links. */
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  line-height: inherit;
  cursor: pointer;
}

.breadcrumbs__toggle:hover {
  opacity: 0.8;
}

/* ── Popover ─────────────────────────────────────────────────────────────── */

.breadcrumbs__popover {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 30;             /* under the sticky nav (z-50), over page content */
  display: none;
  /* Top padding doubles as a hover bridge: it keeps the pointer inside the
     wrapper while travelling from the "…" down into the panel, so the popover
     doesn't flicker shut in the gap. */
  padding-top: 0.75rem;
}

.breadcrumbs__collapsed:hover .breadcrumbs__popover,
.breadcrumbs__collapsed:focus-within .breadcrumbs__popover {
  display: block;
}

.breadcrumbs__popover-list {
  position: relative;
  min-width: 14rem;
  margin: 0;
  padding: 1rem 1.5rem;
  list-style: none;
  background: #fff;
  box-shadow: 0 10px 25px -5px rgb(0 0 0 / 0.15), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

/* Arrow pointing back up at the "…". */
.breadcrumbs__popover-list::before {
  content: "";
  position: absolute;
  top: -0.5rem;
  left: 1.5rem;
  width: 1rem;
  height: 1rem;
  background: inherit;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.breadcrumbs__popover-item + .breadcrumbs__popover-item {
  margin-top: 0.75rem;
}

.breadcrumbs__popover-item a,
.breadcrumbs__popover-item span {
  white-space: nowrap;
}

/* ── Dark mode ───────────────────────────────────────────────────────────── */

.dark .breadcrumbs__popover-list {
  background: #222222;
  box-shadow: 0 10px 25px -5px rgb(0 0 0 / 0.5), 0 8px 10px -6px rgb(0 0 0 / 0.4);
}

/* ── Dark surfaces ───────────────────────────────────────────────────────── */

/*
 * breadcrumb.html.twig colours the current-page crumb and the "/" separators
 * `text-secondary-900 dark:text-secondary-100`. That pair is light-PAGE vs
 * dark-PAGE, not light-surface vs dark-surface. Placed in the Banner's dark
 * band on an otherwise light page, `dark:` never applies, so those crumbs
 * resolve to secondary-900 — #2A3342, the exact colour of the band behind
 * them. They are invisible, not merely low-contrast. (The links escape it by
 * luck: primary-200 #F4777B happens to read on both grounds, 4.7:1 here.)
 *
 * So on a dark surface, use the colours the template already intends for a
 * dark ground. These beat the Tailwind classes on specificity (0,2,1 vs
 * 0,1,0), so no !important is needed. `:is()` takes the highest specificity of
 * its arguments, and every argument here is a single class, so adding hosts
 * does not change that.
 *
 * ADD THE HOST'S SLOT-WRAPPER CLASS TO $DARK-BREADCRUMB-HOSTS BELOW whenever
 * another dark section starts hosting breadcrumbs. Forgetting is a silent
 * failure: the links still read (primary-200 happens to work on both grounds)
 * so the trail looks fine at a glance, while the current-page crumb and the
 * "/" separators vanish into the band. That is exactly how
 * banner-single-graphic shipped broken.
 */

/* $DARK-BREADCRUMB-HOSTS */
:is(.banner__above-title, .banner-single-graphic__above-title) .breadcrumbs li {
  color: var(--color-secondary-100, #eef0f3);   /* 11.1:1 on #2A3342 */
}

/* Separators are decorative (aria-hidden) — quieter than the crumbs, but still
   well clear of AA in case that ever changes. */
:is(.banner__above-title, .banner-single-graphic__above-title) .breadcrumbs li[aria-hidden='true'] {
  color: var(--color-secondary-300, #bbc3cf);   /* 7.2:1 on #2A3342 */
}

/* The collapsed-trail popover keeps its light panel on a dark surface, so the
   crumbs inside it must NOT inherit the light-on-dark colours above. */
:is(.banner__above-title, .banner-single-graphic__above-title) .breadcrumbs .breadcrumbs__popover-item span {
  color: var(--color-secondary-900, #2a3342);
}

/* ── Print ───────────────────────────────────────────────────────────────── */

@media print {
  /* Printed pages have no hover, so show the full trail inline. */
  .breadcrumbs__toggle {
    display: none;
  }

  .breadcrumbs__popover {
    position: static;
    display: block;
    padding-top: 0;
  }

  .breadcrumbs__popover-list {
    min-width: 0;
    padding: 0;
    background: none;
    box-shadow: none;
  }

  .breadcrumbs__popover-list::before {
    display: none;
  }
}