/* Base style for equations */
.eq {
  overflow-x: auto;   /* Enable horizontal scrolling if needed */
  overflow-y: visible; /* Ensure vertical overflow is visible (no clipping) */
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
  padding: 0.5rem 0;   /* Vertical padding for spacing */
  margin: 0.5rem 0;    /* Margin between equations */
  text-align: center;  /* Center equations by default */
  max-width: 100%;     /* Limit width to 100% */
  line-height: 1.6;    /* Allow for enough line height */
  display: block;      /* Ensure it behaves like a block-level element */
}

/* Ensure MathJax/KaTeX equations don't break layout */
.eq mjx-container {
  max-width: 100% !important;
  overflow-x: auto !important;  /* Allow horizontal scroll if needed */
  display: inline-block;        /* Keep MathJax container inline */
  white-space: nowrap;          /* Prevent breaking */
  line-height: 1.6 !important;  /* Match line height for proper vertical space */
  word-wrap: break-word;        /* Allow breaking long words if necessary */
}

/* Responsive tweaks */
@media (max-width: 768px) {
  .eq {
    font-size: 0.90rem;  /* Slightly reduce size for smaller screens */
    text-align: left;    /* Left align for easier scrolling */
    padding: 0.4rem;
  }
}

@media (max-width: 480px) {
  .eq {
    font-size: 0.9rem;
    padding: 0.3rem;
  }
}