/* ProBrace Mobiele Header Frontend Stylesheet */

/* Desktop view: hide custom mobile header */
@media only screen and (min-width: 1024px) {
    #probrace-mobile-header {
        display: none !important;
    }
}

/* Mobile & Tablet view (<= 1023px) */
@media only screen and (max-width: 1023px) {

    /* HIDE OLD THEME HEADER ELEMENTS */
    .sub-bar,
    .nav-bar,
    .nav-overlay,
    .mobile-navigation__search,
    .mobile-navigation .dgwt-wcas-sf-wrapp,
    .mobile-navigation form[role="search"] {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* Main header wrapper */
    .main-header {
        position: relative !important;
        width: 100% !important;
        z-index: 250 !important;
    }

    /* Sticky Row 1: Logo & Hamburger Bar (Fixed at top 0) */
    .top-bar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 4.8rem !important;
        z-index: 100010 !important;
        background: #34485c !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    }

    /* Sticky Row 2: Search + Language Selector Row (Fixed directly below top-bar at top 4.8rem) */
    .probrace-mobile-header__search-lang-row {
        position: fixed !important;
        top: 4.8rem !important;
        left: 0 !important;
        width: 100% !important;
        height: 55px !important;
        z-index: 255 !important;
        background: #ffffff !important;
        padding: 8px 12px !important;
        border-bottom: 1px solid #e2e8f0 !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    /* Mobile Header Master Container */
    #probrace-mobile-header {
        display: block;
        background: transparent;
        position: relative;
        z-index: 90;
        margin: 0 0 20px 0 !important; /* 20px margin bottom below header */
        padding: 0;
        width: 100%;
    }

    #probrace-mobile-header .wrap {
        padding: 0 0px !important;
        max-width: 100%;
    }

    .probrace-mobile-header__search-col {
        flex: 0 0 70%;
        max-width: 70%;
        min-width: 0;
    }

    .probrace-mobile-header__lang-col {
        flex: 0 0 calc(30% - 8px);
        max-width: calc(30% - 8px);
        min-width: 0;
        display: flex;
        justify-content: flex-end;
    }

    /* Search Input Styling */
    .probrace-mobile-search-form {
        width: 100%;
        margin: 0;
    }

    .probrace-mobile-search-input-wrap {
        position: relative;
        display: flex;
        align-items: center;
        width: 100%;
    }

    .probrace-mobile-search-input {
        width: 100% !important;
        height: 39px !important;
        padding: 0 38px 0 14px !important;
        background: #f1f5f9 !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: 8px !important;
        font-size: 13px !important;
        color: #1e293b !important;
        outline: none !important;
        box-shadow: none !important;
        transition: border-color 0.2s ease, background 0.2s ease !important;
    }

    .probrace-mobile-search-input:focus {
        background: #ffffff !important;
        border-color: #34485c !important;
    }

    .probrace-mobile-search-input::placeholder {
        color: #94a3b8;
        font-size: 13px;
        font-style: italic;
    }

    .probrace-mobile-search-submit {
        position: absolute;
        right: 4px;
        top: 50%;
        transform: translateY(-50%);
        background: transparent !important;
        border: none !important;
        padding: 6px !important;
        color: #64748b;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .probrace-mobile-search-submit:hover {
        color: #34485c;
    }

    /* FiboSearch overrides for mobile row */
    #probrace-mobile-header .dgwt-wcas-sf-wrapp {
        width: 100% !important;
        max-width: 100% !important;
    }

    #probrace-mobile-header input[type=search].dgwt-wcas-search-input {
        height: 39px !important;
        border-radius: 8px !important;
        background: #f1f5f9 !important;
        border: 1px solid #cbd5e1 !important;
        padding-left: 14px !important;
        font-size: 13px !important;
    }

    #probrace-mobile-header input[type=search].dgwt-wcas-search-input:focus {
        background: #ffffff !important;
        border-color: #34485c !important;
    }

    /* Language Selector Styling */
    .probrace-mobile-lang-selector {
        position: relative;
        width: 100%;
    }

    .probrace-mobile-lang-btn {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 4px;
        width: 100%;
        height: 39px;
        padding: 0 8px;
        background: #f1f5f9;
        border: 1px solid #cbd5e1;
        border-radius: 8px;
        font-weight: 700;
        font-size: 12px;
        color: #34485c;
        cursor: pointer;
        transition: all 0.2s ease;
        box-sizing: border-box;
    }

    .probrace-mobile-lang-btn:hover,
    .probrace-mobile-lang-btn.is-active {
        background: #e2e8f0;
        border-color: #94a3b8;
    }

    .probrace-mobile-lang-flag {
        display: flex;
        align-items: center;
        flex-shrink: 0;
    }

    .probrace-mobile-lang-flag img {
        width: 18px;
        height: 13px;
        border-radius: 2px;
        object-fit: cover;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    }

    .probrace-mobile-lang-code {
        font-weight: 700;
        font-size: 12px;
        letter-spacing: 0.3px;
    }

    .probrace-mobile-lang-arrow {
        display: flex;
        align-items: center;
        color: #64748b;
        transition: transform 0.25s ease;
    }

    .probrace-mobile-lang-btn.is-active .probrace-mobile-lang-arrow {
        transform: rotate(180deg);
    }

    /* Language Dropdown Menu */
    .probrace-mobile-lang-dropdown {
        position: absolute;
        top: calc(100% + 4px);
        right: 0;
        min-width: 140px;
        background: #ffffff;
        border-radius: 8px;
        border: 1px solid #e2e8f0;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-6px);
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
        z-index: 9999;
        overflow: hidden;
    }

    .probrace-mobile-lang-dropdown.is-open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .probrace-mobile-lang-list {
        list-style: none !important;
        margin: 0 !important;
        padding: 4px 0 !important;
    }

    .probrace-mobile-lang-list li {
        margin: 0 !important;
        padding: 0 !important;
    }

    .probrace-mobile-lang-list li:before {
        display: none !important;
    }

    .probrace-mobile-lang-list li a {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        font-size: 12px;
        font-weight: 600;
        color: #34485c;
        text-decoration: none;
        transition: background 0.15s ease;
    }

    .probrace-mobile-lang-list li a:hover {
        background: #f1f7fc;
        color: #8cc540;
    }

    .probrace-mobile-lang-list .lang-flag img {
        width: 16px;
        height: 12px;
        border-radius: 2px;
        object-fit: cover;
    }

    /* Row 3: Non-Sticky USP Rotator Bar (Scrolls away naturally under sticky search bar) */
    .probrace-mobile-header__usp-row {
        position: relative !important; /* Non-sticky */
        margin-top: 103px !important; /* Starts below sticky top-bar (48px) + sticky search-lang-row (55px) */
        background: #ffffff !important;
        border-bottom: 1px solid #e2e8f0 !important;
        height: 36px !important;
        overflow: hidden !important;
        z-index: 80 !important;
    }

    body #main {
        padding-top: 0px !important;
    }

    .probrace-mobile-usp-rotator {
        position: relative;
        width: 100%;
        height: 100%;
    }

    .probrace-mobile-usp-slides {
        position: relative;
        width: 100%;
        height: 100%;
    }

    .probrace-mobile-usp-item {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        font-size: 13px;
        font-weight: 600;
        color: #1e293b;
        opacity: 0;
        visibility: hidden;
        transform: translateY(4px);
        transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out, visibility 0.4s ease-in-out;
        pointer-events: none;
        text-align: center;
        padding: 0 12px;
        box-sizing: border-box;
    }

    .probrace-mobile-usp-item.is-active {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
    }

    .probrace-mobile-usp-item.is-fading-out {
        opacity: 0;
        visibility: hidden;
        transform: translateY(-4px);
    }

    .probrace-mobile-usp-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .probrace-mobile-usp-icon svg {
        width: 16px;
        height: 16px;
    }

    .probrace-mobile-usp-text {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 90%;
    }

    .probrace-mobile-usp-text a {
        color: #1e293b;
        text-decoration: none;
    }

    .probrace-mobile-usp-text a:hover {
        color: #8cc540;
    }

    /* Mobile Megamenu Full Height & Full Screen Drilldown Overlay */
    .mobile-navigation {
        height: 100vh !important;
        height: 100dvh !important;
        z-index: 99999 !important;
    }

    /* Make entire parent menu item in mobile menu clickable & remove separate chevron link behavior */
    .mobile-navigation li.menu-item-has-children,
    .mobile-navigation li.megamenu,
    .mobile-navigation__menu-wrap li.menu-item-has-children,
    .mobile-navigation__menu-wrap li.megamenu {
        position: relative !important;
    }

    .mobile-navigation li.menu-item-has-children > a,
    .mobile-navigation li.megamenu > a,
    .mobile-navigation__menu-wrap li.menu-item-has-children > a,
    .mobile-navigation__menu-wrap li.megamenu > a {
        cursor: pointer !important;
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    /* Disable pointer events on separate chevron / next buttons so they pass clicks directly to the main menu item */
    .mobile-navigation .mob-next-bttn,
    .mobile-navigation a.mob-next-bttn,
    .mobile-navigation span.mob-next-bttn,
    .mobile-navigation li.menu-item-has-children > a + a,
    .mobile-navigation .dropdown-toggle,
    .mobile-navigation__menu-wrap .mob-next-bttn,
    .mobile-navigation__menu-wrap a.mob-next-bttn,
    .mobile-navigation__menu-wrap span.mob-next-bttn,
    .mobile-navigation__menu-wrap li.menu-item-has-children > a + a,
    .mobile-navigation__menu-wrap .dropdown-toggle {
        pointer-events: none !important;
        user-select: none !important;
        -webkit-user-select: none !important;
        -webkit-touch-callout: none !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    /* Prevent parent containers from creating containing blocks or clipping fixed sub-menus */
    .mobile-navigation,
    .mobile-navigation__menu-wrap,
    .mobile-navigation ul.menu,
    .mobile-navigation li.menu-item-has-children,
    .mobile-navigation li.megamenu {
        overflow: visible !important;
        transform: none !important;
        perspective: none !important;
        filter: none !important;
        contain: none !important;
        will-change: auto !important;
    }

    body.mob-nav-active .mobile-navigation,
    body.mob-nav-active .mobile-navigation__menu-wrap,
    body.mob-nav-active .mobile-navigation ul.menu,
    body.mob-nav-active .mobile-navigation li.menu-item-has-children {
        overflow: visible !important;
    }

    /* Elevate active parent menu wrap and parent item stacking context so child sub-menu renders above secondary menu wrap */
    .mobile-navigation__menu-wrap {
        position: relative !important;
    }

    .mobile-navigation__menu-wrap.has-active-child,
    .mobile-navigation__menu-wrap:has(li.active) {
        z-index: 99999999 !important;
        position: relative !important;
        overflow: visible !important;
    }

    .mobile-navigation li.active,
    .mobile-navigation__menu-wrap li.active,
    li.menu-item-has-children.active,
    li.megamenu.active {
        z-index: 99999999 !important;
        position: relative !important;
        overflow: visible !important;
    }

    /* Slide-in screen overlay for ALL sub-menus in mobile navigation, starting below top-bar (top: 4.8rem) */
    .mobile-navigation .sub-menu,
    .mobile-navigation .megamenu-wrap,
    .mobile-navigation .dropdown-menu,
    .mobile-navigation .children,
    .mobile-navigation li.menu-item-has-children > ul,
    .mobile-navigation li.menu-item-has-children > div,
    .mobile-navigation__menu-wrap .sub-menu,
    .mobile-navigation__menu-wrap .megamenu-wrap,
    .mobile-navigation__menu-wrap .dropdown-menu,
    .mobile-navigation__menu-wrap .children,
    .mobile-navigation__menu-wrap li.menu-item-has-children > ul,
    .mobile-navigation__menu-wrap li.menu-item-has-children > div,
    ul.sub-menu {
        display: flex !important;
        position: fixed !important;
        top: 4.8rem !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 100% !important;
        width: 100% !important;
        width: 100vw !important;
        height: calc(100vh - 4.8rem) !important;
        height: calc(100dvh - 4.8rem) !important;
        max-height: calc(100vh - 4.8rem) !important;
        max-height: calc(100dvh - 4.8rem) !important;
        background: #ffffff !important;
        background-color: #ffffff !important;
        padding: 2rem 2rem 4rem 2rem !important;
        flex-direction: column !important;
        z-index: 99999999 !important;
        gap: 0.4rem !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        transition: left 0.35s cubic-bezier(0.86, 0, 0.07, 1), opacity 0.35s ease, visibility 0.35s ease !important;
        visibility: hidden !important;
        opacity: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        pointer-events: none !important;
    }

    /* Force all sub-menu list items and links to have solid white backgrounds */
    .sub-menu li,
    .sub-menu li > a,
    .megamenu-wrap li,
    .megamenu-wrap li > a {
        background: #ffffff !important;
        background-color: #ffffff !important;
    }

    /* Layering nested sub-menus */
    .mobile-navigation .sub-menu .sub-menu,
    .mobile-navigation .megamenu-wrap .sub-menu,
    .mobile-navigation__menu-wrap .sub-menu .sub-menu,
    .mobile-navigation__menu-wrap .megamenu-wrap .sub-menu {
        z-index: 1000000 !important;
        background: #ffffff !important;
        background-color: #ffffff !important;
    }

    .mobile-navigation .sub-menu .sub-menu .sub-menu,
    .mobile-navigation__menu-wrap .sub-menu .sub-menu .sub-menu {
        z-index: 1000001 !important;
        background: #ffffff !important;
        background-color: #ffffff !important;
    }

    /* Active sub-menu slides in from right ONLY when mobile nav drawer is open (body.mob-nav-active) */
    body.mob-nav-active .mobile-navigation li.active > .sub-menu,
    body.mob-nav-active .mobile-navigation li.active > .megamenu-wrap,
    body.mob-nav-active .mobile-navigation li.active > .dropdown-menu,
    body.mob-nav-active .mobile-navigation li.active > ul,
    body.mob-nav-active .mobile-navigation li.active > div,
    body.mob-nav-active .mobile-navigation__menu-wrap li.active > .sub-menu,
    body.mob-nav-active .mobile-navigation__menu-wrap li.active > .megamenu-wrap,
    body.mob-nav-active .mobile-navigation__menu-wrap li.active > .dropdown-menu,
    body.mob-nav-active .mobile-navigation__menu-wrap li.active > ul,
    body.mob-nav-active .mobile-navigation__menu-wrap li.active > div,
    li.active > .sub-menu,
    li.active > ul {
        visibility: visible !important;
        opacity: 1 !important;
        left: 0 !important;
        pointer-events: auto !important;
        background: #ffffff !important;
        background-color: #ffffff !important;
        z-index: 999999 !important;
    }

    /* When mobile menu drawer is closed (body does NOT have mob-nav-active), ensure ALL sub-menus are hidden */
    body:not(.mob-nav-active) .mobile-navigation .sub-menu,
    body:not(.mob-nav-active) .mobile-navigation .megamenu-wrap,
    body:not(.mob-nav-active) .mobile-navigation .dropdown-menu,
    body:not(.mob-nav-active) .mobile-navigation .children,
    body:not(.mob-nav-active) .mobile-navigation__menu-wrap .sub-menu,
    body:not(.mob-nav-active) .mobile-navigation__menu-wrap .megamenu-wrap,
    body:not(.mob-nav-active) .mobile-navigation__menu-wrap .dropdown-menu,
    body:not(.mob-nav-active) .mobile-navigation__menu-wrap .children {
        visibility: hidden !important;
        opacity: 0 !important;
        left: 100% !important;
        pointer-events: none !important;
    }

    /* Back button styling in full-height sub-menu screen */
    .mobile-navigation .sub-menu li.back,
    .mobile-navigation__menu-wrap .sub-menu li.back {
        width: 100% !important;
        margin-bottom: 1.5rem !important;
        padding-bottom: 1rem !important;
        border-bottom: 1px solid #f1f7fc !important;
        list-style: none !important;
    }

    .mobile-navigation .sub-menu li.back a,
    .mobile-navigation__menu-wrap .sub-menu li.back a {
        display: flex !important;
        align-items: center !important;
        gap: 0.8rem !important;
        font-weight: 700 !important;
        font-size: 1.5rem !important;
        color: #34485c !important;
        text-decoration: none !important;
    }

    /* Lock vertical page scrolling when mobile menu drawer is open */
    html.probrace-lock-scroll,
    body.probrace-lock-scroll,
    html.mob-nav-active,
    body.mob-nav-active,
    html.nav-dropdown-open,
    body.nav-dropdown-open {
        overflow: hidden !important;
        height: 100% !important;
        touch-action: none !important;
    }

    /* Hide chat bubble (#sleak-html) when mobile navigation drawer is open */
    body.mob-nav-active #sleak-html,
    body.nav-dropdown-open #sleak-html,
    body.mobile-nav-open #sleak-html,
    body.probrace-lock-scroll #sleak-html,
    html.mob-nav-active #sleak-html,
    html.probrace-lock-scroll #sleak-html,
    body.mob-nav-active .sleak-html,
    body.probrace-lock-scroll .sleak-html {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* Ensure smooth vertical scrolling INSIDE mobile navigation drawer and sub-menus */
    .mobile-navigation,
    .mobile-navigation__menu-wrap,
    .mobile-navigation ul.menu li .sub-menu,
    .mobile-navigation ul.menu li .megamenu-wrap,
    .mobile-navigation__menu-wrap ul.menu li .sub-menu,
    .mobile-navigation__menu-wrap ul.menu li .megamenu-wrap {
        touch-action: pan-y !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
}