/* LAYOUT FIX: force proper 2-column layout and safe stacking
   Add this after your main stylesheet so it overrides earlier rules.
*/

.page-wrap {
  position: relative;    /* create a local stacking context */
  z-index: 1;
}

/* reliable two-column layout */
.grid {
  display: grid !important;
  grid-template-columns: 1fr 420px;  /* main | sidebar */
  gap: 20px;
  align-items: start; /* keep tops aligned */
  grid-auto-flow: row; /* ensure rows flow normally, prevents odd reordering */
}

/* defensive: ensure direct children use normal flow */
.grid > * {
  position: relative !important;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
}

/* ensure the main card is first and the aside is second */
.grid > .card:first-child {
  order: 0;
}
.grid > aside.card {
  order: 0;
}

/* mobile / narrow screens: stack in correct order (main first, sidebar below) */
@media (max-width: 980px) {
  .grid {
    grid-template-columns: 1fr !important;
  }
  /* make sure main content remains first on small screens */
  .grid > .card:first-child {
    order: 0 !important;
  }
  .grid > aside.card {
    order: 1 !important;
  }
}

/* Prevent overlapping with footer: footer should always clear layout */
footer, .site-footer {
  position: relative;
  clear: both;
  z-index: 1;
}

/* Defensive z-index: donation modal should stay on top but not overlap layout flow */
.donationModal {
  z-index: 99999 !important;
}

/* If any elements are explicitly absolutely positioned and causing overlap,
   this will neutralize the issue by resetting them (applies only to controls inside grid). */
.grid > .card, .grid > aside.card {
  /* do not allow absolute positioning inside the main layout containers */
  /* Keep this minimal — it only resets rogue absolute positioning at top-level cards */
  position: relative !important;
}

/* Small tweak to ensure charts/cards do not overflow container on small screens */
.chartWrap canvas, .chartWrap {
  max-width: 100% !important;
  height: auto !important;
}