/* ============================================================
 * TIBES Accessibility Widget — CSS
 * Conform Directiva UE 2019/882 + WCAG 2.1 AA
 * ============================================================ */

/* ===== BUTON TRIGGER (bottom-left, peste cookie biscuit) ===== */
#tibes-a11y-trigger {
    position: fixed;
    bottom: 76px;       /* peste cookie biscuit (la 16px + 44 dim + 16 gap) */
    left: 16px;
    z-index: 99996;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 50%;
    background: #FF8A00; /* portocaliu accent — recunoscut universal pt accesibilitate */
    color: #FFFFFF;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(255,138,0,.4);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .2s ease, background .2s ease;
}

#tibes-a11y-trigger:hover,
#tibes-a11y-trigger:focus {
    background: #E67900;
    transform: scale(1.05);
    outline: 3px solid rgba(255,138,0,.3);
    outline-offset: 2px;
}

#tibes-a11y-trigger .material-symbols-outlined {
    font-size: 26px;
    font-variation-settings: 'FILL' 1, 'wght' 500;
}

/* ===== PANEL ===== */
#tibes-a11y-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    width: 360px;
    max-width: 90vw;
    background: #1F2937;
    color: #FFFFFF;
    box-shadow: -8px 0 32px rgba(0,0,0,.35);
    transform: translateX(100%);
    transition: transform .3s ease;
    overflow-y: auto;
    font-family: 'Inter', system-ui, sans-serif;
    padding: 20px 22px 28px;
}

#tibes-a11y-panel.tibes-a11y-visible {
    transform: translateX(0);
}

#tibes-a11y-panel[hidden] {
    /* hidden e doar initial, JS scoate atributul la prima deschidere */
    display: none;
}

.tibes-a11y-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255,255,255,.1);
}

.tibes-a11y-header h2 {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    gap: 10px;
}

.tibes-a11y-close {
    background: transparent;
    border: 0;
    color: #FFFFFF;
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    display: flex;
}

.tibes-a11y-close:hover,
.tibes-a11y-close:focus {
    background: rgba(255,255,255,.08);
}

.tibes-a11y-intro {
    font-size: 12px;
    color: rgba(255,255,255,.6);
    line-height: 1.5;
    margin: 10px 0 18px;
}

.tibes-a11y-intro strong { color: rgba(255,255,255,.85); font-weight: 600; }

.tibes-a11y-actions {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tibes-a11y-actions button {
    width: 100%;
    background: transparent;
    border: 0;
    color: #FFFFFF;
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    text-align: left;
    padding: 14px 12px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: background .15s ease;
}

.tibes-a11y-actions button:hover,
.tibes-a11y-actions button:focus {
    background: rgba(255,255,255,.06);
    outline: none;
}

.tibes-a11y-actions button[aria-pressed="true"] {
    background: rgba(255,138,0,.18);
    color: #FFB347;
}

.tibes-a11y-actions button[aria-pressed="true"] .material-symbols-outlined {
    color: #FF8A00;
}

.tibes-a11y-actions .material-symbols-outlined {
    font-size: 22px;
    color: rgba(255,255,255,.7);
    flex-shrink: 0;
}

.tibes-a11y-reset {
    margin-top: 18px;
    width: 100%;
    background: transparent;
    border: 1px solid rgba(255,255,255,.2);
    color: rgba(255,255,255,.7);
    font-family: inherit;
    font-size: 14px;
    padding: 12px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.tibes-a11y-reset:hover,
.tibes-a11y-reset:focus {
    background: rgba(255,255,255,.05);
    color: #FFFFFF;
}

.tibes-a11y-reset[disabled] {
    opacity: .5;
    cursor: not-allowed;
}

/* ===== FEATURE 1+2: TEXT SCALE ===== */
/* html[data-tibes-a11y-text="N"] aplicat la <html>, N = -2..-1..0..1..2..3..4..5 */
html[data-tibes-a11y-text="1"]  { font-size: 105% !important; }
html[data-tibes-a11y-text="2"]  { font-size: 110% !important; }
html[data-tibes-a11y-text="3"]  { font-size: 117% !important; }
html[data-tibes-a11y-text="4"]  { font-size: 125% !important; }
html[data-tibes-a11y-text="5"]  { font-size: 135% !important; }
html[data-tibes-a11y-text="-1"] { font-size: 95% !important; }
html[data-tibes-a11y-text="-2"] { font-size: 90% !important; }

/* ===== FEATURE 3: CONTRAST RIDICAT ===== */
/* Inverseaza culorile + filter ca sa scoata text contrast maxim */
html.tibes-a11y-contrast,
html.tibes-a11y-contrast body {
    background: #000000 !important;
}
html.tibes-a11y-contrast body,
html.tibes-a11y-contrast body * {
    color: #FFFF00 !important;
    background-color: #000000 !important;
    border-color: #FFFF00 !important;
}
html.tibes-a11y-contrast a,
html.tibes-a11y-contrast a * {
    color: #00FFFF !important;
    text-decoration: underline !important;
}
html.tibes-a11y-contrast button,
html.tibes-a11y-contrast input,
html.tibes-a11y-contrast textarea,
html.tibes-a11y-contrast select {
    background: #FFFF00 !important;
    color: #000000 !important;
    border: 2px solid #FFFF00 !important;
}
html.tibes-a11y-contrast img,
html.tibes-a11y-contrast svg,
html.tibes-a11y-contrast video {
    filter: contrast(1.2) brightness(1.1);
}
/* widget access ramane vizibil */
html.tibes-a11y-contrast #tibes-a11y-trigger,
html.tibes-a11y-contrast #tibes-a11y-panel,
html.tibes-a11y-contrast #tibes-a11y-panel * { background-color: revert !important; color: revert !important; }

/* ===== FEATURE 4: EVIDENȚIERE LINKURI ===== */
html.tibes-a11y-links a {
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
    text-decoration-thickness: 2px !important;
    outline: 2px dashed #FF8A00 !important;
    outline-offset: 2px !important;
    background-color: rgba(255,138,0,.15) !important;
}

/* ===== FEATURE 5: CURSOR MARE ===== */
html.tibes-a11y-cursor,
html.tibes-a11y-cursor * {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'><path d='M5 3l16 38 6-16 16-6z' fill='%23FFFFFF' stroke='%23000000' stroke-width='2.5' stroke-linejoin='round'/></svg>") 4 4, auto !important;
}
html.tibes-a11y-cursor a,
html.tibes-a11y-cursor button,
html.tibes-a11y-cursor [role="button"],
html.tibes-a11y-cursor input,
html.tibes-a11y-cursor select,
html.tibes-a11y-cursor textarea,
html.tibes-a11y-cursor label {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'><path d='M20 4v14h-8l12 18 12-18h-8V4z' fill='%23FF8A00' stroke='%23000000' stroke-width='2.5' stroke-linejoin='round'/></svg>") 20 24, pointer !important;
}

/* ===== FEATURE 6: FONT DISLEXIE ===== */
/* OpenDyslexic loaded la activare prin JS @font-face injectat */
html.tibes-a11y-dyslexic,
html.tibes-a11y-dyslexic body,
html.tibes-a11y-dyslexic body *:not(.material-symbols-outlined) {
    font-family: 'OpenDyslexic', 'Comic Sans MS', sans-serif !important;
    letter-spacing: 0.05em !important;
}

/* ===== FEATURE 7: SPAȚIERE TEXT ===== */
html.tibes-a11y-spacing body,
html.tibes-a11y-spacing body *:not(.material-symbols-outlined) {
    letter-spacing: 0.12em !important;
    word-spacing: 0.16em !important;
    line-height: 1.8 !important;
}

/* ===== FEATURE 8: OPREȘTE ANIMAȚII ===== */
html.tibes-a11y-no-motion *,
html.tibes-a11y-no-motion *::before,
html.tibes-a11y-no-motion *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
    scroll-behavior: auto !important;
}

/* ===== FEATURE 9: GHID DE LECTURĂ ===== */
#tibes-a11y-reading-guide {
    position: fixed;
    left: 0;
    right: 0;
    height: 48px;
    background: rgba(0,0,0,.7);
    border-top: 2px solid #FF8A00;
    border-bottom: 2px solid #FF8A00;
    pointer-events: none;
    z-index: 99990;
    transform: translateY(-9999px); /* hidden by default */
    transition: transform .05s linear;
}

html.tibes-a11y-reading-guide #tibes-a11y-reading-guide {
    /* JS positioneaza dinamic la mouse / touch */
}

/* ===== RESPONSIVE PANEL ===== */
@media (max-width: 480px) {
    #tibes-a11y-panel {
        width: 100%;
        max-width: 100%;
    }
    #tibes-a11y-trigger {
        bottom: 76px;
        left: 12px;
    }
}

/* ===== FOCUS VISIBLE — pentru navigare tastatura ===== */
#tibes-a11y-trigger:focus-visible,
.tibes-a11y-actions button:focus-visible,
.tibes-a11y-close:focus-visible,
.tibes-a11y-reset:focus-visible {
    outline: 3px solid #FF8A00 !important;
    outline-offset: 3px !important;
}