/* HORIZONTAL (desktop) — dropdowns & flyouts */
.sf-horizontal{display:flex;gap:24px;align-items:center}
.sf-horizontal>li{position:relative}
.sf-horizontal>li>a{display:block;padding:14px 10px;text-transform:uppercase;letter-spacing:.02em}
.sf-horizontal>li>a:after{content:"";display:inline-block;margin-left:6px;border:4px solid transparent;border-top-color:currentColor;opacity:.5}
/* First dropdown */
.sf-horizontal>li>ul.sub-menu{
  position:absolute;left:0;top:100%;min-width:260px;background:var(--fs-menu-bg, #ffffff);
  border:1px solid rgba(0,0,0,.07);box-shadow:0 10px 20px rgba(0,0,0,.08);
  padding:8px 0;display:none;z-index:9999;
}
.sf-horizontal>li:hover>ul.sub-menu{display:block}
.sf-horizontal ul.sub-menu li{position:relative}
.sf-horizontal ul.sub-menu>li>a{display:block;padding:10px 14px;white-space:nowrap}
/* Second+ level flyout */
.sf-horizontal ul.sub-menu li.menu-item-has-children>ul.sub-menu{
  position:absolute;left:100%;top:0;min-width:240px;background:var(--fs-menu-bg,#fff);
  border:1px solid rgba(0,0,0,.07);box-shadow:0 10px 20px rgba(0,0,0,.08);
  padding:8px 0;display:none;
}
.sf-horizontal ul.sub-menu li.menu-item-has-children:hover>ul.sub-menu{display:block}

/* Mobile fallback: turn horizontal into accordion under 1024px */
@media (max-width:1023.98px){
  .sf-horizontal{display:block}
  .sf-horizontal ul.sub-menu{position:static;display:none;border:0;box-shadow:none;padding:0}
  .sf-horizontal li.sf-open>ul.sub-menu{display:block}
  .sf-horizontal li.menu-item-has-children>a::after{content:"▸";float:right;opacity:.6}
}