/* Remove markdown-style # symbols from headers */
h1::before,
h2::before,
h3::before,
h4::before,
h5::before,
h6::before {
  content: '' !important;
}

/* Make link underlines thinner */
a {
  border-bottom: 1px solid var(--maincolor) !important;
}

/* Add spacing between research/curriculum list items */
.body ul li {
  margin-bottom: 1rem !important;
}

/* Responsive — stack on mobile */
@media (max-width: 768px) {
  div[style*="grid-template-columns"] {
    display: block !important;
  }
  div[style*="grid-template-columns"] > div {
    margin-bottom: 1.5rem;
  }

  /* Stack post + TOC sidebar vertically on mobile */
  .post-container {
    flex-direction: column !important;
  }
  .toc {
    max-width: 100% !important;
    margin-left: 0 !important;
    position: static !important;
    order: -1;
    margin-bottom: 1.5rem;
  }

  /* Long titles: scale down on small screens */
  .title h1 {
    font-size: 1.1rem;
    word-break: break-word;
  }

  /* Tighten body margin on mobile */
  body {
    margin: 4px !important;
  }
  .content {
    padding: 0 8px;
  }

  /* Code blocks: smaller font on mobile so more fits */
  pre {
    font-size: 13px;
    padding: 0.75em;
  }
}

/* Tables — horizontal scroll on mobile instead of breaking layout */
table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* Prevent wide content from breaking mobile layout */
html, body {
  overflow-x: hidden;
  width: 100%;
}
.content {
  overflow-x: hidden;
}
.post-content {
  overflow-x: hidden;
  max-width: 100%;
}

/* Code blocks: scroll horizontally within their container */
pre {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  white-space: pre;
  word-break: normal;
}
pre code {
  word-break: normal;
  overflow-wrap: normal;
}

/* Inline code: allow wrapping */
:not(pre) > code {
  word-break: break-all;
  overflow-wrap: break-word;
}

/* Highlight wrapper must also constrain */
.highlight {
  max-width: 100%;
  overflow-x: auto;
}

/* Ecosystem card styling */
.ecosystem-card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 1rem;
}
.ecosystem-card h3 {
  margin-top: 0;
}
.ecosystem-card a {
  font-weight: bold;
}