/* =====================================================================
   index-header.css  -  RentABoat HOME PAGE header (index.aspx only)
   ===================================================================== */

#rabHdr,
#rabMobMenu {
    --rab-navy: #1D2BA7;
    --rab-navy-hover: #101c76;
    --rab-ink: #030a43; /* dark navy text on white - sampled from the design */
    --rab-text: #111827;
    --rab-line: #E5E7EB;
    --rab-hdr-h: 100px;
    /* --rab-btn-h: 46px; */
    --rab-btn-h: 38px;
    --rab-font: 'Poppins', 'Segoe UI', Arial, sans-serif;
}

    #rabHdr,
    #rabHdr *,
    #rabMobMenu,
    #rabMobMenu * {
        box-sizing: border-box;
    }

        #rabHdr a,
        #rabMobMenu a {
            text-decoration: none;
        }

        #rabHdr button,
        #rabMobMenu button {
            font-family: var(--rab-font);
            margin: 0;
        }

/* ---------------------------------------------------------------- bar */
#rabHdr {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030; /* same layer Bootstrap uses for fixed-top; modals (1055) stay above */
    height: var(--rab-hdr-h);
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0 40px;
    font-family: var(--rab-font);
    /*background: rgba(255, 255, 255, 0.2);*/ /* estimated from the design screenshot */
    border: 0;
    border-bottom: 1px solid transparent;
    box-shadow: none;
    transition: background-color .2s ease, box-shadow .2s ease, border-color .2s ease;
}

    #rabHdr.is-solid {
        background: #fff;
        border-bottom-color: var(--rab-line);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }

    /* ---------------------------------------------------------------- logo */
    #rabHdr .rabh-logo {
        display: flex;
        align-items: center;
        flex-shrink: 1;
        min-width: 0;
    }

        #rabHdr .rabh-logo img {
            width: auto;
            /* height: 54px; */
            height: 48px;
            max-width: 100%;
        }

        /* two logos, one visible at a time (selectors are deliberately 2 classes deep so they beat ".rabh-logo img") */
        #rabHdr .rabh-logo .rabh-logo__light {
            display: block;
        }

        #rabHdr .rabh-logo .rabh-logo__color {
            display: none;
            /* height: 40px; */
            height: 48px;
        }

    #rabHdr.is-solid .rabh-logo .rabh-logo__light {
        display: none;
    }

    #rabHdr.is-solid .rabh-logo .rabh-logo__color {
        display: block;
    }

    /* -------------------------------------------------------------- search
   (only visible in the .is-scrolled state)                              */
    #rabHdr .rabh-search {
        display: none;
        flex: 1;
        justify-content: center;
        min-width: 0;
        padding: 0 40px;
    }

    #rabHdr.is-scrolled .rabh-search {
        display: flex;
    }

    #rabHdr .rabh-search__inner {
        display: flex;
        align-items: center;
        width: 100%;
        max-width: 700px;
        height: 48px;
        padding: 5px 5px 5px 0;
        background: #fff;
        border: 1.5px solid #D1D5DB;
        border-radius: 50px;
        transition: border-color .2s;
    }

        #rabHdr .rabh-search__inner:focus-within {
            border-color: #9CA3AF;
        }

    /* !important: the page's global input[type=text] rules must not win here */
    #rabHdr .rabh-search__input {
        flex: 1;
        min-width: 0;
        height: 100%;
        margin: 0 !important;
        padding: 0 18px 0 20px !important;
        border: 0 !important;
        border-radius: 20px !important;
        outline: none !important;
        box-shadow: none !important;
        background: transparent !important;
        font-family: var(--rab-font) !important;
        font-size: .92rem !important;
        color: var(--rab-text) !important;
    }

        #rabHdr .rabh-search__input::placeholder {
            color: #9CA3AF;
            font-size: .92rem;
        }

    #rabHdr .rabh-search__btn {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        gap: 7px;
        align-self: stretch;
        padding: 0 20px;
        border: 0;
        border-radius: 50px;
        background: var(--rab-navy);
        color: #fff;
        font-size: .9rem;
        font-weight: 600;
        letter-spacing: .01em;
        white-space: nowrap;
        cursor: pointer;
        transition: background .2s;
    }

        #rabHdr .rabh-search__btn:hover {
            background: var(--rab-navy-hover);
        }

        #rabHdr .rabh-search__btn svg {
            width: 15px;
            height: 15px;
            flex-shrink: 0;
        }

    /* --------------------------------------------------- right-hand group */
    #rabHdr .rabh-right {
        display: flex;
        align-items: center;
        gap: 16px;
        flex-shrink: 0;
        margin-left: auto;
    }

    #rabHdr .rabh-nav {
        display: flex;
        align-items: center;
        gap: 20px;
    }

    /* the Renters / Owners drop-downs are dropped when the search box needs the room */
    #rabHdr.is-scrolled .rabh-nav .rabh-dd {
        display: none;
    }

    #rabHdr .rabh-link,
    #rabHdr .rabh-dd__btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin: 0;
        padding: 12px;
        border: 0;
        border-radius: 6px;
        background: none;
        color: #fff;
        font-family: var(--rab-font);
        font-size: .95rem;
        font-weight: 500;
        line-height: 1.5;
        white-space: nowrap;
        cursor: pointer;
        transition: color .15s, opacity .15s;
    }

        #rabHdr .rabh-link:hover,
        #rabHdr .rabh-dd__btn:hover {
            opacity: .85;
        }

    #rabHdr.is-solid .rabh-link,
    #rabHdr.is-solid .rabh-dd__btn {
        color: var(--rab-text);
    }

        #rabHdr.is-solid .rabh-link:hover,
        #rabHdr.is-solid .rabh-dd__btn:hover {
            color: var(--rab-navy);
            opacity: 1;
        }

    #rabHdr .rabh-caret {
        width: 10px;
        height: 6px;
        flex-shrink: 0;
    }

    /* ---------------------------------------------- Renters / Owners menu */
    #rabHdr .rabh-dd {
        position: relative;
    }

    #rabHdr .rabh-dd__panel {
        display: none;
        position: absolute;
        left: 0;
        top: calc(100% + 9px); /* design: panel starts 9px under the trigger */
        z-index: 1031;
        width: max-content;
        min-width: 242px; /* design: 242px wide, 4 x 48px rows */
        max-width: 340px;
        margin: 0;
        padding: 0;
        background: #fff;
    }

    #rabHdr .rabh-dd.is-open .rabh-dd__panel {
        display: block;
    }

    /* Hover bridge: the panel sits 9px below the trigger. This invisible strip fills that gap so the
   pointer can travel from the button to the panel without the menu closing on the way.
   (It belongs to the panel, so it only exists while the panel is open.) */
    #rabHdr .rabh-dd__panel::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: -12px;
        height: 12px;
    }

    #rabHdr .rabh-dd__item {
        display: block;
        height: 48px;
        padding: 0 24px;
        border-bottom: 1px solid #ccc;
        background: #fff;
        color: var(--rab-ink);
        font-size: 1rem;
        font-weight: 500;
        line-height: 47px;
        white-space: nowrap;
    }

        #rabHdr .rabh-dd__item:hover {
            background: #F3F4FA;
        }

    /* ------------------------------------------------ Sign Up / Log In */
    #rabHdr .rabh-actions {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    #rabHdr .rabh-btn,
    #rabMobMenu .rabh-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: var(--rab-btn-h);
        margin: 0;
        padding: 0 20px;
        border-radius: 8px;
        font-family: var(--rab-font);
        font-size: .9rem; /* same size as the shared control; weight 500 = the medium weight in the design */
        font-weight: 500;
        line-height: 1;
        white-space: nowrap;
        cursor: pointer;
        transition: background-color .15s, color .15s, border-color .15s;
    }

    /* top-of-page look (design): white outline + white fill */
    #rabHdr .rabh-btn--outline {
        border: 1px solid #fff;
        background: transparent;
        color: #fff;
    }

        #rabHdr .rabh-btn--outline:hover {
            background: #fff;
            color: var(--rab-ink);
        }

    #rabHdr .rabh-btn--fill {
        border: 1px solid #fff;
        background: #fff;
        color: var(--rab-ink);
    }

        #rabHdr .rabh-btn--fill:hover {
            /*
            background: #EEF0FA;
            border-color: #EEF0FA;
            */
            background: var(--rab-navy);
            border-color: var(--rab-navy);
            color: #fff;
        }

    /* solid look = same buttons as the shared header control (navy, 38px) */
    #rabHdr.is-solid .rabh-btn {
        height: 38px;
        font-size: .9rem;
        font-weight: 600;
    }

    #rabHdr.is-solid .rabh-btn--outline {
        border: 1.5px solid var(--rab-navy);
        background: #fff;
        color: var(--rab-navy);
    }

        #rabHdr.is-solid .rabh-btn--outline:hover {
            background: var(--rab-navy);
            color: #fff;
        }

    #rabHdr.is-solid .rabh-btn--fill {
        border: 0;
        background: var(--rab-navy);
        color: #fff;
    }

        #rabHdr.is-solid .rabh-btn--fill:hover {
            background: var(--rab-navy-hover);
        }

    /* ------------------------------------------- logged-in user (divProfile)
   NOTE: no `display` is set on .rabh-user itself on purpose. The old
   markup used class "dv-profile" on this element; if the old CSS or the
   code-behind shows/hides it through `display`, that must keep working.  */
    #rabHdr .rabh-user {
        position: relative;
        margin: 0;
        padding: 0;
    }

    #rabHdr .rabh-user__trigger {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 6px 4px;
        border: 0;
        background: none;
        color: #fff;
        font-size: .95rem;
        font-weight: 600;
        cursor: pointer;
        user-select: none;
    }

    #rabHdr.is-solid .rabh-user__trigger {
        color: var(--rab-navy);
    }

    #rabHdr .rabh-user__trigger:hover {
        opacity: .85;
    }

    #rabHdr .rabh-user__avatar {
        display: block;
        width: 32px;
        height: 32px;
        border: 0;
        border-radius: 50%;
        object-fit: cover;
    }

    #rabHdr .rabh-user__fallback {
        display: none;
        align-items: center;
        justify-content: center;
    }

        #rabHdr .rabh-user__fallback svg {
            width: 32px;
            height: 32px;
            fill: currentColor;
        }

    #rabHdr .rabh-user__name {
        white-space: nowrap;
    }

    #rabHdr .rabh-user__chevron {
        width: 14px;
        height: 14px;
        transition: transform .2s;
    }

    #rabHdr .rabh-user.is-open .rabh-user__chevron {
        transform: rotate(180deg);
    }

    #rabHdr .rabh-user__panel {
        display: none;
        position: absolute;
        right: 0;
        top: calc(100% + 20px);
        z-index: 1031;
        min-width: 230px;
        background: #fff;
        border: 1px solid var(--rab-line);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    }

    #rabHdr .rabh-user.is-open .rabh-user__panel {
        display: block;
    }

    #rabHdr .rabh-user__item {
        display: block;
        padding: 15px 24px;
        border-bottom: 1px solid var(--rab-line);
        background: #fff;
        color: var(--rab-text);
        font-size: .95rem;
        font-weight: 400;
    }

        #rabHdr .rabh-user__item:last-child {
            border-bottom: 0;
        }

        #rabHdr .rabh-user__item:hover {
            background: #F9FAFB;
        }

    /* ----------------------------------------------------------- hamburger */
    #rabHdr .rabh-burger {
        display: none;
        flex-shrink: 0;
        padding: 6px;
        border: 0;
        background: none;
        color: #fff;
        cursor: pointer;
    }

    #rabHdr.is-solid .rabh-burger {
        color: var(--rab-navy);
    }

    #rabHdr .rabh-burger svg {
        display: block;
        width: 24px;
        height: 24px;
    }

    #rabHdr .rabh-burger__x {
        display: none !important;
    }

    #rabHdr .rabh-burger[aria-expanded="true"] .rabh-burger__bars {
        display: none;
    }

    #rabHdr .rabh-burger[aria-expanded="true"] .rabh-burger__x {
        display: block !important;
    }

/* -------------------------------------------------------- mobile menu */
#rabMobMenu {
    display: none;
    position: fixed;
    top: var(--rab-hdr-h);
    left: 0;
    right: 0;
    z-index: 1029;
    max-height: calc(100vh - var(--rab-hdr-h));
    max-height: calc(100dvh - var(--rab-hdr-h));
    overflow-y: auto;
    background: #fff;
    border-bottom: 1.5px solid var(--rab-line);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.07);
    font-family: var(--rab-font);
}

    #rabMobMenu .rabh-mob-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 18px 24px;
        border: 0;
        border-bottom: 1px solid var(--rab-line);
        background: none;
        color: var(--rab-text);
        font-size: 1rem;
        font-weight: 500;
        text-align: left;
        cursor: pointer;
    }

        #rabMobMenu .rabh-mob-item.is-open {
            font-weight: 700;
        }

    #rabMobMenu .rabh-mob-chevron {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
        transition: transform .2s;
    }

    #rabMobMenu .rabh-mob-item.is-open .rabh-mob-chevron {
        transform: rotate(180deg);
    }

    #rabMobMenu .rabh-mob-sub {
        display: none;
    }

        #rabMobMenu .rabh-mob-sub.is-open {
            display: block;
        }

    #rabMobMenu .rabh-mob-subitem {
        display: block;
        padding: 16px 24px 16px 48px;
        border-bottom: 1px solid var(--rab-line);
        color: var(--rab-text);
        font-size: .95rem;
        font-weight: 400;
    }

        #rabMobMenu .rabh-mob-subitem:hover {
            background: #F9FAFB;
        }

    #rabMobMenu .rabh-mob-actions {
        display: flex;
        gap: 12px;
        padding: 20px 24px;
    }

        #rabMobMenu .rabh-mob-actions .rabh-btn {
            flex: 1;
            height: 44px;
            font-size: .95rem;
            font-weight: 600;
            border-radius: 10px;
        }

    #rabMobMenu .rabh-btn--outline {
        border: 1.5px solid var(--rab-navy);
        background: #fff;
        color: var(--rab-navy);
    }

        #rabMobMenu .rabh-btn--outline:hover {
            background: var(--rab-navy);
            color: #fff;
        }

    #rabMobMenu .rabh-btn--fill {
        border: 0;
        background: var(--rab-navy);
        color: #fff;
    }

        #rabMobMenu .rabh-btn--fill:hover {
            background: var(--rab-navy-hover);
        }

/* Desktop only: in the design the nav row sits ~4px below the centre line while the logo is
   centred. The solid (scrolled) look is centred, like the shared header control. */
@media (min-width: 1024px) {
    #rabHdr .rabh-right {
        position: relative;
        top: 4px;
        transition: top .2s ease;
    }

    #rabHdr.is-solid .rabh-right {
        top: 0;
    }
}

/* ------------------------------------------------------------- focus  */
#rabHdr a:focus-visible,
#rabHdr button:focus-visible,
#rabMobMenu a:focus-visible,
#rabMobMenu button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

#rabHdr .rabh-search__input:focus-visible {
    outline: none;
}

/* Google Places suggestions must sit ABOVE the fixed header */
.pac-container {
    z-index: 1100 !important;
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 1023px) {
    #rabHdr,
    #rabMobMenu {
        --rab-hdr-h: 80px;
    }

    #rabHdr {
        padding: 0 20px;
    }

        #rabHdr .rabh-nav,
        #rabHdr .rabh-actions {
            display: none;
        }

        #rabHdr .rabh-burger {
            display: flex;
        }

    #rabMobMenu.is-open {
        display: block;
    }

    #rabHdr .rabh-logo img,
    #rabHdr .rabh-logo__color {
        height: 32px;
        max-width: 140px;
        object-fit: contain;
    }

    #rabHdr .rabh-search {
        padding: 0 8px;
    }

    #rabHdr .rabh-search__inner {
        width: 96%;
        max-width: 96%;
    }

    #rabHdr .rabh-search__btn {
        width: 36px;
        padding: 0;
        justify-content: center;
    }

    #rabHdr .rabh-search__btn-text {
        display: none;
    }
}

@media (max-width: 767px) {
    #rabHdr,
    #rabMobMenu {
        --rab-hdr-h: 64px;
    }

    #rabHdr {
        padding: 0 12px;
        gap: 8px;
    }

        #rabHdr .rabh-user__name {
            display: none;
        }
}

@media (max-width: 479px) {
    /* the search box needs the room once it is showing */
    #rabHdr.is-scrolled .rabh-logo {
        display: none;
    }

    #rabHdr.is-scrolled .rabh-search {
        padding: 0;
    }

    #rabHdr.is-scrolled .rabh-search__inner {
        max-width: 100%;
    }

    #rabHdr .rabh-user__panel {
        min-width: 200px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #rabHdr, #rabHdr * {
        transition: none !important;
    }
}