/**
 * ==========================================================
 * TelecomRoute Header
 * Part 1 - Layout & Branding
 * ==========================================================
 */

/* ==========================================================
   Header
========================================================== */

.tr-header{

    position:sticky;

    top:0;

    left:0;

    width:100%;

    z-index:1000;

    background:#fff;

    border-bottom:1px solid var(--tr-border);

    box-shadow:0 2px 20px rgba(15,23,42,.04);

}

/* ==========================================================
   Container
========================================================== */

.tr-container{

    max-width:1320px;

    margin:0 auto;

    padding:0 20px;

}

/* ==========================================================
   Header Wrapper
========================================================== */

.tr-header__wrapper{

    display:flex;

    align-items:center;

    justify-content:space-between;

    min-height:90px;

    gap:30px;

}

/* ==========================================================
   Columns
========================================================== */

.tr-header__left{

    display:flex;

    align-items:center;

    flex:0 0 auto;

}

.tr-header__center{

    display:flex;

    justify-content:center;

    flex:1;

}

.tr-header__right{

    display:flex;

    align-items:center;

    gap:16px;

    flex:0 0 auto;

}

/* ==========================================================
   Branding
========================================================== */

.tr-header__branding{

    display:flex;

    align-items:center;

}

/* ==========================================================
   Logo
========================================================== */

.tr-site-logo{

    margin:0;

    line-height:1;

}

.tr-site-logo a{

    display:flex;

    align-items:center;

}

.custom-logo{

    width:auto;

    height:64px;

    display:block;

}

/* ==========================================================
   Site Title
========================================================== */

.tr-site-title{

    margin:0;

    font-size:30px;

    font-weight:800;

}

.tr-site-title a{

    color:var(--tr-primary);

    text-decoration:none;

}

/* ==========================================================
   Hide Contact (for now)
========================================================== */

.tr-header__contact{

    display:none;

}

/* ==========================================================
   Mobile
========================================================== */

@media(max-width:991px){

    .tr-header__wrapper{

        min-height:80px;

    }

    .tr-header__center{

        display:none;

    }

    .custom-logo{

        height:54px;

    }

}
/* ==========================================================
   Navigation
========================================================== */

.tr-primary-nav{

    display:flex;

    align-items:center;

}

.tr-menu{

    display:flex;

    align-items:center;

    gap:34px;

    margin:0;

    padding:0;

    list-style:none;

}

.tr-menu li{

    position:relative;

}

.tr-menu a{

    display:inline-flex;

    align-items:center;

    padding:8px 0;

    font-size:15px;

    font-weight:600;

    color:var(--tr-text);

    text-decoration:none;

    transition:all var(--tr-transition);

    position:relative;

}

/* ==========================================================
   Underline Animation
========================================================== */

.tr-menu a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-6px;

    width:0;

    height:2px;

    background:var(--tr-primary);

    transition:width .3s ease;

}

.tr-menu a:hover{

    color:var(--tr-primary);

}

.tr-menu a:hover::after{

    width:100%;

}

/* ==========================================================
   Current Menu Item
========================================================== */

.current-menu-item>a,
.current_page_item>a,
.current-menu-ancestor>a{

    color:var(--tr-primary);

}

.current-menu-item>a::after,
.current_page_item>a::after,
.current-menu-ancestor>a::after{

    width:100%;

}

/* ==========================================================
   Desktop Dropdown Menu
========================================================== */

.tr-menu .sub-menu{

    position:absolute;

    top:100%;

    left:0;

    min-width:250px;

    background:#ffffff;

    border-radius:14px;

    padding:12px 0;

    margin:0;
padding-top:15px;

    list-style:none;

    box-shadow:0 20px 50px rgba(15,23,42,.12);

    border:1px solid #e5e7eb;

    display:none;

    z-index:999;

}

.tr-menu li:hover > .sub-menu{

    display:block;

}

.tr-menu .sub-menu li{

    width:100%;

}

.tr-menu .sub-menu a{

    display:block;

    padding:12px 22px;

    color:#0f172a;

    font-size:15px;

}

.tr-menu .sub-menu a::after{

    display:none;

}

.tr-menu .sub-menu a:hover{

    background:#f8fafc;

    color:#0A2E73;

}

/* ==========================================================
   Header CTA
========================================================== */

.tr-header__cta{

    margin-left:10px;

}

.tr-header__cta .tr-btn{

    padding:12px 24px;

    border-radius:12px;

    font-size:14px;

    font-weight:700;

}

/* ==========================================================
   Desktop Only
========================================================== */

@media(max-width:991px){

    .tr-header__cta{

        display:none;

    }

}
/* ==========================================================
   Mobile Toggle
========================================================== */

.tr-mobile-toggle{

    display:none;

    width:46px;

    height:46px;

    padding:0;

    border:none;

    background:transparent;

    cursor:pointer;

    align-items:center;

    justify-content:center;

    flex-direction:column;

    gap:5px;

}

.tr-mobile-toggle__line{

    width:24px;

    height:2px;

    background:var(--tr-text);

    border-radius:2px;

    transition:all .3s ease;

}

/* ==========================================================
   Mobile Menu
========================================================== */

.tr-mobile-menu{

    position:fixed;

    top:0;

    right:0;

    width:320px;

    max-width:90%;

    height:100vh;

    background:#ffffff;

    box-shadow:-10px 0 30px rgba(15,23,42,.12);

    z-index:9999;

    overflow-y:auto;

}

.tr-mobile-menu__inner{

    padding:30px;

}

.tr-mobile-menu__close{

    width:42px;

    height:42px;

    border:none;

    background:var(--tr-bg);

    border-radius:50%;

    cursor:pointer;

    font-size:28px;

    margin-bottom:30px;

}

.tr-mobile-menu .tr-menu{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    gap:18px;

}

.tr-mobile-menu .tr-menu a{

    font-size:17px;

    font-weight:600;

}

.tr-mobile-menu__cta{

    margin-top:35px;

}

.tr-mobile-menu__cta .tr-btn{

    width:100%;

}

.tr-mobile-menu__contact{

    margin-top:30px;

}

/* ==========================================================
   Responsive
========================================================== */

@media(max-width:991px){

    .tr-mobile-toggle{

        display:flex;

    }

}

/* ==========================================================
   Services Dropdown Arrow
========================================================== */

.tr-menu > .menu-item-has-children > a::after {
    content: "▼";
    display: inline-block;
    margin-left: 6px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    position: relative;
    top: -1px;
}

/* Arrow on hover */
.tr-menu > .menu-item-has-children:hover > a::after {
    top: 0;
}

/* ==========================================================
   Mobile Menu - Smooth Animation
========================================================== */

@media (max-width: 991px) {

    .tr-mobile-menu {
        display: block;
        visibility: hidden;
        opacity: 0;
        transform: translateX(100%);
        transition:
            transform 0.3s ease,
            opacity 0.25s ease,
            visibility 0s linear 0.3s;
    }

    .tr-mobile-menu:not([hidden]) {
        visibility: visible;
        opacity: 1;
        transform: translateX(0);
        transition:
            transform 0.3s ease,
            opacity 0.25s ease,
            visibility 0s linear 0s;
    }

}
/* ==========================================================
   MOBILE SERVICES ARROW - CLICK FIX
========================================================== */

@media (max-width: 991px) {

    /* Make the complete Services row clickable */
    .tr-mobile-menu .menu-item-has-children > a {
        position: relative;
        display: flex;
        align-items: center;
        width: 100%;
        min-height: 48px;
        padding: 8px 0;
    }

    /*
     * The arrow is only visual.
     * It must NOT block the Services link.
     */
    .tr-mobile-menu .menu-item-has-children > a::after {
        pointer-events: none;
    }

    /* Services submenu */
    .tr-mobile-menu .menu-item-has-children > .sub-menu {
    position: static;
    display: none;
    width: 100%;
    min-width: 0;

    margin: 4px 0 10px;
    padding: 6px 0 6px 16px;

    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 10px;

    box-shadow: none;
}

.tr-mobile-menu .menu-item-has-children.is-open > .sub-menu {
    display: block;
}

.tr-mobile-menu .menu-item-has-children.is-open > .sub-menu {
    display: block;
}

    /* Make each service easy to tap */
    .tr-mobile-menu .menu-item-has-children > .sub-menu a {
        display: flex;
        align-items: center;
        width: 100%;
        min-height: 44px;

        padding: 10px 14px;

        font-size: 15px;
        font-weight: 500;

        border-radius: 7px;
        color: #0f172a;
    }

    .tr-mobile-menu .menu-item-has-children > .sub-menu a::after {
        display: none;
    }

    .tr-mobile-menu .menu-item-has-children > .sub-menu a:hover {
        background: #ffffff;
        color: #0A2E73;
    }

}