/*
 * "My Account" nav tile (client-requested addition). Generated from every original rule for the
 * Contact Us tile in default.css (desktop hover/current states, SVG and PNG icons, the phone
 * tile grid), with the next colour along the nav's teal-to-green progression (#78ce9a) and a
 * user icon drawn in the same style. Regenerate rather than hand-edit this first block.
 */
#header #nav ul#nav-menu > li.my_account > a:after,
#header #nav ul#nav-menu > li.my_account > b:after { background:#78ce9a; }
#header #nav ul#nav-menu > li.my_account a:before { background:transparent url('../img/icons/my-account-turq.png') center top no-repeat; }
.svg #header #nav ul#nav-menu > li.my_account a:before { background:transparent url('../img/icons/my-account-turq.svg') center top no-repeat; }
#header #nav ul#nav-menu > li.my_account:hover > a:before,
#header #nav ul#nav-menu > li.my_account > b:before { background:transparent url('../img/icons/my-account-white.png') center top no-repeat; }
.svg #header #nav ul#nav-menu > li.my_account:hover > a:before,
.svg #header #nav ul#nav-menu > li.my_account > b:before { background:transparent url('../img/icons/my-account-white.svg') center top no-repeat; }
#header #nav ul#nav-menu > li.my_account.with-children ul li a { background:#78ce9a; }
@media only screen and (max-width: 73.6875rem) {
#header #nav ul#nav-menu > li.my_account > a:after,
#header #nav ul#nav-menu > li.my_account > b:after { background:#78ce9a; }
#header #nav ul#nav-menu > li.my_account a:before { background:transparent url('../img/icons/my-account-turq.png') center top no-repeat;background:transparent url('../img/icons/my-account-white.png') center top no-repeat; }
.svg #header #nav ul#nav-menu > li.my_account a:before { background:transparent url('../img/icons/my-account-turq.svg') center top no-repeat; }
.svg #header #nav ul#nav-menu > li.my_account a:before { background:transparent url('../img/icons/my-account-white.svg') center top no-repeat; }
#header #nav ul#nav-menu > li.my_account:hover > a:before,
#header #nav ul#nav-menu > li.my_account > b:before { background:transparent url('../img/icons/my-account-white.png') center top no-repeat; }
.svg #header #nav ul#nav-menu > li.my_account:hover > a:before,
.svg #header #nav ul#nav-menu > li.my_account > b:before { background:transparent url('../img/icons/my-account-white.svg') center top no-repeat; }
#header #nav ul#nav-menu > li.my_account.with-children ul li a { background:#78ce9a; }
}

/* ---- Hand-written (not generated) --------------------------------------------------------- */

/* Visitor or bidder links: html.af-member is set in the head from AuctionForge's session. */
html:not(.af-member) #header #nav ul#nav-menu > li.my_account ul li.account-member,
html.af-member #header #nav ul#nav-menu > li.my_account ul li.account-guest {
	display: none;
}

/* The account tile is last in the row: open its menu leftwards rather than off the page. */
#header #nav ul#nav-menu > li.my_account.with-children ul {
	left: auto;
	right: 0;
}

/* The original opened submenus on :hover only; also open them for keyboard focus and taps. */
#header #nav ul#nav-menu > li.with-children:focus-within > ul,
#header #nav ul#nav-menu > li.with-children.open > ul {
	display: block;
}
#header #nav ul#nav-menu > li.with-children ul li a:focus-visible {
	outline: 2px solid #06253e;
	outline-offset: -4px;
}

/* Touch screens: menus open by tap only (hover is unreliable there), so a tap on an item
   can't make the menu vanish first. */
@media (hover: none) {
	#header #nav ul#nav-menu > li.with-children:hover > ul { display: none; }
	#header #nav ul#nav-menu > li.with-children.open > ul { display: block; }
}
/* Phones/tablets: drop the menu as a full-width panel directly under the tile grid instead of
   the original's fixed screen position, which landed over the second row of tiles. */
@media only screen and (max-width: 73.6875rem) {
	#header #nav ul#nav-menu { position: relative; }
	#header #nav ul#nav-menu > li.with-children { position: static; }
	#header #nav ul#nav-menu > li.with-children > ul,
	#header #nav ul#nav-menu > li.my_account.with-children > ul {
		position: absolute; top: 100%; left: 0; right: 0; min-width: 100%; padding: 4px 2px 0; z-index: 40;
	}
}