/* Modern Food Review Theme CSS */

/* Custom Tailwind Components */
@layer components {
  .prose-custom {
    @apply text-gray-700 leading-relaxed;
  }

  .prose-custom h1,
  .prose-custom h2,
  .prose-custom h3,
  .prose-custom h4,
  .prose-custom h5,
  .prose-custom h6 {
    @apply text-gray-900 font-bold mt-10 mb-6;
  }

  .prose-custom h1 {
    @apply text-3xl;
  }

  .prose-custom h2 {
    @apply text-2xl border-b-2 border-primary-200 pb-2;
  }

  .prose-custom h3 {
    @apply text-xl text-primary-700;
  }

  .prose-custom p {
    @apply mb-10 leading-relaxed text-lg text-gray-800;
  }

  .prose-custom p:first-of-type {
    @apply text-xl text-gray-900 font-medium;
  }

  .prose-custom ul,
  .prose-custom ol {
    @apply mb-4 ml-6;
  }

  .prose-custom li {
    @apply mb-2;
  }

  .prose-custom a {
    @apply text-primary-600 hover:text-primary-700 underline transition-colors duration-200;
  }

  .prose-custom blockquote {
    @apply bg-gray-50 border-l-4 border-primary-500 pl-6 py-4 my-6 italic text-gray-700;
  }

  .prose-custom code {
    @apply bg-gray-100 text-gray-800 px-2 py-1 rounded text-sm font-mono;
  }

  .prose-custom pre {
    @apply bg-gray-900 text-green-300 p-4 rounded-lg overflow-x-auto my-6;
  }

  .prose-custom pre code {
    @apply bg-transparent text-inherit p-0;
  }

  .prose-custom img {
    @apply rounded-lg shadow-lg mx-auto my-6 max-w-full h-auto;
  }

  .prose-custom table {
    @apply w-full border-collapse border border-gray-300 my-6;
  }

  .prose-custom th,
  .prose-custom td {
    @apply border border-gray-300 px-4 py-2;
  }

  .prose-custom th {
    @apply bg-gray-100 font-semibold;
  }
}

/* Article Content Styling */
.article-content {
  @apply prose-custom;
}

/* Ensure proper paragraph spacing and formatting */
.article-content > p {
  margin-top: 0.8em;
  @apply mb-8 leading-relaxed text-lg text-gray-800;
}

.article-content > p:first-of-type {
  @apply text-xl text-gray-900 font-medium leading-relaxed;
}

/* Image Styling for Food Reviews */
.article-content img {
  @apply rounded-xl shadow-xl border-2 border-gray-100 hover:shadow-2xl transition-shadow duration-300;
}

/* Figure with caption support */
.figure {
  @apply bg-white rounded-xl shadow-lg p-4 my-6 border border-gray-100;
}

.figure img {
  @apply border-0 shadow-none rounded-lg mb-3;
}

.figure .caption,
.figure p.caption {
  @apply text-sm text-gray-600 text-center italic mt-2 mb-0;
}

.figure .legend,
.figure div.legend {
  @apply text-xs text-gray-500 text-center mt-1;
}

/* Alignment classes */
.align-left {
  @apply float-left mr-6 mb-4;
}

.align-right {
  @apply float-right ml-6 mb-4;
}

.align-center {
  @apply block mx-auto;
}

/* For homepage, center all images */
.home-content .align-left,
.home-content .align-right {
  @apply float-none block mx-auto;
}

/* Code highlighting enhancements */
.highlight {
  @apply rounded-lg overflow-hidden my-6;
}

.highlight pre {
  @apply bg-gray-900 text-green-300 p-4 overflow-x-auto;
}

/* Enhanced blockquotes for reviews */
.article-content blockquote {
  @apply bg-gradient-to-r from-primary-50 to-blue-50 border-l-4 border-primary-500 pl-6 pr-4 py-4 my-6 rounded-r-lg relative;
}

.article-content blockquote::before {
  content: '"';
  @apply absolute -top-2 -left-1 text-6xl text-primary-300 font-serif leading-none;
}

/* Table styling for reviews */
.article-content table {
  @apply w-full bg-white rounded-lg shadow-lg border border-gray-200 my-6 overflow-hidden;
}

.article-content th {
  @apply bg-gradient-to-r from-primary-500 to-primary-600 text-white px-6 py-3 text-left font-semibold;
}

.article-content td {
  @apply px-6 py-4 border-b border-gray-100;
}

.article-content tr:hover {
  @apply bg-gray-50;
}

/* Lists styling */
.article-content ul li {
  @apply relative pl-6;
}

.article-content ul li::before {
  content: "-> ";
  @apply absolute left-0 top-0;
}

.article-content ol li {
  @apply pl-2;
}

/* Links in article content */
.article-content a:not(.no-underline) {
  @apply text-green-600 hover:text-green-700 underline decoration-green-300 hover:decoration-green-500 underline-offset-2 transition-all duration-200;
  color: rgb(22, 163, 74) !important; /* green-600 to match site theme */
}

.article-content a:not(.no-underline):hover {
  color: rgb(21, 128, 61) !important; /* green-700 for hover */
}

/* Strong and emphasis */
.article-content strong {
  @apply font-bold text-gray-900;
}

.article-content em {
  @apply italic text-gray-700;
}

/* Review rating components */
.rating-stars {
  @apply flex items-center space-x-1;
}

.rating-star {
  @apply text-yellow-400 text-lg;
}

.rating-star.empty {
  @apply text-gray-300;
}

/* Custom components for food reviews */
.review-highlight {
  @apply bg-gradient-to-r from-yellow-50 to-orange-50 border-l-4 border-yellow-400 pl-4 py-3 my-4 rounded-r-lg;
}

.price-tag {
  @apply inline-block bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-medium;
}

.cuisine-type {
  @apply inline-block bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm font-medium;
}

/* Print styles */
@media print {
  body {
    @apply bg-white text-black;
  }

  .no-print,
  header,
  footer,
  .social-share,
  .comment-section {
    @apply hidden;
  }

  .article-content {
    @apply text-black;
  }

  .article-content a {
    @apply text-black no-underline;
  }

  .article-content a::after {
    content: " (" attr(href) ")";
    @apply text-xs;
  }

  img {
    @apply grayscale;
  }

  .bg-gradient-to-r,
  .bg-gradient-to-br {
    @apply bg-white;
  }

  .shadow-xl,
  .shadow-lg {
    @apply shadow-none;
  }
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .text-gray-600 {
    @apply text-black;
  }

  .text-gray-500 {
    @apply text-gray-800;
  }

  .bg-gray-50 {
    @apply bg-white;
  }

  .border-gray-100 {
    @apply border-black;
  }
}

/* Focus styles for better keyboard navigation */
button:focus,
a:focus,
input:focus,
textarea:focus {
  @apply outline-none ring-2 ring-primary-500 ring-offset-2;
}

/* Custom scrollbar for webkit browsers */
::-webkit-scrollbar {
  @apply w-2;
}

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

::-webkit-scrollbar-thumb {
  @apply bg-primary-400 rounded-full;
}

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

/* Loading animations */
.loading {
  @apply animate-pulse;
}

/* Selection styling */
::selection {
  @apply bg-primary-200 text-primary-900;
}

::-moz-selection {
  @apply bg-primary-200 text-primary-900;
}

/* Additional responsive typography */
@media (max-width: 640px) {
  .article-content {
    @apply text-base;
  }

  .article-content h1 {
    @apply text-2xl;
  }

  .article-content h2 {
    @apply text-xl;
  }

  .article-content h3 {
    @apply text-lg;
  }
}

/* Dark mode support (future enhancement) */
@media (prefers-color-scheme: dark) {
  /* Theme will be light-only for now, but structure is ready for dark mode */
}