/* ==========================================================================
   Kennedy Mortgage - Breadcrumbs
   ==========================================================================
   Appear on all pages except Home. Sit immediately below the header on
   most pages, or inside the hero on program pages.

   Example markup:

   <nav class="breadcrumbs" aria-label="Breadcrumb">
     <ol>
       <li><a href="/">Home</a></li>
       <li><a href="/multifamily">Multifamily Lending</a></li>
       <li aria-current="page">Fannie Mae Agency Loans</li>
     </ol>
   </nav>
   ========================================================================== */

.breadcrumbs {
  font-size: var(--text-body-sm);
  color: var(--color-gray-600);
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  list-style: none;
  padding: 0;
  margin: 0;
}

.breadcrumbs li {
  display: flex;
  align-items: center;
  margin: 0;
}

/* Separator between items */
.breadcrumbs li:not(:first-child)::before {
  content: '/';
  display: inline-block;
  margin-right: var(--space-xs);
  color: var(--color-gray-400);
  font-weight: var(--weight-regular);
}

.breadcrumbs a {
  color: var(--color-gray-600);
  text-decoration: none;
  transition: color var(--transition);
}

.breadcrumbs a:hover {
  color: var(--color-blue);
  text-decoration: underline;
}

.breadcrumbs [aria-current="page"] {
  color: var(--color-navy);
  font-weight: var(--weight-medium);
}

/* Breadcrumbs bar (used when breadcrumbs sit in their own band below header) */
.breadcrumbs-bar {
  background-color: var(--color-gray-100);
  border-bottom: 1px solid var(--color-gray-200);
  padding: var(--space-md) 0;
}

.breadcrumbs-bar .breadcrumbs {
  font-size: var(--text-body-sm);
}