/* =========================================
   static/css/post.css
   Article page specific layout and Notion blocks
   ========================================= */

/* Reading width constraint */
/* We enforce a strong max-width for the main prose area */
.post-content.prose {
  max-width: 740px !important;
}

@media (max-width: 1023px) {
  /* On mobile allow code blocks to breathe horizontally */
  .post-content.prose {
    padding-left: 0;
    padding-right: 0;
  }
}

/* Typography Enhancements */
.post-content p, .post-content li {
  line-height: 1.8;
  font-size: 1.125rem; /* ~18px */
  margin-bottom: 1.5em;
}

/* Headings depth */
.post-content h1, .post-content h2, .post-content h3 {
  margin-top: 2em;
  margin-bottom: 1em;
  scroll-margin-top: 100px; /* Offset for sticky header if any */
}

/* Third-level list: square bullets */
ul ul ul {
  list-style-type: square !important;
}

/* Todo checkbox styling */
.todo-checkbox {
  cursor: pointer;
  flex-shrink: 0;
}

/* Notion callouts and toggles */
.notion-toggle summary {
  list-style: none;
}
.notion-toggle summary::-webkit-details-marker {
  display: none;
}
.notion-toggle .toggle-arrow {
  display: inline-block;
  transition: transform 0.2s;
  font-size: 0.75rem;
}
.notion-toggle[open] .toggle-arrow {
  transform: rotate(90deg);
}

.notion-callout[data-callout-color="gray_background"] { background-color: rgba(156, 163, 175, 0.15); border-left-color: #9ca3af; }
.notion-callout[data-callout-color="brown_background"] { background-color: rgba(217, 119, 6, 0.15); border-left-color: #d97706; }
.notion-callout[data-callout-color="orange_background"] { background-color: rgba(234, 88, 12, 0.15); border-left-color: #fb923c; }
.notion-callout[data-callout-color="yellow_background"] { background-color: rgba(202, 138, 4, 0.15); border-left-color: #fbbf24; }
.notion-callout[data-callout-color="green_background"] { background-color: rgba(22, 163, 74, 0.15); border-left-color: #4ade80; }
.notion-callout[data-callout-color="blue_background"] { background-color: rgba(37, 99, 235, 0.15); border-left-color: #60a5fa; }
.notion-callout[data-callout-color="purple_background"] { background-color: rgba(147, 51, 234, 0.15); border-left-color: #c084fc; }
.notion-callout[data-callout-color="pink_background"] { background-color: rgba(219, 39, 119, 0.15); border-left-color: #f472b6; }
.notion-callout[data-callout-color="red_background"] { background-color: rgba(220, 38, 38, 0.15); border-left-color: #f87171; }

.notion-text[data-notion-color="gray"] { color: #9ca3af; }
.notion-text[data-notion-color="brown"] { color: #d97706; }
.notion-text[data-notion-color="orange"] { color: #fb923c; }
.notion-text[data-notion-color="yellow"] { color: #fbbf24; }
.notion-text[data-notion-color="green"] { color: #4ade80; }
.notion-text[data-notion-color="blue"] { color: #60a5fa; }
.notion-text[data-notion-color="purple"] { color: #c084fc; }
.notion-text[data-notion-color="pink"] { color: #f472b6; }
.notion-text[data-notion-color="red"] { color: #f87171; }

.notion-text[data-notion-color="gray-bg"] { background-color: rgba(107, 114, 128, 0.2); padding: 2px 6px; border-radius: 3px; }
.notion-text[data-notion-color="brown-bg"] { background-color: rgba(217, 119, 6, 0.2); padding: 2px 6px; border-radius: 3px; }
.notion-text[data-notion-color="orange-bg"] { background-color: rgba(251, 146, 60, 0.2); padding: 2px 6px; border-radius: 3px; }
.notion-text[data-notion-color="yellow-bg"] { background-color: rgba(251, 191, 36, 0.2); padding: 2px 6px; border-radius: 3px; }
.notion-text[data-notion-color="green-bg"] { background-color: rgba(74, 222, 128, 0.2); padding: 2px 6px; border-radius: 3px; }
.notion-text[data-notion-color="blue-bg"] { background-color: rgba(96, 165, 250, 0.2); padding: 2px 6px; border-radius: 3px; }
.notion-text[data-notion-color="purple-bg"] { background-color: rgba(192, 132, 252, 0.2); padding: 2px 6px; border-radius: 3px; }
.notion-text[data-notion-color="pink-bg"] { background-color: rgba(244, 114, 182, 0.2); padding: 2px 6px; border-radius: 3px; }
.notion-text[data-notion-color="red-bg"] { background-color: rgba(248, 113, 113, 0.2); color: #fca5a5; padding: 2px 6px; border-radius: 3px; }