/* Integrated Imaging — hand-written site CSS. Edit this file, not main.css. */

/* Scroll reveal + mobile nav (replaces the removed React/Framer Motion bundles) */
/* Only hide when JS is available, so a no-JS browser still sees every section. */
.js .reveal-on-scroll {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .6s cubic-bezier(.16, 1, .3, 1), transform .6s cubic-bezier(.16, 1, .3, 1);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
}

.js .reveal-on-scroll.is-revealed {
    opacity: 1;
    transform: none;
}

html {
    scroll-behavior: smooth;
}

/* JavaScript supplies the tuned anchor motion; keep the native fallback for no-JS. */
html.js {
    scroll-behavior: auto;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .js .reveal-on-scroll {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* Mobile nav: all layout lives in CSS, JS only toggles .is-open */
#site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 1.25rem;
    padding: 1.5rem 1.25rem;
    background: rgba(250, 247, 242, .98);
    border-bottom: 1px solid var(--border);
}

#site-nav.is-open {
    display: flex;
}

@media (min-width: 768px) {
    #site-nav {
        display: flex;
        position: static;
        flex-direction: row;
        align-items: center;
        gap: 1.25rem;
        padding: 0;
        background: transparent;
        border-bottom: 0;
    }
}

@media (min-width: 1024px) {
    #site-nav {
        gap: 2rem;
    }
}

/* Navbar border hidden at top of page, fades in once scrolling starts */
#site-header {
    border-bottom-color: transparent;
    transition: border-bottom-color .3s var(--ease, ease);
}

#site-header.is-scrolled {
    border-bottom-color: var(--border);
}

/* Structured footer navigation */
.site-footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 3rem;
    padding-bottom: 4rem;
}

.site-footer__bottom {
    padding-top: 2rem;
}

.v3-footer {
    padding-bottom: 3rem;
}

@media (min-width: 768px) {
    .site-footer__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .site-footer__grid {
        grid-template-columns: 1.25fr .8fr 1fr 1.15fr;
        gap: 4rem;
    }
}

/* Let the service tabs fill the same content width as the page sections. */
@media (min-width: 1200px) {
    [data-testid="tab-nav"] > div > a {
        flex: 1 1 0;
        min-width: 0;
        padding-left: .75rem;
        padding-right: .75rem;
        text-align: center;
    }
}