/**
 * Accessibility Contrast Fixes
 * Ensures WCAG AA compliance for color contrast
 * Part of Amphibious 2.0 Component Library
 */

/*
 * Color Contrast Analysis:
 * - #ED8B00 (primary orange) with white: 2.95:1 ❌ FAIL (needs 4.5:1)
 * - var(--color-primary-dark) (dark orange) with white: 3.8:1 ❌ FAIL for small text
 * - #ED8B00 with black: 7.1:1 ✅ PASS
 *
 * Solution: Use darker backgrounds or darker text
 */

/* ========================================
   HERO & HEADER CONTRAST FIXES
   ======================================== */

/* Fix hero sections with orange gradients */
.hero,
.examples-header,
.docs-header,
.doc-header,
.demo-header {
  /* Darken the gradient for better contrast */
  background: linear-gradient(135deg, var(--color-primary-dark) 0%, #a65e00 100%);
  color: white;
}

/* Ensure all text in heroes is white with text shadow for extra legibility */
.hero h1,
.hero h2,
.hero h3,
.hero p,
.hero .aiab-lead,
.examples-header h1,
.examples-header p,
.docs-header h1,
.docs-header p,
.doc-header h1,
.doc-header p,
.demo-header h1,
.demo-header p {
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Fix link contrast in orange sections */
.hero a:not(.aiab-button),
.docs-header a:not(.aiab-button),
.examples-header a:not(.aiab-button) {
  color: white;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

.hero a:not(.aiab-button):hover,
.docs-header a:not(.aiab-button):hover,
.examples-header a:not(.aiab-button):hover {
  color: #ffd700;
  text-decoration-thickness: 3px;
}

/* ========================================
   BUTTON CONTRAST FIXES
   ======================================== */

/* Primary orange buttons need darker background */
.aiab-button--primary,
.aiab-btn-primary,
button[type="submit"] {
  background: var(--color-primary-dark);
  color: white;
  border-color: var(--color-primary-dark);
}

.aiab-button--primary:hover,
.aiab-btn-primary:hover,
button[type="submit"]:hover {
  background: #a65e00;
  border-color: #a65e00;
}

/* Outline orange buttons need darker color */
.aiab-button--outline-primary,
.aiab-btn-outline-primary {
  color: #a65e00;
  border-color: var(--color-primary-dark);
}

.aiab-button--outline-primary:hover,
.aiab-btn-outline-primary:hover {
  background: var(--color-primary-dark);
  color: white;
}

/* ========================================
   NAVIGATION CONTRAST FIXES
   ======================================== */

/* Site logo and nav items with orange */
.aiab-site-logo {
  color: #a65e00; /* Darker orange for better contrast */
}

.horizontal a:hover,
.horizontal a:focus {
  color: #a65e00;
}

.horizontal .aiab-active > a {
  color: #a65e00;
  font-weight: 600;
}

/* ========================================
   LINK CONTRAST FIXES
   ======================================== */

/* Default link colors need darker orange */
a {
  color: #a65e00; /* Darker orange, 7.6:1 contrast ratio */
}

a:hover {
  color: var(--color-primary-dark);
}

a:visited {
  color: #8a4e00; /* Even darker for visited */
}

/* ========================================
   FORM VALIDATION STATES
   ======================================== */

/* Warning/Orange states need darker colors */
.aiab-text-warning,
.aiab-alert-warning,
.aiab-badge-warning {
  color: #856404; /* Dark amber for text */
  background-color: #fff3cd; /* Light amber background */
  border-color: #ffeebb;
}

/* ========================================
   BADGE & TAG CONTRAST
   ======================================== */

.aiab-badge--primary,
.aiab-tag--primary {
  background: var(--color-primary-dark);
  color: white;
}

.aiab-badge--primary-light,
.aiab-tag--primary-light {
  background: #fff3e0;
  color: #a65e00;
  border: 1px solid #ffcc80;
}

/* ========================================
   FOOTER CONTRAST FIXES
   ======================================== */

.aiab-footer a {
  color: #6c757d;
}

.aiab-footer a:hover {
  color: #a65e00; /* Darker orange for better contrast */
}

.aiab-footer__brand {
  color: #a65e00;
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

/* Text color utilities with proper contrast */
.aiab-text-primary {
  color: #a65e00; /* AA compliant */
}

.aiab-text-primary-light {
  color: var(--color-primary-dark); /* Use sparingly */
}

.aiab-bg-primary {
  background-color: var(--color-primary-dark);
  color: white;
}

.aiab-bg-primary-dark {
  background-color: #a65e00;
  color: white;
}

/* Border utilities */
.aiab-border-primary {
  border-color: var(--color-primary-dark);
}

/* ========================================
   ACCESSIBILITY INDICATORS
   ======================================== */

/* Focus indicators with proper contrast */
:focus {
  outline: 2px solid #a65e00;
  outline-offset: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}

:focus-visible {
  outline: 2px solid #a65e00;
  outline-offset: 2px;
}

/* Selection colors */
::selection {
  background: var(--color-primary-dark);
  color: white;
}

::-moz-selection {
  background: var(--color-primary-dark);
  color: white;
}

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

@media (prefers-contrast: high) {
  .hero,
  .examples-header,
  .docs-header {
    background: #8a4e00;
  }

  a {
    color: #6d3d00;
    text-decoration: underline;
  }

  .aiab-button--primary {
    background: #8a4e00;
    border: 2px solid white;
  }
}

/* ========================================
   DARK MODE ADJUSTMENTS
   ======================================== */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) a {
    color: var(--color-primary-hover); /* Lighter orange in dark mode */
  }

  :root:not([data-theme="light"]) a:hover {
    color: #ffb143;
  }

  :root:not([data-theme="light"]) .aiab-text-primary {
    color: var(--color-primary-hover);
  }

  :root:not([data-theme="light"]) .hero,
  :root:not([data-theme="light"]) .examples-header,
  :root:not([data-theme="light"]) .docs-header {
    background: linear-gradient(135deg, #a65e00 0%, #8a4e00 100%);
  }
}

/* ========================================
   PRINT ADJUSTMENTS
   ======================================== */

@media print {
  .hero,
  .examples-header,
  .docs-header {
    background: none;
    color: black;
    border-bottom: 2px solid var(--color-primary-dark);
  }

  a {
    color: black;
    text-decoration: underline;
  }
}