/* ===================================
   WCAG 2.1 Level AA Compliant Styles
   Site-wide Accessibility Rules
   =================================== */

/* ===================================
   WCAG-Compliant Link Styles
   =================================== */

/* Default link styling - 7:1 contrast ratio on white background */
a {
    color: #0056b3;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

/* Hover state - 9.7:1 contrast ratio */
a:hover {
    color: #003d82;
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

/* Visited links - 7.4:1 contrast ratio */
a:visited {
    color: #551a8b;
}

/* Focus state - WCAG requires visible focus indicator */
a:focus {
    outline: 3px solid #0056b3;
    outline-offset: 2px;
    background-color: #fffbcc;
    text-decoration: none;
}

/* Active state */
a:active {
    color: #003d82;
}

/* ===================================
   Keyboard Navigation
   =================================== */

/* Skip to content link for keyboard navigation */
.skip-to-content {
    position: absolute;
    left: -9999px;
    z-index: 999;
    padding: 1em;
    background-color: #0056b3;
    color: white;
    text-decoration: none;
}

.skip-to-content:focus {
    left: 50%;
    transform: translateX(-50%);
    top: 10px;
}

/* Global focus indicators for keyboard users */
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
    outline: 3px solid #ffbf47 !important;
    outline-offset: 2px !important;
}

/* Prevent inner focus ring on Kendo MultiSelect; keep wrapper focus indicator */
.k-multiselect .k-input-inner:focus-visible,
.k-multiselect .k-input-inner:focus,
.k-multiselect .k-searchbar:focus-visible,
.k-multiselect .k-searchbar:focus,
.k-multiselect .k-input-values:focus-visible,
.k-multiselect .k-input-values:focus {
    outline: none !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
}

/* Kendo wrappers often keep focus on inner elements; use focus-within */
.k-dropdown:focus-within,
.k-dropdownlist:focus-within,
.k-picker:focus-within,
.k-multiselect:focus-within,
.k-textbox:focus-within,
.k-input:focus-within {
    outline: 3px solid #ffbf47 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 86, 179, 0.35) !important;
}

/* ===================================
   WCAG-Compliant Button Styles
   =================================== */

/* Kendo UI Button Overrides for Accessibility */
.k-button.k-button-solid-base {
    background-color: #0056b3 !important; /* Dark blue with high contrast */
    color: #ffffff !important; /* White text - 7:1 contrast ratio */
    border-color: #0056b3 !important;
    font-weight: 500 !important;
}

.k-button.k-button-solid-base:hover,
.k-button.k-button-solid-base:focus {
    background-color: #003d82 !important; /* Darker blue on hover/focus - 9.7:1 contrast */
    border-color: #003d82 !important;
    color: #ffffff !important;
}

.k-button.k-button-solid-base:focus {
    outline: 3px solid #ffbf47 !important; /* Yellow outline for focus visibility */
    outline-offset: 2px !important;
    box-shadow: 0 0 0 0.25rem rgba(0, 86, 179, 0.5) !important;
}

.k-button.k-button-solid-base:active {
    background-color: #002952 !important; /* Even darker when clicked */
    border-color: #002952 !important;
    color: #ffffff !important;
}

/* ===================================
   Header Accessibility Overrides
   =================================== */

/* WEC Header Background - Ensure sufficient contrast for all text */
#wecheader {
    background: linear-gradient(to right, #1a5c8a, #1a1a4d) !important; /* Darker gradient for better contrast */
}

/* Wisconsin Elections Commission Title - White text with shadow for contrast */
.aWECTitle {
    color: #ffffff !important; /* Pure white */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8) !important; /* Shadow for extra contrast */
    font-weight: 500 !important;
}

/* Badger Voters Title - White text instead of black for consistency and contrast */
.aBVTitle {
    color: #ffffff !important; /* Changed from black to white */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8) !important; /* Shadow for extra contrast */
    font-weight: bold !important;
}

/* Navigation Links in Header - Ensure high contrast */
#wecheader .nav-link {
    color: #ffffff !important; /* Pure white text */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important; /* Subtle shadow for readability */
    font-weight: 500 !important;
}

#wecheader .nav-link:hover {
    color: #ffeb3b !important; /* Bright yellow on hover for visibility */
    text-decoration: underline !important;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8) !important;
}

#wecheader .nav-link:focus {
    outline: 3px solid #ffeb3b !important; /* Yellow outline for focus */
    outline-offset: 2px !important;
    background-color: rgba(255, 235, 59, 0.2) !important; /* Subtle yellow background */
    color: #ffffff !important;
}

/* Logo link focus - wrap full logo image bounds */
#wecheader .navbar-brand {
    display: inline-block;
}

#wecheader .navbar-brand img {
    display: block;
    border-radius: 6px;
}

#wecheader .navbar-brand:focus,
#wecheader .navbar-brand:focus-visible {
    outline: none !important;
    background-color: transparent !important;
}

#wecheader .navbar-brand:focus img,
#wecheader .navbar-brand:focus-visible img {
    box-shadow: 0 0 0 3px #ffffff, 0 0 0 6px #ffbf47 !important;
}

/* User info text in header */
#userInfo {
    color: #ffffff !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ===================================
   Form Field Accessibility
   =================================== */

/* Ensure labels have sufficient contrast and are readable */
label {
    color: #212529 !important; /* Dark text for labels */
    font-weight: 500 !important;
}

/* Kendo UI form controls - ensure proper contrast */
.k-dropdown,
.k-multiselect,
.k-textbox,
.k-input {
    border: 2px solid #495057 !important; /* Darker border for visibility */
}

.k-dropdown:focus,
.k-multiselect:focus,
.k-textbox:focus,
.k-input:focus {
    border-color: #0056b3 !important;
    outline: 3px solid #0056b3 !important;
    outline-offset: 2px !important;
}

/* Checkbox labels - ensure proper spacing and contrast */
.k-checkbox-label {
    color: #212529 !important;
    margin-left: 8px !important;
}

/* Warning/info text - ensure WCAG AA compliant color */
.wcag-warning-text,
.k-checkbox-label[style*="color:#B30000"],
span[style*="color:#B30000"] {
    color: #B30000; /* Darker red for better contrast (6:1 ratio) */
    font-weight: 500 !important;
}

/* Alert boxes - ensure sufficient contrast */
.alert-success {
    background-color: #d4edda !important; /* Light green background */
    border-color: #28a745 !important; /* Green border */
    color: #155724 !important; /* Dark green text - 8.6:1 contrast ratio */
}

.alert-success strong {
    color: #0d3d1a !important; /* Even darker green for emphasis */
    font-weight: 600 !important;
}

/* Field list styling */
.fieldlist {
    list-style: none;
    padding: 0;
}

.fieldlist li {
    margin-bottom: 1rem;
}

/* ===================================
   Print Accessibility
   =================================== */

@media print {
    a {
        text-decoration: underline;
        color: #000;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }
}