/**
 * DiabloDesign - Accessibility Plugin
 * @version 1.0.0
 * @author Paweł Kawka - DiabloDesign
 * @copyright (C) 2026 DiabloDesign. All rights reserved.
 */

/* ========================================
   CSS Variables
   ======================================== */
:root {
    --dd-a11y-primary: var(--dd-a11y-custom-primary, #0066cc);
    --dd-a11y-primary-dark: color-mix(in srgb, var(--dd-a11y-primary) 80%, black);
    --dd-a11y-bg: #ffffff;
    --dd-a11y-text: #333333;
    --dd-a11y-border: #e0e0e0;
    --dd-a11y-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    --dd-a11y-radius: 12px;
    --dd-a11y-transition: all 0.3s ease;
    --dd-a11y-z-index: 999999;
}

/* ========================================
   Screen Reader Only
   ======================================== */
.dd-a11y-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ========================================
   Widget Container
   ======================================== */
.dd-a11y-widget {
    position: fixed;
    z-index: var(--dd-a11y-z-index);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
}

/* Position variants */
.dd-a11y-position-bottom-right {
    bottom: var(--dd-a11y-offset, 20px);
    right: var(--dd-a11y-offset, 20px);
}

.dd-a11y-position-bottom-left {
    bottom: var(--dd-a11y-offset, 20px);
    left: var(--dd-a11y-offset, 20px);
}

.dd-a11y-position-top-right {
    top: var(--dd-a11y-offset, 20px);
    right: var(--dd-a11y-offset, 20px);
}

.dd-a11y-position-top-left {
    top: var(--dd-a11y-offset, 20px);
    left: var(--dd-a11y-offset, 20px);
}

/* ========================================
   Toggle Button
   ======================================== */
.dd-a11y-toggle {
    width: 56px;
    height: 56px;
    border: none;
    border-radius: 50%;
    background: var(--dd-a11y-primary);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--dd-a11y-shadow);
    transition: var(--dd-a11y-transition);
    padding: 0;
}

.dd-a11y-toggle:hover,
.dd-a11y-toggle:focus {
    transform: scale(1.1);
    background: var(--dd-a11y-primary-dark);
    outline: 3px solid rgba(255, 255, 255, 0.5);
    outline-offset: 2px;
}

.dd-a11y-toggle:focus-visible {
    outline: 3px solid var(--dd-a11y-primary);
    outline-offset: 4px;
}

.dd-a11y-toggle .dd-a11y-icon {
    width: 28px;
    height: 28px;
}

/* ========================================
   Panel
   ======================================== */
.dd-a11y-panel {
    position: absolute;
    width: 320px;
    max-height: 80vh;
    overflow-y: auto;
    background: var(--dd-a11y-bg);
    border-radius: var(--dd-a11y-radius);
    box-shadow: var(--dd-a11y-shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px) scale(0.95);
    transition: var(--dd-a11y-transition);
}

.dd-a11y-panel[aria-hidden="false"] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

/* Panel position based on widget position */
.dd-a11y-position-bottom-right .dd-a11y-panel {
    bottom: 70px;
    right: 0;
}

.dd-a11y-position-bottom-left .dd-a11y-panel {
    bottom: 70px;
    left: 0;
}

.dd-a11y-position-top-right .dd-a11y-panel {
    top: 70px;
    right: 0;
}

.dd-a11y-position-top-left .dd-a11y-panel {
    top: 70px;
    left: 0;
}

/* ========================================
   Panel Header
   ======================================== */
.dd-a11y-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--dd-a11y-border);
    background: linear-gradient(135deg, var(--dd-a11y-primary) 0%, var(--dd-a11y-primary-dark) 100%);
    border-radius: var(--dd-a11y-radius) var(--dd-a11y-radius) 0 0;
}

.dd-a11y-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: white;
}

.dd-a11y-close {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: var(--dd-a11y-transition);
}

.dd-a11y-close:hover,
.dd-a11y-close:focus {
    background: rgba(255, 255, 255, 0.3);
}

.dd-a11y-close svg {
    width: 20px;
    height: 20px;
}

/* ========================================
   Panel Content
   ======================================== */
.dd-a11y-content {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ========================================
   Groups
   ======================================== */
.dd-a11y-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dd-a11y-group-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--dd-a11y-text);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dd-a11y-buttons {
    display: flex;
    gap: 8px;
}

.dd-a11y-buttons-wrap {
    flex-wrap: wrap;
}

/* ========================================
   Buttons
   ======================================== */
.dd-a11y-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    border: 2px solid var(--dd-a11y-border);
    border-radius: 8px;
    background: var(--dd-a11y-bg);
    color: var(--dd-a11y-text);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--dd-a11y-transition);
}

.dd-a11y-btn:hover,
.dd-a11y-btn:focus {
    border-color: var(--dd-a11y-primary);
    color: var(--dd-a11y-primary);
}

.dd-a11y-btn:focus-visible {
    outline: 3px solid var(--dd-a11y-primary);
    outline-offset: 2px;
}

.dd-a11y-btn svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* Full width button */
.dd-a11y-btn-full {
    width: 100%;
    justify-content: flex-start;
}

/* Toggle button active state */
.dd-a11y-btn-toggle[aria-pressed="true"],
.dd-a11y-btn-toggle.active {
    background: var(--dd-a11y-primary);
    border-color: var(--dd-a11y-primary);
    color: white;
}

/* Reset button */
.dd-a11y-btn-reset {
    background: #f5f5f5;
    border-color: transparent;
    color: #666;
}

.dd-a11y-btn-reset:hover,
.dd-a11y-btn-reset:focus {
    background: #e0e0e0;
    border-color: transparent;
    color: #333;
}

/* ========================================
   Panel Footer
   ======================================== */
.dd-a11y-footer {
    padding: 12px 16px;
    border-top: 1px solid var(--dd-a11y-border);
}

.dd-a11y-footer .dd-a11y-btn {
    width: 100%;
}

/* ========================================
   Branding
   ======================================== */
.dd-a11y-branding {
    padding: 8px 16px;
    text-align: center;
    font-size: 11px;
    color: #999;
    border-top: 1px solid var(--dd-a11y-border);
}

.dd-a11y-branding a {
    color: #c60000;
    text-decoration: none;
    font-weight: 600;
}

.dd-a11y-branding a:hover {
    text-decoration: underline;
}

/* ========================================
   Accessibility Features - Applied Classes
   ======================================== */

/* Font Size */
html.dd-a11y-font-size-1 { font-size: 112.5%; }
html.dd-a11y-font-size-2 { font-size: 125%; }
html.dd-a11y-font-size-3 { font-size: 137.5%; }
html.dd-a11y-font-size-4 { font-size: 150%; }
html.dd-a11y-font-size--1 { font-size: 87.5%; }
html.dd-a11y-font-size--2 { font-size: 75%; }

/* High Contrast */
html.dd-a11y-contrast-high {
    filter: contrast(1.5);
}

html.dd-a11y-contrast-high body {
    background: #000 !important;
    color: #fff !important;
}

html.dd-a11y-contrast-high a {
    color: #ffff00 !important;
}

html.dd-a11y-contrast-high button,
html.dd-a11y-contrast-high input,
html.dd-a11y-contrast-high select,
html.dd-a11y-contrast-high textarea {
    background: #000 !important;
    color: #fff !important;
    border-color: #fff !important;
}

/* Negative Contrast (Invert) */
html.dd-a11y-contrast-negative {
    filter: invert(1) hue-rotate(180deg);
}

html.dd-a11y-contrast-negative img,
html.dd-a11y-contrast-negative video,
html.dd-a11y-contrast-negative .dd-a11y-widget {
    filter: invert(1) hue-rotate(180deg);
}

/* Light Contrast */
html.dd-a11y-contrast-light body {
    background: #fff !important;
    color: #000 !important;
}

html.dd-a11y-contrast-light a {
    color: #0000ff !important;
}

/* Dyslexic Font */
html.dd-a11y-dyslexic-font,
html.dd-a11y-dyslexic-font body,
html.dd-a11y-dyslexic-font * {
    font-family: 'OpenDyslexic', sans-serif !important;
}

/* Highlight Links */
html.dd-a11y-highlight-links a {
    background: #ffff00 !important;
    color: #000 !important;
    padding: 2px 4px !important;
    text-decoration: underline !important;
    outline: 2px solid #000 !important;
}

/* Stop Animations */
html.dd-a11y-stop-animations,
html.dd-a11y-stop-animations *,
html.dd-a11y-stop-animations *::before,
html.dd-a11y-stop-animations *::after {
    animation: none !important;
    transition: none !important;
}

/* Line Height */
html.dd-a11y-line-height body,
html.dd-a11y-line-height p,
html.dd-a11y-line-height li,
html.dd-a11y-line-height span,
html.dd-a11y-line-height div {
    line-height: 2 !important;
}

/* Letter Spacing */
html.dd-a11y-letter-spacing body,
html.dd-a11y-letter-spacing p,
html.dd-a11y-letter-spacing li,
html.dd-a11y-letter-spacing span,
html.dd-a11y-letter-spacing div {
    letter-spacing: 0.12em !important;
    word-spacing: 0.2em !important;
}

/* Grayscale */
html.dd-a11y-grayscale {
    filter: grayscale(100%);
}

/* Big Cursor */
html.dd-a11y-big-cursor,
html.dd-a11y-big-cursor * {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' stroke='%23fff' stroke-width='1' d='M7 2l12.5 11h-6l3.5 7-2.5 1-3.5-7-4 3.5z'/%3E%3C/svg%3E") 0 0, auto !important;
}

html.dd-a11y-big-cursor a,
html.dd-a11y-big-cursor button,
html.dd-a11y-big-cursor [role="button"],
html.dd-a11y-big-cursor input[type="submit"],
html.dd-a11y-big-cursor input[type="button"] {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' stroke='%23fff' stroke-width='1' d='M11 1v4h2V1h-2zm6.65 3.35l-2.79 2.79 1.41 1.41 2.79-2.79-1.41-1.41zM12 6a6 6 0 00-6 6 6 6 0 006 6 6 6 0 006-6 6 6 0 00-6-6zm-9 5v2h4v-2H3zm14 0v2h4v-2h-4zm-4.79 5.65l-2.79 2.79 1.41 1.41 2.79-2.79-1.41-1.41zm5.58 0l-1.41 1.41 2.79 2.79 1.41-1.41-2.79-2.79zM11 19v4h2v-4h-2z'/%3E%3C/svg%3E") 24 24, pointer !important;
}

/* Reading Guide */
html.dd-a11y-reading-guide .dd-a11y-reading-line {
    position: fixed;
    left: 0;
    right: 0;
    height: 40px;
    background: rgba(255, 255, 0, 0.3);
    border-top: 2px solid rgba(0, 0, 0, 0.3);
    border-bottom: 2px solid rgba(0, 0, 0, 0.3);
    pointer-events: none;
    z-index: 999998;
    transition: top 0.05s ease-out;
}

/* Hide Images */
html.dd-a11y-hide-images img,
html.dd-a11y-hide-images svg:not(.dd-a11y-icon),
html.dd-a11y-hide-images video,
html.dd-a11y-hide-images picture,
html.dd-a11y-hide-images [style*="background-image"] {
    opacity: 0.1 !important;
    filter: grayscale(100%) !important;
}

html.dd-a11y-hide-images .dd-a11y-widget img,
html.dd-a11y-hide-images .dd-a11y-widget svg {
    opacity: 1 !important;
    filter: none !important;
}

/* Text-to-Speech Active */
html.dd-a11y-tts-active {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24'%3E%3Cpath fill='%230066cc' stroke='%23fff' stroke-width='1' d='M14 3.23V5.29C16.89 6.15 19 8.83 19 12C19 15.17 16.89 17.84 14 18.7V20.77C18 19.86 21 16.28 21 12C21 7.72 18 4.14 14 3.23ZM16.5 12C16.5 10.23 15.5 8.71 14 7.97V16C15.5 15.29 16.5 13.76 16.5 12ZM3 9V15H7L12 20V4L7 9H3Z'/%3E%3C/svg%3E") 16 16, pointer !important;
}

html.dd-a11y-tts-active *:hover:not(.dd-a11y-widget *) {
    outline: 2px dashed #0066cc !important;
    outline-offset: 2px !important;
}

/* Currently reading element */
.dd-a11y-tts-reading {
    background: rgba(0, 102, 204, 0.2) !important;
    outline: 3px solid #0066cc !important;
    outline-offset: 2px !important;
    animation: dd-a11y-pulse 1s infinite !important;
}

@keyframes dd-a11y-pulse {
    0%, 100% { outline-color: #0066cc; }
    50% { outline-color: #004499; }
}

/* ========================================
   WCAG 2.1 AAA Preset
   ======================================== */
/* WCAG AAA requires: 
   - Contrast ratio 7:1 for normal text
   - Contrast ratio 4.5:1 for large text
   - Text resizable up to 200%
   - Line height at least 1.5
   - Paragraph spacing at least 2x font size
   - Letter spacing at least 0.12em
   - Word spacing at least 0.16em
*/

.dd-a11y-btn-wcag {
    background: linear-gradient(135deg, #1a5f2a 0%, #0d3d18 100%) !important;
    border: 2px solid #2ecc40 !important;
    position: relative;
}

.dd-a11y-btn-wcag::before {
    content: 'AAA';
    position: absolute;
    top: -8px;
    right: -8px;
    background: #2ecc40;
    color: #000;
    font-size: 10px;
    font-weight: bold;
    padding: 2px 5px;
    border-radius: 4px;
}

.dd-a11y-btn-wcag.active {
    background: linear-gradient(135deg, #2ecc40 0%, #1a5f2a 100%) !important;
}

/* WCAG Preset Active State */
html.dd-a11y-wcag-preset {
    /* Force minimum contrast ratio 7:1 */
    --wcag-bg: #000000;
    --wcag-text: #ffffff;
    --wcag-link: #ffff00;
    --wcag-focus: #00ffff;
}

html.dd-a11y-wcag-preset body {
    background-color: var(--wcag-bg) !important;
    color: var(--wcag-text) !important;
}

/* Text sizing - 200% capable */
html.dd-a11y-wcag-preset {
    font-size: 125% !important;
}

/* Line height 1.5 minimum (WCAG 1.4.12) */
html.dd-a11y-wcag-preset body,
html.dd-a11y-wcag-preset p,
html.dd-a11y-wcag-preset li,
html.dd-a11y-wcag-preset td,
html.dd-a11y-wcag-preset th,
html.dd-a11y-wcag-preset span,
html.dd-a11y-wcag-preset div {
    line-height: 1.8 !important;
}

/* Letter spacing 0.12em (WCAG 1.4.12) */
html.dd-a11y-wcag-preset body,
html.dd-a11y-wcag-preset p,
html.dd-a11y-wcag-preset li,
html.dd-a11y-wcag-preset span {
    letter-spacing: 0.12em !important;
    word-spacing: 0.16em !important;
}

/* Paragraph spacing (WCAG 1.4.12) */
html.dd-a11y-wcag-preset p {
    margin-bottom: 2em !important;
}

/* High contrast text */
html.dd-a11y-wcag-preset h1,
html.dd-a11y-wcag-preset h2,
html.dd-a11y-wcag-preset h3,
html.dd-a11y-wcag-preset h4,
html.dd-a11y-wcag-preset h5,
html.dd-a11y-wcag-preset h6 {
    color: var(--wcag-text) !important;
    border-bottom: 2px solid var(--wcag-text) !important;
    padding-bottom: 0.5em !important;
    margin-bottom: 1em !important;
}

/* Links must be distinguishable (WCAG 1.4.1) */
html.dd-a11y-wcag-preset a {
    color: var(--wcag-link) !important;
    text-decoration: underline !important;
    text-decoration-thickness: 2px !important;
    text-underline-offset: 3px !important;
}

html.dd-a11y-wcag-preset a:hover {
    background: var(--wcag-link) !important;
    color: var(--wcag-bg) !important;
}

html.dd-a11y-wcag-preset a:visited {
    color: #ff99ff !important;
}

/* Focus indicator 3px minimum (WCAG 2.4.7, 2.4.11, 2.4.12) */
html.dd-a11y-wcag-preset *:focus {
    outline: 3px solid var(--wcag-focus) !important;
    outline-offset: 3px !important;
}

html.dd-a11y-wcag-preset *:focus-visible {
    outline: 4px solid var(--wcag-focus) !important;
    outline-offset: 4px !important;
    box-shadow: 0 0 0 6px rgba(0, 255, 255, 0.3) !important;
}

/* Buttons and interactive elements */
html.dd-a11y-wcag-preset button,
html.dd-a11y-wcag-preset input,
html.dd-a11y-wcag-preset select,
html.dd-a11y-wcag-preset textarea {
    background: #222 !important;
    color: #fff !important;
    border: 2px solid #fff !important;
    padding: 0.75em 1em !important;
    font-size: inherit !important;
}

html.dd-a11y-wcag-preset button:hover,
html.dd-a11y-wcag-preset input[type="submit"]:hover,
html.dd-a11y-wcag-preset input[type="button"]:hover {
    background: #fff !important;
    color: #000 !important;
}

/* No animations (WCAG 2.3.3) */
html.dd-a11y-wcag-preset,
html.dd-a11y-wcag-preset *,
html.dd-a11y-wcag-preset *::before,
html.dd-a11y-wcag-preset *::after {
    animation: none !important;
    transition: none !important;
}

/* Images must have visible alt text indicators */
html.dd-a11y-wcag-preset img {
    border: 3px solid var(--wcag-text) !important;
}

html.dd-a11y-wcag-preset img[alt=""],
html.dd-a11y-wcag-preset img:not([alt]) {
    border-color: #ff0000 !important;
    outline: 3px dashed #ff0000 !important;
}

/* Tables */
html.dd-a11y-wcag-preset table {
    border-collapse: collapse !important;
    border: 2px solid var(--wcag-text) !important;
}

html.dd-a11y-wcag-preset th,
html.dd-a11y-wcag-preset td {
    border: 1px solid var(--wcag-text) !important;
    padding: 1em !important;
}

html.dd-a11y-wcag-preset th {
    background: #333 !important;
}

/* Skip to main content visible on focus */
html.dd-a11y-wcag-preset [href="#main"],
html.dd-a11y-wcag-preset [href="#content"],
html.dd-a11y-wcag-preset .skip-link {
    position: fixed !important;
    top: -100px;
    left: 10px;
    z-index: 1000000;
    background: var(--wcag-focus) !important;
    color: #000 !important;
    padding: 1em 2em !important;
    font-weight: bold !important;
}

html.dd-a11y-wcag-preset [href="#main"]:focus,
html.dd-a11y-wcag-preset [href="#content"]:focus,
html.dd-a11y-wcag-preset .skip-link:focus {
    top: 10px !important;
}

/* Don't affect accessibility widget itself */
html.dd-a11y-wcag-preset .dd-a11y-widget,
html.dd-a11y-wcag-preset .dd-a11y-widget * {
    all: revert;
}

html.dd-a11y-wcag-preset .dd-a11y-panel {
    background: var(--dd-a11y-bg) !important;
}

/* ========================================
   Responsive
   ======================================== */
@media (max-width: 480px) {
    .dd-a11y-panel {
        width: calc(100vw - 40px);
        max-width: 320px;
    }
    
    .dd-a11y-position-bottom-right .dd-a11y-panel,
    .dd-a11y-position-top-right .dd-a11y-panel {
        right: -10px;
    }
    
    .dd-a11y-position-bottom-left .dd-a11y-panel,
    .dd-a11y-position-top-left .dd-a11y-panel {
        left: -10px;
    }
}

/* ========================================
   Reduced Motion
   ======================================== */
@media (prefers-reduced-motion: reduce) {
    .dd-a11y-widget,
    .dd-a11y-widget * {
        transition: none !important;
        animation: none !important;
    }
}

/* ========================================
   Print
   ======================================== */
@media print {
    .dd-a11y-widget {
        display: none !important;
    }
}