/* =================================================================
   FINETIPS — Breadcrumb (componente compartilhado de páginas internas)
   Arquivo: breadcrumbs.css
   Descrição: Trilha de navegação usada no topo das páginas internas
              (abaixo do header, sobre o hero escuro). Exemplo:
              ← / Início / Nossas ferramentas
   ================================================================= */

.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-family: var(--font-body);
  font-size: 0.875rem;
  margin-bottom: var(--spacing-xl);
}

.breadcrumb-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-color);
  transition: transform var(--transition-fast), color var(--transition-fast);
}

.breadcrumb-back svg {
  width: 18px;
  height: 18px;
}

.breadcrumb-back:hover {
  color: var(--primary-hover);
  transform: translateX(-3px);
}

.breadcrumb-sep {
  color: rgba(255, 255, 255, 0.35);
  user-select: none;
}

.breadcrumb-link {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.breadcrumb-link:hover {
  color: var(--primary-color);
}

.breadcrumb-current {
  color: #FFFFFF;
  font-weight: 600;
}

/* Light mode: cores escuras no breadcrumb */
body:not(.dark-mode) .breadcrumb-sep {
  color: rgba(15, 23, 42, 0.35);
}

body:not(.dark-mode) .breadcrumb-link {
  color: rgba(15, 23, 42, 0.6);
}

body:not(.dark-mode) .breadcrumb-link:hover {
  color: #FF5D00;
}

body:not(.dark-mode) .breadcrumb-current {
  color: #0F172A;
}

/* ---- Responsivo ---- */
@media (max-width: 480px) {
  .breadcrumb {
    font-size: 0.8125rem;
    margin-bottom: var(--spacing-lg);
  }
}

/* Alvos de toque ≥ 44px no mobile */
@media (max-width: 768px) {
  .breadcrumb-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
  }

  .breadcrumb-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    min-width: 44px;
    justify-content: center;
    padding: 0 5px;
  }
}