/**
 * @file
 * Form Control Contrast Fixes
 *
 * Fixes contrast issues for form controls to meet WCAG 2.1 AA standards.
 * Specifically targets placeholder text and date inputs.
 *
 * WCAG Requirements:
 * - Form controls: 3:1 minimum contrast
 * - Text: 4.5:1 minimum contrast
 */

/* ==========================================================================
   Form Input Placeholder Contrast Fix
   ========================================================================== */

/*
 * Fix placeholder text contrast for all form inputs
 * Using #495057 which provides 9.74:1 contrast ratio on white background
 */
input::placeholder,
textarea::placeholder,
select::placeholder,
.form-control::placeholder,
.form-select::placeholder,
.form-text::placeholder,
.form-date::placeholder,
input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="password"]::placeholder,
input[type="number"]::placeholder,
input[type="tel"]::placeholder,
input[type="url"]::placeholder,
input[type="search"]::placeholder,
input[type="date"]::placeholder,
input[type="time"]::placeholder,
input[type="datetime-local"]::placeholder,
.bef-datepicker::placeholder {
  color: #495057 !important;
  opacity: 1 !important;
}

/*
 * Specific fix for date inputs and BEF datepicker
 * Ensures both placeholder and value text have sufficient contrast
 * Using #212529 for border - provides 15.5:1 contrast on white background
 */
input[type="date"],
input[type="time"],
input[type="datetime-local"],
.form-date,
.bef-datepicker,
input.form-date,
input.bef-datepicker {
  color: #212529 !important;
  background-color: #ffffff !important;
  border: 2px solid #212529 !important;
  border-radius: 4px !important;
}

/* Even more specific selector for BEF datepicker */
form input.bef-datepicker.form-date,
.views-exposed-form input.bef-datepicker,
.views-exposed-form input[type="date"],
#views-exposed-form-news-page-1 input[type="date"],
input[data-drupal-selector*="date"] {
  color: #212529 !important;
  background-color: #ffffff !important;
  border: 2px solid #212529 !important;
  border-radius: 4px !important;
}

/* Empty date inputs - treat as placeholder */
input[type="date"]:invalid,
input[type="time"]:invalid,
input[type="datetime-local"]:invalid {
  color: #495057 !important;
}

/*
 * All form controls - ensure strong border contrast
 * Using #212529 (very dark gray) for 15.5:1 contrast on white
 */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
textarea,
select,
.form-control,
.form-select {
  border: 2px solid #212529 !important;
  background-color: #ffffff !important;
  color: #212529 !important;
}

/*
 * Focus states for better accessibility
 * Using MSU Green for focus with thick border
 */
input:focus,
textarea:focus,
select:focus,
.form-control:focus,
.form-select:focus,
.bef-datepicker:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="datetime-local"]:focus {
  border: 3px solid #18453b !important;
  outline: 2px solid #18453b !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 0.25rem rgba(24, 69, 59, 0.25) !important;
}

input:focus::placeholder,
textarea:focus::placeholder,
select:focus::placeholder,
.form-control:focus::placeholder,
.form-select:focus::placeholder,
.bef-datepicker:focus::placeholder {
  color: #495057 !important;
  opacity: 1 !important;
}

/*
 * Disabled state - still needs adequate contrast
 */
input:disabled::placeholder,
textarea:disabled::placeholder,
.form-control:disabled::placeholder,
.form-select:disabled::placeholder,
.bef-datepicker:disabled::placeholder {
  color: #6c757d !important;
  opacity: 1 !important;
}

/*
 * Firefox-specific placeholder fix
 */
input::-moz-placeholder,
textarea::-moz-placeholder,
.form-control::-moz-placeholder,
.bef-datepicker::-moz-placeholder {
  color: #495057 !important;
  opacity: 1 !important;
}

/*
 * Webkit-specific placeholder fix
 */
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder,
.form-control::-webkit-input-placeholder,
.bef-datepicker::-webkit-input-placeholder {
  color: #495057 !important;
  opacity: 1 !important;
}

/*
 * MS Edge/IE specific placeholder fix
 */
input:-ms-input-placeholder,
textarea:-ms-input-placeholder,
.form-control:-ms-input-placeholder,
.bef-datepicker:-ms-input-placeholder {
  color: #495057 !important;
  opacity: 1 !important;
}

/* ==========================================================================
   Date Input Specific Fixes
   ========================================================================== */

/*
 * Chrome/Safari date input placeholder color
 * When no date is selected, the placeholder appears gray
 */
input[type="date"]:not(:valid):not(:focus),
input[type="time"]:not(:valid):not(:focus),
input[type="datetime-local"]:not(:valid):not(:focus) {
  color: #495057 !important;
}

/*
 * Date input calendar icon - ensure it's visible
 */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  opacity: 1;
  filter: brightness(0) saturate(100%) invert(31%) sepia(8%) saturate(872%) hue-rotate(169deg) brightness(95%) contrast(89%);
}

/* ==========================================================================
   BEF (Better Exposed Filters) Specific Fixes
   ========================================================================== */

/*
 * BEF datepicker module specific styling
 * Ultra-specific selectors to override BEF and Drupal core styles
 */
.bef-datepicker,
input.bef-datepicker,
.form-item input.bef-datepicker,
.views-exposed-form .form-item input.bef-datepicker,
input.bef-datepicker.form-date,
.js-form-type-date input.bef-datepicker,
div.form-item input[type="date"].bef-datepicker {
  color: #212529 !important;
  background-color: #ffffff !important;
  border: 2px solid #212529 !important;
  border-radius: 4px !important;
  min-height: 44px !important;
  padding: 8px 12px !important;
}

.bef-datepicker:focus,
input.bef-datepicker:focus,
.form-item input.bef-datepicker:focus {
  border: 3px solid #18453b !important;
  outline: 2px solid #18453b !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 0.25rem rgba(24, 69, 59, 0.25) !important;
}

/* Override any potential Silktide or other inline styles */
input.bef-datepicker[style],
input[type="date"][style] {
  border: 2px solid #212529 !important;
  background-color: #ffffff !important;
}

/* ==========================================================================
   Form Labels - Ensure proper contrast
   ========================================================================== */

/*
 * Form labels must have adequate contrast
 */
label,
.form-label,
.control-label {
  color: #212529 !important;
  font-weight: 600;
}

/* ==========================================================================
   High Contrast Mode Support
   ========================================================================== */

/*
 * Enhanced contrast for users who prefer high contrast
 */
@media (prefers-contrast: high) {
  input::placeholder,
  textarea::placeholder,
  .form-control::placeholder,
  .bef-datepicker::placeholder {
    color: #212529 !important;
    opacity: 1 !important;
  }

  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  .form-date,
  .bef-datepicker {
    border-width: 2px !important;
    border-color: #212529 !important;
  }
}

/* ==========================================================================
   Maximum Specificity Overrides
   ========================================================================== */

/*
 * Nuclear option - maximum specificity to override everything
 * Targets the exact element from the accessibility error
 */
input#edit-field-news-date-value-min,
input[data-drupal-selector="edit-field-news-date-value-min"],
input[name="field_news_date_value[min]"],
input#edit-field-news-date-value-max,
input[data-drupal-selector="edit-field-news-date-value-max"],
input[name="field_news_date_value[max]"],
body input.bef-datepicker.form-date[type="date"],
body .views-exposed-form input[type="date"],
body form input[type="date"].form-date {
  border: 2px solid #212529 !important;
  border-style: solid !important;
  border-color: #212529 !important;
  background-color: #ffffff !important;
  color: #212529 !important;
  outline: none;
}

/* Force border on focus for these specific elements */
input#edit-field-news-date-value-min:focus,
input[data-drupal-selector="edit-field-news-date-value-min"]:focus,
input#edit-field-news-date-value-max:focus,
input[data-drupal-selector="edit-field-news-date-value-max"]:focus,
body input.bef-datepicker.form-date[type="date"]:focus {
  border: 3px solid #18453b !important;
  border-style: solid !important;
  border-color: #18453b !important;
  outline: 2px solid #18453b !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 0.25rem rgba(24, 69, 59, 0.25) !important;
}

/* Override any inline styles that might be set by JavaScript */
input.bef-datepicker[style*="border"],
input[type="date"][style*="border"],
input.form-date[style*="border"] {
  border: 2px solid #212529 !important;
}

/* Ensure the control has visible boundaries */
input[type="date"],
input.bef-datepicker,
input.form-date {
  box-sizing: border-box !important;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 2px solid #212529 !important;
  background-color: #ffffff !important;
}

/* Re-add native date picker appearance but with strong border */
input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 1 !important;
  cursor: pointer;
}