/* =========================
   MOBILE HEADER BAR
========================= */

#ta-mobile-header{
    position:fixed !important;
    top:0;
    left:0 !important;
    right:0 !important;
    z-index:99999;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    padding:10px 16px;
    transition:transform .35s ease, box-shadow .35s ease, background .35s ease;
    box-sizing:border-box;
}

#ta-mobile-header.ta-scrolled{
    box-shadow:0 2px 10px rgba(0,0,0,.12);
}

#ta-mobile-header.ta-hidden{
    transform:translateY(-100%);
}

/* icon on left → toggle first, logo second */
#ta-mobile-header.left #ta-menu-toggle{ order:1; }
#ta-mobile-header.left #ta-mobile-logo{ order:2; justify-content:flex-end; }

/* =========================
   HAMBURGER TOGGLE
========================= */

#ta-menu-toggle{
    cursor:pointer;
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    background:none;
    border:none;
    padding:0;
    pointer-events:auto;
    position:relative;
    z-index:1;
}

/* both icons stacked, animate between them */
#ta-menu-toggle span{
    position:absolute;
    display:flex;
    transition:.3s ease;
}

.ta-icon-close{
    opacity:0;
    transform:scale(.5) rotate(-90deg);
}

#ta-menu-toggle.active .ta-icon-open{
    opacity:0;
    transform:scale(.5) rotate(90deg);
}

#ta-menu-toggle.active .ta-icon-close{
    opacity:1;
    transform:scale(1) rotate(0deg);
}

/* =========================
   MOBILE LOGO
========================= */

#ta-mobile-logo{
    display:flex;
    align-items:center;
    flex:1;
    min-width:0;
}

#ta-mobile-logo img,
#ta-mobile-logo .custom-logo{
    max-height:40px;
    width:auto;
    display:block;
    object-fit:contain;
}

#ta-mobile-logo a{
    text-decoration:none;
    color:inherit;
    font-weight:600;
    font-size:18px;
    line-height:1;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

/* =========================
   MENU OVERLAY + PANEL
========================= */

#ta-mobile-menu{
    position:fixed;
    inset:0;
    z-index:9999;
    pointer-events:none;
}

#ta-mobile-menu .ta-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.55);
    opacity:0;
    transition:.35s ease;
}

#ta-mobile-menu .ta-panel{
    position:absolute;
    top:0;
    right:0;
    width:320px;
    max-width:100vw;
    height:100%;
    background:var(--ta-panel-bg, #fff);
    transform:translateX(100%);
    transition:transform .45s cubic-bezier(.77,0,.18,1);
    padding:20px;
    overflow-y:auto;
    box-sizing:border-box;
}

#ta-mobile-menu.active{ pointer-events:auto; }
#ta-mobile-menu.active .ta-overlay{ opacity:1; }
#ta-mobile-menu.active .ta-panel{ transform:translateX(0); }

/* =========================
   HIDE HEADER NAV
========================= */

body.ta-hide-header-menu nav,
body.ta-hide-header-menu .main-navigation,
body.ta-hide-header-menu .site-navigation,
body.ta-hide-header-menu #site-navigation,
body.ta-hide-header-menu .menu-main-menu-container{
    display:none !important;
}

/* =========================
   MENU LIST
========================= */

.ta-menu,
.ta-menu ul{
    list-style:none;
    margin:0;
    padding:0;
}

.ta-menu li a{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:14px;
    text-decoration:none;
    transition:.25s;
}

/* =========================
   COLORS
========================= */

.ta-menu > li > a{
    color:      var(--ta-menu-text,        #111111);
    background: var(--ta-menu-bg,          #ffffff);
}
.ta-menu > li > a:hover{
    color:      var(--ta-menu-text-hover,  #000000);
    background: var(--ta-menu-bg-hover,    #f2f2f2);
}
.ta-menu > li.open > a{
    color:      var(--ta-menu-text-active, #000000);
    background: var(--ta-menu-bg-active,   #e8e8e8);
}

.ta-menu .sub-menu li a{
    color:      var(--ta-sub-text,         #333333);
    background: var(--ta-sub-bg,           #f8f8f8);
}
.ta-menu .sub-menu li a:hover{
    color:      var(--ta-sub-text-hover,   #000000);
    background: var(--ta-sub-bg-hover,     #efefef);
}
.ta-menu .sub-menu li.open > a{
    color:      var(--ta-sub-text-active,  #000000);
    background: var(--ta-sub-bg-active,    #e5e5e5);
}

/* =========================
   SUBMENU ACCORDION
========================= */

.ta-menu .sub-menu{
    max-height:0;
    overflow:hidden;
    padding-left:12px;
    transition:max-height .35s ease;
}

.ta-menu li.open > .sub-menu{
    max-height:600px;
}

/* =========================
   ARROW ICON
========================= */

.ta-arrow{
    margin-left:auto;
    font-size:12px;
    transition:.3s;
    flex-shrink:0;
}

.ta-menu li.open > a .ta-arrow{
    transform:rotate(180deg);
}