/**
 * Red Barn Media Group - Custom Styles
 *Kentucky Climate control
 * 
 * Custom component styles for KCC dealer site
 * Contains hero sections, banners, and responsive adjustments
 */

/* ========================================
   1. HERO SECTIONS
   ======================================== */

/* Home Hero with Background Image */
.kcc-hero-intro {
    width: 100%;
    height: 850px;
    background: url(../img/kcc-intro-hero-2000.webp) center center;
    background-size: cover;
    border-bottom: 1px solid #000;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}


.kcc-hero-intro.sub {
    width: 100%;
    min-height: fit-content;
    height: 760px;
    background: url(../img/kcc-intro-hero-2000.webp) center center;
    background-size: cover;
    border-bottom: 1px solid #000;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}


/* Hero Container Spacing */
.kcc-hero-intro .container-fluid {
    padding-top: 15rem ;
    padding-bottom: 2rem;
}

/* Hero Contact Form - Default (for regular hero) */
#hero-contact-form {
    width: 440px; 
    z-index: 10;
    margin-top: -28rem !important;
}



/* Hero Typography with Text Shadow Effects */
.hero-h1 {
    font-size: 4rem;
    font-weight: 700;
    color: white;
    text-shadow: 
        /* Basic outline */
        -2px -2px 0 #000,
        2px -2px 0 #000,
        -2px 2px 0 #000,
        2px 2px 0 #000,
        -3px 0 0 #000,
        3px 0 0 #000,
        0 -3px 0 #000,
        0 3px 0 #000,
        /* Bottom-right depth */
        4px 4px 0 #000,
        5px 5px 0 #000,
        6px 6px 0 #000,
        7px 7px 0 #000;
}

.hero-h2 {
    color: white;
    text-shadow: 
        /* Basic outline */
        -2px -2px 0 #000,
        2px -2px 0 #000,
        -2px 2px 0 #000,
        2px 2px 0 #000,
        -2px 0 0 #000,
        2px 0 0 #000,
        0 -2px 0 #000,
        0 2px 0 #000,
        /* Bottom-right depth */
        3px 3px 0 #000,
        4px 4px 0 #000,
        5px 5px 0 #000;
}

/* Maintenance Hero Positioning */
.maintenance-hero {
    position: absolute;
    top: -24rem;
    left: -3rem;
}

/* ========================================
   2. BANNER SECTIONS
   ======================================== */

/* Financing Banner */


/* Service Area Banner */


/* ========================================
   3. COUPON STYLES
   ======================================== */

/* Coupon Background */


/* Red Gradient Background */
.bg-red-gradient {
    background: #c42727;
    background: linear-gradient(135deg, #c42727 0%, #c92727 27%, #d92727 61%, #f32727 100%, #f42727 100%);
    border-radius: 15px;
}

/* FAQ-specific Gradient */
.bg-red-gradient-faq {
    background: linear-gradient(to bottom, #FF000A 80%, #D60019 100%);
}

/* Coupon Border */
.border-dashed {
    border-style: dashed;
}

/* Coupon Small Print */


/* ========================================
   4. UTILITY STYLES
   ======================================== */

.bordered {
    border: #000 solid 2px;
}
        .service-area-card {
            transition: all 0.3s ease;
        }
        .service-area-card:hover {
            background-color: var(--bs-warning, #ffc107) !important;
            transform: translateY(10px);
            cursor: pointer;
        }
    /* ========================================
   5. RESPONSIVE STYLES
   ======================================== */

/* Ultra Wide Screens (2200px and above) */
@media (min-width: 1900px) {
    .kcc-hero-intro.sub .col-xl-6:first-child {
        flex: 0 0 auto;
        width: 44.66666667%!important; /* col-xl-5 equivalent */
        margin-left: 8rem!important;
        text-align: center!important;
    }
    
    .kcc-hero-intro.sub .col-xl-6:first-child .d-flex {
        justify-content: center !important;
    }
}

/* Extra Large Screens (1600px and below) */
@media (max-width: 1600px) {
    /* Hero Background Image - Large */
    .kcc-hero-intro {
        background: url(../img/kcc-intro-hero-1600.webp);
        background-size: cover;
        height: 850px;;
        width: 100vw; /* Ensure full viewport width */
        max-width: 100%; /* Prevent horizontal scroll */
    }
    
    .kcc-hero-intro.sub {
        width: 100vw; /* Ensure full viewport width */
        max-width: 100%; /* Prevent horizontal scroll */
        background: url(../img/kcc-intro-hero-1600.webp) center center;
        background-size: cover;
        border-bottom: 1px solid #000;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    }

    /* Hero Contact Form Positioning */
    #hero-contact-form {
        width: 370px; 
        z-index: 10;
        margin-top: -32rem !important;
    }
}
 @media (min-width: 1461px) {
        .service-areas-standalone {
            display: block !important;
        }
        .service-areas-dropdown {
            display: none !important;
        }
    }
    
    @media (max-width: 1460px) {
        .service-areas-standalone {
            display: none !important;
        }
        .service-areas-dropdown {
            display: list-item !important;
        }
    }
@media (max-width:1450px){
    .kcc-hero-intro .container-fluid {
        padding-top: 16rem;
        padding-bottom: 0rem;
        width: 100%; /* Ensure container takes full width */
        max-width: 100%;
    }
    .hero-h1 {
    font-size: 3.55rem;
    font-weight: 700;
    }
}

/* Large Screens (1400px and below) */
@media (max-width: 1400px) {
    /* Adjusted Hero Size */
    .kcc-hero-intro {
        width: 100vw;
        max-width: 100%;
                padding-bottom: 5rem;
        height: fit-content;
        background: url(../img/kcc-intro-hero-1600.webp) center center;
        background-size: cover;
        border-bottom: 1px solid #000;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    }
    
    .kcc-hero-intro.sub {
        width: 100vw;
        max-width: 100%;
        height: fit-content;
                padding-bottom: 5rem;
        background: url(../img/kcc-intro-hero-1600.webp) center center;
        background-size: cover;
        border-bottom: 1px solid #000;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    }
    
    /* Service Area Banner Adjustments */
    .gg-banner-service-area {
        background: url(../img/gg-body-service-area-square.webp) center left;
        background-size: cover;
        height: fit-content;
        min-height: 650px;
    }
}

/* Medium Screens (1200px and below) */
@media (max-width: 1200px) {
    /* Hero Background Size and Position */
    .kcc-hero-intro {
        width: 100%;
        height: fit-content;
        background: url(../img/kcc-intro-hero-1200.webp) center center;
        background-size: cover;
                padding-bottom: 5rem;
        border-bottom: 1px solid #000;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    }
       .kcc-hero-intro.sub {
    width: 100%;
    height: fit-content;
            padding-bottom: 5rem;
    background: url(../img/kcc-intro-hero-1200.webp) center center;
    background-size: cover;
    border-bottom: 1px solid #000;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

    /* Hero Container Spacing */
    .kcc-hero-intro .container {
        padding-top: 4rem;
        padding-bottom: 2rem;
    }

    /* Hero Typography Adjustments */
    .kcc-hero-intro h1 {
        font-size: 2.75rem;
        font-weight: 700;
    }
}

/* Tablet and Desktop (992px and above) */
@media (min-width: 992px) {
    /* Ensure container overflow visible for positioning elements
    .kcc-hero-intro .container-fluid {
        overflow: visible !important;
    } */
}

/* Tablet (991px and below) */
@media (max-width: 991px) {
    /* Hero Background for Tablet */
    .kcc-hero-intro {
        width: 100vw;
        max-width: 100%;
        height: fit-content;
        background: url(../img/kcc-intro-hero-991.webp) center center;
        background-size: cover;
        border-bottom: 1px solid #000;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        margin: 0; /* Remove any margins */
    }
    
    .kcc-hero-intro.sub {
        width: 100vw;
        max-width: 100%;
        height: fit-content;
        background: url(../img/kcc-intro-hero-991.webp) center center;
        background-size: cover;
        border-bottom: 1px solid #000;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        margin: 0; /* Remove any margins */
    }
    
    /* Ensure container takes full width */
    .kcc-hero-intro .container-fluid {
        width: 100%;
        max-width: 100%;
        padding-left: 15px;
        padding-right: 15px;
    }
}

/* Add specific iPad media queries */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    .kcc-hero-intro,
    .kcc-hero-intro.sub {
        width: 100vw;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
    
    .container-fluid,
    .container {
        width: 100%;
        max-width: 100%;
        padding-left: 15px;
        padding-right: 15px;
    }
    
    /* Fix menu width for iPad */
    nav.navbar {
        width: 100vw;
        max-width: 100%;
    }
}

/* Small Tablet/Mobile (767px and below) */
@media (max-width: 767px) {
    /* Hero Background for Small Tablet */
    .kcc-hero-intro {
        width: 100%;
        height: fit-content;
        background: url(../img/kcc-intro-hero-767.webp) center center;
        background-size: cover;
        border-bottom: 1px solid #000;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    }

    /* Hero Typography Adjustments */
    .kcc-hero-intro h1 {
        font-size: 3rem;
        font-weight: 700;
    }
    
}

/* Mobile (576px and below) */
@media (max-width: 576px) {
    /* Hero Margin Adjustment */
    .kcc-hero-intro {
        margin-top: 0px;
    }

    /* Hero Typography Adjustments */
    .kcc-hero-intro h1 {
        font-size: 2.5rem;
        font-weight: 700;
    }
}

/* Small Mobile (375px and below) */
@media (max-width: 375px) {
    /* Hero Margin and Spacing */
    .kcc-hero-intro {
        margin-top: 0px;
    }

    .kcc-hero-intro .container {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
}

/* Site-wide override for .text-decoration-none.btn-link.fw-bold.text-dark */
.text-decoration-none.btn-link.fw-bold.text-dark {
    /* Apply btn and btn-outline-primary styles */
    color: #25327c !important;
    background: transparent !important;
    border: 1px solid #25327c !important;
    border-radius: 50rem !important;
    padding: 0.75rem 1.25rem !important;
    font-size: .95rem !important;
    font-family: "Barlow Semi Condensed", serif !important;
    font-weight: 500 !important;
    font-style: normal !important;
    text-transform: uppercase !important;
    transition-duration: 0.25s !important;
    display: inline-block !important;
    line-height: 1.5 !important;
    text-decoration: none !important;
}

.text-decoration-none.btn-link.fw-bold.text-dark:hover,
.text-decoration-none.btn-link.fw-bold.text-dark:focus {
    background-color: #25327c !important;
    color: #fff !important;
    border-color: #25327c !important;
    text-decoration: none !important;
}

/* Ensure .btn-outline-primary and .btn use correct styles site-wide */
.btn-outline-primary {
    color: #25327c !important;
    background: transparent !important;
    border-color: #25327c !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active {
    color: #fff !important;
    background-color: #25327c !important;
    border-color: #25327c !important;
    text-decoration: none !important;
}

.btn {
    padding: 0.75rem 1.25rem !important;
    font-size: .95rem !important;
    font-family: "Barlow Semi Condensed", serif !important;
    font-weight: 500 !important;
    font-style: normal !important;
    text-transform: uppercase !important;
    transition-duration: 0.25s !important;
    border-radius: 50rem !important;
}