/* ═══════════════════════════════════════════════════════════════
   OSTIM Accessibility Widget — Self-hosted CSS
   OSTIM Technical University
   ═══════════════════════════════════════════════════════════════ */

/* ── Skip link ──────────────────────────────────────────────────── */
.ostim-skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    z-index: 2147483647;
    background: var(--ostim-primary, #005f73);
    color: #fff;
    padding: 10px 20px;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    border-radius: 0 0 6px 0;
    transition: top 0.15s;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}
.ostim-skip-link:focus {
    top: 0;
    outline: 3px solid #fff;
    outline-offset: 3px;
}

/* ── Widget container ───────────────────────────────────────────── */
#ostim-a11y-widget {
    position: fixed;
    z-index: 2147483646;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.4;
}

/* ── Trigger button ─────────────────────────────────────────────── */
#ostim-a11y-trigger {
    --ostim-sz: 48px;
    width:  var(--ostim-sz);
    height: var(--ostim-sz);
    border-radius: 50%;
    background: var(--ostim-primary, #005f73);
    color: #fff;
    border: 3px solid rgba(255,255,255,0.35);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 18px rgba(0,0,0,0.32);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    padding: 0;
}
#ostim-a11y-trigger:hover {
    transform: scale(1.12);
    box-shadow: 0 6px 22px rgba(0,0,0,0.42);
}
#ostim-a11y-trigger:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}
.ostim-trigger-img {
    width:  calc(var(--ostim-sz, 48px) - 16px);
    height: calc(var(--ostim-sz, 48px) - 16px);
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

/* ── Panel ──────────────────────────────────────────────────────── */
#ostim-a11y-panel {
    position: absolute;
    bottom: calc(100% + 14px);
    right: 0;
    width: 340px;
    max-height: 72vh;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 10px 44px rgba(0,0,0,0.22);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* hidden by default */
    opacity: 0;
    transform: scale(0.94) translateY(8px);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
#ostim-a11y-panel.ostim-open {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: auto;
}

/* ── Panel header ───────────────────────────────────────────────── */
.ostim-panel-hdr {
    background: var(--ostim-primary, #005f73);
    color: #fff;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}
.ostim-panel-hdr-left {
    display: flex;
    align-items: center;
    gap: 10px;
}
.ostim-panel-logo {
    width: 32px;
    height: 32px;
    object-fit: contain;
    border-radius: 6px;
    flex-shrink: 0;
}
.ostim-panel-title {
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.02em;
}
.ostim-close-btn {
    background: rgba(255,255,255,0.2);
    border: none;
    color: #fff;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.ostim-close-btn:hover   { background: rgba(255,255,255,0.36); }
.ostim-close-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ── Category sections ──────────────────────────────────────────── */
.ostim-section {
    padding: 10px 12px 4px;
    overflow-y: auto;
}
.ostim-section::-webkit-scrollbar { width: 4px; }
.ostim-section::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }

#ostim-a11y-panel > .ostim-section {
    flex-shrink: 0;
}
/* Make body area scrollable, not each section individually */
#ostim-a11y-panel {
    overflow-y: auto;
}
.ostim-section-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ostim-primary, #005f73);
    margin-bottom: 6px;
    padding-left: 2px;
}

/* ── Feature grid ───────────────────────────────────────────────── */
.ostim-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-bottom: 8px;
}

/* ── Feature buttons ────────────────────────────────────────────── */
.ostim-feat-btn {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 4px;
    border: 2px solid #e4e4e4;
    border-radius: 8px;
    background: #fafafa;
    cursor: pointer;
    color: #444;
    text-align: center;
    min-height: 64px;
    transition: border-color 0.15s, background 0.15s, color 0.15s, transform 0.1s;
    outline: none;
}
.ostim-feat-btn:hover {
    border-color: var(--ostim-primary, #005f73);
    background: #f0f9fb;
    color: var(--ostim-primary, #005f73);
    transform: translateY(-1px);
}
.ostim-feat-btn:focus-visible {
    outline: 2px solid var(--ostim-primary, #005f73);
    outline-offset: 2px;
}
.ostim-feat-btn.ostim-active {
    background: var(--ostim-primary, #005f73);
    border-color: var(--ostim-primary, #005f73);
    color: #fff;
    font-weight: 700;
    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.25);
}
.ostim-feat-btn.ostim-active .ostim-feat-label {
    font-weight: 800;
}
/* "ON" / "AÇIK" badge — visible state cue beyond color alone (WCAG 1.4.1) */
.ostim-feat-btn[data-on-label].ostim-active::after {
    content: attr(data-on-label);
    position: absolute;
    top: 3px;
    right: 3px;
    background: #fff;
    color: var(--ostim-primary, #005f73);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.04em;
    padding: 1px 4px;
    border-radius: 3px;
    line-height: 1;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.1);
    pointer-events: none;
}
.ostim-feat-icon {
    width:  22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ostim-feat-icon svg { width: 22px; height: 22px; }
.ostim-feat-label {
    font-size: 9px;
    font-weight: 600;
    line-height: 1.2;
}

/* ── Panel footer ───────────────────────────────────────────────── */
.ostim-panel-ftr {
    padding: 10px 14px;
    border-top: 1px solid #eee;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    background: #fafafa;
}
.ostim-reset-btn {
    background: transparent;
    border: 2px solid var(--ostim-primary, #005f73);
    color: var(--ostim-primary, #005f73);
    border-radius: 6px;
    padding: 5px 14px;
    cursor: pointer;
    font-weight: 700;
    font-size: 12px;
    transition: background 0.15s, color 0.15s;
}
.ostim-reset-btn:hover {
    background: var(--ostim-primary, #005f73);
    color: #fff;
}
.ostim-credit {
    font-size: 9px;
    color: #aaa;
    font-style: italic;
}

/* ── Reading guide ──────────────────────────────────────────────── */
#ostim-reading-guide {
    position: fixed;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--ostim-primary, #005f73);
    opacity: 0.75;
    pointer-events: none;
    z-index: 2147483640;
    transition: top 0.08s linear;
}

/* ── Reading mask ───────────────────────────────────────────────── */
#ostim-reading-mask {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 2147483639;
}
.ostim-mask-top, .ostim-mask-bottom {
    position: absolute;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.5);
}
.ostim-mask-top    { top: 0; }
.ostim-mask-bottom { bottom: 0; }

/* ═══════════════════════════════════════════════════════════════
   ACCESSIBILITY FEATURE OVERRIDES
   All apply to <body> via class toggle — !important ensures
   they override site styles.
   ═══════════════════════════════════════════════════════════════ */

/* ── Font size (controlled via JS on :root font-size) ─────────── */

/* ── Readable font ──────────────────────────────────────────────── */
body.ostim-readable-font,
body.ostim-readable-font * {
    font-family: Arial, Helvetica, sans-serif !important;
}

/* ── Dyslexia-friendly font (OpenDyslexic fallback to Comic Sans) ─ */
body.ostim-dyslexia-font,
body.ostim-dyslexia-font * {
    font-family: "Comic Sans MS", "Comic Sans", cursive !important;
    letter-spacing: 0.05em !important;
    word-spacing: 0.1em !important;
}

/* ── Letter spacing ─────────────────────────────────────────────── */
body.ostim-letter-spacing,
body.ostim-letter-spacing * { letter-spacing: 0.14em !important; }

/* ── Word spacing ───────────────────────────────────────────────── */
body.ostim-word-spacing,
body.ostim-word-spacing * { word-spacing: 0.18em !important; }

/* ── Line height (cycler: 1.0 / 1.5 / 2.0 / 3.0) ────────────────── */
body.ostim-line-height-on,
body.ostim-line-height-on * { line-height: var(--ostim-lh, 1.5) !important; }

/* ── Text alignment ─────────────────────────────────────────────── */
body.ostim-text-left    p, body.ostim-text-left    li,
body.ostim-text-left    h1, body.ostim-text-left   h2,
body.ostim-text-left    h3, body.ostim-text-left   h4 { text-align: left    !important; }
body.ostim-text-center  p, body.ostim-text-center  li,
body.ostim-text-center  h1, body.ostim-text-center h2,
body.ostim-text-center  h3, body.ostim-text-center h4 { text-align: center  !important; }
body.ostim-text-right   p, body.ostim-text-right   li,
body.ostim-text-right   h1, body.ostim-text-right  h2,
body.ostim-text-right   h3, body.ostim-text-right  h4 { text-align: right   !important; }
body.ostim-text-justify p, body.ostim-text-justify li,
body.ostim-text-justify h1,body.ostim-text-justify h2,
body.ostim-text-justify h3,body.ostim-text-justify h4 { text-align: justify !important; }

/* ── High contrast ──────────────────────────────────────────────── */
body.ostim-high-contrast,
body.ostim-high-contrast * {
    background: #000000 !important;
    color: #ffffff !important;
    border-color: #ffffff !important;
}
body.ostim-high-contrast a,
body.ostim-high-contrast a * { color: #ffff00 !important; }
body.ostim-high-contrast img { filter: invert(1) !important; }

/* ── Low contrast ───────────────────────────────────────────────── */
body.ostim-low-contrast { filter: contrast(0.65); }

/* ── Grayscale ──────────────────────────────────────────────────── */
body.ostim-grayscale { filter: grayscale(1); }

/* ── Negative contrast ──────────────────────────────────────────── */
body.ostim-negative-contrast { filter: invert(1) hue-rotate(180deg); }

/* ── Light background ───────────────────────────────────────────── */
body.ostim-light-bg,
body.ostim-light-bg * {
    background-color: #ffffff !important;
    color: #000000 !important;
}

/* ── Dark mode ──────────────────────────────────────────────────── */
body.ostim-dark-bg,
body.ostim-dark-bg * {
    background-color: #1a1a2e !important;
    color: #e0e0e0 !important;
}
body.ostim-dark-bg a { color: #90caf9 !important; }
body.ostim-dark-bg img { opacity: 0.88; }

/* ── Sepia ──────────────────────────────────────────────────────── */
body.ostim-sepia { filter: sepia(0.6); }

/* ── Links ──────────────────────────────────────────────────────── */
body.ostim-underline-links a {
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
}
body.ostim-highlight-links a {
    background: #ffff00 !important;
    color: #000000 !important;
    padding: 0 3px;
    border-radius: 3px;
}

/* ── Headings ───────────────────────────────────────────────────── */
body.ostim-highlight-headings h1,
body.ostim-highlight-headings h2,
body.ostim-highlight-headings h3,
body.ostim-highlight-headings h4,
body.ostim-highlight-headings h5,
body.ostim-highlight-headings h6 {
    outline: 2px solid var(--ostim-primary, #005f73) !important;
    outline-offset: 4px;
}

/* ── Focus indicator ────────────────────────────────────────────── */
body.ostim-focus-indicator *:focus {
    outline: 3px solid var(--ostim-primary, #005f73) !important;
    outline-offset: 4px !important;
}

/* ── Pause animations ───────────────────────────────────────────── */
body.ostim-pause-animations *,
body.ostim-pause-animations *::before,
body.ostim-pause-animations *::after {
    animation-play-state: paused !important;
    animation: none !important;
    transition: none !important;
}

/* ── Big cursor — dark ──────────────────────────────────────────── */
body.ostim-big-cursor-dark,
body.ostim-big-cursor-dark * {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M5 5 L5 35 L15 25 L22 38 L27 36 L20 23 L35 23 Z' fill='%23000' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") 0 0, auto !important;
}

/* ── Big cursor — light ─────────────────────────────────────────── */
body.ostim-big-cursor-light,
body.ostim-big-cursor-light * {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M5 5 L5 35 L15 25 L22 38 L27 36 L20 23 L35 23 Z' fill='%23fff' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") 0 0, auto !important;
}

/* ── Hide images ────────────────────────────────────────────────── */
body.ostim-hide-images img,
body.ostim-hide-images video,
body.ostim-hide-images svg:not(#ostim-a11y-widget svg),
body.ostim-hide-images picture { visibility: hidden !important; }

/* ── Zoom page ──────────────────────────────────────────────────── */
body.ostim-large-scale { zoom: 1.25; }

/* ── Bigger click areas (WCAG 2.5.8 Target Size, Level AA) ─────── */
/* Apply a 24×24 CSS min-size to interactive controls.              */
/* Links are inline by default so we promote them to inline-block   */
/* (min-* only applies to non-inline boxes).                        */
body.ostim-big-targets a:not(#ostim-a11y-widget a):not(.ostim-skip-link) {
    display: inline-block !important;
    min-width: 24px !important;
    min-height: 24px !important;
    padding: 2px 4px !important;
    line-height: 1.3 !important;
}
body.ostim-big-targets button:not(#ostim-a11y-widget button),
body.ostim-big-targets [role="button"]:not(#ostim-a11y-widget [role="button"]),
body.ostim-big-targets input[type="button"],
body.ostim-big-targets input[type="submit"],
body.ostim-big-targets input[type="reset"],
body.ostim-big-targets input[type="checkbox"],
body.ostim-big-targets input[type="radio"] {
    min-width: 24px !important;
    min-height: 24px !important;
}
/* Keep buttons that contain only an icon visually circular/square-ish */
body.ostim-big-targets .navbar-toggler,
body.ostim-big-targets .btn-close {
    padding: 6px !important;
}

/* ── Screen-reader only (visually hidden) ───────────────────────── */
.ostim-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ── High contrast safety — widget exempt ───────────────────────── */
body.ostim-high-contrast    #ostim-a11y-widget *,
body.ostim-negative-contrast #ostim-a11y-widget *,
body.ostim-dark-bg           #ostim-a11y-widget *,
body.ostim-light-bg          #ostim-a11y-widget * {
    background-color: revert !important;
    color: revert !important;
    border-color: revert !important;
    filter: none !important;
}

/* ── Mobile ─────────────────────────────────────────────────────── */
@media (max-width: 500px) {
    #ostim-a11y-panel {
        width: 290px;
        max-height: 65vh;
    }
    .ostim-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 5px;
    }
    .ostim-feat-btn {
        min-height: 58px;
        padding: 6px 3px;
    }
    .ostim-feat-icon svg { width: 18px; height: 18px; }
    .ostim-feat-label { font-size: 8px; }
}

/* ── Print — hide widget ────────────────────────────────────────── */
@media print {
    #ostim-a11y-widget, .ostim-skip-link { display: none !important; }
}

/* ── WCAG 2.4.7 — Focus Visible (always on, site-wide) ─────────── */
/* This is separate from the opt-in toggle feature.                  */
/* Applies to all focusable elements on the page by default.         */
*:focus-visible {
    outline: 3px solid #005f73 !important;
    outline-offset: 3px !important;
}

/* Exempt the widget's own buttons — they have their own focus styles */
#ostim-a11y-widget *:focus-visible {
    outline: revert !important;
    outline-offset: revert !important;
}