/* Header account menu (MF_Header_Menu). Self-contained: loads on every
   front-end page, so it carries its own fallbacks for every --mf-* token
   (the live values are injected inline by MF_Theme::inline_css()). Hover
   opens on pointer devices, tap/click toggles everywhere, focus-within
   keeps it open for keyboard users. */

.mf-hmenu { position: relative; display: inline-flex; align-items: center; font-family: var(--mf-font-body, "Schibsted Grotesk", system-ui, sans-serif); line-height: 1.2; }
.mf-hmenu[hidden] { display: none; }

.mf-hmenu__btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 10px 0 4px; border-radius: 999px; border: 1px solid transparent; background: transparent; color: inherit; text-decoration: none; cursor: pointer; white-space: nowrap; }
.mf-hmenu__btn:hover, .mf-hmenu__btn:focus-visible { border-color: var(--mf-border, #E7E7E4); background: var(--mf-surface-card, #FFFFFF); color: var(--mf-ink, #111312); text-decoration: none; outline: none; }
.mf-hmenu__avatar { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; overflow: hidden; background: var(--mf-surface-raised, #F4F4F1); color: var(--mf-ink, #111312); flex: 0 0 auto; }
.mf-hmenu.is-member .mf-hmenu__avatar { background: var(--mf-accent, #2F5D3A); color: var(--mf-on-accent, #FFFFFF); }
.mf-hmenu__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mf-hmenu__initials { font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.mf-hmenu__label { font-size: 13.5px; font-weight: 500; max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
.mf-hmenu__chev { flex: 0 0 auto; opacity: .7; transition: transform .15s ease; }
.mf-hmenu.is-open .mf-hmenu__chev { transform: rotate(180deg); }

/* The panel starts at the trigger's bottom edge with its gap as padding, so
   the pointer never crosses a dead zone on the way down. */
.mf-hmenu__panel { position: absolute; top: 100%; right: 0; padding-top: 8px; min-width: 228px; z-index: 1000; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .14s ease, transform .14s ease, visibility 0s linear .14s; }
.mf-hmenu__card { background: var(--mf-surface-card, #FFFFFF); color: var(--mf-ink, #111312); border: 1px solid var(--mf-border, #E7E7E4); border-radius: 12px; box-shadow: var(--mf-shadow-pop, 0 14px 40px rgba(17, 19, 18, .12)); padding: 6px; display: flex; flex-direction: column; text-align: left; }
.mf-hmenu.is-open .mf-hmenu__panel,
.mf-hmenu:focus-within .mf-hmenu__panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
@media (hover: hover) and (pointer: fine) {
	.mf-hmenu:hover .mf-hmenu__panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
}

.mf-hmenu__who { padding: 8px 10px 10px; border-bottom: 1px solid var(--mf-border-soft, #F2F2EF); margin-bottom: 4px; }
.mf-hmenu__name { font-size: 13.5px; font-weight: 600; color: var(--mf-ink, #111312); }
.mf-hmenu__mail { font-size: 12px; color: var(--mf-ink-soft, #6E7370); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mf-hmenu__item { display: block; padding: 9px 10px; border-radius: 8px; font-size: 13.5px; font-weight: 500; color: var(--mf-ink, #111312); text-decoration: none; }
.mf-hmenu__item:hover, .mf-hmenu__item:focus-visible { background: var(--mf-surface-raised, #F4F4F1); color: var(--mf-ink, #111312); text-decoration: none; outline: none; }
.mf-hmenu__item--out { color: var(--mf-danger, #8C2C22); border-top: 1px solid var(--mf-border-soft, #F2F2EF); border-radius: 0 0 8px 8px; margin-top: 4px; }
.mf-hmenu__item--out:hover, .mf-hmenu__item--out:focus-visible { color: var(--mf-danger, #8C2C22); }

/* Inside a Platea header group the theme's own icons are hidden by the
   module; ours keeps their spacing. */
.gt-item-group .mf-hmenu { margin: 0 4px; }
@media (max-width: 640px) {
	.mf-hmenu__label, .mf-hmenu__chev { display: none; }
	.mf-hmenu__btn { padding: 0 2px; }
	.mf-hmenu__panel { right: -8px; min-width: 210px; }
}