/* ========================================================================
   Bogahost Accessibility Widget — WCAG 2.1 AA / EAA uyumlu
   Floating button (sol alt) + slide-in panel + persistent localStorage
   Tüm sınıflar bh-a11y* prefix'i ile namespace içinde
   ======================================================================== */

/* ============ TRIGGER BUTTON (her zaman görünür) ============ */
.bh-a11y-trigger{
    position:fixed;
    left:20px;
    bottom:20px;
    width:54px;
    height:54px;
    border-radius:50%;
    background:linear-gradient(135deg,#5b3fc7 0%,#7e5fe0 100%);
    color:#fff;
    border:none;
    cursor:pointer;
    z-index:99998;
    box-shadow:0 4px 12px rgba(91,63,199,.35),0 8px 24px rgba(0,0,0,.12);
    transition:transform .2s ease, box-shadow .2s ease;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
}
.bh-a11y-trigger:hover{transform:scale(1.08);box-shadow:0 6px 20px rgba(91,63,199,.45),0 10px 30px rgba(0,0,0,.15)}
.bh-a11y-trigger:focus{outline:3px solid #ffd700;outline-offset:3px}
.bh-a11y-trigger svg{width:28px;height:28px;fill:currentColor}

/* ============ PANEL (slide-in from left) ============ */
.bh-a11y-panel{
    position:fixed;
    left:-380px;
    bottom:20px;
    width:360px;
    max-height:calc(100vh - 40px);
    background:#fff;
    border-radius:14px;
    box-shadow:0 10px 40px rgba(0,0,0,.25);
    z-index:99999;
    transition:left .3s cubic-bezier(.4,0,.2,1);
    overflow:hidden;
    display:flex;
    flex-direction:column;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    font-size:14px;
    color:#1a1a2e;
    line-height:1.4;
}
.bh-a11y-panel.is-open{left:20px}
.bh-a11y-panel *{box-sizing:border-box}

.bh-a11y-head{
    padding:16px 20px;
    background:linear-gradient(135deg,#5b3fc7 0%,#7e5fe0 100%);
    color:#fff;
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-shrink:0;
}
.bh-a11y-head h2{margin:0;font-size:16px;font-weight:600;color:#fff}
.bh-a11y-close{
    background:rgba(255,255,255,.18);
    border:none;
    color:#fff;
    width:30px;
    height:30px;
    border-radius:50%;
    cursor:pointer;
    font-size:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:background .15s
}
.bh-a11y-close:hover{background:rgba(255,255,255,.3)}
.bh-a11y-close:focus{outline:2px solid #ffd700;outline-offset:2px}

.bh-a11y-body{
    padding:14px 18px;
    overflow-y:auto;
    flex:1;
}

.bh-a11y-section{margin-bottom:14px}
.bh-a11y-section-title{
    font-size:12px;
    font-weight:600;
    color:#6b7280;
    text-transform:uppercase;
    letter-spacing:.5px;
    margin-bottom:8px;
}

/* Toggle button grid */
.bh-a11y-options{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.bh-a11y-options.single{grid-template-columns:1fr}

.bh-a11y-opt{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 12px;
    background:#f3f4f6;
    border:2px solid transparent;
    border-radius:8px;
    cursor:pointer;
    transition:all .15s;
    color:#1a1a2e;
    font-size:13px;
    text-align:left;
    font-weight:500;
    line-height:1.3;
}
.bh-a11y-opt:hover{background:#e5e7eb}
.bh-a11y-opt:focus{outline:none;border-color:#5b3fc7}
.bh-a11y-opt.is-active{background:#ede9fe;border-color:#5b3fc7;color:#4c2db3}
.bh-a11y-opt-icon{
    flex-shrink:0;
    width:24px;
    height:24px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:16px;
}
.bh-a11y-opt-label{flex:1;min-width:0}

/* Font size buttons (special row) */
.bh-a11y-font-row{display:flex;gap:6px}
.bh-a11y-font-row .bh-a11y-opt{flex:1;justify-content:center;padding:8px 4px;font-size:11px}

/* Reset button */
.bh-a11y-reset{
    width:100%;
    padding:10px;
    background:#ef4444;
    color:#fff;
    border:none;
    border-radius:8px;
    cursor:pointer;
    font-size:13px;
    font-weight:600;
    transition:background .15s;
}
.bh-a11y-reset:hover{background:#dc2626}
.bh-a11y-reset:focus{outline:2px solid #ffd700;outline-offset:2px}

.bh-a11y-foot{
    padding:10px 18px;
    background:#f9fafb;
    border-top:1px solid #e5e7eb;
    font-size:11px;
    color:#6b7280;
    text-align:center;
    flex-shrink:0;
}
.bh-a11y-foot a{color:#5b3fc7;text-decoration:none}
.bh-a11y-foot a:hover{text-decoration:underline}

/* ============ MOBILE ============ */
@media (max-width:480px){
    .bh-a11y-panel{width:calc(100vw - 40px)}
    .bh-a11y-panel.is-open{left:20px;right:20px}
    .bh-a11y-trigger{width:48px;height:48px}
}

/* ========================================================================
   ACCESSIBILITY MODES — Applied via classes on <html> element
   ======================================================================== */

/* ----- Font size scaling ----- */
html.a11y-font-large{font-size:114%}
html.a11y-font-larger{font-size:128%}
html.a11y-font-largest{font-size:142%}

/* ----- High contrast (black/yellow scheme — WCAG AAA) ----- */
html.a11y-contrast-high body,
html.a11y-contrast-high body *{
    background-color:#000 !important;
    color:#fff !important;
    border-color:#fff !important;
}
html.a11y-contrast-high body a,
html.a11y-contrast-high body a *{color:#ffd700 !important}
html.a11y-contrast-high body button,
html.a11y-contrast-high body input,
html.a11y-contrast-high body textarea,
html.a11y-contrast-high body select{
    background-color:#000 !important;
    color:#fff !important;
    border:2px solid #fff !important;
}
html.a11y-contrast-high body img:not(.bh-keep-color){filter:grayscale(100%) contrast(120%)}
html.a11y-contrast-high .bh-a11y-panel,
html.a11y-contrast-high .bh-a11y-panel *{background-color:#000 !important;color:#fff !important}
html.a11y-contrast-high .bh-a11y-head,
html.a11y-contrast-high .bh-a11y-head *{background:#1a1a1a !important}

/* ----- Inverted colors (for low vision) ----- */
html.a11y-contrast-inverted body{filter:invert(100%) hue-rotate(180deg)}
html.a11y-contrast-inverted body img,
html.a11y-contrast-inverted body video,
html.a11y-contrast-inverted body iframe,
html.a11y-contrast-inverted body picture{filter:invert(100%) hue-rotate(180deg)}
html.a11y-contrast-inverted .bh-a11y-panel,
html.a11y-contrast-inverted .bh-a11y-trigger{filter:invert(100%) hue-rotate(180deg)}

/* ----- Highlight links ----- */
html.a11y-highlight-links a:not(.bh-a11y-close):not(.bh-a11y-trigger){
    background:#ffeb3b !important;
    color:#000 !important;
    text-decoration:underline !important;
    padding:2px 4px !important;
    border-radius:3px !important;
    box-shadow:0 0 0 2px #fbc02d;
}

/* ----- Highlight headings ----- */
html.a11y-highlight-headings h1,
html.a11y-highlight-headings h2,
html.a11y-highlight-headings h3,
html.a11y-highlight-headings h4,
html.a11y-highlight-headings h5,
html.a11y-highlight-headings h6{
    background:#fff59d !important;
    color:#1a1a2e !important;
    padding:6px 10px !important;
    border-left:4px solid #fbc02d !important;
    border-radius:4px !important;
}

/* ----- Readable font (dyslexia-friendly: OpenDyslexic-like fallback) ----- */
html.a11y-font-readable body,
html.a11y-font-readable body *:not(.bh-a11y-panel):not(.bh-a11y-panel *){
    font-family:Verdana,Geneva,Tahoma,sans-serif !important;
    letter-spacing:.5px !important;
    word-spacing:2px !important;
    line-height:1.7 !important;
}

/* ----- Large cursor ----- */
html.a11y-cursor-large,
html.a11y-cursor-large *{
    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 fill='%23000' stroke='%23fff' stroke-width='2' d='M8 4l28 22h-12l-2 14z'/%3E%3C/svg%3E"),auto !important;
}
html.a11y-cursor-large a,
html.a11y-cursor-large a *,
html.a11y-cursor-large button,
html.a11y-cursor-large 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 fill='%23ffd700' stroke='%23000' stroke-width='2' d='M12 8h4v8h8v4h-8v8h-4v-8H4v-4h8z'/%3E%3C/svg%3E"),pointer !important;
}

/* ----- Pause animations ----- */
html.a11y-no-animations *,
html.a11y-no-animations *::before,
html.a11y-no-animations *::after{
    animation-duration:0s !important;
    animation-delay:0s !important;
    animation-iteration-count:1 !important;
    transition-duration:0s !important;
    transition-delay:0s !important;
    scroll-behavior:auto !important;
}

/* ----- Reading guide (horizontal mouse-tracking line) ----- */
.bh-a11y-reading-guide{
    position:fixed;
    left:0;
    right:0;
    height:50px;
    background:rgba(0,0,0,.5);
    pointer-events:none;
    z-index:99997;
    display:none;
    box-shadow:0 0 0 2px rgba(255,215,0,.5);
}
html.a11y-reading-guide .bh-a11y-reading-guide{display:block}
html.a11y-reading-guide{cursor:crosshair}

/* ----- Skip-to-content link (always-on, visually hidden until focus) ----- */
.bh-a11y-skip{
    position:fixed;
    top:-100px;
    left:50%;
    transform:translateX(-50%);
    background:#5b3fc7;
    color:#fff;
    padding:12px 24px;
    border-radius:0 0 8px 8px;
    text-decoration:none;
    font-weight:600;
    z-index:100000;
    transition:top .2s;
}
.bh-a11y-skip:focus{top:0;color:#fff}

/* ----- Focus visibility enhancement ----- */
html.a11y-focus-enhanced *:focus{
    outline:3px solid #ffd700 !important;
    outline-offset:2px !important;
}