/*
 * Public site styles that Tailwind classes don't cover: the page width
 * container and the post body (.prose). Callout boxes, affiliate cards and
 * the in-body ad are in actiontext.css, shared with the admin editor.
 */

/* Page width: every public section lines up on the same column. */
.wrap {
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: 1rem;
}
@media (min-width: 640px) {
  .wrap { padding-inline: 1.5rem; }
}

/* ==========================================================================
   Post body
   ========================================================================== */

.prose {
  color: color-mix(in oklab, var(--color-base-content) 92%, transparent);
  font-size: 1.0625rem;
  line-height: 1.75;
}
@media (min-width: 768px) {
  .prose { font-size: 1.125rem; }
}
:lang(ko) .prose, :lang(ja) .prose, :lang(zh) .prose { line-height: 1.9; }

.prose p { margin-bottom: 1.25em; }

/* Trix stores paragraphs as class-less <div>s, not <p>s. :not([class]) keeps
   the callouts, cards and image rows out of this rule. */
.trix-content > div:not([class]) { margin-bottom: 1.25em; }

.prose h2,
.prose h3,
.prose h4 {
  color: var(--color-base-content);
  scroll-margin-top: 5.5rem;
}

.prose h2 {
  font-family: var(--font-display);
  font-size: 1.6em;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin-top: 2.2em;
  margin-bottom: 0.6em;
  padding-top: 0.9em;
  border-top: 1px solid var(--color-base-300);
}

.prose h3 {
  font-family: var(--font-display);
  font-size: 1.25em;
  font-weight: 600;
  line-height: 1.35;
  margin-top: 1.8em;
  margin-bottom: 0.5em;
}

.prose h4 {
  font-size: 1.05em;
  font-weight: 700;
  margin-top: 1.5em;
  margin-bottom: 0.4em;
}

:lang(ko) .prose h2, :lang(ja) .prose h2, :lang(zh) .prose h2,
:lang(ko) .prose h3, :lang(ja) .prose h3, :lang(zh) .prose h3 {
  font-weight: 700;
  letter-spacing: 0;
}

.prose a {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-color: color-mix(in oklab, var(--color-primary) 35%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  font-weight: 500;
}
.prose a:hover { text-decoration-color: var(--color-primary); }

.prose strong { font-weight: 700; color: var(--color-base-content); }

/* Lists */
.prose ul {
  list-style: none;
  margin: 1.1em 0 1.4em;
  padding: 0;
}
.prose ul li {
  position: relative;
  padding-left: 1.35em;
  margin: 0.4em 0;
}
.prose ul li::before {
  content: "";
  position: absolute;
  left: 0.15em;
  top: 0.72em;
  width: 6px;
  height: 6px;
  background: var(--color-primary);
  border-radius: 50%;
}
.prose ol {
  list-style-type: decimal;
  margin: 1.1em 0 1.4em;
  padding-left: 1.6em;
}
.prose ol li { margin: 0.4em 0; padding-left: 0.2em; }
.prose ol li::marker { color: var(--color-primary); font-weight: 700; }

/* Prerequisites list (style.md: <ul class="checklist">) */
.prose ul.checklist {
  border: 1px solid var(--color-base-300);
  border-radius: 10px;
  padding: 0.75em 1em;
}
.prose ul.checklist li { padding-left: 1.8em; }
.prose ul.checklist li::before {
  content: "✓";
  top: 0.1em;
  left: 0;
  width: 1.25em;
  height: 1.25em;
  border-radius: 4px;
  background: color-mix(in oklab, var(--color-primary) 12%, transparent);
  color: var(--color-primary);
  font-size: 0.8em;
  font-weight: 700;
  line-height: 1.25em;
  text-align: center;
}

.prose blockquote {
  border-left: 3px solid var(--color-base-300);
  border-radius: 0;
  background: none;
  padding: 0.25em 0 0.25em 1.1em;
  margin: 1.6em 0;
  color: color-mix(in oklab, var(--color-base-content) 75%, transparent);
  font-style: normal;
}
.prose blockquote p { margin: 0; }

.prose code {
  background: var(--color-base-200);
  padding: 0.12em 0.4em;
  border-radius: 4px;
  font-size: 0.875em;
}
.prose pre {
  background: #1e293b;
  color: #e2e8f0;
  padding: 1.1em 1.4em;
  border-radius: 10px;
  overflow-x: auto;
  margin: 1.6em 0;
  font-size: 0.9em;
  line-height: 1.7;
}
.prose pre code { background: none; padding: 0; color: inherit; }

/* Images and captions */
.prose img { border-radius: 10px; margin: 0; }
.prose figure,
.prose action-text-attachment { display: block; margin: 1.8em 0; }
.prose .attachment__caption,
.prose figcaption {
  margin-top: 0.6em;
  font-size: 0.8em;
  line-height: 1.5;
  color: color-mix(in oklab, var(--color-base-content) 55%, transparent);
  text-align: center;
}

.prose .post-inline-figure { width: 40%; margin: 1.5rem auto; text-align: center; }
.prose .post-inline-figure img { width: 100%; border-radius: 8px; }

.prose .image-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.5em 0; }
.prose .image-row figure { flex: 1 1 200px; min-width: 0; margin: 0; }
.prose .image-row figure img { width: 100%; height: auto; object-fit: cover; }

.prose hr {
  border: none;
  height: 1px;
  background: var(--color-base-300);
  margin: 2.5em 0;
}

/* Tables */
.prose .table-wrapper {
  overflow-x: auto;
  margin: 1.8em 0;
  border: 1px solid var(--color-base-300);
  border-radius: 10px;
  -webkit-overflow-scrolling: touch;
}
.prose table {
  width: 100%;
  border-collapse: collapse;
  border: 0;
  border-radius: 0;
  margin: 0;
  font-size: 0.9em;
}
.prose thead { background: var(--color-base-200); }
.prose th {
  padding: 0.75em 1em;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
  color: var(--color-base-content);
  border-bottom: 1px solid var(--color-base-300);
}
.prose td {
  padding: 0.75em 1em;
  border-bottom: 1px solid var(--color-base-300);
  vertical-align: top;
  line-height: 1.6;
}
.prose th:not(:last-child),
.prose td:not(:last-child) { border-right: 0; }
.prose tbody tr:last-child td { border-bottom: none; }
.prose tbody tr:nth-child(even) { background: transparent; }

/* ========================================================================== */

.scrollbar-none {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.scrollbar-none::-webkit-scrollbar {
  display: none;
}