/* ============================================================
   Rekhi Universal Mega Menu v1.0.2 — Frontend CSS
   FIXED: overflow clipping removed, CSS hover fallback, theme guards
   ============================================================ */
:root {
  --rmm-accent: var(--rekhi-menu-accent, #FF6600);
  --rmm-bg: #0a0a0a;
  --rmm-surface: rgba(255,255,255,0.06);
  --rmm-surface-strong: rgba(255,255,255,0.10);
  --rmm-border: rgba(255,255,255,0.10);
  --rmm-text: #ffffff;
  --rmm-muted: #a1a1aa;
  --rmm-faint: #71717a;
  --rmm-radius: 12px;
  --rmm-radius-lg: 18px;
  --rmm-shadow: 0 20px 60px rgba(0,0,0,0.50);
  --rmm-transition: 0.22s cubic-bezier(0.4,0,0.2,1);
  --rmm-font: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}

.rekhi-mega-menu,.rekhi-mega-menu *,.rekhi-mega-menu *::before,.rekhi-mega-menu *::after{box-sizing:border-box}

.rekhi-mega-menu {
  font-family:var(--rmm-font); background:var(--rmm-bg);
  border-bottom:1px solid var(--rmm-border); position:sticky; top:0;
  z-index:9999; width:100%;
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
}

/* Mobile bar */
.rekhi-mega-menu__mobile-bar{display:none;align-items:center;justify-content:space-between;padding:12px 20px}
.rekhi-mega-menu__mobile-logo{font-weight:800;font-size:1rem;color:var(--rmm-accent);font-family:var(--rmm-font)}

/* Hamburger */
.rekhi-mega-menu__hamburger{display:flex;flex-direction:column;gap:5px;background:none;border:none;padding:6px;cursor:pointer;width:36px;height:36px;align-items:center;justify-content:center;border-radius:8px;transition:background var(--rmm-transition)}
.rekhi-mega-menu__hamburger:hover{background:var(--rmm-surface)}
.rekhi-mega-menu__hamburger span{display:block;width:22px;height:2px;background:var(--rmm-text);border-radius:2px;transition:all var(--rmm-transition)}
.rekhi-mega-menu__hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.rekhi-mega-menu__hamburger[aria-expanded="true"] span:nth-child(2){opacity:0}
.rekhi-mega-menu__hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ── Main List (no overflow-x — fixes dropdown clipping) ── */
.rekhi-mega-menu__list{list-style:none;margin:0;padding:0 20px;display:flex;align-items:center;flex-wrap:nowrap;gap:2px}

.rekhi-mega-menu__item{position:relative;flex-shrink:0}
.rekhi-mega-menu__link{
  display:inline-flex;align-items:center;gap:6px;padding:14px 14px;color:var(--rmm-muted);
  text-decoration:none;font-size:0.82rem;font-weight:700;white-space:nowrap;
  border-radius:var(--rmm-radius);transition:all var(--rmm-transition);cursor:pointer;
  letter-spacing:0.01em;font-family:var(--rmm-font);background:transparent;border:none;line-height:1.3
}
.rekhi-mega-menu__link:hover,.rekhi-mega-menu__link:focus-visible{color:var(--rmm-accent)!important;background:var(--rmm-surface)!important;outline:none;text-decoration:none!important}
.rekhi-mega-menu__link:focus-visible{box-shadow:0 0 0 2px var(--rmm-accent)}
.rekhi-mega-menu__icon{display:none} /* icons removed v1.0.2 — kept for back-compat */
.rekhi-mega-menu__arrow{font-size:0.6rem;margin-left:2px;opacity:0.5;transition:transform var(--rmm-transition);flex-shrink:0}

/* Active/open state — shared by JS .is-open and CSS :hover */
.rekhi-mega-menu__item.is-open>.rekhi-mega-menu__link,
.rekhi-mega-menu__item:hover>.rekhi-mega-menu__link{color:var(--rmm-accent)!important;background:var(--rmm-surface-strong)!important;text-decoration:none!important}
.rekhi-mega-menu__item.is-open>.rekhi-mega-menu__link .rekhi-mega-menu__arrow,
.rekhi-mega-menu__item:hover>.rekhi-mega-menu__link .rekhi-mega-menu__arrow{transform:rotate(180deg);opacity:1}

/* ── Dropdown (CSS :hover fallback works without JS) ── */
.rekhi-mega-menu__dropdown{
  position:absolute;top:100%;left:0;background:rgba(10,10,10,0.985);
  border:1px solid var(--rmm-border);border-radius:var(--rmm-radius-lg);
  box-shadow:var(--rmm-shadow);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);
  min-width:260px;opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity 0.18s ease,transform 0.18s ease,visibility 0.18s ease;pointer-events:none
}
.rekhi-mega-menu__item:hover>.rekhi-mega-menu__dropdown,
.rekhi-mega-menu__item.is-open>.rekhi-mega-menu__dropdown{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
.rekhi-mega-menu__dropdown-inner{padding:10px 0}

/* Mega dropdown centered */
.rekhi-mega-menu__dropdown--mega{left:50%;transform:translateX(-50%) translateY(8px);width:min(1180px,calc(100vw - 40px));padding:0}
.rekhi-mega-menu__item:hover>.rekhi-mega-menu__dropdown--mega,
.rekhi-mega-menu__item.is-open>.rekhi-mega-menu__dropdown--mega{transform:translateX(-50%) translateY(0)}

/* Standard submenu */
.rekhi-mega-menu__sub-list{list-style:none;margin:0;padding:0;min-width:220px}
.rekhi-mega-menu__sub-list li{list-style:none;margin:0}
.rekhi-mega-menu__sub-list li a{display:block;padding:10px 20px;color:var(--rmm-muted);text-decoration:none;font-size:0.86rem;font-weight:600;transition:all 0.15s ease;font-family:var(--rmm-font)}
.rekhi-mega-menu__sub-list li a:hover{color:var(--rmm-accent);background:var(--rmm-surface);padding-left:24px;text-decoration:none}

/* Mega grid */
.rekhi-mega-menu__mega-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;padding:28px 32px}
.rekhi-mega-menu__mega-col{padding:0 16px;border-right:1px solid var(--rmm-border)}
.rekhi-mega-menu__mega-col:last-child{border-right:none}
.rekhi-mega-menu__mega-heading{display:block;padding:6px 0 10px;color:var(--rmm-accent);text-decoration:none;font-size:0.84rem;font-weight:800;letter-spacing:0.02em;text-transform:uppercase;transition:color var(--rmm-transition);font-family:var(--rmm-font)}
.rekhi-mega-menu__mega-heading:hover{color:var(--rmm-accent);text-decoration:none}
.rekhi-mega-menu__mega-list{list-style:none;margin:0;padding:0}
.rekhi-mega-menu__mega-list li{list-style:none;margin:0}
.rekhi-mega-menu__mega-list li a{display:block;padding:6px 0;color:var(--rmm-muted);text-decoration:none;font-size:0.82rem;font-weight:500;transition:all 0.15s ease;font-family:var(--rmm-font)}
.rekhi-mega-menu__mega-list li a:hover{color:var(--rmm-text);padding-left:6px;text-decoration:none}

/* Theme guards */
.rekhi-mega-menu a{text-decoration:none!important;box-shadow:none!important}
.rekhi-mega-menu ul{list-style:none!important;padding:0!important;margin:0!important}
.rekhi-mega-menu li{list-style:none!important;margin:0!important}
.rekhi-mega-menu li::before,.rekhi-mega-menu li::after{display:none!important;content:none!important}

/* Tablet */
@media(max-width:1100px){
  .rekhi-mega-menu__link{padding:14px 10px;font-size:0.76rem}
  .rekhi-mega-menu__mega-grid{grid-template-columns:repeat(3,minmax(0,1fr));padding:20px 24px}
}

/* Mobile */
@media(max-width:1024px){
  .rekhi-mega-menu__mobile-bar{display:flex}
  .rekhi-mega-menu__list{display:none;flex-direction:column;padding:0;max-height:calc(100vh - 68px);overflow-y:auto;border-top:1px solid var(--rmm-border)}
  .rekhi-mega-menu__list.is-open{display:flex}
  .rekhi-mega-menu__item{flex-shrink:0;border-bottom:1px solid var(--rmm-border)}
  .rekhi-mega-menu__link{width:100%;padding:16px 20px;justify-content:space-between;font-size:0.92rem;border-radius:0}
  .rekhi-mega-menu__arrow{font-size:0.7rem}
  .rekhi-mega-menu__dropdown{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;border-radius:0;background:rgba(255,255,255,0.02);display:none;pointer-events:auto;min-width:auto}
  .rekhi-mega-menu__item:hover>.rekhi-mega-menu__dropdown{display:none}
  .rekhi-mega-menu__item.is-open>.rekhi-mega-menu__dropdown{display:block}
  .rekhi-mega-menu__sub-list li a{padding:12px 36px;font-size:0.84rem}
  .rekhi-mega-menu__sub-list li a:hover{padding-left:40px}
  .rekhi-mega-menu__dropdown--mega{width:100%;left:0;transform:none}
  .rekhi-mega-menu__mega-grid{grid-template-columns:1fr;gap:0;padding:12px 20px}
  .rekhi-mega-menu__mega-col{padding:8px 0;border-right:none;border-bottom:1px solid var(--rmm-border)}
  .rekhi-mega-menu__mega-col:last-child{border-bottom:none}
  .rekhi-mega-menu__mega-heading{font-size:0.84rem;padding:8px 16px}
  .rekhi-mega-menu__mega-list li a{padding:6px 32px;font-size:0.8rem}
}

@media(max-width:480px){
  .rekhi-mega-menu__mega-grid{padding:8px 12px}
  .rekhi-mega-menu__dropdown-inner{padding:6px 0}
}

@media(prefers-reduced-motion:reduce){
  .rekhi-mega-menu__dropdown,.rekhi-mega-menu__link,.rekhi-mega-menu__sub-list li a,.rekhi-mega-menu__mega-list li a{transition-duration:0.01ms!important;animation:none!important}
}