/* Shared marketing topper — pair with rcs-marketing-topper.js + rcs-pilot-layout.css */

header[data-rcs-marketing-topper]:empty {
  min-height: calc(56px + env(safe-area-inset-top, 0px));
  display: block;
  background: #080808;
  border-bottom: 1px solid #2a2c31;
}

html[data-theme="light"] header[data-rcs-marketing-topper]:empty {
  background: #ffffff;
  border-bottom-color: #d5dae1;
}

/* Single scroll row — never wrap onto new lines (mobile/app). */
.rcs-marketing-topper.rcs-pilot-topper--v2 .rcs-pilot-nav-scroller {
  min-width: 0;
  max-width: 100%;
  width: 100%;
  overflow: hidden;
  pointer-events: auto;
}

.rcs-marketing-topper.rcs-pilot-topper--v2 .rcs-pt-nav {
  flex-wrap: nowrap;
  gap: 4px;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
}

.rcs-marketing-topper.rcs-pilot-topper--v2 .rcs-pt-nav::-webkit-scrollbar {
  display: none;
}

.rcs-marketing-topper.rcs-pilot-topper--v2 .rcs-pt-nav a {
  flex: 0 0 auto;
  white-space: nowrap;
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 0.78rem;
  padding: 6px 10px;
}

/* Active = red accent (same as Hangar / pilot topper) — keep explicit for Home chrome */
.rcs-marketing-topper.rcs-pilot-topper--v2 .rcs-pt-nav a.active,
.rcs-marketing-topper.rcs-pilot-topper--v2 .rcs-pt-nav a.active:hover,
html[data-theme="dark"] .rcs-marketing-topper.rcs-pilot-topper--v2 .rcs-pt-nav a.active,
html[data-theme="light"] .rcs-marketing-topper.rcs-pilot-topper--v2 .rcs-pt-nav a.active,
html[data-theme="light"] .rcs-marketing-topper.rcs-pilot-topper--v2 .rcs-pt-nav a.active:hover {
  color: #fff;
  background: linear-gradient(180deg, var(--rcs-pt-accent-hi, #ff2a1f), var(--rcs-pt-accent, #e10600));
  border-bottom-color: var(--rcs-pt-accent-hi, #ff2a1f);
  box-shadow: 0 0 18px var(--rcs-pt-glow, rgba(225, 6, 0, 0.35));
}

/* Auth slot: hold width until /api/auth/me resolves — no Pilot login → My Profile flash. */
.rcs-marketing-topper #rcs-mt-login {
  min-width: 5.75rem;
  justify-content: center;
  box-sizing: border-box;
}

.rcs-marketing-topper #rcs-mt-login.is-pending {
  visibility: hidden;
  pointer-events: none;
}

.rcs-marketing-topper .rcs-pt-avatar--guest {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--rcs-pt-muted, #94a3b8);
  text-decoration: none;
}

/* Soft chrome: empty topper band does not steal clicks; controls stay live. */
.rcs-marketing-topper.rcs-pilot-topper {
  pointer-events: none;
}

.rcs-marketing-topper .rcs-pt-brand,
.rcs-marketing-topper .rcs-pilot-nav-scroller,
.rcs-marketing-topper .rcs-pt-nav,
.rcs-marketing-topper .rcs-pt-tools,
.rcs-marketing-topper .rcs-pt-brand a,
.rcs-marketing-topper .rcs-pt-nav a,
.rcs-marketing-topper .rcs-pt-tools a,
.rcs-marketing-topper .rcs-pt-tools button,
.rcs-marketing-topper .rcs-pt-search,
.rcs-marketing-topper .rcs-pt-search input,
.rcs-marketing-topper .rcs-pt-bell-menu,
.rcs-marketing-topper .rcs-pt-search-hits {
  pointer-events: auto;
}

@media (max-width: 800px) {
  /* Match hangar / pilot: brand · donate · bell · avatar on row 1; full-width nav row 2 */
  .rcs-marketing-topper.rcs-pilot-topper--v2 .rcs-pt {
    grid-template-columns: max-content minmax(0, 1fr) max-content max-content max-content;
    grid-template-rows: auto auto;
    column-gap: 6px;
    row-gap: 6px;
    padding: 8px 12px;
  }

  .rcs-marketing-topper.rcs-pilot-topper--v2 .rcs-pt-brand {
    grid-column: 1;
    grid-row: 1;
  }

  .rcs-marketing-topper.rcs-pilot-topper--v2 .rcs-pt-tools {
    display: contents;
  }

  .rcs-marketing-topper .rcs-pt-donate {
    grid-column: 3;
    grid-row: 1;
  }

  .rcs-marketing-topper .rcs-pt-search-wrap {
    display: none !important;
  }

  .rcs-marketing-topper .rcs-pt-bell-wrap {
    grid-column: 4;
    grid-row: 1;
  }

  .rcs-marketing-topper .rcs-pt-avatar {
    grid-column: 5;
    grid-row: 1;
  }

  .rcs-marketing-topper.rcs-pilot-topper--v2 .rcs-pilot-nav-scroller {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
}