/*
 * Guides header auth bridge — desktop account menu.
 *
 * Pixel-parity port of the Laravel app header dropdown
 * (`qc-header-shell-production__account-dropdown-*`). Rules are copied verbatim
 * from the app's compiled stylesheet; the design tokens they reference are
 * resolved here and scoped to `.qc-guides-auth` so nothing leaks into Astra.
 *
 * Selectors are prefixed with `#topnav` because the theme resets
 * `#topnav ul { margin:0; padding:0 }` at id-level specificity (1,0,1) — the
 * prefix lifts these rules to (1,2,0) so the dropdown's own spacing wins.
 * The dropdown only ever renders inside `nav#topnav .btns-profile`.
 *
 * Mobile uses the theme's own `.btns-wrap--logged-in` / `.mobile-user-*`
 * styles (already in custom.css), so no mobile rules live here.
 */

#topnav .qc-guides-auth {
    /* Resolved design tokens (inherited by the dropdown markup below). */
    --qc-space-2xs: 2px;
    --qc-space-xs: 4px;
    --qc-space-sm: 8px;
    --qc-space-md: 16px;
    --qc-space-lg: 24px;
    --qc-space-xl: 32px;
    --qc-size-header-avatar: 32px;
    --qc-size-header-nav-chevron: 18px;
    --qc-width-header-account-dropdown: 300px;
    --qc-color-text-black: #000000;
    --qc-color-text-placeholder: #8c8c8c;
    --qc-color-surface-white: #ffffff;
    --qc-color-primary-50: #f7f8fd;
    --qc-color-border-light: #e5e6e7;
    --qc-shadow-header-account-dropdown: 0px 4px 24px rgba(16, 24, 40, 0.12), 0px 2px 8px rgba(16, 24, 40, 0.08);
    --qc-shadow-focus: 0px 0px 0px 4px rgb(226, 232, 255);
    --qc-radius-md: 8px;
    --qc-radius-sm: 4px;
    --qc-font-size-lg: 18px;
    --qc-font-size-md: 16px;
    --qc-font-size-sm: 14px;
    --qc-font-weight-regular: 400;
    --qc-font-weight-medium: 500;
    --qc-font-weight-semibold: 600;
    --qc-line-height-lg: 24px;
    --qc-line-height-md: 20px;
    --qc-font-sans: Inter, sans-serif;
    --qc-z-header: 1015;

    display: inline-flex;
    align-items: center;
}

#topnav .qc-guides-auth,
#topnav .qc-guides-auth * {
    box-sizing: border-box;
}

#topnav .qc-guides-auth .qc-header-shell-production__account-dropdown-root {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

#topnav .qc-guides-auth .qc-header-shell-production__account-dropdown-root::after {
    content: "";
    position: absolute;
    bottom: calc(var(--qc-space-sm) * -1);
    left: 0;
    width: 100%;
    height: var(--qc-space-sm);
}

#topnav .qc-guides-auth .qc-header-shell-production__account-dropdown-trigger-icon {
    display: block;
    flex-shrink: 0;
    box-sizing: border-box;
    width: var(--qc-size-header-avatar);
    height: var(--qc-size-header-avatar);
    padding: var(--qc-space-xs);
    color: var(--qc-color-text-black);
}

#topnav .qc-guides-auth .qc-header-shell-production__account-dropdown-list {
    position: absolute;
    top: calc(100% + var(--qc-space-xs));
    right: 0;
    z-index: calc(var(--qc-z-header) + 2);
    display: flex;
    flex-direction: column;
    gap: var(--qc-space-md);
    box-sizing: border-box;
    width: var(--qc-width-header-account-dropdown);
    max-width: min(
        var(--qc-width-header-account-dropdown),
        calc(100vw - var(--qc-space-xl))
    );
    margin: 0;
    padding: var(--qc-space-lg);
    list-style: none;
    border-radius: var(--qc-radius-md);
    background: var(--qc-color-surface-white);
    box-shadow: var(--qc-shadow-header-account-dropdown);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(var(--qc-space-xs));
    transition:
        opacity 0.15s ease,
        visibility 0.15s ease,
        transform 0.15s ease;
}

#topnav .qc-guides-auth .qc-header-shell-production__account-dropdown-root:hover
    .qc-header-shell-production__account-dropdown-list,
#topnav .qc-guides-auth .qc-header-shell-production__account-dropdown-root:focus-within
    .qc-header-shell-production__account-dropdown-list {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

#topnav .qc-guides-auth .qc-header-shell-production__account-dropdown-identity {
    margin: 0;
    padding: 0;
    list-style: none;
    cursor: default;
}

#topnav .qc-guides-auth .qc-header-shell-production__account-dropdown-identity:hover {
    background: transparent;
}

#topnav .qc-guides-auth .qc-header-shell-production__account-dropdown-name {
    margin: 0;
    font-size: var(--qc-font-size-lg);
    font-weight: var(--qc-font-weight-medium);
    line-height: var(--qc-line-height-lg);
    color: var(--qc-color-text-black);
}

#topnav .qc-guides-auth .qc-header-shell-production__account-dropdown-email {
    margin: var(--qc-space-xs) 0 0;
    font-size: var(--qc-font-size-sm);
    font-weight: var(--qc-font-weight-regular);
    line-height: var(--qc-line-height-md);
    color: var(--qc-color-text-placeholder);
}

#topnav .qc-guides-auth .qc-header-shell-production__account-dropdown-actions {
    margin: 0;
    padding: 0;
    list-style: none;
}

#topnav .qc-guides-auth .qc-header-shell-production__account-dropdown-action-list {
    display: flex;
    flex-direction: column;
    gap: calc(var(--qc-space-sm) + var(--qc-space-xs));
    margin: 0;
    padding: var(--qc-space-md) 0 0;
    list-style: none;
    border-top: 1px solid var(--qc-color-border-light);
}

#topnav .qc-guides-auth .qc-header-shell-production__account-dropdown-row {
    margin: 0;
    padding: 0;
    list-style: none;
}

#topnav .qc-guides-auth .qc-header-shell-production__account-dropdown-action {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: var(--qc-space-sm);
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: calc(var(--qc-space-xs) + var(--qc-space-2xs)) var(--qc-space-sm);
    border: none;
    border-radius: var(--qc-radius-sm);
    font-family: var(--qc-font-sans);
    font-size: var(--qc-font-size-sm);
    font-weight: var(--qc-font-weight-medium);
    line-height: var(--qc-line-height-md);
    color: var(--qc-color-text-black);
    text-align: left;
    text-decoration: none;
    background: transparent;
    cursor: pointer;
    transition: background-color 0.12s ease;
}

#topnav .qc-guides-auth .qc-header-shell-production__account-dropdown-action:visited {
    color: var(--qc-color-text-black);
}

#topnav .qc-guides-auth .qc-header-shell-production__account-dropdown-action:hover {
    text-decoration: none;
    background: var(--qc-color-primary-50);
}

#topnav .qc-guides-auth .qc-header-shell-production__account-dropdown-action:focus-visible {
    outline: none;
    box-shadow: var(--qc-shadow-focus);
    background: var(--qc-color-primary-50);
}

#topnav .qc-guides-auth .qc-header-shell-production__account-dropdown-action-icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: var(--qc-size-header-nav-chevron);
    height: var(--qc-size-header-nav-chevron);
    color: var(--qc-color-text-black);
}

#topnav .qc-guides-auth .qc-header-shell-production__account-dropdown-action-svg {
    display: block;
    width: 100%;
    height: 100%;
}

#topnav .qc-guides-auth .qc-header-shell-production__account-dropdown-action-svg path {
    fill: none;
    stroke: currentColor;
}