/* Color Contrast Example Styles */

.example-section .contrast-demo {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

.example-section .contrast-item {
    margin-bottom: 30px;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #ddd;
}

.example-section .contrast-item h3 {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.5em;
}

.example-section .contrast-item p {
    margin: 0;
    line-height: 1.6;
    font-size: 1.1em;
}

/* Good Contrast Examples */

.example-section .good-contrast-1 {
    background-color: #f8f9fa;
    color: #2c3e50;
    /* Contrast ratio: 7.1:1 - Excellent for large text */
}

.example-section .good-contrast-2 {
    background-color: #ffffff;
    color: #495057;
    /* Contrast ratio: 4.5:1 - Meets AA requirement for normal text */
}

.example-section .good-contrast-3 {
    background-color: #e9ecef;
    color: #6c757d;
    /* Contrast ratio: 3.1:1 - Meets AA requirement for large text */
}

.example-section .good-contrast-4 {
    background-color: #ffffff;
    color: #000000;
    /* Contrast ratio: 21:1 - Maximum contrast, ideal for severe visual impairments */
}

/* Bad Contrast Examples */

.example-section .bad-contrast-1 {
    background-color: #ffffff;
    color: #e0e0e0;
    /* Contrast ratio: 1.2:1 - Extremely poor, nearly unreadable */
}

.example-section .bad-contrast-2 {
    background-color: #f5f5f5;
    color: #b0b0b0;
    /* Contrast ratio: 2.1:1 - Fails WCAG requirements */
}

.example-section .bad-contrast-3 {
    background-color: #ffffff;
    color: #333333;
    /* Base text is good, but color-only information is problematic */
}

.example-section .bad-contrast-3 .color-only {
    color: #ff0000; /* Red text */
}

.example-section .bad-contrast-3 .color-only:nth-child(2) {
    color: #00ff00; /* Green text */
}

.example-section .bad-contrast-4 {
    background-color: #000000;
    color: #333333;
    /* Contrast ratio: 1.8:1 - Very poor on dark background */
}

/* Responsive Design */
@media (max-width: 768px) {
    .example-section .contrast-demo {
        padding: 15px;
    }
    
    .example-section .contrast-item {
        padding: 15px;
        margin-bottom: 20px;
    }
    
    .example-section .contrast-item h3 {
        font-size: 1.3em;
    }
    
    .example-section .contrast-item p {
        font-size: 1em;
    }
}

/* Print Styles */
@media print {
    .example-section .contrast-item {
        border: 1px solid #000;
        page-break-inside: avoid;
    }
    
    /* Ensure good contrast in print */
    .example-section .bad-contrast-1,
    .example-section .bad-contrast-2,
    .example-section .bad-contrast-4 {
        background-color: #ffffff !important;
        color: #000000 !important;
    }
}