/* ============================================
   Accessibility Widget
   ============================================ */

/* --- Design Tokens --- */
.a11y-widget {
    --a11y-primary: var(--primary, #357C7A);
    --a11y-bg: #FFFFFF;
    --a11y-text: #1A1A1A;
    --a11y-border: #E5E5E5;
    --a11y-active: var(--primary, #357C7A);
    --a11y-hover: #F5F5F5;
    --a11y-panel-width: 320px;
    --a11y-z-button: var(--z-fixed, 35);
    --a11y-z-overlay: calc(var(--z-modal, 50) + 5);
    --a11y-z-panel: calc(var(--z-modal, 50) + 6);
}

/* --- Floating Button --- */
.a11y-toggle-btn {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    background: var(--a11y-primary);
    color: #FFFFFF;
    border: none;
    border-radius: 8px 0 0 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--a11y-z-button);
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    padding: 0;
}

.a11y-toggle-btn:hover {
    transform: translateY(-50%) scale(1.05);
    box-shadow: -3px 0 12px rgba(0, 0, 0, 0.2);
}

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

.a11y-toggle-btn .a11y-icon {
    width: 28px;
    height: 28px;
    fill: currentColor;
}

@media (max-width: 768px) {
    .a11y-toggle-btn {
        width: 40px;
        height: 40px;
    }
    .a11y-toggle-btn .a11y-icon {
        width: 22px;
        height: 22px;
    }
}

/* --- Overlay --- */
.a11y-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: var(--a11y-z-overlay);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.a11y-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* --- Panel --- */
.a11y-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: var(--a11y-panel-width);
    height: 100vh;
    height: 100dvh;
    background: var(--a11y-bg);
    z-index: var(--a11y-z-panel);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
}

.a11y-panel.active {
    transform: translateX(0);
}

@media (max-width: 768px) {
    .a11y-panel {
        width: 100%;
        right: auto;
        left: 0;
        transform: translateX(100%);
    }
    .a11y-panel.active {
        transform: translateX(0);
    }
}

/* --- Panel Header --- */
.a11y-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: var(--a11y-primary);
    color: #FFFFFF;
    flex-shrink: 0;
}

.a11y-panel-header h2 {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.a11y-panel-header h2 .a11y-icon {
    width: 22px;
    height: 22px;
    fill: currentColor;
}

.a11y-header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.a11y-header-btn {
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: #FFFFFF;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
    padding: 0;
}

.a11y-header-btn:hover {
    background: rgba(255, 255, 255, 0.25);
}

.a11y-header-btn:focus-visible {
    outline: 2px solid #FFFFFF;
    outline-offset: 2px;
}

.a11y-header-btn .a11y-icon {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

/* --- Panel Body --- */
.a11y-panel-body {
    padding: 16px 20px;
    flex: 1;
    overflow-y: auto;
}

/* --- Sections --- */
.a11y-section {
    margin-bottom: 24px;
}

.a11y-section-title {
    font-size: 13px;
    font-weight: 600;
    color: #666666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--a11y-border);
}

/* --- Feature Grid --- */
.a11y-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* --- Feature Button --- */
.a11y-feature-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 14px 8px;
    background: #F8F8F8;
    border: 2px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
    min-height: 80px;
    text-align: center;
}

.a11y-feature-btn:hover {
    background: var(--a11y-hover);
}

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

.a11y-feature-btn.active {
    border-color: var(--a11y-active);
    background: rgba(53, 124, 122, 0.08);
}

.a11y-feature-btn .a11y-icon {
    width: 24px;
    height: 24px;
    fill: var(--a11y-text);
}

.a11y-feature-btn.active .a11y-icon {
    fill: var(--a11y-active);
}

.a11y-feature-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--a11y-text);
    line-height: 1.2;
}

/* --- Step Dots (for multi-step features) --- */
.a11y-step-dots {
    display: flex;
    gap: 4px;
    margin-top: 4px;
}

.a11y-step-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #D0D0D0;
    transition: background 0.2s ease;
}

.a11y-step-dot.active {
    background: var(--a11y-active);
}

/* --- Widget Scope Protection ---
   The widget must not be affected by its own global overrides.
   We reset critical properties inside .a11y-widget. */
.a11y-widget,
.a11y-widget *,
.a11y-widget *::before,
.a11y-widget *::after {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-style: normal !important;
    text-align: left !important;
    filter: none !important;
    letter-spacing: normal !important;
}

.a11y-widget img,
.a11y-widget svg,
.a11y-widget .a11y-icon {
    visibility: visible !important;
}

/* ============================================
   Feature Overrides — applied on <html>
   ============================================ */

/* --- 1. Font Scale --- */
html.a11y-font-scale-125 { --a11y-font-scale: 1.25; }
html.a11y-font-scale-150 { --a11y-font-scale: 1.5; }
html.a11y-font-scale-175 { --a11y-font-scale: 1.75; }

html[class*="a11y-font-scale-"] body {
    font-size: calc(1rem * var(--a11y-font-scale)) !important;
}

html[class*="a11y-font-scale-"] h1:not(.a11y-widget *) { font-size: calc(2.5rem * var(--a11y-font-scale)) !important; }
html[class*="a11y-font-scale-"] h2:not(.a11y-widget *) { font-size: calc(2rem * var(--a11y-font-scale)) !important; }
html[class*="a11y-font-scale-"] h3:not(.a11y-widget *) { font-size: calc(1.5rem * var(--a11y-font-scale)) !important; }
html[class*="a11y-font-scale-"] h4:not(.a11y-widget *) { font-size: calc(1.25rem * var(--a11y-font-scale)) !important; }
html[class*="a11y-font-scale-"] p:not(.a11y-widget *),
html[class*="a11y-font-scale-"] li:not(.a11y-widget *),
html[class*="a11y-font-scale-"] span:not(.a11y-widget *),
html[class*="a11y-font-scale-"] a:not(.a11y-widget *),
html[class*="a11y-font-scale-"] label:not(.a11y-widget *),
html[class*="a11y-font-scale-"] input:not(.a11y-widget *),
html[class*="a11y-font-scale-"] textarea:not(.a11y-widget *),
html[class*="a11y-font-scale-"] button:not(.a11y-widget *):not(.a11y-feature-btn):not(.a11y-header-btn):not(.a11y-toggle-btn) {
    font-size: calc(1rem * var(--a11y-font-scale)) !important;
}

/* --- 2. Line Height --- */
html.a11y-line-height-130 { --a11y-line-height-scale: 1.3; }
html.a11y-line-height-160 { --a11y-line-height-scale: 1.6; }

html[class*="a11y-line-height-"] body,
html[class*="a11y-line-height-"] p:not(.a11y-widget *),
html[class*="a11y-line-height-"] li:not(.a11y-widget *),
html[class*="a11y-line-height-"] span:not(.a11y-widget *),
html[class*="a11y-line-height-"] h1:not(.a11y-widget *),
html[class*="a11y-line-height-"] h2:not(.a11y-widget *),
html[class*="a11y-line-height-"] h3:not(.a11y-widget *),
html[class*="a11y-line-height-"] h4:not(.a11y-widget *) {
    line-height: calc(1.6 * var(--a11y-line-height-scale)) !important;
}

/* --- 3. Align Left --- */
html.a11y-align-left body *:not(.a11y-widget):not(.a11y-widget *) {
    text-align: left !important;
}

/* --- 4. Readable Font --- */
html.a11y-readable-font body *:not(.a11y-widget):not(.a11y-widget *) {
    font-family: Arial, Helvetica, sans-serif !important;
    font-style: normal !important;
}

html.a11y-readable-font body *:not(.a11y-widget):not(.a11y-widget *) b,
html.a11y-readable-font body *:not(.a11y-widget):not(.a11y-widget *) strong {
    font-weight: 700 !important;
}

/* --- 5. High Contrast --- */
html.a11y-high-contrast body:not(.a11y-widget) {
    background: #FFFFFF !important;
    color: #000000 !important;
}

html.a11y-high-contrast *:not(.a11y-widget):not(.a11y-widget *) {
    color: #000000 !important;
    border-color: #000000 !important;
    background-image: none !important;
    text-shadow: none !important;
    box-shadow: none !important;
}

html.a11y-high-contrast a:not(.a11y-widget a) {
    color: #0000EE !important;
    text-decoration: underline !important;
}

html.a11y-high-contrast button:not(.a11y-widget button),
html.a11y-high-contrast .cta-button,
html.a11y-high-contrast input[type="submit"] {
    background: #000000 !important;
    color: #FFFFFF !important;
    border: 2px solid #000000 !important;
}

html.a11y-high-contrast nav {
    background: #FFFFFF !important;
    border-bottom: 2px solid #000000 !important;
}

html.a11y-high-contrast img:not(.a11y-widget img) {
    filter: contrast(1.5) !important;
}

/* --- 6. Grayscale --- */
html.a11y-grayscale {
    filter: grayscale(1);
}

/* Protect the widget from grayscale */
html.a11y-grayscale .a11y-widget {
    filter: grayscale(0);
}

/* --- 7. Hide Images --- */
/* Hide content images but keep functional icons (inside links, buttons, nav) visible */
html.a11y-hide-images img:not(.a11y-widget img):not(.a11y-icon):not(a img):not(button img):not(nav img),
html.a11y-hide-images picture:not(.a11y-widget picture),
html.a11y-hide-images [role="img"]:not(.a11y-widget [role="img"]) {
    visibility: hidden !important;
}

/* Keep SVGs inside interactive elements visible — only hide standalone decorative SVGs */
html.a11y-hide-images svg:not(.a11y-widget svg):not(.a11y-icon):not(a svg):not(button svg):not(nav svg) {
    visibility: hidden !important;
}

/* Ensure logo in nav stays visible */
html.a11y-hide-images nav img {
    visibility: visible !important;
}

/* --- 8. Pause Animations --- */
html.a11y-pause-animations *:not(.a11y-widget):not(.a11y-widget *),
html.a11y-pause-animations *:not(.a11y-widget):not(.a11y-widget *)::before,
html.a11y-pause-animations *:not(.a11y-widget):not(.a11y-widget *)::after {
    animation: none !important;
    transition: none !important;
}

html.a11y-pause-animations {
    scroll-behavior: auto !important;
}

/* --- 9. Highlight Links --- */
html.a11y-highlight-links a:not(.a11y-widget a) {
    text-decoration: underline 3px #0000EE !important;
    color: #0000EE !important;
    background: rgba(0, 0, 238, 0.05) !important;
    border-radius: 2px;
    padding: 1px 2px;
}

html.a11y-highlight-links a:visited:not(.a11y-widget a) {
    color: #551A8B !important;
    text-decoration-color: #551A8B !important;
}

/* --- 10. Reading Mask --- */
.a11y-reading-mask-overlay {
    position: fixed;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: var(--a11y-z-overlay, 55);
    pointer-events: none;
    transition: none;
}

.a11y-reading-mask-top {
    top: 0;
}

/* --- 11. Focus Outline --- */
html.a11y-focus-outline *:focus-visible {
    outline: 3px solid var(--primary, #357C7A) !important;
    outline-offset: 2px !important;
}

/* --- 12. Show Structure --- */
html.a11y-show-structure h1::before,
html.a11y-show-structure h2::before,
html.a11y-show-structure h3::before,
html.a11y-show-structure h4::before,
html.a11y-show-structure h5::before,
html.a11y-show-structure h6::before {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    color: #FFFFFF;
    background: #E53E3E;
    padding: 1px 5px;
    border-radius: 3px;
    margin-right: 6px;
    vertical-align: middle;
    line-height: 1.4;
}

html.a11y-show-structure h1::before { content: "H1"; }
html.a11y-show-structure h2::before { content: "H2"; }
html.a11y-show-structure h3::before { content: "H3"; }
html.a11y-show-structure h4::before { content: "H4"; }
html.a11y-show-structure h5::before { content: "H5"; }
html.a11y-show-structure h6::before { content: "H6"; }

html.a11y-show-structure nav,
html.a11y-show-structure main,
html.a11y-show-structure section,
html.a11y-show-structure footer {
    outline: 2px dashed #E53E3E !important;
    outline-offset: 2px;
}

/* Do not show structure badges inside the widget */
html.a11y-show-structure .a11y-widget h2::before {
    display: none;
}