/* UCP Modern: site-level pages other than the Home Page (login, register, about, search...).
   Loaded only outside a journal. Same header/footer/phone menu as the journal pages. */

:root {
	--j: var(--ucp-blue, #1e6292);
	--j-dark: var(--ucp-blue-dark, #174b70);
	--j-darker: var(--ucp-navy, #0f2f52);
	--j-soft: #d9e6ef;
	--j-tint: #eff4f7;
	--ink: var(--ucp-ink, #1b2733);
	--muted: var(--ucp-muted, #566575);
	--line: var(--ucp-line, #dbe3ea);
	--paper: #fff;
	--page: var(--ucp-bg, #f4f7fa);
	--gold: var(--ucp-accent, #f2b705);
	--gold-hover: var(--ucp-accent-hover, #ffc71f);
	--radius: var(--ucp-radius, 14px);
	--shadow: var(--ucp-shadow);
	--shadow-hover: var(--ucp-shadow-hover);
}
body {
	background: var(--ucp-bg);
	color: var(--ucp-ink);
}
body a:focus-visible,
body button:focus-visible,
body input:focus-visible,
body select:focus-visible,
body textarea:focus-visible {
	outline: 3px solid var(--ucp-accent);
	outline-offset: 2px;
}

/* ---------- Header ---------- */
body .pkp_structure_head {
	background: var(--ucp-navy);
	border-bottom: 3px solid var(--ucp-accent);
	position: sticky;
	top: 0;
	z-index: 100;
}
body .pkp_head_wrapper,
body.has_site_logo:has(.ucp_home) .pkp_head_wrapper {
	width: 100%;
	box-sizing: border-box;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 16px;
}
@media (min-width: 992px) {
	body .pkp_head_wrapper {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
	}
}
body .pkp_navigation_primary > li > a,
body .pkp_navigation_user > li > a {
	color: #fff;
	font-weight: 600;
	border-radius: 8px;
	padding: 10px 14px;
	transition: background-color .15s ease, color .15s ease;
}
body .pkp_navigation_primary > li > a:hover,
body .pkp_navigation_primary > li > a:focus,
body .pkp_navigation_user > li > a:hover,
body .pkp_navigation_user > li > a:focus {
	background: rgba(255, 255, 255, .14);
	color: #fff;
}
/* user area: shown/hidden by ucp-header.css (hidden only while it merely repeats Register/Login) */
@media (min-width: 992px) {
	body .pkp_site_name_wrapper,
	body .pkp_navigation_primary_row,
	body .pkp_navigation_primary_wrapper {
		position: static;
		width: auto;
		max-width: none;
		margin: 0;
		padding: 0;
	}
	body .pkp_site_name_wrapper {
		display: flex;
		align-items: center;
	}
	body .pkp_site_nav_menu {
		background: var(--ucp-navy);
	}
	body .pkp_head_wrapper::before,
	body .pkp_head_wrapper::after,
	body .pkp_site_name_wrapper::before,
	body .pkp_site_name_wrapper::after,
	body .pkp_navigation_primary_wrapper::before,
	body .pkp_navigation_primary_wrapper::after {
		content: none;
	}
	body .pkp_site_name {
		width: auto;
		position: static;
		margin: 0;
		padding: 6px 0;
	}
	body .pkp_site_name .is_img img {
		height: 80px !important;
		width: auto !important;
		max-height: 80px !important;
		display: block;
	}
	body .pkp_site_nav_menu {
		flex: 0 0 auto;
		white-space: nowrap;
		position: static;
		width: auto;
		background: transparent;
		padding: 0;
		margin-left: auto;
	}
}
body .pkp_navigation_primary_row,
body .pkp_navigation_primary_wrapper {
	background: transparent;
	border: 0;
	padding: 0;
	margin: 0;
	width: auto;
}
body a:focus-visible,
body input:focus-visible,
body button:focus-visible {
	outline: 3px solid var(--ucp-accent);
	outline-offset: 2px;
}

/* ---------- Layout ---------- */
body .pkp_structure_content {
	padding-top: 0 !important;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	background: transparent;
}
body .pkp_structure_main {
	margin-top: 0 !important;
	width: 100%;
	max-width: none;
	float: none;
	padding: 0;
	margin: 0;
}
body .pkp_structure_main::before,
body .pkp_structure_main::after {
	content: none;
}
body .pkp_structure_main::before,
body .pkp_structure_main::after {
	display: none;
}
.ucp_home > section:not(.ucp_hero):not(.highlights),
.ucp_home > .highlights,
.ucp_home > .cmp_announcements {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 16px;
	padding-right: 16px;
	box-sizing: border-box;
}
.ucp_home h2 {
	color: var(--ucp-navy);
	font-size: 1.75rem;
	line-height: 1.25;
	margin: 0;
}


/* =====================================================================
   Mobile / tablet navigation (below 992px)
   ===================================================================== */
@media (max-width: 991px) {
	/* Sticky header: the menu button is always reachable */
	.pkp_structure_head {
		position: sticky;
		top: 0;
		z-index: 300;
	}
	.pkp_head_wrapper,
	.has_site_logo .pkp_head_wrapper {
		padding: 0;
		max-width: none;
	}
	.pkp_site_name_wrapper {
		height: 56px;
		padding: 0;
	}
	.pkp_site_nav_toggle {
		width: 56px;
		height: 56px;
		-webkit-tap-highlight-color: transparent;
	}
	.pkp_site_nav_toggle:focus-visible {
		outline: 3px solid var(--gold);
		outline-offset: -3px;
	}
	/* Journal title: up to two lines, never cut off */
	.pkp_site_name {
		position: absolute;
		left: 62px;
		right: 12px;
		top: 0;
		height: 56px;
		display: flex;
		align-items: center;
		padding: 0;
		white-space: normal;
		overflow: hidden;
	}
	.pkp_site_name .is_text {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		font-size: .98rem;
		line-height: 1.2;
		padding: 0;
		white-space: normal;
	}
	.pkp_site_name .is_text::after {
		display: none;
	}
	.pkp_site_name .is_img img {
		max-height: 46px;
		width: auto;
	}

	/* Menu panel */
	.pkp_site_nav_menu {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		width: auto;
		max-height: calc(100vh - 56px);
		max-height: calc(100dvh - 56px);
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
		padding: 0;
		background: var(--j-darker);
		border-top: 3px solid var(--gold);
		box-shadow: 0 18px 30px rgba(15, 47, 82, .35);
	}
	.pkp_navigation_primary_row,
	.pkp_navigation_primary_wrapper {
		width: 100%;
		max-width: none;
		padding: 0;
		margin: 0;
		border: 0;
		display: block;
	}
	.pkp_navigation_primary {
		display: block;
		margin: 0;
		padding: 0;
		text-align: left;
	}
	.pkp_navigation_primary > li,
	.pkp_navigation_user > li {
		display: block;
		margin: 0;
		border-bottom: 1px solid rgba(255, 255, 255, .12);
	}
	.pkp_navigation_primary > li > a,
	.pkp_navigation_primary_wrapper .pkp_navigation_primary > li > a,
	.pkp_navigation_user > li > a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		min-height: 48px;
		margin: 0;
		padding: 12px 20px 12px 16px;
		border: 0;
		border-left: 4px solid transparent;
		border-radius: 0;
		font-size: 1rem;
		font-weight: 600;
		line-height: 1.3;
		color: #fff;
		text-decoration: none;
		background: transparent;
	}
	.pkp_navigation_primary > li > a:hover,
	.pkp_navigation_primary > li > a:focus,
	.pkp_navigation_user > li > a:hover,
	.pkp_navigation_user > li > a:focus {
		background: rgba(255, 255, 255, .1);
		color: #fff;
	}
	.pkp_nav_list a:focus-visible,
	.pkp_navigation_primary a:focus-visible {
		outline: 3px solid var(--gold);
		outline-offset: -3px;
	}

	/* Sub-menus: always readable, indented, collapsible once JS runs */
	.pkp_navigation_primary ul,
	.pkp_navigation_user ul {
		position: static;
		display: block;
		width: auto;
		margin: 0;
		padding: 0;
		left: auto !important;
		transform: none !important;
		background: rgba(0, 0, 0, .22);
		border: 0;
		border-radius: 0;
		box-shadow: none;
		float: none;
	}
	.pkp_navigation_primary ul li,
	.pkp_navigation_user ul li {
		display: block;
		margin: 0;
		border-top: 1px solid rgba(255, 255, 255, .06);
	}
	.pkp_navigation_primary ul a,
	.pkp_navigation_user ul a,
	.pkp_nav_list ul a {
		display: block;
		padding: 12px 20px 12px 32px;
		border: 0;
		border-left: 4px solid transparent;
		font-size: .95rem;
		font-weight: 500;
		line-height: 1.35;
		color: #dbe6f0;
		background: transparent;
	}
	.pkp_navigation_primary ul a:hover,
	.pkp_navigation_primary ul a:focus,
	.pkp_navigation_user ul a:hover,
	.pkp_navigation_user ul a:focus,
	.pkp_nav_list ul a:hover,
	.pkp_nav_list ul a:focus {
		background: rgba(255, 255, 255, .1);
		color: #fff;
		border-left-color: transparent;
	}
	/* Current page */
	.pkp_site_nav_menu a.ucp_current {
		border-left-color: var(--gold) !important;
		background: rgba(255, 255, 255, .1);
		color: #fff;
		font-weight: 700;
	}
	/* Collapsible groups (only when the script is running; otherwise everything stays open) */
	.ucp_js .pkp_navigation_primary li.ucp_has_sub > ul {
		display: none;
	}
	.ucp_js .pkp_navigation_primary li.ucp_has_sub.ucp_open > ul {
		display: block;
	}
	.ucp_js .pkp_navigation_primary li.ucp_has_sub > a::after {
		content: "";
		flex: 0 0 auto;
		width: 9px;
		height: 9px;
		margin-left: 12px;
		border-right: 2.5px solid #fff;
		border-bottom: 2.5px solid #fff;
		transform: rotate(45deg);
		transition: transform .2s ease;
	}
	.ucp_js .pkp_navigation_primary li.ucp_has_sub.ucp_open > a::after {
		transform: rotate(-135deg);
	}
	.ucp_js .pkp_navigation_primary li.ucp_has_sub.ucp_open > a {
		background: rgba(255, 255, 255, .06);
	}

	/* Register / Login inside the panel */
	.pkp_navigation_user_wrapper {
		position: static;
		transform: none;
		width: 100%;
		padding: 0;
		margin: 0;
		background: transparent;
		text-align: left;
	}
	.pkp_navigation_user {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
		width: 100%;
		margin: 0;
		padding: 14px 16px 18px;
		border: 0;
		text-align: left;
		box-sizing: border-box;
	}
	.pkp_navigation_user > li {
		flex: 1 1 140px;
		border: 0;
	}
	.pkp_navigation_user > li > a {
		justify-content: center;
		min-height: 46px;
		padding: 10px 16px;
		border: 2px solid rgba(255, 255, 255, .55);
		border-radius: 10px;
		font-weight: 700;
	}
	.pkp_navigation_user > li:last-child > a {
		background: var(--gold);
		border-color: var(--gold);
		color: #1b1b1b;
	}
	.pkp_navigation_user > li:last-child > a:hover {
		background: var(--gold-hover);
	}
	.pkp_navigation_user ul {
		margin-top: 6px;
		border-radius: 10px;
		overflow: hidden;
	}
	.pkp_navigation_search_wrapper {
		display: none;
	}

	/* No page scroll behind an open menu */
	html.ucp_menu_open body {
		overflow: hidden;
	}
}


/* =====================================================================
   Mobile header: branding on the left, burger / close button top-right
   ===================================================================== */
@media (max-width: 991px) {
	.pkp_site_name_wrapper {
		height: 60px;
	}
	.pkp_site_name {
		left: 16px;
		right: 72px;
		height: 60px;
	}
	.pkp_site_nav_menu {
		max-height: calc(100vh - 60px);
		max-height: calc(100dvh - 60px);
	}

	/* The button: right corner, comfortable 44px touch target */
	.pkp_site_nav_toggle {
		left: auto;
		right: 10px;
		top: 8px;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 1px solid rgba(255, 255, 255, .22);
		border-radius: 12px;
		background: rgba(255, 255, 255, .08);
		box-shadow: none;
		cursor: pointer;
		transition: background-color .18s ease, border-color .18s ease, transform .12s ease;
	}
	.pkp_site_nav_toggle:hover {
		background: rgba(255, 255, 255, .16);
		border-color: rgba(255, 255, 255, .4);
	}
	.pkp_site_nav_toggle:active {
		background: rgba(255, 255, 255, .26);
		transform: scale(.94);
	}
	.pkp_site_nav_toggle:focus {
		box-shadow: none;
	}
	.pkp_site_nav_toggle:focus-visible {
		outline: 3px solid var(--gold);
		outline-offset: 2px;
	}
	.pkp_site_nav_toggle--transform {
		background: var(--gold);
		border-color: var(--gold);
	}
	.pkp_site_nav_toggle--transform:hover {
		background: var(--gold-hover);
	}

	/* Icon: three rounded bars that morph into an X */
	.pkp_site_nav_toggle > span {
		width: 20px;
		height: 14px;
		border-bottom: 2.5px solid #fff;
		border-radius: 2px;
		overflow: visible;
		transition: border-color .15s ease;
	}
	.pkp_site_nav_toggle > span::before,
	.pkp_site_nav_toggle > span::after {
		height: 2.5px;
		border-radius: 2px;
		background: #fff;
		transition: transform .25s ease, top .25s ease;
	}
	.pkp_site_nav_toggle > span::before {
		top: 0;
	}
	.pkp_site_nav_toggle > span::after {
		top: 5.75px;
	}
	.pkp_site_nav_toggle--transform > span {
		border-bottom: 2.5px solid transparent;
		overflow: visible;
	}
	.pkp_site_nav_toggle--transform > span::before,
	.pkp_site_nav_toggle--transform > span::after {
		background: #1b1b1b;
		top: 5.75px;
	}
	.pkp_site_nav_toggle--transform > span::before {
		transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
	}
	.pkp_site_nav_toggle--transform > span::after {
		transform: rotate(-45deg);
		-webkit-transform: rotate(-45deg);
	}

	/* Menu panel slides open instead of appearing abruptly */
	.pkp_site_nav_menu--isOpen {
		animation: ucpMenuIn .2s ease-out;
	}
	[dir="rtl"] .pkp_site_nav_toggle {
		right: auto;
		left: 10px;
	}
	[dir="rtl"] .pkp_site_name {
		left: 72px;
		right: 16px;
	}
}
@keyframes ucpMenuIn {
	from { opacity: 0; transform: translateY(-8px); }
	to { opacity: 1; transform: translateY(0); }
}
/* Landscape phones: slightly shorter header, panel still scrolls */
@media (max-width: 991px) and (max-height: 480px) {
	.pkp_site_name_wrapper,
	.pkp_site_name {
		height: 54px;
	}
	.pkp_site_nav_toggle {
		top: 5px;
	}
	.pkp_site_nav_menu {
		max-height: calc(100vh - 54px);
		max-height: calc(100dvh - 54px);
	}
}
/* Desktop: nothing of the above applies (burger stays hidden by the default theme) */

/* =====================================================================
   Desktop header polish (site level)
   ===================================================================== */
@media (min-width: 992px) {
	.pkp_navigation_primary > li > a {
		padding: 10px 14px;
		font-size: .95rem;
		font-weight: 600;
		border-radius: 8px;
		transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
	}
	.pkp_navigation_primary > li > a:hover,
	.pkp_navigation_primary > li > a:focus-visible {
		background: rgba(255, 255, 255, .14);
		color: #fff;
		text-decoration: none;
	}
	/* current page */
	.pkp_navigation_primary > li > a.ucp_current {
		background: rgba(255, 255, 255, .08);
		box-shadow: inset 0 -3px 0 var(--ucp-accent, #f2b705);
		border-radius: 8px 8px 0 0;
	}
	/* Register = outline, Login = gold call to action (recognised by their address, so other items are unaffected) */
	.pkp_navigation_primary a[href*="/user/register"] {
		margin-left: 6px;
		border: 1.5px solid rgba(255, 255, 255, .5);
	}
	.pkp_navigation_primary a[href*="/user/register"]:hover {
		border-color: #fff;
	}
	.pkp_navigation_primary a[href$="/login"],
	.pkp_navigation_primary a[href*="/login?"] {
		margin-left: 6px;
		background: var(--ucp-accent, #f2b705);
		color: #1b1b1b;
		font-weight: 700;
	}
	.pkp_navigation_primary a[href$="/login"]:hover,
	.pkp_navigation_primary a[href$="/login"]:focus-visible,
	.pkp_navigation_primary a[href*="/login?"]:hover {
		background: var(--ucp-accent-hover, #ffc71f);
		color: #1b1b1b;
	}
	.pkp_navigation_primary a[href$="/login"].ucp_current {
		box-shadow: none;
		border-radius: 8px;
	}
}

/* Tablets (768-991px): the header spans the full width (the default theme centres it in a 728px box) */
@media (max-width: 991px) {
	.pkp_site_name_wrapper,
	.pkp_head_wrapper,
	.has_site_logo .pkp_head_wrapper {
		width: 100%;
		max-width: none;
		margin: 0;
		box-sizing: border-box;
	}
}

/* Larger header logo: give the header row room (desktop) and keep it tidy on phones */
@media (min-width: 992px) {
	body .pkp_site_name {
		padding: 8px 0;
	}
	body .pkp_site_name .is_img img {
		width: auto !important;
		object-fit: contain;
	}
}
@media (max-width: 991px) {
	.pkp_site_name .is_img img {
		height: 46px !important;
		width: auto !important;
		max-height: 46px !important;
	}
}

/* The Login / Register buttons keep their own look when they are the current page */
@media (min-width: 992px) {
	.pkp_navigation_primary > li > a[href$="/login"].ucp_current,
	.pkp_navigation_primary > li > a[href*="/login?"].ucp_current {
		background: var(--ucp-accent, #f2b705);
		color: #1b1b1b;
		box-shadow: none;
		border-radius: 8px;
	}
	.pkp_navigation_primary > li > a[href*="/user/register"].ucp_current {
		background: rgba(255, 255, 255, .12);
		border-color: #fff;
		box-shadow: none;
		border-radius: 8px;
	}
}