/* assets/social-feed-tabs.css
   Feed header switcher (For you / Following)
   IMPORTANT: only affects /pages/social feed (data-social-root="feed").
   We DO NOT touch global site/header styles.
*/

/* Keep topbar layout stable on the social feed page */
[data-social-root="feed"] .c-social__topbar{
  display:grid;
  grid-template-columns: 44px 1fr 44px;
  align-items:center;
  gap:10px;
  position:relative;
}

/* left + (composer) */
[data-social-root="feed"] .c-social__fab--top:not(.c-social__fab--bell){
  grid-column:1;
  justify-self:start;
}

/* center title switch */
[data-social-root="feed"] .c-social__title--switch{
  grid-column:2;
  justify-self:center;
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:transparent;
  border:0;
  cursor:pointer;
  padding:4px 10px;
  border-radius:14px;
  font-weight:800;color: #909090;
}

[data-social-root="feed"] .c-social__titleChev{
  font-size:12px;
  opacity:.65;
  line-height:1;
}

/* right bell */
[data-social-root="feed"] .c-social__fab--bell{
  grid-column:3;
  justify-self:end;
}

/* dropdown menu (hidden by default) */
[data-social-root="feed"] .c-social__feedMenu{
  position:absolute;
  top:calc(100% + 0px);
  left:50%;
  transform:translateX(-50%);
  min-width:220px;
  max-width:320px;
  background:#fff;
  border:1px solid rgba(0,0,0,.10);
  border-radius:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.14);
  padding:8px;
  z-index:60;
  display:none; /* JS will toggle inline too */
}

[data-social-root="feed"] .c-social__feedMenu[data-open="1"]{ display:block; }

[data-social-root="feed"] .c-social__feedMenuItem{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border:0;
  background:transparent;
  cursor:pointer;
  padding:10px 12px;
  border-radius:12px;
  font-weight:700;
    color: #909090;}

[data-social-root="feed"] .c-social__feedMenuItem:hover{
  background:rgba(0,0,0,.05);
}

[data-social-root="feed"] .c-social__feedMenuItem.is-active::after{
  content:"✓";
  opacity:.85;
  font-weight:900;
}

@media (max-width: 560px){
  [data-social-root="feed"] .c-social__feedMenu{
    min-width:200px;
    max-width:280px;
  }
}