@import "tailwindcss";

@plugin "@tailwindcss/typography";

@layer components {
  .prose-styles {
    @apply hover:prose-a:text-black prose  prose-blockquote:border-l-black prose-blockquote:text-neutral-600 prose-code:text-black prose-headings:text-black   text-neutral-600 prose-pre:rounded-xl prose-pre:p-4 max-w-none  prose-headings:font-medium prose-pre:normal-case prose-pre:bg-white;
    /* Base layout classes */
    @apply prose max-w-3xl pt-0 mx-auto;
  }
  .simple-prose-styles {
    @apply prose text-xs prose-headings:text-xs  prose-pre:normal-case;
  }  
}
@layer base {
  a {
    @apply text-blue-400 no-underline transition-colors;
  }
  a:hover {
    @apply underline;
  }
}

@layer base {
  table {
    @apply min-w-full border-collapse;
  }
  table thead {
    @apply bg-gray-200;
  }
  table th {
    @apply py-3 px-6 text-left text-xs font-medium text-gray-600 uppercase tracking-wider;
  }
  table td {
    @apply py-4 px-6 border-b border-gray-200;
  }
  table tbody tr {
    @apply transition-colors;
  }
  table tbody tr:nth-child(odd) {
    @apply bg-white;
  }
  table tbody tr:nth-child(even) {
    @apply bg-gray-50;
  }
  table tbody tr:nth-child(odd):hover {
    @apply bg-orange-50;
  }
  table tbody tr:nth-child(even):hover {
    @apply bg-orange-100;
  }
}
@layer base {
  .astro-imagetools-img {
    @apply min-w-full border-collapse rounded-lg overflow-hidden;
    background-image: none !important;
    object-fit: contain;
  }
  .lightbox-main{
    background-image: none !important;
  }
}
@layer base {
  .specs-table {
    @apply min-w-full border-collapse rounded-lg overflow-hidden;
  }
  .specs-table thead {
    @apply bg-gray-200;
  }
  .specs-table th {
    @apply py-3 px-6 text-left text-xs text-gray-600 uppercase tracking-wider;
  }
  .specs-table td {
    @apply py-4 px-6 border-b border-gray-200;
  }
  .specs-table tbody tr {
    @apply transition-colors;
  }
  .specs-table tbody tr:nth-child(odd) {
    @apply bg-white;
  }
  .specs-table tbody tr:nth-child(even) {
    @apply bg-gray-50;
  }
  .specs-table tbody tr:nth-child(odd):hover {
    @apply bg-orange-50;
  }
  .specs-table tbody tr:nth-child(even):hover {
    @apply bg-orange-100;
  }
  /* Bold the first column cells */
  .specs-table th:first-child,
  .specs-table td:first-child {
    @apply font-semibold;
  }
}

@layer components {
  .table-default {
    @apply min-w-full border-collapse shadow-lg;
  }
  .table-default thead {
    @apply bg-gray-200;
  }
  .table-default th {
    @apply py-3 px-6 text-left text-xs font-medium text-gray-600 uppercase tracking-wider;
  }
  .table-default td {
    @apply py-4 px-6 border-b border-gray-200;
  }
  .table-default tbody tr {
    @apply transition-colors;
  }
  /* Alternating row colors */
  .table-default tbody tr:nth-child(odd) {
    @apply bg-white;
  }
  .table-default tbody tr:nth-child(even) {
    @apply bg-gray-50;
  }
  /* Hover effects with orange tint */
  .table-default tbody tr:nth-child(odd):hover {
    @apply bg-orange-50;
  }
  .table-default tbody tr:nth-child(even):hover {
    @apply bg-orange-100;
  }
}


@theme { 
  /* Typography*/
  --font-sans: "Inter", sans-serif;
  --font-mono: "IBM PLex Mono", monospace;
  --text-xs:1rem;
  /* Colors */
  --color-orange-50: hsl(22, 100%, 96%);
  --color-orange-100: hsl(25, 100%, 91%);
  --color-orange-200: hsl(22, 100%, 82%);
  --color-orange-300: hsl(20, 100%, 71%);
  --color-orange-400: hsl(16, 100%, 60%);
  --color-orange-500: hsl(14, 100%, 52%);
  --color-orange-600: hsl(9, 100%, 50%);
  --color-orange-700: hsl(6, 98%, 40%);
  --color-orange-800: hsl(4, 87%, 34%);
  --color-orange-900: hsl(4, 83%, 28%);
  --color-orange-950: hsl(1, 89%, 15%);
  /* colors */
  --color-white: #fafafa;
  --color-black: #12161d;
}

@supports (font-variation-settings: normal) {
  :root {
    font-family: InterVariable, sans-serif;
  }
}
:root {
  /* Typography*/
  font-family: Inter, sans-serif;
  font-feature-settings: "liga" 1, "calt" 1,
    /* Contextual Alternates */ "dlig" 1, /* Discretionary Ligatures */ "ss07" 1,
    /* fSquare punctuation */ "ss08" 1, /* Square quotes */ "zero" 1,
    /* Slashed zero */ "tnum" 1, /* Tabular numbers */ "cv03" 1,
    /* Open six */ "cv04" 1, /* Open nine */ "cv01" 1,
    /* Alternate one */ "cv09", /* Flat-top three */ "cv02" 1; /* Open 4 */
  /* style code blocks*/
  
}









.markdown-content {
  @apply prose dark:prose-invert max-w-none font-mono;
}

/* Headings (Scaled Down & Responsive) */
.markdown-content h1 {
  @apply text-xl font-medium mt-5 mb-3 md:mt-6 md:mb-4;
}
.markdown-content h2 {
  @apply text-xs font-medium mt-4 mb-2 md:mt-5 md:mb-3;
}
.markdown-content h3 {
  @apply text-sm font-medium mt-3 mb-1 md:mt-4 md:mb-3;
}
.markdown-content h4 {
  @apply text-neutral-500 font-medium mt-3 mb-1 md:mt-4 md:mb-2;
}
.markdown-content h5 {
  @apply text-sm font-medium mt-2 mb-1 md:mt-3 md:mb-2;
}
.markdown-content h6 {
  @apply text-xs font-medium mt-2 mb-1 uppercase md:mt-3 md:mb-2;
}

/* Paragraphs */
.markdown-content p {
  @apply text-neutral-500 leading-relaxed mb-3 md:mb-4;
}

/* Lists */
.markdown-content ul {
  @apply list-disc list-inside ml-0 pl-0 md:ml-5;
}
.markdown-content li {
  @apply text-neutral-500 leading-relaxed;
}
.markdown-content ol {
  @apply list-decimal list-inside ml-3 md:ml-5;
}

/* Code Blocks */
.markdown-content pre {
  @apply bg-gray-900 text-white p-2 rounded-md overflow-x-auto md:p-3;
}
.markdown-content code {
  @apply bg-gray-800 text-xs p-1 rounded-md md:text-sm;
}

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

/* Blockquotes */
.markdown-content blockquote {
  @apply border-l-4 border-gray-500 pl-3 italic text-gray-600 md:pl-4;
}