/* ============================================
   CSS Variables
   ============================================ */
:root {
    --primary: #1a3c6e;   /* Deep blue */
    --secondary: #e67e22; /* Orange accent */
    --dark: #222222;
    --light: #f8f9fa;
}

/* ============================================
   Typography
   ============================================ */
body {
    font-family: 'Open Sans', sans-serif;
    color: var(--dark);
}

h1, h2, h3, h4, h5 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
}

/* ============================================
   Buttons
   ============================================ */
.btn-primary {
    background-color: var(--secondary);
    border-color: var(--secondary);
    padding: 0.75rem 2rem;
    font-size: 1.2rem;
}

.btn-primary:hover {
    background-color: #d35400;
    border-color: #d35400;
}

/* ============================================
   Hero Section
   ============================================ */
.hero {
    background: linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)), url('../img/hardy-penntek-hero.webp') center/cover no-repeat;
    color: white;
    min-height: 50vh;
    display: flex;
    align-items: center;
}

/* ============================================
   Badges
   ============================================ */
.badge-pill {
    background: var(--secondary);
}

.warranty-badge {
    background: #27ae60;
    color: white;
}

/* ============================================
   Sections
   ============================================ */
.section-padding {
    padding: 4rem 0;
}

.cta-band {
    position: relative;
    background: linear-gradient(rgba(15, 22, 34, 0.6), rgba(15, 22, 34, 0.85)), url('/img/flake-bg.webp') center/cover no-repeat;
    color: white;
    overflow: hidden;
}

.cta-band::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
    pointer-events: none;
}

.cta-band .container {
    position: relative;
    z-index: 1;
}

/* ============================================
   Trust Badges
   ============================================ */
.trust-badge img {
    height: 80px;
    object-fit: contain;
}

/* ============================================
   Testimonial Cards
   ============================================ */
.testimonial-card {
    background: white;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    padding: 2rem;
}

/* ============================================
   Color Swatches
   ============================================ */
.color-swatch {
    width: 100%;
    height: 180px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    transition: transform .3s;
}

.color-swatch:hover {
    transform: scale(1.05);
}

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

/* ============================================
   Navbar Enhancements
   ============================================ */
.navbar {
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.navbar.scrolled {
    background-color: rgba(34, 34, 34, 0.95) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* ============================================
   Card Hover Effects
   ============================================ */
.card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important;
}

/* ============================================
   Image Hover Effects
   ============================================ */
.img-fluid.rounded {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.img-fluid.rounded:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 25px rgba(0,0,0,0.2);
}

/* ============================================
   Image Comparison Slider
   ============================================ */

   .comparison-slider img {
     display: block;
     max-width: 100%;
   }
   
   .comparison-container {
     position: relative;
     width: 100%;
     overflow: hidden;
     border-radius: 1rem;
     --position: 50%;
     /* Maintain aspect ratio - adjust based on your images */
     aspect-ratio: 1/1;
     /* max-width: 800px; */
     margin: 0 auto;
     box-shadow: 0 4px 20px rgba(0,0,0,0.2);
   }
   
   .image-container {
     position: relative;
     width: 100%;
     height: 100%;
   }
   
   .slider-image {
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: center;
     display: block;
   }

   .image-before-wrapper {
     position: absolute;
     top: 0;
     left: 0;
     width: var(--position);
     height: 100%;
     overflow: hidden;
     z-index: 2;
   }
   
   .image-before {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     object-position: left;
   }

   .image-after {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 1;
   }
   

   
   .slider {
     position: absolute;
     inset: 0;
     cursor: pointer;
     opacity: 0;
     /* for Firefox */
     width: 100%;
     height: 100%;
     z-index: 5;
   }
   
   .slider:focus-visible ~ .slider-button {
     outline: 5px solid black;
     outline-offset: 3px;   
   }
   
   .slider-line {
     position: absolute;
     inset: 0;
     width: .2rem;
     height: 100%;
     background-color: #fff;
     /* z-index: 10; */
     left: var(--position);
     transform: translateX(-50%);
     pointer-events: none;
     z-index: 3;
   }
   
   .slider-button {
     position: absolute;
     background-color: #fff;
     color: black;
     padding: .5rem;
     border-radius: 100vw;
     display: grid;
     place-items: center;
     top: 50%;
     left: var(--position);
     transform: translate(-50%, -50%);
     pointer-events: none;
     /* z-index: 100; */
     box-shadow: 1px 1px 1px hsl(0, 50%, 2%, .5);
     z-index: 4;
   }
   
   .slider-label {
     position: absolute;
     top: 12px;
     padding: 8px 16px;
     background-color: rgba(0, 0, 0, 0.55);
     color: #fff;
     font-weight: bold;
     text-transform: uppercase;
     font-size: 14px;
     z-index: 6;
     border-radius: 4px;
   }
   
   .slider-label--before {
     left: 1rem;
     z-index: 2;
   }
   
   .slider-label--after {
     right: 1rem;
     z-index: 1;
   }
   
   @media screen and (max-width: 40.063em) {
     .slider-label {
       font-size: 12px;
       padding: 6px 12px;
     }
   }

/* ============================================
   Gallery Styles
   ============================================ */
.gallery-item {
    position: relative;
    margin-bottom: 1rem;
}

.gallery-item a {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 12px;
}

.gallery-item img {
    transition: transform 0.3s ease;
    width: 100%;
    height: auto;
}

.gallery-item:hover img {
    transform: scale(1.05);
}

.gallery-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    color: white;
    padding: 1rem;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gallery-item:hover .gallery-overlay {
    opacity: 1;
}

.gallery-item.hidden {
    display: none;
}

/* Gallery filter buttons */
.btn-group .btn.active {
    background-color: var(--primary);
    border-color: var(--primary);
    color: white;
}

/* ============================================
   Star Rating
   ============================================ */
.star-rating {
    display: flex;
    gap: 0.25rem;
    justify-content: center;
    align-items: center;
}

.star-rating svg {
    width: 50px;
    height: 50px;
}
.star-rating use {
    fill: gold;
    transform-origin: 50% 50%;
}


/* ============================================
   Contact Form
   ============================================ */
.form-control:focus,
.form-select:focus {
    border-color: var(--secondary);
    box-shadow: 0 0 0 0.2rem rgba(230, 126, 34, 0.25);
}

/* ============================================
   Mobile Spacing for Commercial Section
   ============================================ */
@media screen and (max-width: 991.98px) {
    /* Add spacing under the Get Commercial Quote button on mobile */
    section.bg-dark .col-lg-6:first-child {
        margin-bottom: 2rem;
    }
    
    /* Add spacing under the commercial image on mobile */
    section.bg-dark .col-lg-6:last-child img {
        margin-bottom: 2rem;
    }
}