/**
 * WB Mobile Menu — Polished drawer navigation
 * Consistent across ALL pages. Replaces old patchwork rules.
 */

/* ============================================================================
   1. HAMBURGER BUTTON
   ============================================================================ */
@media (max-width: 900px) {
  .wb-hamburger {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 42px;
    height: 42px;
    padding: 8px;
    border: none;
    background: transparent;
    cursor: pointer;
    z-index: 1001;
    border-radius: 8px;
    transition: background 0.2s;
  }
  .wb-hamburger:hover { background: rgba(26,86,219,0.08); }

  .wb-hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: #1a56db;
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.2s;
    transform-origin: center;
  }

  /* X when open */
  .wb-hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
  .wb-hamburger.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
  .wb-hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
}

/* ============================================================================
   2. MOBILE NAV DRAWER
   ============================================================================ */
@media (max-width: 900px) {
  .wb-nav {
    position:   fixed           !important;
    top:        0               !important;
    left:       -100%           !important;
    width:      82%             !important;
    max-width:  340px           !important;
    height:     100vh           !important;
    background: #fff            !important;
    flex-direction: column      !important;
    z-index:    1000            !important;
    transition: left 0.32s cubic-bezier(0.4,0,0.2,1) !important;
    overflow-y: auto            !important;
    -webkit-overflow-scrolling: touch !important;
    padding:    0               !important;
    margin:     0               !important;
    border:     none            !important;
    box-shadow: 4px 0 32px rgba(6,14,56,0.18) !important;
    flex-wrap:  nowrap          !important;
    max-height: none            !important;
    border-right: 1px solid #e8eef8 !important;
  }

  /* Drawer header bar */
  .wb-nav::before {
    content:       'Menu';
    display:       block;
    padding:       18px 20px 16px;
    font-size:     11px;
    font-weight:   800;
    color:         #1a56db;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-bottom: 2px solid #eef2fb;
    background:    #f8faff;
    flex-shrink:   0;
  }

  /* Show when active */
  .wb-nav.active {
    left: 0 !important;
    display: flex !important;
  }

  /* Dark overlay */
  body.menu-open::after {
    content:  '';
    position: fixed;
    inset:    0;
    background: rgba(6,14,56,0.45);
    z-index:  999;
    animation: wbFadeIn 0.28s ease;
  }
  body.menu-open { overflow: hidden; }

  @keyframes wbFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
}

/* ============================================================================
   3. NAV ITEMS — Consistent for ALL link types
   ============================================================================ */
@media (max-width: 900px) {

  /* Both direct links and dropdown triggers — same base style */
  .wb-nav > .wb-nav-link,
  .wb-nav > .wb-nav-dropdown > a.wb-nav-link {
    display:         flex         !important;
    align-items:     center       !important;
    justify-content: space-between !important;
    width:           100%         !important;
    min-height:      52px         !important;
    padding:         0 20px       !important;
    font-size:       15px         !important;
    font-weight:     500          !important;
    color:           #1e2d5a      !important;
    border-bottom:   1px solid #f0f4fb !important;
    background:      #fff         !important;
    text-decoration: none         !important;
    border-radius:   0            !important;
    border-left:     3px solid transparent !important;
    transition:      background 0.15s, color 0.15s, border-color 0.15s !important;
    box-sizing:      border-box   !important;
  }

  /* Hover */
  .wb-nav > .wb-nav-link:hover,
  .wb-nav > .wb-nav-dropdown > a.wb-nav-link:hover {
    background: #f5f8ff !important;
    color:      #1a56db !important;
  }

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

  /* Hide HTML ▼ arrow text — we use CSS chevron below */
  .wb-nav .wb-dropdown-arrow {
    display: none !important;
  }

  /* Chevron › on right for dropdown items */
  .wb-nav > .wb-nav-dropdown > a.wb-nav-link::after {
    content:     '›';
    font-size:   20px;
    color:       #94a3b8;
    line-height: 1;
    margin-left: auto;
    flex-shrink: 0;
    transition:  transform 0.25s, color 0.2s;
  }
  .wb-nav > .wb-nav-dropdown.active > a.wb-nav-link {
    color:      #1a56db !important;
    background: #eef3ff !important;
    border-left: 3px solid #1a56db !important;
  }
  .wb-nav > .wb-nav-dropdown.active > a.wb-nav-link::after {
    transform: rotate(90deg);
    color:     #1a56db;
  }
}

/* ============================================================================
   4. MOBILE DROPDOWN ACCORDION
   ============================================================================ */
@media (max-width: 900px) {

  .wb-nav-dropdown { width: 100% !important; position: relative !important; }

  /* Dropdown menu panel */
  .wb-dropdown-menu {
    position:   static      !important;
    max-height: 0           !important;
    overflow:   hidden      !important;
    background: #f8faff     !important;
    transition: max-height 0.3s ease !important;
    border:     none        !important;
    border-top: none        !important;
    box-shadow: none        !important;
    padding:    0           !important;
    min-width:  100%        !important;
    opacity:    1           !important;
    visibility: visible     !important;
    transform:  none        !important;
  }

  .wb-nav-dropdown.active .wb-dropdown-menu {
    max-height: 600px !important;
  }

  /* Regular dropdown links */
  .wb-dropdown-menu:not(.wb-courses-mega-menu) a {
    display:       flex    !important;
    align-items:   center  !important;
    width:         100%    !important;
    min-height:    46px    !important;
    padding:       0 20px 0 36px !important;
    background:    #f8faff !important;
    border-bottom: 1px solid #edf1fb !important;
    color:         #3d5280 !important;
    font-size:     13.5px  !important;
    font-weight:   500     !important;
    text-decoration: none  !important;
    box-sizing:    border-box !important;
    transition:    background 0.15s, color 0.15s !important;
    flex:          unset   !important;
    border-radius: 0       !important;
    white-space:   normal  !important;
    gap:           0       !important;
    border-left:   none    !important;
  }
  .wb-dropdown-menu:not(.wb-courses-mega-menu) a::before { display: none !important; }
  .wb-dropdown-menu:not(.wb-courses-mega-menu) a:last-child { border-bottom: none !important; }
  .wb-dropdown-menu:not(.wb-courses-mega-menu) a:hover {
    background: #eaefff !important;
    color:      #1a56db !important;
  }

  /* ── Mega menu on mobile ── */
  .wb-courses-mega-menu {
    display:    flex          !important;
    flex-direction: column    !important;
    padding:    0             !important;
  }

  /* Each column collapses to an accordion header */
  .wb-mega-col {
    width:        100%   !important;
    border-right: none   !important;
    margin-right: 0      !important;
    padding-right: 0     !important;
    flex:         unset  !important;
  }

  .wb-mega-col-head {
    display:        flex          !important;
    align-items:    center        !important;
    gap:            8px           !important;
    padding:        13px 20px 13px 36px !important;
    font-size:      11px          !important;
    font-weight:    800           !important;
    color:          #1a56db       !important;
    background:     #eef3ff       !important;
    border-bottom:  1px solid #dce8ff !important;
    text-transform: uppercase     !important;
    letter-spacing: 0.08em        !important;
    cursor:         pointer       !important;
    user-select:    none          !important;
    min-height:     44px          !important;
  }
  .wb-mega-col-head::after {
    content:     '›'     !important;
    margin-left: auto    !important;
    font-size:   18px    !important;
    color:       #94a3b8 !important;
    display:     block   !important;
    transition:  transform 0.25s, color 0.2s;
  }
  .wb-mega-col.open .wb-mega-col-head {
    background: #dbeafe !important;
    color:      #1e40af !important;
  }
  .wb-mega-col.open .wb-mega-col-head::after {
    transform: rotate(90deg);
    color:     #1a56db !important;
  }

  /* Items collapsed by default */
  .wb-mega-col-items {
    max-height: 0       !important;
    overflow:   hidden  !important;
    transition: max-height 0.3s ease !important;
  }
  .wb-mega-col.open .wb-mega-col-items {
    max-height: 500px !important;
  }

  /* Mega col links */
  .wb-mega-col a {
    display:       block    !important;
    width:         100%     !important;
    min-height:    44px     !important;
    padding:       0 20px 0 52px !important;
    line-height:   44px     !important;
    background:    #f8faff  !important;
    border-bottom: 1px solid #edf1fb !important;
    color:         #3d5280  !important;
    font-size:     13px     !important;
    font-weight:   500      !important;
    text-align:    left     !important;
    text-decoration: none   !important;
    box-sizing:    border-box !important;
    border-radius: 0        !important;
    white-space:   normal   !important;
    transition:    background 0.15s, color 0.15s !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: #eaefff !important; color: #1a56db !important; }

  /* Count badges */
  .wb-dd-count {
    display:       inline-block;
    font-size:     10px;
    font-weight:   700;
    color:         #1a56db;
    background:    rgba(26,86,219,0.12);
    border-radius: 20px;
    padding:       1px 7px;
    margin-left:   6px;
    vertical-align: middle;
  }
}

/* ============================================================================
   5. MOBILE ACTIONS (Internship, Naveen Avsar, Login) at bottom of drawer
   ============================================================================ */
@media (max-width: 900px) {
  /* Hide pills from the header row on mobile (they go into the drawer) */
  .wb-nav-inner > .wb-nav-intern,
  .wb-nav-inner > .wb-nav-naisc,
  .wb-nav-inner > a.wb-btn.wb-btn-primary {
    display: none !important;
  }

  /* Mobile actions block injected by JS at bottom of nav */
  .wb-nav .wb-nav-mobile-actions {
    display:        flex         !important;
    flex-direction: column       !important;
    gap:            10px         !important;
    width:          100%         !important;
    padding:        16px 16px 24px !important;
    border-top:     2px solid #eef2fb !important;
    margin-top:     auto         !important;
    background:     #f8faff      !important;
  }

  /* Each cloned action button */
  .wb-nav .wb-nav-mobile-actions .wb-nav-intern,
  .wb-nav .wb-nav-mobile-actions .wb-nav-naisc,
  .wb-nav .wb-nav-mobile-actions .wb-btn.wb-btn-primary {
    display:         flex          !important;
    justify-content: center        !important;
    align-items:     center        !important;
    width:           100%          !important;
    min-height:      48px          !important;
    padding:         12px 18px     !important;
    font-size:       14px          !important;
    font-weight:     700           !important;
    border-radius:   10px          !important;
    text-decoration: none          !important;
    text-align:      center        !important;
    transition:      transform 0.2s, box-shadow 0.2s !important;
    margin:          0             !important;
  }

  .wb-nav .wb-nav-mobile-actions .wb-nav-intern {
    background: linear-gradient(90deg,#1a56db,#3b82f6) !important;
    color: #fff !important;
  }
  .wb-nav .wb-nav-mobile-actions .wb-nav-naisc {
    background: linear-gradient(90deg,#f59e0b,#fbbf24) !important;
    color: #111 !important;
  }
  .wb-nav .wb-nav-mobile-actions .wb-btn.wb-btn-primary {
    background:    #060e38 !important;
    color:         #fff    !important;
    border:        none    !important;
    letter-spacing: 0.02em !important;
  }

  /* Show nb-text (label) inside drawer */
  .wb-nav .wb-nav-intern .wb-nb-text,
  .wb-nav .wb-nav-naisc .wb-nb-text,
  .wb-nav .wb-nav-intern .intern-live-dot,
  .wb-nav .wb-nav-naisc .naisc-live-dot,
  .wb-nav .naisc-njf-mini {
    display: inline !important;
  }

  /* Hide pill labels in the header row only */
  .wb-nav-inner .wb-nb-text,
  .wb-nav-inner .naisc-njf-mini,
  .wb-nav-inner .intern-live-dot,
  .wb-nav-inner .naisc-live-dot {
    display: none !important;
  }
}

/* ============================================================================
   6. SCROLL & TOUCH
   ============================================================================ */
@media (max-width: 900px) {
  .wb-nav { scroll-behavior: smooth; -webkit-overflow-scrolling: touch; }
  .wb-nav a, .wb-nav button { min-height: 44px; }

  /* Fix nav position for very small screens */
  @media (max-width: 380px) {
    .wb-nav { width: 88% !important; }
  }
}