/**
 * Custom Klaro theme to fix accessibility issues
 *
 * Note: Links and buttons use blue (#2487ce) instead of green because:
 * 1. Blue matches the Weigand Metall brand color (brand-500)
 * 2. Consistent branding across the entire website
 * 3. Blue is more commonly associated with trust and professional services
 * 4. Better color harmony with the overall site design
 */

/* Change Klaro dialog h1 to h2 to fix heading order issue */
.klaro .cookie-modal .cm-title,
.klaro .context-notice .cm-title {
  font-size: 1.5rem;
  line-height: 1.2;
}

/* Override green links to brand blue for consistency */
.klaro .cookie-modal a,
.klaro .context-notice a,
.klaro .cookie-notice a {
  color: #2487ce !important; /* Brand Blue - matches site theme */
  text-decoration: underline;
}

/* Override green success button to brand blue */
.klaro .cookie-modal .cm-btn.cm-btn-success,
.klaro .context-notice .cm-btn.cm-btn-success,
.klaro .cookie-notice .cm-btn.cm-btn-success {
  background-color: #2487ce !important; /* Brand Blue */
  color: #ffffff !important; /* White text for WCAG AA contrast */
}

/* Override green success-var button to lighter brand blue */
.klaro .cookie-modal .cm-btn.cm-btn-success-var,
.klaro .context-notice .cm-btn.cm-btn-success-var,
.klaro .cookie-notice .cm-btn.cm-btn-success-var {
  background-color: #38bdf8 !important; /* Lighter blue for secondary action */
  color: #0c4a6e !important; /* Dark text for WCAG AA contrast */
}

/* Override green slider to brand blue when checked */
.klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider,
.klaro .context-notice .cm-list-input:checked + .cm-list-label .slider,
.klaro .cookie-notice .cm-list-input:checked + .cm-list-label .slider {
  background-color: #2487ce !important;
}

/* Override green half-checked slider to brand blue */
.klaro .cookie-modal .cm-list-input.half-checked:checked + .cm-list-label .slider,
.klaro .context-notice .cm-list-input.half-checked:checked + .cm-list-label .slider,
.klaro .cookie-notice .cm-list-input.half-checked:checked + .cm-list-label .slider {
  background-color: #2487ce !important;
  opacity: 0.6;
}

/* Override green only-required slider to lighter brand blue */
.klaro .cookie-modal .cm-list-input.only-required + .cm-list-label .slider,
.klaro .context-notice .cm-list-input.only-required + .cm-list-label .slider,
.klaro .cookie-notice .cm-list-input.only-required + .cm-list-label .slider {
  background-color: #38bdf8 !important;
}

/* Override green required slider to lighter brand blue */
.klaro .cookie-modal .cm-list-input.required:checked + .cm-list-label .slider,
.klaro .context-notice .cm-list-input.required:checked + .cm-list-label .slider,
.klaro .cookie-notice .cm-list-input.required:checked + .cm-list-label .slider {
  background-color: #38bdf8 !important;
}

/* Override green focus shadow to brand blue */
.klaro .cookie-modal .cm-list-label input:focus + .slider,
.klaro .context-notice .cm-list-label input:focus + .slider,
.klaro .cookie-notice .cm-list-label input:focus + .slider {
  box-shadow: 0 0 0 3px rgba(36, 135, 206, 0.4) !important;
}

/* Increase touch target size for buttons (WCAG 2.5.5: Touch Target Size) */
.klaro .cookie-modal .cm-btn,
.klaro .context-notice .cm-btn,
.klaro .cookie-notice .cm-btn {
  min-height: 48px;
  min-width: 48px;
  padding: 12px 20px;
  font-size: 16px;
}

/* Increase touch target size for links */
.klaro .cookie-modal a,
.klaro .context-notice a,
.klaro .cookie-notice a {
  display: inline-block;
  padding: 8px 4px;
  min-height: 44px;
  min-width: 44px;
}

/* Add accessible name to dialog via aria-label */
.klaro .cookie-modal .cm-modal.cm-klaro {
  position: relative;
}

/* Ensure proper color contrast for text - use lighter gray for better contrast */
.klaro .cookie-modal .cm-list-description,
.klaro .context-notice .cm-list-description,
.klaro .cookie-notice .cm-list-description {
  color: #f0f0f0 !important; /* Lighter gray for better contrast on #333 background */
}

/* Ensure all text in Klaro has proper contrast */
.klaro .cookie-modal p,
.klaro .cookie-modal strong,
.klaro .cookie-modal h1,
.klaro .cookie-modal h2,
.klaro .cookie-modal ul,
.klaro .cookie-modal li,
.klaro .context-notice p,
.klaro .context-notice strong,
.klaro .context-notice h1,
.klaro .context-notice h2,
.klaro .context-notice ul,
.klaro .context-notice li,
.klaro .cookie-notice p,
.klaro .cookie-notice strong,
.klaro .cookie-notice h1,
.klaro .cookie-notice h2,
.klaro .cookie-notice ul,
.klaro .cookie-notice li {
  color: #fafafa !important; /* White text for WCAG AAA contrast */
}

/* Improve focus visibility with better contrast */
.klaro .cookie-modal .cm-btn:focus,
.klaro .context-notice .cm-btn:focus,
.klaro .cookie-notice .cm-btn:focus {
  outline: 3px solid #38bdf8;
  outline-offset: 3px;
}

/* Fix caret color for better visibility */
.klaro .cookie-modal .cm-body ul.cm-services li.cm-purpose .cm-services .cm-caret,
.klaro .cookie-modal .cm-body ul.cm-purposes li.cm-purpose .cm-services .cm-caret {
  color: #38bdf8 !important;
}

/* Fix powered-by link color for better contrast */
.klaro .cookie-modal .cm-modal .cm-footer .cm-powered-by a {
  color: #38bdf8 !important;
}

/* Fix opt-out and required text color for better contrast */
.klaro .cookie-modal .cm-body ul.cm-purposes li.cm-purpose span.cm-opt-out,
.klaro .cookie-modal .cm-body ul.cm-purposes li.cm-purpose span.cm-required {
  color: #38bdf8 !important;
}

/* Fix purposes text color for better contrast */
.klaro .cookie-modal .cm-body ul.cm-purposes li.cm-service p.purposes,
.klaro .cookie-modal .cm-body ul.cm-purposes li.cm-purpose p.purposes {
  color: #d0d0d0 !important;
}