/* === GRID OVERLAY === */
.grid-bg {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: var(--grid-top, 0);
  z-index: 1;
  background-image:
    linear-gradient(to right, rgba(0,0,0,0.15) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,0,0,0.15) 1px, transparent 1px) !important;
  background-size: 20px 20px !important;
  pointer-events: none;
}

/* === MAIN CONTENT ABOVE GRID === */
main {
  position: relative;
  z-index: 10;
}

/* === ROUTE SECTIONS === */
.route-section {
  display: none;
  padding-top: calc(var(--grid-size) * 1.5) !important;
}
.route-section.active { display: block; }

/* === BACKGROUND COLOR SYSTEM === */
html { background: var(--page-bg, #fff); }
body { background: var(--page-bg, #fff); }

main, header, footer,
#home, #services, #rentals, #play, #contact {
  background: transparent !important;
}

/* Remove all Tailwind bg utility colors except grid and header */
[class*="bg-"]:not(.grid-bg):not(header):not(header *) {
  background-color: transparent !important;
  background-image: none !important;
}
[style*="background"]:not(.grid-bg):not(body):not(header):not(header *) {
  background: transparent !important;
}

/* Ensure sections stay transparent */
#services *, #rentals *, #home *, #play *, #contact * {
  background-color: transparent !important;
  background-image: none !important;
}

/* EXCEPTION: Header must remain white */
header {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
}

/* Preserve grid overlay - force it to stay visible */
.grid-bg {
  background-image:
    linear-gradient(to right, rgba(0,0,0,0.15) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,0,0,0.15) 1px, transparent 1px) !important;
  background-size: 20px 20px !important;
}

/* Force rentals tags to keep their colors */
#rentals h3 .rentals-tag {
  background: var(--tag-color, #eaeaea) !important;
}

/* Force CTA buttons to keep their colors */
#rentals .rentals-cta,
#contact .contact-cta {
  background-color: #000 !important;
  color: #fff !important;
}

/* Force contact inputs to have white background */
#contact .contact-input {
  background-color: #fff !important;
  color: #000 !important;
}