/* HomecarePro - Custom Styles */

/* Smooth Scroll */
html { scroll-behavior: smooth; }

/* Animations */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes slideIn {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
}

/* Animation Classes */
.fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-up.visible {
    opacity: 1;
    transform: translateY(0);
}

.delay-100 { transition-delay: 0.1s; }
.delay-200 { transition-delay: 0.2s; }
.delay-300 { transition-delay: 0.3s; }
.delay-400 { transition-delay: 0.4s; }

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

/* Header Styles */
#header.scrolled {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* Custom Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #032B44; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #021B34; }

/* Form Focus Styles */
input:focus, select:focus, textarea:focus {
    box-shadow: 0 0 0 3px rgba(54, 95, 247, 0.15);
}

/* Card Hover Effects */
.card-hover {
    transition: all 0.3s ease;
}

.card-hover:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

/* Pricing Cards */
.pricing-card {
    transition: all 0.3s ease;
}

.pricing-card:hover {
    transform: translateY(-10px);
}

.pricing-card.featured {
    transform: scale(1.05);
    z-index: 10;
}

.pricing-card.featured:hover {
    transform: scale(1.05) translateY(-10px);
}

/* Blog Card Image Zoom */
.blog-card .blog-image {
    overflow: hidden;
}

.blog-card img {
    transition: transform 0.5s ease;
}

.blog-card:hover img {
    transform: scale(1.08);
}

/* Step Connector Line */
@media (min-width: 768px) {
    .step-card:not(:last-child)::after {
        content: '';
        position: absolute;
        top: 40px;
        right: -30px;
        width: 60px;
        height: 2px;
        background: linear-gradient(90deg, #3498db, transparent);
    }
}

/* Play Button Pulse */
.play-btn::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #3498db;
    animation: pulse 2s ease-out infinite;
    opacity: 0.4;
    z-index: -1;
}

/* Selection Color */
::selection {
    background: #3498db;
    color: white;
}

/* Focus States */
a:focus-visible, button:focus-visible {
    outline: 2px solid #3498db;
    outline-offset: 2px;
}

/* Responsive Typography */
@media (max-width: 768px) {
    .font-heading {
        font-size: 90%;
    }
}

/* Counter Animation */
.counter {
    display: inline-block;
}

/* Loading Spinner */
.loading {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Gradient Text */
.gradient-text {
    background: linear-gradient(135deg, #3498db, #2e6da4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Box Shadows */
.shadow-soft { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); }
.shadow-medium { box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); }
.shadow-strong { box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15); }

/* Backdrop Blur Fallback */
@supports not (backdrop-filter: blur(10px)) {
    .backdrop-blur-md {
        background: rgba(255, 255, 255, 0.98);
    }
}

/* ========================================
   RESPONSIVE STYLES - TABLET & MOBILE
   ======================================== */

/* Tablet Breakpoint (768px - 1024px) */
@media (max-width: 1024px) {
    /* Header adjustments */
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    /* Hero section adjustments */
    section.min-h-screen {
        min-height: auto;
        padding-top: 6rem;
        padding-bottom: 4rem;
    }
    
    /* Pricing card featured - remove scale on tablet */
    .pricing-card.featured {
        transform: scale(1);
    }
    
    .pricing-card.featured:hover {
        transform: translateY(-10px);
    }
    
    /* Process step cards - adjust connector */
    .step-card:not(:last-child)::after {
        display: none;
    }
}

/* Mobile Breakpoint (< 768px) */
@media (max-width: 767px) {
    /* Typography scaling */
    h1 {
        font-size: 2rem !important;
        line-height: 1.2 !important;
    }
    
    h2 {
        font-size: 1.75rem !important;
        line-height: 1.25 !important;
    }
    
    h3 {
        font-size: 1.25rem !important;
    }
    
    /* Hero section - reduce min-height on mobile */
    section.min-h-\[70vh\] {
        min-height: 60vh;
    }
    
    /* Form grid adjustments - make 2-col grids single column */
    .grid.grid-cols-2 {
        grid-template-columns: 1fr !important;
    }
    
    /* Contact form specific */
    #contactForm .grid-cols-2,
    #questionForm .grid-cols-2,
    #heroForm .grid-cols-2 {
        grid-template-columns: 1fr !important;
    }
    
    /* FAQ category cards - single column on mobile */
    section .grid.grid-cols-2.gap-6 {
        grid-template-columns: 1fr !important;
    }
    
    /* Specialized conditions grid - 2 cols on mobile instead of 6 */
    .grid.grid-cols-2.md\:grid-cols-3.lg\:grid-cols-6 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    /* Services grid on mobile */
    .grid.md\:grid-cols-2.lg\:grid-cols-4 {
        grid-template-columns: 1fr !important;
    }
    
    /* Process steps - single column */
    .grid.md\:grid-cols-4 {
        grid-template-columns: 1fr !important;
    }
    
    /* Blog grid - single column on mobile */
    .grid.md\:grid-cols-2.lg\:grid-cols-3 {
        grid-template-columns: 1fr !important;
    }
    
    .grid.md\:grid-cols-3 {
        grid-template-columns: 1fr !important;
    }
    
    /* Footer grid - single column on small mobile */
    .grid.md\:grid-cols-2.lg\:grid-cols-4 {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }
    
    /* Absolute positioned elements - hide on mobile */
    .absolute.-bottom-6,
    .absolute.-top-4,
    .absolute.-left-6,
    .absolute.-right-6 {
        display: none !important;
    }
    
    /* Floating elements on images - hide on mobile */
    .float-animation {
        display: none !important;
    }
    
    /* Button sizing on mobile */
    a.px-8,
    button.px-8 {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    
    /* Section padding adjustments */
    section.py-16 {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
    
    section.py-24,
    section.lg\:py-24 {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
    
    /* Image heights on mobile */
    img.h-\[400px\],
    img.h-\[450px\],
    img.h-\[480px\],
    img.h-\[500px\] {
        height: 280px !important;
    }
    
    /* Card padding adjustments */
    .p-8 {
        padding: 1.5rem;
    }
    
    .p-10,
    .lg\:p-10 {
        padding: 1.5rem;
    }
    
    /* Gap adjustments */
    .gap-12,
    .gap-16,
    .lg\:gap-16 {
        gap: 2rem;
    }
    
    /* Newsletter form in footer - stack on very small screens */
    footer form.flex {
        flex-direction: column;
    }
    
    footer form.flex input {
        width: 100%;
    }
    
    footer form.flex button {
        width: 100%;
        margin-top: 0.5rem;
    }
    
    /* Contact info card overlay adjustments */
    .absolute.bottom-6.left-6.right-6 {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        margin-top: 1rem;
        border-radius: 1rem;
    }
    
    /* Map section height */
    .h-\[400px\].lg\:h-\[500px\] {
        height: 300px !important;
    }
    
    /* Stats grid adjustments */
    .grid.grid-cols-2.gap-6 {
        gap: 1rem;
    }
    
    /* Flex wrap for button groups */
    .flex.flex-wrap.gap-4 {
        gap: 0.75rem;
    }
    
    .flex.flex-wrap.gap-4 > a,
    .flex.flex-wrap.gap-4 > button {
        width: 100%;
        justify-content: center;
    }
    
    /* Hero form card */
    .max-w-md {
        max-width: 100%;
    }
    
    /* Pagination on mobile */
    .flex.justify-center.items-center.gap-2 a {
        width: 2.25rem;
        height: 2.25rem;
        font-size: 0.875rem;
    }
}

/* Extra Small Mobile (< 480px) */
@media (max-width: 480px) {
    /* Further typography scaling */
    h1 {
        font-size: 1.75rem !important;
    }
    
    h2 {
        font-size: 1.5rem !important;
    }
    
    /* Logo text size */
    .font-heading.text-2xl {
        font-size: 1.25rem;
    }
    
    /* Specialized conditions - single column */
    .grid.grid-cols-2.md\:grid-cols-3.lg\:grid-cols-6 {
        grid-template-columns: 1fr !important;
    }
    
    /* Service cards icon size */
    .w-16.h-16 {
        width: 3rem;
        height: 3rem;
    }
    
    .w-20.h-20 {
        width: 4rem;
        height: 4rem;
    }
    
    /* Container padding */
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    /* Social icons in footer - smaller */
    footer .flex.gap-3 a {
        width: 2.25rem;
        height: 2.25rem;
    }
    
    /* Reduce image heights further */
    img.h-\[400px\],
    img.h-\[450px\],
    img.h-\[480px\],
    img.h-\[500px\] {
        height: 220px !important;
    }
    
    /* Blog card image height */
    .h-56 {
        height: 180px;
    }
    
    /* Map height */
    .h-\[400px\].lg\:h-\[500px\] {
        height: 250px !important;
    }
}

/* Landscape Mobile */
@media (max-width: 767px) and (orientation: landscape) {
    section.min-h-\[70vh\] {
        min-height: auto;
        padding-top: 5rem;
        padding-bottom: 3rem;
    }
    
    .min-h-screen {
        min-height: auto;
    }
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {
    /* Disable hover effects on touch devices */
    .card-hover:hover,
    .hover\:-translate-y-2:hover,
    .hover\:-translate-y-1:hover {
        transform: none;
    }
    
    /* Increase tap targets */
    a, button {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Remove hover-dependent dropdown on touch */
    .group:hover .group-hover\:opacity-100 {
        opacity: 0;
        visibility: hidden;
    }
}

/* Print Styles */
@media print {
    header, footer, .fade-up {
        display: none !important;
    }
    
    section {
        page-break-inside: avoid;
    }
}