/*
 * 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: #222;
    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;
}

/* ==========================================================================
   Contrast Buttons (T and W) - Default Styles
   ========================================================================== */
/* T-Button (Blue/Yellow Mode) */
.wpae-contrast-button-blueyellow {
    background-color: #0001FF; /* Blue background for T */
    color: #ffff00; /* Yellow text for T */
}
.wpae-contrast-button-blueyellow:hover {
    background-color: #0000CC; /* Slightly darker blue on hover */
}

/* NEW: W-Button (Black/White Mode) */
.wpae-contrast-button-blackwhite {
    background-color: #000; /* Black background for W */
    color: #FFFFFF; /* White text for W */
}
.wpae-contrast-button-blackwhite:hover {
    background-color: #333; /* Slightly lighter black on hover */
}

/* ==========================================================================
   Contrast Mode Helper Classes
   These classes are added/removed by JavaScript based on admin settings.
   ========================================================================== */

/* --- Mode 1: Blue/Yellow Contrast --- */
body.wpae-contrast-mode-blueyellow {
    /* General flag for Blue/Yellow contrast mode */
}

body.wpae-contrast-mode-blueyellow .wpae-contrast-text-blueyellow {
    color: #ffff00 !important; /* Yellow text */
}

body.wpae-contrast-mode-blueyellow .wpae-contrast-bg-blueyellow {
    background-color: #0001FF !important; /* Blue background */
}

/* Special Button Style for Blue/Yellow Contrast Mode */
body.wpae-contrast-mode-blueyellow .wpae-contrast-button-style-blueyellow {
    background-color: #FFFFFF !important; /* Weißer Hintergrund */
    color: #000000 !important; /* Schwarzer Text */
    border: 3px solid #00FFFF !important; /* 3px Rahmen in hellem Cyan */
    box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important; /* Leichter Schatten */
}
body.wpae-contrast-mode-blueyellow .wpae-contrast-button-style-blueyellow:hover {
    background-color: #F0F0F0 !important; /* Leichtes Grau auf Hover */
    color: #000000 !important; /* Text bleibt schwarz */
    border-color: #00CCCC !important; /* Rahmen wird etwas dunkler */
}
/* IMPORTANT: Overwrite text color inside buttons if they use separate spans */
body.wpae-contrast-mode-blueyellow .wpae-contrast-button-style-blueyellow .bde-text,
body.wpae-contrast-mode-blueyellow .wpae-contrast-button-style-blueyellow .elementor-button-text,
body.wpae-contrast-mode-blueyellow .wpae-contrast-button-style-blueyellow .button-atom__text,
body.wpae-contrast-mode-blueyellow .wpae-contrast-button-style-blueyellow span,
body.wpae-contrast-mode-blueyellow .wpae-contrast-button-style-blueyellow a {
    color: #000000 !important;
}


/* --- Mode 2: Black/White Contrast --- */
body.wpae-contrast-mode-blackwhite {
    /* General flag for Black/White contrast mode */
}

body.wpae-contrast-mode-blackwhite .wpae-contrast-text-blackwhite {
    color: #FFFFFF !important; /* White text */
}

body.wpae-contrast-mode-blackwhite .wpae-contrast-bg-blackwhite {
    background-color: #000000 !important; /* Black background */
}

/* Special Button Style for Black/White Contrast Mode */
body.wpae-contrast-mode-blackwhite .wpae-contrast-button-style-blackwhite {
    background-color: #FFFF00 !important; /* Gelber Hintergrund */
    color: #000000 !important; /* Schwarzer Text */
    border: 3px solid #000000 !important; /* 3px Rahmen in Schwarz */
    box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important; /* Leichter Schatten */
}
body.wpae-contrast-mode-blackwhite .wpae-contrast-button-style-blackwhite:hover {
    background-color: #CCCC00 !important; /* Dunkleres Gelb auf Hover */
    color: #000000 !important; /* Text bleibt schwarz */
    border-color: #333333 !important; /* Rahmen wird etwas heller */
}
/* IMPORTANT: Overwrite text color inside buttons if they use separate spans */
body.wpae-contrast-mode-blackwhite .wpae-contrast-button-style-blackwhite .bde-text,
body.wpae-contrast-mode-blackwhite .wpae-contrast-button-style-blackwhite .elementor-button-text,
body.wpae-contrast-mode-blackwhite .wpae-contrast-button-style-blackwhite .button-atom__text,
body.wpae-contrast-mode-blackwhite .wpae-contrast-button-style-blackwhite span,
body.wpae-contrast-mode-blackwhite .wpae-contrast-button-style-blackwhite a {
    color: #000000 !important;
}


/* ==========================================================================
   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 {} */