/*************************************************************************************************************/
/*   KCI's e-houseboats.ca post 'proof of concept' website CSS                                               */
/*   Confirmed needed on e-houseboats.ca master pages  NOTE: CSS is case sensitive                           */
/*   see: https://stackoverflow.com/questions/6370690/media-queries-how-to-target-desktop-tablet-and-mobile  */
/*   where a Reset like below is suggested...                                                                */
/*   Original:    251119 - Created new css file exclusively for e-houseboats.ca master pages                 */
/*   Last Update: 260114 - Updated after e-houseboats.ca master page modernization                           */
/*   Last Update: 26                                                                                         */
/*************************************************************************************************************/

/*** Core layout and background ***/

/* Rotating background image is applied via JavaScript. These settings control how that image behaves. - Default Desktop (LG) Break point CSS*/
body { background-attachment: fixed; background-position: center center; background-repeat: no-repeat;
    background-size: cover;/* Ensures the image covers the entire screen, centered */ box-sizing: border-box; margin: 0; padding: 0;
    padding-top: 5px; /* header height + breathing room */ padding-bottom: 60px; /* slightly more than footer height */ width: 100%; }

/* Ensure the background is visible outside the content area */
html { height: 100%; }

/* Fixed gradient banner - Added 251117 for a sticky footer and backgound image in between */
#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;  }

/*** Added 251115 - Gemini CSS for sticky banner - works for Lg and Md screens */
#BannerWrapper { left: 0; position: fixed;  /* Ensure it's position is fixed */ right: 0; top: 0; width: 100%; z-index: 1000; }

/* Ensure the logo is always on top */
#BannerWrapper { z-index: 1000 !important;  /* Ensure the fixed parent is high */ }

/* Inner content body wrapper so footer never overlaps text */
#body { flex: 1; /* fills available space */ margin-top: 0; padding-bottom: 50px; /* value slightly greater than the banner height */  }

/* Main content wrapper inside the background area */
#FullScreenImageArea { color: white; min-height: 100vh;    /* Use 100vh (100% of viewport height) for full screen */
    overflow-y: visible;  /* Allows the content inside to scroll */
    position: relative;   /* Establishes a relative context for the absolute background */ width: 100%;  }

#ImageOverlayContent { color: white; /* For readability */ padding: 20px;        /* Add padding so the text doesn't touch the edges */
    text-align: center;   /* Centers inline content like text and small forms */ width: 100%;  }

/* Sticky Footer Area */
#StickyFooterBanner { background-image: linear-gradient(to left, #1F497D, #3379CE); /* Visual Styling */ bottom: 0; /* Positions at bottom */
    color: #FFFFFF;  /* White text */ font-size: 1.1em; height: 45px; left: 0; line-height: 25px; text-align: center; right: 0; width: 100%;
    position: fixed; /* Fixes the banner in the viewport */ padding: 10px 0; /* Vertical padding */
    transition: all 0.3s ease-in-out; /* Optional: Transition for a smooth appearance/disappearance if you add JavaScript later */
    z-index: 9999;   /* Ensure it is on top of all other content */  }

/*   1. Ensure the container is positioned correctly and can host the pseudo-element #HeaderContainer {    */
#UpdatePanel1 { background-image: linear-gradient(to left, #1F497D, #3379CE); flex-shrink: 0;  
    height: 60px; /* Example: If logo is 80px, banner is 40px tall  - started at 40px */left: 0;
    position: fixed; right: 0; top: 0; width: 100%; z-index: 1000; }

/*** ***/

.centerLR { margin: 0 auto; }

/* If the logo itself is absolute/relative and needs to be on top of the banner you may need to target the logo specifically: */
.col-sm-11 img, .col-xs-11 img { position: relative; /* Needs position to take z-index */ z-index: 1001 !important; }

/* The container-fluid is your primary layout container - normal padding 15 pixels - remove to get to screen edge */
.container-fluid { margin-left: auto; margin-right: auto; padding-left: 0; padding-right: 0; width: 100%; }

    /* Make direct children of .container-fluid fill its width */
    .container-fluid > * { /* This selector targets ALL direct children of .container-fluid */
        width: 100%; /* Force them to take the full horizontal width */
        box-sizing: border-box; /* Crucial for Bootstrap elements with padding */
    }

.dispInBC { display: inline-block; margin: 10px auto 0 auto; }
.dispInBR { display: inline-block; float: right; margin-top: 10px; }

.footer, .hdrColor { background-image: linear-gradient(to left, #1F497D, #3379CE); flex-shrink: 0; }

/* 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; }

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

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

.margTBL { color: #1F497D; margin: -60px auto 30px auto; }
.margTBM { color: #1F497D; margin: -30px auto 30px auto; }
.margTBS { color: #1F497D; margin: 20px auto 30px auto;  }
.margT-8 { margin-top: -8px; }
.margT10 { margin-top: 10px; }
.margT5  { margin-top: 5px; }

.padT10  { padding-top: 10px; }

/* Ensure Bootstrap .row also gets 100% width if used inside flex columns */
.row { box-sizing: border-box; /* Ensure padding is handled correctly */ width: 100%; }

/* 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; }

.txtC { text-align: center }

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

@media (max-width: 480px) {
    body { padding-top: -125px;  }
}
/* Phones: usually a bit less overlap looks nicer */
@media (max-width: 600px) {
    .header-logo-img { bottom: -70px; /* small change from base */   }
}

/* Medium screens (tablets / many laptops) */
@media (min-width: 601px) and (max-width: 900px) {
    .header-logo-img { bottom: -85px; /* slightly more overlap */    }
}

/* Large screens (tablets / many laptops) */
@media (min-width: 901px) and (max-width: 1199px) {
    .header-logo-img { bottom: -100px; /* slightly more overlap */   }
}

/* Extra Large desktops: if needed */
@media (min-width: 1200px) {
    .header-logo-img { bottom: -120px;    }
}