/* Cream Theme Override CSS - Highest Priority */

/* Force cream theme variables */
:root {
    --bg-primary: #ffffff !important;        /* Pure white */
    --bg-secondary: #fefcf7 !important;      /* Off-white with warm tint */
    --bg-tertiary: #faf6ed !important;       /* Light cream */
    --bg-card: #f5eed8 !important;           /* Warm cream */
    --text-primary: #2d1810 !important;      /* Rich brown */
    --text-secondary: #5d4a3a !important;    /* Medium brown */
    --text-muted: #8a7968 !important;        /* Light brown */
    --border-color: #e8dcc6 !important;      /* Cream border */
    --accent-primary: #c4965a !important;    /* Warm gold */
    --accent-secondary: #d4a574 !important;  /* Lighter gold */
}

/* Prevent black backgrounds on any element */
body, html {
    background-color: #ffffff !important;
    background-image: linear-gradient(135deg, #ffffff 0%, #fefcf7 25%, #faf6ed 50%, #f5eed8 100%) !important;
}

/* Force all sections to use cream backgrounds */
section, .section {
    background-color: #faf6ed !important;
}

/* Specific section overrides */
#hero {
    background: linear-gradient(135deg, #ffffff 0%, #fefcf7 25%, #faf6ed 50%, #f5eed8 100%) !important;
}

#products, #services, #about {
    background-color: #ffffff !important;
}

#agents, #team, .final-cta {
    background-color: #faf6ed !important;
}

.footer-section {
    background: linear-gradient(44deg, #cebb8d 0%, #fff7e4 25%, #f5eed8 50%, #ede1c7 75%, #f3ece0 100%) !important;
    background-image: radial-gradient(35% 128px at 50% 0%, rgba(196, 150, 90, 0.12), transparent) !important;
}

/* Footer-specific styling enhancements */
.footer-section .footer-section-title {
    color: #2d1810 !important;
}

.footer-section .footer-links a {
    color: #5d4a3a !important;
    white-space: nowrap !important;
}

.footer-section .footer-links a:hover {
    color: #c4965a !important;
}

.footer-section .footer-copyright {
    color: #5d4a3a !important;
}

.footer-section .footer-social-link {
    color: #5d4a3a !important;
}

.footer-section .footer-social-link:hover {
    color: #c4965a !important;
}

/* Force all cards to use cream theme */
.value-prop, .problem-card, .feature-card,
[class*="card"], [class*="prop"], [class*="problem"] {
    background-color: #f5eed8 !important;
    background: linear-gradient(358deg, #efefef, #ffe9d2) !important;
    
    color: #2d1810 !important;
}

/* Consulting cards with dramatic gradient */
.consulting-card {
    background: linear-gradient(358deg, #efefef, #ffe9d2) !important;
    border: 1px solid #e8dcc6 !important;
}

/* Team member cards with same gradient */
.glassmorphism-card {
    background: linear-gradient(358deg, #efefef, #ffe9d2) !important;
    border: 1px solid #e8dcc6 !important;
}

/* Feature cards with same gradient */
.feature-card-new {
    background: linear-gradient(358deg, #efefef, #ffe9d2) !important;
    border: 1px solid #e8dcc6 !important;
}

/* Container and layout overrides */
.container {
    background: transparent !important;
}

/* Prevent any element from being black */
/* * {
    background-color: inherit !important;
} */

*[style*="background-color: var(--bg-secondary)"] {
    background-color: #fefcf7 !important;
}

*[style*="background-color: var(--bg-tertiary)"] {
    background-color: #faf6ed !important;
}

*[style*="background: var(--bg-primary)"] {
    background-color: #ffffff !important;
}

/* ------------------------------------------------------------ */
/* Mobile fixes for hero and agents sections (scoped, safe)     */
/* ------------------------------------------------------------ */

/* Hero grids should collapse to a single column and drop fixed sizes */
@media (max-width: 1024px) {
    #hero .hero-grid,
    #hero-2 .hero-grid {
        grid-template-columns: 1fr !important;
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
        gap: 1.25rem !important;
    }

    /* Make CTAs full-width on narrow screens for easier tapping */
    #hero .hero-cta-buttons .hero-btn,
    #hero-2 .hero-cta-buttons .hero-btn {
        width: 100% !important;
    }
}

@media (max-width: 768px) {
    /* The collage can overwhelm small screens; hide it there */
    #hero .hero-gallery,
    #hero-2 .hero-gallery {
        display: none !important;
    }

    /* Agents: turn expanding grid into an accordion-like stack */
    .ai-agents-expanding .expanding-cards-grid {
        display: block !important;
        height: auto !important;
        max-width: 100% !important;
    }

    .ai-agents-expanding .expanding-card {
        min-height: 92px !important;
        margin-bottom: 0.5rem !important;
    }

    .ai-agents-expanding .expanding-card .card-content {
        display: none !important;
    }

    .ai-agents-expanding .expanding-card.active .card-content {
        display: grid !important;
    }

    /* Make vertical titles horizontal on mobile */
    .ai-agents-expanding .card-collapsed-title {
        writing-mode: horizontal-tb !important;
        transform: none !important;
        top: 0.75rem !important;
        left: 0.75rem !important;
        right: auto !important;
    }

    /* Slightly reduce collapsed icon size for better balance */
    .ai-agents-expanding .card-collapsed-bg svg {
        width: 40px !important;
        height: 40px !important;
    }
}

@media (max-width: 480px) {
    /* Extra breathing room under fixed navbar (reduced) */
    .hero-3d { padding-top: 4.5rem !important; }
    .ai-agents-expanding { padding: 2rem 0 !important; }
}

/* Tighter headline leading for Agents header on mobile */
@media (max-width: 768px) {
    .ai-agents-expanding h2 {
        line-height: 1.1 !important;
        letter-spacing: -0.015em !important;
        font-size: clamp(1.8rem, 8vw, 2.25rem) !important;
    }
}

/* Center all content in second hero on mobile */
@media (max-width: 768px) {
    #hero-2 .hero-text {
        align-items: center !important;
        text-align: center !important;
    }
}

/* Mobile hero collage: show 3 images in a compact grid on the first hero */
@media (max-width: 768px) {
    #hero .hero-gallery {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 0.75rem !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 1rem 0 0 0 !important;
    }

    #hero .hero-gallery .hero-card {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        transform: none !important;
        padding: 0 !important;
        display: none !important;
    }

    /* Show images 1, 3, and 6 only on mobile */
    #hero .hero-gallery .hero-card:nth-child(1),
    #hero .hero-gallery .hero-card:nth-child(3),
    #hero .hero-gallery .hero-card:nth-child(6) {
        display: block !important;
    }

    /* Lay out: 1 top-left, 3 spans big center, 6 bottom-left */
    #hero .hero-gallery .hero-card:nth-child(1) {
        grid-column: 1 / span 1 !important;
        grid-row: 1 / span 1 !important;
    }
    #hero .hero-gallery .hero-card:nth-child(3) {
        grid-column: 2 / span 2 !important;
        grid-row: 1 / span 2 !important;
    }
    #hero .hero-gallery .hero-card:nth-child(6) {
        grid-column: 1 / span 1 !important;
        grid-row: 2 / span 1 !important;
    }

    /* Slightly enlarge the center image for emphasis */
    #hero .hero-gallery .hero-card:nth-child(3) img {
        width: 140% !important;
        margin-left: -20% !important;
    }
}

/* Ensure calendar SVG shows inside primary CTA on mobile */
@media (max-width: 768px) {
    #hero .hero-cta-buttons .hero-btn.primary svg {
        display: inline-block !important;
        width: 18px !important;
        height: 18px !important;
        flex-shrink: 0 !important;
    }
    #hero .hero-cta-buttons .hero-btn.primary { gap: 0.5rem !important; }
}