/* ========================= */
/* Boxed formulas “formula card” style */

/* Wrapper for mathbox + equation number */
.mathbox-wrapper {
  display: flex;
  align-items: center;              /* vertically align box and number */
  justify-content: center;   /* box on left, number on right */
  margin: 4px 0;                /* vertical spacing (keep center alignment) */
  max-width: 800px;                 /* optional: limit max width */
  scroll-margin-top: 120px;
}

.mathbox {
  background-color: #f0f0f0;       /* soft light grey background */
  border: 2px solid #888888;       /* medium grey border */
  border-radius: 10px;             /* smooth round corners */
  padding: 4px 8px;              /* space inside the box */
  display: inline-block;            /* shrink box to formula width */
  margin: 0;                   /* vertical spacing between formulas */
  font-size: 1.15em;                /* slightly larger font for readability */
  text-align: center;
  box-shadow: 2px 2px 6px rgba(0,0,0,0.15); /* subtle shadow for depth */
  transition: background-color 0.3s, box-shadow 0.3s; /* optional hover effect */
  overflow-x: visible; /*test*/
}

/* Optional: make formula highlight on hover */
.mathbox:hover {
  background-color: #FFFBF9;
  box-shadow: 3px 3px 8px rgba(0,0,0,0.2);
}

.eq-numbers {
  display: flex;
  flex-direction: column;      /* stack vertically */
  justify-content: center;     /* center relative to the box */
  margin-left: 30px;           /* space from the box */
}

.eq-numbers span {
  display: block;
  font-weight: bold;
  font-style: italic;
  line-height: 1.4em;          /* controls spacing between numbers */
  text-align: left;
  color: black;
}


/* ========================= */
/* Fix MathJax spacing inside mathbox */

/* 1. Remove big vertical margins from $$ ... $$ */
.mathbox mjx-container[jax="CHTML"][display="true"] {
  margin: 0;
}

/* 2. Tighten internal MathJax layout */
.mathbox .mjx-chtml {
  line-height: 1.4em;
}

/* 3. (Optional but safe) ensure compact rendering */
.mathbox mjx-container {
  padding: 0;
}

/* NEW: container for numbers + image */
.eq-side {
  display: flex;
  align-items: center;   /* vertically align with mathbox */
  margin-left: 0px;     /* replaces old spacing */
}

/* keep your stacked numbers exactly as-is */
.eq-numbers {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* image beside stacked numbers */
.eq-side img {
  height: 300px;
  width: auto;
  margin-left: 30px;
  flex-shrink: 0;
  align-self: center;
  display: block;
}

  /* equations for phone */
@media (max-width: 768px) {
  .mathbox {
    width: 100%;
    font-size: 1em;
    overflow-x: auto;
  }

  .mathbox-wrapper {
    flex-direction: column;
    align-items: center;
  }

  .eq-numbers {
    margin-top: 5px;
  }

  mjx-container[jax="CHTML"][display="true"] {
  display: block;
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
  }

  .eq-side {
    flex-direction: column;
    align-items: center;
  }

  .eq-side img {
    width: 150px;
    height: auto;
    margin-left: 0;
    margin-top: 15px;
  }
}