/**
 * WCAG Accessibility Plugin - Custom Positioning & High Contrast Fix
 * Position the WCAG accessibility button below the header
 * Fix CSS custom properties in high contrast mode
 * Custom theme colors to match BWG Erlebnishaus brand
 */

/* ========================================
   WCAG TOOLBAR - POSITIONING
   ======================================== */


/* Position WCAG button below header - top-right position */
.wcag-toolbar.wcag-position-top-right {
  top: 80px !important;  /* Adjust based on your header height */
}

/* Position WCAG button below topbar on mobile to avoid blocking event button */
@media (max-width: 768px) {
    .wcag-position-top-right {
        top: 80px !important;  /* Position below topbar menu buttons */
    }
}


.wcag-panel-footer {
  bottom: auto !important;
  padding: 2px 10px !important;
}

.wcag-tabs {
  border-bottom: 1px solid var(--wcag-border);
}

/* ========================================
   WCAG TOOLBAR - CUSTOM THEME COLORS
   ======================================== */

/* Override default blue theme with BWG teal/cyan theme */
.wcag-toolbar {
  --wcag-primary: #00a8a8 !important;       /* BWG teal primary */
  --wcag-primary-dark: var(--wcag-primary) !important;  /* Darker teal for hover */
  --wcag-primary-light: #00c8c8 !important; /* Lighter teal */
  --wcag-accent: #fff054 !important;        /* BWG yellow accent */
  --wcag-danger: #e74c3c !important;        /* Red for reset button */
}

/* Toggle button - BWG theme colors and z-index */
.wcag-toggle {
  background-color: var(--wcag-primary) !important;
  border-color: var(--wcag-primary) !important;
  position: relative !important;
  z-index: 2 !important; /* Ensure toggle is always above panel */
}

.wcag-toggle:hover,
.wcag-toggle:focus {
  background-color: var(--wcag-primary) !important;
  border-color: var(--wcag-primary) !important;
}

/* Panel background and borders */
.wcag-panel {
  border: 1px solid var(--wcag-primary) !important;
  position: relative !important;
  z-index: 1 !important; /* Panel below toggle button */
}

/* Feature buttons */
.wcag-feature-btn {
  color: #333 !important;
  background-color: #f8f9fa !important;
  border-color: #dee2e6 !important;
}

.wcag-feature-btn:hover {
  background-color: var(--wcag-primary) !important;
  color: #ffffff !important;
  border-color: var(--wcag-primary) !important;
}

.wcag-feature-btn.active {
  background-color: var(--wcag-primary) !important;
  color: #ffffff !important;
  border-color: var(--wcag-primary) !important;
}

/* Range sliders */
.wcag-range::-webkit-slider-thumb {
  background-color: var(--wcag-primary) !important;
}

.wcag-range::-moz-range-thumb {
  background-color: var(--wcag-primary) !important;
}

.wcag-range::-webkit-slider-runnable-track {
  background-color: #e9ecef !important;
}

.wcag-range::-moz-range-track {
  background-color: #e9ecef !important;
}

/* Reset button - using theme color */
.wcag-reset-btn {
  background-color: var( --wcag-primary) !important;
  color: #ffffff !important;
  border-color: var( --wcag-primary) !important;
}

.wcag-reset-btn:hover {
  background-color: var( --wcag-primary) !important;
  border-color: var( --wcag-primary) !important;
  filter: brightness(0.9);
}

/* Section headers */
.wcag-section-header {
  color: var(--wcag-primary) !important;
  border-bottom-color: var(--wcag-primary) !important;
}

/* ===  High Contrast Mode - CSS Variables Override === */
/* Override site-specific CSS custom properties in high contrast mode */
body.wcag-high-contrast {
  --primary: #ffffff !important;
  --primary-2: #ffffff !important;
  --color-hover: #ffff00 !important;
  --text-bright: #ffffff !important;
  --text-main: #ffffff !important;
  --text-muted: #ffffff !important;
  --links: #ffff00 !important;
  --button-color: #ffffff !important;
  --background-body: #000000 !important;
  --background: #000000 !important;
  --background-alt: #000000 !important;
  --border: #ffffff !important;
}

/* Force high contrast on gradients and special elements */
body.wcag-high-contrast .topbar,
body.wcag-high-contrast .menu_main,
body.wcag-high-contrast .footer {
  background: #000000 !important;
  background-image: none !important;
  background-gradient: none !important;
}

/* Ensure SVG elements are visible */
body.wcag-high-contrast svg path,
body.wcag-high-contrast svg circle,
body.wcag-high-contrast svg rect {
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

/* Links in high contrast */
body.wcag-high-contrast a:not(.wcag-toolbar a) {
  color: #ffff00 !important;
  background-color: transparent !important;
}

/* Buttons using CSS variables */
body.wcag-high-contrast button:not(.wcag-toolbar button),
body.wcag-high-contrast .button:not(.wcag-toolbar .button) {
  background-color: #000000 !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
}