/* ══════════════════════════════════════════
   NAV RESPONSIVE OVERRIDES
   Fixes mega-menu overflow and mobile nav

   Loaded AFTER compiled-main.css to override
   scattered legacy responsive rules inherited
   from the Angular conversion.

   Breakpoints:
     Desktop  ≥1200px  — horizontal nav, 5-col mega-menu
     Tablet   768–1199px — hamburger, stacked single-col
     Mobile   <768px   — full-width, no text clipping
   ══════════════════════════════════════════ */

/* ─── DESKTOP (≥1200px) ─────────────────── */
@media (min-width: 1200px) {
    /* Make the .container inside the navbar the positioning context */
    #sub-nav-wrapper .navbar > .container {
        position: relative;
    }

    /* Make the mega dropdown li static so mega-menu can span full container */
    #sub-nav-wrapper .navbar-nav .dropdown--mega {
        position: static !important;
    }

    /* Mega-menu: break out of .container to span viewport width for 5 pillars */
    #sub-nav-wrapper .navbar-nav .dropdown--mega > .dropdown-menu.mega-menu {
        position: absolute !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        width: calc(100vw - 30px);
        max-width: 1440px;
        margin-left: 0;
        margin-right: 0;
    }

    /* Show mega-menu on hover or .open (Bootstrap 3 toggle) */
    #sub-nav-wrapper .navbar-nav .dropdown--mega:hover > .dropdown-menu.mega-menu,
    #sub-nav-wrapper .navbar-nav .dropdown--mega.open > .dropdown-menu.mega-menu {
        display: block;
        opacity: 1;
        visibility: visible;
    }

    /* 5-column grid layout for mega-menu (5 pillars) */
    .mega-menu__grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
    }

    /* Centered single-column dropdowns (Industries, About) */
    #sub-nav-wrapper .navbar-nav .dropdown--centered > .dropdown-menu {
        left: 50%;
        transform: translateX(-50%);
        right: auto;
    }
}

/* ─── TABLET (768px–1199px) ─────────────── */
@media (max-width: 1199px) {
    /* Scrollable collapsed nav panel */
    .navbar-collapse {
        max-height: 80vh;
        overflow-y: auto;
    }

    /* Mega-menu: remove fixed positioning, flow inside nav */
    #sub-nav-wrapper .navbar-nav .dropdown--mega > .dropdown-menu.mega-menu {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
        box-shadow: none;
        border-radius: 0;
    }

    /* Stack mega-menu columns vertically */
    .mega-menu__grid {
        display: block !important;
        grid-template-columns: none;
    }

    .mega-menu__column {
        border-right: none;
        border-bottom: 1px solid #e8eef3;
        padding: 12px 0;
    }

    /* Regular dropdowns (Industries, About): also in-flow */
    #sub-nav-wrapper .navbar-nav .dropdown--centered > .dropdown-menu {
        position: static !important;
        transform: none !important;
        width: 100%;
        box-shadow: none;
    }
}

/* ─── MOBILE (<768px) ───────────────────── */
@media (max-width: 767px) {
    /* Prevent text clipping in dropdown items */
    #sub-nav-wrapper .navbar-nav .dropdown-menu > li > a {
        white-space: normal;
        padding-left: 20px;
    }

    /* Mega-menu link items */
    .mega-menu__links li a {
        padding: 10px 20px;
        white-space: normal;
    }

    /* Mega-menu pillar headers */
    .mega-menu__pillar-header {
        padding: 12px 16px;
    }

    /* Full-width nav, left-aligned */
    #sub-nav-wrapper .navbar-nav {
        width: 100%;
    }

    #sub-nav-wrapper .navbar-nav > li > a {
        text-align: left;
    }
}