/**
 * ADA Accessibility Toolkit - Frontend CSS
 * Styles for the accessibility toolbar and text zoom effects.
 */

/* Main container for all accessibility elements */
#ada-accessibility-container {
    position: fixed;
    bottom: 20px;
    right: 20px; /* Stays fixed at bottom-right */
    z-index: 99999999 !important; /* Extremely high z-index to be on top */
    display: flex !important; /* Ensure flex display */
    flex-direction: row-reverse; /* Toggle button on right, controls expand to left */
    align-items: center; /* Vertically center items in the row */
    justify-content: flex-start; /* Align items to the start of the row (left) */
    gap: 10px; /* Space between toggle and controls */
    /* No transform on container itself, it stays fixed */
}

/* Style for the standalone toggle button */
#ada-accessibility-toggle-button {
    width: 50px !important;
    height: 50px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background-color: #27A7D9 !important; /* Distinct color for debugging */
    color: #fff;
    border: 3px solid white !important; /* DEBUG: Prominent border for toggle button */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease, transform 0.1s ease;
    z-index: 2; /* Ensure it's above the controls */
    flex-shrink: 0; /* Prevent shrinking */
    box-sizing: border-box; /* Include padding and border in element's total width and height */
    visibility: visible !important; /* Force visibility */
    opacity: 1 !important; /* Force opacity */
    pointer-events: all !important; /* Ensure it's clickable */
}

#ada-accessibility-toggle-button:hover {
    background-color: #e0a816 !important;
    transform: translateY(-1px);
}

#ada-accessibility-toggle-button:active {
    transform: translateY(1px);
}

/* Style for the SVG icon inside the toggle button */
#ada-accessibility-toggle-button svg {
    width: 28px !important; /* Slightly larger icon */
    height: 28px !important;
    fill: white !important; /* Explicitly set fill color to white */
    display: block !important;
    pointer-events: none !important; /* Allow clicks to pass through to the button */
    position: relative;
    z-index: 1;
}

/* Hide screen-reader-text visually within the toggle button */
#ada-accessibility-toggle-button .screen-reader-text {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    color: transparent !important;
    z-index: 0;
}

/* Container for the zoom controls */
#ada-zoom-controls-wrapper {
    background-color: #142349;
    padding: 0 !important; /* No padding when hidden */
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    display: flex !important; /* Use flex to arrange buttons inside */
    flex-direction: row; /* Buttons in a row */
    align-items: center;
    justify-content: center;
    overflow: hidden; /* Hide content when collapsed */
    transition: all 0.3s ease-in-out, max-width 0.3s ease-in-out, opacity 0.3s ease-in-out; /* Transition for expansion (max-width for horizontal) */
    max-width: 0 !important; /* Initially hidden horizontally */
    opacity: 0 !important; /* Initially faded out */
    pointer-events: none !important; /* Disable clicks when hidden */
    gap: 0 !important; /* No gap when hidden */
    z-index: 1; /* Below the toggle button */
    visibility: hidden !important; /* Ensure it's hidden from screen readers */
    flex-shrink: 0; /* Prevent shrinking */
}

/* State when zoom controls are active/visible */
#ada-zoom-controls-wrapper.is-active {
    max-width: 165px !important; /* Sufficient width to show buttons (A-, A, A+) + padding + gap */
    padding: 10px !important; /* Add padding when active */
    opacity: 1 !important; /* Fade in */
    pointer-events: all !important; /* Enable clicks */
    visibility: visible !important; /* Make visible to screen readers */
    gap: 8px !important; /* Add gap when active */
}

/* Individual zoom control buttons */
#ada-zoom-controls-wrapper button {
    background-color: #27A7D9; /* WordPress blue */
    color: #fff;
    border: none;
    padding: 8px 12px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.1s ease;
    min-width: 40px;
    text-align: center;
    flex-shrink: 0;
}

#ada-zoom-controls-wrapper button:hover {
    background-color: #FDB81F;
    transform: translateY(-1px);
}

#ada-zoom-controls-wrapper button:active {
    transform: translateY(1px);
}

/* Styles for elements that should NOT zoom */
.ada-no-zoom {
    font-size: 16px !important; /* Example: set to a fixed pixel size */
    line-height: initial !important; /* Prevent line-height from scaling */
}

/* Ensure images within zoomable content scale with text */
img {
    max-width: 100%;
    height: auto;
}

/* NEW: Styles for when body has 'ada-zoomed-in' class */
body.ada-zoomed-in .your-element-to-change {
    /* Example: Change background color of a specific element when zoomed in */
    background-color: yellow !important;
}

body.ada-zoomed-in #your-other-element {
    /* Example: Adjust padding or margin of another element */
    padding-top: 50px !important;
}

/* You can add more rules here targeting specific elements when zoomed in */