/* =========================================================
   Desktop header refresh (layouts/main-menu-data.blade.php), every page.
   - top bar: light strip, quiet links with an orange underline that grows on hover,
     the current page marked
   - brand bar: clean white (replaces the dotted background image) with a soft shadow
   - Services / CN Insight / Corporate Training: rounded "tab" buttons, each with its own
     icon, lift + orange on hover, the current section highlighted
   Desktop only (≥ 992px); phones use the separate mobile menu. Loaded after menu.css,
   menubar.css and style.css, so it wins without touching them.
   ========================================================= */
@media (min-width: 992px) {

    /* ---------- top bar ---------- */
    .site-header .top-menu {
        background: #f3f6fa;
        border-bottom: 1px solid #e3e9f1;
    }
    .site-header .top-menu-box { display: flex; justify-content: flex-end; align-items: center; gap: 4px; }
    .site-header .top-menu-box > li > a {
        position: relative;
        padding: 9px 14px;
        font-size: 14px;
        font-weight: 500;
        letter-spacing: .01em;
        color: #3d4b5c;
        transition: color .2s ease;
    }
    .site-header .top-menu-box > li > a::after {     /* underline grows from the centre */
        content: "";
        position: absolute;
        left: 14px; right: 14px; bottom: 4px;
        height: 2px;
        border-radius: 2px;
        background: #f07f22;
        transform: scaleX(0);
        transition: transform .25s ease;
    }
    .site-header .top-menu-box > li > a:hover,
    .site-header .top-menu-box > li > a[aria-current] { color: #15416e; }
    .site-header .top-menu-box > li > a:hover::after,
    .site-header .top-menu-box > li > a[aria-current]::after { transform: scaleX(1); }
    .site-header .top-menu-box > li > a[aria-current] { font-weight: 600; }
    .site-header .top-menu-sub { border-top-color: #f07f22; }   /* dropdown accent matches */
    .site-header .top-menu-box .top-menu-sub a { font-size: 15px; }

    /* ---------- brand bar ---------- */
    .site-header .header-wrap {
        background: #fff !important;               /* beats the inline dotted image */
        box-shadow: 0 6px 18px -10px rgba(15, 41, 74, .35);
        border-bottom: 1px solid #e9eef4;
    }

    /* ---------- tab buttons ---------- */
    .site-header .site-main-navigation > ul.navbar-nav {
        display: flex !important;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        gap: 12px;
        margin: 0;
        border: 0;
        background: transparent;
    }
    .site-header .site-main-navigation > ul > li.navbarnew {
        height: auto;
        margin: 0 !important;
        border: 0;
        border-radius: 0;
        background: transparent;   /* menutoggle.css paints the li navy */
        float: none;
    }
    .site-header .site-main-navigation > ul > li > a.nav-link {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 7px 18px 7px 7px !important;   /* menutoggle.css: .nav-link 11px 20px !important */
        height: auto;
        border: 1px solid #15416e;
        border-radius: 999px;
        background: #15416e;
        color: #fff;
        font-size: 15px;
        font-weight: 600;
        letter-spacing: .01em;
        line-height: 1.2;
        white-space: nowrap;
        box-shadow: 0 6px 16px -8px rgba(21, 65, 110, .6);
        transition: background-color .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
    }
    .site-header .site-main-navigation > ul > li > a.nav-link::after { content: none; }   /* old chevron */
    .site-header .site-main-navigation > ul > li > a.nav-link .fa {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .16);
        font-size: 14px;
        transition: background-color .25s ease, transform .3s ease;
    }
    .site-header .site-main-navigation > ul > li > a.nav-link:hover,
    .site-header .site-main-navigation > ul > li > a.nav-link:focus-visible {
        background: #f07f22;
        border-color: #f07f22;
        color: #fff;
        transform: translateY(-2px);
        box-shadow: 0 10px 20px -8px rgba(240, 127, 34, .65);
    }
    .site-header .site-main-navigation > ul > li > a.nav-link:hover .fa { transform: rotate(-8deg) scale(1.08); }

    /* the section you are in: outlined, so the other tabs read as "go to" */
    .site-header .site-main-navigation > ul > li > a.nav-link.is-current {
        background: #fff;
        color: #15416e;
        box-shadow: none;
    }
    .site-header .site-main-navigation > ul > li > a.nav-link.is-current .fa { background: #15416e; color: #fff; }
    .site-header .site-main-navigation > ul > li > a.nav-link.is-current:hover { background: #f07f22; border-color: #f07f22; color: #fff; }
    .site-header .site-main-navigation > ul > li > a.nav-link.is-current:hover .fa { background: rgba(255, 255, 255, .16); }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .site-header .top-menu-box > li > a { padding: 9px 10px; font-size: 13.5px; }
    .site-header .top-menu-box > li > a::after { left: 10px; right: 10px; }
    .site-header .site-main-navigation > ul.navbar-nav { gap: 8px; }
    .site-header .site-main-navigation > ul > li > a.nav-link { padding: 6px 14px 6px 6px !important; font-size: 14px; gap: 8px; }
    .site-header .site-main-navigation > ul > li > a.nav-link .fa { width: 26px; height: 26px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
    .site-header .site-main-navigation > ul > li > a.nav-link,
    .site-header .site-main-navigation > ul > li > a.nav-link .fa { transition: none; }
    .site-header .site-main-navigation > ul > li > a.nav-link:hover { transform: none; }
}

/* ---- tweaks: About Us dropdown centred under its item and narrower; tab buttons rectangular ---- */
@media (min-width: 992px) {
    .site-header .top-menu-box .top-menu-sub {
        left: 50%;
        min-width: 0;
        width: 170px;
        padding: 6px 14px;
        border-radius: 0 0 10px 10px;
        transform: translate(-50%, 8px);
    }
    .site-header .top-menu-drop:hover > .top-menu-sub,
    .site-header .top-menu-drop:focus-within > .top-menu-sub { transform: translate(-50%, 0); }
    .site-header .top-menu-box .top-menu-sub a { padding: 10px 2px; font-size: 14.5px; }
    .site-header .top-menu-box .top-menu-sub a:hover { padding-left: 8px; }

    .site-header .site-main-navigation > ul > li > a.nav-link { border-radius: 6px; padding: 7px 16px 7px 7px !important; }
    .site-header .site-main-navigation > ul > li > a.nav-link .fa { border-radius: 4px; }
}

/* ---- tab icon: the original grid glyph (fa-th), refined — no box, a touch smaller, softened ---- */
@media (min-width: 992px) {
    .site-header .site-main-navigation > ul > li > a.nav-link { gap: 9px; padding: 9px 18px 9px 16px !important; }
    .site-header .site-main-navigation > ul > li > a.nav-link .fa,
    .site-header .site-main-navigation > ul > li > a.nav-link.is-current .fa,
    .site-header .site-main-navigation > ul > li > a.nav-link.is-current:hover .fa {
        width: auto; height: auto; border-radius: 0; background: none;
        font-size: 13px; opacity: .85; color: inherit; padding: 0;   /* menubar.css gives .fa-th 10px right padding */
    }
    .site-header .site-main-navigation > ul > li > a.nav-link:hover .fa { transform: scale(1.12); opacity: 1; }
    .site-header .site-main-navigation > ul > li > a.nav-link.is-current .fa { color: #f07f22; opacity: 1; }
    .site-header .site-main-navigation > ul > li > a.nav-link.is-current:hover .fa { color: #fff; }
}
@media (min-width: 992px) and (max-width: 1199px) {
    .site-header .site-main-navigation > ul > li > a.nav-link { padding: 8px 14px 8px 12px !important; }
}