@import "tailwindcss";

@layer components {
  .button {
    @apply px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 hover:border-gray-400 transition-colors;
  }
}

/* Markdown Content Styling */
.markdown {
  @apply text-gray-900 leading-relaxed;
}

/* Headers */
.markdown h1 {
  @apply text-3xl font-bold text-gray-900 mt-8 mb-4 pb-2 border-b border-gray-200;
}

.markdown h2 {
  @apply text-2xl font-semibold text-gray-900 mt-6 mb-3 pb-1 border-b border-gray-100;
}

.markdown h3 {
  @apply text-xl font-medium text-gray-900 mt-5 mb-2;
}

.markdown h4 {
  @apply text-lg font-medium text-gray-800 mt-4 mb-2;
}

.markdown h5 {
  @apply text-base font-medium text-gray-800 mt-3 mb-1;
}

.markdown h6 {
  @apply text-sm font-medium text-gray-700 mt-2 mb-1;
}

/* First header has no top margin */
.markdown h1:first-child,
.markdown h2:first-child,
.markdown h3:first-child,
.markdown h4:first-child,
.markdown h5:first-child,
.markdown h6:first-child {
  @apply mt-0;
}

/* Paragraphs */
.markdown p {
  @apply mb-4 text-gray-700;
}

.markdown p:last-child {
  @apply mb-0;
}

/* Lists */
.markdown ul {
  @apply list-disc list-inside mb-4 ml-4 space-y-1;
}

.markdown ol {
  @apply list-decimal list-inside mb-4 ml-4 space-y-1;
}

.markdown li {
  @apply text-gray-700;
}

.markdown li > ul,
.markdown li > ol {
  @apply mt-1 mb-0 ml-4;
}

/* Links */
.markdown a {
  @apply text-blue-600 hover:text-blue-800 underline;
}

/* Emphasis */
.markdown strong {
  @apply font-semibold text-gray-900;
}

.markdown em {
  @apply italic;
}

.markdown del {
  @apply line-through text-gray-500;
}

/* Code */
.markdown code {
  @apply bg-gray-100 text-red-600 px-1 py-0.5 rounded text-sm font-mono;
}

.markdown pre {
  @apply bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto mb-4;
}

.markdown pre code {
  @apply bg-transparent text-gray-100 px-0 py-0;
}

/* Blockquotes */
.markdown blockquote {
  @apply border-l-4 border-blue-200 pl-4 py-2 mb-4 bg-blue-50 italic text-gray-700;
}

.markdown blockquote p {
  @apply mb-0;
}

/* Tables */
.markdown table {
  @apply w-full border-collapse border border-gray-300 mb-4;
}

.markdown th {
  @apply bg-gray-50 border border-gray-300 px-4 py-2 font-semibold text-left text-gray-900;
}

.markdown td {
  @apply border border-gray-300 px-4 py-2 text-gray-700;
}

.markdown tr:nth-child(even) {
  @apply bg-gray-50;
}

/* Horizontal rules */
.markdown hr {
  @apply border-0 border-t border-gray-300 my-6;
}

/* Images */
.markdown img {
  @apply max-w-full h-auto rounded-lg shadow-sm mb-4;
}

/* Footnotes */
.markdown sup {
  @apply text-xs text-blue-600;
}

/* Task lists (if supported by renderer) */
.markdown input[type="checkbox"] {
  @apply mr-2;
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .markdown h1 {
    @apply text-2xl;
  }
  
  .markdown h2 {
    @apply text-xl;
  }
  
  .markdown h3 {
    @apply text-lg;
  }
  
  .markdown pre {
    @apply text-sm;
  }
  
  .markdown table {
    @apply text-sm;
  }
  
  .markdown th,
  .markdown td {
    @apply px-2 py-1;
  }
}