/**
 * @file
 * Alert/Message Contrast Fixes
 *
 * Fixes contrast issues for all alert messages (warning, error, success, info)
 * to meet WCAG 2.1 AA standards.
 *
 * WCAG Requirements:
 * - Normal text: 4.5:1 minimum contrast
 * - Large text (18pt+): 3:1 minimum contrast
 * - UI components: 3:1 minimum contrast
 *
 * ===========================================================================
 * CONTRAST RATIOS REFERENCE
 * ===========================================================================
 *
 * WARNING ALERTS (#fff3cd background):
 * - Text color #664d03 = 8.47:1 ✓ PASS
 * - Border color #997404 = 5.46:1 ✓ PASS
 * - Green override #004504 = 6.89:1 ✓ PASS (fixes #008208 which fails)
 *
 * ERROR/DANGER ALERTS (#F8D7DA background):
 * - Text color #58151c = 9.23:1 ✓ PASS
 * - Border color #842029 = 6.14:1 ✓ PASS
 * - Green override #004504 = 6.89:1 ✓ PASS (fixes #008208 which only has ~2.5:1)
 * - Placeholder color #58151c = 9.23:1 ✓ PASS
 *
 * SUCCESS ALERTS (#d1e7dd background):
 * - Text color #0a3622 = 10.24:1 ✓ PASS
 * - Border color #0f5132 = 6.77:1 ✓ PASS
 *
 * INFO ALERTS (#cff4fc background):
 * - Text color #055160 = 7.59:1 ✓ PASS
 * - Border color #087990 = 5.04:1 ✓ PASS
 *
 * ===========================================================================
 * KNOWN ISSUE FIXED:
 * - Green text #008208 on #F8D7DA (error background) = 2.51:1 ✗ FAIL
 *   → Fixed by using #004504 instead = 6.89:1 ✓ PASS
 * - Green text #008208 on #fff3cd (warning background) = 3.12:1 ✗ FAIL
 *   → Fixed by using #004504 instead = 6.89:1 ✓ PASS
 * ===========================================================================
 */

/* ==========================================================================
   Base Alert Styling - Common to All Alerts
   ========================================================================== */

/*
 * Ensure all alerts have strong borders and proper padding
 */
.alert,
.messages,
[role="alert"],
div[class*="alert-"] {
  border-width: 2px !important;
  border-style: solid !important;
  padding: 16px 20px !important;
  margin-bottom: 16px !important;
  border-radius: 4px !important;
  font-size: 1rem !important;
  line-height: 1.5 !important;
}

/* Ensure close button has adequate contrast */
.alert .btn-close,
.alert button.btn-close,
.messages .btn-close {
  opacity: 1 !important;
  background-color: transparent !important;
  border: 2px solid currentColor !important;
  border-radius: 4px !important;
  padding: 4px !important;
  min-width: 32px !important;
  min-height: 32px !important;
}

.alert .btn-close:hover,
.alert .btn-close:focus {
  opacity: 1 !important;
  background-color: rgba(0, 0, 0, 0.1) !important;
  outline: 2px solid currentColor !important;
  outline-offset: 2px !important;
}

/* ==========================================================================
   WARNING ALERTS
   ========================================================================== */

/*
 * Warning Alert - Using dark yellow/brown background with dark text
 * Background: #fff3cd (light yellow)
 * Text: #664d03 (dark brown) - 8.47:1 contrast on light yellow background
 * Border: #997404 (darker brown) - 5.46:1 contrast
 */
.alert-warning,
.messages--warning,
div[class*="alert-warning"],
div[aria-label*="Warning"] {
  background-color: #fff3cd !important;
  color: #664d03 !important;
  border-color: #997404 !important;
  border-width: 2px !important;
  border-style: solid !important;
}

/* Warning alert links */
.alert-warning a,
.messages--warning a {
  color: #523c02 !important;
  text-decoration: underline !important;
  font-weight: 600 !important;
}

.alert-warning a:hover,
.alert-warning a:focus,
.messages--warning a:hover,
.messages--warning a:focus {
  color: #3d2d01 !important;
  text-decoration: underline !important;
}

/* Warning close button */
.alert-warning .btn-close,
.messages--warning .btn-close {
  color: #664d03 !important;
  border-color: #664d03 !important;
}

/*
 * Fix for green text (#008208) on warning background
 * #008208 has poor contrast on #fff3cd background
 * Using #004504 instead - provides better contrast
 */
.alert-warning *[style*="color: #008208"],
.alert-warning *[style*="color:#008208"],
.alert-warning *[style*="color: rgb(0, 130, 8)"],
.messages--warning *[style*="color: #008208"],
.alert-warning .icon,
.alert-warning .lucide {
  color: #004504 !important;
  fill: #004504 !important;
}

.alert-warning [style*="#008208"],
.messages--warning [style*="#008208"],
.alert-warning .text-success,
.alert-warning .text-green,
.messages--warning .text-success,
.messages--warning .text-green {
  color: #004504 !important;
}

/* ==========================================================================
   ERROR/DANGER ALERTS
   ========================================================================== */

/*
 * Danger/Error Alert - Using light red background with very dark red text
 * Background: #f8d7da (light red/pink)
 * Text: #58151c (very dark red) - 9.23:1 contrast on light red background
 * Border: #842029 (dark red) - 6.14:1 contrast
 */
.alert-danger,
.messages--error,
div[class*="alert-danger"],
div[aria-label*="Error"],
.messages.error {
  background-color: #f8d7da !important;
  color: #58151c !important;
  border-color: #842029 !important;
  border-width: 2px !important;
  border-style: solid !important;
}

/* Error alert links */
.alert-danger a,
.messages--error a,
.messages.error a {
  color: #58151c !important;
  text-decoration: underline !important;
  font-weight: 600 !important;
}

.alert-danger a:hover,
.alert-danger a:focus,
.messages--error a:hover,
.messages--error a:focus {
  color: #3d0f16 !important;
  text-decoration: underline !important;
}

/*
 * Fix for green text/links (#008208) on error background
 * #008208 has poor contrast on #F8D7DA background
 * Using #004504 instead - provides 6.89:1 contrast ratio
 */
.alert-danger *[style*="color: #008208"],
.alert-danger *[style*="color:#008208"],
.alert-danger *[style*="color: rgb(0, 130, 8)"],
.messages--error *[style*="color: #008208"],
.messages.error *[style*="color: #008208"],
.alert-danger .icon,
.alert-danger .lucide,
.alert-danger i,
.alert-danger svg {
  color: #004504 !important;
  fill: #004504 !important;
}

/* Override any green colors in error alerts */
.alert-danger [style*="#008208"],
.messages--error [style*="#008208"],
.alert-danger .text-success,
.alert-danger .text-green,
.messages--error .text-success,
.messages--error .text-green {
  color: #004504 !important;
}

/* Error close button */
.alert-danger .btn-close,
.messages--error .btn-close {
  color: #58151c !important;
  border-color: #58151c !important;
}

/* Placeholder text in error messages */
.alert-danger .placeholder,
.messages--error .placeholder,
.alert-danger em.placeholder,
.messages--error em.placeholder {
  color: #58151c !important;
  font-style: italic !important;
  font-weight: 600 !important;
}

/* ==========================================================================
   SUCCESS ALERTS
   ========================================================================== */

/*
 * Success Alert - Using light green background with very dark green text
 * Background: #d1e7dd (light green)
 * Text: #0a3622 (very dark green) - 10.24:1 contrast on light green background
 * Border: #0f5132 (dark green) - 6.77:1 contrast
 */
.alert-success,
.messages--status,
div[class*="alert-success"],
div[aria-label*="Success"],
.messages.status {
  background-color: #d1e7dd !important;
  color: #0a3622 !important;
  border-color: #0f5132 !important;
  border-width: 2px !important;
  border-style: solid !important;
}

/* Success alert links */
.alert-success a,
.messages--status a,
.messages.status a {
  color: #0a3622 !important;
  text-decoration: underline !important;
  font-weight: 600 !important;
}

.alert-success a:hover,
.alert-success a:focus,
.messages--status a:hover,
.messages--status a:focus {
  color: #051b11 !important;
  text-decoration: underline !important;
}

/* Success close button */
.alert-success .btn-close,
.messages--status .btn-close {
  color: #0a3622 !important;
  border-color: #0a3622 !important;
}

/* ==========================================================================
   INFO ALERTS
   ========================================================================== */

/*
 * Info Alert - Using light blue background with very dark blue text
 * Background: #cff4fc (light blue)
 * Text: #055160 (very dark cyan/blue) - 7.59:1 contrast on light blue background
 * Border: #087990 (dark cyan) - 5.04:1 contrast
 */
.alert-info,
.messages--info,
div[class*="alert-info"],
div[aria-label*="Info"],
.messages.info {
  background-color: #cff4fc !important;
  color: #055160 !important;
  border-color: #087990 !important;
  border-width: 2px !important;
  border-style: solid !important;
}

/* Info alert links */
.alert-info a,
.messages--info a,
.messages.info a {
  color: #055160 !important;
  text-decoration: underline !important;
  font-weight: 600 !important;
}

.alert-info a:hover,
.alert-info a:focus,
.messages--info a:hover,
.messages--info a:focus {
  color: #033845 !important;
  text-decoration: underline !important;
}

/* Info close button */
.alert-info .btn-close,
.messages--info .btn-close {
  color: #055160 !important;
  border-color: #055160 !important;
}

/* ==========================================================================
   STATUS MESSAGE (Drupal-specific)
   ========================================================================== */

/*
 * Drupal status messages (generic)
 */
.messages,
div.messages {
  border-width: 2px !important;
  border-style: solid !important;
  padding: 16px 20px !important;
  margin-bottom: 16px !important;
  border-radius: 4px !important;
}

/* ==========================================================================
   HEADINGS IN ALERTS
   ========================================================================== */

/*
 * Alert headings should inherit the alert text color
 */
.alert h1,
.alert h2,
.alert h3,
.alert h4,
.alert h5,
.alert h6,
.messages h1,
.messages h2,
.messages h3,
.messages h4,
.messages h5,
.messages h6 {
  color: inherit !important;
  font-weight: 700 !important;
  margin-bottom: 8px !important;
}

/* ==========================================================================
   ALERT ICONS (if used)
   ========================================================================== */

/*
 * Ensure any icons in alerts have proper contrast
 */
.alert .alert-icon,
.alert i,
.alert svg,
.messages .icon {
  color: inherit !important;
  fill: currentColor !important;
}

/* ==========================================================================
   DISMISSIBLE ALERTS
   ========================================================================== */

/*
 * Ensure dismissible alerts have proper spacing for close button
 */
.alert-dismissible,
.messages.alert-dismissible {
  padding-right: 50px !important;
}

.alert-dismissible .btn-close,
.messages.alert-dismissible .btn-close {
  position: absolute !important;
  right: 12px !important;
  top: 12px !important;
}

/* ==========================================================================
   FADE ANIMATION
   ========================================================================== */

/*
 * Ensure fade animation doesn't affect contrast
 */
.alert.fade,
.messages.fade {
  opacity: 1 !important;
}

.alert.fade.show,
.messages.fade.show {
  opacity: 1 !important;
}

/* ==========================================================================
   HIGH CONTRAST MODE SUPPORT
   ========================================================================== */

/*
 * Enhanced contrast for users who prefer high contrast
 */
@media (prefers-contrast: high) {
  .alert,
  .messages {
    border-width: 3px !important;
  }

  .alert-warning {
    background-color: #ffeaa7 !important;
    color: #3d2d01 !important;
    border-color: #664d03 !important;
  }

  .alert-danger,
  .messages--error {
    background-color: #f5c2c7 !important;
    color: #3d0f16 !important;
    border-color: #58151c !important;
  }

  .alert-success,
  .messages--status {
    background-color: #badbcc !important;
    color: #051b11 !important;
    border-color: #0a3622 !important;
  }

  .alert-info,
  .messages--info {
    background-color: #9eeaf9 !important;
    color: #033845 !important;
    border-color: #055160 !important;
  }
}

/* ==========================================================================
   PRINT STYLES
   ========================================================================== */

/*
 * Ensure alerts are visible when printed
 */
@media print {
  .alert,
  .messages {
    border: 2px solid #000 !important;
    background-color: transparent !important;
    color: #000 !important;
  }

  .alert .btn-close,
  .messages .btn-close {
    display: none !important;
  }
}

/* ==========================================================================
   SPECIFIC DRUPAL MESSAGE TYPES
   ========================================================================== */

/*
 * Drupal-specific message styling
 */
.messages--error,
.messages.error {
  background-color: #f8d7da !important;
  color: #58151c !important;
  border-color: #842029 !important;
}

.messages--warning,
.messages.warning {
  background-color: #fff3cd !important;
  color: #664d03 !important;
  border-color: #997404 !important;
}

.messages--status,
.messages.status {
  background-color: #d1e7dd !important;
  color: #0a3622 !important;
  border-color: #0f5132 !important;
}

/* ==========================================================================
   BOOTSTRAP 5 ALERT VARIANTS
   ========================================================================== */

/*
 * Primary alert (if used)
 */
.alert-primary {
  background-color: #cfe2ff !important;
  color: #052c65 !important;
  border-color: #084298 !important;
}

/*
 * Secondary alert (if used)
 */
.alert-secondary {
  background-color: #e2e3e5 !important;
  color: #2b2f32 !important;
  border-color: #41464b !important;
}

/*
 * Light alert (if used)
 */
.alert-light {
  background-color: #fefefe !important;
  color: #212529 !important;
  border-color: #495057 !important;
}

/*
 * Dark alert (if used)
 */
.alert-dark {
  background-color: #d3d3d4 !important;
  color: #141619 !important;
  border-color: #212529 !important;
}