/*
 * WP Accessibility Enhancer Styles
 *
 * This file contains base styles for buttons and helper classes for contrast.
 * The elements targeted by these features are configured in the plugin's
 * admin settings and controlled by JavaScript.
 */

/* ==========================================================================
   Base Button Styles (Feel free to customize colors, sizes, etc.)
   ========================================================================== */
.wpae-accessibility-buttons {
    display: flex;
    flex-wrap: wrap; /* Allow buttons to wrap on smaller screens */
    gap: 10px; /* Space between buttons */
    margin-bottom: 20px; /* Optional space below buttons */
    align-items: center;
}

.wpae-button {
    background-color: #333;
    color: #fff;
    border: none;
    padding: 8px 12px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.3s ease, transform 0.1s ease, color 0.3s ease;
    min-width: 40px;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    font-weight: bold;
    text-decoration: none;
    line-height: 1.2;
    /* Hide focus outline for mouse users, but show for keyboard users */
    outline: none;
}

.wpae-button:focus {
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5); /* Blue focus ring for accessibility */
}


.wpae-button:hover {
    background-color: #555;
    transform: translateY(-1px);
}

.wpae-button:active {
    background-color: #FFFFFF;
    color: #000000;
    transform: translateY(0);
}

/* Specific Button Colors for A-, A, A+ */
.wpae-font-decrease-button {
    background-color: #a00; /* Dark Red for A- (reduce size) */
}
.wpae-font-decrease-button:hover {
    background-color: #c00;
}

.wpae-font-reset-button {
    background-color: #000; /* Black for A (reset size) */
}
.wpae-font-reset-button:hover {
    background-color: #333;
}

.wpae-font-increase-button {
    background-color: #0a0; /* Dark Green for A+ (increase size) */
}
.wpae-font-increase-button:hover {
    background-color: #0c0;
}

/* Specific Button Colors for T (Contrast Button) */
.wpae-contrast-button {
    background-color: #0001FF; /* Blue background for T */
    color: #ffff00; /* Yellow text for T */
}
/* NEUER STIL für den Kontrast-Button im KONTRASTMODUS (wenn body.wpae-contrast-mode aktiv ist) */
/* Hebt den Button im aktiven Kontrastmodus klar ab */
body.wpae-contrast-mode .wpae-contrast-button {
    background-color: #FFFFFF !important; /* Hintergrund: Reinweiß */
    color: #000000 !important; /* Text: Reines Schwarz */
    /* Optional: Füge hier einen auffälligen Rahmen oder Schatten hinzu,
       damit er sich noch mehr vom Hintergrund abhebt */
    border: 2px solid #000000 !important; /* Schwarzer Rahmen */
    box-shadow: 0 0 8px rgba(0,0,0,0.5) !important; /* Leichter Schatten */
transform: translateY(-2px);
}
.wpae-contrast-button:hover {
    background-color: #0000CC; /* Slightly darker blue on hover, adjust as needed */
}

/* ==========================================================================
   Contrast Mode Helper Classes
   These classes are added/removed by JavaScript based on admin settings.
   ========================================================================== */
body.wpae-contrast-mode {
    /* This class is added to the body when contrast mode is ON.
       It's a general flag for the entire page's contrast. */
}

.wpae-contrast-text {
    color: #ffff00 !important; /* Yellow text for general content */
}

.wpae-contrast-bg {
    background-color: #0001FF !important; /* Blue background for general containers */
}

/* NEU: Spezielle Klasse für Buttons im Kontrastmodus */
/* Spezifität erhöht durch Voranstellen von body.wpae-contrast-mode */
body.wpae-contrast-mode .wpae-contrast-button-style {
    background-color: #FFFFFF !important; /* Weißer Hintergrund */
    color: #000000 !important; /* Schwarzer Text */
    border: 4px solid #00FFFF !important; /* 4px Rahmen in hellem Cyan */
    box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important; /* Leichter Schatten */
}

/* Hover-Effekt für die Buttons im Kontrastmodus */
body.wpae-contrast-mode .wpae-contrast-button-style:hover {
    background-color: #F0F0F0 !important; /* Leichtes Grau auf Hover */
    color: #000000 !important; /* Text bleibt schwarz */
    border-color: #00CCCC !important; /* Rahmen wird etwas dunkler */
}

/* WICHTIG: Überschreibe den Button-Text innerhalb von .wpae-contrast-button-style */
/* Auch hier die Spezifität durch Voranstellen von body.wpae-contrast-mode erhöhen */
body.wpae-contrast-mode .wpae-contrast-button-style .bde-text, /* Beispiel für Breakdance Text in Button */
body.wpae-contrast-mode .wpae-contrast-button-style .elementor-button-text, /* Beispiel Elementor Button Text */
body.wpae-contrast-mode .wpae-contrast-button-style .button-atom__text, /* Dein Footer Button Text */
body.wpae-contrast-mode .wpae-contrast-button-style span, /* Generisch */
body.wpae-contrast-mode .wpae-contrast-button-style a { /* Links, die Buttons sind */
    	color: #000000 !important;
	background-color: #FFFFFF !important; /* Weißer Hintergrund */
	padding: 10px; /* Fürst einen Abstand um Text */
}


/* ==========================================================================
   Font Size Body Classes
   These are primarily for JavaScript to track the current state,
   as actual font-size changes are applied via inline styles by JS.
   ========================================================================== */
/* These classes are added to the body by JavaScript: wpae-font-size-X */
/* You typically don't need direct font-size rules here as JS sets inline styles. */
/* Example: body.wpae-font-size-1 {} */