/* ============================================================
   Public site header + home video banner — responsive layer.
   Loaded after bootstrap/product.css/style.css in _NewLayout, so it
   only overrides what is needed; the shared theme files stay untouched.
   Prefix: wh-
   ============================================================ */

/* ---------- Video banner ---------- */
.hp-video-banner {
    position: relative;
    overflow: hidden;
    background: #0d1f45;
}

.hp-video-banner video {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0;
}

/* pages without a banner: reserve the space the floating header covers */
.wh-no-banner-spacer {
    height: 150px;
}

@media (max-width: 991px) {
    .wh-no-banner-spacer {
        height: 90px;
    }
}

/* ---------- Header menu button ---------- */
.wh-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    transition: background .2s;
}

.wh-menu-btn:hover,
.wh-menu-btn:focus-visible {
    background: #dae7ff;
    outline: none;
}

/* drawer-only elements are hidden on desktop */
nav .main-ul > li.wh-drawer-head,
nav .main-ul li.wh-mobile-only,
.wh-backdrop {
    display: none;
}

/* ---------- Desktop dropdowns: open below the menu item, not over it ---------- */
@media (min-width: 992px) {
    nav .main-ul .submenu-parent > .submenu {
        top: calc(100% + 8px);
    }

    /* invisible bridge over the 8px gap so hover isn't lost moving into the dropdown */
    nav .main-ul .submenu-parent::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        height: 10px;
    }
}

/* ---------- Small desktop (992–1199): keep one row without overflow ---------- */
@media (min-width: 992px) and (max-width: 1199px) {
    nav .main-ul {
        gap: 6px;
    }

    nav .main-ul > li {
        padding: 6px 8px;
    }

    nav .main-ul > li > a {
        font-size: 15px;
    }

    .logo {
        width: 200px;
    }

    .logo img {
        width: 140px;
    }

    .profile {
        gap: 12px;
    }
}

/* ---------- Tablet & mobile (≤991): off-canvas drawer ---------- */
@media (max-width: 991px) {
    .header-f {
        top: 14px;
        left: 0;
        right: 0;
        width: 100%;
        padding: 0 12px;
    }

    .header-f .container {
        max-width: 100%;
        padding: 2px 0;
        border-radius: 40px;
    }

    .header-f header {
        padding: 6px 12px;
    }

    nav {
        position: relative;
        gap: 8px;
    }

    .menu-icon {
        display: flex;
        align-items: center;
        flex: 0 0 auto;
    }

    .logo {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        display: flex;
        justify-content: center;
    }

    .logo img {
        width: 130px;
        max-width: 100%;
    }

    .profile {
        flex: 0 0 auto;
        align-items: center;
        gap: 14px;
    }

    /* drawer panel */
    nav .main-ul {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        width: min(320px, 86vw);
        display: block;
        margin: 0;
        padding: 0 18px 28px;
        border-radius: 0 18px 18px 0;
        background: #fff;
        box-shadow: 8px 0 30px rgba(17, 63, 138, .18);
        overflow-y: auto;
        z-index: 10001;
        transform: translateX(-105%);
        visibility: hidden;
        transition: transform .3s ease, visibility .3s;
    }

    nav .main-ul.active-submenu {
        left: 0;
        transform: translateX(0);
        visibility: visible;
    }

    .wh-drawer-head {
        position: sticky;
        top: 0;
        z-index: 1;
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        margin: 0 -18px 6px !important;
        padding: 16px 18px !important;
        border-radius: 0 !important;
        border: 0 !important;
        border-bottom: 1px solid #e6ecf7 !important;
        background: #fff !important;
        cursor: default !important;
    }

    .wh-drawer-head img {
        width: 120px;
        height: auto;
    }

    .wh-drawer-close {
        width: 36px;
        height: 36px;
        border: 0;
        border-radius: 50%;
        font-size: 18px;
        color: #214687;
        background: #f0f5ff;
        cursor: pointer;
    }

    nav .main-ul li.wh-mobile-only {
        display: block;
    }

    /* top-level items */
    nav .main-ul > li:not(.wh-drawer-head) {
        display: block;
        margin: 0;
        padding: 0;
        border: 0;
        border-bottom: 1px solid #eef2f9;
        border-radius: 0;
        background: transparent;
    }

    nav .main-ul > li:not(.wh-drawer-head):hover {
        background: transparent !important;
        border: 0 !important;
        border-bottom: 1px solid #eef2f9 !important;
    }

    nav .main-ul > li > a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 4px;
        font-size: 16px;
        font-weight: 600;
    }

    nav .main-ul > li > a span img {
        width: 18px;
        transition: transform .2s;
    }

    .submenu-parent.open > a span img {
        transform: rotate(180deg);
    }

    /* submenus become accordions */
    .submenu-parent:hover .submenu {
        display: none;
    }

    nav .main-ul .submenu,
    .login-member-submenu .submenu {
        position: static;
        display: none;
        width: auto;
        height: auto !important;
        max-height: none;
        overflow: visible !important;
        padding: 0 0 12px 8px;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    nav .main-ul .submenu-parent.open .submenu {
        display: block;
    }

    .menu-outer,
    .login-member-submenu .submenu .menu-outer {
        display: block;
        width: auto;
        gap: 0;
    }

    .menu-outer .menus ul {
        width: auto;
        margin: 0;
    }

    .menu-outer .nav-heading {
        margin: 10px 0 6px;
        padding-bottom: 6px;
        font-size: 14px;
    }

    nav .main-ul .menu-outer ul li {
        margin: 0;
        padding: 0 !important;
    }

    nav .main-ul .menu-outer ul li a {
        display: block;
        padding: 7px 0;
        font-size: 14px;
        font-weight: 500;
    }

    /* backdrop */
    .wh-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 10000;
        background: rgba(10, 25, 60, .45);
        opacity: 0;
        visibility: hidden;
        transition: opacity .3s, visibility .3s;
    }

    body.wh-menu-open .wh-backdrop {
        opacity: 1;
        visibility: visible;
    }

    body.wh-menu-open {
        overflow: hidden;
    }

    /* .header-f is its own stacking context (z-index 999); lift it above
       the fixed bottom nav (1000) while the drawer is open */
    body.wh-menu-open .header-f {
        z-index: 10002;
    }
}

/* ---------- Mobile (≤767): account lives in bottom nav ---------- */
@media (max-width: 767px) {
    .wh-user-link,
    .profile .wh-welcome,
    .profile .wh-welcome ~ text,
    .profile .wh-welcome + a {
        display: none !important;
    }

    .profile {
        gap: 12px;
    }

    .profile img {
        max-width: 24px;
    }

    .logo img {
        width: 116px;
    }

    /* taller, cropped video so it does not look like a thin strip */
    .hp-video-banner video {
        height: 58vh;
        min-height: 320px;
        max-height: 520px;
        object-fit: cover;
        object-position: 32% center;
    }
}

@media (max-width: 380px) {
    .header-f {
        padding: 0 8px;
    }

    .header-f header {
        padding: 5px 8px;
    }

    .profile {
        gap: 10px;
    }

    .logo img {
        width: 100px;
    }
}