/* Logged-in user menu — Figma "User Action Menu | Active" (10496:1189).
   Loads after styles-rtl/ltr and overrides only the menu's appearance; the open/close wiring
   (js/common.js) and the dropdown's position from the language stylesheets are untouched.
   Colours are the brand palette (design-system/palette.css, loaded site-wide). */

/* The design's row text; the theme never declares this face (see hero-frontend.css note). */
@font-face {
    font-family: "Assistant-SemiBold";
    src: url(fonts/Assistant-SemiBold.ttf) format("truetype");
    font-display: swap;
}

#userMenu {
    width: 320px;
    /* 320px is the design's total width, not its content width: the 19px side padding plus the
       280px cards inside add up to exactly that. Without border-box the padding landed outside the
       declaration and the card painted 358px, so the menu sat wider than the design everywhere. */
    box-sizing: border-box;
    min-width: 0;
    padding: 69px 19px 100px;
    background-color: var(--cil-white);
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(50, 51, 51, 0.20);
    /* The old decorative corners were background images; the design's are elements below. */
    background-image: none;
    /* No overflow clip: the corner windows (::before/::after) are fixed-size and inside bounds,
       and the avatar library flyout must be able to extend beyond the menu. */
}

/* ----- Decorative corners -----
   Two clipped windows onto larger stroke artwork, exactly as the design frames them:
   top 111×69 at 30% opacity, bottom 234×155. Logical inline placement mirrors them for LTR. */
#userMenu::before,
#userMenu::after {
    content: "";
    position: absolute;
    pointer-events: none;
    background-repeat: no-repeat;
}
#userMenu::before {
    top: 0;
    /* Physical, not logical: the Figma frame IS the RTL layout, and its x=0 is the left edge.
       A logical inset re-mirrors what the artwork already accounts for. */
    left: 0;
    width: 111px;
    height: 69px;
    opacity: 0.3;
    background-image: url(../images/header/menu/top-assets.svg);
    background-size: 300px 307px;
    background-position: -100px -132px;
}
#userMenu::after {
    bottom: 0;
    left: 0;
    width: 234px;
    height: 155px;
    background-image: url(../images/header/menu/bottom-assets.svg);
    background-size: 320px 320px;
    /* Anchored so the strokes start at the menu's left side, like the top. Measured on the
       rasterised SVG: the artwork's lower band begins at x=41, so the window shows its bottom
       and shifts by exactly that margin. */
    background-position: -41px calc(100% + 170px);
}
/* The artwork is drawn for the RTL sheet; LTR pages mirror the windows to the opposite corner
   and flip the strokes with them. */
#userMenu.cil-menu-ltr::before,
#userMenu.cil-menu-ltr::after { left: auto; right: 0; transform: scaleX(-1); }

/* ----- Cards ----- */
#userMenu .menuRow2Item {
    position: relative;
    z-index: 1;              /* above the corner artwork */
    width: 280px;
    background: var(--cil-white);
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(9, 27, 80, 0.15);
    padding: 0 0 25px;
    margin: 0 0 16px;
}
#userMenu .menuRow2Item:last-of-type {
    margin: 0;
    padding: 0;
    box-shadow: 0 2px 20px rgba(9, 27, 80, 0.16);
}
/* The logout row is the card's only content, so its hover fill covers the whole card:
   the row takes the card's full height and inherits its rounding. */
#userMenu .menuRow2Item:last-of-type > div a {
    height: 50px;
    border-radius: 10px;
}

/* ----- Rows ----- */
#userMenu .menuRow2Item > div { margin: 0; }
#userMenu .menuRow2Item > div a {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 38px;
    padding: 5px 21px;
    color: var(--cil-black);
    font-family: 'Assistant-SemiBold', 'Assistant', Arial, sans-serif;
    font-size: 18px;
    line-height: 24px;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s ease;
}
#userMenu .menuRow2Item > div a:hover,
#userMenu .menuRow2Item > div a:focus-visible { background: var(--cil-blue-light-1); }
#userMenu .menuRow2Item > div a img { width: 28px; height: 28px; }

/* Logout: the red row, icon and text alike. */
#userMenu .menuRow2Item > div a#userLogout,
#userMenu .menuRow2Item > div a#userLogout span { color: var(--cil-red); }
#userMenu .menuRow2Item > div a#userLogout:hover,
#userMenu .menuRow2Item > div a#userLogout:focus-visible { background: var(--cil-red-light-1); }

/* The avatar row's chevron sits right beside the text, as designed; the old stylesheet's own
   arrow background on this button is retired with it. The asset is the design's own export
   (a filled 7×4 triangle drawn pointing down): closed it points into the reading direction,
   open it points down at the flyout. */
#userMenu #userLoggedInAvatarsButton { background-image: none !important; }
/* Written against the row's own `a img` sizing rule and the legacy sheet's translate — hence the
   full chain and the img tag on the selector. */
#userMenu .menuRow2Item > div a img.cil-menu-chevron {
    width: 7px;
    height: 4px;
    flex-shrink: 0;
    transform: rotate(90deg);              /* RTL closed: points left */
    transition: transform 0.2s ease;
}
#userMenu.cil-menu-ltr .menuRow2Item > div a img.cil-menu-chevron { transform: rotate(-90deg); }  /* LTR closed: right */
#userMenu .menuRow2Item > div a#userLoggedInAvatarsButton.active img.cil-menu-chevron { transform: rotate(0deg); }

/* ----- Avatar picker flyout: same card language ----- */
/* The legacy sheet's left value is invalid (left:-60x), so the flyout drifted to its static
   position, leaving a gap beside the menu. Anchored explicitly: the containing block is the top
   card (position:relative), whose edge sits 19px (the menu's padding) inside the menu's edge —
   100% + 19px reaches the menu edge, + 8px breathing room. */
#userMenu #userLoggedInAvatars {
    top: 0;
    left: calc(100% + 27px);
    background: var(--cil-white);
    border-radius: 10px;
    box-shadow: 0 2px 20px rgba(9, 27, 80, 0.16);
}
#userMenu.cil-menu-ltr #userLoggedInAvatars {
    left: auto;
    right: calc(100% + 27px);
}

@media (prefers-reduced-motion: reduce) {
    #userMenu .menuRow2Item > div a,
    #userMenu .cil-menu-chevron { transition: none; }
}