/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

@custom-variant dark (&:where(.dark, .dark *));

/* ============================================================
   RailsIran Guide Content Styles
   ============================================================ */

/* Wrapper class (replaces .trix-content) */
.guide-content {
  @apply text-gray-700 leading-relaxed;
}

/* Headings */
.guide-content h1 {
  @apply text-3xl font-bold text-gray-800 mt-8 mb-4;
}
.guide-content h2 {
  @apply text-2xl font-bold text-gray-800 mt-6 mb-3;
}
.guide-content h3 {
  @apply text-xl font-semibold text-gray-800 mt-4 mb-2;
}
.guide-content h4 {
  @apply text-lg font-medium text-gray-800 mt-3 mb-2;
}

/* Paragraphs */
.guide-content p {
  @apply my-3;
}

/* Links */
.guide-content a {
  @apply text-red-600 underline hover:no-underline;
}

/* Lists */
.guide-content ul {
  @apply list-disc ml-6 my-3;
}
.guide-content ol {
  @apply list-decimal ml-6 my-3;
}
.guide-content li {
  @apply my-1;
}

/* Strong / emphasis */
.guide-content strong {
  @apply font-semibold;
}
.guide-content em {
  @apply italic;
}

/* Blockquote */
.guide-content blockquote {
  @apply border-l-4 border-red-400 pl-4 my-4 italic text-gray-600;
}

/* Images */
.guide-content img {
  @apply rounded-lg my-4;
}

/* Horizontal rule */
.guide-content hr {
  @apply my-8 border-gray-200;
}

/* ============================================================
   Tables
   ============================================================ */
.guide-content table {
  @apply w-full border-collapse border my-4;
}
.guide-content th {
  @apply border px-4 py-2 text-left font-semibold bg-gray-50;
}
.guide-content td {
  @apply border px-4 py-2;
}

/* ============================================================
   Inline Code
   ============================================================ */
.guide-content :not(pre) > code {
  @apply bg-gray-100 text-red-600 px-1.5 py-0.5 rounded-md text-sm font-mono border border-gray-200;
}

/* ============================================================
   Code Blocks (dark cards, rounded, shadow)
   ============================================================ */
.guide-content pre.code-block {
  display: block;
  width: 100%;
  background-color: #111827;       /* gray-900 */
  color: #e5e7eb;                 /* gray-200 */
  border: 1px solid #1f2937;      /* gray-800 */
  border-radius: 0.75rem;         /* rounded-xl */
  padding: 1.25rem;               /* p-5 */
  margin: 2rem 0.5rem;            /* my-8 mx-2 */
  overflow-x: auto;
  direction: ltr;
  unicode-bidi: isolate;
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -2px rgba(0, 0, 0, 0.1);
  white-space: pre;
}

.guide-content pre.code-block code {
  display: block;
  background: transparent;
  color: inherit;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 0;
  font-family: "SF Mono", "Fira Code", "Fira Mono", Menlo, Consolas, monospace;
  font-size: 0.875rem;
  line-height: 1.625;
  white-space: pre;
}

/* ============================================================
   Syntax Highlighting (works with span classes)
   ============================================================ */
.guide-content .highlight-keyword { color: #c678dd; font-weight: 600; }  /* purple */
.guide-content .highlight-string  { color: #98c379; }                    /* green */
.guide-content .highlight-comment { color: #5c6370; font-style: italic; }/* gray */
.guide-content .highlight-number  { color: #d19a66; }                    /* amber */
.guide-content .highlight-function{ color: #61afef; }                    /* blue */
.guide-content .highlight-regex   { color: #e06c75; }                    /* red */
.guide-content .highlight-symbol  { color: #56b6c2; }                    /* cyan */

/* Force LTR on all code */
.guide-content code,
.guide-content pre,
.guide-content pre code {
  direction: ltr;
  unicode-bidi: isolate;
}