/* User Menu - header dropdown
 *
 * All visual properties are exposed as CSS custom properties so themes
 * can brand the user menu without fighting !important specificity.
 *
 * Override examples (Additional CSS):
 *   :root {
 *     --mk-user-menu-trigger-bg: #000;
 *     --mk-user-menu-trigger-color: #fff;
 *     --mk-user-menu-radius: 0;
 *     --mk-user-menu-font: 'Inter Tight', sans-serif;
 *   }
 *
 * Defaults preserve the original look (cascade from --scorm-* tokens
 * set by Plugin Theming admin, falling back to neutral values).
 */

.mk-user-menu {
    /* Tokens */
    --mk-um-font: var(--mk-user-menu-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif);
    --mk-um-gap: var(--mk-user-menu-gap, 16px);

    /* Guest links */
    --mk-um-login-color: var(--mk-user-menu-login-color, currentColor);
    --mk-um-login-hover-color: var(--mk-user-menu-login-hover-color, var(--scorm-primary-color, #0073aa));
    --mk-um-login-font-size: var(--mk-user-menu-login-font-size, 14px);
    --mk-um-login-font-weight: var(--mk-user-menu-login-font-weight, 500);

    --mk-um-register-bg: var(--mk-user-menu-register-bg, var(--scorm-primary-color, #0073aa));
    --mk-um-register-color: var(--mk-user-menu-register-color, var(--scorm-button-text-color, #fff));
    --mk-um-register-hover-bg: var(--mk-user-menu-register-hover-bg, var(--scorm-secondary-color, #005a87));
    --mk-um-register-padding: var(--mk-user-menu-register-padding, 8px 18px);

    /* Trigger pill (logged-in) */
    --mk-um-trigger-bg: var(--mk-user-menu-trigger-bg, var(--scorm-primary-color, #0073aa));
    --mk-um-trigger-color: var(--mk-user-menu-trigger-color, var(--scorm-button-text-color, #fff));
    --mk-um-trigger-hover-bg: var(--mk-user-menu-trigger-hover-bg, var(--scorm-secondary-color, #005a87));
    --mk-um-trigger-padding: var(--mk-user-menu-trigger-padding, 8px 16px);
    --mk-um-trigger-font-weight: var(--mk-user-menu-trigger-font-weight, 600);

    /* Greeting (above the trigger) */
    --mk-um-greeting-welcome-color: var(--mk-user-menu-welcome-color, currentColor);
    --mk-um-greeting-welcome-opacity: var(--mk-user-menu-welcome-opacity, 0.7);
    --mk-um-greeting-welcome-size: var(--mk-user-menu-welcome-size, 11px);
    --mk-um-greeting-name-color: var(--mk-user-menu-name-color, currentColor);
    --mk-um-greeting-name-size: var(--mk-user-menu-name-size, 14px);
    --mk-um-greeting-name-weight: var(--mk-user-menu-name-weight, 600);

    /* Dropdown panel */
    --mk-um-dropdown-bg: var(--mk-user-menu-dropdown-bg, #fff);
    --mk-um-dropdown-border: var(--mk-user-menu-dropdown-border, 1px solid #e2e8f0);
    --mk-um-dropdown-radius: var(--mk-user-menu-dropdown-radius, 10px);
    --mk-um-dropdown-shadow: var(--mk-user-menu-dropdown-shadow, 0 10px 40px rgba(0, 0, 0, 0.12));
    --mk-um-dropdown-width: var(--mk-user-menu-dropdown-width, 240px);
    --mk-um-dropdown-offset: var(--mk-user-menu-dropdown-offset, 8px);
    /* Smallest gap the dropdown may leave to a viewport edge on small screens. */
    --mk-um-dropdown-viewport-margin: var(--mk-user-menu-dropdown-viewport-margin, 8px);

    --mk-um-dropdown-name-color: var(--mk-user-menu-dropdown-name-color, var(--scorm-heading-color, #1e293b));
    --mk-um-dropdown-email-color: var(--mk-user-menu-dropdown-email-color, var(--scorm-muted-text-color, #64748b));
    --mk-um-dropdown-divider: var(--mk-user-menu-dropdown-divider, #f1f5f9);
    --mk-um-dropdown-item-color: var(--mk-user-menu-dropdown-item-color, var(--scorm-text-color, #333));
    --mk-um-dropdown-item-hover-bg: var(--mk-user-menu-dropdown-item-hover-bg, #f8fafc);
    --mk-um-dropdown-item-hover-color: var(--mk-user-menu-dropdown-item-hover-color, var(--scorm-text-color, #333));
    --mk-um-dropdown-icon-color: var(--mk-user-menu-dropdown-icon-color, var(--scorm-muted-text-color, #64748b));
    --mk-um-dropdown-logout-color: var(--mk-user-menu-dropdown-logout-color, var(--scorm-primary-color, #0073aa));
    --mk-um-dropdown-logout-hover-bg: var(--mk-user-menu-dropdown-logout-hover-bg, #f8fafc);
    --mk-um-dropdown-logout-hover-color: var(--mk-user-menu-dropdown-logout-hover-color, var(--scorm-primary-color, #0073aa));

    /* Shared button radius (falls back to scorm-button-radius) */
    --mk-um-button-radius: var(--mk-user-menu-radius, var(--scorm-button-radius, 6px));

    /* Container */
    display: flex;
    align-items: center;
    gap: var(--mk-um-gap);
    font-family: var(--mk-um-font);
    position: relative;
}

/* Match Astra off-canvas menu item padding */
.ast-mobile-popup-content .mk-user-menu,
.ast-mobile-header-content .mk-user-menu {
    padding: 0 20px;
}

/* Guest state */
.mk-user-menu--guest .mk-user-menu__login {
    color: var(--mk-um-login-color);
    font-size: var(--mk-um-login-font-size);
    font-weight: var(--mk-um-login-font-weight);
    text-decoration: none;
    transition: color 0.15s;
}
@media (hover: hover) {
    .mk-user-menu--guest .mk-user-menu__login:hover {
        color: var(--mk-um-login-hover-color);
    }
}
.mk-user-menu--guest .mk-user-menu__register {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--mk-um-register-bg);
    color: var(--mk-um-register-color);
    padding: var(--mk-um-register-padding);
    border-radius: var(--mk-um-button-radius);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
@media (hover: hover) {
    .mk-user-menu--guest .mk-user-menu__register:hover {
        background: var(--mk-um-register-hover-bg);
    }
}

/* Logged-in state */
.mk-user-menu--logged-in {
    gap: 12px;
}

.mk-user-menu__greeting {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.3;
}
.mk-user-menu__welcome {
    font-size: var(--mk-um-greeting-welcome-size);
    color: var(--mk-um-greeting-welcome-color);
    opacity: var(--mk-um-greeting-welcome-opacity);
    font-weight: 400;
}
.mk-user-menu__name {
    font-size: var(--mk-um-greeting-name-size);
    color: var(--mk-um-greeting-name-color);
    font-weight: var(--mk-um-greeting-name-weight);
}

/* Trigger button */
.mk-user-menu__trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--mk-um-trigger-bg);
    color: var(--mk-um-trigger-color);
    border: none;
    padding: var(--mk-um-trigger-padding);
    border-radius: var(--mk-um-button-radius);
    font-family: inherit;
    font-size: 14px;
    font-weight: var(--mk-um-trigger-font-weight);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}
.mk-user-menu__trigger[aria-expanded="true"] {
    background: var(--mk-um-trigger-hover-bg);
}

@media (hover: hover) {
    .mk-user-menu__trigger:hover {
        background: var(--mk-um-trigger-hover-bg);
    }
}
.mk-user-menu__icon {
    flex-shrink: 0;
}
.mk-user-menu__chevron {
    flex-shrink: 0;
    transition: transform 0.15s;
}
.mk-user-menu__trigger[aria-expanded="true"] .mk-user-menu__chevron {
    transform: rotate(180deg);
}

/* Dropdown */
.mk-user-menu__dropdown {
    position: absolute;
    top: calc(100% + var(--mk-um-dropdown-offset));
    right: 0;
    width: var(--mk-um-dropdown-width);
    background: var(--mk-um-dropdown-bg);
    border: var(--mk-um-dropdown-border);
    border-radius: var(--mk-um-dropdown-radius);
    box-shadow: var(--mk-um-dropdown-shadow);
    z-index: 10000;
    overflow: hidden;
}
.mk-user-menu__dropdown[hidden] {
    display: none;
}

.mk-user-menu__dropdown-header {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.mk-user-menu__dropdown-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--mk-um-dropdown-name-color);
}
.mk-user-menu__dropdown-email {
    font-size: 12px;
    color: var(--mk-um-dropdown-email-color);
}

.mk-user-menu__dropdown-divider {
    height: 1px;
    background: var(--mk-um-dropdown-divider);
    margin: 0;
}

.mk-user-menu__dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    font-size: 14px;
    color: var(--mk-um-dropdown-item-color);
    text-decoration: none;
    transition: background 0.1s, color 0.1s;
}
@media (hover: hover) {
    .mk-user-menu__dropdown-item:hover {
        background: var(--mk-um-dropdown-item-hover-bg);
        color: var(--mk-um-dropdown-item-hover-color);
    }
}
.mk-user-menu__dropdown-item svg {
    flex-shrink: 0;
    color: var(--mk-um-dropdown-icon-color);
}
.mk-user-menu__dropdown-item--logout {
    color: var(--mk-um-dropdown-logout-color);
}
.mk-user-menu__dropdown-item--logout svg {
    color: var(--mk-um-dropdown-logout-color);
}
@media (hover: hover) {
    .mk-user-menu__dropdown-item--logout:hover {
        background: var(--mk-um-dropdown-logout-hover-bg);
        color: var(--mk-um-dropdown-logout-hover-color);
    }
}

/* Leader CTA button (opt-in via leader_cta="yes" shortcode attribute) */
.mk-user-menu__leader-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--mk-leader-cta-bg, var(--mk-user-menu-leader-cta-bg, var(--mk-um-trigger-bg)));
    color: var(--mk-leader-cta-color, var(--mk-user-menu-leader-cta-color, var(--mk-um-trigger-color)));
    padding: var(--mk-um-trigger-padding);
    border-radius: var(--mk-um-button-radius);
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}
@media (hover: hover) {
    .mk-user-menu__leader-cta:hover {
        background: var(--mk-leader-cta-hover-bg, var(--mk-user-menu-leader-cta-hover-bg, var(--mk-um-trigger-hover-bg)));
        color: var(--mk-leader-cta-color, var(--mk-user-menu-leader-cta-color, var(--mk-um-trigger-color)));
    }
}
.mk-user-menu__leader-cta svg {
    flex-shrink: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .mk-user-menu__greeting {
        display: none;
    }
    .mk-user-menu__trigger {
        width: 40px;
        height: 40px;
        padding: 0;
        border-radius: var(--mk-user-menu-radius-mobile, 8px);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .mk-user-menu__trigger .mk-user-menu__label,
    .mk-user-menu__trigger .mk-user-menu__chevron {
        display: none;
    }
    .mk-user-menu__trigger .mk-user-menu__icon {
        width: 20px;
        height: 20px;
    }
    /* The 240px panel is right-aligned to a container that collapses to 40px
       here, so it hangs ~200px to the left of the trigger. Wherever the theme
       puts the menu — Astra's off-canvas puts it near the left edge — that can
       land outside the viewport. Clamp the width to the viewport and let the
       script below nudge the panel back inside when it would overhang. */
    .mk-user-menu__dropdown {
        width: min(
            var(--mk-um-dropdown-width),
            calc(100vw - 2 * var(--mk-um-dropdown-viewport-margin))
        );
        transform: translateX(var(--mk-um-dropdown-shift, 0px));
    }
}

/* ── Off-canvas (hamburger): render the user menu as inline menu rows ──
 *
 * The mobile rules above are written for the visible header bar, where space is
 * scarce: the trigger collapses to an icon-only square and the panel floats.
 * Inside Astra's off-canvas the opposite is true — the drawer already IS the
 * menu, so a floating card is the wrong primitive there. It overlaps page
 * content, needs the viewport clamp to stay on screen, drops its own label, and
 * does not line up with the nav items beside it.
 *
 * Here the trigger becomes a full-width row matching the theme's menu items and
 * the panel expands inline underneath it. Nothing floats, so nothing needs
 * clamping. [TSK-20007]
 */
@media (max-width: 768px) {

	/* Astra pads the header-element box on all four sides (15px top/bottom, 20px
	   sides, class-astra-dynamic-css.php). In the drawer that reads as a stray gap
	   above the row and knocks it out of line with the nav items, so zero it and
	   let the row own its padding.

	   Two things this selector has to get right. Astra's rule is (0,4,0) — two
	   classes plus two :not() arguments — so matching it class-for-class would
	   leave the winner decided by stylesheet order, which is not ours to control
	   once a site runs a CSS optimiser. The .ast-header-break-point prefix plus
	   .site-header-focus-item takes it to (0,6,0) and settles it on specificity.
	   And :has(.mk-user-menu) keeps the reset on the element holding the user
	   menu: a drawer may carry other Custom HTML elements, and those keep the
	   theme's padding because nothing here restyles them. */
	.ast-header-break-point .ast-mobile-header-content .ast-builder-layout-element.site-header-focus-item[class*="ast-header-html-"]:has(.mk-user-menu),
	.ast-header-break-point .ast-mobile-popup-content .ast-builder-layout-element.site-header-focus-item[class*="ast-header-html-"]:has(.mk-user-menu) {
		padding: 0;
	}
	.ast-mobile-header-content .ast-header-html:has(.mk-user-menu),
	.ast-mobile-popup-content .ast-header-html:has(.mk-user-menu) {
		width: 100%;
		margin: 0;
	}
	.ast-mobile-header-content .ast-header-html > .ast-builder-html-element:has(.mk-user-menu),
	.ast-mobile-popup-content .ast-header-html > .ast-builder-html-element:has(.mk-user-menu) {
		padding: 0;
	}

	.ast-mobile-header-content .mk-user-menu--logged-in,
	.ast-mobile-popup-content .mk-user-menu--logged-in {
		display: block;
		width: 100%;
		padding: 0;
		position: static;
	}

	/* Trigger → a menu row: same height, padding and type as the nav items. */
	.ast-mobile-header-content .mk-user-menu--logged-in .mk-user-menu__trigger,
	.ast-mobile-popup-content .mk-user-menu--logged-in .mk-user-menu__trigger {
		display: flex;
		width: 100%;
		height: auto;
		min-height: 44px;
		padding: 0 20px;
		gap: 10px;
		align-items: center;
		justify-content: flex-start;
		background: transparent;
		/* Inherited rather than tokenised on purpose: the row sits directly on the
		   drawer, so it has to follow whatever the site set there. A fixed token
		   would be dark-on-dark the moment a site gives the drawer a dark
		   background. Sites needing a different value set it on the HTML element. */
		color: inherit;
		border-radius: 0;
		font-size: inherit;
		font-weight: 400;
	}

	/* The label is the point — never hide it where there is room for it. */
	.ast-mobile-header-content .mk-user-menu--logged-in .mk-user-menu__label,
	.ast-mobile-popup-content .mk-user-menu--logged-in .mk-user-menu__label {
		display: inline;
	}
	.ast-mobile-header-content .mk-user-menu--logged-in .mk-user-menu__chevron,
	.ast-mobile-popup-content .mk-user-menu--logged-in .mk-user-menu__chevron {
		display: inline;
		margin-left: auto;
	}
	.ast-mobile-header-content .mk-user-menu--logged-in .mk-user-menu__icon,
	.ast-mobile-popup-content .mk-user-menu--logged-in .mk-user-menu__icon {
		width: 18px;
		height: 18px;
	}

	/* Panel → inline block. No floating box, so the viewport clamp is inert. */
	.ast-mobile-header-content .mk-user-menu--logged-in .mk-user-menu__dropdown,
	.ast-mobile-popup-content .mk-user-menu--logged-in .mk-user-menu__dropdown {
		position: static;
		width: 100%;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		/* Keep the panel on its own light surface, as the floating card has: the
		   item colours are fixed dark tokens, and the hover token must stay
		   distinguishable from what sits behind it. */
		background: var(--mk-um-dropdown-bg);
		transform: none;
	}
	.ast-mobile-header-content .mk-user-menu--logged-in .mk-user-menu__dropdown-header,
	.ast-mobile-popup-content .mk-user-menu--logged-in .mk-user-menu__dropdown-header {
		padding: 12px 20px 12px 48px;
	}
	.ast-mobile-header-content .mk-user-menu--logged-in .mk-user-menu__dropdown-item,
	.ast-mobile-popup-content .mk-user-menu--logged-in .mk-user-menu__dropdown-item {
		min-height: 44px;
		padding: 0 20px 0 48px;
	}
	.ast-mobile-header-content .mk-user-menu--logged-in .mk-user-menu__dropdown-divider,
	.ast-mobile-popup-content .mk-user-menu--logged-in .mk-user-menu__dropdown-divider {
		margin: 0 20px;
	}
}