/**
 * Universal Smyths Toys Breadcrumb Styles
 * Modern, responsive, and SEO-optimized navigation trail
 */

.smyths-breadcrumb-nav {
  background-color: #ffffff;
  border-bottom: 1px solid #E5E7EB;
  padding: 12px 0;
  width: 100%;
}

.smyths-breadcrumb-nav.transparent {
  background-color: transparent;
  border-bottom: none;
  padding: 6px 0 14px;
}

.smyths-breadcrumb-list {
  display: flex !important;
  align-items: center;
  flex-wrap: wrap !important;
  white-space: normal !important;
  overflow: visible !important;
  overflow-x: visible !important;
  gap: 6px 8px;
  row-gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--smyths-font-family, 'Inter', -apple-system, sans-serif);
  font-size: 0.88rem;
  line-height: 1.5;
}

.smyths-breadcrumb-item {
  display: inline-flex;
  align-items: center;
  color: #4B5563;
  flex-shrink: 0;
  white-space: normal;
}

.smyths-breadcrumb-item a {
  color: #4B5563;
  text-decoration: none;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  transition: color 0.15s ease;
}

.smyths-breadcrumb-item a:hover {
  color: var(--smyths-blue, #0072CE);
  text-decoration: underline;
}

.smyths-breadcrumb-home-icon {
  font-size: 0.84rem;
  margin-right: 5px;
  color: #6B7280;
  transition: color 0.15s ease;
}

.smyths-breadcrumb-item a:hover .smyths-breadcrumb-home-icon {
  color: var(--smyths-blue, #0072CE);
}

.smyths-breadcrumb-sep {
  display: inline-flex;
  align-items: center;
  color: #9CA3AF;
  font-size: 0.68rem;
  flex-shrink: 0;
  user-select: none;
  margin: 0 1px;
}

.smyths-breadcrumb-item.active {
  color: #111827;
  font-weight: 700;
  cursor: default;
  flex-shrink: 1;
  min-width: 0;
}

.smyths-breadcrumb-current {
  color: #111827;
  font-weight: 700;
  max-width: 380px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  vertical-align: bottom;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
  .smyths-breadcrumb-nav {
    padding: 8px 0;
  }
  .smyths-breadcrumb-list {
    display: flex !important;
    flex-wrap: wrap !important;
    white-space: normal !important;
    overflow: visible !important;
    overflow-x: visible !important;
    font-size: 0.82rem;
    gap: 4px 6px;
    row-gap: 6px;
    line-height: 1.5;
  }
  .smyths-breadcrumb-item {
    white-space: normal !important;
  }
  .smyths-breadcrumb-current {
    max-width: 100%;
    white-space: normal !important;
    word-break: break-word;
  }
}

@media print {
  .smyths-breadcrumb-nav {
    display: none !important;
  }
}