/**
 * Compliapoint Public Styles
 * Accessibility enhancements for the frontend
 */

/* Skip Link */
.compliapoint-skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    background: #2563EB;
    color: #ffffff !important;
    padding: 12px 24px;
    z-index: 999999;
    text-decoration: none !important;
    font-weight: 600;
    font-size: 14px;
    border-radius: 0 0 8px 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: top 0.2s ease-in-out;
}

.compliapoint-skip-link:focus {
    top: 0;
    outline: none;
}

/* Screen Reader Text */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    clip-path: none;
    color: #21759b;
    display: block;
    font-size: 14px;
    font-weight: 700;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

/* Focus Visible - Enhanced */
:focus-visible {
    outline: 3px solid #2563EB !important;
    outline-offset: 2px !important;
}

/* Ensure links are distinguishable */
a:not([class]):not([role]) {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

a:not([class]):not([role]):hover {
    text-decoration-thickness: 2px;
}

/* High contrast focus for buttons */
button:focus-visible,
[role="button"]:focus-visible,
input[type="button"]:focus-visible,
input[type="submit"]:focus-visible,
input[type="reset"]:focus-visible {
    outline: 3px solid #2563EB !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.2);
}

/* Form field focus */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid #2563EB !important;
    outline-offset: 0 !important;
    border-color: #2563EB !important;
}

/* Ensure adequate touch target size */
@media (pointer: coarse) {
    a,
    button,
    input[type="button"],
    input[type="submit"],
    input[type="checkbox"],
    input[type="radio"],
    select {
        min-height: 44px;
        min-width: 44px;
    }
}

/* Reduce motion if requested */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    :focus-visible {
        outline-width: 4px !important;
    }
    
    a {
        text-decoration: underline !important;
        text-decoration-thickness: 2px !important;
    }
}

/* Forced colors mode (Windows High Contrast) */
@media (forced-colors: active) {
    :focus-visible {
        outline: 3px solid CanvasText !important;
    }
    
    .compliapoint-skip-link {
        background: Canvas;
        color: LinkText;
        border: 2px solid CanvasText;
    }
}

/* Ensure sufficient line height for readability */
p, li, td, th {
    line-height: 1.5;
}

/* Ensure adequate spacing for text */
main p,
article p,
.content p,
.entry-content p {
    max-width: 80ch; /* Optimal line length */
}

/* Visible required indicator */
.required,
[required] + label::after,
label .required {
    color: #dc2626;
}

/* Error message styling for accessibility */
.error-message,
.form-error,
[role="alert"] {
    color: #dc2626;
    font-weight: 500;
}

/* Success message styling */
.success-message,
[role="status"] {
    color: #059669;
}

/* Ensure tables are scrollable on small screens */
@media (max-width: 600px) {
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Caption styling */
figcaption,
.wp-caption-text {
    font-size: 0.9em;
    color: #6b7280;
    margin-top: 0.5em;
}

/* Ensure video/audio have visible controls */
video:not([controls]),
audio:not([controls]) {
    position: relative;
}

video:not([controls])::after,
audio:not([controls])::after {
    content: "Controls hidden";
    position: absolute;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.7);
    color: white;
    padding: 4px 8px;
    font-size: 12px;
}