/* ========================================
   NOTION BLOG STYLING FOR GUIDES
   ======================================== */

/* Comprehensive prose styling for guide content */
.guide-prose {
  @apply text-base text-notion-text-primary;
  line-height: 1.6;
  max-width: 100%;
}

/* Headings with Notion typography scale */
.guide-prose h1 {
  @apply text-4xl font-bold text-notion-text-primary mt-8 mb-4;
  line-height: 1.2;
  letter-spacing: -0.03em;
}

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

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

.guide-prose h4 {
  @apply text-xl font-semibold text-notion-text-primary mt-5 mb-3;
  line-height: 1.4;
  letter-spacing: -0.01em;
}

.guide-prose h5 {
  @apply text-lg font-medium text-notion-text-primary mt-4 mb-2;
  line-height: 1.5;
}

.guide-prose h6 {
  @apply text-base font-medium text-notion-text-primary mt-4 mb-2;
  line-height: 1.5;
}

/* Paragraphs */
.guide-prose p {
  @apply mb-5 text-notion-text-primary;
  line-height: 1.75;
}

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

.guide-prose a:hover {
  @apply text-notion-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-notion-text-primary;
  line-height: 1.7;
}

.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-notion-blue bg-notion-blue-bg pl-5 py-3 my-6 italic text-notion-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-notion-bg-secondary px-1.5 py-0.5 rounded;
  @apply text-notion-text-primary;
}

.guide-prose pre {
  @apply bg-notion-bg-secondary border border-notion-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-notion-border my-8;
}

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

.guide-prose em {
  @apply italic text-notion-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-6 overflow-x-auto -mx-6 px-6 md:mx-0 md:px-0;
}

.guide-prose table {
  @apply w-full border-collapse;
  min-width: 640px;
}

.guide-prose th {
  @apply border border-notion-border bg-notion-bg-secondary px-4 py-2 text-left font-semibold text-notion-text-primary;
}

.guide-prose td {
  @apply border border-notion-border px-4 py-2 text-notion-text-primary;
}

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

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

.guide-prose .callout-error {
  @apply bg-notion-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-notion-blue bg-notion-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.notion-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-notion-border pl-3;
}

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

nav.toc-nav a.toc-active {
  @apply text-notion-blue font-semibold;
  border-left: 2px solid theme('colors.notion-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-notion-text-primary leading-relaxed;
}

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

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

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

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

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

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

.callout-panel--tip .callout-panel__label {
  @apply text-notion-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%);
}