/* ==============================================================
   Header avatar menu (inc/td-account/td-account-menu.php)
   ============================================================== */

/* The login area hides its overflow so it can collapse smoothly when
   the header shrinks on scroll (header.css). While the header is
   expanded, let the dropdown hang below it instead of being clipped.
   (td-user-menu.js closes the menu when the header collapses.) */
header:not(.is-scrolled) .login-menu {
	overflow: visible;
}

.td-user-menu {
	position: relative;
}

/* Avatar button: a 40px circle with the theme's blue ring; red when
   hovered/focused/open. */
.td-user-menu-button {
	display: block;
	padding: 0;
	border: 2px solid #004C97;
	border-radius: 50%;
	background: #fff;
	line-height: 0;
	cursor: pointer;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.td-user-menu-button img {
	display: block;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
}
.td-user-menu-button:hover,
.td-user-menu-button:focus-visible,
.td-user-menu-button[aria-expanded="true"] {
	border-color: #B60004;
	box-shadow: 0 0 0 3px rgba(182, 0, 4, .2);
	outline: none;
}

/* header.css styles every ".login-menu ul" / "li" for the old row of
   buttons (display:flex, right-aligned, 10px item margins). Those rules
   would beat Bootstrap's ".dropdown-menu { display:none }" and leave
   this menu permanently visible and laid out sideways, so restore
   Bootstrap's show/hide and normal list layout with more specific
   selectors. */
.login-menu .td-user-menu-list {
	display: none;
	text-align: left;
}
.login-menu .td-user-menu-list.show {
	display: block;
}
.login-menu .td-user-menu-list li {
	margin: 0;
}

/* The menu: theme fonts/colours on Bootstrap's dropdown. */
.td-user-menu-list {
	min-width: 190px;
	margin-top: 8px !important;
	padding: 6px 0;
	border: 1px solid #e0e0e0;
	border-top: 3px solid #B60004;
	border-radius: 4px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .15);
	text-align: left;
	z-index: 1050;
}
.td-user-menu-list .dropdown-item {
	padding: 9px 18px;
	font-size: 16px;
	font-weight: 600;
	color: #1a1a1a;
	text-decoration: none;
}
.td-user-menu-list .dropdown-item:hover,
.td-user-menu-list .dropdown-item:focus {
	background: #f4f4f4;
	color: #B60004;
}