/****************************************************************************************************/
/*   e-houseboats.ca — Final Consolidated CSS for 1-Scrolling.master                                */
/*   Smooth scaling logo + icons, unified header logic, stable scrolling                            */
/****************************************************************************************************/

/* Root variables */
:root {
    --header-height-desktop: 90px;
    --header-height-tablet: 73px;
    --header-height-phone: 60px;
    --footer-height: 45px;
    --header-gradient: linear-gradient(to left, #1F497D, #3379CE);
    --canvas-bg: #EFEEEF;
}

/* Base layout */
html, body {
    background-color: var(--canvas-bg);
    margin: 0;
    min-height: 100%;
    height: auto;
}

/* ASP.NET form must NOT block scrolling */
form, #form1 {
    height: auto !important;
    overflow: visible !important;
}

/* Sticky header wrapper */
#bannerWrapper {
    background-image: var(--header-gradient);
    position: fixed;
    width: 100%;
    height: var(--header-height-desktop);
    z-index: 1000;
}

/* Body wrapper so footer never overlaps content */
#body {
    flex: 1;
    margin-top: 0;
    padding-bottom: calc(var(--footer-height) + 5px);
}

/* Page content offset below header */
#pageContent {
    padding-top: calc(var(--header-height-desktop) - 40px);
}

/****************************************************************************************************/
/* HEADER — LOGO + ICON BAR (Smooth Scaling)                                                        */
/****************************************************************************************************/

/* Unified header container */
#simpleHeader {
    display: flex;
    align-items: center; /* vertical centering */
    justify-content: space-between;
    flex-wrap: nowrap;
    min-height: var(--header-height-desktop);
    padding: 0 10px;
}

/* Right-side icon bar */
.header-icons {
    display: flex;
    align-items: center; /* vertical centering */
    justify-content: flex-end;
    gap: 12px;
    margin-left: auto;
}
    /* Smooth-scaling icons */
    .header-icon,
    .header-icons img,
    .header-icons input[type="image"],
    .header-icons .aspNetDisabled {
        display: block;
        width: clamp(40px, 6vw, 70px);
        height: clamp(40px, 6vw, 70px);
        object-fit: contain;
        flex-shrink: 0;
    }

/* Logo container */
.header-logo {
    display: flex;
    align-items: center;
    position: relative;
    width: clamp(100px, 12vw, 140px);
    min-width: clamp(100px, 12vw, 140px);
}

    /* Anchor wrapper */
    .header-logo a {
        display: block;
        width: 100%;
        height: 100%;
    }

/* Smooth-scaling logo with badge effect */
.header-logo-img {
    position: absolute;
    width: clamp(100px, 12vw, 140px);
    height: auto;
    bottom: calc(-0.82 * clamp(100px, 12vw, 140px)); /* proportional badge drop */
}

/****************************************************************************************************/
/* FOOTER                                                                                            */
/****************************************************************************************************/

#StickyFooterBanner {
    background-image: var(--header-gradient);
    position: relative;
    bottom: 0;
    width: 100%;
    height: var(--footer-height);
    color: white;
    text-align: center;
    line-height: 25px;
    padding: 10px 0;
    z-index: 1000;
}

/****************************************************************************************************/
/* BUTTONS & TEXT                                                                                    */
/****************************************************************************************************/

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

    .stdBtn:hover {
        color: gold;
        box-shadow: 0 2px 3px 1px #000;
    }

.txtC {
    text-align: center;
}

/****************************************************************************************************/
/* RESPONSIVE BREAKPOINTS — Header height only                                                      */
/****************************************************************************************************/

/* Tablet */
@media (max-width: 991px) {
    #bannerWrapper {
        height: var(--header-height-tablet);
    }

    #pageContent {
        padding-top: var(--header-height-tablet);
    }
}

/* Phone */
@media (max-width: 767px) {
    #bannerWrapper {
        height: var(--header-height-phone);
    }

    #pageContent {
        padding-top: calc(var(--header-height-phone) - 20px);
    }

    #simpleHeader {
        min-height: var(--header-height-phone);
    }
}

/* Very small phones */
@media (max-width: 480px) {
    body {
        padding-top: 0;
    }
}