/* ============================================
   CUSTOM STYLES
   ============================================ */

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--color-secondary, #f9f8f4);
}

::-webkit-scrollbar-thumb {
  background: var(--color-primary, #5d6b5b);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary-hover, #4a5649);
}

/* Dark mode scrollbar */
.dark ::-webkit-scrollbar-track {
  background: #1a1a1a;
}

.dark ::-webkit-scrollbar-thumb {
  background: #8a9a87;
}

/* Selection color */
::selection {
  background: rgba(93, 107, 91, 0.2);
  color: #2d2d2d;
}

.dark ::selection {
  background: rgba(138, 154, 135, 0.3);
  color: #f0f0f0;
}

/* Fade in animation */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fadeInUp {
  animation: fadeInUp 0.6s ease-out forwards;
}

/* Stagger children animation */
.stagger-children > * {
  opacity: 0;
  animation: fadeInUp 0.6s ease-out forwards;
}

.stagger-children > *:nth-child(1) { animation-delay: 0.1s; }
.stagger-children > *:nth-child(2) { animation-delay: 0.2s; }
.stagger-children > *:nth-child(3) { animation-delay: 0.3s; }
.stagger-children > *:nth-child(4) { animation-delay: 0.4s; }

/* Floating animation for decorative elements */
@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}

/* Text balance for headings */
h1, h2, h3 {
  text-wrap: balance;
}

/* Improved focus styles */
a:focus-visible,
button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
  border-radius: 4px;
}

/* Ensure touch targets are at least 44px */
@media (pointer: coarse) {
  a, button {
    min-height: 44px;
    min-width: 44px;
  }
}

/* Reduce motion for users who prefer it */
@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;
  }
}

/* Print styles */
@media print {
  .no-print,
  header,
  footer,
  .fixed {
    display: none !important;
  }
  
  body {
    font-size: 12pt;
    line-height: 1.5;
  }
  
  a {
    text-decoration: underline;
  }
}