/* UCP Modern: header user area (Register / Login when logged out, name + dropdown when logged in).
   Desktop only (>= 992px); below that the user links live inside the phone menu panel.
   Loaded on the site and in every journal. */

@media (min-width: 992px) {
	/* ---------- Container: right-aligned and vertically centred in the title row ---------- */
	.pkp_navigation_user_wrapper {
		position: absolute;
		top: 0;
		right: 16px;
		left: auto;
		transform: none;
		height: 56px;
		width: auto;
		margin: 0;
		padding: 0;
		display: flex;
		align-items: center;
		background: transparent;
		border: 0;
		z-index: 1000;
	}
	.pkp_navigation_user {
		display: flex;
		align-items: center;
		gap: 10px;
		width: auto;
		margin: 0;
		padding: 0;
		list-style: none;
		text-align: left;
		font-size: .9rem;
	}
	.pkp_navigation_user > li {
		position: relative;
		display: block;
		margin: 0;
		padding: 0;
	}

	/* ---------- Buttons: same height, same shape ---------- */
	.pkp_navigation_user > li > a,
	.pkp_navigation_user > li:last-child > a {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		height: 38px;
		margin: 0;
		padding: 0 16px;
		box-sizing: border-box;
		border: 1.5px solid rgba(255, 255, 255, .45);
		border-radius: 10px;
		background: transparent;
		color: #fff;
		font-size: .9rem;
		font-weight: 600;
		line-height: 1;
		white-space: nowrap;
		text-decoration: none;
		transition: background-color .15s ease, border-color .15s ease, color .15s ease;
	}
	.pkp_navigation_user > li > a:hover,
	.pkp_navigation_user > li > a:focus-visible,
	.pkp_navigation_user > li:last-child > a:hover {
		background: rgba(255, 255, 255, .15);
		border-color: #fff;
		color: #fff;
	}
	/* Login = call to action (recognised by its address, so a logged-in user menu is not affected) */
	.pkp_navigation_user > li > a[href$="/login"],
	.pkp_navigation_user > li > a[href*="/login?"] {
		background: var(--ucp-accent, #f2b705);
		border-color: var(--ucp-accent, #f2b705);
		color: #1b1b1b;
		font-weight: 700;
	}
	.pkp_navigation_user > li > a[href$="/login"]:hover,
	.pkp_navigation_user > li > a[href*="/login?"]:hover {
		background: var(--ucp-accent-hover, #ffc71f);
		border-color: var(--ucp-accent-hover, #ffc71f);
		color: #1b1b1b;
	}

	/* Logged in: name, task badge and caret on one line */
	.pkp_navigation_user > li > a .task_count {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 22px;
		height: 22px;
		margin: 0;
		padding: 0 6px;
		box-sizing: border-box;
		border-radius: 999px;
		background: var(--ucp-accent, #f2b705);
		color: #1b1b1b;
		font-size: .74rem;
		font-weight: 700;
		line-height: 1;
	}
	.pkp_navigation_user > li > a.dropdown-toggle::after,
	.pkp_navigation_user > li > a[aria-haspopup]::after {
		margin: 0 0 0 2px;
		vertical-align: middle;
	}

	/* the badge keeps its colour while the pill is hovered, focused or open (default theme recolours it) */
	.pkp_navigation_user > li > a:hover .task_count,
	.pkp_navigation_user > li > a:focus .task_count,
	.pkp_navigation_user > li > a:focus-visible .task_count,
	.pkp_navigation_user > li > a[aria-expanded="true"] .task_count,
	.pkp_navigation_user > li.show > a .task_count {
		background: var(--ucp-accent, #f2b705);
		color: #1b1b1b;
	}
	.pkp_navigation_user > li > a:focus,
	.pkp_navigation_user > li > a[aria-expanded="true"] {
		background: rgba(255, 255, 255, .15);
		border-color: #fff;
		color: #fff;
		outline: none;
	}
	.pkp_navigation_user > li > a:focus-visible {
		outline: 3px solid var(--ucp-accent, #f2b705);
		outline-offset: 2px;
	}

	/* ---------- Dropdown: right-aligned card ---------- */
	.pkp_navigation_user > li > ul,
	.pkp_navigation_user .dropdown-menu {
		position: absolute;
		top: calc(100% + 8px) !important;
		right: 0 !important;
		left: auto !important;
		transform: none !important;
		width: auto;
		min-width: 13em;
		margin: 0;
		padding: 6px 0;
		list-style: none;
		background: #fff;
		border: 0;
		border-top: 3px solid var(--ucp-accent, #f2b705);
		border-radius: 0 0 12px 12px;
		box-shadow: 0 14px 30px rgba(15, 47, 82, .24);
		text-align: left;
	}
	.pkp_navigation_user > li > ul li {
		display: block;
		margin: 0;
	}
	/* Hover bridge: the card sits 8px below the pill. The default theme only keeps it open while the toggle or
	   the menu itself is hovered, so the empty gap closed it mid-move. This invisible strip belongs to the menu,
	   so :hover is never lost between the pill and the card. */
	.pkp_navigation_user > li > ul::before,
	.pkp_navigation_user .dropdown-menu::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 100%;
		height: 11px; /* 8px gap + 3px accent border, so it ends exactly at the pill */
	}
	/* keyboard: keep the menu open while focus is inside it */
	.pkp_navigation_user > li:focus-within > .dropdown-menu {
		display: block;
	}
	.pkp_navigation_user > li > ul a {
		display: block;
		margin: 0;
		padding: 10px 16px 10px 13px;
		border: 0;
		border-left: 3px solid transparent;
		border-radius: 0;
		background: transparent;
		color: var(--ucp-ink, #1b2733);
		font-size: .9rem;
		font-weight: 500;
		line-height: 1.35;
		white-space: nowrap;
		text-decoration: none;
	}
	.pkp_navigation_user > li > ul a:hover,
	.pkp_navigation_user > li > ul a:focus-visible {
		background: #eff4f7;
		border-left-color: var(--ucp-accent, #f2b705);
		color: var(--ucp-navy, #0f2f52);
	}
	.pkp_navigation_user > li > ul li:last-child a {
		margin-top: 4px;
		border-top: 1px solid var(--ucp-line, #dbe3ea);
		padding-top: 12px;
	}
	.pkp_navigation_user > li > ul a .task_count {
		display: none;
	}
}

/* ---------- Site level: the user area is a flex item next to the menu (the title row is the whole header) ---------- */
@media (min-width: 992px) {
	html:has(link[href*="ucp-site.css"]) .pkp_site_nav_menu {
		display: flex;
		align-items: center;
		gap: 14px;
	}
	html:has(link[href*="ucp-site.css"]) .pkp_navigation_user_wrapper {
		position: static;
		height: auto;
	}
}

/* Site level, logged OUT: Register/Login are already in the main menu, so the second copy is hidden.
   Logged IN there are no such links, so the user menu (dashboard, profile, logout) stays visible. */
html:has(link[href*="ucp-site.css"]) .pkp_navigation_user_wrapper:has(a[href$="/login"], a[href*="/user/register"]) {
	display: none;
}

/* Phones/tablets: the user links sit inside the menu panel */
@media (max-width: 991px) {
	.pkp_navigation_user > li > a .task_count {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 22px;
		height: 22px;
		margin: 0 0 0 8px;
		padding: 0 6px;
		box-sizing: border-box;
		border-radius: 999px;
		background: var(--ucp-accent, #f2b705);
		color: #1b1b1b;
		font-size: .74rem;
		font-weight: 700;
		line-height: 1;
	}
	/* logged-in account button: outlined (gold stays reserved for the Login call to action) */
	.pkp_navigation_user > li:last-child > a:not([href$="/login"]):not([href*="/login?"]) {
		background: transparent;
		border-color: rgba(255, 255, 255, .55);
		color: #fff;
	}
	.pkp_navigation_user > li > ul a .task_count {
		display: none;
	}
}

/* Logo: its image carries a navy background that is almost, but not exactly, the header colour.
   "lighten" lets the header colour win wherever the image is darker, so no square shows. */
.pkp_site_name .is_img img,
.ucp_footer_logo {
	mix-blend-mode: lighten;
	border-radius: 14px;
}