/* Responsive Fixes and Improvements */

/* Mobile-first card improvements */
@media (max-width: 640px) {
    .card-responsive {
        padding: 1.5rem !important;
    }
    
    .card-responsive h3 {
        font-size: 1.125rem !important;
        line-height: 1.75rem !important;
    }
    
    .card-responsive p {
        font-size: 0.875rem !important;
        line-height: 1.25rem !important;
    }
    
    /* Better spacing for mobile hero icons */
    .hero-stats {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .hero-stats > div {
        text-align: center;
    }
    
    /* Improve form spacing */
    .form-responsive {
        padding: 1.5rem !important;
    }
    
    .form-responsive .space-y-6 > * + * {
        margin-top: 1rem !important;
    }
    
    /* Better navigation spacing */
    .nav-responsive {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
    
    /* Mobile header adjustments */
    .nav-mobile-text {
        font-size: 0.875rem !important;
        line-height: 1.25rem !important;
    }
    
    .nav-mobile-logo {
        width: 2rem !important;
        height: 2rem !important;
    }
    
    .nav-mobile-logo img {
        width: 2rem !important;
        height: 2rem !important;
    }
    
    .nav-mobile-btn {
        padding: 0.5rem 1rem !important;
        font-size: 0.75rem !important;
        line-height: 1rem !important;
    }
    
    /* Hide full text on mobile, show short version */
    .text-full {
        display: none !important;
    }
    
    .text-short {
        display: inline !important;
    }
}

/* Extra small devices */
@media (max-width: 375px) {
    .nav-responsive {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
    
    .nav-mobile-text {
        font-size: 0.75rem !important;
        line-height: 1rem !important;
    }
    
    .nav-mobile-btn {
        padding: 0.375rem 0.75rem !important;
        font-size: 0.625rem !important;
    }
    
    /* Improve floating elements positioning */
    .floating-shapes .shape {
        display: none;
    }
    
    /* Better mobile hero spacing */
    .hero-mobile-spacing {
        padding-top: 2rem !important;
        margin-top: 1rem !important;
    }
    
    /* Improve mobile section spacing */
    .section-mobile-padding {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }
}

/* Tablet improvements */
@media (min-width: 641px) and (max-width: 1024px) {
    .card-responsive {
        padding: 2rem !important;
    }
    
    /* Better grid layout for tablets */
    .tablet-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    /* Show full text on tablet and up */
    .text-full {
        display: inline !important;
    }
    
    .text-short {
        display: none !important;
    }
}

/* Large screen optimizations */
@media (min-width: 1025px) {
    .card-responsive {
        padding: 2rem !important;
    }
    
    /* Prevent extremely wide content */
    .content-max-width {
        max-width: 1400px;
        margin-left: auto;
        margin-right: auto;
    }
    
    /* Show full text on desktop */
    .text-full {
        display: inline !important;
    }
    
    .text-short {
        display: none !important;
    }
}

/* Improve button responsiveness */
.btn-responsive {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    line-height: 1.5rem;
}

@media (min-width: 640px) {
    .btn-responsive {
        padding: 1rem 2rem;
        font-size: 1.125rem;
        line-height: 1.75rem;
    }
}

/* Better text scaling */
.text-responsive-xl {
    font-size: 1.125rem;
    line-height: 1.75rem;
}

@media (min-width: 640px) {
    .text-responsive-xl {
        font-size: 1.25rem;
        line-height: 1.75rem;
    }
}

/* Fix potential overflow issues */
.prevent-overflow {
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
}

/* Improve spacing consistency */
.section-spacing {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

@media (min-width: 768px) {
    .section-spacing {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }
}

/* Better footer responsiveness */
.footer-responsive {
    padding: 3rem 1rem 6rem 1rem;
    margin-bottom: 0;
    min-height: auto;
}

@media (min-width: 640px) {
    .footer-responsive {
        padding: 3rem 1.5rem 3rem 1.5rem;
    }
}

/* Ensure footer is always visible */
body {
    padding-bottom: 2rem;
    margin-bottom: 0;
    min-height: 100vh;
}

html {
    overflow-x: hidden;
    min-height: 100vh;
}

/* Mobile footer extra spacing */
@media (max-width: 640px) {
    .footer-responsive {
        padding-bottom: 8rem !important;
        margin-bottom: 2rem !important;
    }
    
    body {
        padding-bottom: 3rem !important;
    }
    
    /* Safe area for devices with notch */
    .footer-safe-area {
        padding-bottom: env(safe-area-inset-bottom, 2rem) !important;
    }
    

}

/* Improve details/summary styling for mobile */
@media (max-width: 640px) {
    details {
        padding: 1rem !important;
    }
    
    summary {
        font-size: 1rem !important;
        line-height: 1.5rem !important;
    }
    
    details p {
        font-size: 0.875rem !important;
        line-height: 1.25rem !important;
        margin-top: 0.75rem !important;
    }
}

/* Fix potential z-index issues */
.nav-fixed {
    z-index: 1000;
    backdrop-filter: blur(8px);
}

.floating-elements {
    z-index: 1;
}

.content-layer {
    z-index: 10;
}

/* Improve header readability */
.nav-fixed {
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
}

/* Better section contrast */
.section-contrast {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Improve button states */
.btn-improved:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 25px rgba(249, 115, 22, 0.3);
}

/* Fix icon issues */
.icon-fix {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Improve contrast and accessibility */
.high-contrast {
    color: #111827;
}

.high-contrast-light {
    color: #f9fafb;
}

/* Better focus states for accessibility */
.focus-improved:focus {
    outline: 2px solid #f97316;
    outline-offset: 2px;
    border-radius: 0.5rem;
}

/* Loading state improvements */
.loading-state {
    opacity: 0.7;
    pointer-events: none;
    cursor: not-allowed;
}

/* Animation performance improvements */
.smooth-transform {
    transform: translateZ(0);
    will-change: transform;
}

/* Hero card animations */
@keyframes float-gentle {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-5px); }
}

.hero-card-float {
    animation: float-gentle 3s ease-in-out infinite;
}

/* Improved text contrast for orange backgrounds */
.text-contrast-orange {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Better text visibility on orange backgrounds */
.text-white-orange-bg {
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

/* Orange text with better contrast */
.text-orange-contrast {
    color: #ea580c;
    font-weight: 600;
}

/* Force refresh - Cards should have orange text */
.card-orange-text h3 {
    color: #ea580c !important;
}

.card-orange-text p {
    color: #f97316 !important;
}

/* Better card styling */
.card-premium {
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.card-premium:hover {
    backdrop-filter: blur(16px);
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

/* Print styles */
@media print {
    .no-print {
        display: none !important;
    }
    
    .print-block {
        display: block !important;
    }
    
    .floating-shapes,
    .shape {
        display: none !important;
    }
}