/* Fans254 v13.6.89 — shared public top-header Admin authority.
   Only headers rendered by SocialUi::social_mobile_header/social_desktop_header
   receive these IDs. Reels mobile, notifications mobile and other intentional
   custom mobile headers are not targeted. */

#fans254-mobile-top-header,
#fans254-desktop-top-header{
  background:var(--f-header-bg,var(--f-surface))!important;
  color:var(--f-text)!important;
}

/* Website mark + name: Appearance owns mark/name colors and mark dimensions;
   Typography owns family, device size and device weight. */
#fans254-mobile-top-header .f254-social-wordmark{
  color:var(--f-header-name-color,var(--f-link,var(--f-blue)))!important;
  font-family:var(--f-font-brand,var(--f-font-heading))!important;
  font-size:var(--f-type-brand-size,22px)!important;
  font-weight:var(--f-type-brand-weight,800)!important;
  line-height:1!important;
  letter-spacing:-.035em!important;
  gap:9px!important;
  min-width:0!important;
}
#fans254-mobile-top-header .f254-social-wordmark>span{
  color:var(--f-header-name-color,var(--f-link,var(--f-blue)))!important;
  font:inherit!important;
  line-height:1!important;
}
#fans254-mobile-top-header .f254-social-wordmark-logo,
#fans254-mobile-top-header .f254-social-header-logo{
  width:var(--f-site-logo-width,38px)!important;
  height:var(--f-site-logo-height,38px)!important;
  min-width:var(--f-site-logo-width,38px)!important;
  min-height:var(--f-site-logo-height,38px)!important;
  max-width:var(--f-site-logo-width,38px)!important;
  max-height:var(--f-site-logo-height,38px)!important;
  color:var(--f-header-logo-color,var(--f-link,var(--f-blue)))!important;
  object-fit:contain!important;
  transform:none!important;
}
#fans254-mobile-top-header .f254-social-wordmark-logo.f254-site-logo-mask,
#fans254-mobile-top-header .f254-social-header-logo.f254-site-logo-mask{
  background-color:var(--f-header-logo-color,var(--f-link,var(--f-blue)))!important;
}


/* The tablet/desktop site identity is rendered by the same SocialUi primary
   navigation route. Keep its logo and name under the same Admin controls
   without changing tablet visibility rules. */
#fans254-shared-brand{
  color:var(--f-header-name-color,var(--f-link,var(--f-blue)))!important;
}
#fans254-shared-brand .f254-social-brand-mark{
  width:var(--f-site-logo-width,36px)!important;
  height:var(--f-site-logo-height,36px)!important;
  min-width:var(--f-site-logo-width,36px)!important;
  max-width:var(--f-site-logo-width,36px)!important;
  max-height:var(--f-site-logo-height,36px)!important;
  color:var(--f-header-logo-color,var(--f-link,var(--f-blue)))!important;
  object-fit:contain!important;
}
#fans254-shared-brand>span{
  color:var(--f-header-name-color,var(--f-link,var(--f-blue)))!important;
  font-family:var(--f-font-brand,var(--f-font-heading))!important;
  font-size:var(--f-type-brand-size,23px)!important;
  font-weight:var(--f-type-brand-weight,800)!important;
  line-height:1!important;
}

/* Shared action glyph size. Width and height independently follow Appearance
   mobile/tablet/desktop top-header SVG fields. */
#fans254-mobile-top-header .f254-social-icon-btn>svg,
#fans254-desktop-top-header .f254-social-header-actions>.f254-social-icon-btn>svg,
#fans254-desktop-top-header .f254-social-header-search>svg,
#fans254-desktop-top-header .f254-social-header-search>button>svg{
  width:var(--f-top-header-svg-width,var(--f-icon-size,24px))!important;
  height:var(--f-top-header-svg-height,var(--f-icon-size,24px))!important;
  min-width:var(--f-top-header-svg-width,var(--f-icon-size,24px))!important;
  min-height:var(--f-top-header-svg-height,var(--f-icon-size,24px))!important;
  color:var(--f-icon)!important;
}
#fans254-mobile-top-header .f254-social-icon-btn{
  width:max(36px,calc(var(--f-top-header-svg-width,24px) + 12px))!important;
  height:max(36px,calc(var(--f-top-header-svg-height,24px) + 12px))!important;
  min-width:max(36px,calc(var(--f-top-header-svg-width,24px) + 12px))!important;
}
#fans254-desktop-top-header .f254-social-header-actions>.f254-social-icon-btn{
  width:max(36px,calc(var(--f-top-header-svg-width,24px) + 12px))!important;
  height:max(36px,calc(var(--f-top-header-svg-height,24px) + 12px))!important;
  min-width:max(36px,calc(var(--f-top-header-svg-width,24px) + 12px))!important;
}

/* Account avatar is a dedicated Appearance setting per device. */
#fans254-mobile-top-header .f254-social-mobile-account{
  width:max(36px,calc(var(--f-top-header-avatar-size,36px) + 4px))!important;
  height:max(36px,calc(var(--f-top-header-avatar-size,36px) + 4px))!important;
  min-width:max(36px,calc(var(--f-top-header-avatar-size,36px) + 4px))!important;
  padding:0!important;
}
#fans254-mobile-top-header .f254-social-avatar-mobile-header,
#fans254-mobile-top-header .f254-social-avatar-mobile-header>img{
  width:var(--f-top-header-avatar-size,36px)!important;
  height:var(--f-top-header-avatar-size,36px)!important;
  min-width:var(--f-top-header-avatar-size,36px)!important;
  max-width:var(--f-top-header-avatar-size,36px)!important;
  max-height:var(--f-top-header-avatar-size,36px)!important;
}
#fans254-desktop-top-header .f254-social-account-trigger{
  width:auto!important;
  min-width:calc(var(--f-top-header-avatar-size,34px) + 24px)!important;
  max-width:none!important;
  height:max(40px,calc(var(--f-top-header-avatar-size,34px) + 8px))!important;
  min-height:max(40px,calc(var(--f-top-header-avatar-size,34px) + 8px))!important;
}
#fans254-desktop-top-header .f254-social-avatar-topbar,
#fans254-desktop-top-header .f254-social-avatar-topbar>img{
  width:var(--f-top-header-avatar-size,34px)!important;
  height:var(--f-top-header-avatar-size,34px)!important;
  min-width:var(--f-top-header-avatar-size,34px)!important;
  max-width:var(--f-top-header-avatar-size,34px)!important;
  max-height:var(--f-top-header-avatar-size,34px)!important;
  flex:0 0 var(--f-top-header-avatar-size,34px)!important;
}

/* One counter palette for the shared public header in both themes. */
#fans254-mobile-top-header .f254-social-badge,
#fans254-desktop-top-header .f254-social-badge{
  background:var(--f-header-badge-bg,var(--f-pill-active-bg,var(--f-blue)))!important;
  color:var(--f-header-badge-text,var(--f-pill-active-text,#fff))!important;
  border-color:var(--f-header-bg,var(--f-surface))!important;
}

/* Let larger Admin choices enlarge the shared header instead of clipping them. */
#fans254-mobile-top-header{
  height:auto!important;
  min-height:max(58px,calc(var(--f-site-logo-height,38px) + 12px),calc(var(--f-top-header-avatar-size,36px) + 12px),calc(var(--f-top-header-svg-height,24px) + 12px))!important;
}
#fans254-mobile-top-header>div{
  height:auto!important;
  min-height:max(36px,var(--f-top-header-avatar-size,36px),var(--f-top-header-svg-height,24px))!important;
}
#fans254-desktop-top-header{
  height:auto!important;
  min-height:max(56px,calc(var(--f-top-header-avatar-size,34px) + 14px),calc(var(--f-top-header-svg-height,24px) + 18px))!important;
}

/* Home fixes its header; keep its body/subheader offsets synchronized with the
   same Admin-driven shared-header dimensions. */
@media(max-width:767px){
  html body.f254-page-home{
    --f254-mobile-home-header-height:max(58px,calc(var(--f-site-logo-height,38px) + 12px),calc(var(--f-top-header-avatar-size,36px) + 12px),calc(var(--f-top-header-svg-height,24px) + 12px))!important;
  }
  html body.f254-page-home #fans254-mobile-top-header{
    height:var(--f254-mobile-home-header-height)!important;
    min-height:var(--f254-mobile-home-header-height)!important;
  }
}

/* Keep the desktop/tablet search affordance from clipping when Admin increases
   top-header SVG dimensions. This does not change search behavior. */
#fans254-desktop-top-header .f254-social-header-search{
  grid-template-columns:max(17px,var(--f-top-header-svg-width,24px)) minmax(0,1fr) max(28px,calc(var(--f-top-header-svg-width,24px) + 8px))!important;
  height:auto!important;
  min-height:max(36px,calc(var(--f-top-header-svg-height,24px) + 10px))!important;
}
#fans254-desktop-top-header .f254-social-header-search>button{
  width:max(28px,calc(var(--f-top-header-svg-width,24px) + 8px))!important;
  height:max(28px,calc(var(--f-top-header-svg-height,24px) + 8px))!important;
  min-width:max(28px,calc(var(--f-top-header-svg-width,24px) + 8px))!important;
}