/* ============================================================
   U3S ENGITECH — NAVIGATION STYLESHEET
   Top bar, main header, mega dropdowns, mobile menu
   ============================================================ */

/* ---------- TOP INFO BAR ---------- */
.top-bar {
  background: var(--color-primary-dark);
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--text-small);
  height: var(--topbar-height);
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1001;
  transition: height 0.3s ease, opacity 0.3s ease;
}
.top-bar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.top-bar-left, .top-bar-right { display: flex; align-items: center; gap: var(--space-md); }
.top-bar-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; }
.top-bar-item svg { width: 14px; height: 14px; color: var(--color-accent); }
.top-bar a { color: rgba(255, 255, 255, 0.85); transition: color 0.2s ease; }
.top-bar a:hover { color: var(--color-accent); }

.top-bar.hidden {
  height: 0;
  overflow: hidden;
  opacity: 0;
  border: none;
}

/* ---------- MAIN HEADER ---------- */
.main-header {
  background: var(--color-white);
  height: var(--header-height);
  display: flex;
  align-items: center;
  position: fixed;
  top: var(--topbar-height); left: 0; right: 0;
  z-index: 1000;
  transition: height 0.3s ease, top 0.3s ease, box-shadow 0.3s ease;
  border-bottom: 1px solid var(--color-border);
}
.main-header.scrolled {
  height: var(--header-height-scrolled);
  top: 0;
  box-shadow: var(--shadow-md);
}
.main-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
}

/* ---------- LOGO ---------- */
.brand-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
}
.brand-logo-mark {
  width: 44px; height: 44px;
  background: var(--color-primary);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.4rem;
  letter-spacing: -0.02em;
  position: relative;
  flex-shrink: 0;
  transition: width 0.3s ease, height 0.3s ease;
}
.brand-logo-mark::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 4px;
  background: var(--color-accent);
}
.main-header.scrolled .brand-logo-mark { width: 38px; height: 38px; font-size: 1.2rem; }
.brand-logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.brand-logo-name {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.25rem;
  color: var(--color-primary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.brand-logo-name .accent { color: var(--color-accent); }
.brand-logo-tag {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.65rem;
  color: var(--color-mid);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-top: 2px;
}

/* ---------- PRIMARY NAV ---------- */
.primary-nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.nav-item { position: relative; }

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 1.25rem 1rem;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-dark);
  border-bottom: 3px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
  white-space: nowrap;
}
.nav-link:hover, .nav-link.active {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}
.nav-link svg { width: 12px; height: 12px; transition: transform 0.3s ease; }
.nav-item:hover > .nav-link svg { transform: rotate(180deg); }

.nav-cta {
  margin-left: var(--space-sm);
  padding: 0.85rem 1.4rem;
  background: var(--color-accent);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  transition: background 0.3s ease;
  white-space: nowrap;
  border: 2px solid var(--color-accent);
}
.nav-cta:hover { background: var(--color-accent-dark); border-color: var(--color-accent-dark); color: var(--color-white); }

/* ---------- MEGA DROPDOWN ---------- */
.mega-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
  min-width: 640px;
  background: var(--color-primary);
  border-top: 4px solid var(--color-accent);
  padding: var(--space-md);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
  box-shadow: var(--shadow-lg);
  z-index: 999;
}
.nav-item:hover .mega-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.mega-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}
.mega-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }

.mega-col-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-accent);
  margin-bottom: 0.85rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.mega-link-list { list-style: none; padding: 0; }
.mega-link-list li { margin-bottom: 0.35rem; }
.mega-link-list a {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.85rem;
  display: block;
  padding: 0.5rem 0.75rem;
  margin: 0 -0.75rem;
  transition: all 0.2s ease;
  position: relative;
  border-left: 2px solid transparent;
}
.mega-link-list a:hover {
  color: var(--color-white);
  background: rgba(255, 255, 255, 0.05);
  border-left-color: var(--color-accent);
  padding-left: 1rem;
}
.mega-link-list .mega-link-strong {
  color: var(--color-white);
  font-weight: 600;
}
.mega-link-list .mega-link-desc {
  display: block;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 400;
  margin-top: 2px;
  letter-spacing: 0.02em;
  text-transform: none;
}

.mega-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: var(--space-md);
  padding: 0.6rem 1rem;
  background: var(--color-accent);
  color: var(--color-white);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  transition: background 0.3s ease;
}
.mega-cta:hover { background: var(--color-accent-dark); color: var(--color-white); }

/* Single column dropdown for simpler menus */
.simple-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  background: var(--color-primary);
  border-top: 4px solid var(--color-accent);
  padding: 0.75rem 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
  box-shadow: var(--shadow-lg);
  z-index: 999;
}
.nav-item:hover .simple-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.simple-dropdown a {
  display: block;
  padding: 0.7rem 1.25rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.85);
  border-left: 2px solid transparent;
  transition: all 0.2s ease;
}
.simple-dropdown a:hover {
  color: var(--color-white);
  background: rgba(255, 255, 255, 0.05);
  border-left-color: var(--color-accent);
  padding-left: 1.5rem;
}

/* ---------- MOBILE HAMBURGER ---------- */
.hamburger {
  display: none;
  width: 36px;
  height: 36px;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  background: transparent;
  border: none;
  padding: 0;
}
.hamburger .line {
  width: 26px;
  height: 2.5px;
  background: var(--color-primary);
  transition: all 0.3s ease;
  margin: 0 auto;
}
.hamburger.open .line-1 { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.open .line-2 { opacity: 0; transform: translateX(-10px); }
.hamburger.open .line-3 { transform: rotate(-45deg) translate(6px, -7px); }

/* ---------- MOBILE OVERLAY ---------- */
.mobile-overlay {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 100%;
  max-width: 400px;
  background: var(--color-primary);
  z-index: 1100;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.mobile-overlay.open { transform: translateX(0); }
.mobile-overlay-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1099;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.mobile-overlay-backdrop.open { opacity: 1; visibility: visible; }

.mobile-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  height: var(--header-height);
  flex-shrink: 0;
}
.mobile-close {
  width: 36px; height: 36px;
  background: transparent;
  border: none;
  color: var(--color-white);
  cursor: pointer;
  font-size: 1.5rem;
  line-height: 1;
}
.mobile-nav { padding: 1rem 0; flex: 1; overflow-y: auto; }
.mobile-nav-item { border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.mobile-nav-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 1rem 1.5rem;
  background: transparent;
  border: none;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-white);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  text-align: left;
  transition: background 0.2s ease;
}
.mobile-nav-link:hover { background: rgba(255, 255, 255, 0.05); }
.mobile-nav-link svg { width: 16px; height: 16px; transition: transform 0.3s ease; }
.mobile-nav-item.expanded .mobile-nav-link svg { transform: rotate(180deg); }

.mobile-submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  background: rgba(0, 0, 0, 0.2);
}
.mobile-nav-item.expanded .mobile-submenu { max-height: 800px; }
.mobile-submenu a {
  display: block;
  padding: 0.7rem 2.5rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.75);
  border-left: 2px solid transparent;
  transition: all 0.2s ease;
}
.mobile-submenu a:hover {
  color: var(--color-white);
  border-left-color: var(--color-accent);
  background: rgba(232, 119, 34, 0.1);
}

.mobile-cta {
  padding: 1rem 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}
.mobile-cta .btn { width: 100%; justify-content: center; }
.mobile-contact-row {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem 1rem;
  font-size: var(--text-small);
  color: rgba(255, 255, 255, 0.75);
}
.mobile-contact-row a { color: rgba(255, 255, 255, 0.75); }

/* ---------- MOBILE BREAKPOINT ---------- */
@media (max-width: 1024px) {
  .top-bar { display: none; }
  .main-header { top: 0; }
  .primary-nav { display: none; }
  .nav-cta { display: none; }
  .hamburger { display: flex; }
  :root { --topbar-height: 0px; }
}

/* Body lock when mobile menu open */
body.menu-open { overflow: hidden; }

/* ============================================================
   NAV v2 — Updated for new navigation structure
   Mega menu with 3 columns: Brands, Industries, Products
   ============================================================ */

/* --- MEGA MENU --- */
.nav-has-mega { position: relative; }

.mega-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  border-top: 3px solid #E87722;
  box-shadow: 0 12px 40px rgba(0,0,0,0.15);
  z-index: 1000;
  min-width: 760px;
  border-radius: 0 0 6px 6px;
  animation: megaFadeIn 0.18s ease;
}

@keyframes megaFadeIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-6px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.nav-has-mega:hover .mega-menu,
.nav-has-mega:focus-within .mega-menu { display: block; }

.mega-inner {
  display: flex;
  gap: 0;
  padding: 0;
}

.mega-col {
  flex: 1;
  padding: 1.5rem 1.25rem;
  border-right: 1px solid #f0f0f0;
}
.mega-col:last-child { border-right: none; }
.mega-col-wide { flex: 1.6; }

.mega-col-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #0B3B60;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #eef0f2;
}

.mega-col ul { list-style: none; padding: 0; margin: 0; }
.mega-col ul li { margin-bottom: 0.3rem; }
.mega-col ul li a {
  font-size: 13px;
  color: #4A5568;
  text-decoration: none;
  transition: color 0.15s, padding-left 0.15s;
  display: block;
  padding: 2px 0;
}
.mega-col ul li a:hover { color: #E87722; padding-left: 4px; }

/* Two-column list inside mega */
.mega-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 0.5rem;
}

/* --- DROPDOWN for simple items --- */
.nav-has-dropdown { position: relative; }

.dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  border-top: 3px solid #E87722;
  box-shadow: 0 12px 40px rgba(0,0,0,0.13);
  min-width: 220px;
  border-radius: 0 0 6px 6px;
  list-style: none;
  padding: 0.5rem 0;
  z-index: 1000;
  animation: megaFadeIn 0.18s ease;
}

.nav-has-dropdown:hover .dropdown,
.nav-has-dropdown:focus-within .dropdown { display: block; }

.dropdown li a {
  display: block;
  padding: 0.5rem 1.25rem;
  font-size: 13px;
  color: #4A5568;
  text-decoration: none;
  transition: background 0.12s, color 0.12s;
}
.dropdown li a:hover { background: #f4f5f7; color: #E87722; }

/* --- NAV CARET --- */
.nav-caret { font-size: 9px; opacity: 0.6; margin-left: 2px; }

/* --- BRAND FORMERLY line --- */
.brand-formerly {
  font-size: 9px;
  color: #E87722;
  letter-spacing: 0.06em;
  font-style: italic;
  font-family: var(--font-body, 'Inter', sans-serif);
}

/* --- MOBILE OVERLAY updated --- */
.mobile-overlay {
  position: fixed;
  inset: 0;
  background: #0B3B60;
  z-index: 2000;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  padding: 3rem 1.5rem 2rem;
}
.mobile-overlay.open { transform: translateX(0); }
.mobile-close {
  position: absolute;
  top: 1rem;
  right: 1.25rem;
  background: none;
  border: none;
  color: #fff;
  font-size: 1.4rem;
  cursor: pointer;
}
.mobile-nav-list { list-style: none; padding: 0; margin: 0; }
.mobile-nav-list > li { border-bottom: 1px solid rgba(255,255,255,0.08); }
.mobile-nav-list > li > a,
.mobile-acc-btn {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.85rem 0;
  color: #fff;
  font-size: 15px;
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.mobile-sub {
  list-style: none;
  padding: 0 0 0.75rem 1rem;
  margin: 0;
  display: none;
}
.mobile-sub.open { display: block; }
.mobile-sub li a {
  display: block;
  padding: 0.4rem 0;
  color: rgba(255,255,255,0.7);
  font-size: 13px;
  text-decoration: none;
}

/* ============================================================
   UPDATED NAV — MEGA MENU & NEW STRUCTURE
   Added: May 2026 redesign
   ============================================================ */

/* --- Reset top-bar to match new nav --- */
.top-bar { background:#0B3B60; color:rgba(255,255,255,0.6); font-size:11px; padding:6px 0; }
.top-bar-inner { max-width:1280px; margin:0 auto; padding:0 2rem; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:6px; }
.top-bar-item { letter-spacing:0.03em; }
.top-bar-sep { opacity:0.3; margin:0 4px; }

/* --- Main header --- */
.main-header { background:#fff; position:sticky; top:0; z-index:1000; border-bottom:1px solid #e5e8eb; transition:box-shadow 0.3s; }
.main-header.scrolled { box-shadow:0 2px 20px rgba(0,0,0,0.12); }
.header-inner { max-width:1280px; margin:0 auto; padding:0 2rem; display:flex; align-items:center; justify-content:space-between; height:70px; }

/* --- Brand logo --- */
.brand-logo { display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand-mark { font-size:26px; font-weight:800; color:#0B3B60; letter-spacing:-1px; line-height:1; }
.brand-orange { color:#E87722; }
.brand-text { display:flex; flex-direction:column; line-height:1.15; }
.brand-name { font-size:12px; font-weight:700; color:#0B3B60; letter-spacing:0.1em; }
.brand-tag { font-size:9px; font-weight:600; color:#5BB4E5; letter-spacing:0.08em; }
.brand-sub { font-size:8px; color:#999; letter-spacing:0.06em; }

/* --- Navigation links --- */
.main-nav { display:flex; align-items:center; gap:2px; }
.nav-link { color:#2D2D2D; font-size:13px; font-weight:500; text-decoration:none; padding:8px 10px; border-radius:4px; transition:color 0.2s, background 0.2s; white-space:nowrap; }
.nav-link:hover, .nav-link.active { color:#0B3B60; background:#f0f4f8; }
.nav-link-cta { background:#E87722; color:#fff !important; padding:8px 16px; border-radius:4px; font-weight:600; }
.nav-link-cta:hover { background:#d06b1a !important; color:#fff !important; }
.nav-arrow { font-size:9px; opacity:0.6; margin-left:2px; }

/* --- Dropdown items wrapper --- */
.nav-item { position:relative; }
.nav-item:hover .dropdown,
.nav-item:hover .mega-menu { display:block; }

/* --- Simple dropdown --- */
.dropdown { display:none; position:absolute; top:100%; left:0; background:#fff; border:1px solid #e5e8eb; border-radius:6px; box-shadow:0 8px 32px rgba(0,0,0,0.12); min-width:220px; padding:8px 0; z-index:1001; animation:ddFadeIn 0.15s ease; }
@keyframes ddFadeIn { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:translateY(0)} }
.dd-link { display:block; padding:9px 18px; color:#2D2D2D; font-size:13px; text-decoration:none; transition:background 0.15s, color 0.15s; }
.dd-link:hover { background:#f0f4f8; color:#0B3B60; }

/* --- MEGA MENU --- */
.mega-menu { display:none; position:absolute; top:100%; left:50%; transform:translateX(-50%); background:#fff; border:1px solid #e5e8eb; border-radius:8px; box-shadow:0 12px 48px rgba(0,0,0,0.15); z-index:1001; animation:ddFadeIn 0.15s ease; min-width:820px; }
.mega-inner { display:flex; padding:28px 28px 20px; gap:0; }
.mega-col { flex:1; padding:0 20px; border-right:1px solid #f0f0f0; }
.mega-col:last-child { border-right:none; }
.mega-col-wide { flex:1.6; }
.mega-col-title { font-size:10px; font-weight:700; color:#0B3B60; letter-spacing:0.12em; text-transform:uppercase; margin-bottom:12px; padding-bottom:8px; border-bottom:2px solid #E87722; }
.mega-link { display:block; padding:6px 0; color:#4A5568; font-size:12.5px; text-decoration:none; transition:color 0.15s, padding-left 0.15s; }
.mega-link:hover { color:#E87722; padding-left:6px; }
.mega-col-2 { display:flex; gap:16px; }
.mega-col-2 > div { flex:1; }

/* --- Hamburger --- */
.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none; padding:6px; }
.hamburger span { display:block; width:22px; height:2px; background:#0B3B60; border-radius:2px; transition:all 0.3s; }
.hamburger.open span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }

/* --- Mobile overlay --- */
.mobile-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.45); z-index:998; }
.mobile-overlay.active { display:block; }

/* --- RESPONSIVE --- */
@media(max-width:1100px){
  .nav-link { font-size:12px; padding:8px 7px; }
  .mega-menu { min-width:700px; }
}
@media(max-width:960px){
  .hamburger { display:flex; }
  .main-nav {
    display:none; flex-direction:column; align-items:flex-start;
    position:fixed; top:0; right:0; width:300px; height:100vh;
    background:#fff; z-index:999; padding:80px 0 24px; overflow-y:auto;
    box-shadow:-4px 0 24px rgba(0,0,0,0.15);
  }
  .main-nav.open { display:flex; }
  .nav-link { width:100%; padding:12px 24px; border-radius:0; border-bottom:1px solid #f0f4f8; }
  .dropdown, .mega-menu { display:none; position:static; box-shadow:none; border:none; border-radius:0; min-width:unset; transform:none; background:#f8f9fa; }
  .nav-item.mobile-open .dropdown,
  .nav-item.mobile-open .mega-menu { display:block; }
  .mega-inner { flex-direction:column; padding:16px; gap:12px; }
  .mega-col { border-right:none; padding:0; border-bottom:1px solid #eee; padding-bottom:12px; }
  .mega-col-wide { flex:1; }
  .mega-col-2 { flex-direction:column; gap:0; }
}