/* Custom CSS for accessibility */

/* Larger base font sizes for better readability */
body {
    font-size: 18px;
}

/* Increase form control sizes for better touch targets */
.form-control, .form-select, .btn {
    font-size: 1.2rem;
    padding: 0.75rem 1rem;
}

/* High contrast focus styles */
:focus {
    outline: 3px solid #ffc107 !important;
    outline-offset: 2px !important;
}

/* Enhance form validation messages */
.invalid-feedback {
    font-size: 1rem;
    font-weight: bold;
}

/* Make progress bar more prominent */
.progress {
    height: 2rem;
    margin: 1rem 0;
    border-radius: 0.5rem;
}

.progress-bar {
    font-size: 1.2rem;
    font-weight: bold;
}

/* Audio player styling */
audio {
    width: 100%;
    margin: 1rem 0;
}

/* Example code styling */
code {
    background-color: rgba(0, 0, 0, 0.1);
    padding: 0.2rem 0.4rem;
    border-radius: 0.25rem;
    font-size: 90%;
}

/* Card enhancements */
.card {
    margin-bottom: 2rem;
    border-radius: 0.5rem;
}

.card-header {
    padding: 1rem 1.25rem;
}

/* Alert messaging */
.alert {
    font-size: 1.2rem;
    border-radius: 0.5rem;
}

/* Accordion styling */
.accordion-button {
    font-size: 1.2rem;
    padding: 1rem 1.25rem;
}

/* Ensure buttons have adequate padding */
.btn {
    padding: 0.75rem 1.5rem;
}

/* Improving accessibility for form elements */
label {
    margin-bottom: 0.5rem;
    font-weight: bold;
}

/* Extra margin for form groups */
.mb-4 {
    margin-bottom: 1.5rem !important;
}

/* Enhance link visibility */
a {
    text-decoration: underline;
    font-weight: bold;
}

/* Buttons don't need underlines */
a.btn {
    text-decoration: none;
}

/* Enhance visibility of icons */
.fas, .fab {
    margin-right: 0.5rem;
}

/* Enhance visibility for help text */
.form-text {
    margin-top: 0.5rem;
    font-size: 1rem;
}