/* Remove filters from body and apply to content wrapper instead */
body.high-contrast,
body.inverted-colors {
  filter: none !important;
}

/* Apply filters to the main content wrapper */
body.high-contrast .main-content {
  filter: contrast(150%) !important;
}

body.inverted-colors .main-content {
  filter: invert(1) hue-rotate(180deg) !important;
}

/* Ensure fixed elements stay fixed and outside the filter */
body.high-contrast .header,
body.inverted-colors .header,
body.high-contrast .accessibility-float,
body.inverted-colors .accessibility-float,
body.high-contrast .whatsapp-float,
body.inverted-colors .whatsapp-float,
body.high-contrast .accessibility-menu,
body.inverted-colors .accessibility-menu {
  position: fixed !important;
  z-index: 99999 !important;
}

/* Reset any transforms that might interfere */
body.high-contrast .accessibility-menu,
body.inverted-colors .accessibility-menu {
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 10000 !important;
}

/* Protect positioning for other accessibility features */
body.highlight-links .accessibility-menu,
body.stop-animations .accessibility-menu {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 10000 !important;
}

/* Exclude fixed elements from stop-animations */
body.stop-animations .header,
body.stop-animations .accessibility-float,
body.stop-animations .whatsapp-float,
body.stop-animations .accessibility-menu {
  animation-duration: inherit !important;
  transition-duration: inherit !important;
}

/* Font size controls - ensure it overrides all other styles */
.main-content[style*="font-size"] * {
  font-size: inherit !important;
}

/* Ensure font size changes apply to all text elements */
.main-content[style*="font-size"] p,
.main-content[style*="font-size"] span,
.main-content[style*="font-size"] div,
.main-content[style*="font-size"] h1,
.main-content[style*="font-size"] h2,
.main-content[style*="font-size"] h3,
.main-content[style*="font-size"] h4,
.main-content[style*="font-size"] h5,
.main-content[style*="font-size"] h6,
.main-content[style*="font-size"] li,
.main-content[style*="font-size"] button,
.main-content[style*="font-size"] a {
  font-size: inherit !important;
}