/* Styles for markdown content to match grok4.css card styling */
.markdown-body {
  padding: 20px;
  font-family: 'Lato', sans-serif;
  line-height: 1.6;
  color: #333;
}

.markdown-body h1 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: #000;
}

.markdown-body h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-top: 2rem;
  margin-bottom: 0.5rem;
  color: #000;
}

.markdown-body h3 {
  font-size: 1.2rem;
  font-weight: 700;
  margin-top: 1.5rem;
  color: #333;
}

.markdown-body img {
  max-width: 100%;
    height: auto;
    display: block;
    float: left;
    margin: 1em;
    border: 1px solid #5a3d2b;
    border-radius: 5px;
}

/* Mobile adjustments */
@media (max-width: 767px) {
    .markdown-body img {
        float: none; /* Remove float to prevent indentation/wrapping issues */
        margin: 1em auto; /* Center horizontally with auto left/right, keep vertical spacing */
        display: block; /* Ensure it behaves as a block element */
    }
}

.markdown-body p {
    margin-bottom: 1em;
    text-indent: 2em; /* Adds indent to first line of paragraphs */
    text-align: justify;
    text-justify: inter-word;
}
.markdown-body ul,
.markdown-body li {
  font-size: 1rem;
  margin-bottom: 1rem;
  color: #333;
}

.markdown-body ul {
  list-style-type: disc;
  padding-left: 2rem;
}

.markdown-body table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
}

.markdown-body th,
.markdown-body td {
  border: 1px solid #ddd;
  padding: 0.75rem;
  text-align: left;
}

.markdown-body th {
  background-color: #f5f5f5;
  font-weight: 700;
  color: #000; /* Darker text color for better readability */
}
/* For Ads */
.markdown-body .ads {
  max-width: 100%;
  overflow: hidden;  /* Hides any excess content */
  margin-bottom: 15px;  /* Space between ads */
  display: flex;          /* Use flexbox to center content */
  justify-content: center; /* Center horizontally */
  align-items: center;    /* Center vertically if needed */
}

.markdown-body .ads img {
  max-width: 100%;
  height: auto;
  display: block;  /* Prevents inline gaps */
}

.markdown-body .ads iframe {
  width: 100%;
  height: auto;  /* Or set a fixed height like 250px if needed */
  border: none;
}

@media screen and (max-width: 768px) {
  .markdown-body .ads {
    margin: 10px 0; /* Adjust spacing for mobile */
  }
  .markdown-body .ads iframe {
    height: 200px; /* Smaller height for mobile, if needed */
  }
}