/* Focusable Elements */
button:focus, 
a:focus,
input:focus,
textarea:focus,
select:focus {
  outline: 2px solid #000;
  outline-offset: 2px;
}

/* Form Accessibility */
input[required]::after,
textarea[required]::after,
select[required]::after {
  content: " (Required)";
  color: red;
}

.form-error {
  color: red;
  font-weight: bold;
}

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000;
  color: #fff;
  padding: 8px;
  z-index: 100;
  transition: top 0.3s;
}

.skip-link:focus {
  top: 0;
}

/* Ensure sufficient contrast for text */
.high-contrast-text {
  color: #000;
  background-color: #fff;
}

/* Example button styles */
.button {
  background-color: #0073aa;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
}

.button:hover, .button:focus {
  background-color: #005177;
  color: #fff;
}

/* Ensure buttons have sufficient size and spacing */
.button, .link {
  min-width: 44px;
  min-height: 44px;
  padding: 10px;
  margin: 5px;
}

/* Define accessible color variables */
:root {
--accessible-bg-color: #ffffff;
--accessible-text-color: #000000;
--accessible-link-color: #1a0dab;
--accessible-hover-color: #551a8b;
}

/* Apply accessible colors to elements */
body {
background-color: var(--accessible-bg-color);
color: var(--accessible-text-color);
}

a {
color: var(--accessible-link-color);
}

a:hover {
color: var(--accessible-hover-color);
}

/* Specific adjustments for identified elements */
#content.container {
background-color: var(--accessible-bg-color);
color: var(--accessible-text-color);
}

a[href*="wp-content/uploads"] {
color: var(--accessible-link-color);
}

a[href*="wp-content/uploads"]:hover {
color: var(--accessible-hover-color);
}

/* Additional CSS for keyboard navigation focus */
:focus {
  outline: 2px solid #005177;
  outline-offset: 2px;
}