/*
 * Breadcrumb + Pagination — navigation utility styles.
 * Reuse unit: block style on core/query-pagination (pagination);
 *             CSS class .wpdl-breadcrumb on core/html (breadcrumb).
 * Consumes ONLY token CSS vars (no raw hex/px).
 *
 * ─── Breadcrumb ─────────────────────────────────────────────────────────────
 * .wpdl-breadcrumb  nav > ol  (semantic ordered list, aria-label="Breadcrumb")
 *   li > a  (ancestor links)
 *   li > span[aria-current="page"]  (current page, not a link)
 *   li + li::before  (CSS › separator)
 *
 * ─── Pagination ─────────────────────────────────────────────────────────────
 * .wp-block-query-pagination.is-style-wpdl-pagination
 *   .wp-block-query-pagination-previous
 *   .wp-block-query-pagination-numbers  > a / span[aria-current="page"]
 *   .wp-block-query-pagination-next
 *
 * Ordering: breadcrumb base → breadcrumb states → pagination base →
 *           page numbers → current → prev/next → focus → motion.
 *
 * Tokens read:
 *   semantic.color.bg.elevated / surface · semantic.color.border.base / strong
 *   semantic.color.bg.brand / text.brand / text.primary / text.secondary / text.muted
 *   semantic.color.text.inverse · semantic.color.interactive.default / hover / focus
 *   semantic.radius.btn / badge · semantic.typography.body.* / label.*
 *   component.button.min-size / pad-x / pad-y / radius
 *   space.2 / space.3 / space.4 / space.6
 *   duration.base · easing.default
 */

/* ═══════════════════════════════════════════════════════════════════════════
   BREADCRUMB
   ═══════════════════════════════════════════════════════════════════════════ */

/* --- Container ------------------------------------------------------------ */

nav.wpdl-breadcrumb {
  display: block;
}

nav.wpdl-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wp--custom--space--2);
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: var(--wp--custom--semantic--typography--label--font-family);
  font-size: var(--wp--custom--semantic--typography--label--font-size);
  font-weight: var(--wp--custom--semantic--typography--label--font-weight);
  letter-spacing: var(--wp--custom--semantic--typography--label--letter-spacing);
  color: var(--wp--custom--semantic--color--text--muted);
}

/* --- Separator ------------------------------------------------------------- */

nav.wpdl-breadcrumb ol li + li::before {
  content: '›';
  color: var(--wp--custom--semantic--color--text--muted);
  margin-inline-end: var(--wp--custom--space--2);
  pointer-events: none;
}

/* --- Ancestor links ------------------------------------------------------- */

nav.wpdl-breadcrumb ol li a {
  color: var(--wp--custom--semantic--color--brand--primary);
  text-decoration: none;
  transition: color var(--wp--custom--duration--base) var(--wp--custom--easing--default);
}

/* --- Current page (not a link) -------------------------------------------- */

nav.wpdl-breadcrumb ol li span[aria-current="page"] {
  color: var(--wp--custom--semantic--color--text--secondary);
  font-weight: 600;
}

/* --- Breadcrumb states ---------------------------------------------------- */

nav.wpdl-breadcrumb ol li a:hover {
  color: var(--wp--custom--semantic--color--brand--strong);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

nav.wpdl-breadcrumb ol li a:focus-visible {
  outline: 3px solid var(--wp--custom--semantic--color--focus--ring);
  outline-offset: 2px;
  border-radius: var(--wp--custom--semantic--radius--btn);
}

/* ═══════════════════════════════════════════════════════════════════════════
   PAGINATION
   ═══════════════════════════════════════════════════════════════════════════ */

/* --- Container ------------------------------------------------------------ */

.wp-block-query-pagination.is-style-wpdl-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--wp--custom--space--3);
  font-family: var(--wp--custom--semantic--typography--label--font-family);
  font-size: var(--wp--custom--semantic--typography--label--font-size);
}

/* --- Number items --------------------------------------------------------- */

.wp-block-query-pagination.is-style-wpdl-pagination .wp-block-query-pagination-numbers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wp--custom--space--2);
}

/* Shared: all page-number anchors + current page span. */
.wp-block-query-pagination.is-style-wpdl-pagination .wp-block-query-pagination-numbers a,
.wp-block-query-pagination.is-style-wpdl-pagination .wp-block-query-pagination-numbers span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 2.75rem;
  min-block-size: 2.75rem;
  padding-inline: var(--wp--custom--space--3);
  border: 1px solid var(--wp--custom--semantic--color--border--base);
  border-radius: var(--wp--custom--semantic--radius--btn);
  background-color: var(--wp--custom--semantic--color--surface--primary);
  color: var(--wp--custom--semantic--color--text--primary);
  text-decoration: none;
  transition:
    background-color var(--wp--custom--duration--base) var(--wp--custom--easing--default),
    border-color var(--wp--custom--duration--base) var(--wp--custom--easing--default),
    color var(--wp--custom--duration--base) var(--wp--custom--easing--default);
}

/* --- Current page --------------------------------------------------------- */

.wp-block-query-pagination.is-style-wpdl-pagination .wp-block-query-pagination-numbers span[aria-current="page"] {
  background-color: var(--wp--custom--semantic--color--brand--primary);
  border-color: var(--wp--custom--semantic--color--brand--primary);
  color: var(--wp--custom--semantic--color--text--inverse);
  font-weight: 700;
  cursor: default;
}

/* --- Previous / Next links ------------------------------------------------ */

.wp-block-query-pagination.is-style-wpdl-pagination .wp-block-query-pagination-previous,
.wp-block-query-pagination.is-style-wpdl-pagination .wp-block-query-pagination-next {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.75rem;
  padding-inline: var(--wp--custom--space--4);
  border: 1px solid var(--wp--custom--semantic--color--border--base);
  border-radius: var(--wp--custom--semantic--radius--btn);
  background-color: var(--wp--custom--semantic--color--surface--primary);
  color: var(--wp--custom--semantic--color--brand--primary);
  text-decoration: none;
  font-weight: var(--wp--custom--semantic--typography--label--font-weight);
  transition:
    background-color var(--wp--custom--duration--base) var(--wp--custom--easing--default),
    border-color var(--wp--custom--duration--base) var(--wp--custom--easing--default);
}

/* --- Pagination hover states ---------------------------------------------- */

.wp-block-query-pagination.is-style-wpdl-pagination .wp-block-query-pagination-numbers a:hover {
  background-color: var(--wp--custom--semantic--color--surface--primary);
  border-color: var(--wp--custom--semantic--color--border--strong);
}

.wp-block-query-pagination.is-style-wpdl-pagination .wp-block-query-pagination-previous:hover,
.wp-block-query-pagination.is-style-wpdl-pagination .wp-block-query-pagination-next:hover {
  background-color: var(--wp--custom--semantic--color--surface--primary);
  border-color: var(--wp--custom--semantic--color--border--strong);
}

/* --- Pagination focus ----------------------------------------------------- */

.wp-block-query-pagination.is-style-wpdl-pagination .wp-block-query-pagination-numbers a:focus-visible,
.wp-block-query-pagination.is-style-wpdl-pagination .wp-block-query-pagination-previous:focus-visible,
.wp-block-query-pagination.is-style-wpdl-pagination .wp-block-query-pagination-next:focus-visible {
  outline: 3px solid var(--wp--custom--semantic--color--focus--ring);
  outline-offset: 2px;
}

/* --- Reduced motion ------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  nav.wpdl-breadcrumb ol li a,
  .wp-block-query-pagination.is-style-wpdl-pagination .wp-block-query-pagination-numbers a,
  .wp-block-query-pagination.is-style-wpdl-pagination .wp-block-query-pagination-previous,
  .wp-block-query-pagination.is-style-wpdl-pagination .wp-block-query-pagination-next {
    transition: none;
  }
}