/* Base look for PLAIN buttons only (no color class) */
#main .button:not(.orange):not(.red):not(.gray),
#footer .button:not(.orange):not(.red):not(.gray),
#header .button:not(.orange):not(.red):not(.gray) {
  font-weight: bold;
  padding: 0.6em 1em 0.4em 1em;
  line-height: 1.2;
  text-decoration: none;
  color: #000 !important;
  background-color: rgba(0, 0, 0, 0.05) !important; /* super light / almost transparent */
  box-shadow: none !important;
  border: 0;
  transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease, color 0.3s ease;
}

#main .button:not(.orange):not(.red):not(.gray):hover,
#footer .button:not(.orange):not(.red):not(.gray):hover,
#header .button:not(.orange):not(.red):not(.gray):hover {
  background-color: rgba(0, 0, 0, 0.4) !important;  /* semi-grey on hover */
  color: #fff !important;
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}


/* Light base → saturated hover per variant */
#main .button.orange,
#footer .button.orange,
#header .button.orange { background-color: #d9b5a8 !important; }
#main .button.orange:hover,
#footer .button.orange:hover,
#header .button.orange:hover { background-color: #b78977 !important; }

#main .button.red,
#footer .button.red,
#header .button.red { background-color: #f2bcbc !important; }
#main .button.red:hover,
#footer .button.red:hover,
#header .button.red:hover { background-color: #e86161 !important; }

#main .button.gray,
#footer .button.gray,
#header .button.gray { background-color: #a7c6d8 !important; }
#main .button.gray:hover,
#footer .button.gray:hover,
#header .button.gray:hover { background-color: #4f91b3 !important; }


/* Keep the spotlight image from overflowing the right edge */
.spotlight {
  flex-wrap: wrap;           /* allow the image to drop below if space is tight */
  gap: 2em;                  /* use gap instead of a hard margin-left on the image */
}

.spotlight .image {
  margin-left: 0 !important; /* cancel theme’s 4em push */
  flex: 0 0 16em;            /* reserve up to 16em for the image */
  max-width: 100%;           /* but never exceed the container width */
}

.spotlight .image img {
  width: 100% !important;    /* scale the img to its container */
  height: auto;
  display: block;
}

/* Optional: if you see a horizontal scrollbar on tiny edge cases, hide it */
#wrapper { overflow-x: hidden; }