/* 
   UI Polish for Automation Solution AI 
   Based on Test Report by UX/UI Specialist
*/

/* 1. Header Sticky Strength (Crucial fix) */
.navbar,
header.navbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 999999 !important;
    /* Ensure it's on top of everything */
    background: rgba(5, 5, 5, 0.95) !important;
    /* More opaque for readability */
    backdrop-filter: blur(25px) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
    pointer-events: auto !important;
}

/* 2. Section Background Variations & Padding (Better contrast) */
main section {
    padding-top: 8rem !important;
    padding-bottom: 8rem !important;
}

main section:nth-of-type(even) {
    background: rgba(168, 85, 247, 0.1) !important;
    /* Stronger purple tint */
}

main section:nth-of-type(odd) {
    background: rgba(59, 130, 246, 0.08) !important;
    /* Subtle blue tint */
}

main section:first-of-type {
    background: transparent !important;
    padding-top: 10rem !important;
    /* Extra room for header */
}

/* 3. Service Cards (Bento Items) Fixes */
.bento-item i {
    font-size: 3rem !important;
    /* Large icons for premium look */
    margin-bottom: 2rem !important;
    display: block;
}

.bento-item h3 {
    margin-top: 2rem !important;
    font-size: 1.75rem !important;
    font-weight: 800 !important;
}

.bento-item:hover {
    box-shadow: 0 0 60px rgba(168, 85, 247, 0.6) !important;
    transform: translateY(-10px) !important;
}

/* Fix Icon Backgrounds (User request: Remove quadradinho fundo) */
.glass.w-12,
.glass.w-20,
.glass.h-12,
.glass.h-20,
div.glass:has(> i.fas),
div.glass:has(> i.fab) {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* 4. FAQ Accordion Fixes */
.faq-question {
    padding: 2rem 0 !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.faq-question:hover {
    color: #a855f7 !important;
    padding-left: 20px !important;
}

.faq-chevron {
    font-size: 2rem !important;
    /* Highly visible */
}

.faq-answer.open {
    background: rgba(255, 255, 255, 0.1) !important;
    padding: 2rem !important;
    border-radius: 16px !important;
}

/* 5. Chat Widget Removed from hardcoded CSS */
/* Deixamos o Lovable gerir o próprio layout para não quebrar a janela de chat */

/* 6. Typography Styling */
h1 {
    line-height: 1.0 !important;
    letter-spacing: -0.06em !important;
}

@media (max-width: 768px) {
    h1 {
        font-size: 2rem !important;
        line-height: 1.1 !important;
    }

    h2 {
        font-size: 1.75rem !important;
    }

    main section {
        padding-top: 5rem !important;
        padding-bottom: 5rem !important;
    }
}

/* 7. Touch Targets & Standardized Spacing */
button,
a.btn,
a.glow,
.px-8,
.px-6 {
    min-height: 48px;
    min-width: 48px;
}

.nav-pill {
    min-height: auto !important;
    min-width: auto !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    font-size: 14px !important;
    /* Aumentado de 10px para 14px */
    padding: 8px 20px !important;
    /* Mais conforto para o clique */
    font-weight: 700 !important;
}

/* Fix Search Text Visibility */
#smart-search {
    color: #ffffff !important;
}

/* 8. Tech Icons Enlargement */
.tech-icon,
.infra-icon,
.technology-icon,
.infra-card i {
    width: 80px !important;
    height: 80px !important;
    font-size: 3rem !important;
}
/* Lovable Widget Anti-Cutoff Override */
#lovable-widget-container,
#lovable-widget-container iframe,
iframe[src*="lovable"],
iframe[title="Chat widget"] {
    max-height: 92vh !important;
    height: 100% !important;
    min-height: 720px !important;
    overflow: visible !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 24px !important;
}

#lovable-widget-container {
    overflow: visible !important;
}

#lovable-widget-container iframe,
iframe[src*="lovable"],
iframe[title="Chat widget"] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    object-position: top center !important;
}

/* =========================================
   APPLE PERFORMANCE MODE STRATEGY
   ========================================= */

/* 1. Remove Expensive Background Blurs on Cards */
.glass, .bento-item, main section:nth-of-type(even), main section:nth-of-type(odd) {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    /* Substituto Premium: Negro rico quase sólido com ligeira transparência */
    background: rgba(12, 12, 16, 0.98) !important; 
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* Preserve Navbar Blur (Because Apple uses it on thin headers) */
.navbar, header.navbar {
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    background: rgba(5, 5, 5, 0.85) !important;
}

/* 2. Pause continuous infinite animations to save CPU */
.blob, .animate-pulse, .animate-bounce, .glow-effect {
    animation-duration: 8s !important; /* Slow down drastically if not paused */
}

/* 3. Fast Transitions (Snappy Feel) */
* {
    transition-duration: 0.2s !important;
}

/* 4. Restore functional light mode on homepage */
body.light-mode .navbar,
body.light-mode header.navbar {
    background: rgba(255, 255, 255, 0.92) !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08) !important;
}

body.light-mode main section:nth-of-type(even),
body.light-mode main section:nth-of-type(odd) {
    background: rgba(255, 255, 255, 0.92) !important;
}

body.light-mode .glass,
body.light-mode .bento-item {
    background: rgba(255, 255, 255, 0.82) !important;
    border: 1px solid rgba(148, 163, 184, 0.22) !important;
    color: #1e293b !important;
}

body.light-mode .faq-answer.open {
    background: rgba(99, 102, 241, 0.08) !important;
}

body.light-mode #smart-search {
    color: #0f172a !important;
    background: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(148, 163, 184, 0.4) !important;
}

body.light-mode #smart-search::placeholder {
    color: #64748b !important;
}

body.light-mode #search-results {
    background: #ffffff !important;
    border-color: rgba(148, 163, 184, 0.25) !important;
}