/* Custom styles beyond Tailwind */

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 4rem;
}

/* Screenshot image blur overlay for privacy */
.screenshot-img {
    /* Placeholder styling - images will be added by user */
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
}

/* Screenshot container placeholder text */
.screenshot-img[src=""]::before,
.screenshot-img:not([src])::before {
    content: "Screenshot placeholder";
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #9ca3af;
    font-size: 0.875rem;
    font-weight: 500;
}

/* Remove default focus styles, Tailwind handles it */
*:focus {
    outline: none;
}

/* Sticky CTA safe area for mobile notch */
@supports (padding: max(0px)) {
    #sticky-cta > div {
        padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
    }
}

/* Prevent body scroll when mobile menu is open */
body.menu-open {
    overflow: hidden;
}

/* Contact form input transitions */
input:focus,
textarea:focus {
    box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.1);
}

/* Performance: reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    * {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}