/* Use Inter for English and Noto Sans JP for Japanese */
body {
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
}

/* Simple animation for result items */
.result-item {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeIn 0.5s ease-out forwards;
}

@keyframes fadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Modal styles */
#modal-overlay.hidden, #modal.hidden {
  display: none;
}

/* Reset button styles for result items */
.result-item-btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
  width: 100%;
}

.result-item-btn:focus {
  outline: 2px solid #3b82f6; /* blue-500 */
  outline-offset: 2px;
  border-radius: 0.75rem; /* rounded-xl */
}

/* Related article button styles */
.related-article-btn {
  background-color: #f9fafb; /* bg-gray-50 */
}

.related-article-btn:hover {
  border-color: #60a5fa; /* border-blue-400 */
  background-color: #f3f4f6; /* bg-gray-100 */
}

/* Animation utilities */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(10px);
  }
}

.anim-fade-in {
  animation: fadeIn 0.3s ease-out forwards;
}

.anim-fade-out {
  animation: fadeOut 0.3s ease-out forwards;
}