/* [npca_match_dashboard_header], COMPACT mode (the default) -- a small account-menu link group
   meant to sit inside Juan's existing MGB site header/Bricks menu area. Added 2026-07-23 after the
   first real browser review found the original component (now mode="full", styled by
   dashboard-header.css) too visually heavy for that placement.

   Deliberately kept in its own file, never loaded together with dashboard-header.css for the same
   render -- see modules/dashboard-header/shortcode.php's mode branch. This guarantees full mode's
   masthead-oriented rules (padding, borders, role-color backgrounds, heading typography) can never
   leak into compact mode, and vice versa.

   Every selector below is a single class or class+descendant selector -- no !important anywhere,
   none was needed. No color/background/font-family is set: this is meant to sit inside the
   existing MGB header (commonly a dark background) and must inherit that context's own text color
   and typography rather than impose the light-surface design tokens (--match-ink, --brand-primary,
   etc.) the full mode uses, which are tuned for a white card, not a dark masthead. Low specificity
   throughout so Juan can restyle every part of this from Bricks without fighting the cascade. */

.npca-v2-context-menu {
    /* inline-flex, not flex: this must never force a block-level, full-width box -- it sits
       inline alongside Juan's own existing menu items, sized to its own content. */
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0;
    padding: 0;
}

.npca-v2-context-menu a,
.npca-v2-context-menu .npca-v2-login-trigger {
    display: inline-block;
    color: inherit;
    font: inherit;
    text-decoration: none;
    white-space: nowrap;
}

.npca-v2-context-menu a:hover,
.npca-v2-context-menu .npca-v2-login-trigger:hover {
    text-decoration: underline;
}

/* Resets the Log In trigger's native <button> chrome so it reads as a plain link, matching
   Register/Dashboard/Logout -- compact mode has no concept of a "primary CTA button" the way full
   mode's .npca-v2-button pill styling does. */
.npca-v2-context-menu .npca-v2-login-trigger {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
}

.npca-v2-context-menu .npca-v2-login-trigger:focus-visible,
.npca-v2-context-menu a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

@media (max-width: 480px) {
    .npca-v2-context-menu {
        gap: 8px;
    }
}