/* Header user menu (login link + logged-in dropdown) */

.big-squash-nav-user {
    list-style: none;
    position: relative;
}

/* The logged-in fragment is two siblings dropped straight into the theme's
   menu <li> (or the shortcode wrapper): the trigger link and the panel. The
   trigger is therefore the item's own menu link, and the theme's nav rules
   (font, case, padding, borders, hover) style it exactly like its neighbours.
   Nothing typographic or box-related is set on it here. The JS adds
   .big-squash-user-dropdown to the parent, which anchors and toggles the panel.
   The panel is a <div> of links, not a <ul>, so theme menu scripts (Genesis'
   Superfish, for one) never mistake it for a submenu and swallow the click. */
/* !important on purpose: the container is the theme's own <li>, and themes
   reposition hovered menu items for their submenus (News Pro sets
   .genesis-nav-menu .menu-item:hover { position: static }). If that wins, the
   absolutely positioned panel loses its anchor and lands at the bottom of the
   page. */
.big-squash-user-dropdown {
    position: relative !important;
}

.big-squash-user-dropdown__trigger {
    white-space: nowrap;
    text-decoration: none;
}

/* The avatar sits inline in the link's text line. Its negative vertical
   margins cancel its height, so the link stays exactly as tall as the
   neighbouring menu links and the image overflows into the link's own padding
   instead of stretching the menu row. */
.big-squash-user-dropdown__avatar {
    --big-squash-avatar-size: 32px;
    display: inline-block;
    width: var(--big-squash-avatar-size);
    height: var(--big-squash-avatar-size);
    margin: calc(var(--big-squash-avatar-size) / -2) 0.5rem calc(var(--big-squash-avatar-size) / -2) 0;
    vertical-align: middle;
    border-radius: 50%;
    object-fit: cover;
    background: #e2e8f0;
}

.big-squash-user-dropdown__avatar--placeholder {
    background: #94a3b8 url('../img/avatar-placeholder.svg') center/cover no-repeat;
}

.big-squash-user-dropdown__caret {
    margin-left: 0.25rem;
    font-size: 0.7em;
    color: #64748b;
}

.big-squash-user-dropdown__menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 160px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.15);
    margin: 0;
    padding: 0.25rem 0;
    display: none;
    overflow: hidden;
    text-align: left;
    z-index: 1000;
}

.big-squash-user-dropdown.is-open .big-squash-user-dropdown__menu {
    display: block;
}

/* Panel links keep the theme's link colours and hover; only the menu-cell
   chrome (padding, borders) is replaced. */
.big-squash-user-dropdown .big-squash-user-dropdown__menu a {
    display: block;
    padding: 0.5rem 0.875rem;
    border: 0;
    text-decoration: none;
    white-space: nowrap;
}

/* Language switcher: [big_squash_language_switcher] or a menu link to #big-squash-language */
.big-squash-language-switcher {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85em;
    letter-spacing: 0.04em;
}

.big-squash-language-switcher__link {
    text-decoration: none;
    color: inherit;
    opacity: 0.6;
}

.big-squash-language-switcher__link:hover,
.big-squash-language-switcher__link:focus {
    opacity: 1;
    text-decoration: underline;
}

.big-squash-language-switcher__link.is-current {
    opacity: 1;
    font-weight: 600;
}

.big-squash-language-switcher__sep {
    opacity: 0.4;
}