/* ================================================================
   WB Header v3 — Premium two-row layout
   Row 1 (white + gradient top accent): Logo ··· Internship | Naveen Avsar | Login
   Row 2 (white): Nav bar with pill active states + 3-column mega menu
   Palette: #060e38 navy · #1a56db blue · #f59e0b gold · #2d3b55 text
   ================================================================ */

/* ── Kill old separators & language switcher ── */
.wb-lang-switch { display: none !important; }
.wb-nav .wb-nav-link + .wb-nav-link::before,
.wb-nav .wb-nav-dropdown + .wb-nav-link::before,
.wb-nav .wb-nav-link + .wb-nav-dropdown > a::before,
.wb-nav .wb-nav-dropdown + .wb-nav-dropdown > a::before,
.wb-nav .wb-nav-naisc::before,
.wb-nav .wb-nav-intern::before,
.wb-nav .wb-nav-link ~ .wb-nav-naisc::before,
.wb-nav .wb-nav-intern ~ .wb-nav-naisc::before,
.wb-nav .wb-nav-link ~ .wb-nav-intern::before,
.wb-nav .wb-nav-dropdown ~ .wb-nav-intern::before {
  content: none !important;
  display: none !important;
}

/* ================================================================
   DESKTOP (≥ 901 px)
   ================================================================ */
@media (min-width: 901px) {

  /* ── Header shell with gradient top border ── */
  .wb-header {
    padding: 0 !important;
    box-shadow: 0 2px 24px rgba(6,14,56,0.10) !important;
    border-top: 3px solid transparent !important;
    background-image:
      linear-gradient(#fff, #fff),
      linear-gradient(90deg, #1a56db 0%, #7c3aed 50%, #0891b2 100%) !important;
    background-origin: border-box !important;
    background-clip: padding-box, border-box !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 900 !important;
  }

  /* ── Row 1: flex container ── */
  .wb-nav-inner {
    display:     flex        !important;
    flex-wrap:   wrap        !important;
    align-items: center      !important;
    gap:         0           !important;
    padding:     0           !important;
    min-height:  66px        !important;
  }

  /* Logo */
  .wb-logo {
    order:       1;
    flex:        0 0 auto;
    padding:     10px 0;
    display:     flex;
    align-items: center;
  }

  /* Internship pill */
  .wb-nav-inner > .wb-nav-intern {
    order:       2;
    margin-left: auto !important;
    margin-right: 0 !important;
    align-self:  center !important;
    flex-shrink: 0;
  }

  /* Naveen Avsar pill */
  .wb-nav-inner > .wb-nav-naisc {
    order:       3;
    margin-left: 8px !important;
    margin-right: 0 !important;
    align-self:  center !important;
    flex-shrink: 0;
  }

  /* Login button */
  .wb-nav-inner > a.wb-btn.wb-btn-primary {
    order:         4;
    margin-left:   16px !important;
    padding:       9px 24px !important;
    font-size:     13.5px !important;
    font-weight:   700 !important;
    border-radius: 8px !important;
    letter-spacing: 0.02em;
    white-space:   nowrap;
    flex-shrink:   0;
    box-shadow:    0 2px 14px rgba(26,86,219,0.28) !important;
    transition:    transform 0.18s, box-shadow 0.18s;
  }
  .wb-nav-inner > a.wb-btn.wb-btn-primary:hover {
    box-shadow: 0 4px 22px rgba(26,86,219,0.42) !important;
    transform:  translateY(-1px);
  }

  /* Hamburger hidden on desktop */
  .wb-hamburger {
    order:   5;
    display: none !important;
  }

  /* ── Row 2: Nav bar (full-width, centred links) ── */
  .wb-nav {
    order:           10          !important;
    flex:            0 0 100%    !important;
    width:           100%        !important;
    display:         flex        !important;
    flex-direction:  row         !important;
    flex-wrap:       nowrap      !important;
    align-items:     center      !important;
    justify-content: center      !important;
    gap:             2px         !important;
    margin:          0           !important;
    padding:         5px 0       !important;
    background:      #fff        !important;
    border-top:      1px solid rgba(26,86,219,0.10) !important;
    border-bottom:   none        !important;
  }

  /* Nav link base */
  .wb-nav > .wb-nav-link,
  .wb-nav > .wb-nav-dropdown > a.wb-nav-link {
    color:           #374151     !important;
    font-size:       13.5px      !important;
    font-weight:     500         !important;
    letter-spacing:  0.01em;
    padding:         7px 15px    !important;
    white-space:     nowrap      !important;
    display:         inline-flex !important;
    align-items:     center      !important;
    gap:             5px         !important;
    text-decoration: none        !important;
    border-radius:   7px         !important;
    border-bottom:   none        !important;
    transition:      color 0.15s, background 0.15s !important;
  }

  /* Hover */
  .wb-nav > .wb-nav-link:hover,
  .wb-nav > .wb-nav-dropdown:hover > a.wb-nav-link {
    color:      #1a56db              !important;
    background: rgba(26,86,219,0.08) !important;
  }

  /* Active — filled pill */
  .wb-nav > .wb-nav-link.wb-active {
    color:       #fff     !important;
    font-weight: 700      !important;
    background:  #1a56db  !important;
    border-bottom: none   !important;
  }

  /* Dropdown arrow */
  .wb-nav .wb-dropdown-arrow {
    font-size:   9px     !important;
    opacity:     0.5;
    color:       inherit !important;
    transition:  transform 0.18s, opacity 0.18s;
  }
  .wb-nav > .wb-nav-link.wb-active .wb-dropdown-arrow {
    opacity: 0.85;
  }
  .wb-nav .wb-nav-dropdown:hover .wb-dropdown-arrow {
    opacity:   0.85;
    transform: rotate(180deg);
  }

  /* Neutralise pill margin overrides inside nav */
  .wb-nav .wb-nav-intern { margin-left: 0 !important; }
  .wb-nav .wb-nav-naisc  { margin-left: 0 !important; }

  /* ── All dropdowns: position from header ── */
  .wb-nav .wb-nav-dropdown { position: static !important; }

  /* ── Shared dropdown panel styles ── */
  .wb-nav .wb-dropdown-menu {
    position:      absolute    !important;
    top:           100%        !important;
    left:          0           !important;
    right:         0           !important;
    width:         100%        !important;
    min-width:     unset       !important;
    border-radius: 0           !important;
    border:        none        !important;
    border-top:    3px solid #1a56db !important;
    box-shadow:    0 12px 40px rgba(6,14,56,0.13) !important;
    background:    #fff        !important;
    padding:       20px calc(7.5vw + 20px) 24px !important;
    display:       flex        !important;
    flex-wrap:     wrap        !important;
    gap:           2px 0       !important;
    /* Animation */
    opacity:       0           !important;
    visibility:    hidden      !important;
    transform:     translateY(-8px) !important;
    transition:    opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease !important;
  }

  /* Hover bridge: keeps dropdown alive as cursor travels down */
  .wb-nav .wb-dropdown-menu::before {
    content:  '';
    display:  block;
    position: absolute;
    top:      -8px;
    left:     0;
    right:    0;
    height:   8px;
  }

  .wb-nav .wb-nav-dropdown:hover .wb-dropdown-menu {
    opacity:    1           !important;
    visibility: visible     !important;
    transform:  translateY(0) !important;
  }

  /* ── Regular dropdown items (About, Student Zone, Student Review) ── */
  .wb-nav .wb-dropdown-menu:not(.wb-courses-mega-menu) {
    padding: 16px calc(7.5vw + 20px) 20px !important;
  }

  .wb-nav .wb-dropdown-menu:not(.wb-courses-mega-menu) a {
    flex:          0 0 auto   !important;
    width:         230px      !important;
    padding:       9px 12px 9px 12px !important;
    font-size:     13.5px     !important;
    font-weight:   500        !important;
    color:         #2d3b55    !important;
    border-radius: 6px        !important;
    white-space:   nowrap     !important;
    border-bottom: none       !important;
    box-shadow:    none       !important;
    display:       flex       !important;
    align-items:   center     !important;
    gap:           9px        !important;
    transition:    background 0.15s, color 0.15s, padding-left 0.15s !important;
  }
  .wb-nav .wb-dropdown-menu:not(.wb-courses-mega-menu) a::before {
    content:       '';
    display:       inline-block;
    width:         5px;
    height:        5px;
    border-radius: 50%;
    background:    #cbd5e1;
    flex-shrink:   0;
    transition:    background 0.15s;
  }
  .wb-nav .wb-dropdown-menu:not(.wb-courses-mega-menu) a:hover {
    background:   #eff6ff !important;
    color:        #1a56db !important;
    padding-left: 16px !important;
  }
  .wb-nav .wb-dropdown-menu:not(.wb-courses-mega-menu) a:hover::before {
    background: #1a56db;
  }

  /* ================================================================
     COURSES MEGA MENU — 3-column desktop grid
     Use .wb-nav .wb-courses-mega-menu to beat the .wb-nav .wb-dropdown-menu
     flex-wrap:wrap !important declared above.
     ================================================================ */
  .wb-nav .wb-courses-mega-menu {
    display:     flex          !important;
    flex-wrap:   nowrap        !important;
    align-items: flex-start    !important;
    gap:         0             !important;
    padding:     24px calc(7.5vw + 20px) 28px !important;
  }

  /* Column — equal thirds, never wrap */
  .wb-nav .wb-courses-mega-menu .wb-mega-col {
    flex:            0 0 calc(33.333% - 24px);
    min-width:       0;
    display:         flex;
    flex-direction:  column;
    gap:             2px;
    padding-right:   36px;
    border-right:    1px solid #eef2fb;
    margin-right:    36px;
  }
  .wb-nav .wb-courses-mega-menu .wb-mega-col:last-child {
    border-right: none;
    margin-right: 0;
    padding-right: 0;
    flex:          0 0 33.333%;
  }

  /* Column header */
  .wb-mega-col-head {
    display:         flex;
    align-items:     center;
    gap:             8px;
    padding:         0 0 10px;
    margin-bottom:   6px;
    border-bottom:   2px solid #eef2fb;
    font-size:       10.5px;
    font-weight:     800;
    color:           #1a56db;
    text-transform:  uppercase;
    letter-spacing:  0.09em;
    cursor:          default;
    user-select:     none;
  }
  .wb-mega-col-icon {
    font-size:   15px;
    line-height: 1;
    opacity:     0.85;
  }
  /* Hide mobile chevron on desktop */
  .wb-mega-col-head::after { display: none !important; }

  /* Column items wrapper — always visible on desktop */
  .wb-mega-col-items {
    display:    flex;
    flex-direction: column;
    gap:        1px;
    max-height: none !important;
    overflow:   visible !important;
  }

  /* Column links */
  .wb-mega-col a {
    flex:          unset    !important;
    width:         auto     !important;
    padding:       8px 10px !important;
    font-size:     13px     !important;
    font-weight:   500      !important;
    color:         #374151  !important;
    border-radius: 6px      !important;
    white-space:   nowrap   !important;
    border-bottom: none     !important;
    box-shadow:    none     !important;
    text-decoration: none;
    display:       flex     !important;
    align-items:   center   !important;
    gap:           9px      !important;
    background:    transparent !important;
    min-height:    unset    !important;
    transition:    background 0.15s, color 0.15s !important;
  }
  .wb-mega-col a::before {
    content:       '';
    display:       inline-block;
    width:         4px;
    height:        4px;
    border-radius: 50%;
    background:    #cbd5e1;
    flex-shrink:   0;
    transition:    background 0.15s, transform 0.15s;
  }
  .wb-mega-col a:hover {
    background: #eff6ff !important;
    color:      #1a56db !important;
  }
  .wb-mega-col a:hover::before {
    background:  #1a56db;
    transform:   scale(1.6);
  }

  /* Badge counts next to NASSCOM items */
  .wb-dd-count {
    display:       inline-block;
    font-size:     10px;
    font-weight:   700;
    color:         #1a56db;
    background:    rgba(26,86,219,0.10);
    border-radius: 20px;
    padding:       1px 7px;
    margin-left:   4px;
  }

  /* Scroll offset: prevents sticky header covering anchors */
  html { scroll-padding-top: 130px; }
}

/* ================================================================
   MOBILE (≤ 900 px)
   ================================================================ */
@media (max-width: 900px) {

  /* Row 1 */
  .wb-nav-inner {
    display:     flex   !important;
    flex-wrap:   nowrap !important;
    align-items: center !important;
    padding:     9px 0  !important;
    gap:         0      !important;
  }
  .wb-logo {
    flex:  0 0 auto;
    order: 1;
  }

  /* Hide pill text, dots, NJF logo on mobile — show only emoji */
  .wb-nb-text,
  .naisc-njf-mini,
  .intern-live-dot,
  .naisc-live-dot { display: none !important; }

  /* Internship pill — compact */
  .wb-nav-inner > .wb-nav-intern {
    order:         2;
    margin-left:   auto    !important;
    margin-right:  6px     !important;
    padding:       7px 10px !important;
    font-size:     15px    !important;
    border-radius: 7px     !important;
    flex-shrink:   0;
  }

  /* Naveen Avsar pill — compact */
  .wb-nav-inner > .wb-nav-naisc {
    order:         3;
    margin-left:   0       !important;
    margin-right:  6px     !important;
    padding:       7px 10px !important;
    font-size:     15px    !important;
    border-radius: 7px     !important;
    flex-shrink:   0;
  }

  /* Login button */
  .wb-nav-inner > a.wb-btn.wb-btn-primary {
    order:         4;
    margin-left:   0;
    flex-shrink:   0;
    padding:       8px 14px !important;
    font-size:     13px    !important;
    border-radius: 7px     !important;
  }

  /* Hamburger */
  .wb-hamburger {
    order:       5;
    flex-shrink: 0;
    margin-left: 8px;
  }

  /* Mobile nav drawer */
  .wb-nav {
    border-top: 3px solid #1a56db !important;
    background: #fff !important;
  }

  .wb-nav > .wb-nav-link,
  .wb-nav > .wb-nav-dropdown > a.wb-nav-link {
    color:       #1a2942   !important;
    font-size:   14px      !important;
    font-weight: 500       !important;
    padding:     13px 22px !important;
    border-radius: 0       !important;
    background:  transparent !important;
  }

  .wb-nav > .wb-nav-link.wb-active {
    color:        #1a56db              !important;
    font-weight:  700                  !important;
    background:   rgba(26,86,219,0.06) !important;
    border-left:  4px solid #1a56db   !important;
    padding-left: 18px                 !important;
  }

  /* ── Mega-col accordion on mobile ── */
  .wb-mega-col {
    width:        100%;
    border-right: none;
    margin-right: 0;
    padding-right: 0;
  }

  .wb-mega-col-head {
    display:         flex;
    align-items:     center;
    gap:             8px;
    padding:         12px 22px 12px 40px;
    font-size:       12px;
    font-weight:     700;
    color:           #1a56db;
    background:      #f5f8ff;
    border-bottom:   1px solid #e8eef8;
    text-transform:  uppercase;
    letter-spacing:  0.07em;
    cursor:          pointer;
    user-select:     none;
  }
  .wb-mega-col-head::after {
    content:    '›';
    margin-left: auto;
    font-size:  18px;
    color:      #94a3b8;
    transition: transform 0.25s, color 0.2s;
  }
  .wb-mega-col.open .wb-mega-col-head {
    color: #0f1c3f;
    background: #eef3ff;
  }
  .wb-mega-col.open .wb-mega-col-head::after {
    transform: rotate(90deg);
    color:     #1a56db;
  }

  /* Collapsed by default on mobile */
  .wb-mega-col-items {
    max-height:  0;
    overflow:    hidden;
    transition:  max-height 0.3s ease;
  }
  .wb-mega-col.open .wb-mega-col-items {
    max-height: 500px;
  }

  /* Mobile mega-col links */
  .wb-mega-col a {
    display:       block   !important;
    width:         100%    !important;
    padding:       11px 22px 11px 52px !important;
    background:    #f8f9ff !important;
    border-bottom: 1px solid #eff0f6 !important;
    color:         #5a6b7f !important;
    font-size:     13px    !important;
    font-weight:   500     !important;
    text-align:    left    !important;
    min-height:    44px    !important;
    box-sizing:    border-box !important;
    border-radius: 0       !important;
    white-space:   normal  !important;
    gap:           0       !important;
    transition:    background 0.2s, color 0.2s !important;
  }
  .wb-mega-col a::before { display: none !important; }
  .wb-mega-col a:last-child { border-bottom: none !important; }
  .wb-mega-col a:hover {
    background: #eef4ff !important;
    color:      #1a56db !important;
  }

  /* dd-count on mobile */
  .wb-dd-count {
    display:       inline-block;
    font-size:     10px;
    font-weight:   700;
    color:         #1a56db;
    background:    rgba(26,86,219,0.10);
    border-radius: 20px;
    padding:       1px 6px;
    margin-left:   4px;
  }
}