/* ======================================================
   A11Y – ONE TAP (UI CORE)
   ====================================================== */

:root{
    --a11y-primary: #2563eb;
    --a11y-primary-dark: #1e40af;
    --a11y-success: #22c55e;
    --a11y-muted: #9ca3af;
    --a11y-bg-soft: #F3F7FC;
}

/* ======================================================
   TOGGLE FLOAT
   ====================================================== */

.a11y-toggle{
    position: fixed;
    right: 20px;
    bottom: 40px;
    z-index: 9999;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #2563eb;
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 28px rgba(0,0,0,.25);
    transition: transform .2s ease, box-shadow .2s ease;
}

.a11y-toggle:hover{
    transform: scale(1.05);
    box-shadow: 0 14px 36px rgba(0,0,0,.35);
}

.a11y-toggle:focus-visible{
    outline: 3px solid #fff;
    outline-offset: 3px;
}

.a11y-toggle-icon{
    font-size: 1.6rem;
    line-height: 1;
}


/* ======================================================
   PANEL
   ====================================================== */

#a11y-panel{
    position:fixed;
    inset:0 0 0 auto;
    width:600px;
    max-width:100vw;
    height:100vh;
    background:#f3f4f6;
    transform:translateX(100%);
    transition:transform .3s ease;
    z-index:99999;
    display:flex;
    flex-direction:column;
    isolation:isolate;
    filter:none!important;
}

#a11y-panel[aria-hidden="false"]{
    transform:translateX(0);
}

/* ======================================================
   HEADER
   ====================================================== */

#a11y-header{
    background:var(--a11y-primary);
    color:#fff;
    padding:20px 30px!important;
    text-align:center;
}

#a11y-header h2{
    margin:10px 0 4px;
    font-size:1.2rem;
}

#a11y-header p{
    margin:0;
    font-size:.8rem;
    opacity:.85;
}

.icon-header-accesibilitate{
    position:relative;
    z-index:1;
    display:inline-block;
    margin:auto;
}

.a11y-header h2{
    color:#fff;
}

.icon-header-accesibilitate:before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    margin:auto;
    width:40px;
    height:40px;
    background-color:#fff;
    border-radius:50%;
    z-index:-1;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
}

.icon-header-accesibilitate i{
    font-size:1.5em;
    
    color:#212529;
    padding:.2em;
    line-height:1.9em!important;
    border-radius:50%;
}

#a11y-close{
    position:absolute;
    top:12px;
    right:12px;
    width:40px;
    height:40px;
    border-radius:50%;
    border:0;
    background:rgba(255,255,255,.15);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
}

#a11y-close i{
    font-size:1.5em;
    line-height:40px!important;
}

#a11y-close:hover{background:rgba(255,255,255,.25)}
#a11y-close:focus-visible{outline:3px solid #fff}

/* ======================================================
   CONTENT
   ====================================================== */

#a11y-content{
    padding:16px;
    overflow-y:auto;
}

/* ======================================================
   SECTIONS
   ====================================================== */

.a11y-section{
    background:#fff;
    border-radius:16px;
    padding:16px;
    margin-bottom:16px;
    box-shadow:0 6px 18px rgba(0,0,0,.08);
}

.a11y-section h3{
    margin:0 0 12px;
    font-size:.95rem;
    font-weight:700!important;
}

/* ======================================================
   GRID
   ====================================================== */

.a11y-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
}

/* ======================================================
   CARD
   ====================================================== */

.a11y-card{
    background:var(--a11y-bg-soft);
    border-radius:14px;
    padding:14px;
    border:2px solid transparent;
    display:flex;
    flex-direction:column;
    gap:10px;
    cursor:pointer;
    transition:border .15s ease, background .15s ease;
}

.a11y-card:hover{
    border-color:var(--a11y-primary);
}

.a11y-card--wide{
    grid-column:span 2;
}

/* ======================================================
   ICON
   ====================================================== */

.icon-a11y-card{
    width:42px;
    height:42px;
    border-radius:50%;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.2rem;
    color:var(--a11y-primary);
    transition:all .2s ease;
    text-align:center;
}

.a11y-card.is-active .icon-a11y-card{
    background:var(--a11y-primary);
    border-color:var(--a11y-primary);
    color:#fff;
}

/* ======================================================
   TITLU
   ====================================================== */

.titlu-a11y-card{
    margin:0;
    font-size:.85rem;
    font-weight:600;
    color:#1f2937;
}

/* ======================================================
   STATUS
   ====================================================== */

.status-a11y-card{
    position:relative;
    padding-left:14px;
    font-size:.65rem;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.04em;
    color:#6b7280;
}

.status-a11y-card::before{
    content:'';
    position:absolute;
    left:0;
    top:50%;
    width:7px;
    height:7px;
    border-radius:50%;
    transform:translateY(-50%);
    background:var(--a11y-muted);
}

.a11y-card.is-active .status-a11y-card{
    color:#166534;
}

.a11y-card.is-active .status-a11y-card::before{
    background:var(--a11y-success);
}

/* ======================================================
   A11Y CARD – STATUS STÂNGA, CONȚINUT CENTRAT
   ====================================================== */

.a11y-card{
    align-items: center;
    text-align: center;
}

.icon-a11y-card{
    margin-inline: auto;
}

.titlu-a11y-card{
    text-align: center;
}

.status-a11y-card{
    align-self: flex-start;
    text-align: left;
    margin-top: auto;
}



/* ======================================================
   CARD ACTIV
   ====================================================== */

.a11y-card.is-active{
    border-color:var(--a11y-primary);
    background:linear-gradient(180deg,#f8fbff,#eef4ff);
}

/* ======================================================
   STEPPER
   ====================================================== */

.a11y-stepper{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    background-color:#fff;
    border-radius:30px;
}

.a11y-stepper button{
    width:32px;
    height:32px;
    border-radius:50%;
    border:0;
    background:var(--a11y-primary);
    color:#fff;
    font-size:18px;
    cursor:pointer;
}

.a11y-stepper span{
    min-width:70px;
    font-size:.8rem;
}

.a11y-stepper button i{
    line-height:32px!important;
}

/* ======================================================
   RESET
   ====================================================== */

#a11y-reset{
    margin-top:10px;
    width:100%;
    padding:15px;
    border-radius:12px;
    border:0;
    background:#2563eb;
    color:#fff;
    font-weight:600;
    cursor:pointer;
}

#a11y-content{
    position: relative;
    
}

#a11y-reset{
    position: sticky;
    bottom: -12px;
    z-index: 10;
    margin-top: 20px;
}

/* ======================================================
   FOCUS
   ====================================================== */

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


/* ======================================================
   IZOLARE TOTALĂ PANOU
   ====================================================== */

#a11y-panel,
#a11y-panel *{
    filter:none!important;
    font-family:inherit!important;
    line-height:normal!important;
}



/* ======================================================
   A11Y – EFFECTS
   ====================================================== */

/* ===============================
   FONT SIZE – PROCENTE
   =============================== */

html { --a11y-font-multiplier: 1; }

/* 10% – 100% */
html.a11y-font-10  { --a11y-font-multiplier: 1.1; }
html.a11y-font-20  { --a11y-font-multiplier: 1.2; }
html.a11y-font-30  { --a11y-font-multiplier: 1.3; }
html.a11y-font-40  { --a11y-font-multiplier: 1.4; }
html.a11y-font-50  { --a11y-font-multiplier: 1.5; }
html.a11y-font-60  { --a11y-font-multiplier: 1.6; }
html.a11y-font-70  { --a11y-font-multiplier: 1.7; }
html.a11y-font-80  { --a11y-font-multiplier: 1.8; }
html.a11y-font-90  { --a11y-font-multiplier: 1.9; }
html.a11y-font-100 { --a11y-font-multiplier: 2; }


/* ======================================================
   FONT SIZE – APLICARE SEMANTICĂ
   ====================================================== */

html.a11y-font-active body :is(
    p, span, a, button, li,
    h1, h2, h3, h4, h5, h6,
    label, input, textarea, select
):not(#a11y-panel):not(#a11y-panel *) {
    font-size: calc(1em * var(--a11y-font-multiplier));
}

html.a11y-line-active body :is(
    p, li, span, a, div
):not(#a11y-panel):not(#a11y-panel *) {
    line-height: calc(1em * var(--a11y-line-multiplier));
}

/* ===============================
   LINE HEIGHT – PROCENTE
   =============================== */

html { --a11y-line-multiplier: 1; }

/* 10% – 100% */
html.a11y-line-10  { --a11y-line-multiplier: 1.1; }
html.a11y-line-20  { --a11y-line-multiplier: 1.2; }
html.a11y-line-30  { --a11y-line-multiplier: 1.3; }
html.a11y-line-40  { --a11y-line-multiplier: 1.4; }
html.a11y-line-50  { --a11y-line-multiplier: 1.5; }
html.a11y-line-60  { --a11y-line-multiplier: 1.6; }
html.a11y-line-70  { --a11y-line-multiplier: 1.7; }
html.a11y-line-80  { --a11y-line-multiplier: 1.8; }
html.a11y-line-90  { --a11y-line-multiplier: 1.9; }
html.a11y-line-100 { --a11y-line-multiplier: 2; }

html.a11y-line-active body :is(
    p, li, span, a, div
):not(#a11y-panel):not(#a11y-panel *) {
    line-height: calc(1em * var(--a11y-line-multiplier));
}


html.a11y-readable-font body *:not(#a11y-panel):not(#a11y-panel *) {
    font-family: Arial, Helvetica, sans-serif !important;
}


/* Dezactivare animații: exclude panoul */
html.a11y-no-animations body *:not(#a11y-panel):not(#a11y-panel *),
html.a11y-no-animations body *:not(#a11y-panel):not(#a11y-panel *)::before,
html.a11y-no-animations body *:not(#a11y-panel):not(#a11y-panel *)::after {
    animation: none !important;
    transition: none !important;
}

:focus-visible {
    outline: 3px solid #2563eb;
    outline-offset: 2px;
}

/* ===============================
   CURSOR MARE
   =============================== */

html.a11y-cursor-large,
html.a11y-cursor-large * {
    cursor: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='42' height='42' viewBox='0 0 34 34'>\
<path fill='black' d='M3 2l7 18 2-7 7-2z'/>\
</svg>") 0 0, auto !important;
}

/* ===============================
   SPAȚIERE LITERE
   =============================== */

html.a11y-letter-spacing body :is(
    p, span, a, li, button,
    h1,h2,h3,h4,h5,h6,
    label, input, textarea
):not(#a11y-panel):not(#a11y-panel *) {
    letter-spacing: 0.12em !important;
}

/* ===============================
   CENTRARE TEXT
   =============================== */

html.a11y-text-center body :is(
    p, h1,h2,h3,h4,h5,h6, li
):not(#a11y-panel):not(#a11y-panel *) {
    text-align: center !important;
}

/* ===============================
   FONT MAI GROS
   =============================== */

html.a11y-font-bold body > *:not(#a11y-panel) {
    font-weight: 700 !important;
}

html.a11y-font-bold body > *:not(#a11y-panel) :is(
    p, span, a, li, div,
    h1,h2,h3,h4,h5,h6,
    label, button, input, textarea, select,
    th, td
) {
    font-weight: 700 !important;
}

html.a11y-font-bold body > *:not(#a11y-panel) strong,
html.a11y-font-bold body > *:not(#a11y-panel) b {
    font-weight: 700 !important;
}

/* ===============================
   MONOCROM (GRAYSCALE)
   =============================== */

html.a11y-filters body > *:not(#a11y-panel) {
    filter:
        contrast(var(--a11y-contrast, 100%))
        grayscale(var(--a11y-grayscale, 0%));
}

#a11y-panel,
#a11y-panel * {
    filter: none !important;
}

/* ======================================================
   MODULE DE ORIENTARE – EFECTE + OVERLAYS
   ====================================================== */

/* ===============================
   ASCUNDE IMAGINI
   =============================== */
html.a11y-hide-images body :is(
    img,
    picture,
    figure,
    video,
    iframe,
    embed,
    object
):not(#a11y-panel):not(#a11y-panel *) {
    display: none !important;
}

html.a11y-hide-images body *:not(#a11y-panel):not(#a11y-panel *) {
    background-image: none !important;
}

/* ===============================
   SUBLINIAZĂ CONȚINUT
   =============================== */
html.a11y-underline-content body :is(
    p, li, span, strong, em, b, i,
    h1,h2,h3,h4,h5,h6
):not(#a11y-panel):not(#a11y-panel *) {
    text-decoration: underline !important;
    text-decoration-thickness: 2px !important;
    text-underline-offset: 3px !important;
}

/* ===============================
   SUBLINIAZĂ LINK-URI
   =============================== */
html.a11y-underline-links body a:not(#a11y-panel):not(#a11y-panel *) {
    text-decoration: underline !important;
    text-decoration-thickness: 3px !important;
    text-underline-offset: 4px !important;
}

/* ===============================
   LINIE DE CITIRE (overlay)
   =============================== */
#a11y-reading-line {
    position: fixed;
    left: 0;
    right: 0;
    height: 14px;
    border:solid yellow;
    border-width:4px 0;
    top: 0;
    
    background: #000;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, .18);
    z-index: 99997;
    pointer-events: none;
    transform: translateY(0);
    opacity: 0;
    transition: opacity .12s ease;
}

html.a11y-reading-line-on #a11y-reading-line{
    opacity: 1;
}

/* ===============================
   MASCĂ DE CITIRE (overlay)
   =============================== */
#a11y-reading-mask {
    position: fixed;
    inset: 0;
    z-index: 99996;
    pointer-events: none;
    opacity: 0;
    transition: opacity .12s ease;
}
#a11y-reading-mask .a11y-mask-top,
#a11y-reading-mask .a11y-mask-bottom {
    position: absolute;
    left: 0;
    right: 0;
    background: rgba(0,0,0,.55);
}
#a11y-reading-mask .a11y-mask-top {
    top: 0;
    height: 0px;
}
#a11y-reading-mask .a11y-mask-bottom {
    bottom: 0;
    height: 0px;
}

html { --a11y-mask-band: 110px; }
html.a11y-reading-mask-on #a11y-reading-mask {
    opacity: 1;
}

#a11y-panel { isolation: isolate; }