/* style.css */
/* Basic Body Styling */
body {
    font-family: 'Inter', sans-serif;
    background-color: #ffffff; /* Default light background */
    color: #333333; /* Default dark text */
    line-height: 1.6;
    margin: 0;
    /*padding: 20px;*/
    /*padding-bottom: 100px;*/ /* Ensure space for fixed widget */
    /* Smooth transitions for widget effects */
    transition: background-color 0.3s ease, color 0.3s ease, font-size 0.2s ease, line-height 0.3s ease, letter-spacing 0.3s ease, word-spacing 0.3s ease;
}

/* Main Content Area Styling */
#main-contentt {
    max-width: 800px;
    margin: 0 auto;
}

    #main-contentt h1 {
        font-size: 2rem; /* Approx text-3xl */
        font-weight: 700; /* bold */
        margin-bottom: 1rem; /* mb-4 */
        color: #111827; /* gray-900 */
    }

    #main-contentt h2 {
        font-size: 1.5rem; /* Approx text-2xl */
        font-weight: 600; /* semibold */
        margin-bottom: 0.75rem; /* mb-3 */
        color: #1f2937; /* gray-800 */
    }

    #main-contentt p {
        margin-bottom: 1rem; /* mb-4 */
    }

    #main-contentt ul {
        list-style: disc;
        padding-left: 1.5rem; /* list-inside equivalent padding */
        margin-bottom: 1rem; /* mb-4 */
    }
/* Basic styling for demo button/link */
.sample-button {
    background-color: #3b82f6; /* blue-500 */
    color: white;
    font-weight: bold;
    padding: 0.5rem 1rem; /* py-2 px-4 */
    border: none;
    border-radius: 0.375rem; /* rounded */
    margin-right: 0.5rem; /* mr-2 */
    cursor: pointer;
    transition: background-color 0.2s ease;
}

    .sample-button:hover {
        background-color: #1d4ed8; /* blue-700 */
    }

.sample-link {
    color: #2563eb; /* blue-600 */
    text-decoration: underline;
}

    .sample-link:hover {
        color: #1e40af; /* blue-800 */
    }


/* --- Accessibility Classes --- */
body.dark-contrast {
    background-color: #1f2937; /* gray-800 or darker like gray-900 #111827 */
    /*color: #d1d5db;*/ /* gray-300 */
    color: yellow !important;
}

    body.dark-contrast #main-content h1,
    body.dark-contrast #main-content h2 {
        /*color: #f9fafb;*/ /* gray-50 */
        color: yellow !important;
    }

    body.dark-contrast h1,
    body.dark-contrast h2 {
        /*color: #f9fafb;*/ /* gray-50 */
        color: yellow !important;
    }

    body.dark-contrast a.sample-link {
        color: #60a5fa; /* blue-400 */
    }

        body.dark-contrast a.sample-link:hover {
            color: #93c5fd; /* blue-300 */
        }

    body.dark-contrast button.sample-button {
        background-color: #4b5563; /* gray-600 */
        color: #f9fafb; /* gray-50 */
        border: 1px solid #6b7280; /* gray-500 */
    }

        body.dark-contrast button.sample-button:hover {
            background-color: #374151; /* gray-700 */
        }
/* Add more specific dark contrast styles as needed */

body.text-spacing-active {
    letter-spacing: 0.08em;
    word-spacing: 0.18em;
}

body.line-height-active {
    line-height: 1.9;
}


/* --- Accessibility Widget --- */
#accessibility-widget {
    position: fixed;
    bottom: 20px; /* bottom-5 */
    right: 20px; /* right-5 */
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* Align tools container to the right */
}

/* Toggle Button */
#accessibility-toggle {
    background-color: #2563eb; /* blue-600 */
    color: white;
    border-radius: 9999px; /* rounded-full */
    width: 56px; /* w-14 */
    height: 56px; /* h-14 */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-lg */
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.3s ease;
    font-size: 1.5rem; /* text-2xl */
}

    #accessibility-toggle:hover {
        background-color: #1d4ed8; /* blue-700 */
        transform: scale(1.1);
    }

    #accessibility-toggle:focus {
        outline: 2px solid transparent;
        outline-offset: 2px;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5); /* focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 */
    }

    #accessibility-toggle i {
        transition: transform 0.3s ease; /* For rotation effect */
    }

        #accessibility-toggle i.rotate-180 {
            transform: rotate(180deg);
        }


/* Tools Container */
#accessibility-tools {
    background-color: #ffffff;
    border: 1px solid #d1d5db; /* border-gray-300 */
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
    padding: 0.75rem; /* p-3 */
    margin-bottom: 0.5rem; /* mb-2 */
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* space-y-2 */
    /* Animation styles */
    transition: max-height 0.5s ease-out, opacity 0.4s ease-out, transform 0.5s ease-out, padding 0.5s ease-out, margin 0.5s ease-out, border 0.5s ease-out;
    max-height: 500px; /* Set a realistic max-height for transition */
    overflow: hidden;
    opacity: 1;
    transform: translateY(0);
}

/* Dark mode styles for tools container */
body.dark-contrast #accessibility-tools {
    background-color: #374151; /* gray-700 */
    border-color: #4b5563; /* gray-600 */
}


/* Hidden State for Tools Container */
#accessibility-tools.hidden {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 0;
    transform: translateY(10px);
    pointer-events: none; /* Prevent interaction when hidden */
    border-width: 0; /* Hide border smoothly */
}

/* Individual Tool Buttons */
#accessibility-tools button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start; /* text aligned left */
    padding: 0.5rem; /* p-2 */
    border-radius: 0.375rem; /* rounded */
    background-color: transparent; /* Default */
    color: #374151; /* gray-700 */
    border: none;
    cursor: pointer;
    font-size: 0.875rem; /* text-sm */
    text-align: left;
    transition: background-color 0.15s ease;
}

    #accessibility-tools button:hover {
        background-color: #f3f4f6; /* gray-100 */
    }

/* Dark mode styles for tool buttons */
body.dark-contrast #accessibility-tools button {
    color: #d1d5db; /* gray-300 */
}

    body.dark-contrast #accessibility-tools button:hover {
        background-color: #4b5563; /* gray-600 */
    }

/* Icon styling within buttons */
#accessibility-tools button i {
    width: 20px; /* w-5 */
    height: 20px; /* h-5 */
    margin-right: 0.5rem; /* mr-2 */
    color: #2563eb; /* blue-600 */
    flex-shrink: 0; /* Prevent icon shrinking */
    display: inline-flex; /* Helps alignment */
    align-items: center;
    justify-content: center;
}

/* Dark mode icon color */
body.dark-contrast #accessibility-tools button i {
    color: #60a5fa; /* blue-400 */
}


/* Tooltip Styles */
.tooltip-container {
    position: relative;
    display: block; /* Make container take full width */
}

.tooltip-text {
    visibility: hidden;
    position: absolute;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 8px;
    z-index: 10;
    bottom: 115%; /* Position above the button */
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s; /* Delay visibility change */
    font-size: 0.75rem; /* 12px */
    white-space: nowrap;
    pointer-events: none; /* Prevent tooltip from interfering with hover */
}

    /* Tooltip arrow */
    .tooltip-text::after {
        content: "";
        position: absolute;
        top: 100%; /* At the bottom of the tooltip */
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: #333 transparent transparent transparent;
    }

.tooltip-container:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* Style for active read aloud button */
#acc-read-aloud.active {
    background-color: #fee2e2; /* red-100 */
    border-color: #fca5a5; /* red-300 */
    color: #b91c1c; /* red-700 */
}

    #acc-read-aloud.active i {
        color: #dc2626; /* red-600 */
    }
/* Dark mode active read aloud */
body.dark-contrast #acc-read-aloud.active {
    background-color: #7f1d1d; /* Darker red */
    color: #fecaca; /* Lighter red text */
}

    body.dark-contrast #acc-read-aloud.active i {
        color: #fca5a5; /* Lighter red icon */
    }


/* Responsive Adjustments */
@media (max-width: 640px) { /* sm breakpoint */
    #accessibility-widget {
        bottom: 15px;
        right: 15px;
    }

    #accessibility-toggle {
        width: 48px; /* w-12 */
        height: 48px; /* h-12 */
        font-size: 1.25rem; /* text-xl */
    }
    /* Optional: Hide text labels on small screens */
    /*
    #accessibility-tools button span:not(.tooltip-text) {
        display: none;
    }
    #accessibility-tools button {
        justify-content: center;
        padding: 0.5rem;
    }
    #accessibility-tools button i {
        margin-right: 0;
    }
    */
}