/* Ramsco Concrete and Curbing — Custom Styles */

/* Smooth scroll offset for fixed navbar */
section[id] {
    scroll-margin-top: 80px;
}

/* Selection color */
::selection {
    background: rgba(61, 184, 176, 0.3);
    color: #f1f5f9;
}

/* Focus visible styles */
*:focus-visible {
    outline: 2px solid #5ecfb0;
    outline-offset: 2px;
}

/* Reduced motion — all animations disabled */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .stat-card, .service-card, .img-luxury { transition: none; }
    .stat-card:hover, .service-card:hover, .img-luxury:hover { transform: none; }
}

/* Loading state for images */
img {
    background: linear-gradient(135deg, #0d1b2a, #132740);
    min-height: 100px;
}

/* Custom select arrow for form */
select.form-input {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364748b' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
    appearance: none;
    -webkit-appearance: none;
}

/* Subtle gradient text utility */
.text-gradient-mint {
    background: linear-gradient(135deg, #5ecfb0, #3db89a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-gradient-gold {
    background: linear-gradient(135deg, #d4a853, #c9982e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Card shimmer on hover */
.service-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(105deg, transparent 40%, rgba(94, 207, 176, 0.03) 50%, transparent 60%);
    transition: background 0.5s ease;
    pointer-events: none;
}

.service-card {
    position: relative;
    overflow: hidden;
}

/* Active nav link */
.nav-link.active {
    color: #5ecfb0 !important;
}
.nav-link.active::after {
    width: 100% !important;
}
</style>
<sm-file path="script.js">
/**
 * Ramsco Concrete and Curbing — Interactive Scripts
 */

(function () {
    'use strict';

    // ========== NAVBAR SCROLL EFFECT ==========
    const navbar = document.getElementById('navbar');
    let lastScroll = 0;

    function handleNavScroll() {
        const currentScroll = window.pageYOffset;
        if (currentScroll > 60) {
            navbar.classList.add('nav-scrolled');
        } else {
            navbar.classList.remove('nav-scrolled');
        }
        lastScroll = currentScroll;
    }

    window.addEventListener('scroll', handleNavScroll, { passive: true });

    // ========== ACTIVE NAV LINK HIGHLIGHTING ==========
    const sections = document.querySelectorAll('section[id]');
    const navLinks = document.querySelectorAll('.nav-link');

    function highlightNav() {
        const scrollPos = window.pageYOffset + 120;
        sections.forEach(function (section) {
            const top = section.offsetTop;
            const height = section.offsetHeight;
            const id = section.getAttribute('id');
            if (scrollPos >= top && scrollPos < top + height) {
                navLinks.forEach(function (link) {
                    link.classList.remove('active');
                    if (link.getAttribute('href') === '#' + id) {
                        link.classList.add('active');
                    }
                });
            }
        });
    }

    window.addEventListener('scroll', highlightNav, { passive: true });

    // ========== MOBILE MENU ==========
    const menuBtn = document.getElementById('menuBtn');
    const closeMenu = document.getElementById('closeMenu');
    const mobileMenu = document.getElementById('mobileMenu');
    const mobileOverlay = document.getElementById('mobileOverlay');
    const mobileLinks = document.querySelectorAll('.mobile-link');

    function openMenu() {
        mobileMenu.classList.add('open');
        mobileOverlay.classList.add('open');
        document.body.style.overflow = 'hidden';
    }

    function closeMenuFn() {
        mobileMenu.classList.remove('open');
        mobileOverlay.classList.remove('open');
        document.body.style.overflow = '';
    }

    menuBtn.addEventListener('click', openMenu);
    closeMenu.addEventListener('click', closeMenuFn);
    mobileOverlay.addEventListener('click', closeMenuFn);
    mobileLinks.forEach(function (link) {
        link.addEventListener('click', closeMenuFn);
    });

    // Close on Escape key
    document.addEventListener('keydown', function (e) {
        if (e.key === 'Escape' && mobileMenu.classList.contains('open')) {
            closeMenuFn();
        }
    });

    // ========== CONTACT FORM ==========
    const contactForm = document.getElementById('contactForm');
    const formSuccess = document.getElementById('formSuccess');

    if (contactForm) {
        contactForm.addEventListener('submit', function (e) {
            e.preventDefault();

            // Basic validation
            const firstName = document.getElementById('firstName').value.trim();
            const lastName = document.getElementById('lastName').value.trim();
            const email = document.getElementById('email').value.trim();

            if (!firstName || !lastName || !email) {
                return;
            }

            // Email validation
            var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            if (!emailRegex.test(email)) {
                return;
            }

            // Simulate submission — show success
            contactForm.style.display = 'none';
            formSuccess.classList.remove('hidden');
            formSuccess.classList.add('form-success');
        });
    }

    // ========== SCROLL REVEAL (progressive enhancement) ==========
    if (window.matchMedia('(prefers-reduced-motion: no-preference)').matches) {
        var revealElements = document.querySelectorAll('.reveal');

        if ('IntersectionObserver' in window) {
            var revealObserver = new IntersectionObserver(function (entries) {
                entries.forEach(function (entry) {
                    if (entry.isIntersecting) {
                        entry.target.classList.add('revealed');
                        revealObserver.unobserve(entry.target);
                    }
                });
            }, {
                threshold: 0.1,
                rootMargin: '0px 0px -40px 0px'
            });

            revealElements.forEach(function (el) {
                revealObserver.observe(el);
            });
        } else {
            // Fallback: show everything
            revealElements.forEach(function (el) {
                el.classList.add('revealed');
            });
        }
    }

    // ========== SMOOTH SCROLL FOR ANCHOR LINKS ==========
    document.querySelectorAll('a[href^="#"]').forEach(function (anchor) {
        anchor.addEventListener('click', function (e) {
            var targetId = this.getAttribute('href');
            if (targetId === '#') return;

            var target = document.querySelector(targetId);
            if (target) {
                e.preventDefault();
                var offsetTop = target.offsetTop - 80;
                window.scrollTo({
                    top: offsetTop,
                    behavior: 'smooth'
                });
            }
        });
    });

})();