/* Custom CSS for TechMaster Systems */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* Base Styles */
html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  @apply antialiased;
}

/* Custom Animations */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Slider Styles */
.slider-container {
  @apply relative w-full;
  height: 70vh; /* Dynamic height based on viewport */
  min-height: 500px; /* Minimum height for smaller screens */
  max-height: 800px; /* Maximum height for larger screens */
}

.slider-track {
  @apply flex h-full w-full transition-transform duration-500 ease-in-out;
}

.slide {
  @apply min-w-full h-full relative;
}

.slide img {
  @apply w-full h-full object-cover;
}

.slide-content {
  @apply absolute inset-0 flex items-center px-4 md:px-16;
}

/* Slider Controls */
.slider-control {
  @apply absolute top-1/2 -translate-y-1/2 z-10 bg-white/30 hover:bg-white/50 text-white p-3 rounded-full transition;
}

.slider-prev {
  @apply left-4;
}

.slider-next {
  @apply right-4;
}

.slider-dots {
  @apply absolute bottom-8 left-1/2 -translate-x-1/2 flex space-x-2 z-10;
}

.slider-dot {
  @apply w-3 h-3 rounded-full bg-white/50 hover:bg-white transition cursor-pointer;
}

.slider-dot.active {
  @apply bg-white;
}

.fade-in {
  animation: fadeIn 0.5s ease-in-out;
}

/* Custom Scrollbar (works in Chrome/Edge/Safari) */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  @apply bg-gray-100 dark:bg-gray-800;
}

::-webkit-scrollbar-thumb {
  @apply bg-primary/50 dark:bg-primary-600 rounded-full;
}

::-webkit-scrollbar-thumb:hover {
  @apply bg-primary dark:bg-primary-500;
}

/* Print Styles */
@media print {
  .no-print {
    display: none !important;
  }
  
  body {
    @apply bg-white text-black;
    font-size: 12pt;
  }
  
  a::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    font-weight: normal;
  }
}

/* Custom Form Styles (for future forms) */
.input-primary {
  @apply w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent dark:bg-gray-800 dark:text-white transition;
}

.btn-primary {
  @apply bg-primary hover:bg-primary-600 text-white font-medium py-2 px-6 rounded-lg transition duration-300;
}

.btn-secondary {
  @apply bg-secondary hover:bg-secondary-600 text-white font-medium py-2 px-6 rounded-lg transition duration-300;
}

/* Custom Tooltip (for accessibility) */
[data-tooltip] {
  @apply relative;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  @apply absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-3 py-1 bg-gray-900 text-white text-sm rounded whitespace-nowrap opacity-0 invisible transition-all duration-200;
}

[data-tooltip]:hover::after {
  @apply opacity-100 visible;
}

/* Custom Underline Animation */
.link-underline {
  @apply inline-block relative;
}

.link-underline::after {
  content: '';
  @apply absolute bottom-0 left-0 w-0 h-0.5 bg-secondary transition-all duration-300;
}

.link-underline:hover::after {
  @apply w-full;
}

/* Custom Grid Gap Fix for older browsers */
@supports not (gap: 1rem) {
  .grid-fallback {
    margin: -0.5rem;
  }
  
  .grid-fallback > * {
    margin: 0.5rem;
  }
}

/* Custom Dark Mode Overrides */
.dark .dark\:prose-invert {
  @apply text-gray-300;
}

/* Custom Image Effects */
.img-hover-zoom {
  @apply overflow-hidden;
}

.img-hover-zoom img {
  @apply transition-transform duration-500 ease-in-out;
}

.img-hover-zoom:hover img {
  @apply transform scale-110;
}

/* Custom Pulse Animation (for CTAs) */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.animate-pulse-custom {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Custom Aspect Ratios */
.aspect-16\/9 {
  aspect-ratio: 16/9;
}

/* Custom Transition Effects */
.transition-all-slow {
  transition: all 0.5s ease;
}

/* Custom Focus Styles */
.focus-primary:focus {
  @apply outline-none ring-2 ring-primary ring-opacity-50;
}