/* ========================================
   SMOL LAUNCH BLOG STYLING FOR GUIDES
   ======================================== */

/* Comprehensive prose styling for guide content */
.guide-prose {
  @apply text-base text-sl-text-primary;
  line-height: 1.7;
  letter-spacing: 0;
  max-width: 100%;
}

/* Headings with the Smol Launch typography scale */
.guide-prose h1 {
  @apply text-3xl font-bold text-sl-text-primary mt-8 mb-4;
  line-height: 1.2;
  letter-spacing: 0;
}

.guide-prose h2 {
  @apply text-2xl font-bold text-sl-text-primary mt-10 mb-4 pt-8 border-t border-sl-border;
  line-height: 1.3;
  letter-spacing: 0;
}

.guide-prose h3 {
  @apply text-xl font-semibold text-sl-text-primary mt-6 mb-3;
  line-height: 1.4;
  letter-spacing: 0;
}

.guide-prose h4 {
  @apply text-lg font-semibold text-sl-text-primary mt-5 mb-3;
  line-height: 1.4;
  letter-spacing: 0;
}

.guide-prose h5 {
  @apply text-base font-medium text-sl-text-primary mt-4 mb-2;
  line-height: 1.5;
  letter-spacing: 0;
}

.guide-prose h6 {
  @apply text-sm font-semibold text-sl-text-primary mt-4 mb-2 uppercase tracking-wide;
  line-height: 1.5;
}

/* Paragraphs */
.guide-prose p {
  @apply mb-5 text-sl-text-primary;
  line-height: 1.72;
  text-wrap: pretty;
}

/* Links with Smol Launch blue */
.guide-prose a {
  @apply text-sl-blue underline decoration-sl-blue/40 hover:decoration-sl-blue;
  transition: text-decoration-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.guide-prose a:hover {
  @apply text-sl-blue;
}

/* Lists */
.guide-prose ul,
.guide-prose ol {
  @apply mb-4 pl-6;
}

.guide-prose ul {
  list-style-type: disc;
}

.guide-prose ol {
  list-style-type: decimal;
}

.guide-prose li {
  @apply mb-3 text-sl-text-primary;
  line-height: 1.7;
  text-wrap: pretty;
}

.guide-prose li::marker {
  color: theme('colors.sl-blue');
  font-weight: 600;
}

.guide-prose li > p {
  @apply mb-2;
}

.guide-prose li > ul,
.guide-prose li > ol {
  @apply mt-2 mb-0;
}

/* Blockquotes */
.guide-prose blockquote {
  @apply border-l-4 border-sl-blue bg-sl-blue-bg pl-5 py-3 my-6 italic text-sl-text-primary rounded-r;
}

.guide-prose blockquote p {
  @apply mb-2;
}

.guide-prose blockquote p:last-child {
  @apply mb-0;
}

/* Code blocks */
.guide-prose code {
  @apply font-mono text-sm bg-sl-bg-secondary px-1.5 py-0.5 rounded;
  @apply text-sl-text-primary;
}

.guide-prose pre {
  @apply bg-sl-bg-secondary border border-sl-border rounded-lg p-4 my-6 overflow-x-auto;
}

.guide-prose pre code {
  @apply bg-transparent p-0 text-sm;
  display: block;
  overflow-x: auto;
}

/* Horizontal rules */
.guide-prose hr {
  @apply border-t border-sl-border my-8;
}

/* Strong and emphasis */
.guide-prose strong {
  @apply font-semibold text-sl-text-primary;
}

.guide-prose em {
  @apply italic text-sl-text-primary;
}

/* Images */
.guide-prose img {
  @apply rounded-lg my-6 max-w-full;
}

/* Tables */
.guide-prose {
  overflow-x: clip; /* prevents the negative-margin table wrapper from pushing body width past viewport (which would auto-shrink the layout and hide fixed-position UI like the share pill) */
}

.guide-prose .guide-table-wrapper {
  @apply my-8 overflow-x-auto -mx-4 px-4 md:mx-0 md:px-0;
}

.guide-prose table {
  @apply w-full text-sm;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 640px;
}

.guide-prose th {
  @apply border-t border-b border-sl-border bg-sl-bg-secondary px-4 py-3 text-left font-semibold text-sl-text-primary align-top;
}

.guide-prose td {
  @apply border-b border-sl-border px-4 py-3 text-sl-text-primary align-top;
  line-height: 1.55;
}

.guide-prose th:first-child,
.guide-prose td:first-child {
  @apply border-l border-sl-border;
}

.guide-prose th:last-child,
.guide-prose td:last-child {
  @apply border-r border-sl-border;
}

.guide-prose tbody tr:nth-child(even) td {
  background-color: theme('colors.sl-bg-secondary');
}

/* Shared scan tables for /compare, /alternatives, and /best-of pages */
.pseo-summary-section {
  @apply mb-10;
}

/* Mirrors .text-eyebrow (application.css). Tailwind v4 cannot @apply a
   component class, so the 11px / 600 / uppercase / 0.18em recipe is
   re-spelled here; keep both in step. */
.pseo-eyebrow {
  @apply text-2xs font-semibold uppercase text-sl-text-tertiary mb-2;
  letter-spacing: 0.18em;
}

.pseo-section-heading {
  @apply text-xl font-bold text-sl-text-primary;
  line-height: 1.3;
  letter-spacing: 0;
}

.pseo-section-description {
  @apply mt-2 text-sm text-sl-text-secondary;
  line-height: 1.6;
}

/* CSS-only scroll shadow. The two `local` layers ride the scrolled content and
   mask the two `scroll` shadows when the table is at an edge, so the shadow is
   visible only while there is more to scroll — and never when the table fits.
   No JavaScript, and it self-hides at wide viewports. */
.pseo-table-wrap {
  @apply overflow-x-auto rounded-lg border border-sl-border bg-sl-bg-primary;
  background-image:
    linear-gradient(to right, var(--sl-bg-primary) 30%, transparent),
    linear-gradient(to left, var(--sl-bg-primary) 30%, transparent),
    linear-gradient(to right, color-mix(in srgb, var(--sl-text-primary) 14%, transparent), transparent),
    linear-gradient(to left, color-mix(in srgb, var(--sl-text-primary) 14%, transparent), transparent);
  background-position: left center, right center, left center, right center;
  background-size: 36px 100%, 36px 100%, 12px 100%, 12px 100%;
  background-repeat: no-repeat;
  background-attachment: local, local, scroll, scroll;
}

.pseo-table-wrap:focus-visible {
  @apply outline-2 outline-offset-2 outline-sl-blue;
}

.pseo-summary-table {
  @apply w-full text-sm;
  border-collapse: separate;
  border-spacing: 0;
  /* Four columns, not five: the rank moved into the name cell as a chip.
     640px fits the 696px article column at 1280+. Between 1024 and 1280 the
     column is 547px, so the scroll shadow above carries that case. */
  min-width: 640px;
}

.pseo-summary-table th {
  @apply bg-sl-bg-secondary px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-sl-text-tertiary align-bottom border-b border-sl-border;
}

.pseo-summary-table td {
  @apply px-4 py-4 text-sl-text-secondary align-top border-b border-sl-border;
  line-height: 1.5;
}

.pseo-summary-table tbody tr:last-child td {
  @apply border-b-0;
}

.pseo-summary-table tbody tr:nth-child(even) td {
  background-color: theme('colors.sl-bg-secondary');
}

/* Still used by _pseo_guide_overview's "Step" column, which is a real ordered
   sequence and keeps its own column. The comparison/alternative/listicle rank
   moved into the name cell as a .rank-chip. */
.pseo-rank-cell {
  @apply font-bold text-sl-text-primary tabular-nums;
}

.pseo-table-link {
  @apply font-semibold text-sl-text-primary hover:text-sl-blue hover:underline;
}

.pseo-table-badge {
  @apply ml-2 inline-flex rounded px-2 py-0.5 font-semibold uppercase tracking-wide text-sl-blue bg-sl-blue-bg;
  font-size: 0.625rem;
  line-height: 0.875rem;
}

.pseo-guide-overview .pseo-summary-table {
  min-width: 600px;
}

/* Callout boxes (from GuideRenderer) */
.guide-prose .callout-tip {
  @apply bg-sl-blue-bg p-4 my-6 rounded-r;
}

.guide-prose .callout-warning {
  @apply bg-sl-yellow-bg p-4 my-6 rounded-r;
}

.guide-prose .callout-error {
  @apply bg-sl-red-bg p-4 my-6 rounded-r;
}

/* Inner blocks keep normal .guide-prose spacing; drop trailing margin so the
   box hugs its last child (single-paragraph callouts are unchanged). */
.guide-prose .callout-tip > :last-child,
.guide-prose .callout-warning > :last-child,
.guide-prose .callout-error > :last-child {
  @apply mb-0;
}


/* Pull quote for article show page */
.post-pull-quote {
  @apply border-l-4 border-sl-blue bg-sl-blue-bg px-5 py-4 my-8 rounded-r-lg;
  font-size: 1.125rem;
  line-height: 1.7;
  font-style: italic;
  color: theme('colors.sl-text-primary');
}

/* Table of contents (SeoContentLayoutComponent left column + mobile accordion) */
nav.toc-nav {
  font-size: 0.8125rem;
}

nav.toc-nav ul {
  @apply space-y-2 border-l border-sl-border pl-3;
}

nav.toc-nav a {
  @apply block py-1 text-sl-text-tertiary hover:text-sl-blue transition-colors leading-snug;
}

nav.toc-nav a.toc-active {
  @apply text-sl-blue font-semibold;
  border-left: 2px solid theme('colors.sl-blue');
  margin-left: -0.78125rem; /* -pl-3 - 1px to align with the parent ul border */
  padding-left: 0.6875rem;
}

/* Scroll-margin so anchor jumps clear the sticky header (~5.25rem) */
.guide-prose h2,
.guide-prose h3,
#article-body h2,
#article-body h3 {
  scroll-margin-top: 6rem;
}

/* Shared callout (verdict / quick-answer / tip) used by /compare, /alternatives, /best-of */
.callout-panel {
  @apply rounded-r-lg p-5 my-8;
  border-left-width: 4px;
}

.callout-panel__label {
  @apply text-xs font-semibold uppercase tracking-wide mb-2;
}

.callout-panel__body {
  @apply text-base text-sl-text-primary leading-relaxed;
}

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

.callout-panel--verdict {
  @apply bg-sl-blue-bg;
  border-left-color: theme('colors.sl-blue');
}

.callout-panel--verdict .callout-panel__label {
  @apply text-sl-blue;
}

.callout-panel--quick_answer {
  @apply bg-sl-blue-bg;
  border-left-color: theme('colors.sl-blue');
}

.callout-panel--quick_answer .callout-panel__label {
  @apply text-sl-blue;
}

.callout-panel--tip {
  background-color: theme('colors.sl-bg-secondary');
  border-left-color: theme('colors.sl-text-tertiary');
}

.callout-panel--tip .callout-panel__label {
  @apply text-sl-text-secondary;
}

/* Gradient placeholder for related-content card images (blog index, related posts) */
.related-card-image--placeholder {
  @apply w-full;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #E0E7FF 0%, #C7D2FE 100%);
}

.related-card-image--placeholder[data-category="news"] {
  background: linear-gradient(135deg, #FEE2E2 0%, #FCA5A5 100%);
}

.related-card-image--placeholder[data-category="launches"] {
  background: linear-gradient(135deg, #DBEAFE 0%, #93C5FD 100%);
}

.related-card-image--placeholder[data-category="tools"] {
  background: linear-gradient(135deg, #D1FAE5 0%, #6EE7B7 100%);
}

.related-card-image--placeholder[data-category="growth"] {
  background: linear-gradient(135deg, #FEF3C7 0%, #FCD34D 100%);
}

.related-card-image--placeholder[data-category="founder-stories"] {
  background: linear-gradient(135deg, #FCE7F3 0%, #F9A8D4 100%);
}