/* Prevent WoodMart / Elementor / site-header wrappers from clipping the mega panel */
body:has(#coi-meganav) .whb-header,
body:has(#coi-meganav) .whb-main-header,
body:has(#coi-meganav) .whb-general-header,
body:has(#coi-meganav) .whb-row,
body:has(#coi-meganav) .whb-column,
body:has(#coi-meganav) .whb-flex-row,
body:has(#coi-meganav) .whb-flex-col,
body:has(#coi-meganav) .elementor-widget-shortcode,
body:has(#coi-meganav) .elementor-shortcode,
body:has(#coi-meganav) .elementor-widget-html,
body:has(#coi-meganav) .elementor-widget-container,
body:has(#coi-meganav) .coi-site-header,
body:has(#coi-meganav) .coi-mainbar,
body:has(#coi-meganav) .coi-mainbar-menu,
body:has(#coi-meganav) .wd-page-wrapper {
  overflow: visible !important;
}

#coi-meganav, #coi-meganav *{margin:0;padding:0;box-sizing:border-box;}
#coi-meganav{
  --navy:#123C63; --blue:#1266C5; --blue-dark:#0E4F9C;
  --tint-1:#EEF4FB; --tint-2:#E1EDF9;
  --ink:#22384C; --muted:#5C6E7E; --line:#E1EDF9;
  font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  position:relative; width:100%; max-width:100%; background:#fff; z-index:9999;
  overflow:visible;
}
#coi-meganav ul{list-style:none;}
#coi-meganav a{text-decoration:none; color:inherit;}
#coi-meganav svg{flex:none; display:block; max-width:100%;}

/* ---------- top-level bar ---------- */
#coi-meganav .coi-bar{
  display:flex; align-items:center; justify-content:center;
  gap:2px; min-height:64px; flex-wrap:wrap;
  width:100%;
}
#coi-meganav .coi-top{position:static;}
#coi-meganav .coi-top > a{
  display:flex; align-items:center; gap:7px;
  padding:22px 15px; font-size:16px; font-weight:700; color:var(--navy);
  white-space:nowrap; transition:color .15s ease; position:relative;
}
#coi-meganav .coi-top > a .coi-caret{
  width:9px; height:9px; border-right:2.5px solid currentColor; border-bottom:2.5px solid currentColor;
  transform:rotate(45deg) translateY(-2px); transition:transform .2s ease; margin-top:-3px;
  flex:none;
}
#coi-meganav .coi-top:hover > a,
#coi-meganav .coi-top.coi-open > a{color:var(--blue);}
#coi-meganav .coi-top.coi-open > a .coi-caret{transform:rotate(-135deg) translateY(-3px); margin-top:4px;}
#coi-meganav .coi-top.coi-open > a::after{
  content:""; position:absolute; left:12px; right:12px; bottom:12px; height:3px;
  background:var(--blue); border-radius:3px;
}

/* ---------- simple dropdown ---------- */
#coi-meganav .coi-drop{
  position:absolute; top:100%; left:auto; min-width:300px; max-width:min(380px, 100vw - 24px);
  background:#fff; border-top:3px solid var(--blue);
  border-radius:0 0 12px 12px; box-shadow:0 22px 44px -10px rgba(18,60,99,.24);
  padding:10px; opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
  z-index:10000;
}
#coi-meganav .coi-top{position:relative;}
#coi-meganav .coi-top.coi-open > .coi-drop{opacity:1; visibility:visible; transform:translateY(0);}
#coi-meganav .coi-drop a{
  display:block; padding:10px 14px; border-radius:8px;
  font-size:14.5px; font-weight:500; color:var(--ink); line-height:1.35;
  transition:background .12s ease, color .12s ease;
  white-space:normal; word-break:break-word;
}
#coi-meganav .coi-drop a:hover{background:var(--tint-1); color:var(--blue-dark); font-weight:600;}

/* ---------- MEGA PANEL ---------- */
#coi-meganav .coi-top--mega{position:static;}
#coi-meganav .coi-mega{
  position:absolute; top:100%; left:0; right:0;
  width:auto; max-width:1180px; margin-inline:auto;
  background:#fff; border-top:3px solid var(--blue);
  border-radius:0 0 14px 14px; box-shadow:0 30px 60px -14px rgba(18,60,99,.28);
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
  z-index:10000;
  overflow:visible;
}
#coi-meganav .coi-top--mega.coi-open .coi-mega{
  opacity:1; visibility:visible; transform:translateY(0);
}
#coi-meganav .coi-mega-grid{
  display:grid; grid-template-columns:1fr 1fr 1.05fr;
  gap:0 44px; padding:30px 38px 26px;
}
#coi-meganav .coi-mega-grid > div{min-width:0;}

#coi-meganav .coi-group{margin-bottom:26px;}
#coi-meganav .coi-group:last-child{margin-bottom:0;}
#coi-meganav .coi-group-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  padding-bottom:9px; margin-bottom:8px; border-bottom:2px solid var(--navy);
}
#coi-meganav .coi-group-head h4{
  font-size:12.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  color:var(--navy);
}
#coi-meganav .coi-group-head .coi-count{
  font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); white-space:nowrap;
}
#coi-meganav .coi-group li a{
  display:flex; align-items:center; gap:11px;
  padding:8px 10px; margin:0 -10px; border-radius:8px;
  font-size:15px; font-weight:500; color:var(--ink); line-height:1.3;
  transition:background .12s ease, color .12s ease;
  white-space:normal; word-break:break-word;
}
#coi-meganav .coi-group li a:hover{background:var(--tint-1); color:var(--blue-dark); font-weight:600;}
#coi-meganav .coi-group li a svg{
  width:18px; height:18px; stroke:var(--muted); stroke-width:1.7;
  fill:none; stroke-linecap:round; stroke-linejoin:round;
  transition:stroke .12s ease; flex:none;
}
#coi-meganav .coi-group li a:hover svg{stroke:var(--blue);}

#coi-meganav .coi-group li a.coi-hot{
  background:var(--tint-1); color:var(--blue); font-weight:700;
}
#coi-meganav .coi-group li a.coi-hot svg{stroke:var(--blue);}
#coi-meganav .coi-group li a.coi-hot:hover{background:var(--tint-2); color:var(--blue-dark);}

#coi-meganav .coi-mega-foot{
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding:16px 38px 20px; border-top:1px solid var(--line);
}
#coi-meganav .coi-mega-foot p{
  font-size:14px; color:var(--muted); font-style:italic; font-weight:500;
  min-width:0; flex:1 1 220px;
}
#coi-meganav .coi-foot-btns{display:flex; gap:12px; flex-shrink:0; flex-wrap:wrap;}
#coi-meganav .coi-btn{
  display:inline-flex; align-items:center; gap:8px;
  font-size:14px; font-weight:700; padding:11px 20px; border-radius:9px;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
  cursor:pointer; line-height:1;
}
#coi-meganav .coi-btn svg{width:16px; height:16px; stroke:currentColor; stroke-width:1.9; fill:none; stroke-linecap:round; stroke-linejoin:round;}
#coi-meganav .coi-btn--outline{border:2px solid var(--navy); color:var(--navy); background:#fff;}
#coi-meganav .coi-btn--outline:hover{background:var(--tint-1);}
#coi-meganav .coi-btn--solid{background:var(--navy); border:2px solid var(--navy); color:#fff;}
#coi-meganav .coi-btn--solid:hover{background:var(--blue-dark); border-color:var(--blue-dark); box-shadow:0 6px 16px rgba(18,60,99,.3);}

#coi-meganav a:focus-visible{outline:2px solid var(--blue); outline-offset:2px; border-radius:6px;}

#coi-meganav .coi-burger{
  display:none; align-items:center; gap:10px;
  background:none; border:0; cursor:pointer; padding:16px 14px;
  font-family:inherit; font-size:15px; font-weight:800; color:var(--navy);
  letter-spacing:.04em; width:100%;
}
#coi-meganav .coi-burger span{display:block; width:22px; height:2.5px; background:var(--navy); border-radius:2px; margin:4px 0;}

@media (min-width:1024px) and (max-width:1280px){
  #coi-meganav .coi-top > a{padding:20px 10px; font-size:14.5px;}
  #coi-meganav .coi-mega-grid{gap:0 22px; padding:24px 22px 20px;}
  #coi-meganav .coi-group li a{font-size:14px; gap:8px;}
  #coi-meganav .coi-mega-foot{padding:14px 22px 16px;}
}

/* ---------- MOBILE / TABLET (<1024px) ---------- */
@media (max-width:1023px){
  #coi-meganav{
    max-width:100%;
    overflow:visible;
  }
  #coi-meganav .coi-burger{display:flex;}

  #coi-meganav .coi-bar{
    display:none;
    flex-direction:column !important;
    flex-wrap:nowrap !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    gap:0;
    border-top:1px solid var(--line);
    width:100% !important;
    max-height:min(78vh, calc(100dvh - 110px));
    overflow-x:hidden;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-y;
    overscroll-behavior:contain;
  }
  #coi-meganav.coi-mobile-open .coi-bar{
    display:flex !important;
  }

  #coi-meganav .coi-top{
    position:relative !important;
    border-bottom:1px solid var(--tint-2);
    width:100%;
    flex:0 0 auto;
  }
  #coi-meganav .coi-top--mega{
    position:relative !important;
  }
  #coi-meganav .coi-top > a{
    padding:15px 18px; font-size:15px; justify-content:space-between;
    width:100%; white-space:normal;
  }
  #coi-meganav .coi-top > a .coi-caret{transform:rotate(45deg); margin-top:0;}
  #coi-meganav .coi-top.coi-open > a{background:var(--tint-1);}
  #coi-meganav .coi-top.coi-open > a::after{display:none;}

  /* Panels become inline accordion content */
  #coi-meganav .coi-drop,
  #coi-meganav .coi-mega{
    position:static !important;
    inset:auto !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    transform:none !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    margin:0 !important;
    border-top:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    display:none !important;
    opacity:1 !important;
    visibility:visible !important;
    transition:none !important;
    background:#FAFCFE;
    padding:4px 8px 12px;
    overflow:visible !important;
    height:auto !important;
    max-height:none !important;
  }
  #coi-meganav .coi-top.coi-open > .coi-drop,
  #coi-meganav .coi-top--mega.coi-open > .coi-mega,
  #coi-meganav .coi-top--mega.coi-open .coi-mega{
    display:block !important;
  }

  #coi-meganav .coi-mega-grid{
    display:flex !important;
    flex-direction:column !important;
    gap:0 !important;
    padding:0 !important;
  }
  #coi-meganav .coi-mega-grid > div{
    width:100% !important;
    display:block !important;
  }

  /* Nested accordion for Cubicles groups */
  #coi-meganav .coi-group{
    margin:0 0 6px;
    border:1px solid var(--tint-2);
    border-radius:8px;
    background:#fff;
    overflow:hidden;
  }
  #coi-meganav .coi-group-head{
    margin:0;
    padding:12px 12px;
    border-bottom:0;
    align-items:center;
    cursor:pointer;
    user-select:none;
    -webkit-tap-highlight-color:transparent;
  }
  #coi-meganav .coi-group-head::after{
    content:"";
    width:8px; height:8px;
    border-right:2px solid var(--navy);
    border-bottom:2px solid var(--navy);
    transform:rotate(45deg);
    margin-left:auto;
    flex:none;
    transition:transform .15s ease;
  }
  #coi-meganav .coi-group.coi-group-open .coi-group-head{
    border-bottom:2px solid var(--navy);
    background:var(--tint-1);
  }
  #coi-meganav .coi-group.coi-group-open .coi-group-head::after{
    transform:rotate(-135deg);
    margin-top:4px;
  }
  #coi-meganav .coi-group > ul{
    display:none;
    padding:4px 6px 8px;
  }
  #coi-meganav .coi-group.coi-group-open > ul{
    display:block;
  }

  #coi-meganav .coi-group li a{
    margin:0;
    padding:11px 10px;
    font-size:14.5px;
  }

  #coi-meganav .coi-mega-foot{
    padding:12px 6px 4px;
    flex-direction:column;
    align-items:stretch;
    gap:12px;
  }
  #coi-meganav .coi-foot-btns{
    flex-direction:column;
    width:100%;
  }
  #coi-meganav .coi-btn{
    justify-content:center;
    width:100%;
  }
}

/* Lock page scroll while mobile menu is open — do NOT use touch-action:none (breaks inner scroll) */
html.coi-nav-lock,
body.coi-nav-lock{
  overflow:hidden !important;
}

@media (prefers-reduced-motion:reduce){
  #coi-meganav *{transition:none !important;}
}