@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;700&family=Inter:wght@400;500;600&display=swap');

/* Global Smooth Scrolling */
html { 
    scroll-behavior: smooth; 
}

/* Header Offset - Prevents content from being hidden under fixed nav */
body { 
    padding-top: 136px; 
}

/* Scroll margin to offset fixed header for anchor links */
section[id] {
    scroll-margin-top: 136px;
}

/* 
   Hero Gradient Overlay 
   Lighter version: 0.2 (20%) at top to 0.5 (50%) at bottom 
*/
.hero-gradient {
    background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.5) 100%);
}

/* 
   Premium Navigation Link Hover Effect 
*/
.nav-link { 
    position: relative;
    transition: color 0.3s ease; 
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -4px;
    left: 0;
    background-color: #CAA56A; /* Proscape Accent Gold */
    transition: width 0.3s ease;
}

.nav-link:hover::after {
    width: 100%;
}

.nav-link:hover {
    color: #CAA56A;
}

/* 
   Team Image Framing Utility 
   Ensures faces are prioritized in cropped containers
*/
.object-top {
    object-position: top;
}

/* Portfolio Card Zoom Effect */
.portfolio-card img { 
    transition: transform 0.4s ease; 
}

.portfolio-card:hover img { 
    transform: scale(1.05); 
}

/* Service Card Hover Interaction */
.service-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.service-card img {
    transition: transform 0.5s ease;
}

.service-card:hover img {
    transform: scale(1.05);
}

/* Form Focus Styling */
input:focus, textarea:focus, select:focus {
    outline: none;
    box-shadow: 0 0 0 2px #CAA56A;
    border-color: #CAA56A;
}

/* Button Interactions */
.btn-primary, .btn-secondary { 
    transition: all 0.3s ease; 
}

.btn-primary:hover, .btn-secondary:hover { 
    transform: translateY(-2px); 
}

/* Testimonials & Swiper Layout */
#testimonials { 
    position: relative; 
}

.swiper-button-next, .swiper-button-prev {
    color: #2d3748; 
    background-color: rgba(255, 255, 255, 0.9); 
    border-radius: 50%; 
    width: 50px; 
    height: 50px; 
    box-shadow: 0 4px 12px rgba(0,0,0,0.15); 
    transition: all 0.3s ease;
}

.swiper-button-next:hover, .swiper-button-prev:hover { 
    background-color: #CAA56A; 
    color: white; 
}

.swiper-button-next::after, .swiper-button-prev::after { 
    font-size: 18px; 
    font-weight: bold; 
}

.swiper-pagination-bullet { 
    background-color: #2d3748; 
    width: 8px; 
    height: 8px; 
    opacity: 0.3; 
}

.swiper-pagination-bullet-active { 
    background-color: #CAA56A; 
    opacity: 1; 
}

.testimonial-card {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); 
    height: 100%; 
    display: flex; 
    flex-direction: column;
}

/* Responsive Overrides */
@media (max-width: 768px) {
    body { 
        padding-top: 88px; 
    }
    section[id] {
        scroll-margin-top: 88px;
    }
    .swiper-button-next, .swiper-button-prev {
        display: none; /* Hide arrows on mobile to focus on touch swiping */
    }
}

/* 
   ==========================================================================
   HERO BACKGROUND IMAGES (Responsive)
   ==========================================================================
*/

/* --- 1. Mobile Default (Portrait 800x1200) --- */

.hero-bg {
    background-image: url('../images/composite-decking-hero-mobile.webp');
}

.hero-bg-about {
    background-image: url('../images/about-proscape-property-solutions-hero-mobile.webp');
}

.hero-bg-timber {
    background-image: url('../images/service-hero-timber-buildings-mobile.webp');
}

.hero-bg-fencing {
    background-image: url('../images/fencing-decking-hero-mobile.webp');
}

.hero-bg-landscaping {
    background-image: url('../images/composite-decking-hero-mobile.webp');
}

.hero-bg-renovations-barn {
    background-image: url('../images/work-barn-conversion-flooring-mobile.webp');
}

.hero-bg-groundwork {
    background-image: url('../images/service-hero-carpentry-mobile.webp');
}

.hero-bg-project-studio {
    background-image: url('../images/service-hero-timber-buildings-mobile.webp');
}

.hero-bg-project-decking {
    background-image: url('../images/work-timber-decking-dorchester-mobile.webp');
}

.hero-bg-project-fencing {
    background-image: url('../images/work-larch-slatted-fencing-hero-mobile.webp');
}

.hero-bg-project-composite {
    background-image: url('../images/work-composite-decking-hero-dressed-mobile.webp');
}

.hero-bg-project-garage {
    background-image: url('../images/service-hero-renovations-mobile.webp');
}

.hero-bg-project-patio {
    background-image: url('../images/work-patio-hero-mobile.webp');
}

.hero-bg-painting {
    background-image: url('../images/service-hero-decorating-mobile.webp');
}


/* --- 2. Desktop Overrides (Landscape 1920x1080) --- */
@media (min-width: 768px) {
    .hero-bg {
        background-image: url('../images/composite-decking-hero.webp');
    }

    .hero-bg-about {
        background-image: url('../images/about-proscape-property-solutions-hero.webp');
    }

    .hero-bg-timber {
        background-image: url('../images/service-hero-timber-buildings.webp');
    }

    .hero-bg-fencing {
        background-image: url('../images/fencing-decking-hero.webp');
    }

    .hero-bg-landscaping {
        background-image: url('../images/composite-decking-hero.webp');
    }

.hero-bg-renovations-barn {
        background-image: url('../images/work-barn-conversion-flooring.webp');
    }

    .hero-bg-groundwork {
        background-image: url('../images/service-hero-carpentry.webp');
    }

    .hero-bg-project-studio {
        background-image: url('../images/service-hero-timber-buildings.webp');
    }

    .hero-bg-project-decking {
        background-image: url('../images/work-timber-decking-dorchester.webp');
    }

    .hero-bg-project-fencing {
        background-image: url('../images/work-larch-slatted-fencing-hero.webp');
    }

    .hero-bg-project-composite {
        background-image: url('../images/work-composite-decking-hero-dressed.webp');
    }

    .hero-bg-project-garage {
        background-image: url('../images/service-hero-garage.webp');
    }

    .hero-bg-project-patio {
        background-image: url('../images/work-patio-hero.webp');
    }

    .hero-bg-painting {
        background-image: url('../images/service-hero-decorating.webp');
    }
}