/*
 * Design-Anpassung für das Joomla-Core-Plugin „System – Zusätzliche Barrierefreiheitsfunktionen“
 * (plg_system_accessibility, Bibliothek ranbuch/accessibility 3.x).
 *
 * Die Bibliothek hängt ihr eigenes <style> ans Ende von <body> und setzt am Auslöser Inline-Styles.
 * Deshalb sind alle Regeln mit `._access-menu._access` bzw. `._access-icon._access` um genau eine Klasse
 * spezifischer als die Originalregeln. `!important` wird nur dort verwendet, wo die Bibliothek selbst
 * `!important` oder Inline-Styles setzt.
 *
 * Wird nur geladen, wenn das Plugin im Frontend aktiv ist (siehe templates/cygnusx/includes/Assets.php).
 */

._access-icon._access,
._access-menu._access {
    --a11y-gold: var(--btnbg, #bd8700);
    --a11y-accent: var(--color-primary, #d79c18);
    --a11y-dark: var(--body-color, #22262a);
    --a11y-surface: var(--color-surface, #fff);
    --a11y-border: var(--color-border, #dee2e6);
    --a11y-hover-bg: color-mix(in srgb, var(--color-accent, #e6b962) 16%, var(--a11y-surface));
    --a11y-active-bg: color-mix(in srgb, var(--color-accent, #e6b962) 30%, var(--a11y-surface));
    --a11y-gap: 1rem;
    --a11y-trigger-size: 2.75rem;
    --a11y-figure: url("../../images/a11y-universal-access.svg");
    /* Fläche und Rand des Auslösers in derselben Farbe, weißer Abstand dazwischen. */
    --a11y-trigger-bg: rgb(219 176 90);
    --a11y-trigger-bg-hover: color-mix(in srgb, var(--a11y-trigger-bg) 82%, #000);
    --a11y-ring-color: currentcolor;
    --a11y-ring-gap: 0.1875rem;
    --a11y-ring-width: 0.1875rem;
    --a11y-rings: 0 0 0 var(--a11y-ring-gap) #fff, 0 0 0 calc(var(--a11y-ring-gap) + var(--a11y-ring-width)) var(--a11y-ring-color);
    --a11y-radius: 0.625rem;
    /* Button unter Header/Mobilmenü (1050), geöffnetes Panel darüber, unter Bootstrap-Toasts/Tooltips. */
    --a11y-z-index: 1035;
    --a11y-menu-z-index: 1060;
    --a11y-icon-font: "Font Awesome 6 Free";
}

/* Geschlossener Zustand: Floating-Button */

._access-icon._access {
    /* Inline-Styles der Bibliothek (Größe, Position, Farbe, z-index) erfordern hier !important. */
    inset: auto auto var(--a11y-gap) var(--a11y-gap) !important;
    z-index: var(--a11y-z-index) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--a11y-trigger-size) !important;
    height: var(--a11y-trigger-size) !important;
    border: 0;
    border-radius: 50%;
    /* Die Fläche zeichnet ::before (currentColor), damit die Figur ausgestanzt werden kann. */
    background-color: transparent !important;
    box-shadow: var(--a11y-rings), 0 0.5rem 1.25rem rgb(34 38 42 / 32%);
    color: var(--a11y-trigger-bg) !important;
    font-size: 0 !important;
    line-height: 1 !important;
    text-indent: 0 !important;
    transform: none;
    transition: color 0.15s ease, box-shadow 0.15s ease;
}

/*
 * Das Emoji der Bibliothek wird ausgeblendet. Stattdessen zeigt ein dekoratives Pseudo-Element die goldene
 * Kreisfläche, aus der das Accessibility-Männchen (Font Awesome „universal-access“, SVG) ausgestanzt ist:
 * Dort scheint der Seitenhintergrund durch. Schatten und Fokus-Ring des Buttons bleiben unmaskiert.
 * Der zugängliche Name kommt weiterhin aus aria-label/title des Buttons.
 */
._access-icon._access::before {
    flex: 0 0 auto;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: currentcolor;
    content: "";
    mask:
        linear-gradient(#000 0 0),
        var(--a11y-figure) center / 60% no-repeat;
    mask-composite: subtract;
}

._access-icon._access:hover {
    box-shadow: var(--a11y-rings), 0 0.625rem 1.5rem rgb(34 38 42 / 40%);
    color: var(--a11y-trigger-bg-hover) !important;
    transform: none;
}

/* Weißer Innenring + dunkle Outline: auf hellen und dunklen Hintergründen sichtbar. */
._access-icon._access:focus-visible {
    outline: var(--focus-width, 0.2rem) solid var(--focus-color, #0f0f0f);
    /* Outline außerhalb des Rands, mit weißem Ring als Abstand. */
    outline-offset: calc(var(--a11y-ring-gap) + 2 * var(--a11y-ring-width));
    box-shadow:
        var(--a11y-rings),
        0 0 0 calc(var(--a11y-ring-gap) + 2 * var(--a11y-ring-width)) #fff,
        0 0.5rem 1.25rem rgb(34 38 42 / 32%);
}

/* Geöffnetes Panel */

._access-menu._access {
    z-index: var(--a11y-menu-z-index);
    display: flex;
    flex-direction: column;
    width: min(21rem, calc(100vw - 2 * var(--a11y-gap)));
    min-width: 0;
    max-height: calc(100vh - 2 * var(--a11y-gap));
    max-height: calc(100dvh - 2 * var(--a11y-gap));
    overflow: hidden;
    border: 1px solid var(--a11y-border);
    border-radius: var(--a11y-radius);
    background-color: var(--a11y-surface);
    box-shadow: 0 0.75rem 2rem rgb(34 38 42 / 14%);
    color: var(--a11y-dark);
    font-family: var(--font-family-body, system-ui, sans-serif);
    opacity: 1;
    transform: none;
    visibility: visible;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0s;
}

._access-menu._access.bottom {
    bottom: var(--a11y-gap);
}

._access-menu._access.left,
._access-menu._access.close.left {
    left: var(--a11y-gap);
}

/* visibility: hidden nimmt die Bedienelemente im geschlossenen Zustand aus der Tab-Reihenfolge. */
._access-menu._access.close {
    z-index: var(--a11y-menu-z-index);
    width: min(21rem, calc(100vw - 2 * var(--a11y-gap)));
    background-color: var(--a11y-surface);
    opacity: 0;
    pointer-events: none;
    transform: translateY(0.5rem);
    visibility: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}

/* Kopfbereich */

._access-menu._access h3 {
    display: flex;
    flex: 0 0 auto;
    gap: 0.25rem;
    align-items: center;
    margin: 0;
    padding: 0.625rem 0.5rem 0.625rem 1rem;
    border-bottom: 0.1875rem solid var(--a11y-accent);
    background-color: var(--a11y-dark);
    color: #fff;
    font-family: var(--font-family-headings, inherit);
    font-size: 1.125rem !important;
    font-weight: 600;
    line-height: 1.3;
    text-align: start;
}

._access-menu._access ._menu-btn {
    position: static;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--button-radius, 0.375rem);
    color: #fff;
    font-size: 0 !important;
    font-style: normal;
    transform: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

._access-menu._access ._menu-btn::before {
    font-family: var(--a11y-icon-font);
    font-size: 1.125rem;
    font-weight: 900;
    line-height: 1;
}

/* Reihenfolge: Titel – Zurücksetzen – Schließen (rechts). */
._access-menu._access ._menu-reset-btn {
    order: 1;
    margin-inline-start: auto;
}

._access-menu._access ._menu-reset-btn::before {
    content: "\f2ea";
}

._access-menu._access ._menu-close-btn {
    order: 2;
}

._access-menu._access ._menu-close-btn::before {
    content: "\f00d";
    font-size: 1.25rem;
}

._access-menu._access ._menu-btn:hover {
    background-color: rgb(255 255 255 / 10%);
    color: var(--a11y-accent);
    transform: none;
}

._access-menu._access ._menu-btn:focus-visible {
    outline: var(--focus-width, 0.2rem) solid var(--a11y-accent);
    outline-offset: -0.125rem;
    color: var(--a11y-accent);
}

/* Bedienfunktionen */

._access-menu._access ul {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    font-size: 1rem !important;
}

._access-menu._access ul li {
    position: relative;
    display: flex;
    gap: 0.75rem;
    align-items: center;
    min-height: 2.875rem;
    margin: 0;
    padding: 0.625rem 1rem;
    border: 0;
    border-bottom: 1px solid var(--a11y-border);
    border-radius: 0;
    background: var(--a11y-surface);
    color: var(--a11y-dark);
    font-size: 1rem !important;
    line-height: 1.35 !important;
    overflow-wrap: anywhere;
    text-indent: 0;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

._access-menu._access ul li:last-child {
    border-bottom: 0;
}

/* Die Bibliothek blendet die Einträge beim Öffnen 500 ms lang fast unsichtbar ein – hier sofort sichtbar. */
._access-menu._access ul.before-collapse li {
    opacity: 1;
}

._access-menu._access ul li[data-access-action]::before {
    position: static;
    display: inline-flex;
    flex: 0 0 1.5rem;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    overflow: visible;
    color: var(--a11y-gold);
    font-family: var(--a11y-icon-font);
    font-size: 1rem !important;
    font-weight: 900;
    line-height: 1;
    transform: none;
}

._access-menu._access ul li[data-access-action="increaseText"]::before {
    content: "\f00e";
}

._access-menu._access ul li[data-access-action="decreaseText"]::before {
    content: "\f010";
}

._access-menu._access ul li[data-access-action="increaseTextSpacing"]::before {
    content: "\f337";
}

._access-menu._access ul li[data-access-action="decreaseTextSpacing"]::before {
    content: "\f422";
}

._access-menu._access ul li[data-access-action="invertColors"]::before {
    content: "\f042";
}

._access-menu._access ul li[data-access-action="grayHues"]::before {
    content: "\f5c7";
}

._access-menu._access ul li[data-access-action="underlineLinks"]::before {
    content: "\f0cd";
}

._access-menu._access ul li[data-access-action="bigCursor"]::before {
    content: "\f245";
}

._access-menu._access ul li[data-access-action="readingGuide"]::before {
    content: "\f547";
}

._access-menu._access ul li[data-access-action="textToSpeech"]::before {
    content: "\f028";
}

._access-menu._access ul li[data-access-action="speechToText"]::before {
    content: "\f130";
}

/* Inline-SVG der Bibliothek für „Großer Mauszeiger“ wird durch das einheitliche Icon ersetzt. */
._access-menu._access ul li > svg {
    display: none;
}

._access-menu._access ul li:hover {
    background-color: var(--a11y-hover-bg);
    color: var(--a11y-dark);
}

._access-menu._access ul li[data-access-action]:hover::before {
    color: var(--a11y-dark);
}

._access-menu._access ul li:focus-visible {
    outline: var(--focus-width, 0.2rem) solid var(--focus-color, #0f0f0f);
    outline-offset: -0.2rem;
}

/* Aktiver Zustand: Fläche, goldene Kante und Häkchen – nicht nur über Farbe erkennbar. */
._access-menu._access ul li.active,
._access-menu._access ul li.active:hover {
    background-color: var(--a11y-active-bg);
    box-shadow: inset 0.25rem 0 0 var(--a11y-gold);
    color: var(--a11y-dark);
    font-weight: 600;
}

._access-menu._access ul li.active[data-access-action]::before {
    color: var(--a11y-dark);
}

._access-menu._access ul li.active::after {
    margin-inline-start: auto;
    content: "\f00c";
    font-family: var(--a11y-icon-font);
    font-size: 0.875rem;
    font-weight: 900;
}

/* Zeilenlineal im SIN-Farbschema */
body .access_read_guide_bar {
    border-color: var(--color-primary, #d79c18);
    background: var(--body-color, #22262a);
}

@media (min-width: 768px) {
    ._access-icon._access,
    ._access-menu._access {
        --a11y-gap: 1.25rem;
        --a11y-trigger-size: 3rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    ._access-icon._access,
    ._access-menu._access,
    ._access-menu._access.close,
    ._access-menu._access ._menu-btn,
    ._access-menu._access ul li {
        transition: none;
    }
}