/**
 * Button Visibility Fixes for Task 4: Fix button styling visibility issues
 * Created: 2025-09-17
 * 
 * This CSS file fixes:
 * 1. White text on white background issues for trial buttons
 * 2. Proper contrast ratios for all button states
 * 3. Consistent styling across all languages
 * 4. Mobile viewport compatibility
 * 
 * Requirements: 4.1, 4.2, 4.3, 4.4, 4.5
 */

/* ===== HERO SECTION TRIAL BUTTON FIXES ===== */

/* Fix the main hero section "Start 7-Day Free Trial" button */
#get-started-btn,
a[data-i18n="hero.getStarted"] {
    /* Ensure proper background and text colors */
    background-color: #ffffff !important;
    color: #3a55b4 !important;
    border: 2px solid #ffffff !important;
    
    /* Improve text visibility */
    font-weight: 600 !important;
    text-shadow: none !important;
    
    /* Ensure proper contrast */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
    
    /* Smooth transitions */
    transition: all 0.3s ease !important;
}

/* Hero button hover state - fix white text on white background */
#get-started-btn:hover,
a[data-i18n="hero.getStarted"]:hover {
    background-color: #3a55b4 !important;
    color: #ffffff !important;
    border-color: #3a55b4 !important;
    
    /* Enhanced hover effects */
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 12px rgba(58, 85, 180, 0.3) !important;
}

/* Hero button active/focus states */
#get-started-btn:active,
#get-started-btn:focus,
a[data-i18n="hero.getStarted"]:active,
a[data-i18n="hero.getStarted"]:focus {
    background-color: #2d4494 !important;
    color: #ffffff !important;
    border-color: #2d4494 !important;
    outline: 2px solid #ffffff !important;
    outline-offset: 2px !important;
}

/* ===== CTA SECTION TRIAL BUTTON FIXES ===== */

/* Fix CTA section "Start 7-Day Free Trial" button */
a[data-i18n="cta.button"],
a[onclick="signupWithCognito()"] {
    background-color: #3a55b4 !important;
    color: #ffffff !important;
    border: 2px solid #3a55b4 !important;
    
    /* Improve readability */
    font-weight: 700 !important;
    text-shadow: none !important;
    
    /* Better contrast */
    box-shadow: 0 4px 6px rgba(58, 85, 180, 0.2) !important;
}

/* CTA button hover state */
a[data-i18n="cta.button"]:hover,
a[onclick="signupWithCognito()"]:hover {
    background-color: #6caddf !important;
    color: #ffffff !important;
    border-color: #6caddf !important;
    
    /* Enhanced hover effects */
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 12px rgba(108, 173, 223, 0.3) !important;
}

/* ===== GENERAL TRIAL BUTTON FIXES ===== */

/* Fix all buttons containing "Start 7-Day Free Trial" text */
a:contains("Start 7-Day Free Trial"),
button:contains("Start 7-Day Free Trial"),
[data-i18n*="start7DayTrial"],
[data-i18n*="getStarted"] {
    /* Ensure minimum contrast ratio of 4.5:1 */
    position: relative;
    z-index: 1;
}

/* Fix buttons in hero gradient backgrounds */
.hero-gradient a,
.hero-gradient button {
    /* Ensure visibility on gradient backgrounds */
    position: relative;
    z-index: 2;
}

/* Specific fix for white buttons on gradient backgrounds */
.hero-gradient .bg-white {
    background-color: #ffffff !important;
    color: #3a55b4 !important;
    border: 2px solid #ffffff !important;
    
    /* Add subtle shadow for better definition */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

/* Remove the generic hover rule and only target specific button elements */
/* .hero-gradient .bg-white:hover - REMOVED to prevent affecting image containers */

/* Only apply hover effects to specific button and link elements */
.hero-gradient a.bg-white:hover,
.hero-gradient button.bg-white:hover,
.hero-gradient .bg-white[href]:hover,
.hero-gradient .bg-white[onclick]:hover {
    background-color: #3a55b4 !important;
    color: #ffffff !important;
    border-color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

/* Explicitly prevent hover effects on any div containing images */
.hero-gradient div.bg-white:hover {
    background-color: #ffffff !important;
    color: inherit !important;
    border-color: inherit !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

/* Ensure images themselves don't get hover effects */
.hero-gradient .bg-white img {
    transition: none !important;
    transform: none !important;
    filter: none !important;
}

.hero-gradient .bg-white:hover img {
    transition: none !important;
    transform: none !important;
    filter: none !important;
}

/* Very specific rule for the about page image container */
.hero-gradient .bg-white.rounded-lg.p-6.h-64:hover,
.hero-gradient .bg-white.rounded-lg.p-6:hover,
.hero-gradient .bg-white.flex.items-center.justify-center:hover {
    background-color: #ffffff !important;
    color: inherit !important;
    border-color: inherit !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    transform: none !important;
}

/* Prevent any hover effects on the specific image container structure */
.hero-gradient div.bg-white.rounded-lg:hover img,
.hero-gradient div.bg-white:hover img[src*="logo"] {
    background-color: transparent !important;
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
}

/* ===== LANGUAGE-SPECIFIC BUTTON FIXES ===== */

/* Ensure consistent styling across all languages */
[lang="en"] #get-started-btn,
[lang="zh-HK"] #get-started-btn,
[lang="zh-CN"] #get-started-btn,
[lang="en"] a[data-i18n="hero.getStarted"],
[lang="zh-HK"] a[data-i18n="hero.getStarted"],
[lang="zh-CN"] a[data-i18n="hero.getStarted"] {
    /* Consistent styling regardless of language */
    min-width: 200px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Adjust button width for longer Chinese text */
[lang="zh-HK"] #get-started-btn,
[lang="zh-CN"] #get-started-btn,
[lang="zh-HK"] a[data-i18n="hero.getStarted"],
[lang="zh-CN"] a[data-i18n="hero.getStarted"] {
    min-width: 220px;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* ===== MOBILE VIEWPORT FIXES ===== */

@media (max-width: 768px) {
    /* Mobile-specific button fixes */
    #get-started-btn,
    a[data-i18n="hero.getStarted"],
    a[data-i18n="cta.button"],
    a[onclick="signupWithCognito()"] {
        /* Ensure touch-friendly size */
        min-height: 44px !important;
        font-size: 16px !important; /* Prevent zoom on iOS */
        padding: 12px 20px !important;
        
        /* Full width on mobile for better usability */
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        margin: 10px 0 !important;
    }
    
    /* Mobile hover states (touch devices) */
    #get-started-btn:active,
    a[data-i18n="hero.getStarted"]:active {
        background-color: #3a55b4 !important;
        color: #ffffff !important;
        transform: scale(0.98) !important;
    }
    
    /* Adjust hero section on mobile */
    .hero-gradient {
        padding: 2rem 1rem !important;
    }
    
    .hero-gradient .flex {
        flex-direction: column !important;
        gap: 1rem !important;
    }
}

@media (max-width: 480px) {
    /* Extra small screens */
    #get-started-btn,
    a[data-i18n="hero.getStarted"] {
        font-size: 14px !important;
        padding: 10px 16px !important;
        min-height: 40px !important;
    }
}

/* ===== ACCESSIBILITY IMPROVEMENTS ===== */

/* High contrast mode support */
@media (prefers-contrast: high) {
    #get-started-btn,
    a[data-i18n="hero.getStarted"],
    a[data-i18n="cta.button"],
    a[onclick="signupWithCognito()"] {
        border-width: 3px !important;
        font-weight: 700 !important;
    }
    
    .hero-gradient .bg-white {
        border: 3px solid #000000 !important;
        color: #000000 !important;
    }
    
    /* Only apply hover effects to specific button and link elements */
    .hero-gradient a.bg-white:hover,
    .hero-gradient button.bg-white:hover,
    .hero-gradient .bg-white[href]:hover,
    .hero-gradient .bg-white[onclick]:hover {
        background-color: #000000 !important;
        color: #ffffff !important;
        border-color: #ffffff !important;
    }
    
    /* Explicitly prevent hover effects on div containers */
    .hero-gradient div.bg-white:hover {
        background-color: #ffffff !important;
        color: #000000 !important;
        border-color: #000000 !important;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    #get-started-btn,
    a[data-i18n="hero.getStarted"],
    a[data-i18n="cta.button"],
    a[onclick="signupWithCognito()"] {
        transition: none !important;
    }
    
    #get-started-btn:hover,
    a[data-i18n="hero.getStarted"]:hover,
    a[data-i18n="cta.button"]:hover,
    a[onclick="signupWithCognito()"]:hover {
        transform: none !important;
    }
}

/* Focus indicators for keyboard navigation */
#get-started-btn:focus-visible,
a[data-i18n="hero.getStarted"]:focus-visible,
a[data-i18n="cta.button"]:focus-visible,
a[onclick="signupWithCognito()"]:focus-visible {
    outline: 3px solid #fbbf24 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 6px rgba(251, 191, 36, 0.3) !important;
}

/* ===== PRINT STYLES ===== */

@media print {
    #get-started-btn,
    a[data-i18n="hero.getStarted"],
    a[data-i18n="cta.button"],
    a[onclick="signupWithCognito()"] {
        background-color: #ffffff !important;
        color: #000000 !important;
        border: 2px solid #000000 !important;
        box-shadow: none !important;
    }
}

/* ===== DEBUGGING HELPERS (Remove in production) ===== */

/* Uncomment for debugging button visibility issues */
/*
#get-started-btn::before,
a[data-i18n="hero.getStarted"]::before {
    content: "DEBUG: Hero Button";
    position: absolute;
    top: -20px;
    left: 0;
    font-size: 10px;
    color: red;
    background: yellow;
    padding: 2px;
    z-index: 1000;
}

a[data-i18n="cta.button"]::before,
a[onclick="signupWithCognito()"]::before {
    content: "DEBUG: CTA Button";
    position: absolute;
    top: -20px;
    left: 0;
    font-size: 10px;
    color: red;
    background: yellow;
    padding: 2px;
    z-index: 1000;
}
*/
/* C
RITICAL: Absolute override for logo image hover effects */
.hero-gradient .bg-white:hover,
.hero-gradient .bg-white:hover * {
    background-color: #ffffff !important;
}

/* Only allow hover effects on elements with specific interactive attributes */
.hero-gradient .bg-white[href]:hover,
.hero-gradient .bg-white[onclick]:hover,
.hero-gradient a.bg-white:hover,
.hero-gradient button.bg-white:hover {
    background-color: #3a55b4 !important;
    color: #ffffff !important;
}

/* Nuclear option: Disable all hover effects on the specific logo container */
.hero-gradient div.bg-white.rounded-lg.p-6.h-64.flex.items-center.justify-center:hover {
    background-color: #ffffff !important;
    color: inherit !important;
    border-color: inherit !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    transform: none !important;
    transition: none !important;
}