/*
 * The account menu under "Hei, <name>" in the desktop top bar
 * (base_site.html, .header-top ul.user_drop).
 *
 * Karoline, Oct 28 2026: it "looks so long and old", make it look more
 * like it does on mobile. It was one column of sixteen 12px Arial rows in
 * a square box with a grey border, 380px tall.
 *
 * Now it is the phone menu's account block (epla-mobile-header.css) as a
 * sheet under the bar: white, rounded, a soft shadow; two columns of links
 * under group names in Bitter ("Din konto", "Din butikk", "Administrasjon"
 * for staff), the overdue-invoice row as a notice line in the awning
 * orange, last in its group, and a hairline between the groups. The template gives both lists the same classes:
 * .menu-account-head for a group name, .menu-account-gap for the space
 * before the next group.
 *
 * It still opens on hover, as style.css has it, and also on keyboard focus
 * inside it. The selectors repeat style.css's (#header .header-top ul li
 * ul ...) and win by coming later in base_common.html. The top bar is
 * hidden on phones, where the same links live in the menu sheet.
 */

#header .header-top ul li ul.user_drop {
	--am-ink: #34495e;
	--am-head: #2c3e50;
	--am-line: #dfe5e8;
	--am-hover: #f1f5f6;
	--am-due: #cc994a;
	--am-due-hover: #b5843a;

	display: none;
	grid-template-columns: 1fr 1fr;
	column-gap: 4px;
	left: auto;
	right: 0;
	top: calc(100% + 8px);
	width: 380px;
	box-sizing: border-box;
	margin: 0;
	padding: 8px 8px 10px;
	background: #fff;
	border: 1px solid var(--am-line);
	border-radius: 12px;
	box-shadow: 0 14px 40px rgba(44, 62, 80, 0.18);
	font-family: Lato, Arial, sans-serif;
	z-index: 1111;
}

#header .header-top ul li:hover ul.user_drop,
#header .header-top ul li:focus-within ul.user_drop {
	display: grid;
}

/* The 8px between the name and the sheet would close it on the way down. */
#header .header-top ul li ul.user_drop::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -10px;
	height: 10px;
}

#header .header-top ul li ul.user_drop li {
	float: none;
	position: relative;
	margin: 0;
	padding: 0;
}

#header .header-top ul li ul.user_drop li a {
	display: block;
	margin: 0;
	padding: 8px 12px;
	border-radius: 8px;
	font-family: inherit;
	font-size: 14px;
	line-height: 20px;
	color: var(--am-ink);
	text-decoration: none;
}

#header .header-top ul li ul.user_drop li a:hover,
#header .header-top ul li ul.user_drop li a:focus-visible {
	background: var(--am-hover);
	color: var(--am-head);
}

#header .header-top ul li ul.user_drop li a:focus-visible {
	outline: 2px solid #16a085;
	outline-offset: -2px;
}

/* Group names across both columns, in Bitter like the phone sheet. */
#header .header-top ul li ul.user_drop li.menu-account-head {
	grid-column: 1 / -1;
}

#header .header-top ul li ul.user_drop li.menu-account-head a {
	padding: 4px 12px;
	font-family: 'Bitter', Georgia, serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 22px;
	color: var(--am-head);
}

/* Between the groups: a hairline, with air on both sides (Karoline,
   Oct 28 2026: "make the different sections even clearer"). */
#header .header-top ul li ul.user_drop li.menu-account-gap {
	grid-column: 1 / -1;
	height: 0;
	margin: 8px 4px;
	border-top: 1px solid #e8edef;
}

/* The overdue row reads as a notice, so it takes the whole width. */
#header .header-top ul li ul.user_drop li.menu-account-wide {
	grid-column: 1 / -1;
}

/* The overdue invoices: a notice line in the awning orange with its
   icon, no fill. A filled full-width block was too much colour
   (Karoline, Oct 28 2026). The text is darker than the pill so 14px
   bold still reads on white (4.7:1). */
#header .header-top ul li ul.user_drop li a.epla-due-item {
	padding-left: 34px;
	background: none;
	color: #9a6b2a;
	font-weight: 700;
}

#header .header-top ul li ul.user_drop li a.epla-due-item::before {
	content: "\eca1";
	position: absolute;
	left: 12px;
	top: 9px;
	font-family: 'remixicon';
	font-size: 17px;
	font-weight: 400;
	line-height: 1;
	color: var(--am-due);
}

#header .header-top ul li ul.user_drop li a.epla-due-item:hover,
#header .header-top ul li ul.user_drop li a.epla-due-item:focus-visible {
	background: var(--am-hover);
	color: #7e5520;
}

/* The name in the bar: the user glyph and the chevron from the icon set
   the page already loads, instead of two 2010 pictures; the chevron turns
   while the sheet is open. */
#header .header-top ul li a.name {
	padding: 0 16px 0 20px;
	background: none;
}

#header .header-top ul li a.name::before {
	content: "\f256";
	position: absolute;
	left: 0;
	top: -2px;
	font-family: 'remixicon';
	font-size: 16px;
	line-height: 1;
	color: #5f6d79;
}

#header .header-top ul li a.name .downarrow {
	top: -1px;
	width: auto;
	height: auto;
	background: none;
	font-family: 'remixicon';
	font-size: 16px;
	line-height: 1;
	color: #5f6d79;
	transition: transform 0.15s ease;
}

#header .header-top ul li a.name .downarrow::before {
	content: "\ea4e";
}

#header .header-top ul li:hover a.name .downarrow,
#header .header-top ul li:focus-within a.name .downarrow {
	transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
	#header .header-top ul li a.name .downarrow { transition: none; }
}