/**
 * Grantium Accessibility Enhancements CSS
 * 
 * This CSS provides accessibility improvements for Grantium Core,
 * particularly focused on screen reader compatibility and ARIA support.
 */

/* Screen reader only utility class */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Ensure growl messages are properly announced */
.ui-growl-item-container {
    /* Enhance ARIA live region behavior */
    position: relative;
}

.ui-growl-item-container[aria-live] {
    /* Ensure the live region is properly configured */
    position: relative;
}

/* Focus management for accessibility */
.ui-growl .ui-growl-item {
    /* Ensure keyboard navigation works properly */
    outline: none;
}

.ui-growl .ui-growl-item:focus {
    /* Add visible focus indicator */
    outline: 2px solid #1759f5;
    outline-offset: 2px;
}

/* Improve contrast for screen readers and low vision users */
.ui-growl-error .ui-growl-item {
    /* Ensure sufficient contrast for error messages */
    background-color: #d32f2f !important;
}

.ui-growl-warn .ui-growl-item {
    /* Ensure sufficient contrast for warning messages */
    background-color: #f57c00 !important;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .ui-growl .ui-growl-item {
        border: 2px solid;
    }
    
    .ui-growl-info .ui-growl-item {
        border-color: #ffffff;
    }
    
    .ui-growl-warn .ui-growl-item {
        border-color: #ffffff;
    }
    
    .ui-growl-error .ui-growl-item {
        border-color: #ffffff;
    }
    
    .ui-growl-fatal .ui-growl-item {
        border-color: #ffffff;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .ui-growl .ui-growl-item-container {
        /* Disable animations for users who prefer reduced motion */
        animation: none !important;
        transition: none !important;
    }
}

/* Ensure screen reader announcements are properly styled */
#grantium-sr-announcer {
    /* This is our dedicated screen reader announcement region */
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    
    /* Ensure it doesn't interfere with user selection */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Improve modal accessibility */
.modal[aria-labelledby] {
    /* Ensure modal has proper labeling */
    outline: none;
}

.modal .close[aria-hidden="true"] {
    /* Ensure close button is properly hidden from screen readers when appropriate */
    position: relative;
}

.modal .close:focus {
    /* Improve focus visibility for close button */
    outline: 2px solid #1759f5;
    outline-offset: 2px;
}

/* Form accessibility improvements */
.ui-material label[for] {
    /* Ensure labels are properly associated with inputs */
    cursor: pointer;
}

.ui-material .ui-inputtext:focus + label,
.ui-material .ui-password:focus + label {
    /* Improve label visibility when input is focused */
    color: #1759f5;
}

/* Button accessibility improvements */
.btn[aria-label] {
    /* Ensure buttons with ARIA labels are properly styled */
    position: relative;
}

.btn:focus {
    /* Improve focus visibility for all buttons */
    outline: 2px solid #1759f5;
    outline-offset: 2px;
}

/* Skip links for keyboard navigation */
.skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: #1759f5;
    color: white;
    padding: 8px;
    text-decoration: none;
    z-index: 100000;
    border-radius: 4px;
}

.skip-link:focus {
    top: 6px;
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}
