/*************************************************************************************************************/
/*   For KCI's e-houseboats.ca post 'proof of concept' website CSS                                           */
/*   New CSS file for efficiency. Removed this CSS from 4 .master files that rotate background images        */
/*   Reminder: CSS is case sensitive                                                                         */
/*   see: https://stackoverflow.com/questions/6370690/media-queries-how-to-target-desktop-tablet-and-mobile  */
/*   Original:    260119 - Created new CSS file exclusively for 4 e-houseboats.ca master pages               */
/*   Last Update: 26                                                                                         */
/*   Last Update: 26                                                                                         */
/*************************************************************************************************************/

/* Modernized fixed header gradient banner */
#bannerWrapper { background: linear-gradient(to left, /*135deg*/ #1F497D, #3379CE); padding: 5px 0;position: fixed;
                    top: 0; left: 0; right: 0; width: 100%; z-index: 1000;  }

/* Inner content body wrapper so footer never overlaps text */
#body { flex: 1; margin-top: 0; padding-bottom: 50px; /* just above sticky footer */  }

/* Main content wrapper inside the background area */
#FullScreenImageArea { color: white; overflow-y: visible; min-height: 100vh; position: relative; width: 100%; }

#ImageOverlayContent { color: white; padding: 20px; text-align: center; width: 100%;  }

/*** Sticky footer banner ***/
#StickyFooterBanner { background-image: linear-gradient(to left, #1F497D, #3379CE); bottom: 0; color: #FFFFFF; 
                        font-size: 1.1em; height: 45px; left: 0; line-height: 25px; padding: 10px 0; position: fixed; 
                        right: 0; transition: all 0.3s ease-in-out; text-align: center; width: 100%; z-index: 9999;   }


/* Right icon bar */
.header-icons  { align-items: center; display: flex; gap: 12px;          }

/* All header icons (img + ASP.NET ImageButton) */
.header-icon, .header-icons img, .header-icons input[type="image"], .header-icons .aspNetDisabled {
                    display: block;width: clamp(40px, 6vw, 70px); flex-shrink: 0;  height: clamp(40px, 6vw, 70px);
                    object-fit: contain; }

/* Logo - a floating element */
.header-logo   { position: relative;  }

.header-logo-img {  bottom: -70px; /* pushes it below the banner */ height: auto; left: 0; position: absolute; 
                    width: clamp(90px, 14vw, 160px); z-index: 10;        }

.padT10 { padding-top: 10px;          }

/* Header container */
.site-header   { align-items: center; display: flex; justify-content: space-between; margin: 0 auto;
                    max-height: 70px; max-width: 1600px; padding: 0 15px;   }

.stepBtn613 { background: #1F497d; border: 1px solid #ccc; border-radius: 5px; box-shadow: 0 2px 2px 1px #999; color: white; 
    font-weight: bold; font-size: 1.2em; margin: 0 15px; padding: 2px 20px 2px 20px;
    -webkit-box-shadow: 0 2px 1px rgba(0,0,0,.075);
    -moz-box-shadow: 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    -moz-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;               }

    .stepBtn613 a     { color: white; font-weight: bold;                                 }
    .stepBtn613:hover {  box-shadow: 0 2px 3px 1px #000; color: gold; font-weight: bold; }


/* Responsive adjustments */
@media (max-width: 767px) {
    body { padding-top: -40px; }
    .header-icons { gap: 8px; }
}

@media (max-width: 480px) {
    body { padding-top: -125px; }
}
/* Medium devices (phones/tablets, 600px and up) */
@media only screen and (max-width: 600px) {
.header-logo-img { bottom: -65px; /* pushes it below the banner */ }
}

/* Medium devices (laptops/desktops, 768px and up) */
@media only screen and (min-width: 768px) {
.header-logo-img { bottom: -90px; /* pushes it below the banner */ }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
.header-logo-img { bottom: -120px; /* pushes it below the banner */ }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
.header-logo-img { bottom: -120px; /* pushes it below the banner */ }
}