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

/* Non-critical CSS - Loaded after critical styles */

/* Font loading optimization */
@font-face {
  font-family: 'Noto Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Noto Sans Arabic'), local('NotoSansArabic');
}

/* Base styles - moved critical ones to inline CSS */
html {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans Arabic', sans-serif;
  direction: rtl;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  @apply min-h-screen bg-zinc-50 text-zinc-900 dark:bg-zinc-950 dark:text-zinc-50;
  overflow-x: hidden;
}

/* Ensure proper text contrast */
article, main, section {
  @apply text-zinc-900 dark:text-zinc-100;
}

/* Fix prose content colors */
.prose {
  @apply text-zinc-700 dark:text-zinc-300;
}

.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
  @apply text-zinc-900 dark:text-zinc-100;
}

.prose p, .prose li, .prose td, .prose th {
  @apply text-zinc-700 dark:text-zinc-300;
}

/* Mobile-specific optimizations */
@media (max-width: 640px) {
  /* Better line height for mobile reading */
  .prose {
    line-height: 1.7;
  }
  
  /* Optimize heading sizes for mobile */
  .prose h1 { font-size: 1.5rem; }
  .prose h2 { font-size: 1.25rem; }
  .prose h3 { font-size: 1.125rem; }
  
  /* Better spacing for mobile */
  .prose p { margin-bottom: 1rem; }
  .prose ul, .prose ol { margin: 1rem 0; }
  .prose li { margin: 0.25rem 0; }
  
  /* Prevent horizontal overflow */
  .prose pre, .prose code {
    overflow-x: auto;
    word-wrap: break-word;
  }
  
  /* Better touch targets */
  .prose a {
    padding: 0.125rem 0;
    min-height: 44px;
    display: inline-block;
  }
}

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

/* Enhanced focus styles for accessibility */
*:focus-visible {
  @apply outline-2 outline-offset-2 outline-indigo-500 dark:outline-indigo-400;
}

/* Ensure interactive elements have proper focus rings */
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  @apply ring-2 ring-indigo-500 ring-offset-2 dark:ring-indigo-400 dark:ring-offset-zinc-950 outline-none;
}

/* Optimized image loading states */
img {
  /* Faster transition for better perceived performance */
  transition: opacity 0.2s ease-in-out;
  /* Ensure images don't exceed container width on mobile */
  max-width: 100%;
  height: auto;
  /* Improve image rendering */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

img[loading="lazy"] {
  opacity: 0;
}

img[loading="lazy"].loaded {
  opacity: 1;
}

/* Mobile-specific image optimizations */
@media (max-width: 640px) {
  .aspect-video {
    /* Slightly taller aspect ratio on mobile for better text readability */
    aspect-ratio: 16 / 10;
  }
}

/* Pre tag styles for proper text direction and wrapping */
pre {
  direction: ltr !important;
  @apply text-left;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

/* Ensure code blocks display LTR even in RTL context */
pre code,
pre.astro-code,
pre.astro-code code {
  direction: ltr !important;
  text-align: left !important;
  unicode-bidi: embed;
}

/* Ensure code block lines are LTR */
pre .line,
pre code .line {
  direction: ltr !important;
  text-align: left !important;
  display: block;
}

/* Skip to main content link for screen readers */
.skip-to-main {
  @apply absolute -top-40 left-6 bg-indigo-600 text-white px-4 py-2 rounded-md z-50 transition-all duration-200;
}

.skip-to-main:focus {
  @apply top-6;
}

/* Component layer for reusable patterns */
@layer components {
  /* Container styles */
  .container {
    @apply max-w-3xl mx-auto px-4 md:px-6;
  }
  
  /* Button base styles with enhanced accessibility */
  .btn {
    @apply inline-flex items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 dark:focus-visible:ring-indigo-400 dark:focus-visible:ring-offset-zinc-950 disabled:pointer-events-none disabled:opacity-50 hover:transform hover:scale-105 active:scale-95;
  }
  
  .btn-primary {
    @apply bg-indigo-600 text-white hover:bg-indigo-700 hover:shadow-lg dark:bg-indigo-500 dark:hover:bg-indigo-600;
  }
  
  .btn-secondary {
    @apply bg-zinc-100 text-zinc-900 hover:bg-zinc-200 hover:shadow-md dark:bg-zinc-800 dark:text-zinc-100 dark:hover:bg-zinc-700;
  }
  
  /* Card styles */
  .card {
    @apply rounded-lg border border-zinc-200 bg-white p-6 shadow-sm dark:border-zinc-800 dark:bg-zinc-900 transition-all duration-200 hover:shadow-md hover:-translate-y-0.5;
  }
  
  /* Enhanced link styles with better hover states */
  .link {
    @apply text-indigo-600 hover:text-indigo-700 dark:text-indigo-400 dark:hover:text-indigo-300 underline-offset-4 hover:underline transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 dark:focus-visible:ring-indigo-400 dark:focus-visible:ring-offset-zinc-950 rounded-sm;
  }
  
  /* Enhanced tag/pill styles with hover states */
  .tag {
    @apply inline-flex items-center rounded-full bg-zinc-100 px-2.5 py-0.5 text-xs font-medium text-zinc-800 dark:bg-zinc-800 dark:text-zinc-200 transition-colors duration-200 hover:bg-zinc-200 dark:hover:bg-zinc-700;
  }
  
  .tag-primary {
    @apply bg-indigo-100 text-indigo-800 dark:bg-indigo-900/30 dark:text-indigo-300 hover:bg-indigo-200 dark:hover:bg-indigo-900/50;
  }
  
  /* Interactive tag styles for links */
  .tag-link {
    @apply tag tag-primary focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 dark:focus-visible:ring-indigo-400 dark:focus-visible:ring-offset-zinc-950 cursor-pointer;
  }
}

/* Utility layer for custom utilities */
@layer utilities {
  /* RTL-specific utilities */
  .rtl-flip {
    transform: scaleX(-1);
  }
  
  /* Enhanced RTL spacing utilities */
  .space-x-reverse > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 1;
  }
  
  .divide-x-reverse > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-x-reverse: 1;
  }
  
  /* RTL-friendly margin utilities */
  .mr-auto-rtl {
    margin-left: auto;
    margin-right: 0;
  }
  
  .ml-auto-rtl {
    margin-right: auto;
    margin-left: 0;
  }
  
  /* Prose styles for Arabic content */
  .prose-rtl {
    @apply prose prose-zinc dark:prose-invert max-w-none;
    direction: rtl;
    text-align: right;
  }
  
  .prose-rtl h1,
  .prose-rtl h2,
  .prose-rtl h3,
  .prose-rtl h4,
  .prose-rtl h5,
  .prose-rtl h6 {
    text-align: right;
  }
  
  .prose-rtl ul,
  .prose-rtl ol {
    padding-right: 1.625em;
    padding-left: 0;
  }
  
  .prose-rtl li {
    text-align: right;
  }
  
  .prose-rtl blockquote {
    border-right: 0.25rem solid #e4e4e7;
    border-left: none;
    padding-right: 1em;
    padding-left: 0;
    text-align: right;
  }
  
  .dark .prose-rtl blockquote {
    border-right-color: #3f3f46;
  }
  
  /* Enhanced dark mode consistency */
  .dark-mode-transition {
    @apply transition-colors duration-200;
  }
  
  /* Performance optimization utilities */
  .will-change-transform {
    will-change: transform;
  }
  
  .will-change-opacity {
    will-change: opacity;
  }
  
  /* Lazy loading utilities */
  .lazy-load {
    @apply opacity-0 transition-opacity duration-300;
  }
  
  .lazy-load.loaded {
    @apply opacity-100;
  }
  
  /* Mobile-specific utilities */
  .mobile-optimized {
    /* Prevent text from being too small on mobile */
    font-size: max(16px, 1rem);
    /* Better line spacing for readability */
    line-height: 1.6;
    /* Prevent horizontal scrolling */
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
  }
  
  .touch-friendly {
    /* Minimum touch target size */
    min-height: 44px;
    min-width: 44px;
    /* Better tap response */
    -webkit-tap-highlight-color: rgba(79, 70, 229, 0.1);
  }
  
  /* Responsive text utilities */
  .text-responsive-sm { font-size: clamp(0.875rem, 2.5vw, 1rem); }
  .text-responsive-base { font-size: clamp(1rem, 3vw, 1.125rem); }
  .text-responsive-lg { font-size: clamp(1.125rem, 3.5vw, 1.25rem); }
  .text-responsive-xl { font-size: clamp(1.25rem, 4vw, 1.5rem); }
  .text-responsive-2xl { font-size: clamp(1.5rem, 5vw, 2rem); }
  
  /* Line clamp utilities */
  .line-clamp-1 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }
  
  .line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  
  .line-clamp-3 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }
}