/*===================================================
    Mobile side menu
    ---------------------------------------------------
    Everything the off-canvas drawer needs, kept apart
    from header.css so the mobile nav can be worked on
    (or swapped out) without touching the desktop bar.

    Loads site-wide; all the drawer rules live inside
    the max-width:1199px query, so above that the header
    behaves exactly as header.css defines it.
===================================================*/

/*===hamburger - hidden until the drawer breakpoint===*/
.menuToggle{
    display: none;
    position: relative;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    box-shadow: 0 0 10px 0 #848484;
    cursor: pointer;
    transition: box-shadow 0.3s ease, background 0.3s ease;
    .menuBar{
        display: block;
        width: 17px;
        height: 2px;
        margin: 0 auto;
        border-radius: 2px;
        background: #0d1117;
        transition: transform 0.4s cubic-bezier(.22, .8, .36, 1),
                    opacity 0.25s ease,
                    background 0.3s ease;
    }
    &:hover{
        background: #0075ff12;
    }
    /*===bars fold into a cross while the drawer is open===*/
    &.is-active{
        .menuBar:nth-child(1){ transform: translateY(7px) rotate(45deg); }
        .menuBar:nth-child(2){ opacity: 0; transform: scaleX(0); }
        .menuBar:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
    }
}

/*===dimmer behind the panel===*/
.menuOverlay{
    position: fixed;
    inset: 0;
    z-index: 1001;
    background: rgb(4 8 14 / 62%);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.34s ease, visibility 0.34s ease;
    &.is-open{
        opacity: 1;
        visibility: visible;
    }
}

/*===the panel head and foot only exist for this layout===*/
.menuPanelHead,
.menuPanelFoot{
    display: none;
}

@media (max-width: 1199px){

    /*===backdrop-filter turns an element into the containing block for its
         position:fixed children. .headerInner picks one up when the header
         goes sticky, which would strand this drawer inside the header box
         and add its off-canvas width to the page. A flat panel avoids it.===*/
    .headerWrap.isSticky .headerInner{
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: #ffffffef;
    }

    .headerWrap .headerInner .menuToggle{
        display: flex;
    }

    .headerWrap .headerInner .menuWrap{
        position: fixed;
        top: 0;
        right: 0;
        z-index: 1002;
        display: flex;
        flex-direction: column;
        width: min(370px, 88vw);
        height: 100dvh;
        padding: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        border-left: 1px solid #ffffff14;
        background:
            radial-gradient(120% 60% at 100% 0%, #1b3a63 0%, transparent 60%),
            linear-gradient(180deg, #0d1117 0%, #0a0d12 100%);
        box-shadow: -30px 0 70px rgb(0 0 0 / 55%);
        /*===translate3d + will-change keep the slide on its own compositor
             layer; without them the gradient and the 70px shadow repaint on
             every frame, which is what made the open feel like it hitched.===*/
        transform: translate3d(102%, 0, 0);
        will-change: transform;
        backface-visibility: hidden;
        visibility: hidden;
        transition: transform 0.42s cubic-bezier(.22, .84, .38, 1),
                    visibility 0.42s ease;

        &.is-open{
            transform: translate3d(0, 0, 0);
            visibility: visible;
        }
        /*===while a finger is dragging it, js drives the offset===*/
        &.isDragging{
            transition: none;
        }

        /*=== panel head: logo + close ===*/
        .menuPanelHead{
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            flex-shrink: 0;
            padding: 20px 22px 16px;
            border-bottom: 1px solid #ffffff12;
            .menuPanelLogo img{
                display: block;
                width: auto;
                max-width: 150px;
                max-height: 34px;
            }
            .menuClose{
                position: relative;
                flex-shrink: 0;
                width: 38px;
                height: 38px;
                padding: 0;
                border: 1px solid #ffffff1f;
                border-radius: 50%;
                background: #ffffff0a;
                color: #dce6f2;
                font-size: 15px;
                line-height: 1;
                cursor: pointer;
                transition: background 0.3s ease, color 0.3s ease, transform 0.4s ease;
                &:hover,
                &:focus-visible{
                    background: #ffffff1a;
                    color: #fff;
                    transform: rotate(90deg);
                }
            }
        }

        /*=== the menu itself ===*/
        > ul{
            flex: 1 1 auto;
            flex-direction: column;
            align-items: stretch;
            gap: 2px;
            padding: 18px 16px 8px;
            margin: 0;

            > li{
                position: static;
                /*===items fly in behind the panel, staggered===*/
                opacity: 0;
                transform: translate3d(20px, 0, 0);
                transition: opacity 0.3s ease, transform 0.34s cubic-bezier(.22, .84, .38, 1);

                > a{
                    position: relative;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    width: 100%;
                    padding: 14px 14px 14px 18px;
                    border-radius: 12px;
                    color: #dce6f2;
                    font-size: 16px;
                    font-weight: 500;
                    letter-spacing: .2px;
                    transition: color 0.3s ease, background 0.3s ease, padding-left 0.3s ease;

                    /*===the desktop centre-out underline does not suit a stacked list===*/
                    &::after{
                        display: none;
                    }
                    /*===accent bar slides in from the left instead===*/
                    &::before{
                        content: '';
                        position: absolute;
                        left: 6px;
                        top: 50%;
                        width: 3px;
                        height: 0;
                        border-radius: 3px;
                        background: linear-gradient(180deg, #2472fc 0%, #8a5cf6 100%);
                        transform: translateY(-50%);
                        transition: height 0.32s cubic-bezier(.22, .8, .36, 1);
                    }
                    &:hover,
                    &:focus-visible{
                        color: #fff;
                        background: #ffffff0f;
                        transform: none;
                        font-weight: 500;
                        padding-left: 22px;
                        &::before{
                            height: 22px;
                        }
                    }
                    /*===current page stays marked===*/
                    &.is-active{
                        color: #6cb6ff;
                        background: #ffffff0a;
                        &::before{
                            height: 22px;
                        }
                    }

                    .subArrow{
                        display: inline-flex;
                        align-items: center;
                        justify-content: center;
                        flex-shrink: 0;
                        width: 34px;
                        height: 34px;
                        margin-right: -6px;
                        border-radius: 50%;
                        background: #ffffff0a;
                        font-size: 11px;
                        opacity: .85;
                        transition: transform 0.38s cubic-bezier(.22, .8, .36, 1),
                                    background 0.3s ease, opacity 0.3s ease;
                    }
                }

                /*===dropdown flattens into an accordion; height is the only thing
                     animating, so hover can no longer reveal it===*/
                .subMenu{
                    position: static;
                    min-width: 0;
                    max-height: 0;
                    margin: 0 0 0 18px;
                    padding: 0 0 0 14px;
                    border: 0;
                    border-left: 1px solid #ffffff1a;
                    border-radius: 0;
                    background: transparent;
                    backdrop-filter: none;
                    box-shadow: none;
                    opacity: 1;
                    visibility: visible;
                    overflow: hidden;
                    transform: none;
                    transition: max-height 0.4s ease, padding 0.4s ease, margin 0.4s ease;
                    &::before,
                    &::after{
                        display: none;
                    }
                    li{
                        opacity: 1;
                        transform: none;
                        transition-delay: 0s;
                        a{
                            padding: 10px 14px;
                            border-radius: 9px;
                            color: #9fb3c8;
                            font-size: 15px;
                            &::before{
                                display: none;
                            }
                            &:hover{
                                color: #fff;
                                background: #ffffff0d;
                                padding-left: 20px;
                            }
                        }
                    }
                }

                &.isOpen{
                    > a{
                        color: #fff;
                        background: #ffffff0d;
                        .subArrow{
                            background: #2472fc;
                            color: #fff;
                            opacity: 1;
                            transform: rotate(180deg);
                        }
                    }
                    > .subMenu{
                        /*===tall enough for the longest list (8 product
                             categories, most of them wrapping to two lines
                             on a narrow phone) - the old 460px cut it off===*/
                        max-height: 900px;
                        padding: 4px 0 10px 14px;
                    }
                }

                /*===hover must not open the panel on a touch layout===*/
                &:hover,
                &:focus-within{
                    > a{
                        color: #fff;
                        .subArrow{
                            transform: none;
                        }
                    }
                    .subMenu{
                        opacity: 1;
                        visibility: visible;
                        transform: none;
                    }
                    &.isOpen > a .subArrow{
                        transform: rotate(180deg);
                    }
                }
            }
        }

        /*===items settle in one after another once the panel is open===*/
        &.is-open > ul > li{
            opacity: 1;
            transform: translate3d(0, 0, 0);
        }
        &.is-open > ul > li:nth-child(1){ transition-delay: .06s; }
        &.is-open > ul > li:nth-child(2){ transition-delay: .09s; }
        &.is-open > ul > li:nth-child(3){ transition-delay: .12s; }
        &.is-open > ul > li:nth-child(4){ transition-delay: .15s; }
        &.is-open > ul > li:nth-child(5){ transition-delay: .18s; }
        &.is-open > ul > li:nth-child(6){ transition-delay: .21s; }
        &.is-open > ul > li:nth-child(7){ transition-delay: .24s; }
        &.is-open > ul > li:nth-child(8){ transition-delay: .27s; }
        &.is-open > ul > li:nth-child(9){ transition-delay: .30s; }
        &.is-open > ul > li:nth-child(n+10){ transition-delay: .33s; }

        /*=== panel foot: call button + socials ===*/
        .menuPanelFoot{
            display: block;
            flex-shrink: 0;
            padding: 18px 22px 26px;
            margin-top: auto;
            border-top: 1px solid #ffffff12;
            .menuCallBtn{
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 10px;
                padding: 13px 18px;
                border-radius: 30px;
                background: linear-gradient(135deg, #2472fc 0%, #8a5cf6 100%);
                color: #fff;
                font-size: 15px;
                font-weight: 600;
                letter-spacing: .3px;
                box-shadow: 0 12px 26px rgb(36 114 252 / 32%);
                transition: transform 0.3s ease, box-shadow 0.3s ease;
                &:hover,
                &:focus-visible{
                    color: #fff;
                    transform: translateY(-2px);
                    box-shadow: 0 16px 30px rgb(36 114 252 / 42%);
                }
                i{
                    font-size: 14px;
                }
            }
            .menuSocials{
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                gap: 10px;
                margin-top: 18px;
                list-style: none;
                padding: 0;
                li a{
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 36px;
                    height: 36px;
                    border: 1px solid #ffffff1a;
                    border-radius: 50%;
                    background: #ffffff08;
                    color: #b9c9da;
                    font-size: 14px;
                    transition: background 0.3s ease, color 0.3s ease,
                                border-color 0.3s ease, transform 0.3s ease;
                    &:hover,
                    &:focus-visible{
                        background: #2472fc;
                        border-color: #2472fc;
                        color: #fff;
                        transform: translateY(-2px);
                    }
                }
            }
        }
    }
}

@media (max-width: 767px){
    .headerWrap .headerInner .menuWrap{
        width: min(330px, 90vw);
        .menuPanelHead{
            padding: 16px 18px 14px;
        }
        > ul{
            padding: 14px 12px 8px;
            > li > a{
                font-size: 15px;
                padding: 13px 12px 13px 16px;
            }
        }
        .menuPanelFoot{
            padding: 16px 18px 22px;
        }
    }
}

/*===================================================
    Reduced motion.

    The preference is about large travel, not about
    things changing state at all. Cutting the duration to
    zero made the panel pop, which just reads as broken.

    Deliberately NOT re-hiding the panel with opacity
    here: show / hide stays on the same transform +
    visibility path as the default, so a rule that failed
    to win could never leave the menu invisible. All this
    block does is shorten the timing and drop the travel
    on the individual links.
===================================================*/
@media (prefers-reduced-motion: reduce){
    .headerWrap .headerInner .menuWrap{
        transition-duration: 0.25s !important;
    }
    .headerWrap .headerInner .menuWrap > ul > li{
        /*===links fade, they no longer fly in, and nothing is staggered===*/
        transform: none !important;
        transition-duration: 0.2s !important;
        transition-delay: 0ms !important;
    }
    .menuOverlay{
        transition-duration: 0.2s !important;
    }
    .menuToggle .menuBar{
        transition-duration: 0.15s !important;
    }
}