/*styles.css*/

body {
    font-family: 'Arial', sans-serif;
    color: #333;
    background-color: #f6faff; /* Updated to light blue-gray */
    overflow-x: hidden; /* Prevent horizontal scroll from vw issues */
}
.text-primary {
    color: #0256b9 !important;
}
.btn-primary {
    background-color: #0256b9;
    border-color: #0256b9;
}
.btn-primary:hover {
    background-color: #1a4a8f;
    border-color: #1a4a8f;
}
/* Hero image styling for high-resolution images */
.hero-bleed {
    min-height: 50vh;                       /* Taller on desktops */
    background-image: url('../images/mbr-roofing-hero.jpg');  /* Relative path for local testing */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Fix for hero images in subpages - allow full image display */
.hero-section img {
    width: 100%;
    height: auto !important; /* Let height adjust naturally - override inline styles */
    max-height: 60vh !important; /* Give it some reasonable height while keeping full image */
    object-fit: contain !important; /* Show full image instead of cropping - override inline styles */
}

/* Ensure hero section doesn't constrain the image */
.hero-section {
    margin: 0;
    padding: 0;
    overflow: visible; /* Allow image to display fully */
}

/* Override any inline max-height constraints */
#heroImage {
    max-height: 60vh !important;
    height: auto !important;
    object-fit: contain !important;
}

/* Mobile-first approach: focus on center content, eliminate borders */
@media (max-width: 767px) {
    .hero-section img {
        object-fit: cover !important; /* Crop to fill container on mobile */
        object-position: center !important; /* Focus on center/middle of image */
        max-height: 40vh !important; /* Slightly shorter on mobile */
    }
    
    #heroImage {
        object-fit: cover !important;
        object-position: center !important;
        max-height: 40vh !important;
    }
    
    /* Override ALL inline styles for mobile */
    .hero-section img[style*="max-height: 300px"] {
        max-height: 40vh !important;
        object-fit: cover !important;
        object-position: center !important;
    }
}

/* Tablet adjustments */
@media (min-width: 768px) and (max-width: 1023px) {
    .hero-section img {
        object-fit: cover !important;
        object-position: center !important;
        max-height: 50vh !important;
    }
    
    #heroImage {
        object-fit: cover !important;
        object-position: center !important;
        max-height: 50vh !important;
    }
    
    /* Override ALL inline styles for tablet */
    .hero-section img[style*="max-height: 300px"] {
        max-height: 50vh !important;
        object-fit: cover !important;
        object-position: center !important;
    }
}



/* Mobile can be shorter */
@media (max-width: 767px) {
    .hero-bleed { min-height: 28vh; }
    .navbar-nav {
        text-align: center;
    }
    .welcome {
        padding: 0.5rem 0;
        margin-top: 0;
    }
}
.welcome {
    padding: 1rem 0; /* Reduced padding to bring text closer */
    margin-top: -1rem; /* Negative margin to minimize gap with hero */
}
.welcome h1 {
    color: #0256b9;
}
.welcome .lead {
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
}
.card-img-top {
    width: 100%; /* Span full card width */
    height: auto; /* Maintain aspect ratio */
    object-fit: cover; /* Ensure the image fills the space without distortion */
}
.card {
    border: none;
    transition: transform 0.2s;
}
.card:hover {
    transform: translateY(-5px);
}

#phone-obf {
    user-select: none; /* Prevents text selection on desktop/mobile */
    -webkit-user-select: none; /* Safari/iPhone fallback */
    color: #0256b9; /* Your blue highlight */
}

/* Outline button styling to match our new color scheme */
.btn-outline-primary {
    color: #0256b9;
    border-color: #0256b9;
}

.btn-outline-primary:hover {
    color: #ffffff;
    background-color: #0256b9;
    border-color: #0256b9;
}

.btn-outline-primary:focus,
.btn-outline-primary:active {
    color: #ffffff;
    background-color: #0256b9;
    border-color: #0256b9;
    box-shadow: 0 0 0 0.2rem rgba(2, 86, 185, 0.25);
}

/* All headings now use the new blue color */
h1, h2, h3, h4, h5, h6 {
    color: #0256b9;
}

/* Card titles specifically */
.card-title {
    color: #0256b9;
}

/* Blue text class for form labels and other elements */
.blue-text {
    color: #0256b9;
}

/* Optimized Hero Image Styling for Better Image Quality */
#heroImage {
    max-height: 300px;
    width: 100%;
    object-fit: cover;
    object-position: center;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
    filter: contrast(1.05) saturate(1.1);
    transition: opacity 0.3s ease;
    /* Additional quality enhancements */
    backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Enhanced hero section styling */
.hero-section {
    margin: 0;
    padding: 0;
    position: relative;
    overflow: hidden;
}

/* Subtle shadow overlay for better text readability if needed */
.hero-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, transparent 30%, transparent 70%, rgba(0,0,0,0.1) 100%);
    pointer-events: none;
    z-index: 1;
}

/* Responsive hero heights */
@media (max-width: 767px) {
    #heroImage { 
        max-height: 200px; 
        image-rendering: auto; /* Better for mobile */
    }
}

/* Gallery thumbnail optimization */
.gallery-thumb {
    max-width: 120px;
    max-height: 80px;
    width: 100%;
    height: auto;
    object-fit: cover;
    cursor: pointer;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}