/* ============================================
   Varsha Ramani Team — Custom Styles
   Mobile-First Responsive Design
   ============================================ */

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

/* Hide Alpine.js x-cloak elements until ready */
[x-cloak] {
    display: none !important;
}

/* Prevent horizontal scroll on mobile */
body {
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* Custom scrollbar (desktop only) */
@media (min-width: 768px) {
    ::-webkit-scrollbar {
        width: 8px;
    }
    ::-webkit-scrollbar-track {
        background: #f0f4f8;
    }
    ::-webkit-scrollbar-thumb {
        background: #bcccdc;
        border-radius: 4px;
    }
    ::-webkit-scrollbar-thumb:hover {
        background: #829ab1;
    }
}

/* ===== MOBILE RESPONSIVE FIXES ===== */

/* Ensure touch targets are at least 44px (Apple HIG) */
@media (max-width: 767px) {
    a, button {
        min-height: 44px;
    }

    /* Better mobile nav spacing */
    nav .nav-link {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    /* Full-width buttons on mobile */
    .mobile-full-width {
        width: 100%;
    }

    /* Tighter padding on mobile */
    .section-padding {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    /* Mobile-friendly card grid */
    .grid {
        gap: 1rem;
    }

    /* Prevent text overflow */
    h1, h2, h3 {
        word-break: break-word;
        overflow-wrap: break-word;
    }

    /* Mobile hero text sizing */
    .hero-title {
        font-size: 2rem;
        line-height: 1.15;
    }
}

/* Tablet-specific */
@media (min-width: 640px) and (max-width: 1023px) {
    .section-padding {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
}

/* Safe area padding for iPhones with notch */
@supports (padding: max(0px)) {
    body {
        padding-left: max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
    }
    nav {
        padding-left: max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
    }
}

/* Sticky mobile CTA bar */
.mobile-cta-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 40;
    padding: 0.75rem 1rem;
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
    background: white;
    border-top: 1px solid #d9e2ec;
    box-shadow: 0 -4px 20px rgba(16, 42, 67, 0.08);
}

@media (min-width: 768px) {
    .mobile-cta-bar {
        display: none;
    }
}

/* Animate on scroll — fade in */
.fade-in-up {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Gradient text helper */
.text-gradient {
    background: linear-gradient(135deg, #d4a853 0%, #b8862d 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Navbar shrink on scroll */
#main-nav.scrolled {
    box-shadow: 0 4px 30px rgba(16, 42, 67, 0.08);
}

/* Card hover lift */
.card-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(16, 42, 67, 0.08);
}

/* Pulse animation for badges */
@keyframes pulse-gold {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
.animate-pulse-gold {
    animation: pulse-gold 2s ease-in-out infinite;
}

/* Form focus styles */
input:focus, select:focus, textarea:focus {
    border-color: #d4a853 !important;
    box-shadow: 0 0 0 3px rgba(212, 168, 83, 0.15) !important;
}

/* Dashboard styles */
.dash-card {
    background: white;
    border: 1px solid #d9e2ec;
    border-radius: 1rem;
    padding: 1.5rem;
    transition: all 0.3s ease;
}
.dash-card:hover {
    border-color: #d4a853;
    box-shadow: 0 8px 24px rgba(212, 168, 83, 0.08);
}

/* Status badges */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
}
.badge-new { background: #dbeafe; color: #1e40af; }
.badge-contacted { background: #fef3c7; color: #92400e; }
.badge-qualified { background: #d1fae5; color: #065f46; }
.badge-nurturing { background: #ede9fe; color: #5b21b6; }
.badge-showing { background: #ffedd5; color: #9a3412; }
.badge-offer { background: #fce7f3; color: #9d174d; }
.badge-closed { background: #d1fae5; color: #065f46; }
.badge-lost { background: #fee2e2; color: #991b1b; }

/* Table styles */
.data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}
.data-table th {
    text-align: left;
    padding: 0.75rem 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #627d98;
    border-bottom: 2px solid #d9e2ec;
}
.data-table td {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    border-bottom: 1px solid #f0f4f8;
    color: #334e68;
}
.data-table tbody tr:hover {
    background: #f8fafc;
}