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

@layer base {
  html {
    -webkit-tap-highlight-color: transparent;
  }
  
  body {
    @apply antialiased text-gray-800;
  }
}

@layer components {
  .prose {
    @apply max-w-none;
  }

  .selected-image {
    @apply border-4 border-blue-500 shadow-md;
  }

  div.image-container {
    @apply flex flex-col items-center my-4 !important;
  }

  div.image-container img {
    @apply max-w-full h-auto;
  }

  div.image-container .image-caption {
    @apply text-sm text-gray-600 italic text-center max-w-[80%];
  }

  /* Поддержка абсолютного позиционирования */
  div.image-container .absolute {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
  }

  p.image-caption {
    @apply mt-2 text-lg text-gray-600 italic text-center max-w-[80%];
  }
}

@layer utilities {
  .text-shadow {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  }

  .text-indent {
    text-indent: 2em;
  }
}