/* ============================================================================
   AppHeader.razor — the app-style top bar (hamburger | centered logo | login),
   identical to the header on the member/Posts pages (PublicLayout). Self-contained
   so it can be dropped on the homepage / content pages (HomePress, PublicPress)
   without pulling in the whole app stylesheet. Relies on --s4-* vars + the
   .s4-menu-btn (SideMenu) and .s4-logo (Logo) styles from sidemenu.css.
   ========================================================================== */
.s4-apphead {
  position: relative; z-index: 30;
  display: flex; align-items: center; gap: .6rem;
  min-height: 64px; padding: .5rem clamp(.7rem, 4vw, 1.1rem);
  padding-top: calc(.5rem + env(safe-area-inset-top));
  background: linear-gradient(180deg, #ffffff 0%, #fffdfe 100%);
  box-shadow: 0 1px 0 rgba(26,20,23,0.04), 0 6px 22px -20px rgba(26,20,23,0.45);
}
.s4-apphead::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, rgba(210,68,123,0.18) 30%, rgba(184,153,95,0.16) 70%, transparent 100%);
}

/* hamburger (SideMenu) is always visible here — override any masthead hiding */
.s4-apphead .s4-menu-btn { display: inline-flex !important; }

/* logo centered between the hamburger and the login button */
.s4-apphead .s4-apphead-logo { flex: 1 1 auto; min-width: 0; display: flex; justify-content: center; }
.s4-apphead .s4-logo { font-size: 12px !important; max-width: 100%; }
.s4-apphead .s4-logo .s4-logo-tx { flex-direction: column; align-items: flex-start; text-align: left; }
.s4-apphead .s4-logo .s4-logo-word { font-size: 1.55em !important; white-space: nowrap; text-align: left !important; }
.s4-apphead .s4-logo .s4-logo-tag { display: block !important; white-space: nowrap; text-align: left !important; }
.s4-apphead .s4-logo .s4-logo-heart { height: 2.7em !important; width: auto !important; }

/* login → refined brand-ghost squircle (matches the Posts/app header exactly):
   softly pink-tinted, fills with the gradient only on hover. */
.s4-apphead-login {
  flex: none; width: 44px; height: 44px; border-radius: 13px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px; text-decoration: none;
  color: var(--s4-pink-deep) !important;
  border: 1px solid rgba(210,68,123,0.26);
  background: linear-gradient(180deg, rgba(210,68,123,0.09) 0%, rgba(210,68,123,0.045) 100%);
  box-shadow: 0 1px 6px -3px rgba(168,30,87,0.22);
  transition: transform .22s var(--s4-ease, ease), box-shadow .22s var(--s4-ease, ease), background .22s var(--s4-ease, ease), color .22s var(--s4-ease, ease), border-color .22s var(--s4-ease, ease);
}
.s4-apphead-login:hover {
  color: #fff !important; border-color: transparent;
  background: linear-gradient(135deg, var(--s4-pink) 0%, var(--s4-pink-deep) 100%);
  transform: translateY(-1px); box-shadow: 0 9px 20px -10px rgba(168,30,87,0.5);
}
.s4-apphead-login:active { transform: scale(0.94); }