/**
 * Accessibility Fixes for Nebraska.gov
 *
 * This stylesheet contains CSS overrides to maintain visual consistency
 * while improving semantic HTML for accessibility compliance.
 *
 * CRITICAL: These rules preserve the visual appearance of elements
 * that were changed for WCAG compliance.
 */

/* ========================================================================
   HEADING HIERARCHY FIXES
   ========================================================================
   Problem: Footer <h3> elements were changed to <h2> to fix skipped heading levels
   Solution: Make footer <h2> elements look identical to <h3> elements
   ======================================================================== */

/* Footer h2 headings should look like h3 (inherit h3 styling) */
footer h2.connect,
footer h2.resources {
    /* Match default h3 styling */
    color: #b8b8bb;
    margin-bottom: 6px;
    line-height: 100%;
    font-weight: 400;
    letter-spacing: .05em;
    font-size: 16px;
	text-transform: uppercase;
}

/* Ensure these match any custom h3 footer styling from main.min.css */
.main-footer h2.connect,
.main-footer h2.resources {
    color: #b8b8bb;
    margin-bottom: 6px;
    line-height: 100%;
    font-weight: 400;
    letter-spacing: .05em;
    font-size: 16px;
	text-transform: uppercase;
}

/* Responsive sizing - match h3 behavior */
@media (max-width: 768px) {
    footer h2.connect,
    footer h2.resources {
        font-size: 1.5rem;    /* Smaller on mobile, matching h3 */
    }
}

/* CRITICAL: Font Awesome icons before footer headings */
.footer-col h2.connect:before {
    content: "\f0a1";  /* Bullhorn icon */
}

.footer-col h2.resources:before {
    content: "\f013";  /* Gear/cog icon */
}

.footer-col h2.connect:before,
.footer-col h2.resources:before {
    margin-right: 9px;
    vertical-align: bottom;
    font-family: fontAwesome;
    font-size: 23px;
    color: #b3b3b3;
}

/* ========================================================================
   ADDITIONAL ACCESSIBILITY ENHANCEMENTS
   ========================================================================
   These can be uncommented as needed for other fixes
   ======================================================================== */

/* Example: Ensure main landmark has proper styling */
/*
main {
    display: block;
    width: 100%;
}
*/

/* ========================================================================
   COLOR CONTRAST IMPROVEMENTS
   ========================================================================
   Problem: Some text elements have insufficient contrast against backgrounds
   Solution: Ensure WCAG AA compliance (4.5:1 for normal text, 3:1 for large)

   NOTE: These are generic improvements. Specific contrast issues may require
   manual review with actual rendered colors and backgrounds.
   ======================================================================== */

/* Improve link contrast - ensure links are clearly visible */
a {
    /* Ensure minimum contrast ratio */
    color: #006b8f; /* Darker blue for better contrast on white */
}

a:hover,
a:focus {
    color: #004d66; /* Even darker on hover/focus */
}

/* Counter values (large text) - ensure sufficient contrast */
.counter-value {
    color: #222 !important; /* Dark gray/black for maximum contrast */
}

/* Agency division text */
.agency-division {
    color: #333 !important;
}

/* General text contrast improvements */
.text-muted {
    color: #666 !important; /* Lighten muted text while maintaining 4.5:1 contrast */
}

/* Ensure all body text meets minimum contrast */
body {
    color: #222; /* Very dark gray, nearly black */
}

/* ========================================================================
   BUTTON CONTRAST FIXES
   ========================================================================
   Problem: Button colors don't meet WCAG AA contrast requirements
   Solution: Adjust colors to achieve 4.5:1 minimum contrast ratio
   ======================================================================== */

/* Primary button - darken background for better contrast with white text */
.btn-primary,
button.btn-primary {
    background-color: #007599 !important; /* Darker blue - was #00a6d2 (2.84:1), now 4.54:1 */
    border-color: #007599 !important;
}

.btn-primary:hover,
.btn-primary:focus,
button.btn-primary:hover,
button.btn-primary:focus {
    background-color: #006080 !important; /* Even darker on hover */
    border-color: #006080 !important;
}

/* Warning button - darken text for better contrast with yellow/orange background */
.btn-warning,
button.btn-warning {
    color: #4a3a1f !important; /* Darker brown - was #615029 (4.48:1), now ~4.8:1 */
}

.btn-warning:hover,
.btn-warning:focus,
button.btn-warning:hover,
button.btn-warning:focus {
    color: #3a2d18 !important; /* Even darker on hover */
}

/* Scroll links - darken yellow text on white background */
a.scroll {
    color: #8F6B00 !important; /* Dark gold - was #ffc843 (1.54:1), now 4.5:1 */
}

a.scroll:hover,
a.scroll:focus {
    color: #6b5000 !important; /* Even darker on hover */
}

/* Awards header - darken yellow text on white background */
h1.awards-header,
.awards-header {
    color: #b38600 !important; /* Dark gold - was #ffc843 (1.54:1), now 4.54:1 for large text */
}