/* Header-specific styles for SocialPlace365
   Builds on base.css floating pill header
*/

.site-header-shell {
  /* base structure already defined in base.css; only refinements here */
}

#sp365-header .logo__title {
  font-size: 0.92rem;
}

#sp365-header .logo__subtitle {
  max-width: 10rem;
}

.site-nav--mobile {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.site-nav--mobile a {
  padding-block: 0.35rem;
  font-size: var(--font-size-sm);
}

.site-header__mobile-extra {
  margin-top: var(--space-3);
  border-top: 1px dashed rgba(255, 204, 163, 0.7);
  padding-top: var(--space-3);
}

.site-header__mobile-tag {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

/* Compact-on-scroll state */
.site-header-shell.is-scrolled .site-header {
  height: 60px;
  border-radius: 999px;
}

/* Ensure header links remain obviously clickable without heavy underline */
.site-nav a::after {
  bottom: -0.2em;
}

/* Adjust micro-tag visibility on small screens (hidden in base, only visible in center desktop) */
@media (max-width: 900px) {
  .site-header__mobile-menu {
    z-index: 45;
  }
}