/* Modern scrollbar styling */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  transition: all 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.4);
}

::-webkit-scrollbar-thumb:active {
  background: rgba(255, 255, 255, 0.6);
}

/* Firefox scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

section {
  min-height: calc(100dvh - 170px);
}

/* Exclude about page sections from min-height */
.about-page section {
  min-height: auto;
}

/* Hide scrollbar utility for horizontal scrolling tags */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* Enhanced horizontal scrolling for better mobile experience */
.scroll-smooth-x {
  scroll-behavior: smooth;
}

/* Improved touch scrolling for mobile devices */
.touch-scroll {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
}

/* Custom scrollable container styles */
.tags-container {
  scroll-snap-type: x proximity;
  scroll-padding-left: 16px;
  scroll-padding-right: 16px;
  /* Prevent text selection interference with scrolling */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /* Prevent drag behavior */
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
  /* Show grab cursor to indicate scrollability */
  cursor: grab;
}

.tags-container:active {
  cursor: grabbing;
}

.tags-container > * {
  scroll-snap-align: start;
  /* Ensure tags don't interfere with scrolling */
  pointer-events: auto;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Momentum scrolling fix for webkit browsers */
@supports (-webkit-overflow-scrolling: touch) {
  .touch-scroll {
    -webkit-overflow-scrolling: touch;
    transform: translateZ(0);
  }
}