/**
 * assets/css/wcag-frontend-toolbar.css
 *
 * Styling for the WCAG Helper Frontend Toolbar.
 */

/* ==========================================================================
   1. Imports & Global Plugin Styles
   ========================================================================== */

/* --- Apply Plugin Font (Inter) if theme font is disabled --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

body.wcag-toolbar-use-plugin-font,
body.wcag-toolbar-use-plugin-font #wcag-toolbar {
    font-family: 'Inter', sans-serif;
}

/* --- Hidden Attribute Handling (Utility) --- */
/* Handled by JS by adding 'hidden' attribute and using .hide()/.show() */
/* Add !important to override any theme-specific display rules */
[hidden] {
    display: none !important;
}

/* ==========================================================================
   2. Accessibility Function Body Classes
   ========================================================================== */

/* 2.1 Grayscale */
html.wcag-grayscale {
    filter: grayscale(100%);
}
html.wcag-grayscale #wcag-toolbar,
html.wcag-grayscale #wcag-toolbar-trigger {
    filter: none;
}

/* 2.2 High Contrast (Using Filter) */
html.wcag-high-contrast {
    filter: invert(1) contrast(1.1);
    background-color: #fff;
}
html.wcag-high-contrast #wcag-toolbar,
html.wcag-high-contrast #wcag-toolbar-trigger {
    filter: invert(1) contrast(1); /* Toolbar selbst zurück-inverten */
}
html.wcag-high-contrast img,
html.wcag-high-contrast video,
html.wcag-high-contrast picture {
    filter: invert(1) contrast(1); /* Bilder ebenfalls zurück-inverten */
}
html.wcag-high-contrast a {
    color: #007bff !important;
    background-color: transparent !important;
    text-decoration: underline !important;
    text-decoration-color: currentColor !important;
}
html.wcag-high-contrast button,
html.wcag-high-contrast input[type="button"],
html.wcag-high-contrast input[type="submit"],
html.wcag-high-contrast input[type="reset"] {
    background-color: #fff !important;
    color: #000 !important;
    border: 2px solid #000 !important;
}
html.wcag-high-contrast input:not([type="button"]):not([type="submit"]):not([type="reset"]),
html.wcag-high-contrast textarea,
html.wcag-high-contrast select {
    background-color: #ddd !important;
    color: #000 !important;
    border: 1px solid #000 !important;
}
/* Stelle sicher, dass Links in der Toolbar ihre Akzentfarbe behalten */
html.wcag-high-contrast #wcag-toolbar a {
    color: var(--wcag-toolbar-accent) !important;
    text-decoration-color: var(--wcag-toolbar-accent) !important;
}

/* 2.3 Disable Animations */
html.wcag-no-animations *,
html.wcag-no-animations *::before,
html.wcag-no-animations *::after {
    animation-delay: -1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    background-attachment: initial !important;
    scroll-behavior: auto !important;
    transition-delay: 0s !important;
    transition-duration: 0s !important;
    transition: none !important;
    animation: none !important;
}
html.wcag-no-animations *:hover {
    transform: none !important;
}
/* Spezifische Selektoren, falls nötig */
html.wcag-no-animations body .ut-hover:hover img,
html.wcag-no-animations body .ut-hover:hover video.ut-selfvideo-player {
    transform: none !important;
    transition: none !important;
}
html.wcag-no-animations #wcag-toolbar-trigger:hover {
    transform: none !important; /* Verhindert Skalierung des Triggers bei deaktivierten Animationen */
}


/* 2.4 Underline Links */
html.wcag-underline-links a {
    text-decoration: underline !important;
    text-decoration-thickness: 1px !important; /* Oder anderer gewünschter Wert */
}


/* ==========================================================================
   3. Toolbar Trigger Button
   ========================================================================== */
#wcag-toolbar-trigger {
    position: fixed;
    z-index: 99998; /* Unter dem Overlay, aber über dem meisten Seiteninhalt */
    width: 50px;
    height: 50px;
    padding: 0;
    color: var(--wcag-icon-color, #ffffff); /* Standard-Icon-Farbe, wird per JS überschrieben */
    background-color: var(--wcag-trigger-bg-color, #0ea5e9); /* Standard-BG, wird per JS überschrieben */
    border: none;
    /* border-radius wird per inline JS Style gesetzt, basierend auf Einstellung */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden; /* Wichtig für ::after Pseudo-Element (Ripple) */
    transition: transform 0.2s ease-in-out, background-color 0.2s, box-shadow 0.3s ease-in-out, border-radius 0.2s;
    /* Weitere Positions-CSS-Eigenschaften (top, left, right, bottom) werden per JS gesetzt */
}

#wcag-toolbar-trigger:hover {
    transform: scale(1.1); /* Nur wenn Animationen nicht deaktiviert sind */
}

#wcag-toolbar-trigger svg {
    width: 24px; /* Konsistente Größe */
    height: 24px; /* Konsistente Größe */
    display: block;
    position: relative; /* Über Pseudo-Element (Ripple) */
    z-index: 2;
    /* filter (Icon-Schatten) wird per JS gesetzt */
    transition: filter 0.3s ease-in-out; /* Sanfter Übergang für den Schatten */
}

/* --- Update Indicator Style (Pulse + Ripple for Trigger) --- */
@keyframes wcag-toolbar-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

@keyframes wcag-toolbar-ripple {
  0% {
    transform: scale(0.8);
    opacity: 0.6;
  }
  100% {
    transform: scale(2.5);
    opacity: 0;
  }
}

#wcag-toolbar-trigger::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit; /* Erbt den Radius vom Button */
    background-color: var(--wcag-toolbar-accent, #0ea5e9); /* Akzentfarbe für Ripple */
    opacity: 0;
    z-index: 1; /* Hinter dem SVG */
    transform: scale(0.8);
    animation: none; /* Standardmäßig keine Animation */
    pointer-events: none;
}

/* Aktivierung der Animationen im Admin-Bereich */
body.toplevel_page_wcag-helper #wcag-toolbar-trigger.is-updated {
    animation: wcag-toolbar-pulse 0.5s ease-out 2;
}
body.toplevel_page_wcag-helper #wcag-toolbar-trigger.is-updated::after {
    animation: wcag-toolbar-ripple 1s ease-out forwards;
}


/* ==========================================================================
   4. Toolbar Main Container & Overlay
   ========================================================================== */
#wcag-toolbar {
    position: fixed;
    z-index: 100000; /* Über dem Overlay */
    width: 300px;
    max-width: 90vw; /* Verhindert, dass die Toolbar auf kleinen Bildschirmen zu breit wird */
    max-height: calc(100vh - 40px); /* Verhindert, dass die Toolbar höher als der Viewport wird */
    background-color: var(--wcag-toolbar-bg, #fff); /* Wird per JS mit CSS-Variablen gesetzt */
    color: var(--wcag-toolbar-text, #333); /* Wird per JS mit CSS-Variablen gesetzt */
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Verhindert Überlaufen des Inhalts */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    /* Weitere CSS-Eigenschaften (top, left, right, bottom, border-radius, box-shadow) werden per JS gesetzt */
}

#wcag-toolbar.wcag-toolbar-open {
    opacity: 1;
    visibility: visible;
}

#wcag-toolbar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--wcag-toolbar-overlay-color, rgba(0, 0, 0, 0.5)); /* Farbe wird per JS als CSS-Variable gesetzt */
    z-index: 99999; /* Unter der Toolbar, aber über dem Trigger */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

#wcag-toolbar-overlay.wcag-overlay-visible {
    opacity: 1;
    visibility: visible;
}


/* ==========================================================================
   5. Toolbar Inner Structure & Components
   ========================================================================== */

.wcag-toolbar-inner {
    display: flex;
    flex-direction: column;
    height: 100%; /* Stellt sicher, dass der innere Container die volle Höhe einnimmt */
    max-height: calc(100vh - 40px);  /* bis zu dieser Höhe wächst er mit */
    overflow: hidden; /* Verhindert, dass z.B. der Footer bei viel Inhalt verschwindet */
}

/* 5.1 Toolbar Header */
.wcag-toolbar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.875em 1.25em; /* 14px 20px */
    border-bottom: 1px solid transparent; /* Farbe wird durch Theme-Klasse gesetzt */
    flex-shrink: 0; /* Verhindert Schrumpfen des Headers */
    background-color: var(--wcag-toolbar-header-bg); /* Wird per JS gesetzt */
}

.wcag-toolbar-title {
    font-size: 1.0em; /* 16px (Basis 16px) */
    font-weight: 600;
    margin: 0;
    color: inherit; /* Erbt vom Toolbar-Text */
    line-height: 1.4;
}

/* NEU: Isolierte Stile für den Schließen-Button */
#wcag-toolbar .wcag-toolbar-close-button {
    /* Basis-Reset & explizite Definitionen */
    background: transparent !important;
    border: none !important;
    padding: 0.25em !important; /* 4px */
    margin: 0 !important;
    cursor: pointer !important;
    color: inherit !important; /* Erbt Farbe vom Header (var(--wcag-toolbar-text) via #wcag-toolbar) */
    opacity: 0.6;
    line-height: 1 !important;
    box-shadow: none !important;
    border-radius: 3px !important;
    transition: opacity 0.2s ease-in-out, background-color 0.2s ease-in-out !important;
    width: auto !important;
    height: auto !important;
    min-width: initial !important;
    min-height: initial !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    font-size: initial !important;
    font-family: inherit !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    position: relative;
}

#wcag-toolbar .wcag-toolbar-close-button:hover {
    opacity: 1;
    background-color: rgba(0,0,0,0.05) !important;
}

#wcag-toolbar .wcag-toolbar-close-button svg {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    stroke: currentColor; /* Stellt sicher, dass die SVG-Linien die geerbte Textfarbe annehmen */
}

#wcag-toolbar .wcag-toolbar-close-button:focus-visible {
    outline: 2px solid var(--wcag-toolbar-accent, #0ea5e9) !important;
    outline-offset: 1px !important;
    opacity: 1; /* Bessere Sichtbarkeit bei Fokus */
    box-shadow: none !important;
}


/* 5.2 Toolbar Content Area */
.wcag-toolbar-content {
    padding: 1.25em; /* 20px */

    flex: 1 1 auto;                  /* nimmt den verbliebenen Platz ein */
    flex-grow: 1;                    /* Nimmt verfügbaren Platz ein */
    min-height: 0;                   /* erlaubt dem Flex-Item zu schrumpfen */
    overflow-y: auto;                /* Scroll bei Überlauf */
    scroll-behavior: smooth;         /* weiches Scrollen */
    overscroll-behavior: contain;    /* kein Scroll-Chaining auf Body */
    -webkit-overflow-scrolling: touch; /* Für sanftes Scrollen auf iOS */
}

/* Cursor beim aktiven Drag */
.wcag-toolbar-content.dragging {
    cursor: grabbing;
}

.wcag-toolbar-options-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1em; /* 16px Abstand zwischen Listenelementen */
}

.wcag-toolbar-options-list li {
    margin: 0;
    padding: 0;
}

.wcag-toolbar-no-functions {
    text-align: center;
    font-style: italic;
    color: #6b7280; /* Tailwind gray-500 */
    padding: 1em 0; /* Etwas vertikaler Platz */
}

/* 5.3 Toolbar Shortcut Hints */
.wcag-toolbar-shortcut-hints {
    padding-top: 0.75em;
    border-top: 1px solid rgba(0, 0, 0, 0.08); /* Dezente Trennlinie, falls über Funktionen */
    margin-top: 1em; /* Abstand zur Funktionsliste */
}

.wcag-shortcut-hints-title {
    font-size: 0.9em; /* Etwas kleiner als Haupt-Toolbar-Titel */
    font-weight: 600;
    margin: 0 0 0.5em 0;
    color: inherit; /* Erbt von Toolbar Textfarbe */
}

.wcag-shortcut-hints-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.8em; /* Kleinere Schrift für die Hinweise */
    line-height: 1.5;
    color: inherit; /* Erbt von Toolbar Textfarbe, ggf. etwas gedämpfter */
    opacity: 0.9;
}

.wcag-shortcut-hints-list li {
    margin-bottom: 0.25em;
}


/* 5.4 Toolbar Footer */
.wcag-toolbar-footer {
    padding: 0.75em 1.25em; /* 12px 20px */
    border-top: 1px solid transparent; /* Farbe wird durch Theme-Klasse gesetzt */
    text-align: center;
    flex-shrink: 0; /* Verhindert Schrumpfen des Footers */
    margin-top: auto; /* Drückt den Footer nach unten, wenn Inhalt nicht ausreicht */
    background-color: var(--wcag-toolbar-footer-bg); /* Wird per JS gesetzt */
    font-size: 0.8em; /* Kleinere Schrift im Footer */
    line-height: 1.5;
}
.wcag-toolbar-footer a {
    color: var(--wcag-toolbar-accent, #0ea5e9); /* Akzentfarbe für Links im Footer */
    text-decoration: underline;
}
.wcag-toolbar-footer a:hover {
    text-decoration: none;
}

.wcag-toolbar-logo {
    max-width: 50px; /* Etwas kleiner */
    height: auto;
    display: inline-block;
    margin-bottom: 0.5em; /* 8px */
}

/* 5.5 Zusatz für scrollbaren Toolbar Content */
/* Header und Footer fixiert */
.wcag-toolbar-header,
.wcag-toolbar-footer {
    flex: none;
}


/* ==========================================================================
   6. Switch Component (Tailwind-like)
   ========================================================================== */
.wcag-switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
    width: 100%;
    position: relative; /* Für :focus-visible auf dem Input */
}

.wcag-switch-label {
    margin-right: 0.75em; /* 12px */
    font-size: 0.9em; /* 14.4px */
    font-weight: 500;
    color: inherit; /* Erbt vom Toolbar-Text */
    flex-grow: 1; /* Label nimmt verfügbaren Platz ein */
}

.wcag-switch-input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.wcag-switch-slider {
    position: relative;
    display: inline-block;
    width: 44px; /* Breite des Schalters */
    height: 24px; /* Höhe des Schalters */
    background-color: #e5e7eb; /* Tailwind gray-200 */
    border-radius: 9999px; /* Vollständig abgerundet */
    transition: background-color 0.2s ease-in-out;
    flex-shrink: 0; /* Verhindert Schrumpfen des Schalters */
}

.wcag-switch-slider::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px; /* Größe des inneren Kreises */
    height: 20px; /* Größe des inneren Kreises */
    background-color: white;
    border-radius: 50%;
    border: 1px solid #d1d5db; /* Tailwind gray-300 */
    transition: transform 0.2s ease-in-out;
}

.wcag-switch-input:checked + .wcag-switch-slider {
    background-color: var(--wcag-toolbar-accent, #0ea5e9); /* Akzentfarbe, wenn aktiv */
}

.wcag-switch-input:checked + .wcag-switch-slider::after {
    transform: translateX(20px); /* Verschiebt den Kreis nach rechts */
    border-color: white; /* Randfarbe des Kreises, wenn aktiv */
}

.wcag-switch-input:focus-visible + .wcag-switch-slider {
    box-shadow: 0 0 0 2px var(--wcag-toolbar-bg, white), 0 0 0 4px var(--wcag-toolbar-accent, #0ea5e9); /* Fokus-Indikator */
}


/* ==========================================================================
   7. Theme Specific Adjustments (Light/Dark)
   ========================================================================== */

/* Light Theme (Standard) */
#wcag-toolbar.wcag-theme-light .wcag-toolbar-header {
    border-bottom-color: rgba(0, 0, 0, 0.1);
}
#wcag-toolbar.wcag-theme-light .wcag-toolbar-footer {
    border-top-color: rgba(0, 0, 0, 0.1);
}
#wcag-toolbar.wcag-theme-light .wcag-toolbar-shortcut-hints {
    border-top-color: rgba(0, 0, 0, 0.08); /* Wird auch von JS gesetzt, hier als Fallback/Basis */
}

/* Dark Theme */
#wcag-toolbar.wcag-theme-dark {
    /* Die Hauptfarben (Hintergrund, Text) werden durch CSS-Variablen
       gesteuert, die basierend auf deinen Admin-Einstellungen
       per JavaScript gesetzt werden (var(--wcag-toolbar-bg), var(--wcag-toolbar-text)).
       Die folgenden Regeln sind spezifische Anpassungen. */
}

#wcag-toolbar.wcag-theme-dark .wcag-toolbar-header {
    border-bottom-color: rgba(255, 255, 255, 0.15); /* Hellerer Rand für bessere Trennung */
}

#wcag-toolbar.wcag-theme-dark .wcag-toolbar-footer {
    border-top-color: rgba(255, 255, 255, 0.15); /* Hellerer Rand */
}

#wcag-toolbar.wcag-theme-dark .wcag-toolbar-close-button {
    /* color: #e2e8f0; */ /* Explizit helle Farbe, falls 'inherit' nicht ausreicht */
}
#wcag-toolbar.wcag-theme-dark .wcag-toolbar-close-button:hover {
    background-color: rgba(255, 255, 255, 0.12) !important; /* Hellerer Hover-Effekt */
}
#wcag-toolbar.wcag-theme-dark .wcag-toolbar-close-button svg {
    stroke: var(--wcag-toolbar-text, #e2e8f0); /* Stellt sicher, dass SVG-Linien hell sind */
}


/* Switch im Dark Theme */
#wcag-toolbar.wcag-theme-dark .wcag-switch-label {
    color: var(--wcag-toolbar-text, #e2e8f0); /* Stellt sicher, dass das Label hell ist */
}

#wcag-toolbar.wcag-theme-dark .wcag-switch-slider {
    background-color: #4a5568; /* Dunkelgrau (Tailwind gray-600) für inaktiven Schalter-Hintergrund */
}

#wcag-toolbar.wcag-theme-dark .wcag-switch-slider::after {
    background-color: #a0aec0; /* Helleres Grau (Tailwind gray-500) für den inaktiven Knopf */
    border-color: #4a5568;    /* Rand des Knopfes passend zum Hintergrund */
}

#wcag-toolbar.wcag-theme-dark .wcag-switch-input:checked + .wcag-switch-slider {
    background-color: var(--wcag-toolbar-accent, #4299e1); /* Deine Akzentfarbe */
}

#wcag-toolbar.wcag-theme-dark .wcag-switch-input:checked + .wcag-switch-slider::after {
    background-color: #f0f4f8; /* Sehr heller Knopf, wenn aktiv (fast weiß) */
    border-color: var(--wcag-toolbar-accent, #4299e1); /* Akzentfarbe für den Rand, wenn aktiv */
}

#wcag-toolbar.wcag-theme-dark .wcag-switch-input:focus-visible + .wcag-switch-slider {
    box-shadow: 0 0 0 2px var(--wcag-toolbar-bg, #1a202c), 0 0 0 4px var(--wcag-toolbar-accent, #4299e1);
}


/* Shortcut Hints im Dark Theme */
#wcag-toolbar.wcag-theme-dark .wcag-toolbar-shortcut-hints {
    border-top-color: rgba(255, 255, 255, 0.15); /* Hellerer Rand, wird auch von JS gesetzt */
}

#wcag-toolbar.wcag-theme-dark .wcag-shortcut-hints-title {
    color: var(--wcag-toolbar-text, #e2e8f0); /* Helle Schrift, erbt von Toolbar-Einstellung */
    /* Falls spezifischer gewünscht:
    color: #f7fafc; // Fast weiß
    */
}

#wcag-toolbar.wcag-theme-dark .wcag-shortcut-hints-list {
    color: var(--wcag-toolbar-text, #e2e8f0); /* Helle Schrift, erbt von Toolbar-Einstellung */
    opacity: 0.85; /* Leicht reduziert für angenehmere Lesbarkeit */
    /* Falls spezifischer gewünscht:
    color: #cbd5e0; // Helleres Grau
    */
}
#wcag-toolbar.wcag-theme-dark .wcag-shortcut-hints-list li {
    /* Keine spezifische Farbänderung nötig, erbt von .wcag-shortcut-hints-list */
}


/* Links im Footer des Dark Themes */
#wcag-toolbar.wcag-theme-dark .wcag-toolbar-footer a {
    /* Die Akzentfarbe wird verwendet. Wenn diese im Dark Theme zu dunkel ist, hier eine hellere Variante setzen:
    color: #63b3ed; // Beispiel: Tailwind blue-400
    */
}
#wcag-toolbar.wcag-theme-dark .wcag-toolbar-footer span,
#wcag-toolbar.wcag-theme-dark .wcag-toolbar-footer {
     color: var(--wcag-toolbar-text, #e2e8f0); /* Sicherstellen, dass auch der Text im Footer hell ist */
     opacity: 0.8; /* Etwas gedämpfter */
}


/* ==========================================================================
   Reading Mask nur Dark-Mode, dynamische Höhe
   ========================================================================== */

   .reading-mask {
    position: fixed;
    top: 0; left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 99997;
  }

  /* Dark-Mode Overlay über Box-Shadow der Highlight-Line */
  .reading-mask .highlight-line {
    position: absolute;
    left: 0; width: 100%;
    background: transparent;
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.6);
    /* Höhe wird per JS gesetzt */
  }

/* ==========================================================================
   8. Desktop/Mobile Visibility based on Breakpoint and Body Classes
   ========================================================================== */

/* Hide on Desktop when the body has the 'wcag-hide-on-desktop' class
   and the screen width is greater than the mobile breakpoint. */
@media screen and (min-width: calc(var(--wcag-mobile-breakpoint, 768px) + 1px)) {
    body.wcag-hide-on-desktop #wcag-toolbar-trigger,
    body.wcag-hide-on-desktop #wcag-toolbar {
        display: none !important;
    }
}

/* Hide on Mobile when the body has the 'wcag-hide-on-mobile' class
   and the screen width is less than or equal to the mobile breakpoint. */
@media screen and (max-width: var(--wcag-mobile-breakpoint, 768px)) {
    body.wcag-hide-on-mobile #wcag-toolbar-trigger,
    body.wcag-hide-on-mobile #wcag-toolbar {
        display: none !important;
    }
}
