/* =================================================================
   Blog post (blogs/show.php)
   Load AFTER ../css/index.css and css/blog.css.
   blog.css gives the hero, the contents box and the article sheet;
   this file styles what the blog editor produces inside a post
   (fonts, code, images, tables, math, video) and the page extras.
   ================================================================= */

/* -----------------------------------------------------------------
   LAYOUT — one column when the post has no headings to list
   ----------------------------------------------------------------- */
.article-layout.no-toc {
  grid-template-columns: minmax(0, 1fr);
  max-width: 900px;
}

.article-layout.no-toc .article-body {
  max-width: none;
}

.article-body.post-body {
  max-width: 820px;
}

/* Sub-headings in the contents box */
.toc-list li.is-sub a {
  padding-right: 1.5rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

/* Editor button (admins only) */
.edit-post {
  display: inline-flex !important;
  align-items: center;
  gap: 0.5rem;
  max-width: none !important;
  margin-top: 1.25rem;
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius-md);
  background: var(--coral);
  color: var(--white);
  font-weight: 700;
  font-size: var(--fs-sm);
  direction: ltr;
}

.edit-post:hover {
  background: #C0443B;
}

/* -----------------------------------------------------------------
   COVER IMAGE
   ----------------------------------------------------------------- */
.post-cover {
  margin: 0 0 1.75rem;
}

.post-cover img,
main .post-cover img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0;
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}

/* -----------------------------------------------------------------
   POST CONTENT (HTML from the blog editor)
   ----------------------------------------------------------------- */
.post-content {
  font-size: 1.075rem;
  line-height: 2;
  color: var(--ink);
  overflow-wrap: anywhere;
}

/* Editor wraps text in font/span/b tags: keep the site font */
.post-content font,
.post-content span,
.post-content b,
.post-content i,
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5 {
  font-family: inherit;
}

.post-content h2,
.post-content h3,
.post-content h4 {
  font-family: var(--font-display);
  color: var(--ocean);
  line-height: 1.5;
  scroll-margin-top: calc(var(--header-h) + 24px);
}

.post-content h2 {
  font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.65rem);
  margin: 2.25rem 0 0.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-soft);
}

.post-content > h2:first-child,
.post-content > *:first-child h2 {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.post-content h3 {
  font-size: 1.2rem;
  margin: 1.75rem 0 0.6rem;
}

.post-content h4 {
  font-size: 1.05rem;
  margin: 1.25rem 0 0.5rem;
}

.post-content p,
.post-content span,
.post-content font {
  line-height: 2;
}

.post-content p {
  margin-bottom: 1rem;
  text-wrap: pretty;
}

/* Highlights written with <b> */
.post-content b,
.post-content strong {
  color: var(--ocean);
  font-weight: 700;
}

.post-content a {
  color: var(--lagoon-ink);
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color var(--transition);
}

.post-content a:hover {
  color: var(--ocean);
}

.post-content ul,
.post-content ol {
  margin: 0.5rem 0 1.25rem;
  padding-right: 1.5rem;
}

.post-content li {
  margin-bottom: 0.4rem;
}

.post-content li::marker {
  color: var(--lagoon-ink);
}

.post-content blockquote {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  border-right: 4px solid var(--sand);
  border-radius: var(--radius-sm);
  background: #FFF8E8;
}

/* Images inside the post */
.post-content img,
main .post-content img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto !important;
  margin: 1.5rem auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}

.post-content figure {
  margin: 1.5rem 0;
}

.post-content figcaption {
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  margin-top: 0.5rem;
}

/* Iframes the editor embeds (videos, notebooks) */
.post-content iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 1.5rem auto;
  border: 0;
  border-radius: var(--radius);
}

.post-content hr,
.post-body > hr {
  border: 0;
  height: 1px;
  margin: 2rem 0;
  background: linear-gradient(to left, var(--mist), var(--lagoon), var(--mist));
}

/* Tables (wrapped in .table-scroll by the page script) */
.table-scroll {
  overflow-x: auto;
  margin: 1.5rem 0;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}

.post-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.post-content th,
.post-content td {
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--line-soft);
  text-align: start;
  vertical-align: top;
}

.post-content th {
  background: var(--foam);
  color: var(--deep);
  font-weight: 700;
}

.post-content tr:last-child td {
  border-bottom: 0;
}

/* Math (MathJax) — long formulas scroll instead of overflowing */
.post-content mjx-container[display="true"] {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0.5rem 0;
  direction: ltr;
}

/* -----------------------------------------------------------------
   CODE BLOCKS
   ----------------------------------------------------------------- */
.code-block {
  margin: 1.5rem 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: #0A1B2B;
  border: 1px solid #16324C;
  box-shadow: var(--shadow-1);
  direction: ltr;
}

.code-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  background: #0E2640;
  border-bottom: 1px solid #16324C;
}

.code-dots {
  display: inline-flex;
  gap: 6px;
}

.code-dots i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #2A4A68;
}

.code-dots i:first-child { background: #E5655B; }
.code-dots i:nth-child(2) { background: var(--sand); }
.code-dots i:nth-child(3) { background: #3CB878; }

#copy-code-button,
.copy-code-button {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  padding: 0.35rem 0.8rem;
  border-radius: var(--radius-sm);
  border: 1px solid #25486A;
  background: transparent;
  color: #CFE2F2;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.copy-code-button:hover {
  background: #16324C;
  color: var(--white);
}

.copy-code-button.is-copied {
  border-color: #3CB878;
  color: #7EE2A8;
}

.post-content pre {
  margin: 0;
  padding: 1rem 1.1rem;
  overflow-x: auto;
  background: transparent;
  color: #E4EFF7;
  font-family: ui-monospace, "SFMono-Regular", "Cascadia Code", Consolas, monospace;
  font-size: 0.92rem;
  line-height: 1.75;
  direction: ltr;
  text-align: left;
  white-space: pre;
  tab-size: 4;
  cursor: text;
}

/* Inline code */
.post-content :not(pre) > code {
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 0.9em;
  direction: ltr;
  unicode-bidi: isolate;
  padding: 0.1em 0.4em;
  border-radius: 6px;
  background: var(--foam);
  border: 1px solid var(--line-soft);
}

/* -----------------------------------------------------------------
   VIDEO
   ----------------------------------------------------------------- */
.video-wrapper {
  position: relative;
  aspect-ratio: 16 / 9;
  margin-top: 1rem;
  overflow: hidden;
  border-radius: var(--radius);
  background: #06253F;
  box-shadow: var(--shadow-1);
}

.video-wrapper iframe,
.video-wrapper video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  margin: 0;
}

/* -----------------------------------------------------------------
   RELATED POSTS & NOT FOUND
   ----------------------------------------------------------------- */
.related-posts {
  background: var(--foam) !important;
  border-top: 1px solid var(--line-soft);
}

.related-posts .course-info h3 a {
  color: inherit;
}

.related-posts .course-info h3 a:hover {
  color: var(--lagoon-ink);
}

.card-main-container {
  margin-top: 0;
}

.post-missing {
  max-width: 560px;
  margin: 3rem auto 4rem;
  padding: 2.5rem 1.5rem;
  text-align: center;
  border-radius: var(--radius-lg);
  background: var(--white);
  border: 1.5px dashed var(--mist);
  color: var(--ink-soft);
}

.post-missing > i {
  display: block;
  font-size: 2rem;
  margin-bottom: 0.75rem;
  color: var(--ink-faint);
}

.post-missing p {
  font-size: var(--fs-md);
}

/* -----------------------------------------------------------------
   SMALL SCREENS
   ----------------------------------------------------------------- */
@media (max-width: 560px) {
  .post-content {
    font-size: 1rem;
  }

  .post-content pre {
    font-size: 0.85rem;
  }
}