/* Custom styles for the PHP portfolio */

/* Navigation Styles */
.nav-link {
  @apply px-3 py-2 rounded-md text-sm font-medium text-muted-foreground hover:text-foreground hover:bg-muted transition-colors;
}

.nav-link.active {
  @apply text-white bg-primary;
}

.mobile-nav-link {
  @apply block px-3 py-2 rounded-md text-base font-medium text-muted-foreground hover:text-foreground hover:bg-muted transition-colors w-full text-left;
}

.mobile-nav-link.active {
  @apply text-white bg-primary;
}

/* Component Styles */
.card {
  @apply bg-card border border-border rounded-lg shadow-sm;
}

.btn-primary {
  @apply bg-primary text-white px-6 py-3 rounded-lg font-medium hover:bg-primary/90 transition-colors inline-flex items-center justify-center;
}

.btn-secondary {
  @apply bg-secondary text-secondary-foreground px-6 py-3 rounded-lg font-medium hover:bg-secondary/80 transition-colors inline-flex items-center justify-center;
}

/* Utility Classes */
.section-padding {
  @apply py-20 px-4 sm:px-6 lg:px-8;
}

.container {
  @apply max-w-7xl mx-auto;
}

/* Text Utilities */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.text-balance {
  text-wrap: balance;
}

/* Custom animations */
@keyframes float {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes pulse-glow {
  0%,
  100% {
    box-shadow: 0 0 5px rgba(16, 185, 129, 0.3);
  }
  50% {
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.6);
  }
}

@keyframes data-flow {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateX(100%);
    opacity: 0;
  }
}

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

.animate-pulse-glow {
  animation: pulse-glow 2s ease-in-out infinite;
}

.animate-data-flow {
  animation: data-flow 4s linear infinite;
}

/* Dark mode specific styles */
.dark {
  color-scheme: dark;
}

/* Form Styles */
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

/* Blog specific styles */
.prose {
  @apply text-muted-foreground;
}

.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
  @apply text-foreground font-semibold;
}

.prose h2 {
  @apply text-2xl mt-8 mb-4;
}

.prose h3 {
  @apply text-xl mt-6 mb-3;
}

.prose p {
  @apply mb-4 leading-relaxed;
}

.prose ul {
  @apply list-disc list-inside space-y-2 mb-6;
}

.prose ol {
  @apply list-decimal list-inside space-y-2 mb-6;
}

.prose blockquote {
  @apply border-l-4 border-primary pl-4 italic text-muted-foreground bg-muted/50 py-2 my-6;
}

.prose code {
  @apply bg-muted px-2 py-1 rounded text-sm font-mono;
}

.prose pre {
  @apply bg-muted p-4 rounded-lg overflow-x-auto text-sm font-mono mb-6;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .section-padding {
    @apply py-12 px-4;
  }

  .text-4xl {
    @apply text-3xl;
  }

  .text-5xl {
    @apply text-4xl;
  }

  .text-6xl {
    @apply text-4xl;
  }

  .text-7xl {
    @apply text-5xl;
  }
}

/* Loading states */
.loading {
  opacity: 0.6;
  pointer-events: none;
}

.loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid #10b981;
  border-radius: 50%;
  border-top-color: transparent;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Accessibility improvements */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Focus styles for better accessibility */
a:focus,
button:focus {
  outline: 2px solid #10b981;
  outline-offset: 2px;
}

/* Print styles */
@media print {
  .no-print {
    display: none !important;
  }

  .section-padding {
    @apply py-8;
  }

  .card {
    @apply border border-gray-300;
  }
}