/* Minimal styles; theme classes (bm-pill etc.) do most of the work. */
.cq-top-guides-block{margin-bottom:1rem}
.cq-top-guides-title{margin-bottom:.5rem}
.cq-top-guides-pills{gap:.5rem;display:flex;flex-wrap:wrap}

/*
  Theme-safe dropdown styling for the injected Guides submenu.
  Scoped to .cq-top-guides-menu so we don't affect other menus.
*/
.bm-menu li.cq-top-guides-menu{position:relative}
.bm-menu li.cq-top-guides-menu > a::after{content:'▾'; font-size:12px; margin-left:6px; color:var(--bm-muted2)}
.bm-menu li.cq-top-guides-menu:hover > a::after,
.bm-menu li.cq-top-guides-menu:focus-within > a::after{content:'▴'; color:var(--bm-text)}

.bm-menu li.cq-top-guides-menu > .sub-menu{
  list-style:none;
  margin:0;
  padding:8px;
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  min-width:220px;
  background: rgba(11,22,41,.96);
  border:1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  z-index:80;

  opacity:0;
  visibility:hidden;
  transform: translateY(6px);
  transition: opacity .12s ease, transform .12s ease, visibility .12s;
}
html[data-bm-theme="light"] .bm-menu li.cq-top-guides-menu > .sub-menu{
  background: rgba(255,255,255,.98);
  border-color: rgba(10,20,40,.12);
}

.bm-menu li.cq-top-guides-menu:hover > .sub-menu,
.bm-menu li.cq-top-guides-menu:focus-within > .sub-menu{
  opacity:1;
  visibility:visible;
  transform: translateY(0);
}

.bm-menu li.cq-top-guides-menu > .sub-menu li{margin:0; padding:0}
.bm-menu li.cq-top-guides-menu > .sub-menu a{
  display:block;
  padding:10px 12px;
  border-radius: 12px;
  color: var(--bm-muted);
  white-space:nowrap;
}
.bm-menu li.cq-top-guides-menu > .sub-menu a:hover{background: rgba(255,255,255,.05); color: var(--bm-text)}
html[data-bm-theme="light"] .bm-menu li.cq-top-guides-menu > .sub-menu a:hover{background: rgba(10,20,40,.05)}

/* Mobile drawer: render submenu inline (no absolute dropdown). */
.bm-menu--stack li.cq-top-guides-menu > .sub-menu{
  position:static;
  opacity:1;
  visibility:visible;
  transform:none;
  box-shadow:none;
  border:none;
  background:transparent;
  padding:4px 0 0;
  min-width:0;
}
.bm-menu--stack li.cq-top-guides-menu > .sub-menu a{padding:10px 12px 10px 18px;}
