/**
 * Breadcrumbs Styles
 * Navigation breadcrumbs with separators
 */

/* ============================================
   Breadcrumb Container
   ============================================ */

.site-breadcrumb {
  background: var(--color-background-alt);
  border-bottom: 1px solid var(--color-gray-200);
  padding: var(--space-4) 0;
  margin-bottom: var(--space-8);
}

#block-modern-minimal-atomic-breadcrumbs {
  /* Block wrapper */
}

/* ============================================
   Breadcrumb Navigation
   ============================================ */

#block-modern-minimal-atomic-breadcrumbs nav {
  font-size: var(--text-sm);
}

#block-modern-minimal-atomic-breadcrumbs ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

#block-modern-minimal-atomic-breadcrumbs li {
  display: flex;
  align-items: center;
  margin: 0;
}

/* ============================================
   Breadcrumb Links
   ============================================ */

#block-modern-minimal-atomic-breadcrumbs a {
  color: var(--color-text-light);
  text-decoration: none;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  transition: all var(--transition);
  font-weight: 500;
}

#block-modern-minimal-atomic-breadcrumbs a:hover {
  color: var(--color-primary);
  background: white;
  transform: translateY(-1px);
}

#block-modern-minimal-atomic-breadcrumbs a:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Home link icon */
#block-modern-minimal-atomic-breadcrumbs li:first-child a::before {
  content: '🏠';
  margin-right: var(--space-2);
  font-size: 1rem;
}

/* ============================================
   Breadcrumb Separators
   ============================================ */

#block-modern-minimal-atomic-breadcrumbs li:not(:last-child)::after {
  content: '›';
  color: var(--color-gray-400);
  font-size: 1.25rem;
  margin-left: var(--space-2);
  font-weight: 300;
  user-select: none;
}

/* Alternative separator styles (choose one) */

/* Arrow separator */
/*
#block-modern-minimal-atomic-breadcrumbs li:not(:last-child)::after {
  content: '→';
}
*/

/* Slash separator */
/*
#block-modern-minimal-atomic-breadcrumbs li:not(:last-child)::after {
  content: '/';
}
*/

/* Chevron separator */
/*
#block-modern-minimal-atomic-breadcrumbs li:not(:last-child)::after {
  content: '⟩';
}
*/

/* ============================================
   Current Page (Last Item)
   ============================================ */

#block-modern-minimal-atomic-breadcrumbs li:last-child {
  color: var(--color-text);
  font-weight: 600;
}

/* If last item has a link */
#block-modern-minimal-atomic-breadcrumbs li:last-child a {
  color: var(--color-text);
  pointer-events: none;
  cursor: default;
}

/* If last item is plain text */
#block-modern-minimal-atomic-breadcrumbs li:last-child::before {
  /* Optional icon for current page */
  /* content: '📍'; */
  /* margin-right: var(--space-2); */
}

/* ============================================
   Empty Breadcrumb Fix
   ============================================ */

/* Hide empty breadcrumb items (like the second one in your HTML) */
#block-modern-minimal-atomic-breadcrumbs li:has(a[href]:empty),
#block-modern-minimal-atomic-breadcrumbs li a[href]:empty {
  display: none;
}

/* Alternative: Hide breadcrumb items with no text */
#block-modern-minimal-atomic-breadcrumbs li:has(a:not(:has(text()))) {
  display: none;
}

/* ============================================
   Responsive - Mobile
   ============================================ */

@media (max-width: 768px) {
  .site-breadcrumb {
    padding: var(--space-3) 0;
    margin-bottom: var(--space-6);
  }
  
  #block-modern-minimal-atomic-breadcrumbs ol {
    font-size: var(--text-xs);
    gap: var(--space-1);
  }
  
  #block-modern-minimal-atomic-breadcrumbs a {
    padding: var(--space-1);
  }
  
  #block-modern-minimal-atomic-breadcrumbs li:not(:last-child)::after {
    margin-left: var(--space-1);
    font-size: 1rem;
  }
  
  /* Hide middle items on mobile, show only first and last */
  #block-modern-minimal-atomic-breadcrumbs li:not(:first-child):not(:last-child) {
    display: none;
  }
  
  /* Add ellipsis when items are hidden */
  #block-modern-minimal-atomic-breadcrumbs li:first-child::after {
    content: '⋯' !important;
  }
}

/* ============================================
   Print Styles
   ============================================ */

@media print {
  .site-breadcrumb {
    background: white;
    border-bottom: 1px solid black;
    padding: 0.5rem 0;
  }
  
  #block-modern-minimal-atomic-breadcrumbs a {
    color: black;
    text-decoration: underline;
  }
}