/* ════════════════════════════════════════════════════════════════
   SmartWTI Enterprise v11.6 — Unified Header Design System
   ────────────────────────────────────────────────────────────────
   Core principle: desktop and mobile share identical tokens
   for typography, color, spacing, icons, and hover states.
   Desktop mega max-width = 940px (no more empty space).
   Mobile uses same icon boxes and brand colors as desktop.
   ════════════════════════════════════════════════════════════════ */

/* ══ SHARED DESIGN TOKENS ═══════════════════════════════════════ */
:root {
  /* Header */
  --hh:         68px;
  --hh-s:       56px;
  --h-bg:       var(--sw-hbg, rgba(7,26,47,.97));
  --h-blur:     blur(18px) saturate(160%);
  --h-bd:       rgba(255,255,255,.07);

  /* Brand */
  --c-red:      var(--g1, #D4145A);
  --c-amber:    var(--g2, #FBB03B);
  --c-teal:     #00c6a2;
  --c-navy:     #071a2f;
  --grad:       linear-gradient(135deg, var(--c-red), var(--c-amber));

  /* Icon box tints — shared desktop + mobile */
  --ic-water:   rgba(41,171,226,.15);
  --ic-energy:  rgba(251,176,59,.15);
  --ic-iot:     rgba(102,45,140,.15);
  --ic-esg:     rgba(5,150,105,.15);
  --ic-carbon:  rgba(0,198,162,.15);
  --ic-ai:      rgba(41,171,226,.15);
  --ic-city:    rgba(212,20,90,.10);
  --ic-eco:     rgba(5,150,105,.12);
  --ic-report:  rgba(102,45,140,.15);

  /* Mega menu */
  --m-bg:       #fff;
  --m-bd:       rgba(7,26,47,.07);
  --m-sh:       0 12px 40px rgba(7,26,47,.14), 0 2px 8px rgba(7,26,47,.05);
  --m-ih:       #f4f7fb;         /* item hover bg */
  --m-max:      940px;           /* content max-width — keeps it tight */

  /* Mobile drawer */
  --d-bg:       #071a2f;
  --d-bd:       rgba(255,255,255,.07);
  --d-c:        rgba(255,255,255,.80);
  --d-ch:       #ffffff;
  --d-sub-bg:   rgba(0,0,0,.18);
  --d-ic-bg:    rgba(255,255,255,.08); /* icon box default on dark bg */

  /* Shared animation */
  --dur:        190ms;
  --ease:       cubic-bezier(.22,1,.36,1);
}

/* ══ RESET UNWANTED ELEMENTS ════════════════════════════════════ */
/* Login + language buttons */
.menu-item-login,
.menu-item a[href*="login"],
.menu-item a[href*="customer-login"],
.btn-login, .header-login, .lang-btn,
.mobile-lang-link, .wpml-ls-menu-item,
li.polylang-switcher, .pll-switcher { display:none!important; }

/* Orphaned breadcrumbs */
.woocommerce-breadcrumb,
.breadcrumb-nav, .site-breadcrumb { display:none!important; }

/* ══ HEADER SHELL ════════════════════════════════════════════════ */
#swti-header {
  position: fixed; top:0; left:0; right:0;
  height: var(--hh); z-index: 9900;
  background: var(--h-bg);
  backdrop-filter: var(--h-blur);
  -webkit-backdrop-filter: var(--h-blur);
  border-bottom: 1px solid var(--h-bd);
  transition: height var(--dur) var(--ease), box-shadow .3s;
}
#swti-header.scrolled {
  height: var(--hh-s);
  box-shadow: 0 4px 24px rgba(0,0,0,.26);
}

.hdr-wrap {
  max-width: 1440px; margin: 0 auto;
  padding: 0 28px; height: 100%;
  display: flex; align-items: center; gap: 14px;
}

/* ══ LOGO ════════════════════════════════════════════════════════ */
.hdr-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
  max-width: 18%;       /* desktop: never crowd the nav */
  height: 100%;         /* FIX: fill header height so overflow:hidden clips correctly */
  overflow: hidden;     /* FIX: hard-clips any logo taller than the header */
}
.hdr-logo .custom-logo {
  display: block;
  width: auto;
  max-width: 200px;     /* never wider than ~200px */
  /* Height: never exceed the header bar minus 16px vertical breathing room */
  height: calc(var(--hh) - 16px);
  max-height: 52px;     /* absolute cap on desktop */
  min-height: 28px;
  object-fit: contain;
  object-position: left center;
  margin: 0 auto;       /* centres on mobile grid cell */
  transition: height var(--dur) var(--ease), max-height var(--dur) var(--ease);
}
/* Shrink logo when header scrolls to compact height */
#swti-header.scrolled .hdr-logo .custom-logo {
  height: calc(var(--hh-s) - 14px);
  max-height: 42px;
}
.logo-inner { display:flex; align-items:center; gap:8px; }
.logo-mk {
  width:34px; height:34px; border-radius:8px;
  background: var(--sw-lgbg, var(--grad));
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; box-shadow: 0 2px 10px rgba(212,20,90,.30);
  transition: transform .2s, box-shadow .2s;
}
.hdr-logo:hover .logo-mk { transform:scale(1.05); box-shadow:0 4px 14px rgba(212,20,90,.40); }
.logo-mk span { font-size:12px; font-weight:900; color:#fff; }
.logo-tx { display:flex; flex-direction:column; line-height:1; gap:2px; }
.logo-tx strong { font-size:14px; font-weight:900; color:#fff; white-space:nowrap; }
.logo-tx em {
  font-size:8.5px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--c-teal); white-space:nowrap; font-style:normal;
}

/* ══ DESKTOP NAV ═════════════════════════════════════════════════ */
#hdr-nav { flex:1; display:flex; justify-content:center; min-width:0; }
.dnav {
  list-style:none; margin:0; padding:0;
  display:flex; align-items:center; gap:2px;
  position:relative; /* needed for --sm absolute positioning */
}
.dnav > li { position:static; display:flex; align-items:stretch; }
/* FIX: bridge — invisible area fills gap between link bottom and panel top */
.dnav > li.has-drop { position:relative; }
.dnav > li.has-drop::after {
  content:''; position:absolute;
  left:0; right:0; bottom:-12px; height:12px;
  background:transparent;
}
.dnav > li > a {
  display: flex; align-items: center; gap:3px;
  padding: 0 10px;
  height: 100%;
  font-size: 13px; font-weight: 600; color: var(--d-c);
  text-decoration: none; border-radius: 7px; white-space: nowrap;
  transition: color var(--dur), background var(--dur);
}
.dnav > li > a:hover,
.dnav > li:hover > a,
.dnav > li:focus-within > a,
.dnav > li.current-menu-item > a,
.dnav > li.current-menu-ancestor > a {
  color: #fff; background: rgba(255,255,255,.09);
}
.dnav > li > a:focus-visible { outline:2px solid rgba(255,255,255,.5); outline-offset:2px; }

/* Arrow */
.nav-arr {
  display:inline-flex; opacity:.45; flex-shrink:0;
  transition: transform var(--dur) var(--ease), opacity var(--dur);
}
.has-drop:hover > a .nav-arr,
.has-drop:focus-within > a .nav-arr { transform:rotate(180deg); opacity:1; }

/* Highlight item */
.dnav-hl > a {
  color: var(--c-teal)!important;
  background: rgba(0,198,162,.10)!important;
  border: 1px solid rgba(0,198,162,.18);
}

/* ══ MEGA PANEL ══════════════════════════════════════════════════
   KEY FIX: .mega-body max-width = 940px (was 1440px)
   This eliminates all the empty space.
   ═════════════════════════════════════════════════════════════════ */
.mega-panel {
  position: fixed;
  top: var(--hh); left:0; right:0;
  z-index: 9800;
  background: var(--m-bg);
  border-bottom: 1px solid var(--m-bd);
  box-shadow: var(--m-sh);
  /* Hidden state */
  opacity:0; visibility:hidden;
  transform: translateY(-6px); pointer-events:none;
  transition:
    opacity var(--dur) var(--ease),
    transform var(--dur) var(--ease),
    visibility 0s linear 400ms; /* FIX: 400ms delay before hiding */
}
#swti-header.scrolled ~ .mega-panel { top: var(--hh-s); }

/* Open states */
.has-drop:hover > .mega-panel,
.has-drop.is-open > .mega-panel,
.has-drop:focus-within > .mega-panel,
.mega-panel.kb-open {
  opacity:1; visibility:visible;
  transform:translateY(0); pointer-events:auto;
  transition:
    opacity var(--dur) var(--ease),
    transform var(--dur) var(--ease),
    visibility 0s linear 0s;
}
/* FIX: JS-managed open state — overrides the 400ms close delay */
.has-drop.is-open > .mega-panel {
  transition:
    opacity var(--dur) var(--ease),
    transform var(--dur) var(--ease),
    visibility 0s linear 0s !important;
}

/* 2px gradient accent bar at top */
.mega-panel::before {
  content:''; display:block; height:2px;
  background: linear-gradient(90deg, var(--c-red), var(--c-amber), var(--c-teal));
}
.mega-hdr-row {
  background:#fafbfc;
  border-bottom:1px solid var(--m-bd);
}

/* Compact header row */
.mega-hdr {
  display:flex; align-items:center; justify-content:space-between;
  padding: 7px var(--m-max) 6px;
  /* fallback if var calc fails: */
  padding: 7px 0 6px;
  max-width: var(--m-max); margin: 0 auto;
  padding-left: 0; padding-right: 0;
  border-bottom: 1px solid var(--m-bd);
}
.mega-hdr-wrap {
  max-width: var(--m-max); margin:0 auto; width:100%;
  display:flex; align-items:center; justify-content:space-between;
  padding:6px 20px;
}
.mega-hdr-title { font-size:9px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#aabbc9; }
.mega-hdr-link  { font-size:11px; font-weight:700; color:var(--c-red); text-decoration:none; }
.mega-hdr-link:hover { opacity:.75; }

/* BODY — tightly constrained width */
.mega-body {
  display: flex;
  max-width: var(--m-max);  /* 940px — tight, no empty space */
  margin: 0 auto;
  padding: 12px 20px 16px;
  gap: 0;
}

/* Column grid */
.mega-cols { flex:1; display:grid; gap:0; min-width:0; }
.mc-2 { grid-template-columns: 1fr 1fr; }
.mc-3 { grid-template-columns: repeat(3,1fr); }

.mega-col { padding:0 10px; border-right:1px solid var(--m-bd); min-width:0; }
.mega-col:first-child { padding-left:0; }
.mega-col:last-child  { border-right:none; }

.mega-col-hdr {
  display:flex; align-items:center; gap:5px;
  font-size:9px; font-weight:800; letter-spacing:.13em;
  text-transform:uppercase; color:#aabbc9;
  padding-bottom:5px; border-bottom:1px solid var(--m-bd); margin-bottom:3px;
}

/* ══ MEGA ITEM — shared icon + label system ══════════════════════ */
.mi {
  display: flex; align-items: center; gap:7px;
  padding: 5px 6px; border-radius:7px;
  text-decoration:none; margin-bottom:1px;
  transition: background var(--dur), transform var(--dur);
}
.mi:hover { background: var(--m-ih); transform: translateX(2px); }
.mi:focus-visible { outline:2px solid var(--c-red); outline-offset:2px; }
body.lang-ar .mi:hover { transform: translateX(-2px); }

/* ── SHARED ICON BOX — 26×26px ── */
/* Used in both .mi (desktop) and .mn-link (mobile) */
.mi-ic,
.mn-sub-ic {
  width: 26px; height: 26px; border-radius:6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; flex-shrink: 0;
  background: #eef1f5; /* default, overridden by class */
  transition: background var(--dur);
}
/* Icon tint classes — used identically on desktop and mobile */
.c-water  { background: var(--ic-water)!important;  }
.c-energy { background: var(--ic-energy)!important; }
.c-iot    { background: var(--ic-iot)!important;    }
.c-esg    { background: var(--ic-esg)!important;    }
.c-carbon { background: var(--ic-carbon)!important; }
.c-ai     { background: var(--ic-ai)!important;     }
.c-city   { background: var(--ic-city)!important;   }
.c-eco    { background: var(--ic-eco)!important;    }
.c-report { background: var(--ic-report)!important; }

/* Item text */
.mi-txt { display:flex; flex-direction:column; gap:0; min-width:0; overflow:hidden; }
.mi-txt strong {
  display:flex; align-items:center; gap:3px;
  font-size: 12.5px; font-weight:700; color:#071a2f;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  line-height:1.3; transition:color var(--dur);
}
.mi:hover .mi-txt strong { color: var(--c-red); }
.mi-txt span {
  font-size: 10.5px; color:#9aabbb; line-height:1.3;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Badges */
.mi-badge {
  display:inline-flex; align-items:center;
  font-size:8px; font-weight:800; letter-spacing:.04em;
  padding:1px 4px; border-radius:20px; flex-shrink:0;
}
.mi-badge--new  { background:rgba(5,150,105,.12);  color:#059669; }
.mi-badge--hot  { background:rgba(212,20,90,.10);   color:#D4145A; }
.mi-badge--beta { background:rgba(41,171,226,.12);  color:#29ABE2; }

/* ── FEATURED SIDEBAR — compact dark card ── */
.mega-feat {
  flex-shrink:0; width:186px; margin-left:12px;
  background: var(--c-navy); border-radius:10px;
  padding:11px; display:flex; flex-direction:column; gap:6px;
}
.mega-feat-lbl {
  font-size:8.5px; font-weight:800; letter-spacing:.13em;
  text-transform:uppercase; color:rgba(255,255,255,.28); margin-bottom:1px;
}
.mega-cta {
  display:flex; align-items:center; gap:7px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.09);
  border-radius:8px; padding:8px 9px;
  text-decoration:none; transition:background var(--dur);
}
.mega-cta:hover { background:rgba(255,255,255,.13); }
.mega-cta-ic  { font-size:16px; flex-shrink:0; }
.mega-cta-txt { display:flex; flex-direction:column; gap:1px; min-width:0; }
.mega-cta-txt strong {
  font-size:11px; font-weight:700; color:#fff;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.mega-cta-txt span { font-size:10px; color:rgba(255,255,255,.42); line-height:1.3; }

.mega-stats {
  display:flex; border-top:1px solid rgba(255,255,255,.07); padding-top:7px;
}
.mega-stat {
  flex:1; display:flex; flex-direction:column; align-items:center;
  padding:2px 0; border-right:1px solid rgba(255,255,255,.07);
}
.mega-stat:last-child { border-right:none; }
.mega-stat strong { font-size:11.5px; font-weight:800; color:var(--c-teal); }
.mega-stat span   { font-size:8.5px; color:rgba(255,255,255,.28); text-align:center; line-height:1.3; }

/* ── SMALL DROPDOWN (Company) ── */
.mega-panel--sm {
  position: absolute!important;
  top: calc(100% + 4px)!important;
  left: auto!important; right: 0!important;
  width: 380px;
  border-radius:12px;
  border: 1px solid var(--m-bd);
}
/* .has-drop containing --sm needs relative positioning */
.has-drop:last-child { position:relative; }
.mega-panel--sm::before { border-radius:12px 12px 0 0; }
.mega-sm-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:2px; padding:9px 11px 13px;
}

/* ══ HEADER ACTIONS ══════════════════════════════════════════════ */
.hdr-act { display:flex; align-items:center; gap:8px; flex-shrink:0; }

.wa-btn {
  width:32px; height:32px; border-radius:50%;
  background:rgba(37,211,102,.14); border:1px solid rgba(37,211,102,.25);
  display:inline-flex; align-items:center; justify-content:center;
  color:#25d366; text-decoration:none; flex-shrink:0;
  transition: background var(--dur), transform var(--dur);
}
.wa-btn:hover { background:rgba(37,211,102,.26); transform:scale(1.08); }

.btn-demo {
  display:inline-flex; align-items:center; gap:5px;
  padding: 8px 18px;
  background: var(--grad);
  color:#fff; border-radius:8px;
  font-size:13px; font-weight:700;
  text-decoration:none; white-space:nowrap;
  box-shadow: 0 2px 10px rgba(212,20,90,.28);
  transition: opacity var(--dur), transform var(--dur);
}
.btn-demo:hover { opacity:.88; transform:translateY(-1px); color:#fff; }

/* ══ HAMBURGER ═══════════════════════════════════════════════════ */
.hbtn {
  display:none;
  flex-direction:column; justify-content:center; align-items:center; gap:5px;
  width:40px; height:40px; padding:0;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.13);
  border-radius:8px; cursor:pointer; flex-shrink:0;
  transition:background var(--dur);
}
.hbtn:hover { background:rgba(255,255,255,.14); }
.hbtn span {
  display:block; width:18px; height:2px;
  background:rgba(255,255,255,.88); border-radius:2px;
  transition: transform .26s var(--ease), opacity .2s, width .2s;
}
.hbtn.is-open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hbtn.is-open span:nth-child(2) { opacity:0; width:0; }
.hbtn.is-open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* ══ MOBILE / TABLET DRAWER ══════════════════════════════════════ */
.drawer {
  position:fixed; top:var(--hh); left:0; bottom:0; right:0;
  z-index:9700; pointer-events:none;
}
.drawer.is-open { pointer-events:auto; }

/* Slide panel */
.drawer-panel {
  position:absolute; top:0; left:0; bottom:0;
  width:82vw; max-width:320px; min-width:260px;
  background: var(--d-bg);
  display:flex; flex-direction:column;
  transform:translateX(-100%);
  transition: transform .28s var(--ease);
  overflow:hidden; z-index:1;
  box-shadow:4px 0 32px rgba(0,0,0,.35);
}
body.lang-ar .drawer-panel {
  left:auto; right:0;
  transform:translateX(100%);
  box-shadow:-4px 0 32px rgba(0,0,0,.35);
}
.drawer.is-open .drawer-panel { transform:translateX(0); }

/* Backdrop */
.drawer-bd {
  position:absolute; inset:0;
  background:rgba(7,26,47,.60);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  opacity:0; transition:opacity .28s; z-index:0;
}
.drawer.is-open .drawer-bd { opacity:1; }

/* Drawer top bar */
.dp-top {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px; border-bottom:1px solid var(--d-bd);
  flex-shrink:0; min-height:44px;
}
.dp-nav-title {
  font-size:12px; font-weight:700; letter-spacing:.10em;
  text-transform:uppercase; color:rgba(255,255,255,.45);
}

.dp-close {
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; min-width:34px; flex-shrink:0;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
  border-radius:7px; cursor:pointer; color:rgba(255,255,255,.60);
  transition:background var(--dur), color var(--dur);
}
.dp-close:hover { background:rgba(255,255,255,.14); color:#fff; }

/* Scrollable area */
.dp-scroll { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; }

/* Drawer footer */
.dp-foot { padding:12px 14px 20px; flex-shrink:0; border-top:1px solid var(--d-bd); }
.btn-demo-full { width:100%; justify-content:center; padding:13px 18px; font-size:14px; }

/* ══ MOBILE NAV LIST — uses same icon system as desktop ══════════ */
.mnav { list-style:none; padding:4px 0 0; margin:0; }
.mn-li { border-bottom:1px solid var(--d-bd); }

/* ── Row: [icon + label] | [toggle] ── */
.mn-row { display:flex; align-items:stretch; min-height:50px; }

/* Navigation link */
.mn-link {
  display:flex; align-items:center; gap:9px;
  flex:1; padding:11px 12px;
  font-size:14px; font-weight:600;
  color:var(--d-c); text-decoration:none;
  transition: color var(--dur), background var(--dur);
  min-width:0;
}
.mn-link:hover, .mn-link:focus-visible { color:var(--d-ch); background:rgba(255,255,255,.04); }
.mob-hl { color:var(--c-teal)!important; }

/* ── Mobile icon box — matches desktop 26×26 system ── */
.mn-ic {
  width: 26px; height: 26px; border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  font-size: 13px; flex-shrink:0;
  /* dark-bg adapted tints */
  background: rgba(255,255,255,.08);
  transition: background var(--dur);
}
/* Same tint classes work on dark bg */
.mn-ic.c-water  { background: rgba(41,171,226,.20);  }
.mn-ic.c-energy { background: rgba(251,176,59,.20);   }
.mn-ic.c-iot    { background: rgba(102,45,140,.20);   }
.mn-ic.c-esg    { background: rgba(5,150,105,.20);    }
.mn-ic.c-carbon { background: rgba(0,198,162,.18);    }
.mn-ic.c-ai     { background: rgba(41,171,226,.18);   }
.mn-ic.c-city   { background: rgba(212,20,90,.15);    }
.mn-ic.c-eco    { background: rgba(5,150,105,.16);    }
.mn-ic.c-report { background: rgba(102,45,140,.18);   }

.mn-link-txt {
  display:flex; flex-direction:column; gap:1px; min-width:0; overflow:hidden;
}
.mn-link-txt strong {
  display:block; font-size:14px; font-weight:600;
  color: inherit; /* inherits from mn-link */
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.mn-link-txt span {
  font-size:10.5px; color:rgba(255,255,255,.38); line-height:1.3;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Toggle button — completely separate from link */
.mn-tog {
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; width:48px;
  background:transparent; border:none;
  border-left:1px solid var(--d-bd);
  cursor:pointer; color:rgba(255,255,255,.32);
  transition: color var(--dur), background var(--dur);
}
.mn-tog:hover { color:rgba(255,255,255,.75); background:rgba(255,255,255,.05); }
.mn-tog svg   { transition:transform .26s var(--ease); }
.mn-tog.is-open { color:var(--c-teal); }
.mn-tog.is-open svg { transform:rotate(180deg); }
body.lang-ar .mn-tog { border-left:none; border-right:1px solid var(--d-bd); }

/* Accordion submenu */
.mn-sub {
  list-style:none; padding:0; margin:0;
  max-height:0; overflow:hidden;
  background: var(--d-sub-bg);
  transition: max-height .30s var(--ease);
}
.mn-sub.is-open { max-height:2000px; }
.mn-sub li { border-bottom:1px solid rgba(255,255,255,.04); }
.mn-sub li:last-child { border-bottom:none; }

/* Sub-item — same icon box as desktop */
.mn-sub-row { display:flex; align-items:stretch; min-height:44px; }
.mn-sub-link {
  display:flex; align-items:center; gap:8px;
  flex:1; padding: 9px 12px 9px 14px;
  font-size:13px; font-weight:500;
  color:rgba(255,255,255,.55); text-decoration:none;
  transition: color var(--dur), background var(--dur);
}
.mn-sub-link:hover { color:rgba(255,255,255,.90); background:rgba(255,255,255,.04); }
body.lang-ar .mn-sub-link { padding: 9px 14px 9px 12px; }

/* Sub icon — 20×20, lighter tint */
.mn-sub-ic {
  width:20px; height:20px; border-radius:5px;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; flex-shrink:0;
  background: rgba(255,255,255,.06);
}
.mn-sub-indent {
  width:20px; height:20px; flex-shrink:0;
}

/* ══ RESPONSIVE BREAKPOINTS ══════════════════════════════════════ */

/* XL desktop: more breathing room */
@media (min-width:1400px) {
  .hdr-wrap { padding:0 40px; }
  .dnav > li > a { padding:6px 12px; font-size:13.5px; }
}

/* Mid desktop: compress */
@media (max-width:1199px) {
  .hdr-wrap { padding:0 20px; gap:10px; }
  .dnav > li > a { padding:5px 8px; font-size:12.5px; }
  .logo-tx em { display:none; }
  .mega-feat { width:168px; }
  .mc-3 { grid-template-columns:1fr 1fr; }
  .btn-demo { padding:7px 12px; font-size:12.5px; }
  :root { --m-max: 820px; }
}

/* Tablet/mobile ≤1024px: hamburger layout */
@media (max-width:1024px) {
  #hdr-nav { display:none; }
  .hbtn { display:flex; }

  /* 3-col grid: hamburger | logo-centre | actions */
  .hdr-wrap {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
  }
  .hbtn      { grid-column:1; }
  .hdr-logo  { grid-column:2; max-width:100%; justify-content:center; }
  .hdr-act   { grid-column:3; }

  body.lang-ar .hdr-wrap { direction:rtl; }

  /* Logo tablet sizing */
  .hdr-logo .custom-logo { max-height:48px; }
  .logo-mk { width:30px; height:30px; }
  .logo-tx strong { font-size:13px; }

  /* Drawer tablet width */
  .drawer-panel { width:65vw; max-width:400px; }
}

/* Mobile ≤767px */
@media (max-width:767px) {
  .hdr-wrap { padding:0 12px; gap:8px; }
  .hdr-logo .custom-logo { max-height:40px; }
  .logo-mk { width:28px; height:28px; border-radius:7px; }
  .hdr-act .btn-demo { display:none; } /* moved to drawer footer */
  .drawer-panel { width:84vw; max-width:320px; }
}

/* Samsung Z Fold (folded) and very narrow phones ≤360px */
@media (max-width:360px) {
  :root { --hh:58px; --hh-s:50px; }
  .hdr-wrap {
    grid-template-columns: 36px 1fr auto;
    padding: 0 8px; gap: 6px;
  }
  .hbtn { width:36px; height:36px; }
  .logo-mk { width:24px; height:24px; border-radius:6px; }
  .logo-tx strong { font-size:11.5px; }
  .logo-tx em { display:none; }
  .drawer-panel { width:92vw; max-width:none; min-width:0; }
  .btn-demo { padding:6px 10px; font-size:11.5px; }
  .dp-scroll { font-size:13px; }
  .mn-link { padding:9px 10px; font-size:13px; }
}

/* Small mobile ≤479px */
@media (max-width:479px) {
  .hdr-wrap { padding:0 10px; }
  .logo-tx strong { font-size:12.5px; }
}

/* ══ RTL DESKTOP ═════════════════════════════════════════════════ */
body.lang-ar .dnav         { flex-direction:row-reverse; }
body.lang-ar #hdr-nav      { direction:rtl; }
body.lang-ar .hdr-act      { flex-direction:row-reverse; }
body.lang-ar .mega-col     { border-right:none; border-left:1px solid var(--m-bd); }
body.lang-ar .mega-col:first-child { padding-left:10px; border-left:none; }
body.lang-ar .mega-col:last-child  { padding-right:0; border-left:1px solid var(--m-bd); }
body.lang-ar .mega-feat    { margin-left:0; margin-right:12px; }
body.lang-ar .mega-panel--sm { left:0; right:auto; }
body.lang-ar .mega-sm-grid { direction:rtl; }
body.lang-ar .mi:hover     { transform:translateX(-2px); }

/* ══ ACCESSIBILITY & MOTION ══════════════════════════════════════ */
@media (prefers-reduced-motion:reduce) {
  .mega-panel, .drawer-panel, .hbtn span,
  .mn-tog svg, .mn-sub, .mi, .btn-demo
  { transition:none!important; animation:none!important; }
}

/* ═══════════════════════════════════════════════════════════════
   v13.0 — DESKTOP FLYOUT (non-mega dropdowns)
   Shown when WP menu item has children but does NOT match a mega key.
   ═══════════════════════════════════════════════════════════════ */

/* The <li> that holds a flyout needs relative so the panel anchors to it */
.has-drop { position: relative; }

/* Override static for mega items — mega is fixed to viewport */
.has-drop:has(> .mega-panel)   { position: static; }
.has-drop:has(> .mega-panel--sm) { position: relative; }

/* Flyout panel */
.flyout-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 220px;
  max-width: 280px;
  background: #fff;
  border: 1px solid var(--m-bd);
  border-radius: 12px;
  box-shadow: var(--m-sh);
  padding: 6px;
  list-style: none;
  z-index: 9800;
  /* Hidden state */
  opacity: 0; visibility: hidden;
  transform: translateY(-5px);
  pointer-events: none;
  transition:
    opacity var(--dur) var(--ease),
    transform var(--dur) var(--ease),
    visibility 0s linear var(--dur);
}
/* Gradient accent top bar */
.flyout-panel::before {
  content: '';
  display: block;
  height: 2px;
  background: linear-gradient(90deg, var(--c-red), var(--c-amber), var(--c-teal));
  border-radius: 12px 12px 0 0;
  margin: -6px -6px 6px;
}

/* Show on hover / focus-within */
.has-drop:hover > .flyout-panel,
.has-drop:focus-within > .flyout-panel,
.flyout-panel.kb-open {
  opacity: 1; visibility: visible;
  transform: translateY(0); pointer-events: auto;
  transition:
    opacity var(--dur) var(--ease),
    transform var(--dur) var(--ease),
    visibility 0s linear 0s;
}

/* Flyout list item */
.flyout-li { list-style: none; position: relative; }

/* Flyout link */
.flyout-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 600;
  color: #071a2f;
  text-decoration: none;
  border-radius: 7px;
  white-space: nowrap;
  transition: background var(--dur), color var(--dur);
}
.flyout-link:hover {
  background: var(--m-ih);
  color: var(--c-red);
}

/* Right-arrow indicator for items with grandchildren */
.nav-arr-r {
  display: inline-flex;
  opacity: .35;
  flex-shrink: 0;
  margin-left: 4px;
  transition: transform var(--dur), opacity var(--dur);
}
.has-flyout-sub:hover > .flyout-link .nav-arr-r,
.has-flyout-sub:focus-within > .flyout-link .nav-arr-r {
  transform: rotate(-90deg);
  opacity: 1;
}

/* Level-2 (grandchild) flyout — appears to the right */
.flyout-sub {
  position: absolute;
  top: -6px;
  left: calc(100% + 4px);
  min-width: 200px;
  max-width: 260px;
  background: #fff;
  border: 1px solid var(--m-bd);
  border-radius: 12px;
  box-shadow: var(--m-sh);
  padding: 6px;
  list-style: none;
  z-index: 9801;
  opacity: 0; visibility: hidden;
  transform: translateX(-4px);
  pointer-events: none;
  transition:
    opacity var(--dur) var(--ease),
    transform var(--dur) var(--ease),
    visibility 0s linear var(--dur);
}
.flyout-sub::before {
  content: '';
  display: block;
  height: 2px;
  background: linear-gradient(90deg, var(--c-red), var(--c-amber));
  border-radius: 12px 12px 0 0;
  margin: -6px -6px 6px;
}
.has-flyout-sub:hover > .flyout-sub,
.has-flyout-sub:focus-within > .flyout-sub {
  opacity: 1; visibility: visible;
  transform: translateX(0); pointer-events: auto;
  transition:
    opacity var(--dur) var(--ease),
    transform var(--dur) var(--ease),
    visibility 0s linear 0s;
}

/* RTL: flyout opens right-to-left */
body.lang-ar .flyout-panel { left: auto; right: 0; }
body.lang-ar .flyout-sub   { left: auto; right: calc(100% + 4px); transform: translateX(4px); }
body.lang-ar .has-flyout-sub:hover > .flyout-sub,
body.lang-ar .has-flyout-sub:focus-within > .flyout-sub { transform: translateX(0); }

/* ═══════════════════════════════════════════════════════════════
   v13.0 — MOBILE SUB-OF-SUB
   .mn-sub--d0 = level 1 (direct children of top-level item)
   .mn-sub--d1 = level 2 (grandchildren)
   ═══════════════════════════════════════════════════════════════ */

/* Row wrapper inside sub item (link + optional toggle) */
.mn-sub-row {
  display: flex;
  align-items: stretch;
  min-height: 44px;
}
/* Sub-item that has its own children */
.mn-sub-li--has > .mn-sub-row { border-bottom: 1px solid rgba(255,255,255,.04); }

/* Smaller toggle button for nested levels */
.mn-tog--sm {
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; width: 42px;
  background: transparent; border: none;
  border-left: 1px solid rgba(255,255,255,.06);
  cursor: pointer;
  color: rgba(255,255,255,.25);
  transition: color var(--dur), background var(--dur);
}
.mn-tog--sm:hover { color: rgba(255,255,255,.65); background: rgba(255,255,255,.04); }
.mn-tog--sm svg   { width: 12px; height: 12px; transition: transform .24s var(--ease); }
.mn-tog--sm.is-open { color: var(--c-teal); }
.mn-tog--sm.is-open svg { transform: rotate(180deg); }
body.lang-ar .mn-tog--sm { border-left: none; border-right: 1px solid rgba(255,255,255,.06); }

/* Level-2 sub (grandchildren) — deeper indent + darker bg */
.mn-sub--d1 {
  background: rgba(0,0,0,.22);
}
.mn-sub--d1 .mn-sub-link {
  padding-left: 22px;
  font-size: 12px;
  color: rgba(255,255,255,.45);
}
.mn-sub--d1 .mn-sub-link:hover { color: rgba(255,255,255,.80); }
body.lang-ar .mn-sub--d1 .mn-sub-link { padding-left: 12px; padding-right: 22px; }

/* Indent line for plain WP child items (no icon) */
.mn-sub-indent {
  width: 16px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.mn-sub-indent::before {
  content: '';
  display: block;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgba(255,255,255,.25);
}

/* Nested max-height: enough for grandchildren */
.mn-sub--d0.is-open { max-height: 1200px; }
.mn-sub--d1.is-open { max-height: 600px; }

/* Tint colours work inside sub panels too */
.mn-sub .mn-sub-ic.c-water  { background: rgba(41,171,226,.22); }
.mn-sub .mn-sub-ic.c-energy { background: rgba(251,176,59,.22); }
.mn-sub .mn-sub-ic.c-iot    { background: rgba(102,45,140,.22); }
.mn-sub .mn-sub-ic.c-esg    { background: rgba(5,150,105,.22);  }
.mn-sub .mn-sub-ic.c-ai     { background: rgba(41,171,226,.20); }
.mn-sub .mn-sub-ic.c-city   { background: rgba(212,20,90,.18);  }
.mn-sub .mn-sub-ic.c-eco    { background: rgba(5,150,105,.18);  }
.mn-sub .mn-sub-ic.c-report { background: rgba(102,45,140,.20); }

/* ═══════════════════════════════════════════════════════════════
   v13.0 — MEGA PANEL open trigger also covers flyout
   Both are children of .has-drop so hover on the <li> shows them.
   This rule just keeps both consistent.
   ═══════════════════════════════════════════════════════════════ */
.has-drop:hover > .flyout-panel,
.has-drop:focus-within > .flyout-panel { /* already defined above */ }

/* ── v14: Mobile sub-item description text ── */
.mn-sub-text { display:flex; flex-direction:column; gap:1px; min-width:0; overflow:hidden; }
.mn-sub-text strong { display:block; font-size:13px; font-weight:500; color:rgba(255,255,255,.70); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mn-sub-text em { display:block; font-size:10.5px; font-style:normal; color:rgba(255,255,255,.32); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.3; }
.mn-sub-link:hover .mn-sub-text strong { color:rgba(255,255,255,.92); }

/* ── v14: Mega from WP — fix grandchild rows rendered via swti_menu_item ── */
/* Suppress the first (PHP-data) mi render inside swti_render_mega_from_wp
   since we echo a replacement right after — hide duplicate */
.mega-col .mi:empty { display:none; }