@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom base styles */
@layer base {
  html {
    font-family: 'FZ Poppins', 'Poppins', sans-serif;
  }
  
  body {
    font-family: 'FZ Poppins', 'Poppins', sans-serif;
    line-height: 1.6;
  }

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

  /* Focus styles */
  *:focus {
    outline: 2px solid theme('colors.brand-primary');
    outline-offset: 2px;
  }

  /* Selection styles */
  ::selection {
    background-color: theme('colors.brand-primary');
    color: white;
  }
}

/* Custom component styles */
@layer components {
  /* Button components */
  .btn {
    @apply inline-flex items-center justify-center px-4 py-2 text-sm font-medium rounded-lg transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2;
  }

  .btn-primary {
    @apply bg-brand-primary text-white hover:bg-red-600 focus:ring-brand-primary;
  }

  .btn-secondary {
    @apply bg-brand-secondary text-white hover:bg-orange-600 focus:ring-brand-secondary;
  }

  .btn-outline {
    @apply border-2 border-brand-primary text-brand-primary hover:bg-brand-primary hover:text-white focus:ring-brand-primary;
  }

  .btn-ghost {
    @apply text-gray-600 hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-800;
  }

  /* Card components */
  .card {
    @apply bg-white dark:bg-brand-dark rounded-xl shadow-soft border border-gray-200 dark:border-gray-700;
  }

  .card-hover {
    @apply card transition-all duration-300 hover:shadow-medium hover:-translate-y-1;
  }

  /* Input components */
  .input {
    @apply w-full px-4 py-3 bg-gray-100 dark:bg-brand-darker border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-brand-primary focus:border-transparent transition-all duration-200;
  }

  .input-search {
    @apply input pl-12 pr-4 rounded-full;
  }

  /* Navigation components */
  .nav-link {
    @apply flex items-center gap-3 px-4 py-3 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-800 rounded-xl transition-all duration-200;
  }

  .nav-link-active {
    @apply nav-link text-brand-primary bg-brand-primary/10;
  }

  /* Mobile menu sheet animation */
  .mobile-menu-sheet {
    @apply transform transition-transform duration-300 ease-in-out;
  }

  .mobile-menu-sheet.open {
    @apply translate-y-0;
  }

  /* Loading spinner */
  .spinner {
    @apply animate-spin rounded-full border-2 border-gray-300 border-t-brand-primary;
  }

  /* Gradient backgrounds */
  .gradient-primary {
    @apply bg-gradient-to-br from-brand-primary to-red-600;
  }

  .gradient-secondary {
    @apply bg-gradient-to-br from-brand-secondary to-orange-600;
  }

  .gradient-dark {
    @apply bg-gradient-to-br from-brand-dark to-brand-darker;
  }

  /* Text gradients */
  .text-gradient {
    @apply bg-gradient-to-r from-brand-primary to-brand-secondary bg-clip-text text-transparent;
  }

  /* Glass morphism effect */
  .glass {
    @apply bg-white/80 dark:bg-brand-dark/80 backdrop-blur-xl border border-white/20 dark:border-gray-700/50;
  }

  /* Custom scrollbar */
  .scrollbar-thin {
    scrollbar-width: thin;
    scrollbar-color: theme('colors.gray.400') theme('colors.gray.100');
  }

  .scrollbar-thin::-webkit-scrollbar {
    width: 6px;
  }

  .scrollbar-thin::-webkit-scrollbar-track {
    background: theme('colors.gray.100');
    border-radius: 3px;
  }

  .scrollbar-thin::-webkit-scrollbar-thumb {
    background: theme('colors.gray.400');
    border-radius: 3px;
  }

  .scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background: theme('colors.gray.500');
  }
}

/* Custom utility classes */
@layer utilities {
  /* Text utilities */
  .text-balance {
    text-wrap: balance;
  }

  /* Animation utilities */
  .animate-fade-in {
    animation: fadeIn 0.5s ease-in-out;
  }

  .animate-slide-up {
    animation: slideUp 0.3s ease-out;
  }

  .animate-slide-down {
    animation: slideDown 0.3s ease-out;
  }

  /* Layout utilities */
  .container-custom {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
  }

  /* Spacing utilities */
  .space-y-custom > * + * {
    margin-top: 1.5rem;
  }

  /* Responsive text */
  .text-responsive {
    @apply text-sm sm:text-base lg:text-lg;
  }

  .text-responsive-lg {
    @apply text-lg sm:text-xl lg:text-2xl;
  }

  .text-responsive-xl {
    @apply text-xl sm:text-2xl lg:text-3xl;
  }

  /* Dark mode utilities */
  .dark-mode-only {
    @apply dark:block hidden;
  }

  .light-mode-only {
    @apply block dark:hidden;
  }
}

/* WordPress specific styles */
@layer base {
  /* WordPress content styles */
  .entry-content {
    @apply prose prose-gray dark:prose-invert max-w-none;
  }

  .entry-content h1,
  .entry-content h2,
  .entry-content h3,
  .entry-content h4,
  .entry-content h5,
  .entry-content h6 {
    @apply font-semibold text-gray-900 dark:text-white;
  }

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

  .entry-content ul,
  .entry-content ol {
    @apply mb-4 pl-6;
  }

  .entry-content li {
    @apply mb-2;
  }

  .entry-content img {
    @apply rounded-lg shadow-soft;
  }

  .entry-content blockquote {
    @apply border-l-4 border-brand-primary pl-4 italic text-gray-700 dark:text-gray-300;
  }

  .entry-content code {
    @apply bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded text-sm font-mono;
  }

  .entry-content pre {
    @apply bg-gray-100 dark:bg-gray-800 p-4 rounded-lg overflow-x-auto;
  }

  .entry-content pre code {
    @apply bg-transparent p-0;
  }

  /* WordPress form styles */
  .wpcf7-form {
    @apply space-y-4;
  }

  .wpcf7-form-control-wrap {
    @apply block;
  }

  .wpcf7-form-control {
    @apply input;
  }

  .wpcf7-submit {
    @apply btn btn-primary;
  }

  /* WordPress navigation */
  .wp-pagenavi {
    @apply flex justify-center space-x-2 mt-8;
  }

  .wp-pagenavi a,
  .wp-pagenavi span {
    @apply px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors;
  }

  .wp-pagenavi .current {
    @apply bg-brand-primary text-white border-brand-primary;
  }
}