/**
 * 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; }
}

/* ========================================
   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;
    }
}