/**
 * ============================================================================
 * FILE: outline-reset-replacements.css
 * PROJECT: Rooted Vitality Platform
 * PURPOSE: WCAG 2.1 AA - Replace outline: none with proper focus indicators
 * ============================================================================
 * 
 * This file provides replacements for all outline: none / outline: 0
 * declarations throughout the platform. Instead of removing focus indicators,
 * we replace them with visible :focus-visible styles that meet WCAG 2.4.7.
 * 
 * WCAG Criterion: 2.4.7 Focus Visible (Level AA)
 * Requirement: All keyboard operable elements must have visible focus indicator
 * 
 * Pattern: Replace "outline: none !important;" with ":focus-visible" styles
 * 
 * ============================================================================
 */

/* ============================================================================
   GLOBAL FOCUS-VISIBLE STYLES
   ============================================================================
   
   These styles replace outline: none throughout the platform.
   They ensure all interactive elements have visible keyboard focus.
   
*/

/* All interactive elements - base focus style */
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[role="button"]:focus-visible,
[role="menuitem"]:focus-visible,
[role="tab"]:focus-visible,
.interactive:focus-visible {
  outline: 2px solid var(--dm-accent-gold, #c8a882);
  outline-offset: 2px;
}

/* Light mode focus rings - higher contrast for light backgrounds */
button:focus-visible {
  outline: 2px solid #2c3e50;
  outline-offset: 2px;
}

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

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

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

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

/* Dark mode - use gold accent */
.dark-mode button:focus-visible,
.dark-mode a:focus-visible,
.dark-mode input:focus-visible,
.dark-mode select:focus-visible,
.dark-mode textarea:focus-visible {
  outline: 2px solid var(--dm-accent-gold, #c8a882);
  outline-offset: 2px;
}

/* Modal elements */
.modal-close:focus-visible,
.modal button:focus-visible {
  outline: 2px solid #2c3e50;
  outline-offset: 1px;
}

/* Form elements */
.form-control:focus-visible,
.form-input:focus-visible {
  outline: 2px solid #2c3e50;
  outline-offset: 1px;
}

/* Navigation */
.nav-link:focus-visible,
[role="navigation"] a:focus-visible {
  outline: 2px solid #2c3e50;
  outline-offset: 2px;
}

/* Dropdown/Menu items */
[role="menu"] [role="menuitem"]:focus-visible,
.dropdown-item:focus-visible {
  outline: 2px solid #2c3e50;
  outline-offset: 0px;
  background-color: rgba(44, 62, 80, 0.1);
}

/* Tab elements */
[role="tab"]:focus-visible {
  outline: 2px solid #2c3e50;
  outline-offset: -2px;
  border-bottom: 2px solid #2c3e50;
}

/* Searchable elements */
input[type="search"]:focus-visible,
.search-input:focus-visible {
  outline: 2px solid #2c3e50;
  outline-offset: 2px;
}

/* Icon buttons */
button.icon-btn:focus-visible,
[role="button"].icon-btn:focus-visible {
  outline: 2px solid #2c3e50;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Skip links */
.skip-link:focus {
  outline: 2px solid #2c3e50;
  outline-offset: 2px;
}