/* The Wingmasters lockup (see _BrandLockup.cshtml): winged W + WINGMASTERS + the "PIGEON RACING SYSTEM"
   strap. The mark and name ride on currentColor — white by default for dark surfaces (portal sidebar,
   login brand panel); --onlight switches to the primary ink for white surfaces (public top nav, footer).
   The strap's orange and teal are the brand pack's own and never change with the surface. */
.brand-lockup {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #fff;
}

.brand-lockup--onlight { color: var(--primary); }

.brand-lockup__mark {
    height: 24px;
    width: auto;
    flex: none;
}

.brand-lockup__text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.brand-lockup__name {
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase;
    font-size: 1.05rem;
    line-height: 1;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.brand-lockup__strap {
    display: flex;
    gap: 0.6em;
    font-size: 0.5rem;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    white-space: nowrap;
}

.brand-lockup__strap span:nth-child(1) { color: var(--brand-orange); }
.brand-lockup__strap span:nth-child(3) { color: var(--brand-teal); }

/* The portal sidebar stacks the lockup — wing above the wordmark, the brand pack's own arrangement —
   because the side-by-side row is wider than the sidebar's content box, so only the stack can sit with
   even space both sides (the sidebar centres it via text-align). */
.sidebar__brand .brand-lockup {
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.sidebar__brand .brand-lockup__mark { height: 30px; }
.sidebar__brand .brand-lockup__text { align-items: center; }

/* Phones: the public top nav shares its row with the Sign up / Login buttons, so the lockup slims down —
   the strap goes, the mark and name shrink — rather than wrapping or shoving the buttons off the edge.
   The sidebar keeps the full lockup at every width (its drawer is always wide enough). */
@media (max-width: 560px) {
    .topnav .brand-lockup__strap { display: none; }
    .topnav .brand-lockup__mark { height: 19px; }
    .topnav .brand-lockup__name { font-size: 0.9rem; }
}

/* The tightest phones: the top nav keeps just the wing so Sign up / Login never wrap. */
@media (max-width: 420px) {
    .topnav .brand-lockup__text { display: none; }
    .topnav .brand-lockup__mark { height: 24px; }
}