/* 
   Homepage-specific styles - Extracted from inline styles for better performance
   Optimized for LCP and overall performance
*/

:root {
    /* CSS Custom Properties for consistency and performance */
    --malaysian-blue: #003f7f;
    --malaysian-blue-dark: #002d5c;
    --malaysian-blue-light: #0056b3;
    --malaysian-yellow: #ffcc00;
    --malaysian-red: #cc0000;
    --transition-smooth: all 0.2s ease;
    --transition-fast: all 0.15s ease;
    --shadow-dropdown: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Ensure text is visible with fallback colors */
h1, h2, h3, h4, h5, h6, p, span, div {
    color: inherit;
}

/* Hero text visibility fix */
.hero-content h1 {
    color: white !important;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.hero-content p {
    color: #f3f4f6 !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

/* Category section text visibility */
.gradient-malaysian-alt h2 {
    color: white !important;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.gradient-malaysian-alt p {
    color: #dbeafe !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

/* Category cards text visibility */
.bg-white.bg-opacity-10 h3 {
    color: white !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
}

.bg-white.bg-opacity-10 p {
    color: #e5e7eb !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
}

/* Ensure all text is visible with fallbacks */
.text-white {
    color: white !important;
}

.text-gray-500 {
    color: #6b7280 !important;
}

.text-blue-100 {
    color: #dbeafe !important;
}

/* Fix for specific sections */
section h2 {
    font-weight: 700;
}

section p {
    line-height: 1.6;
}

/* Hero Section Optimizations */
#heroSection {
    /* Use transform and opacity for better performance */
    will-change: transform;
    backface-visibility: hidden;
}

/* Optimized background image loading */
.hero-background {
    /* Use transform instead of expensive background properties */
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Enhanced search dropdown positioning - Performance optimized */
#hero-autocomplete-results {
    z-index: 9999;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 0.5rem;
    box-shadow: var(--shadow-dropdown);
    border-radius: 0.75rem;
    /* Performance optimizations */
    will-change: transform, opacity;
    backface-visibility: hidden;
}

/* Search container with optimized positioning */
.search-container {
    position: relative;
    z-index: 1000;
    margin-bottom: 8rem; /* Extra space for dropdown */
    /* Performance optimization */
    contain: layout style;
}

/* Hero actions positioning */
.hero-actions {
    position: relative;
    z-index: 1;
    margin-top: 4rem;
    padding-top: 2rem;
}

/* Optimized transitions for search dropdown */
#hero-autocomplete-results.hidden {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px) translateZ(0);
    transition: var(--transition-smooth);
    pointer-events: none;
}

#hero-autocomplete-results:not(.hidden) {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) translateZ(0);
    transition: var(--transition-smooth);
    pointer-events: auto;
}

/* Enhanced hover effects for search results - GPU accelerated */
.autocomplete-item {
    transition: var(--transition-fast);
    will-change: transform, background-color;
}

.autocomplete-item:hover {
    background-color: rgb(239 246 255);
    transform: translateX(2px) translateZ(0);
}

/* Responsive button positioning */
.search-container:has(#hero-autocomplete-results:not(.hidden)) + .hero-actions,
.search-container + div.flex {
    margin-top: 6rem;
}

/* Feature cards optimization */
.feature-card {
    /* Use transform for animations */
    will-change: transform;
    backface-visibility: hidden;
    transition: var(--transition-smooth);
}

/* Statistics section animations */
.statistics-section {
    /* Contain animations for better performance */
    contain: layout style paint;
}

/* Manufacturer services section */
.manufacturer-services {
    /* Optimize complex backgrounds */
    contain: layout style paint;
}

/* CTA section optimizations */
.cta-section {
    contain: layout style;
}

/* Responsive design optimizations */
@media (max-width: 768px) {
    #hero-autocomplete-results {
        left: 1rem;
        right: 1rem;
        width: calc(100% - 2rem);
    }
    
    /* Optimize mobile animations */
    .feature-card {
        transform: none;
        will-change: auto;
    }
    
    /* Reduce motion for better mobile performance */
    @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }
}

/* Gradient optimizations with CSS custom properties */
.gradient-malaysian {
    background: #003f7f; /* Fallback color */
    background: linear-gradient(135deg, var(--malaysian-blue, #003f7f) 0%, var(--malaysian-blue-dark, #002d5c) 100%);
}

.gradient-malaysian-alt {
    background: #0056b3; /* Fallback color */
    background: linear-gradient(45deg, var(--malaysian-blue-light, #0056b3) 0%, var(--malaysian-blue, #003f7f) 50%, var(--malaysian-blue-dark, #002d5c) 100%);
}

.gradient-feature {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* Malaysian Color Classes with fallbacks */
.bg-malaysian-blue {
    background-color: #003f7f;
    background-color: var(--malaysian-blue);
}

.bg-malaysian-blue-dark {
    background-color: #002d5c;
    background-color: var(--malaysian-blue-dark);
}

.bg-malaysian-blue-light {
    background-color: #0056b3;
    background-color: var(--malaysian-blue-light);
}

.bg-malaysian-yellow {
    background-color: #ffcc00;
    background-color: var(--malaysian-yellow);
}

.bg-malaysian-red {
    background-color: #cc0000;
    background-color: var(--malaysian-red);
}

.text-malaysian-blue {
    color: #003f7f;
    color: var(--malaysian-blue);
}

.text-malaysian-yellow {
    color: #ffcc00;
    color: var(--malaysian-yellow);
}

.text-malaysian-red {
    color: #cc0000;
    color: var(--malaysian-red);
}

.border-malaysian-blue {
    border-color: #003f7f;
    border-color: var(--malaysian-blue);
}

/* Hover states for Malaysian colors */
.hover\:bg-malaysian-blue:hover {
    background-color: #003f7f;
    background-color: var(--malaysian-blue);
}

.hover\:bg-malaysian-blue-dark:hover {
    background-color: #002d5c;
    background-color: var(--malaysian-blue-dark);
}

.hover\:text-white:hover {
    color: white;
}

/* Focus states */
.focus\:border-malaysian-blue:focus {
    border-color: #003f7f;
    border-color: var(--malaysian-blue);
}

.focus\:ring-malaysian-blue:focus {
    --tw-ring-color: var(--malaysian-blue);
}

/* Animation performance optimizations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px) translateZ(0);
    }
    to {
        opacity: 1;
        transform: translateY(0) translateZ(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px) translateZ(0);
    }
    to {
        opacity: 1;
        transform: translateX(0) translateZ(0);
    }
}

/* Floating shapes animation - Optimized */
@keyframes float {
    0%, 100% {
        transform: translateY(0) translateZ(0) rotate(0deg);
    }
    33% {
        transform: translateY(-20px) translateZ(0) rotate(5deg);
    }
    66% {
        transform: translateY(-10px) translateZ(0) rotate(-5deg);
    }
}

.floating-shape {
    will-change: transform;
    backface-visibility: hidden;
    animation: float 6s ease-in-out infinite;
}

/* FAQ Section Styles */
.faq-container {
    max-width: 56rem;
    margin: 0 auto;
}

.faq-tab-btn {
    cursor: pointer;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 500;
    transition: var(--transition-smooth);
    color: #6b7280;
}

.faq-tab-btn:hover {
    background-color: #f3f4f6;
    color: var(--malaysian-blue);
}

.faq-tab-btn.active {
    background-color: var(--malaysian-blue);
    color: white;
}

.faq-content {
    animation: fadeInUp 0.3s ease-out;
}

.faq-question {
    cursor: pointer;
    user-select: none;
    transition: var(--transition-fast);
}

.faq-question:hover {
    background-color: #f9fafb;
}

.faq-question h3 {
    color: #111827;
    font-size: 1.125rem;
    font-weight: 600;
}

.faq-icon {
    color: var(--malaysian-blue);
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 1;
    transition: var(--transition-fast);
    min-width: 24px;
    text-align: center;
}

.faq-answer {
    overflow: hidden;
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
    max-height: 500px;
    opacity: 1;
}

.faq-answer.hidden {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-top: none;
}

.faq-answer p {
    color: #4b5563;
    line-height: 1.75;
}