/**
 * FINAL ADJUSTMENTS - Version 4.1
 * Desktop/Tab alignment, text sizing, single row stats, remove scrollers
 */

/* ========================================
   FIX 1: Desktop/Tablet Alignment with Logo
======================================== */

@media (min-width: 769px) {
    /* Calculate logo position and align all content */
    .container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 1.5rem;
    }
    
    /* Get the exact left position from nav-brand */
    .hero-content,
    .section-header,
    .trust-badges,
    .problems-grid,
    .solutions-grid,
    .videos-grid,
    .pricing-grid,
    .comparison-grid,
    .calculator-container,
    .audience-grid,
    .process-timeline,
    .faq-container,
    .cta-content {
        padding-left: 0 !important;
        margin-left: 0 !important;
    }
    
    /* Align hero text with logo */
    .hero-text {
        padding-left: 0 !important;
        text-align: left !important;
    }
    
    .hero-title,
    .hero-description,
    .hero-badge {
        text-align: left !important;
        margin-left: 0 !important;
    }
    
    /* Align section titles with logo */
    .section-header {
        text-align: left !important;
        margin-left: 0 !important;
        padding-left: 0 !important;
    }
    
    .section-title,
    .section-subtitle {
        text-align: left !important;
        margin-left: 0 !important;
    }
    
    /* Align all grid containers */
    .problems-grid,
    .solutions-grid,
    .videos-grid,
    .pricing-grid,
    .comparison-grid,
    .audience-grid,
    .process-timeline,
    .faq-container {
        margin-left: 0 !important;
        padding-left: 0 !important;
    }
    
    /* Align trust badges */
    .trust-badges {
        justify-content: flex-start !important;
    }
    
    /* Align CTA section */
    .cta-content {
        text-align: left !important;
        margin-left: 0 !important;
        padding-left: 0 !important;
    }
    
    .cta-title,
    .cta-description {
        text-align: left !important;
    }
    
    .cta-buttons {
        justify-content: flex-start !important;
    }
}

/* ========================================
   FIX 2: Header CTA Text - "Get AI Agent"
======================================== */

/* Restore full text on all screen sizes */
@media (max-width: 768px) {
    .nav-cta-btn {
        padding: 0.4rem 0.75rem !important;
        font-size: 0.7rem !important;
        min-height: 38px !important;
        white-space: nowrap !important;
    }
}

@media (max-width: 480px) {
    .nav-cta-btn {
        padding: 0.35rem 0.65rem !important;
        font-size: 0.65rem !important;
        min-height: 36px !important;
    }
}

/* ========================================
   FIX 3: Increase Headline Size on Mobile
======================================== */

@media (max-width: 768px) {
    .hero-title {
        font-size: clamp(1.6rem, 7vw, 2.2rem) !important; /* Increased from 1.4-2rem */
        line-height: 1.3 !important;
        font-weight: 800 !important;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: clamp(1.5rem, 8vw, 2rem) !important;
    }
}

@media (max-width: 375px) {
    .hero-title {
        font-size: 1.5rem !important; /* Increased from 1.4rem */
    }
}

/* ========================================
   FIX 4: Stats in Single Row - Smaller Size
======================================== */

@media (max-width: 768px) {
    .hero-stats {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        gap: 0.5rem !important;
        margin-bottom: 1.5rem !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
    }
    
    .stat-item {
        flex: 1 1 30% !important;
        min-width: 0 !important;
        text-align: center !important;
        padding: 0 0.25rem !important;
    }
    
    .stat-number {
        font-size: 1.1rem !important; /* Decreased from 1.5rem */
        font-weight: 800 !important;
        color: #22c55e !important;
        display: block !important;
        line-height: 1 !important;
        margin-bottom: 0.25rem !important;
    }
    
    .stat-label {
        font-size: 0.65rem !important; /* Decreased from 0.75rem */
        color: #6b7280 !important;
        font-weight: 500 !important;
        line-height: 1.2 !important;
        display: block !important;
    }
}

@media (max-width: 480px) {
    .stat-number {
        font-size: 1rem !important;
    }
    
    .stat-label {
        font-size: 0.6rem !important;
    }
}

@media (max-width: 375px) {
    .hero-stats {
        gap: 0.25rem !important;
    }
    
    .stat-number {
        font-size: 0.95rem !important;
    }
    
    .stat-label {
        font-size: 0.55rem !important;
    }
}

/* ========================================
   FIX 5: Remove ALL Side Scrollers
======================================== */

/* Global overflow prevention */
html, body {
    overflow-x: hidden !important;
    max-width: 100% !important;
}

* {
    max-width: 100% !important;
}

/* Ensure all sections have no horizontal scroll */
section {
    overflow-x: hidden !important;
    max-width: 100% !important;
}

.container {
    overflow-x: hidden !important;
    max-width: 100% !important;
}

/* Specific section fixes */
.trust-section,
.problem-section,
.solution-section,
.video-demos-section,
.pricing-section,
.comparison-section,
.roi-calculator-section,
.audience-section,
.process-section,
.faq-section,
.cta-section {
    overflow-x: hidden !important;
    max-width: 100% !important;
}

/* All grid containers */
.trust-badges,
.problems-grid,
.solutions-grid,
.videos-grid,
.pricing-grid,
.comparison-grid,
.calculator-container,
.audience-grid,
.process-timeline,
.faq-container {
    overflow-x: hidden !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* Individual cards */
.trust-badge,
.problem-card,
.solution-card,
.video-card,
.pricing-card,
.comparison-card,
.result-card,
.audience-badge,
.process-step,
.faq-item {
    overflow-x: hidden !important;
    max-width: 100% !important;
}

/* Tables and other potentially wide elements */
table, pre, code, img, video, iframe {
    max-width: 100% !important;
    overflow-x: auto !important;
}

/* ========================================
   FIX 6: Video CTA Button - Single Row
======================================== */

@media (max-width: 768px) {
    .video-cta .btn-large {
        padding: 0.75rem 1rem !important;
        font-size: 0.85rem !important;
        min-height: 48px !important;
        white-space: nowrap !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
        max-width: 100% !important;
    }
    
    .video-cta .btn-large i {
        font-size: 0.9rem !important;
    }
}

@media (max-width: 480px) {
    .video-cta .btn-large {
        font-size: 0.8rem !important;
        padding: 0.65rem 0.85rem !important;
    }
}

@media (max-width: 375px) {
    .video-cta .btn-large {
        font-size: 0.75rem !important;
        padding: 0.6rem 0.75rem !important;
    }
}

/* ========================================
   FIX 7: Pricing Section - Smaller Text
======================================== */

@media (max-width: 768px) {
    .pricing-title {
        font-size: 1.1rem !important; /* Decreased from default */
        margin-bottom: 0.75rem !important;
    }
    
    .pricing-price {
        font-size: 1.8rem !important; /* Decreased from 2.5rem */
        line-height: 1 !important;
        margin-bottom: 0.5rem !important;
    }
    
    .pricing-period {
        font-size: 0.8rem !important;
        margin-bottom: 1rem !important;
    }
    
    .feature {
        font-size: 0.85rem !important; /* Decreased */
        padding: 0.5rem 0 !important;
        line-height: 1.4 !important;
    }
    
    .pricing-header {
        padding: 1.5rem !important;
    }
    
    .pricing-features {
        padding: 1rem !important;
    }
    
    .pricing-icon {
        width: 60px !important;
        height: 60px !important;
        margin-bottom: 0.75rem !important;
    }
    
    .pricing-icon i {
        font-size: 1.5rem !important;
    }
    
    .popular-badge {
        font-size: 0.7rem !important;
        padding: 0.35rem 0.65rem !important;
    }
}

@media (max-width: 480px) {
    .pricing-title {
        font-size: 1rem !important;
    }
    
    .pricing-price {
        font-size: 1.6rem !important;
    }
    
    .feature {
        font-size: 0.8rem !important;
    }
}

/* ========================================
   FIX 8: Cost Comparison - Smaller Text
======================================== */

@media (max-width: 768px) {
    .comparison-title {
        font-size: 1.1rem !important; /* Decreased */
        margin-bottom: 0.5rem !important;
    }
    
    .comparison-subtitle {
        font-size: 0.8rem !important; /* Decreased */
    }
    
    .cost-label {
        font-size: 0.8rem !important; /* Decreased */
        line-height: 1.3 !important;
    }
    
    .cost-amount {
        font-size: 0.85rem !important; /* Decreased */
        font-weight: 600 !important;
    }
    
    .cost-item {
        padding: 0.65rem 0 !important;
    }
    
    .cost-total .cost-label,
    .cost-total .cost-amount {
        font-size: 0.95rem !important; /* Decreased */
    }
    
    .problem-item,
    .benefit-item {
        font-size: 0.8rem !important; /* Decreased */
        line-height: 1.4 !important;
    }
    
    .comparison-card {
        padding: 1.25rem !important;
    }
    
    .comparison-header {
        margin-bottom: 1rem !important;
    }
}

@media (max-width: 480px) {
    .comparison-title {
        font-size: 1rem !important;
    }
    
    .cost-label,
    .cost-amount {
        font-size: 0.75rem !important;
    }
    
    .problem-item,
    .benefit-item {
        font-size: 0.75rem !important;
    }
}

/* ========================================
   ADDITIONAL REFINEMENTS
======================================== */

/* Ensure proper spacing in comparison grid mobile */
@media (max-width: 768px) {
    .comparison-grid {
        gap: 1.25rem !important;
    }
}

/* Fix calculator on mobile */
@media (max-width: 768px) {
    .calculator-container {
        overflow-x: hidden !important;
    }
    
    .calculator-inputs,
    .calculator-results {
        overflow-x: hidden !important;
        max-width: 100% !important;
    }
}

/* Ensure all buttons are properly sized */
@media (max-width: 768px) {
    .btn {
        max-width: 100% !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
}

/* Fix any remaining overflow sources */
@media (max-width: 768px) {
    .hero-visual,
    .video-container,
    .demo-chat,
    .chat-messages {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
}

/* Desktop alignment - ensure everything lines up with nav-brand */
@media (min-width: 769px) {
    /* All major containers align left */
    .hero .container,
    .trust-section .container,
    .problem-section .container,
    .solution-section .container,
    .video-demos-section .container,
    .pricing-section .container,
    .comparison-section .container,
    .roi-calculator-section .container,
    .audience-section .container,
    .process-section .container,
    .faq-section .container,
    .cta-section .container {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
    
    /* Section content aligns with logo */
    .section-header,
    .hero-text,
    .trust-badges,
    .cta-content {
        padding-left: 0 !important;
        margin-left: 0 !important;
    }
}

/* Mobile - keep centered */
@media (max-width: 768px) {
    .section-header,
    .section-title,
    .section-subtitle {
        text-align: center !important;
    }
}

/* Prevent line breaks in important text */
@media (max-width: 768px) {
    .nav-cta-btn,
    .video-cta .btn-large {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}

/* Stats should never wrap */
.stat-label {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Fix mobile menu to not cause overflow */
@media (max-width: 768px) {
    .nav-menu {
        max-width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        overflow-x: hidden !important;
    }
    
    .nav-menu.active {
        display: flex !important; /* Ensure menu shows when active */
        overflow-y: auto !important;
        overflow-x: hidden !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Ensure menu toggle is visible */
    .mobile-menu-toggle {
        display: flex !important;
        visibility: visible !important;
    }
}

/* Ensure pricing cards stack properly */
@media (max-width: 768px) {
    .pricing-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
    
    .pricing-card {
        width: 100% !important;
        margin: 0 !important;
    }
}

/* Ensure comparison cards stack properly */
@media (max-width: 768px) {
    .comparison-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
    }
    
    .comparison-card {
        width: 100% !important;
        margin: 0 !important;
    }
}