/* ============================================================
   EduShieldID — components/navigation.css
   Small in-page navigation aids reused across portals:
   pagination links and breadcrumbs.
   ============================================================ */

/* ── Pagination (partials/pagination.html) ──────────────────── */
.pagination {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) 0;
  font-size: var(--text-sm);
  color: var(--clr-text-muted);
}
.pagination a {
  color: var(--clr-primary);
  font-weight: var(--weight-medium);
}
.pagination a:hover { text-decoration: underline; }

/* ── Breadcrumbs (partials/breadcrumbs.html) ─────────────────── */
.breadcrumbs {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-xs);
  color: var(--clr-text-muted);
  margin-bottom: var(--sp-6);
}
.breadcrumbs a { color: var(--clr-text-muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--clr-text); }
.breadcrumbs span { color: var(--clr-text); }
.breadcrumbs > * + *::before { content: "/"; margin-right: var(--sp-2); color: var(--clr-border); }