/* WCAG AA-compliant styles for Behavioral Psychology card and EXAMPLE PIVOT box */
.card-bg-dark {
    background-color: #7a174a; /* dark magenta for high contrast */
}
.card-text-dark {
    color: #2d0a1b; /* very dark [class*="gradient"] .text-gray-300,
[style*="gradient"] .text-gray-300 {
    color: #ffffff !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8) !important;
}

/* COMPREHENSIVE FRAMEWORK CARD ACCESSIBILITY FIXES */
/* These classes fix all the framework cards like Cliffhanger, Authenticity Crucible, etc. */

/* Universal Framework Card Background Enhancement */
.framework-card-bg {
    background: linear-gradient(to bottom right, #7f1d1d, #991b1b) !important; /* Dark gradient for all cards */
    border: 2px solid rgba(255, 255, 255, 0.2) !important; /* Stronger border visibility */
}

/* Universal Framework Card Text Enhancement - High Contrast Dark Text */
.framework-card-text {
    color: #000000 !important; /* Pure black for maximum contrast */
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8) !important; /* White shadow for readability */
    font-weight: 600 !important;
    background: rgba(255, 255, 255, 0.9) !important; /* Semi-transparent white background */
    padding: 2px 6px !important;
    border-radius: 4px !important;
}

/* Framework Card overrides for Tailwind classes */
.framework-card .text-gray-300,
.framework-card .text-gray-400 {
    color: #000000 !important; /* Pure black */
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8) !important;
    font-weight: 600 !important;
    background: rgba(255, 255, 255, 0.9) !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
}

/* Framework Card Title Enhancement */
.framework-card-title,
.framework-card .font-bold {
    color: #000000 !important; /* Pure black */
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.9) !important;
    font-weight: 800 !important;
    background: rgba(255, 255, 255, 0.95) !important;
    padding: 4px 8px !important;
    border-radius: 6px !important;
}

/* Framework Card Subtitle Enhancement - Dark text with white background */
.framework-card-subtitle {
    color: #000000 !important; /* Pure black */
    text-shadow: none !important;
    font-weight: 700 !important;
    background: rgba(255, 255, 255, 0.95) !important;
    padding: 3px 8px !important;
    border-radius: 4px !important;
    border: 1px solid rgba(0, 0, 0, 0.2) !important;
}

/* Framework Card Example Boxes Enhancement - Dark backgrounds with white text */
.framework-example-box {
    background: rgba(0, 0, 0, 0.85) !important; /* Very dark background */
    border: 2px solid rgba(255, 255, 255, 0.5) !important;
}

.framework-example-text {
    color: #ffffff !important; /* Pure white text on dark background */
    text-shadow: none !important;
    font-weight: 600 !important;
}

.framework-example-label {
    color: #ffffff !important;
    text-shadow: none !important;
    font-weight: 700 !important;
}
    color: #ffffff !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9) !important;
    font-weight: 500 !important;
}

.framework-example-label {
    color: #fbbf24 !important; /* Gold color for labels */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9) !important;
    font-weight: 700 !important;
}

/* Specific Framework Card Color Fixes */

/* Cliffhanger Card (Orange theme) */
.cliffhanger-card {
    background: linear-gradient(to bottom right, #92400e, #b45309) !important; /* Dark orange gradient */
}

.cliffhanger-subtitle {
    color: #fed7aa !important; /* Light orange that meets contrast */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9) !important;
}

.cliffhanger-icon {
    color: #fbbf24 !important; /* Gold for icons */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9) !important;
}

/* Authenticity Crucible Card (Red theme) */
.authenticity-card {
    background: linear-gradient(to bottom right, #7f1d1d, #991b1b) !important; /* Dark red gradient */
}

.authenticity-subtitle {
    color: #fecaca !important; /* Light red that meets contrast */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9) !important;
}

.authenticity-icon {
    color: #fbbf24 !important; /* Gold for better contrast */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9) !important;
}

/* Frame-Break Eruption Card (Purple theme) */
.frame-break-card {
    background: linear-gradient(to bottom right, #581c87, #6b21a8) !important; /* Dark purple gradient */
}

.frame-break-subtitle {
    color: #e9d5ff !important; /* Light purple that meets contrast */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9) !important;
}

.frame-break-icon {
    color: #fbbf24 !important; /* Gold for better contrast */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9) !important;
}

/* Morning After Gambit Card (Gold/Yellow theme) */
.morning-after-card {
    background: linear-gradient(to bottom right, #a16207, #ca8a04) !important; /* Dark gold gradient */
}

.morning-after-subtitle {
    color: #fef3c7 !important; /* Light yellow that meets contrast */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9) !important;
}

.morning-after-icon {
    color: #ffffff !important; /* White for better contrast on yellow */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9) !important;
}

/* Graceful Exit Card (Gray/Blue theme) */
.graceful-exit-card {
    background: linear-gradient(to bottom right, #1e40af, #1d4ed8) !important; /* Dark blue gradient */
}

.graceful-exit-subtitle {
    color: #dbeafe !important; /* Light blue that meets contrast */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9) !important;
}

.graceful-exit-icon {
    color: #fbbf24 !important; /* Gold for better contrast */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9) !important;
}

/* Additional Framework Cards */

/* Specific subtitle overrides for each framework card theme */
.frame-setter-subtitle,
.depth-charge-subtitle,
.cliffhanger-subtitle,
.authenticity-subtitle,
.frame-break-subtitle,
.morning-after-subtitle,
.graceful-exit-subtitle,
.bio-architect-subtitle,
.profile-deconstruction-subtitle {
    color: #000000 !important; /* Pure black */
    background: rgba(255, 255, 255, 0.95) !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
    border: 1px solid rgba(0, 0, 0, 0.2) !important;
    font-weight: 700 !important;
}

/* Override any remaining colored subtitle text */
.framework-card .text-purple-300,
.framework-card .text-pink-300,
.framework-card .text-orange-300,
.framework-card .text-red-300,
.framework-card .text-blue-300,
.framework-card .text-cyan-300,
.framework-card .text-yellow-300,
.framework-card .text-gray-300 {
    color: #000000 !important;
    background: rgba(255, 255, 255, 0.95) !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
}

/* Universal Icon Enhancement for Framework Cards - High Contrast */
.framework-icon {
    color: #000000 !important; /* Black icons */
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.9) !important;
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.8)) !important;
    background: rgba(255, 255, 255, 0.9) !important;
    border-radius: 50% !important;
    padding: 2px !important;
}

/* Icon background squares - make them darker for better icon contrast */
.framework-card .w-16.h-16 {
    background: rgba(0, 0, 0, 0.8) !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
}

/* Bullet point icons and checkmarks */
.framework-card .fas.fa-check-circle,
.framework-card .fas.fa-clock,
.framework-card .fas.fa-heart,
.framework-card .fas.fa-eye,
.framework-card .fas.fa-lightbulb,
.framework-card .fas.fa-crown,
.framework-card .fas.fa-target,
.framework-card .fas.fa-magic,
.framework-card .fas.fa-question-circle {
    color: #000000 !important;
    background: rgba(255, 255, 255, 0.9) !important;
    border-radius: 50% !important;
    padding: 2px !important;
}

.card-text-white {
    color: #fff; /* pure white for use on dark backgrounds */
}
.pivot-box-bg-dark {
    background-color: #3a2a6a; /* dark purple for high contrast */
}
.pivot-box-text-dark {
    color: #1a1a1a; /* very dark text for high contrast */
}
.pivot-box-text-white {
    color: #fff; /* pure white for use on dark backgrounds */
}
.icon-high-contrast {
    color: #fff; /* white icon for dark backgrounds */
    filter: drop-shadow(0 0 2px #2d0a1b); /* optional: add shadow for extra clarity */
}

/* WCAG AA Compliant Polarity Engine Section Fixes */
/* Fixes for the specific accessibility issues in advanced-frameworks-section.html */

/* High contrast background for the Polarity Engine card */
.polarity-engine-bg {
    background: linear-gradient(to bottom right, #7f1d1d, #991b1b) !important; /* Dark red gradient for better contrast */
    border: 2px solid #dc2626 !important; /* Stronger border for definition */
}

/* High contrast text for main content */
.polarity-engine-text {
    color: #ffffff !important; /* Pure white text for maximum contrast */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8) !important; /* Strong shadow for readability */
}

/* High contrast text for subtitle */
.polarity-engine-subtitle {
    color: #fecaca !important; /* Very light red that meets contrast requirements */
    font-weight: 700 !important; /* Make it bolder for better visibility */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8) !important;
}

/* High contrast for bullet points */
.polarity-engine-bullet-text {
    color: #ffffff !important; /* Pure white for bullet point text */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8) !important;
}

/* Enhanced icon contrast with stronger shadow */
.polarity-engine-icon {
    color: #ffffff !important; /* White icon */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9) !important; /* Strong shadow for definition */
    filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.8)) !important;
}

/* High contrast EXAMPLE PIVOT box */
.pivot-box-polarity {
    background: rgba(127, 29, 29, 0.95) !important; /* Much darker red background */
    border: 2px solid #dc2626 !important; /* Strong visible border */
}

/* High contrast text in EXAMPLE PIVOT box */
.pivot-box-polarity-text {
    color: #ffffff !important; /* Pure white text */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.9) !important; /* Strong shadow */
    font-weight: 500 !important; /* Medium weight for better visibility */
}

/* High contrast label in EXAMPLE PIVOT box */
.pivot-box-polarity-label {
    color: #fecaca !important; /* Very light red for label */
    font-weight: 700 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8) !important;
}

/* Fire icon enhancements for better contrast */
.fire-icon-enhanced {
    color: #fbbf24 !important; /* Bright yellow-orange for better contrast against red */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9) !important;
    filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.8)) !important;
}

/* General WCAG AA Accessibility Improvements */
/* Additional high-contrast utilities for common problematic combinations */

/* High contrast text on gradient backgrounds */
.text-high-contrast-light {
    color: #ffffff !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9) !important;
}

.text-high-contrast-dark {
    color: #1a1a1a !important;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.9) !important;
}

/* High contrast for light text on red/pink backgrounds */
.gradient-primary .text-high-contrast,
.bg-gradient-to-r .text-high-contrast,
.bg-red-500 .text-high-contrast,
.bg-pink-500 .text-high-contrast {
    color: #ffffff !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9) !important;
    font-weight: 600 !important;
}

/* High contrast buttons and CTAs */
.btn-high-contrast {
    background: linear-gradient(135deg, #1f2937 0%, #374151 100%) !important;
    color: #ffffff !important;
    border: 2px solid #9ca3af !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8) !important;
}

.btn-high-contrast:hover {
    background: linear-gradient(135deg, #374151 0%, #4b5563 100%) !important;
    border-color: #d1d5db !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3) !important;
}

/* High contrast for testimonial cards and glass effects */
.glass-card-high-contrast {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px);
    border: 2px solid rgba(156, 163, 175, 0.5) !important;
    color: #1a1a1a !important;
}

/* High contrast for floating hearts and decorative elements */
.floating-heart-accessible {
    color: rgba(239, 68, 68, 0.6) !important; /* Darker red with better visibility */
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8) !important;
}

/* High contrast focus states for all interactive elements */
.focus-high-contrast:focus,
.focus-high-contrast:focus-visible {
    outline: 3px solid #2563eb !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 6px rgba(37, 99, 235, 0.3) !important;
}

/* High contrast for FAQ and collapsible content */
.faq-high-contrast {
    background: #ffffff !important;
    border: 2px solid #d1d5db !important;
    color: #1f2937 !important;
}

.faq-high-contrast:hover {
    border-color: #2563eb !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15) !important;
}

/* High contrast for mobile sticky elements */
.sticky-high-contrast {
    background: #ffffff !important;
    border-top: 3px solid #2563eb !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15) !important;
    color: #1f2937 !important;
}

/* AUTOMATIC CONTRAST FIXES FOR COMMON PROBLEMATIC PATTERNS */
/* These classes override common low-contrast combinations automatically */

/* Fix for light gray text on gradient backgrounds */
.gradient-primary .text-gray-300,
.gradient-primary .text-gray-400,
.gradient-secondary .text-gray-300,
.gradient-secondary .text-gray-400,
.bg-gradient-to-r .text-gray-300,
.bg-gradient-to-br .text-gray-300,
.bg-gradient-to-bl .text-gray-300 {
    color: #ffffff !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8) !important;
}

/* Fix for light red/pink text on gradient backgrounds */
.gradient-primary .text-red-300,
.gradient-primary .text-pink-300,
.bg-gradient-to-r .text-red-300,
.bg-gradient-to-br .text-red-300 {
    color: #fecaca !important; /* Light red that meets contrast requirements */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9) !important;
    font-weight: 600 !important;
}

/* Fix for any text on dark gradient sections */
section[class*="gradient"] .text-gray-300,
section[class*="gradient"] .text-gray-400,
div[class*="gradient"] .text-gray-300,
div[class*="gradient"] .text-gray-400 {
    color: #ffffff !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8) !important;
}

/* Fix for problematic red icon colors */
.text-red-400,
.text-red-300 {
    color: #fbbf24 !important; /* Gold/yellow that contrasts well with red backgrounds */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9) !important;
}

/* Additional pattern fixes for specific sections */

/* Psychology section fixes */
section[id*="psychology"] .text-gray-300,
section[class*="psychology"] .text-gray-300 {
    color: #ffffff !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8) !important;
}

/* Advanced frameworks section fixes */
section[id*="advanced-frameworks"] .text-gray-300,
section[id*="frameworks"] .text-gray-300 {
    color: #ffffff !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8) !important;
}

/* General catch-all for any gradient container with light text */
[class*="bg-gradient"] .text-gray-300,
[class*="gradient-"] .text-gray-300,
[style*="gradient"] .text-gray-300 {
    color: #ffffff !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8) !important;
}
a:not(.btn-primary):not(.touch-target):focus-visible {
    outline: 2px solid #4A90E2;
    outline-offset: 2px;
    border-radius: 2px;
}

/* WCAG AA-compliant text colors for Behavioral Psychology card labels */
.card-label-curiosity {
    color: #7a174a; /* dark magenta, passes contrast */
}
.card-label-pushpull {
    color: #3a2a6a; /* dark purple, passes contrast */
}
.card-label-escalation {
    color: #174a7a; /* dark blue, passes contrast */
}
.card-label-vulnerability {
    color: #7a173a; /* dark rose, passes contrast */
}
/* WCAG AA Accessibility Enhancements */
/* Maintains existing color scheme while ensuring compliance */

/* Focus Management - WCAG 2.4.7 */
.focus-visible:focus,
.focus-visible:focus-visible,
button:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid #4A90E2;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.3);
}

/* High contrast focus for interactive elements on gradient backgrounds */
.gradient-primary .focus-visible:focus,
.gradient-primary button:focus-visible,
.gradient-primary a:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 2px;
    box-shadow: 0 0 0 1px #000000, 0 0 0 4px #ffffff;
}

/* Enhanced button focus states */
.btn-primary:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.4), 0 8px 25px rgba(255, 107, 107, 0.4);
}

/* Mobile menu button accessibility */
#mobile-menu-button {
    position: relative;
}

#mobile-menu-button:focus-visible {
    outline: 2px solid #4A90E2;
    outline-offset: 2px;
}

#mobile-menu-button[aria-expanded="true"] {
    background-color: rgba(0, 0, 0, 0.05);
}

/* Transform button enhanced accessibility */
.transform-btn {
    position: relative;
    min-height: 44px; /* WCAG AA minimum touch target */
    min-width: 44px;
}

.transform-btn:focus-visible {
    outline: 2px solid #4A90E2;
    outline-offset: 2px;
    z-index: 1;
}

.transform-btn[aria-disabled="true"] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Reset button accessibility */
.reset-btn {
    min-height: 44px;
    min-width: 44px;
}

.reset-btn:focus-visible {
    outline: 2px solid #4A90E2;
    outline-offset: 2px;
}

/* FAQ button accessibility */
.faq-toggle {
    min-height: 44px;
    width: 100%;
    text-align: left;
    padding: 1rem;
    cursor: pointer;
    border: none;
    background: transparent;
    position: relative;
}

.faq-toggle:focus-visible {
    outline: 2px solid #4A90E2;
    outline-offset: 2px;
    background-color: rgba(74, 144, 226, 0.05);
}

.faq-toggle[aria-expanded="true"] .faq-arrow {
    transform: rotate(180deg);
}

.faq-content {
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.faq-content[aria-hidden="true"] {
    max-height: 0;
}

.faq-content[aria-hidden="false"] {
    max-height: 500px; /* Adjust as needed */
}

/* Improved color contrast for gradient text */
.gradient-text-enhanced {
    background: linear-gradient(135deg, #ff4444 0%, #cc0000 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    /* Fallback for browsers that don't support background-clip */
    color: #cc0000;
}

/* Enhanced contrast for text on gradient backgrounds */
.text-on-gradient-primary {
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.text-on-gradient-secondary {
    color: #000000;
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.8);
}

/* Skip link styling */
.skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: #000000;
    color: #ffffff;
    padding: 8px;
    text-decoration: none;
    border-radius: 4px;
    z-index: 1000;
    font-weight: bold;
}

.skip-link:focus {
    top: 6px;
}

/* Screen reader only content */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.sr-only.focus:focus {
    position: static;
    width: auto;
    height: auto;
    padding: inherit;
    margin: inherit;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* Motion preferences - WCAG 2.3.3 */
@media (prefers-reduced-motion: reduce) {
    .floating-heart,
    .pulse-heart,
    .feature-card,
    .testimonial-card {
        animation: none !important;
        transition: none !important;
    }
    
    .btn-primary:hover {
        transform: none !important;
    }
    
    .feature-card:hover,
    .testimonial-card:hover {
        transform: none !important;
    }
    
    /* Keep functional transitions but reduce motion */
    .transition-colors,
    .transition-opacity {
        transition-duration: 0.01s !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .glass-card {
        background: rgba(255, 255, 255, 1);
        border: 2px solid #000000;
    }
    
    .btn-primary {
        border: 2px solid #000000;
    }
    
    .gradient-text {
        color: #000000 !important;
        background: none !important;
        -webkit-text-fill-color: inherit !important;
    }
}

/* Mobile menu focus trap */
.mobile-menu-open {
    overflow: hidden;
}

#mobile-menu[aria-hidden="false"] {
    display: block;
}

#mobile-menu[aria-hidden="true"] {
    display: none;
}

/* Loading states accessibility */
.loading-section {
    position: relative;
}

.loading-section[aria-busy="true"] {
    opacity: 0.7;
}

.loading-section[aria-live="polite"] {
    /* Screen readers will announce content changes */
    position: relative;
}

/* Form field improvements */
.form-field {
    position: relative;
    margin-bottom: 1rem;
}

.form-field label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: #374151;
}

.form-field input,
.form-field textarea {
    min-height: 44px;
    padding: 0.75rem;
    border: 2px solid #d1d5db;
    border-radius: 0.375rem;
    width: 100%;
}

.form-field input:focus,
.form-field textarea:focus {
    outline: none;
    border-color: #4A90E2;
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
}

.form-field.error input,
.form-field.error textarea {
    border-color: #ef4444;
}

.form-field .error-message {
    color: #ef4444;
    font-size: 0.875rem;
    margin-top: 0.25rem;
    display: flex;
    align-items: center;
}

.form-field .error-message::before {
    content: "⚠";
    margin-right: 0.5rem;
    font-weight: bold;
}

/* Sticky CTA accessibility */
#sticky-cta {
    border-top: 2px solid #e5e7eb;
}

#sticky-cta button[aria-label] {
    min-width: 44px;
    min-height: 44px;
}

/* Enhanced landmark regions */
main {
    outline: none;
}

main:focus {
    outline: none;
}

/* Carousel/slider accessibility if present */
.carousel-item[aria-hidden="true"] {
    display: none;
}

.carousel-item[aria-hidden="false"] {
    display: block;
}

/* Interactive demo accessibility */
.interactive-demo-card {
    position: relative;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 1.5rem;
}

.interactive-demo-card:focus-within {
    border-color: #4A90E2;
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
}

/* Message bubble accessibility */
.message-bubble {
    position: relative;
    padding: 1rem;
    border-radius: 1rem;
    margin: 0.5rem 0;
    min-height: 44px;
    display: flex;
    align-items: center;
}

/* Status announcements */
.sr-announcement {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Ensure sufficient spacing for touch targets */
.touch-target {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.touch-target:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

/* Improved link styling */
a:not(.btn-primary):not(.touch-target) {
    color: #1d4ed8;
    text-decoration: underline;
    text-underline-offset: 2px;
}

a:not(.btn-primary):not(.touch-target):hover {
    color: #1e40af;
    text-decoration: underline;
}

a:not(.btn-primary):not(.touch-target):focus-visible {
    outline: 2px solid #4A90E2;
    outline-offset: 2px;
    border-radius: 2px;
}