/**
 * TS Accessibility - Frontend Styles
 */

/* CSS Variables */
:root {
    --ts-a11y-primary: #0073aa;
    --ts-a11y-icon: #ffffff;
    --ts-a11y-fab-size: 56px;
}

/* ============================================
   FAB Container
   ============================================ */
.ts-a11y-fab-container {
    position: fixed;
    z-index: 9984;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

/* Posizionamento nell'header */
.ts-a11y-fab-container.fab-in-header {
    position: relative !important;
    bottom: auto !important;
    right: auto !important;
    left: auto !important;
    top: auto !important;
    z-index: 100 !important;
    margin: 0 5px;
}

/* When panel is active, increase container z-index to appear above other FABs */
.ts-a11y-fab-container:has(.ts-a11y-panel.active) {
    z-index: 10001;
}

/* Position classes - panel opens to the OPPOSITE side of FAB */
/* FAB on left = panel opens to the right */
.ts-a11y-position-left .ts-a11y-panel {
    left: calc(var(--ts-a11y-fab-size) + 50px);
    right: auto;
    bottom: calc(-1 * var(--ts-a11y-offset-v, 100px) + 20px);
    transform-origin: bottom left;
}

/* FAB on right = panel opens to the LEFT */
.ts-a11y-position-right .ts-a11y-panel {
    right: calc(var(--ts-a11y-fab-size) + 50px);
    left: auto;
    bottom: calc(-1 * var(--ts-a11y-offset-v, 100px) + 20px);
    transform-origin: bottom right;
}

/* ============================================
   FAB Trigger Button
   ============================================ */
.ts-a11y-fab-trigger {
    width: var(--ts-a11y-fab-size);
    height: var(--ts-a11y-fab-size);
    border-radius: 50%;
    border: none;
    background-color: var(--ts-a11y-primary);
    color: var(--ts-a11y-icon);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 9999;
}

.ts-a11y-fab-trigger:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

.ts-a11y-fab-trigger:focus {
    outline: 3px solid var(--ts-a11y-primary);
    outline-offset: 3px;
}

.ts-a11y-fab-trigger:active {
    transform: scale(0.95);
}

.ts-a11y-fab-trigger svg {
    width: 28px;
    height: 28px;
    transition: transform 0.3s ease;
}

.ts-a11y-fab-trigger[aria-expanded="true"] svg {
    transform: rotate(360deg);
}

/* ============================================
   Panel - Opens beside the FAB with maximum height
   ============================================ */
.ts-a11y-panel {
    position: absolute;
    background: var(--ts-a11y-primary);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
    padding: 0;
    width: 130px;
    /* 
     * Max height: 70vh to ensure header stays in viewport
     * Panel is positioned at bottom: 20px (absolute from viewport bottom)
     */
    max-height: 70vh;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Default transform - will be overridden by position-specific rules */
.ts-a11y-panel {
    transform: scale(0.9);
}

/* FAB on LEFT - panel slides in from left */
.ts-a11y-position-left .ts-a11y-panel {
    transform: scale(0.9) translateX(-10px);
}

.ts-a11y-position-left .ts-a11y-panel.active {
    opacity: 1 !important;
    visibility: visible !important;
    transform: scale(1) translateX(0) !important;
    z-index: 10000;
}

/* FAB on RIGHT - panel slides in from right */
.ts-a11y-position-right .ts-a11y-panel {
    transform: scale(0.9) translateX(10px);
}

.ts-a11y-position-right .ts-a11y-panel.active {
    opacity: 1 !important;
    visibility: visible !important;
    transform: scale(1) translateX(0) !important;
    z-index: 10000;
}



/* Panel Header */
.ts-a11y-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.ts-a11y-panel-header h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--ts-a11y-icon);
}

.ts-a11y-close {
    width: 24px;
    height: 24px;
    border: none;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ts-a11y-icon);
    transition: all 0.2s ease;
}

.ts-a11y-close:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: rotate(90deg);
}

.ts-a11y-close:focus {
    outline: 2px solid var(--ts-a11y-icon);
    outline-offset: 2px;
}

.ts-a11y-close svg {
    width: 12px;
    height: 12px;
}

/* Panel Content */
.ts-a11y-panel-content {
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    overflow-y: auto;
}

/* Feature Buttons - Compact horizontal layout */
.ts-a11y-feature-btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 6px 10px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    cursor: pointer;
    color: var(--ts-a11y-icon);
    transition: all 0.2s ease;
    gap: 8px;
}

.ts-a11y-feature-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateX(4px);
}

.ts-a11y-feature-btn:focus {
    outline: 2px solid var(--ts-a11y-icon);
    outline-offset: 2px;
}

.ts-a11y-feature-btn[aria-pressed="true"] {
    background: rgba(255, 255, 255, 0.95);
    color: var(--ts-a11y-primary);
    border-color: transparent;
}

.ts-a11y-feature-icon {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ts-a11y-feature-icon svg {
    width: 100%;
    height: 100%;
}

.ts-a11y-feature-label {
    font-size: 12px;
    font-weight: 500;
    text-align: left;
    line-height: 1.1;
}

/* Panel Footer */
.ts-a11y-panel-footer {
    padding: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.ts-a11y-reset {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    color: var(--ts-a11y-icon);
    font-size: 12px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.ts-a11y-reset:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.5);
}

.ts-a11y-reset:focus {
    outline: 2px solid var(--ts-a11y-icon);
    outline-offset: 2px;
}

.ts-a11y-reset svg {
    width: 14px;
    height: 14px;
}

/* ============================================
   Accessibility Feature Styles
   ============================================ */

/* Font Size - Increase */
body.ts-a11y-font-size-active,
body.ts-a11y-font-size-active p,
body.ts-a11y-font-size-active li,
body.ts-a11y-font-size-active span,
body.ts-a11y-font-size-active td,
body.ts-a11y-font-size-active th,
body.ts-a11y-font-size-active label,
body.ts-a11y-font-size-active input,
body.ts-a11y-font-size-active textarea,
body.ts-a11y-font-size-active select,
body.ts-a11y-font-size-active button {
    font-size: 120% !important;
    line-height: 1.6 !important;
}

body.ts-a11y-font-size-active h1 {
    font-size: 2.4em !important;
}

body.ts-a11y-font-size-active h2 {
    font-size: 2em !important;
}

body.ts-a11y-font-size-active h3 {
    font-size: 1.6em !important;
}

body.ts-a11y-font-size-active h4 {
    font-size: 1.4em !important;
}

body.ts-a11y-font-size-active h5 {
    font-size: 1.2em !important;
}

body.ts-a11y-font-size-active h6 {
    font-size: 1.1em !important;
}

/* High Contrast */
body.ts-a11y-high-contrast-active {
    background-color: #000 !important;
    color: #fff !important;
}

body.ts-a11y-high-contrast-active *:not(.ts-a11y-fab-container):not(.ts-a11y-fab-container *) {
    background-color: #000 !important;
    color: #fff !important;
    border-color: #fff !important;
}

body.ts-a11y-high-contrast-active a:not(.ts-a11y-fab-container a) {
    color: #ff0 !important;
    text-decoration: underline !important;
}

body.ts-a11y-high-contrast-active a:hover:not(.ts-a11y-fab-container a),
body.ts-a11y-high-contrast-active a:focus:not(.ts-a11y-fab-container a) {
    color: #0ff !important;
}

body.ts-a11y-high-contrast-active button:not(.ts-a11y-fab-container button),
body.ts-a11y-high-contrast-active input:not(.ts-a11y-fab-container input),
body.ts-a11y-high-contrast-active select:not(.ts-a11y-fab-container select),
body.ts-a11y-high-contrast-active textarea:not(.ts-a11y-fab-container textarea) {
    background-color: #333 !important;
    color: #fff !important;
    border: 2px solid #fff !important;
}

body.ts-a11y-high-contrast-active img,
body.ts-a11y-high-contrast-active video,
body.ts-a11y-high-contrast-active iframe,
body.ts-a11y-high-contrast-active svg:not(.ts-a11y-fab-container svg) {
    filter: grayscale(100%) contrast(1.2) !important;
}

/* Text Spacing */
body.ts-a11y-text-spacing-active,
body.ts-a11y-text-spacing-active * {
    letter-spacing: 0.12em !important;
    word-spacing: 0.16em !important;
    line-height: 1.8 !important;
}

body.ts-a11y-text-spacing-active p,
body.ts-a11y-text-spacing-active li,
body.ts-a11y-text-spacing-active dd {
    margin-bottom: 1.5em !important;
}

/* Highlight Links */
body.ts-a11y-highlight-links-active a {
    outline: 3px solid #ffcc00 !important;
    outline-offset: 2px !important;
    background-color: rgba(255, 204, 0, 0.2) !important;
    text-decoration: underline !important;
    text-decoration-thickness: 2px !important;
}

body.ts-a11y-highlight-links-active a:focus {
    outline-width: 4px !important;
    background-color: rgba(255, 204, 0, 0.4) !important;
}

/* Readable Font (Dyslexia-friendly) */
body.ts-a11y-readable-font-active,
body.ts-a11y-readable-font-active * {
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important;
}

/* Pause Animations */
body.ts-a11y-pause-animations-active *,
body.ts-a11y-pause-animations-active *::before,
body.ts-a11y-pause-animations-active *::after {
    animation-play-state: paused !important;
    animation: none !important;
    transition: none !important;
}

/* Keep FAB animations working */
body.ts-a11y-pause-animations-active .ts-a11y-fab-container,
body.ts-a11y-pause-animations-active .ts-a11y-fab-container *,
body.ts-a11y-pause-animations-active .ts-a11y-fab-container *::before,
body.ts-a11y-pause-animations-active .ts-a11y-fab-container *::after {
    animation-play-state: running !important;
    transition: all 0.3s ease !important;
}

/* Big Cursor */
body.ts-a11y-big-cursor-active,
body.ts-a11y-big-cursor-active * {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M8 8l28 12-12 4-4 12z' fill='%23000' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") 8 8, auto !important;
}

body.ts-a11y-big-cursor-active a,
body.ts-a11y-big-cursor-active button,
body.ts-a11y-big-cursor-active [role="button"],
body.ts-a11y-big-cursor-active input[type="submit"],
body.ts-a11y-big-cursor-active input[type="button"] {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M20 6v26l6-6h10l-16-20z' fill='%23000' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") 10 6, pointer !important;
}

/* Reading Mode */
body.ts-a11y-reading-mode-active aside,
body.ts-a11y-reading-mode-active .sidebar,
body.ts-a11y-reading-mode-active .widget,
body.ts-a11y-reading-mode-active .advertisement,
body.ts-a11y-reading-mode-active .ad,
body.ts-a11y-reading-mode-active [class*="banner"],
body.ts-a11y-reading-mode-active [class*="popup"],
body.ts-a11y-reading-mode-active [class*="modal"]:not(.ts-a11y-panel),
body.ts-a11y-reading-mode-active footer,
body.ts-a11y-reading-mode-active .footer,
body.ts-a11y-reading-mode-active nav:not(.post-navigation):not(.pagination),
body.ts-a11y-reading-mode-active .menu,
body.ts-a11y-reading-mode-active header:not(.entry-header):not(.post-header) {
    opacity: 0.15 !important;
    pointer-events: none !important;
}

body.ts-a11y-reading-mode-active main,
body.ts-a11y-reading-mode-active article,
body.ts-a11y-reading-mode-active .entry-content,
body.ts-a11y-reading-mode-active .post-content {
    max-width: 800px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    background: #fff !important;
    padding: 40px !important;
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.1) !important;
}

/* Keep accessibility widget visible */
body.ts-a11y-reading-mode-active .ts-a11y-fab-container {
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* ============================================
   Responsive Design
   ============================================ */
@media (max-width: 480px) {

    /* On mobile, panel opens above FAB */
    /* FAB on LEFT - panel aligns to left edge */
    .ts-a11y-position-left .ts-a11y-panel {
        left: 20px;
        right: auto;
        bottom: calc(var(--ts-a11y-fab-size) + 12px);
        width: calc(100vw - 40px);
        max-height: calc(100vh - var(--ts-a11y-offset-v, 100px) - var(--ts-a11y-fab-size) - 40px);
    }

    /* FAB on RIGHT - panel aligns to right edge */
    .ts-a11y-position-right .ts-a11y-panel {
        left: auto;
        right: 20px;
        bottom: calc(var(--ts-a11y-fab-size) + 12px);
        width: calc(100vw - 40px);
        max-height: calc(100vh - var(--ts-a11y-offset-v, 100px) - var(--ts-a11y-fab-size) - 40px);
    }

    .ts-a11y-position-left .ts-a11y-panel.active,
    .ts-a11y-position-right .ts-a11y-panel.active {
        transform: scale(1) translateY(0) !important;
    }

    .ts-a11y-feature-btn {
        padding: 8px 10px;
    }

    .ts-a11y-feature-label {
        font-size: 12px;
    }
}

/* ============================================
   Print Styles
   ============================================ */
@media print {
    .ts-a11y-fab-container {
        display: none !important;
    }
}

/* ============================================
   Reduced Motion Preference
   ============================================ */
@media (prefers-reduced-motion: reduce) {

    .ts-a11y-fab-trigger,
    .ts-a11y-panel,
    .ts-a11y-feature-btn,
    .ts-a11y-close,
    .ts-a11y-reset {
        transition: none !important;
    }
}