/* Mobile-specific overrides - Simple and clean */

/* 1. Fix Mobile Navigation Alignment */
@media (max-width: 767px) {
    /* Override the centered navigation for mobile */
    #main-nav .container .flex {
        justify-content: flex-start !important; /* Move to left instead of center */
        padding-left: 1rem; /* Add some left padding */
    }
    
    /* Ensure mobile menu button stays on the left */
    #main-nav .md\:hidden {
        margin-left: 0 !important;
    }
    
    /* Flip the navigation SVG icon horizontally */
    #mobile-menu-button svg {
        transform: scaleX(-1) !important;
    }

    /* Mobile menu positioning adjustments */
    #mobile-menu {
        margin-left: 1rem; /* Align with button */
        margin-right: 1rem;
        margin-top: 0.5rem;
    }
}

/* 2. Fix Mobile Responsiveness - Prevent Horizontal Scroll */
@media (max-width: 767px) {
    /* Ensure no horizontal overflow */
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
    
    /* Fix container overflow */
    #hero-section .container {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    
    /* Fix any potential overflow elements */
    * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* 3. CONSOLIDATED Mobile Hero Section Styles */
@media (max-width: 767px) {
    /* --- Section & Container --- */
    #hero-section {
        padding: 3rem 0 !important;
        min-height: 100vh !important;
        display: flex !important;
        align-items: center !important;
    }
    #hero-section .container {
        padding: 0 1.5rem !important; /* Increased padding for overall left margin */
        width: 100% !important;
        margin: 0 auto !important;
    }
    #hero-section .max-w-2xl {
        max-width: 100% !important;
        width: 100% !important;
    }

    /* --- Main Content Box --- */
    #hero-section .bg-gradient-to-r {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important; /* Remove padding to let content align with container */
        margin: 1rem 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
        overflow: visible !important; /* Fix for tagline clipping */
    }

    /* --- Title --- */
    .hero-title {
        font-size: 3.5rem !important;
        line-height: 0.9 !important;
        margin-bottom: 1.5rem !important;
        text-align: left !important;
        /* ADD text shadow for readability */
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
        /* ADD glowing animation */
        animation: title-glow 3s ease-in-out infinite alternate;
    }
    .hero-title span:first-child {
        display: block !important;
        font-size: 4rem !important;
        margin-bottom: 0.1rem !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        /* ADD subtle glow for "Hi," */
        text-shadow: 0 0 20px rgba(255, 255, 255, 0.3), 0 2px 10px rgba(0, 0, 0, 0.5);
    }
    .hero-title .text-gradient-display {
        font-size: 4rem !important;
        line-height: 0.9 !important;
        font-weight: 900 !important;
        display: block !important;
        word-break: break-word !important;
        margin-top: 0.5rem !important;
        /* ADD stronger glow for the name */
        text-shadow: 
            0 0 30px rgba(139, 92, 246, 0.4),
            0 0 60px rgba(91, 140, 255, 0.2),
            0 2px 10px rgba(0, 0, 0, 0.5);
        animation: name-glow 4s ease-in-out infinite alternate;
    }

    /* Glowing keyframes */
    @keyframes title-glow {
        0% {
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
        }
        100% {
            text-shadow: 
                0 0 20px rgba(255, 255, 255, 0.2),
                0 2px 10px rgba(0, 0, 0, 0.5);
        }
    }

    @keyframes name-glow {
        0% {
            text-shadow: 
                0 0 30px rgba(139, 92, 246, 0.4),
                0 0 60px rgba(91, 140, 255, 0.2),
                0 2px 10px rgba(0, 0, 0, 0.5);
        }
        100% {
            text-shadow: 
                0 0 40px rgba(139, 92, 246, 0.6),
                0 0 80px rgba(91, 140, 255, 0.3),
                0 0 20px rgba(255, 255, 255, 0.1),
                0 2px 10px rgba(0, 0, 0, 0.5);
        }
    }

    /* --- Tagline --- */
    .hero-taglines-container {
        margin: 1.5rem 0 !important;
        text-align: left !important;
        height: auto !important; /* Fix for tagline clipping */
        min-height: 0 !important;
        overflow: visible !important;
    }
    .hero-tagline {
        font-size: 1.125rem !important;
        line-height: 1.5 !important;
        padding: 0 !important;
        position: static !important;
        opacity: 1 !important;
        white-space: normal !important; /* Allow text to wrap */
        transform: none !important;
        display: block !important;
        /* ADD text shadow for readability */
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
    }
    .hero-tagline:not(:first-child) {
        display: none !important;
    }

    /* --- CTA Buttons --- */
    .hero-cta {
        width: 100% !important;
        height: 80% !important;
        margin-top: 1.5rem !important;
        justify-content: flex-start !important;
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: 1rem !important;
    }
    .hero-cta a {
        padding: 0.875rem 2rem !important;
        font-size: 1rem !important;
        font-weight: 600 !important;
        border-radius: 1.5rem !important;
        width: 100%;
        text-align: center;
    }
    .hero-cta .cta-secondary {
        width: 90%;
        margin: 0 auto !important;
        background-color: rgba(255, 255, 255, 0.1) !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        -webkit-backdrop-filter: blur(5px);
        backdrop-filter: blur(5px);
    }
}

/* 4. Extra small mobile screens - More compact */
@media (max-width: 480px) {
    .hero-title {
        font-size: 2rem !important;
    }
    
    .hero-title .text-gradient-display {
        font-size: 3.5rem !important;
    }
    
    .hero-title span:first-child {
        font-size: 4rem !important; /* Keep it largest */
        margin-bottom: 0.25rem !important; /* Even less space */
    }
    
    #hero-section .bg-gradient-to-r {
        padding: 1.5rem 1rem !important; /* Adjusted padding */
        margin: 0.5rem 0 !important;
    }
    
    .hero-cta a {
        padding: 0.75rem 1.75rem !important; /* Even smaller on small screens */
        font-size: 0.95rem !important;
    }
}

/* 5. Very small screens adjustments */
@media (max-width: 375px) {
    .hero-title {
        font-size: 1.75rem !important;
    }
    
    .hero-title .text-gradient-display {
        font-size: 3.25rem !important;
    }
    
    .hero-title span:first-child {
        font-size: 3.5rem !important; /* Keep it largest */
        margin-bottom: 0.25rem !important;
    }
    
    .hero-tagline {
        font-size: 1rem !important;
    }
    
    #hero-section .bg-gradient-to-r {
        padding: 1.25rem 1rem !important; /* Adjusted padding */
    }
}

/* Scroll Up Animation (Mobile Only) - Corrected Direction */
@media (max-width: 767px) {
    @keyframes scroll-dot {
        0% {
            opacity: 0;
            transform: translateY(12px); /* Start at the bottom, invisible */
        }
        20% {
            opacity: 1;
            transform: translateY(12px); /* Appear at the bottom */
        }
        80% {
            opacity: 1;
            transform: translateY(0px);  /* Move to the top */
        }
        100% {
            opacity: 0;
            transform: translateY(0px);  /* Fade out at the top */
        }
    }

    .animate-scroll-dot {
        animation: scroll-dot 2s ease-out infinite;
    }
}


/* 6. Mobile navigation improvements */
@media (max-width: 767px) {
    #main-nav {
        padding: 0.75rem 0 !important;
        width: 100% !important;
    }
    
    /* Mobile menu enhanced styling */
    #mobile-menu .bg-black\/30 {
        background-color: rgba(0, 0, 0, 0.4) !important;
        -webkit-backdrop-filter: blur(25px) !important;
        backdrop-filter: blur(25px) !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
    }
    
    #mobile-menu a {
        font-size: 1.1rem !important;
        font-weight: 500 !important;
        padding: 1rem 1.5rem !important;
    }
}

/* 7. Additional overflow prevention */
@media (max-width: 767px) {
    /* Ensure all elements respect mobile boundaries */
    .container,
    .max-w-2xl {
        max-width: 100% !important;
        overflow: hidden !important;
    }
    
    /* Prevent text overflow */
    h1, h2, h3, h4, h5, h6 {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
}

/* FIX: Position mobile hero image below the navbar */
@media (max-width: 767px) {
    #mobile-hero-bg {
        /* top: 5rem !important; This value matches the navbar's height (h-16) */
        height: calc(100vh) !important; /* Adjust height to prevent cutoff */
    }
}

/* DEPRECATED - ALL STYLES MOVED TO CONSOLIDATED BLOCK */
/* Tighten "Hi," and "I am" gap + fix tagline cut off (mobile only) */
/* @media (max-width: 767px) { ... } */


/* 8. Creative "About Me" Section for Mobile */
@media (max-width: 767px) {
    /* Hide the profile image container on mobile */
    #about .about-visual {
        display: none !important;
    }

    /* Center the content and give it a card-like feel */
    #about .space-y-8 {
        background-color: rgba(22, 22, 29, 0.5); /* Semi-transparent card background */
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 1.5rem;
        padding: 2rem 1.5rem;
        text-align: center; /* Center all text inside */
    }

    /* Adjust header alignment and spacing */
    #about .about-header h2 {
        margin-bottom: 1rem !important;
    }

    /* Hide the long, detailed paragraph on mobile for brevity */
    #about .about-content p:nth-of-type(2) {
        display: none !important;
    }

    /* Adjust spacing for the remaining paragraphs */
    #about .about-content {
        margin-top: 1rem !important;
    }

    #about .about-content p {
        font-size: 1rem; /* Slightly smaller for mobile card */
        line-height: 1.6;
    }

    /* Center the social links */
    #about .flex.items-center.gap-4 {
        justify-content: center;
        margin-top: 2rem;
    }
}

/* 10. Logo Marquee Mobile Adjustments */
@media (max-width: 767px) {
    /* Reduce space between logos */
    #logo-marquee .marquee-track {
        gap: 3.5rem !important; /* Increased gap to accommodate larger logos */
        padding: 0 1.5rem !important;
    }

    /* Increase logo size on mobile */
    #logo-marquee .marquee-track img {
        height: 4.5rem !important; /* Significantly increased from 3rem */
    }
}

/* 11. Mobile Footer Redesign (simple + subtle animations) */
@media (max-width: 767px) {
  /* Hide duplicate resume button only on mobile */
  #social-bar-container .glass-button { display: none !important; }

  /* Fix alignment caused by ml-20 in HTML */
  #social-bar-container .container {
    margin-left: 0 !important;
    padding-top: 1rem !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Softer background and fade-in */
  #social-bar-container {
    background: linear-gradient(to top, var(--bg-start), transparent) !important;
    animation: footer-fade-in 600ms ease-out both;
  }

  /* Keep same structure, center and tighten */
  #social-bar-container .flex.flex-col {
    gap: 1.25rem !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100%;
  }

  /* Social icons: subtle float + tap */
  #social-bar-container .flex.items-center.gap-6 a {
    transition: transform 200ms ease, color 200ms ease;
    will-change: transform;
  }
  #social-bar-container .flex.items-center.gap-6 a:active { transform: translateY(1px) scale(0.98); }
  #social-bar-container .flex.items-center.gap-6 a:nth-child(1) { animation: icon-float 5.5s ease-in-out 0s infinite; }
  #social-bar-container .flex.items-center.gap-6 a:nth-child(2) { animation: icon-float 6.2s ease-in-out .3s infinite; }
  #social-bar-container .flex.items-center.gap-6 a:nth-child(3) { animation: icon-float 5.8s ease-in-out .6s infinite; }

  /* Mobile-only extra content */
  .mobile-footer-extra {
    display: grid;
    justify-items: center;
    gap: 12px;
    text-align: center;
    width: 100%;
  }

  .availability-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 9999px;
    background: rgba(34,197,94,0.08);            /* green-500 tint */
    border: 1px solid rgba(34,197,94,0.25);
    color: rgba(255,255,255,0.85);
    font-size: 0.875rem;
  }
  .availability-pill .dot {
    width: 8px; height: 8px; border-radius: 9999px;
    background: #22c55e;
    box-shadow: 0 0 8px rgba(34,197,94,.7);
    animation: avail-pulse 1.8s ease-in-out infinite;
  }

  .mobile-footer-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1rem;
    width: 80%;
    max-width: 420px;
    border-radius: 9999px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0.06));
    border: 1px solid rgba(255,255,255,0.16);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: transform 200ms ease, box-shadow 200ms ease;
    box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  }
  .mobile-footer-cta:active { transform: translateY(1px) scale(.99); }

  .footer-links {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    opacity: .85;
    font-size: 0.9rem;
  }
  .footer-links a { color: var(--muted); transition: color 200ms ease; }
  .footer-links a:active { color: #fff; }
  .footer-links .sep { opacity: .5; }

  .copyright {
    color: var(--muted);
    opacity: .7;
    font-size: 0.75rem;
  }

  /* Animated top sheen line */
  #social-bar-container::before {
    content: "";
    position: absolute; left: 0; right: 0; top: 0; height: 2px;
    background: linear-gradient(90deg, transparent, rgba(139,92,246,.6), rgba(91,140,255,.6), transparent);
    background-size: 200% 100%;
    animation: sheen 6s linear infinite;
    opacity: .6; pointer-events: none;
  }

  /* Keyframes */
  @keyframes icon-float { 0%,100%{transform: translateY(0)} 50%{transform: translateY(-3px)} }
  @keyframes sheen { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
  @keyframes footer-fade-in { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
  @keyframes avail-pulse {
    0% { box-shadow: 0 0 0 0 rgba(34,197,94,.6); }
    70%{ box-shadow: 0 0 0 10px rgba(34,197,94,0); }
    100%{ box-shadow: 0 0 0 0 rgba(34,197,94,0); }
  }

  /* Reduced motion */
  @media (prefers-reduced-motion: reduce) {
    #social-bar-container, #social-bar-container::before,
    .availability-pill .dot,
    #social-bar-container .flex.items-center.gap-6 a {
      animation: none !important;
      transition: none !important;
    }
  }
}

/* Make entire title plain white on mobile (override gradients/strokes/animations) */
@media (max-width: 767px) {
    /* Make entire title plain white on mobile (override gradients/strokes/animations) */
    .hero-title{ margin-top: 8rem !important; }
    .hero-title,
    .hero-title span:first-child,
    .hero-title .iam-text,
    .hero-title .text-gradient-display {
        background: none !important;
        -webkit-background-clip: unset !important;
        background-clip: unset !important;
        -webkit-text-fill-color: #ffffff !important;
        color: #ffffff !important;
        -webkit-text-stroke: 0 !important;
        text-shadow: 0 2px 8px rgba(0,0,0,0.55) !important; /* keeps contrast on busy images */
        animation: none !important;
        transition: none !important;
    }

    /* Keep layout intact */
    .hero-title .text-gradient-display,
    .hero-title .iam-text {
        display: inline-block !important;
    }
}