/**
 * UI Professionalism Utilities
 * Ensures consistent cursor, hover, and interaction states
 */

/* ===== Cursor Pointer on Interactive Elements ===== */
button:not([disabled]),
[role="button"],
.category-link,
.article-card,
.article-list-item,
.tag-meta,
.section-more,
.load-more,
.read-more-btn,
.article-expand-btn,
.friendship-link,
.baike-header__drawer-item,
.baike-lang-switcher__option,
.like-btn {
  cursor: pointer;
}

/* ===== Disabled States ===== */
button[disabled],
.load-more:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

/* ===== Focus Visibility ===== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  /* outline-offset: 2px; */
}

/* ===== Smooth Transitions ===== */
a,
button,
.category-link,
.tag-meta,
.article-card,
.article-list-item,
.section-more,
.load-more,
.read-more-btn,
.friendship-link,
.social-link {
  transition: color var(--transition-fast),
              background-color var(--transition-fast),
              border-color var(--transition-fast),
              box-shadow var(--transition-fast);
}

/* ===== Hover States Without Layout Shift ===== */
/* Ensure hover effects don't change element dimensions */
.article-card:hover,
.article-list-item:hover {
  will-change: transform, box-shadow;
}

/* ===== Reduced Motion Support ===== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  .article-card:hover,
  .article-list-item:hover {
    transform: none !important;
  }
}

/* ===== Selection Color ===== */
::selection {
  background-color: var(--color-accent-light);
  color: var(--color-text-primary);
}

/* ===== Scrollbar Styling (Webkit) ===== */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--color-bg);
}

::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: var(--border-radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-muted);
}

/* ===== Touch Device Optimizations ===== */
@media (hover: none) {
  .article-card:hover,
  .article-list-item:hover {
    transform: none !important;
  }
  
  .article-card:hover .card-image img,
  .article-list-item:hover .article-list-thumb img {
    transform: none !important;
  }
}