/* ==========================================================================
   JOURNAL OF LEARNING FRONTIERS — RESPONSIVE STYLESHEET
   custom.css — Universal responsive design across all devices (320px to 4K)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,400;0,700;0,900;1,400;1,700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
	--jlf-primary: #0E3846;
	--jlf-accent: #EAA624;
	--jlf-teal: #00A896;
	--jlf-orange: #F37335;
	--jlf-bg: #FAF8F5;
	--jlf-white: #FFFFFF;
	--jlf-muted: #475569;
	--jlf-text: #1E293B;
	--jlf-border: #E2DED7;
	--jlf-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--jlf-serif: 'Merriweather', Georgia, serif;
}

/* ═══════════════════════════════════════════════════════
   0. GLOBAL RESET & OVERFLOW PREVENTION
   ═══════════════════════════════════════════════════════ */
html,
body {
	width: 100% !important;
	max-width: 100% !important;
	overflow-x: hidden !important;
	box-sizing: border-box !important;
	font-family: var(--jlf-sans) !important;
	background-color: var(--jlf-bg) !important;
	color: var(--jlf-text) !important;
	-webkit-text-size-adjust: 100% !important;
}

*,
*::before,
*::after {
	box-sizing: inherit !important;
}

.pkp_structure_page {
	width: 100% !important;
	max-width: 100% !important;
	overflow-x: hidden !important;
	position: relative !important;
	background: var(--jlf-bg) !important;
}

/* Neutralize LESS theme container fixed widths on header elements across ALL breakpoints */
.pkp_site_name_wrapper,
.pkp_navigation_primary_wrapper,
.pkp_navigation_primary_row,
.pkp_navigation_user,
.pkp_navigation_user_wrapper {
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	clear: none !important;
}

@media (min-width: 768px) {

	.pkp_site_name_wrapper,
	.pkp_navigation_primary_wrapper,
	.pkp_navigation_user,
	.pkp_navigation_user_wrapper {
		width: auto !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 0 !important;
	}
}

@media (min-width: 992px) {

	.pkp_site_name_wrapper,
	.pkp_navigation_primary_wrapper,
	.pkp_navigation_user,
	.pkp_navigation_user_wrapper {
		width: auto !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 0 !important;
	}
}

@media (min-width: 1200px) {

	.pkp_site_name_wrapper,
	.pkp_navigation_primary_wrapper,
	.pkp_navigation_user,
	.pkp_navigation_user_wrapper {
		width: auto !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 0 !important;
	}
}

/* ═══════════════════════════════════════════════════════
   1. HEADER STRUCTURAL SHELL
   ═══════════════════════════════════════════════════════ */
.pkp_structure_head {
	background-color: var(--jlf-bg) !important;
	border-bottom: 1px solid var(--jlf-border) !important;
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04) !important;
	position: sticky !important;
	top: 0 !important;
	z-index: 9999 !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

.pkp_head_wrapper {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	max-width: 1360px !important;
	width: 100% !important;
	margin: 0 auto !important;
	padding: 12px 36px !important;
	padding-top: 12px !important;
	box-sizing: border-box !important;
	position: relative !important;
	min-height: 64px !important;
}

@media (min-width: 768px) {

	.pkp_head_wrapper,
	.has_site_logo .pkp_head_wrapper {
		padding-top: 12px !important;
	}
}

@media (min-width: 992px) {

	.pkp_head_wrapper,
	.has_site_logo .pkp_head_wrapper {
		padding-top: 12px !important;
	}
}

@media (min-width: 1200px) {

	.pkp_head_wrapper,
	.has_site_logo .pkp_head_wrapper {
		padding-top: 12px !important;
	}
}

/* ═══════════════════════════════════════════════════════
   2. HEADER FLEX AREAS
   ═══════════════════════════════════════════════════════ */
.jlf_brand_area {
	flex: 0 0 auto !important;
	display: flex !important;
	align-items: center !important;
	min-width: 0 !important;
	z-index: 10 !important;
}

.jlf_nav_area {
	flex: 1 1 auto !important;
	display: flex !important;
	align-items: center !important;
	justify-content: flex-end !important;
	min-width: 0 !important;
	position: relative !important;
}

/* ═══════════════════════════════════════════════════════
   3. BRAND / LOGO
   ═══════════════════════════════════════════════════════ */
.pkp_site_name_wrapper {
	display: flex !important;
	align-items: center !important;
	height: auto !important;
}

.pkp_site_name {
	position: static !important;
	left: auto !important;
	right: auto !important;
	padding: 0 !important;
	margin: 0 !important;
	overflow: visible !important;
	white-space: normal !important;
	background: transparent !important;
	font-size: 1rem !important;
	width: auto !important;
}

.pkp_site_name a.is_text,
.pkp_site_name a.is_img,
.pkp_site_name a.custom_journal_brand {
	display: inline-flex !important;
	align-items: center !important;
	gap: 10px !important;
	text-decoration: none !important;
	color: var(--jlf-primary) !important;
	line-height: 1 !important;
	padding: 0 !important;
	margin: 0 !important;
	font-size: inherit !important;
	background: transparent !important;
}

.pkp_site_name a.is_text:hover,
.pkp_site_name a.is_img:hover,
.pkp_site_name a.custom_journal_brand:hover {
	opacity: 0.9 !important;
	text-decoration: none !important;
}

/* When logo IMAGE is uploaded — show only the img, hide SVG icon + text */
.pkp_site_name a.is_img img {
	max-height: 52px !important;
	max-width: 220px !important;
	width: auto !important;
	height: auto !important;
	display: block !important;
	object-fit: contain !important;
}

/* Hide the custom brand_icon SVG and brand_text when a real logo img is present */
.pkp_site_name a.is_img .brand_icon,
.pkp_site_name a.is_img .brand_text,
.has_site_logo .pkp_site_name a.is_img .brand_icon,
.has_site_logo .pkp_site_name a.is_img .brand_text {
	display: none !important;
}

/* When displaying a logo image, don't add gap around the lone img */
.pkp_site_name a.is_img {
	gap: 0 !important;
	scale:5;
}

@media (max-width: 576px) {
	.pkp_site_name a.is_img img {
		max-height: 40px !important;
		max-width: 160px !important;
	}
}

.brand_icon {
	display: flex !important;
	align-items: center !important;
	flex-shrink: 0 !important;
}

.brand_icon svg {
	display: block !important;
	width: 42px !important;
	height: 42px !important;
}

.brand_text {
	display: flex !important;
	flex-direction: column !important;
	line-height: 1.18 !important;
}

.brand_prefix {
	font-family: var(--jlf-serif) !important;
	font-size: 12.5px !important;
	font-weight: 400 !important;
	color: var(--jlf-primary) !important;
	display: block !important;
	white-space: nowrap !important;
}

.brand_title {
	font-family: var(--jlf-serif) !important;
	font-size: 19px !important;
	font-weight: 900 !important;
	color: var(--jlf-primary) !important;
	display: block !important;
	letter-spacing: -0.02em !important;
	white-space: nowrap !important;
}

/* ═══════════════════════════════════════════════════════
   4. HAMBURGER TOGGLE BUTTON
   ═══════════════════════════════════════════════════════ */
.pkp_site_nav_toggle {
	display: none !important;
	align-items: center !important;
	justify-content: center !important;
	width: 44px !important;
	height: 44px !important;
	background: #FFFFFF !important;
	border: 1.5px solid var(--jlf-border) !important;
	border-radius: 10px !important;
	cursor: pointer !important;
	color: var(--jlf-primary) !important;
	font-size: 18px !important;
	line-height: 1 !important;
	flex-shrink: 0 !important;
	margin-left: 8px !important;
	padding: 0 !important;
	transition: background .18s ease, border-color .18s ease !important;
	position: relative !important;
	z-index: 10001 !important;
}

.pkp_site_nav_toggle:hover,
.pkp_site_nav_toggle:focus {
	background: #F1EFEA !important;
	border-color: var(--jlf-primary) !important;
	outline: none !important;
}

.pkp_site_nav_toggle:active {
	transform: scale(0.94) !important;
}

/* Icon — 3-bar hamburger via background (no FA dependency) */
.pkp_site_nav_toggle>span.fa {
	pointer-events: none !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 20px !important;
	height: 16px !important;
	position: relative !important;
	flex-shrink: 0 !important;
}

.pkp_site_nav_toggle>span.fa::before,
.pkp_site_nav_toggle>span.fa::after,
.pkp_site_nav_toggle>span.fa .bar {
	content: '' !important;
	display: block !important;
	width: 20px !important;
	height: 2px !important;
	background: var(--jlf-primary) !important;
	border-radius: 2px !important;
	position: absolute !important;
	transition: transform 0.2s ease, opacity 0.2s ease !important;
}

.pkp_site_nav_toggle>span.fa::before {
	top: 0 !important;
}

.pkp_site_nav_toggle>span.fa::after {
	bottom: 0 !important;
}

/* Middle bar via box-shadow trick */
.pkp_site_nav_toggle>span.fa {
	box-shadow: 0 7px 0 0 var(--jlf-primary) !important;
}

/* When open (aria-expanded=true): show X */
.pkp_site_nav_toggle[aria-expanded="true"] {
	background: var(--jlf-primary) !important;
	border-color: var(--jlf-primary) !important;
}

.pkp_site_nav_toggle[aria-expanded="true"]>span.fa {
	box-shadow: none !important;
}

.pkp_site_nav_toggle[aria-expanded="true"]>span.fa::before {
	top: 7px !important;
	transform: rotate(45deg) !important;
	background: #FFFFFF !important;
}

.pkp_site_nav_toggle[aria-expanded="true"]>span.fa::after {
	bottom: 7px !important;
	transform: rotate(-45deg) !important;
	background: #FFFFFF !important;
}

/* ═══════════════════════════════════════════════════════
   5. DESKTOP NAV BAR (screens > 992px)
   ═══════════════════════════════════════════════════════ */
@media (min-width: 993px) {

	.pkp_site_nav_toggle {
		display: none !important;
	}

	.pkp_site_nav_menu {
		display: flex !important;
		align-items: center !important;
		justify-content: flex-end !important;
		flex: 1 1 auto !important;
		background: transparent !important;
		padding: 0 !important;
		margin: 0 !important;
		width: auto !important;
		position: static !important;
		top: auto !important;
		left: auto !important;
		right: auto !important;
		opacity: 1 !important;
		visibility: visible !important;
		pointer-events: auto !important;
		transform: none !important;
		box-shadow: none !important;
		border: none !important;
		z-index: 100 !important;
	}

	.jlf_nav_inner {
		display: flex !important;
		align-items: center !important;
		justify-content: flex-end !important;
		width: 100% !important;
		gap: 6px !important;
	}

	.pkp_navigation_primary_row {
		display: flex !important;
		align-items: center !important;
		justify-content: flex-end !important;
		flex: 0 1 auto !important;
	}

	.pkp_navigation_primary_wrapper {
		display: flex !important;
		align-items: center !important;
		justify-content: flex-end !important;
	}

	/* Primary Nav list */
	ul.pkp_navigation_primary,
	ul.pkp_navigation_primary.pkp_nav_list {
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
		list-style: none !important;
		margin: 0 !important;
		padding: 0 !important;
		gap: 0 !important;
		text-align: left !important;
		width: auto !important;
		max-width: none !important;
	}

	ul.pkp_navigation_primary>li,
	ul.pkp_navigation_primary.pkp_nav_list>li {
		position: relative !important;
		display: inline-flex !important;
		align-items: center !important;
		margin: 0 !important;
		padding: 0 !important;
		float: none !important;
	}

	/* Nav items links */
	ul.pkp_navigation_primary>li>a,
	ul.pkp_navigation_primary.pkp_nav_list>li>a {
		font-family: var(--jlf-sans) !important;
		font-size: 14px !important;
		font-weight: 500 !important;
		color: var(--jlf-muted) !important;
		text-decoration: none !important;
		display: inline-flex !important;
		align-items: center !important;
		gap: 4px !important;
		padding: 8px 12px !important;
		margin: 0 !important;
		background: transparent !important;
		border: none !important;
		border-bottom: 2px solid transparent !important;
		line-height: 1.4 !important;
		white-space: nowrap !important;
		transition: color .18s ease, border-color .18s ease !important;
	}

	ul.pkp_navigation_primary>li>a:hover,
	ul.pkp_navigation_primary>li>a:focus,
	ul.pkp_navigation_primary.pkp_nav_list>li>a:hover,
	ul.pkp_navigation_primary.pkp_nav_list>li>a:focus {
		color: var(--jlf-primary) !important;
		border-color: transparent !important;
		background: transparent !important;
		text-decoration: none !important;
		outline: none !important;
	}

	/* Active item highlight */
	.pkp_page_index ul.pkp_navigation_primary>li:first-child>a {
		font-weight: 600 !important;
		color: var(--jlf-primary) !important;
		border-bottom-color: var(--jlf-accent) !important;
	}

	/* Submenu chevron indicator */
	ul.pkp_navigation_primary>li:has(> ul)>a::after {
		content: '' !important;
		display: inline-block !important;
		width: 4.5px !important;
		height: 4.5px !important;
		border-right: 1.5px solid currentColor !important;
		border-bottom: 1.5px solid currentColor !important;
		border-top: none !important;
		border-left: none !important;
		transform: rotate(45deg) !important;
		margin-left: 4px !important;
		margin-top: -2px !important;
		flex-shrink: 0 !important;
		transition: transform .18s ease !important;
	}

	ul.pkp_navigation_primary>li:has(> ul):hover>a::after {
		transform: rotate(225deg) !important;
		margin-top: 2px !important;
	}

	/* Dropdown submenu */
	ul.pkp_navigation_primary>li>ul {
		position: absolute !important;
		top: calc(100% + 4px) !important;
		left: 0 !important;
		transform: translateY(6px) !important;
		min-width: 210px !important;
		background: var(--jlf-white) !important;
		border: 1px solid var(--jlf-border) !important;
		border-radius: 10px !important;
		box-shadow: 0 10px 28px rgba(14, 56, 70, 0.14) !important;
		padding: 6px 0 !important;
		margin: 0 !important;
		list-style: none !important;
		opacity: 0 !important;
		visibility: hidden !important;
		pointer-events: none !important;
		z-index: 10000 !important;
		width: auto !important;
		transition: opacity .18s ease, transform .18s ease, visibility .18s ease !important;
	}

	ul.pkp_navigation_primary>li:hover>ul,
	ul.pkp_navigation_primary>li:focus-within>ul {
		opacity: 1 !important;
		visibility: visible !important;
		pointer-events: auto !important;
		transform: translateY(0) !important;
		left: 0 !important;
	}

	ul.pkp_navigation_primary>li>ul li {
		display: block !important;
		margin: 0 !important;
		padding: 0 !important;
		width: 100% !important;
	}

	ul.pkp_navigation_primary>li>ul a {
		display: block !important;
		padding: 9px 18px !important;
		font-family: var(--jlf-sans) !important;
		font-size: 13.5px !important;
		font-weight: 500 !important;
		color: var(--jlf-muted) !important;
		background: transparent !important;
		text-decoration: none !important;
		border: none !important;
		line-height: 1.4 !important;
		white-space: nowrap !important;
		transition: all .14s ease !important;
	}

	ul.pkp_navigation_primary>li>ul a:hover,
	ul.pkp_navigation_primary>li>ul a:focus {
		background: var(--jlf-bg) !important;
		color: var(--jlf-primary) !important;
		padding-left: 22px !important;
	}

	/* Search wrapper */
	.pkp_navigation_search_wrapper {
		display: flex !important;
		align-items: center !important;
		margin: 0 4px !important;
		padding: 0 !important;
		border: none !important;
		float: none !important;
	}

	.pkp_navigation_search_wrapper a.pkp_search,
	.pkp_navigation_search_wrapper a.pkp_search_desktop {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		width: 36px !important;
		height: 36px !important;
		border-radius: 50% !important;
		color: var(--jlf-muted) !important;
		font-size: 15px !important;
		text-decoration: none !important;
		padding: 0 !important;
		margin: 0 !important;
		border: none !important;
		background: transparent !important;
		transition: all .18s ease !important;
	}

	.pkp_navigation_search_wrapper a.pkp_search:hover,
	.pkp_navigation_search_wrapper a.pkp_search:focus {
		color: var(--jlf-primary) !important;
		background: rgba(14, 56, 70, 0.07) !important;
	}

	.jlf_search_label {
		display: none !important;
	}

	/* User menu (Register / Login) */
	.pkp_navigation_user_wrapper {
		position: static !important;
		top: auto !important;
		left: auto !important;
		right: auto !important;
		transform: none !important;
		display: flex !important;
		align-items: center !important;
		padding: 0 !important;
		margin: 0 0 0 6px !important;
		border: none !important;
		flex: 0 0 auto !important;
		z-index: 100 !important;
		width: auto !important;
	}

	ul.pkp_navigation_user,
	ul.pkp_navigation_user.pkp_nav_list {
		display: inline-flex !important;
		flex-direction: row !important;
		align-items: center !important;
		list-style: none !important;
		margin: 0 !important;
		padding: 0 !important;
		gap: 0 !important;
		border: none !important;
		width: auto !important;
	}

	ul.pkp_navigation_user>li,
	ul.pkp_navigation_user.pkp_nav_list>li {
		display: inline-flex !important;
		align-items: center !important;
		margin: 0 !important;
		padding: 0 !important;
		position: relative !important;
		float: none !important;
	}

	ul.pkp_navigation_user>li>a,
	ul.pkp_navigation_user.pkp_nav_list>li>a {
		font-family: var(--jlf-sans) !important;
		font-size: 13.5px !important;
		font-weight: 500 !important;
		color: var(--jlf-muted) !important;
		text-decoration: none !important;
		padding: 6px 8px !important;
		background: transparent !important;
		border: none !important;
		line-height: 1.4 !important;
		white-space: nowrap !important;
		transition: color .18s ease !important;
	}

	ul.pkp_navigation_user>li>a:hover,
	ul.pkp_navigation_user>li>a:focus,
	ul.pkp_navigation_user.pkp_nav_list>li>a:hover,
	ul.pkp_navigation_user.pkp_nav_list>li>a:focus {
		color: var(--jlf-primary) !important;
		background: transparent !important;
	}

	ul.pkp_navigation_user>li:first-child:not(:last-child)::after {
		content: '/' !important;
		color: #CBD5E1 !important;
		font-size: 12px !important;
		pointer-events: none !important;
		display: inline-block !important;
	}
}

/* ═══════════════════════════════════════════════════════
   6. RESPONSIVE BREAKPOINT: COMPACT DESKTOP (993px - 1200px)
   ═══════════════════════════════════════════════════════ */
@media (min-width: 993px) and (max-width: 1200px) {
	.pkp_head_wrapper {
		padding: 10px 20px !important;
		padding-top: 10px !important;
	}

	ul.pkp_navigation_primary>li>a,
	ul.pkp_navigation_primary.pkp_nav_list>li>a {
		padding: 6px 8px !important;
		font-size: 13px !important;
	}

	.brand_title {
		font-size: 17px !important;
	}
}

/* ═══════════════════════════════════════════════════════
   7. RESPONSIVE BREAKPOINT: TABLET & MOBILE (≤ 992px)
   ═══════════════════════════════════════════════════════ */
@media (max-width: 992px) {

	.pkp_head_wrapper {
		padding: 0 16px !important;
		padding-top: 0 !important;
		height: 64px !important;
		min-height: 64px !important;
		gap: 12px !important;
		justify-content: space-between !important;
	}

	.jlf_brand_area {
		flex: 1 1 auto !important;
		min-width: 0 !important;
		overflow: hidden !important;
	}

	.jlf_nav_area {
		flex: 0 0 auto !important;
		justify-content: flex-end !important;
	}

	/* Show hamburger toggle */
	.pkp_site_nav_toggle {
		display: inline-flex !important;
		margin-left: 0 !important;
	}

	/* Drawer panel */
	.pkp_site_nav_menu {
		position: fixed !important;
		top: 64px !important;
		left: 0 !important;
		right: 0 !important;
		width: 100% !important;
		max-height: calc(100vh - 64px) !important;
		overflow-y: auto !important;
		background: var(--jlf-white) !important;
		border-top: 2px solid var(--jlf-accent) !important;
		box-shadow: 0 16px 40px rgba(14, 56, 70, 0.18) !important;
		z-index: 9998 !important;
		display: block !important;
		opacity: 0 !important;
		visibility: hidden !important;
		pointer-events: none !important;
		transform: translateY(-10px) !important;
		flex: none !important;
		transition: opacity .22s cubic-bezier(.4, 0, .2, 1), transform .22s ease, visibility .22s !important;
		-webkit-overflow-scrolling: touch !important;
	}

	.pkp_site_nav_menu.pkp_site_nav_menu--isOpen {
		opacity: 1 !important;
		visibility: visible !important;
		pointer-events: auto !important;
		transform: translateY(0) !important;
	}

	.jlf_nav_inner {
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		justify-content: flex-start !important;
		padding: 20px !important;
		gap: 0 !important;
		width: 100% !important;
	}

	.pkp_navigation_primary_row,
	.pkp_navigation_primary_wrapper {
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		width: 100% !important;
		flex: none !important;
	}

	ul.pkp_navigation_primary,
	ul.pkp_navigation_primary.pkp_nav_list {
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		width: 100% !important;
		gap: 4px !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	ul.pkp_navigation_primary>li,
	ul.pkp_navigation_primary.pkp_nav_list>li {
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	ul.pkp_navigation_primary>li>a,
	ul.pkp_navigation_primary.pkp_nav_list>li>a {
		width: 100% !important;
		padding: 12px 16px !important;
		border-bottom: none !important;
		border-radius: 8px !important;
		font-size: 15px !important;
		font-weight: 500 !important;
		color: var(--jlf-text) !important;
		justify-content: space-between !important;
		display: flex !important;
		align-items: center !important;
		background: transparent !important;
		min-height: 44px !important;
	}

	ul.pkp_navigation_primary>li>a:hover,
	ul.pkp_navigation_primary.pkp_nav_list>li>a:hover {
		background: rgba(14, 56, 70, 0.06) !important;
		color: var(--jlf-primary) !important;
	}

	.pkp_page_index ul.pkp_navigation_primary>li:first-child>a {
		border-left: 3px solid var(--jlf-accent) !important;
		border-bottom: none !important;
		background: rgba(234, 166, 36, 0.08) !important;
		color: var(--jlf-primary) !important;
		font-weight: 600 !important;
		padding-left: 14px !important;
	}

	/* Sub-menus open inside mobile drawer */
	ul.pkp_navigation_primary>li>ul {
		position: static !important;
		transform: none !important;
		opacity: 1 !important;
		visibility: visible !important;
		pointer-events: auto !important;
		box-shadow: none !important;
		border: none !important;
		border-left: 2px solid var(--jlf-border) !important;
		background: transparent !important;
		border-radius: 0 !important;
		margin: 4px 0 8px 20px !important;
		padding: 0 !important;
		min-width: 0 !important;
		width: auto !important;
	}

	ul.pkp_navigation_primary>li>ul li {
		display: block !important;
		width: 100% !important;
	}

	ul.pkp_navigation_primary>li>ul a {
		padding: 9px 14px !important;
		font-size: 14px !important;
		color: var(--jlf-muted) !important;
		border-radius: 6px !important;
		white-space: normal !important;
		display: block !important;
		min-height: 38px !important;
	}

	ul.pkp_navigation_primary>li>ul a:hover {
		background: rgba(14, 56, 70, 0.06) !important;
		padding-left: 18px !important;
		color: var(--jlf-primary) !important;
	}

	/* Mobile Search */
	.pkp_navigation_search_wrapper {
		margin-top: 14px !important;
		padding-top: 14px !important;
		border-top: 1px solid var(--jlf-border) !important;
		margin-left: 0 !important;
		width: 100% !important;
	}

	.pkp_navigation_search_wrapper a.pkp_search,
	.pkp_navigation_search_wrapper a.pkp_search_desktop {
		width: 100% !important;
		height: auto !important;
		border-radius: 8px !important;
		padding: 11px 16px !important;
		border: 1px solid var(--jlf-border) !important;
		font-size: 14px !important;
		justify-content: flex-start !important;
		gap: 10px !important;
		background: var(--jlf-bg) !important;
		color: var(--jlf-primary) !important;
		min-height: 44px !important;
	}

	.jlf_search_label {
		display: inline !important;
		font-family: var(--jlf-sans) !important;
		font-size: 14px !important;
		font-weight: 500 !important;
		color: var(--jlf-text) !important;
	}

	/* Mobile User Menu (Register / Login) */
	.pkp_navigation_user_wrapper {
		margin-top: 14px !important;
		padding-top: 14px !important;
		border-top: 1px solid var(--jlf-border) !important;
		width: 100% !important;
		justify-content: flex-start !important;
		display: flex !important;
	}

	ul.pkp_navigation_user,
	ul.pkp_navigation_user.pkp_nav_list {
		display: flex !important;
		flex-wrap: wrap !important;
		gap: 8px !important;
		width: 100% !important;
	}

	ul.pkp_navigation_user>li,
	ul.pkp_navigation_user.pkp_nav_list>li {
		flex: 1 1 auto !important;
	}

	ul.pkp_navigation_user>li>a,
	ul.pkp_navigation_user.pkp_nav_list>li>a {
		font-size: 14px !important;
		font-weight: 600 !important;
		padding: 10px 14px !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		background: var(--jlf-bg) !important;
		border: 1px solid var(--jlf-border) !important;
		border-radius: 8px !important;
		color: var(--jlf-primary) !important;
		min-height: 44px !important;
		text-align: center !important;
	}

	ul.pkp_navigation_user>li:first-child:not(:last-child)::after {
		display: none !important;
	}

	/* Body scroll lock + backdrop */
	body.jlf-nav-open {
		overflow: hidden !important;
	}

	body.jlf-nav-open::after {
		content: '' !important;
		position: fixed !important;
		inset: 64px 0 0 0 !important;
		background: rgba(0, 0, 0, 0.45) !important;
		z-index: 9997 !important;
		pointer-events: auto !important;
	}
}

/* ═══════════════════════════════════════════════════════
   8. RESPONSIVE BREAKPOINT: SMALL MOBILE (≤ 576px)
   ═══════════════════════════════════════════════════════ */
@media (max-width: 576px) {
	.pkp_head_wrapper {
		height: 56px !important;
		min-height: 56px !important;
		padding: 0 12px !important;
		padding-top: 0 !important;
	}

	.pkp_site_nav_menu {
		top: 56px !important;
		max-height: calc(100vh - 56px) !important;
	}

	body.jlf-nav-open::after {
		inset: 56px 0 0 0 !important;
	}

	.brand_icon svg {
		width: 36px !important;
		height: 36px !important;
	}

	.brand_prefix {
		font-size: 11.5px !important;
	}

	.brand_title {
		font-size: 16px !important;
	}

	.pkp_site_nav_toggle {
		width: 38px !important;
		height: 38px !important;
	}
}

/* ═══════════════════════════════════════════════════════
   9. RESPONSIVE BREAKPOINT: EXTRA SMALL (≤ 380px)
   ═══════════════════════════════════════════════════════ */
@media (max-width: 380px) {
	.pkp_head_wrapper {
		padding: 0 10px !important;
	}

	.brand_prefix {
		display: none !important;
	}

	.brand_title {
		font-size: 14.5px !important;
	}

	.brand_icon svg {
		width: 32px !important;
		height: 32px !important;
	}
}

/* ═══════════════════════════════════════════════════════
   10. RESPONSIVE BREAKPOINT: WIDE SCREENS (≥ 1400px)
   ═══════════════════════════════════════════════════════ */
@media (min-width: 1400px) {
	.pkp_head_wrapper {
		padding: 14px 48px !important;
		padding-top: 14px !important;
	}

	ul.pkp_navigation_primary>li>a,
	ul.pkp_navigation_primary.pkp_nav_list>li>a {
		padding: 8px 14px !important;
		font-size: 14.5px !important;
	}

	.brand_title {
		font-size: 20px !important;
	}
}

/* ═══════════════════════════════════════════════════════
   11. HERO SECTION STYLING (MATCHING REFERENCE IMAGE)
   ═══════════════════════════════════════════════════════ */
.jlf_hero_section {
	width: 100% !important;
	background-color: var(--jlf-bg) !important;
	padding: 52px 0 36px !important;
	position: relative !important;
	overflow: visible !important;
}

.jlf_hero_container {
	max-width: 1360px !important;
	width: 100% !important;
	margin: 0 auto !important;
	padding: 0 40px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 48px !important;
	box-sizing: border-box !important;
	min-height: 480px !important;
}

/* ── Left: Text Content ── */
.jlf_hero_content {
	flex: 0 0 auto !important;
	width: 48% !important;
	max-width: 580px !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	z-index: 2 !important;
}

/* Pill badge: RESEARCH • INNOVATION • BETTER LEARNING */
.jlf_hero_badge {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	padding: 5px 14px !important;
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	font-family: var(--jlf-sans) !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: 0.10em !important;
	color: var(--jlf-muted) !important;
	margin-bottom: 14px !important;
	text-transform: uppercase !important;
	padding-left: 0 !important;
}

.jlf_badge_dot {
	width: 6px !important;
	height: 6px !important;
	border-radius: 50% !important;
	background: var(--jlf-teal) !important;
	display: inline-block !important;
	flex-shrink: 0 !important;
}

.jlf_badge_sep {
	color: rgba(71, 85, 105, 0.5) !important;
	font-size: 10px !important;
}

/* Main Heading */
.jlf_hero_title {
	font-family: var(--jlf-serif) !important;
	font-size: 48px !important;
	font-weight: 800 !important;
	line-height: 1.15 !important;
	margin: 0 0 16px 0 !important;
	color: var(--jlf-primary) !important;
	letter-spacing: -0.02em !important;
	word-break: break-word !important;
}

/* Line 1: "Shaping the Future of Learning" + yellow rays SVG */
.jlf_title_line1 {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	color: var(--jlf-primary) !important;
	flex-wrap: wrap !important;
}

/* Yellow starburst/rays doodle next to title */
.jlf_doodle_rays {
	width: 32px !important;
	height: 32px !important;
	display: inline-block !important;
	flex-shrink: 0 !important;
	margin-left: 4px !important;
	transform: none !important;
	animation: jlfSpin 6s linear infinite !important;
}

@keyframes jlfSpin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

/* Line 2: "Through Research, Innovation, and Global Collaboration" — teal color */
.jlf_title_line2 {
	display: block !important;
	color: var(--jlf-teal) !important;
	font-size: 0.82em !important;
	margin-top: 6px !important;
	font-weight: 700 !important;
}

.jlf_hero_subtitle {
	font-family: var(--jlf-sans) !important;
	font-size: 16.5px !important;
	line-height: 1.65 !important;
	color: var(--jlf-muted) !important;
	margin: 0 0 30px 0 !important;
	max-width: 480px !important;
	font-weight: 400 !important;
}

.jlf_hero_actions {
	display: flex !important;
	align-items: center !important;
	flex-wrap: wrap !important;
	gap: 14px !important;
}

.jlf_btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	padding: 12px 24px !important;
	font-family: var(--jlf-sans) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	border-radius: 8px !important;
	text-decoration: none !important;
	cursor: pointer !important;
	transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
	line-height: 1.2 !important;
	white-space: nowrap !important;
}

.jlf_btn_primary {
	background: var(--jlf-accent) !important;
	color: var(--jlf-primary) !important;
	border: 2px solid var(--jlf-accent) !important;
	box-shadow: 0 4px 16px rgba(234, 166, 36, 0.40) !important;
}

.jlf_btn_primary:hover,
.jlf_btn_primary:focus {
	background: #D4901A !important;
	border-color: #D4901A !important;
	color: #fff !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 8px 22px rgba(234, 166, 36, 0.50) !important;
	text-decoration: none !important;
}

.jlf_btn_secondary {
	background: transparent !important;
	color: var(--jlf-primary) !important;
	border: 2px solid rgba(14, 56, 70, 0.25) !important;
	box-shadow: none !important;
}

.jlf_btn_secondary:hover,
.jlf_btn_secondary:focus {
	background: var(--jlf-primary) !important;
	border-color: var(--jlf-primary) !important;
	color: #FFFFFF !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 6px 18px rgba(14, 56, 70, 0.22) !important;
	text-decoration: none !important;
}

.jlf_btn_icon {
	width: 16px !important;
	height: 16px !important;
	transition: transform 0.2s ease !important;
}

.jlf_btn_primary:hover .jlf_btn_icon {
	transform: translateX(4px) !important;
}

/* ── Right: Visual Area ── */
.jlf_hero_visual {
	flex: 0 0 auto !important;
	width: 46% !important;
	max-width: 520px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	position: relative !important;
	align-self: stretch !important;
}

.jlf_visual_wrapper {
	position: relative !important;
	width: 100% !important;
	max-width: 460px !important;
	min-height: 420px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

/* ── Background Blobs ── */
/* Large teal rounded square — occupies top-left most of the visual */
.jlf_shape_teal {
	position: absolute !important;
	top: 0 !important;
	left: 6% !important;
	width: 78% !important;
	height: 78% !important;
	background: var(--jlf-teal) !important;
	border-radius: 28px !important;
	opacity: 1 !important;
	z-index: 1 !important;
	transform: none !important;
}

/* Medium yellow blob — bottom-right, overlapping teal */
.jlf_shape_yellow {
	position: absolute !important;
	bottom: 0 !important;
	right: 0 !important;
	width: 62% !important;
	height: 62% !important;
	background: var(--jlf-accent) !important;
	border-radius: 28px !important;
	opacity: 1 !important;
	z-index: 2 !important;
	transform: none !important;
}

/* ── Floating Doodle Icons ── */
.jlf_doodle_bulb {
	position: absolute !important;
	top: -16px !important;
	left: 18% !important;
	width: 44px !important;
	height: 44px !important;
	z-index: 5 !important;
	animation: jlfFloat 3.8s ease-in-out infinite !important;
}

.jlf_doodle_bulb svg {
	width: 44px !important;
	height: 44px !important;
}

.jlf_doodle_hat {
	position: absolute !important;
	top: -16px !important;
	right: 4% !important;
	width: 52px !important;
	height: 52px !important;
	z-index: 5 !important;
	animation: jlfFloat 4.4s ease-in-out infinite 0.6s !important;
}

.jlf_doodle_hat svg {
	width: 52px !important;
	height: 52px !important;
}

.jlf_doodle_book {
	position: absolute !important;
	bottom: 30px !important;
	left: -8px !important;
	width: 46px !important;
	height: 46px !important;
	z-index: 5 !important;
	animation: jlfFloat 4.2s ease-in-out infinite 1.2s !important;
}

.jlf_doodle_book svg {
	width: 46px !important;
	height: 46px !important;
}

/* Dot-grid pattern — right edge */
.jlf_doodle_dots {
	position: absolute !important;
	top: 20% !important;
	right: -18px !important;
	width: 54px !important;
	height: 86px !important;
	background-image: radial-gradient(circle, #0E3846 1.8px, transparent 1.8px) !important;
	background-size: 9px 9px !important;
	opacity: 0.28 !important;
	z-index: 3 !important;
}

@keyframes jlfFloat {

	0%,
	100% {
		transform: translateY(0px);
	}

	50% {
		transform: translateY(-8px);
	}
}

/* ── Student Photo ── */
.jlf_student_card {
	position: relative !important;
	z-index: 4 !important;
	width: 72% !important;
	max-width: 340px !important;
	border-radius: 20px !important;
	overflow: hidden !important;
	box-shadow: 0 20px 48px rgba(14, 56, 70, 0.20) !important;
	border: 5px solid #FFFFFF !important;
	background: var(--jlf-bg) !important;
	margin-left: 10% !important;
	margin-top: 16px !important;
}

.jlf_student_img {
	width: 100% !important;
	height: auto !important;
	display: block !important;
	object-fit: cover !important;
	aspect-ratio: 3/4 !important;
}

/* ═══════════════════════════════════════════════════════
   12. 6 KEY HIGHLIGHTS / VALUE PROPOSITIONS GRID
   ═══════════════════════════════════════════════════════ */
.jlf_features_section {
	width: 100% !important;
	background-color: var(--jlf-bg) !important;
	padding: 16px 0 50px !important;
}

.jlf_features_grid {
	max-width: 1360px !important;
	width: 100% !important;
	margin: 0 auto !important;
	padding: 0 40px !important;
	display: grid !important;
	grid-template-columns: repeat(6, 1fr) !important;
	gap: 14px !important;
	box-sizing: border-box !important;
}

.jlf_feature_card {
	background: #FFFFFF !important;
	border: 1px solid rgba(14, 56, 70, 0.07) !important;
	border-radius: 14px !important;
	padding: 20px 14px !important;
	text-align: center !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04) !important;
	transition: all 0.22s ease !important;
}

.jlf_feature_card:hover {
	transform: translateY(-4px) !important;
	box-shadow: 0 10px 24px rgba(14, 56, 70, 0.10) !important;
	border-color: rgba(0, 168, 150, 0.30) !important;
}

.jlf_feature_icon_box {
	width: 48px !important;
	height: 48px !important;
	border-radius: 12px !important;
	background: rgba(0, 168, 150, 0.09) !important;
	color: var(--jlf-teal) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin-bottom: 12px !important;
	transition: all 0.22s ease !important;
}

.jlf_feature_card:hover .jlf_feature_icon_box {
	background: var(--jlf-teal) !important;
	color: #FFFFFF !important;
	transform: scale(1.06) !important;
}

.jlf_feature_icon_box svg {
	width: 22px !important;
	height: 22px !important;
}

.jlf_feature_title {
	font-family: var(--jlf-sans) !important;
	font-size: 13.5px !important;
	font-weight: 700 !important;
	color: var(--jlf-primary) !important;
	margin: 0 0 5px 0 !important;
	line-height: 1.3 !important;
}

.jlf_feature_desc {
	font-family: var(--jlf-sans) !important;
	font-size: 11.5px !important;
	color: var(--jlf-muted) !important;
	margin: 0 !important;
	line-height: 1.45 !important;
}

/* ═══════════════════════════════════════════════════════
   13. HERO & HIGHLIGHTS RESPONSIVENESS
   ═══════════════════════════════════════════════════════ */

/* Large desktop (1200px+): Full side-by-side layout */
@media (min-width: 1200px) {
	.jlf_hero_container {
		min-height: 520px !important;
	}

	.jlf_hero_title {
		font-size: 50px !important;
	}

	.jlf_visual_wrapper {
		min-height: 480px !important;
	}
}

/* Compact desktop (993–1199px) */
@media (max-width: 1199px) {
	.jlf_hero_title {
		font-size: 42px !important;
	}

	.jlf_features_grid {
		grid-template-columns: repeat(3, 1fr) !important;
		gap: 14px !important;
	}

	.jlf_hero_container {
		gap: 36px !important;
	}
}

/* Tablet landscape (769–992px) */
@media (max-width: 992px) {
	.jlf_hero_section {
		padding: 36px 0 28px !important;
	}

	.jlf_hero_container {
		flex-direction: column !important;
		align-items: center !important;
		text-align: center !important;
		gap: 36px !important;
		padding: 0 24px !important;
		min-height: auto !important;
	}

	.jlf_hero_content {
		width: 100% !important;
		max-width: 600px !important;
		align-items: center !important;
	}

	.jlf_hero_title {
		font-size: 34px !important;
	}

	.jlf_hero_visual {
		width: 100% !important;
		max-width: 420px !important;
	}

	.jlf_visual_wrapper {
		min-height: 340px !important;
	}

	.jlf_title_line1 {
		justify-content: center !important;
	}

	.jlf_hero_subtitle {
		max-width: 100% !important;
		font-size: 15.5px !important;
	}

	.jlf_hero_actions {
		justify-content: center !important;
		width: 100% !important;
	}

	.jlf_hero_badge {
		justify-content: center !important;
	}

	.jlf_student_card {
		margin-left: auto !important;
		margin-right: auto !important;
	}

	.jlf_features_grid {
		grid-template-columns: repeat(3, 1fr) !important;
		padding: 0 24px !important;
	}
}

/* Tablet portrait (577–768px) */
@media (max-width: 768px) {
	.jlf_hero_section {
		padding: 28px 0 20px !important;
	}

	.jlf_hero_title {
		font-size: 28px !important;
	}

	.jlf_hero_subtitle {
		font-size: 15px !important;
	}

	.jlf_visual_wrapper {
		min-height: 290px !important;
	}

	.jlf_shape_teal {
		width: 76% !important;
		height: 72% !important;
	}

	.jlf_shape_yellow {
		width: 58% !important;
		height: 58% !important;
	}

	.jlf_student_card {
		width: 66% !important;
		max-width: 260px !important;
	}

	.jlf_features_grid {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 12px !important;
		padding: 0 16px !important;
	}

	.jlf_feature_card {
		padding: 16px 12px !important;
	}
}

/* Mobile (≤576px) */
@media (max-width: 576px) {
	.jlf_hero_section {
		padding: 24px 0 16px !important;
	}

	.jlf_hero_container {
		padding: 0 16px !important;
		gap: 24px !important;
	}

	.jlf_hero_title {
		font-size: 24px !important;
	}

	.jlf_hero_subtitle {
		font-size: 14.5px !important;
		margin-bottom: 22px !important;
	}

	.jlf_hero_actions {
		flex-direction: column !important;
		width: 100% !important;
		gap: 10px !important;
	}

	.jlf_btn {
		width: 100% !important;
		padding: 13px 20px !important;
	}

	.jlf_visual_wrapper {
		min-height: 240px !important;
	}

	.jlf_shape_teal {
		width: 78% !important;
		height: 70% !important;
	}

	.jlf_shape_yellow {
		width: 56% !important;
		height: 54% !important;
	}

	.jlf_student_card {
		width: 62% !important;
		max-width: 220px !important;
	}

	.jlf_features_section {
		padding: 12px 0 32px !important;
	}

	.jlf_features_grid {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 10px !important;
		padding: 0 16px !important;
	}
}

/* Extra small mobile (≤380px) */
@media (max-width: 380px) {
	.jlf_hero_title {
		font-size: 21px !important;
	}

	.jlf_features_grid {
		grid-template-columns: 1fr !important;
	}
}

/* ═══════════════════════════════════════════════════════
   14. HOMEPAGE FULL-WIDTH SCAFFOLD & POST-HERO SIDEBAR
   ═══════════════════════════════════════════════════════ */
.pkp_page_index .pkp_structure_content,
body.pkp_page_index .pkp_structure_content,
body.pkp_op_index .pkp_structure_content {
	max-width: 100% !important;
	width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
}

.pkp_page_index .pkp_structure_main,
body.pkp_page_index .pkp_structure_main,
body.pkp_op_index .pkp_structure_main {
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

.pkp_page_index .pkp_structure_main::before,
.pkp_page_index .pkp_structure_main::after,
body.pkp_page_index .pkp_structure_main::before,
body.pkp_page_index .pkp_structure_main::after {
	display: none !important;
	content: none !important;
}

/* ── Homepage only: hide the OJS-injected outer sidebar from footer.tpl flow ── */
body.pkp_page_index .pkp_structure_content>.pkp_structure_sidebar,
body.pkp_op_index .pkp_structure_content>.pkp_structure_sidebar {
	display: none !important;
	width: 0 !important;
	overflow: hidden !important;
	visibility: hidden !important;
}

/* ═══════════════════════════════════════════════════════
   14B. HOMEPAGE POST-HERO BODY & SIDEBAR RESPONSIVE GRID
   ═══════════════════════════════════════════════════════ */
.jlf_homepage_body {
	width: 100% !important;
	max-width: 100% !important;
	padding: 50px 24px 70px !important;
	box-sizing: border-box !important;
	background: #FAF8F5 !important;
}

.jlf_body_layout {
	max-width: 1360px !important;
	margin: 0 auto !important;
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) 340px !important;
	gap: 40px !important;
	align-items: start !important;
}

.jlf_primary_col {
	min-width: 0 !important;
	width: 100% !important;
}

/* Content cards in primary column */
.jlf_card_block {
	background: #FFFFFF !important;
	border-radius: 18px !important;
	border: 1px solid rgba(14, 56, 70, 0.08) !important;
	padding: 36px 32px !important;
	box-shadow: 0 4px 24px rgba(14, 56, 70, 0.04) !important;
	margin-bottom: 28px !important;
	box-sizing: border-box !important;
	transition: box-shadow 0.3s ease !important;
}

.jlf_card_block:hover {
	box-shadow: 0 8px 32px rgba(14, 56, 70, 0.07) !important;
}

.jlf_pill_tag {
	display: inline-block !important;
	font-size: 11px !important;
	font-weight: 800 !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
	color: #00A896 !important;
	background: rgba(0, 168, 150, 0.09) !important;
	padding: 4px 12px !important;
	border-radius: 20px !important;
	margin-bottom: 12px !important;
	font-family: var(--jlf-sans) !important;
}

.jlf_card_heading {
	font-family: var(--jlf-serif) !important;
	font-size: 26px !important;
	line-height: 1.35 !important;
	color: #0E3846 !important;
	font-weight: 700 !important;
	margin: 0 0 16px 0 !important;
}

.jlf_card_text,
.jlf_card_text p {
	font-size: 16px !important;
	line-height: 1.8 !important;
	color: #334155 !important;
	font-family: var(--jlf-sans) !important;
	margin: 0 0 12px 0 !important;
}

.jlf_card_text p:last-child {
	margin-bottom: 0 !important;
}

.current_issue_title {
	font-size: 18px !important;
	font-weight: 700 !important;
	color: #00A896 !important;
	margin-bottom: 18px !important;
	font-family: var(--jlf-sans) !important;
}

.jlf_card_footer {
	margin-top: 24px !important;
}

/* ═══════════════════════════════════════════════════════
   14C. SIDEBAR COLUMN STYLING (AFTER HERO)
   ═══════════════════════════════════════════════════════ */
.jlf_sidebar_col {
	display: flex !important;
	flex-direction: column !important;
	gap: 24px !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

.jlf_sidebar_col .pkp_block {
	background: #FFFFFF !important;
	border-radius: 18px !important;
	border: 1px solid rgba(14, 56, 70, 0.08) !important;
	padding: 28px 24px !important;
	box-shadow: 0 4px 20px rgba(14, 56, 70, 0.04) !important;
	margin: 0 !important;
	box-sizing: border-box !important;
	transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.jlf_sidebar_col .pkp_block:hover {
	box-shadow: 0 8px 28px rgba(14, 56, 70, 0.08) !important;
}

.jlf_sidebar_col .pkp_block .title,
.jlf_sidebar_col .pkp_block h2,
.jlf_sidebar_col .pkp_block h3 {
	font-family: var(--jlf-serif) !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	color: #0E3846 !important;
	margin: 0 0 16px 0 !important;
	padding-bottom: 10px !important;
	border-bottom: 2.5px solid #EAA624 !important;
	letter-spacing: -0.01em !important;
	display: block !important;
}

.jlf_sidebar_col .pkp_block .content ul {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 8px !important;
}

.jlf_sidebar_col .pkp_block .content li {
	margin: 0 !important;
	padding: 0 !important;
}

.jlf_sidebar_col .pkp_block .content li a {
	display: flex !important;
	align-items: center !important;
	padding: 11px 16px !important;
	border-radius: 10px !important;
	background: #FAF8F5 !important;
	color: #0E3846 !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	text-decoration: none !important;
	transition: all 0.2s ease !important;
	border-left: 3px solid transparent !important;
	box-sizing: border-box !important;
	font-family: var(--jlf-sans) !important;
}

.jlf_sidebar_col .pkp_block .content li a:hover,
.jlf_sidebar_col .pkp_block .content li a:focus {
	background: #E6F7F5 !important;
	color: #00A896 !important;
	border-left-color: #00A896 !important;
	transform: translateX(4px) !important;
}

/* Feed block specific */
.jlf_sidebar_col .block_web_feed .content ul {
	flex-direction: row !important;
	flex-wrap: wrap !important;
	gap: 10px !important;
}

.jlf_sidebar_col .block_web_feed .content li a {
	display: inline-flex !important;
	align-items: center !important;
	padding: 8px 14px !important;
	border: 1px solid #E2DED7 !important;
	border-radius: 8px !important;
}

.jlf_sidebar_col .block_web_feed .content li a:hover {
	border-color: #00A896 !important;
	transform: translateY(-2px) !important;
}

.jlf_sidebar_col .block_web_feed img {
	height: 18px !important;
	width: auto !important;
}

/* ═══════════════════════════════════════════════════════
   14D. RESPONSIVE BREAKPOINTS FOR BODY & SIDEBAR
   ═══════════════════════════════════════════════════════ */
@media (max-width: 1200px) {
	.jlf_body_layout {
		grid-template-columns: minmax(0, 1fr) 300px !important;
		gap: 32px !important;
	}
}

@media (max-width: 991px) {
	.jlf_homepage_body {
		padding: 36px 20px 50px !important;
	}

	.jlf_body_layout {
		grid-template-columns: 1fr !important;
		gap: 32px !important;
	}

	.jlf_sidebar_col {
		margin-top: 8px !important;
	}
}

@media (max-width: 640px) {
	.jlf_homepage_body {
		padding: 24px 14px 40px !important;
	}

	.jlf_card_block {
		padding: 24px 18px !important;
		border-radius: 14px !important;
	}

	.jlf_card_heading {
		font-size: 22px !important;
	}

	.jlf_sidebar_col .pkp_block {
		padding: 22px 16px !important;
		border-radius: 14px !important;
	}
}

/* ═══════════════════════════════════════════════════════
   15. GENERAL PAGE BODY, CONTENT & FOOTER RESPONSIVE
   ═══════════════════════════════════════════════════════ */
.pkp_structure_content {
	width: 100% !important;
	max-width: 1360px !important;
	margin: 0 auto !important;
	padding: 24px 20px !important;
	box-sizing: border-box !important;
}

@media (max-width: 768px) {
	.pkp_structure_content {
		padding: 16px 12px !important;
	}
}

.pkp_structure_footer_wrapper {
	width: 100% !important;
	max-width: 100% !important;
	background: #0E3846 !important;
	color: #FAF8F5 !important;
	margin-top: 40px !important;
}

.pkp_structure_footer {
	max-width: 1360px !important;
	width: 100% !important;
	margin: 0 auto !important;
	padding: 24px 20px !important;
	box-sizing: border-box !important;
}

.pkp_brand_footer a img {
	max-width: 160px !important;
	height: auto !important;
	filter: brightness(0) invert(1) !important;
}

/* Responsive tables & media embeds */
table {
	max-width: 100% !important;
	overflow-x: auto !important;
	display: block !important;
}

img,
video,
iframe {
	max-width: 100% !important;
	height: auto !important;
}

/* Accessibility */
.pkp_screen_reader {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* ═══════════════════════════════════════════════════════
   16. MOBILE NAVIGATION TOGGLE — JAVASCRIPT BEHAVIOUR
   ═══════════════════════════════════════════════════════
   OJS uses .pkp_site_nav_menu--isOpen class to show menu.
   We wire the hamburger toggle here.
   ═══════════════════════════════════════════════════════ */
.pkp_site_nav_toggle[aria-expanded="true"] {
	background: var(--jlf-primary) !important;
	border-color: var(--jlf-primary) !important;
	color: #FFFFFF !important;
}

.pkp_site_nav_toggle[aria-expanded="true"] .fa-bars::before {
	content: "\f00d" !important;
	/* FontAwesome × close icon */
}

/* ═══════════════════════════════════════════════════════
   17. OJS DASHBOARD UPLOADED CONTENT STYLING
       (Additional homepage content, journal description,
       announcements, current issue section)
   ═══════════════════════════════════════════════════════ */

/* ── Additional Content Block (from Dashboard HTML editor) ── */
.page_index_journal .additional_content,
.jlf_card_text,
.jlf_card_text p {
	font-family: var(--jlf-sans) !important;
	font-size: 15.5px !important;
	line-height: 1.85 !important;
	color: #334155 !important;
}

.jlf_card_text p {
	margin-bottom: 14px !important;
}

.jlf_card_text p:last-child {
	margin-bottom: 0 !important;
}

.jlf_card_text a {
	color: var(--jlf-teal) !important;
	text-decoration: underline !important;
	text-underline-offset: 2px !important;
}

.jlf_card_text a:hover {
	color: var(--jlf-primary) !important;
}

.jlf_card_text ul,
.jlf_card_text ol {
	padding-left: 24px !important;
	margin-bottom: 14px !important;
}

.jlf_card_text li {
	margin-bottom: 6px !important;
	line-height: 1.7 !important;
}

.jlf_card_text h2,
.jlf_card_text h3,
.jlf_card_text h4 {
	font-family: var(--jlf-serif) !important;
	color: var(--jlf-primary) !important;
	font-weight: 700 !important;
	margin-top: 22px !important;
	margin-bottom: 10px !important;
}

/* ── Announcements Block ── */
.cmp_announcements .obj_announcement_summary {
	background: #FFFFFF !important;
	border: 1px solid rgba(14, 56, 70, 0.08) !important;
	border-radius: 14px !important;
	padding: 24px 24px 20px !important;
	margin-bottom: 18px !important;
	box-shadow: 0 2px 12px rgba(14, 56, 70, 0.04) !important;
	transition: box-shadow 0.2s ease !important;
}

.cmp_announcements .obj_announcement_summary:hover {
	box-shadow: 0 6px 24px rgba(14, 56, 70, 0.07) !important;
}

.cmp_announcements h3,
.cmp_announcements .title {
	font-family: var(--jlf-serif) !important;
	font-size: 17px !important;
	font-weight: 700 !important;
	color: var(--jlf-primary) !important;
	margin-bottom: 8px !important;
}

.cmp_announcements h3 a,
.cmp_announcements .title a {
	text-decoration: none !important;
	color: inherit !important;
	transition: color 0.18s !important;
}

.cmp_announcements h3 a:hover,
.cmp_announcements .title a:hover {
	color: var(--jlf-teal) !important;
}

.cmp_announcements .date,
.cmp_announcements .pkp_helpers_text_muted {
	font-size: 12.5px !important;
	color: #94A3B8 !important;
	font-weight: 500 !important;
	letter-spacing: 0.03em !important;
	margin-bottom: 10px !important;
	display: block !important;
}

.cmp_announcements .description p {
	font-size: 14.5px !important;
	line-height: 1.75 !important;
	color: #475569 !important;
	margin: 0 !important;
}

.cmp_announcements .read_more,
.cmp_announcements a.read_more {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	color: var(--jlf-teal) !important;
	text-decoration: none !important;
	margin-top: 14px !important;
	letter-spacing: 0.02em !important;
}

.cmp_announcements a.read_more:hover {
	color: var(--jlf-primary) !important;
}

/* ── Current Issue / Article TOC ── */
.obj_issue_toc {
	margin: 0 !important;
	padding: 0 !important;
}

.obj_issue_toc .section {
	margin-bottom: 24px !important;
}

.obj_issue_toc .section>h2,
.obj_issue_toc .section h3 {
	font-family: var(--jlf-serif) !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	color: var(--jlf-primary) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.08em !important;
	border-bottom: 2px solid var(--jlf-accent) !important;
	padding-bottom: 8px !important;
	margin-bottom: 12px !important;
}

.obj_issue_toc .articles li {
	border-bottom: 1px solid rgba(14, 56, 70, 0.06) !important;
	padding: 14px 0 !important;
	list-style: none !important;
}

.obj_issue_toc .articles li:last-child {
	border-bottom: none !important;
}

.obj_article_summary .title a {
	font-family: var(--jlf-sans) !important;
	font-size: 14.5px !important;
	font-weight: 600 !important;
	color: var(--jlf-primary) !important;
	text-decoration: none !important;
	line-height: 1.5 !important;
	transition: color 0.18s !important;
}

.obj_article_summary .title a:hover {
	color: var(--jlf-teal) !important;
}

.obj_article_summary .authors {
	font-size: 13px !important;
	color: #64748B !important;
	margin-top: 5px !important;
}

.obj_article_summary .galleys_links {
	margin-top: 8px !important;
}

.obj_galley_link,
.obj_article_summary .galleys_links a {
	display: inline-flex !important;
	align-items: center !important;
	padding: 3px 10px !important;
	border-radius: 6px !important;
	border: 1px solid var(--jlf-teal) !important;
	color: var(--jlf-teal) !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	text-decoration: none !important;
	margin-right: 6px !important;
	transition: all 0.18s !important;
}

.obj_galley_link:hover,
.obj_article_summary .galleys_links a:hover {
	background: var(--jlf-teal) !important;
	color: #FFFFFF !important;
}

/* ── Read More / View All Issues Button ── */
.current_issue .read_more,
.jlf_card_footer .read_more {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	padding: 12px 24px !important;
	background: transparent !important;
	border: 2px solid var(--jlf-primary) !important;
	border-radius: 10px !important;
	color: var(--jlf-primary) !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	text-decoration: none !important;
	transition: all 0.2s ease !important;
}

.current_issue .read_more:hover,
.jlf_card_footer .read_more:hover {
	background: var(--jlf-primary) !important;
	color: #FFFFFF !important;
}

/* ── Homepage About / Journal Description ── */
.homepage_about .page h1,
.homepage_about h2.pkp_helpers_text_center {
	font-family: var(--jlf-serif) !important;
	font-size: 26px !important;
	color: var(--jlf-primary) !important;
	font-weight: 700 !important;
	margin-bottom: 16px !important;
}

.homepage_about .description p,
.homepage_about p {
	font-size: 15.5px !important;
	line-height: 1.8 !important;
	color: #334155 !important;
	margin-bottom: 12px !important;
}

/* ═══════════════════════════════════════════════════════
   18. IMPROVED NAVIGATION TOGGLE (overrides OJS JS)
   ═══════════════════════════════════════════════════════ */
/* The toggle button shows the bar icon on default, × when open */
.pkp_site_nav_toggle>span.fa {
	pointer-events: none !important;
	font-size: 17px !important;
	line-height: 1 !important;
}

/* ═══════════════════════════════════════════════════════
   19. OJS HOMEPAGE IMAGE COVER  
   ═══════════════════════════════════════════════════════ */
.homepage_image img,
.jlf_card_block .homepage_image img {
	width: 100% !important;
	height: auto !important;
	border-radius: 12px !important;
	display: block !important;
	box-shadow: 0 4px 24px rgba(14, 56, 70, 0.08) !important;
}

/* ═══════════════════════════════════════════════════════
   20. RESPONSIVE CLEANUP (320px → 4K universal)
   ═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
	.jlf_homepage_body {
		padding: 28px 14px 44px !important;
	}

	.jlf_body_layout {
		grid-template-columns: 1fr !important;
		gap: 24px !important;
	}

	.jlf_card_block {
		padding: 20px 16px !important;
		border-radius: 12px !important;
		margin-bottom: 18px !important;
	}

	.jlf_card_heading {
		font-size: 20px !important;
	}

	.jlf_pill_tag {
		font-size: 10.5px !important;
	}

	.cmp_announcements .obj_announcement_summary {
		padding: 18px 16px !important;
	}

	.obj_issue_toc .articles li {
		padding: 10px 0 !important;
	}

	.jlf_sidebar_col {
		margin-top: 6px !important;
	}

	.jlf_sidebar_col .pkp_block {
		padding: 20px 16px !important;
	}
}

@media (max-width: 480px) {
	.jlf_homepage_body {
		padding: 20px 12px 36px !important;
	}

	.jlf_card_block {
		padding: 16px 14px !important;
		border-radius: 10px !important;
	}

	.jlf_card_heading {
		font-size: 18px !important;
	}

	.current_issue .read_more,
	.jlf_card_footer .read_more {
		width: 100% !important;
		justify-content: center !important;
	}

	.jlf_btn {
		width: 100% !important;
		justify-content: center !important;
	}
}

/* 4K / Extra-wide */
@media (min-width: 1920px) {
	.jlf_homepage_body {
		padding: 70px 40px 90px !important;
	}

	.jlf_body_layout {
		max-width: 1600px !important;
		grid-template-columns: minmax(0, 1fr) 380px !important;
	}

	.jlf_hero_container {
		max-width: 1600px !important;
	}

	.pkp_head_wrapper {
		max-width: 1600px !important;
	}
}

/* ═══════════════════════════════════════════════════════
   21. INNER-PAGE SIDEBAR LAYOUT (About, Archives, etc.)
   ═══════════════════════════════════════════════════════ */

/* Content wrapper: flex row on desktop, stack on mobile */
.pkp_structure_content.has_sidebar {
	display: flex !important;
	flex-direction: row !important;
	align-items: flex-start !important;
	max-width: 1360px !important;
	width: 100% !important;
	margin: 0 auto !important;
	padding: 40px 24px 60px !important;
	gap: 40px !important;
	box-sizing: border-box !important;
}

/* Main content column */
.pkp_structure_content.has_sidebar .pkp_structure_main {
	flex: 1 1 0 !important;
	min-width: 0 !important;
	width: auto !important;
	max-width: none !important;
	padding: 0 !important;
	margin: 0 !important;
	float: none !important;
}

.pkp_structure_content.has_sidebar .pkp_structure_main::before,
.pkp_structure_content.has_sidebar .pkp_structure_main::after {
	display: none !important;
	content: none !important;
}

/* Sidebar column on inner pages */
.pkp_structure_content.has_sidebar .pkp_structure_sidebar {
	flex: 0 0 300px !important;
	width: 300px !important;
	max-width: 300px !important;
	min-width: 240px !important;
	display: block !important;
	visibility: visible !important;
	overflow: visible !important;
	float: none !important;
	padding: 0 !important;
	margin: 0 !important;
	position: relative !important;
	order: 2 !important;
	box-sizing: border-box !important;
}

/* Individual sidebar blocks */
.pkp_structure_content.has_sidebar .pkp_structure_sidebar .pkp_block {
	background: #FFFFFF !important;
	border-radius: 16px !important;
	border: 1px solid rgba(14, 56, 70, 0.09) !important;
	padding: 24px 20px !important;
	box-shadow: 0 3px 18px rgba(14, 56, 70, 0.05) !important;
	margin-bottom: 20px !important;
	box-sizing: border-box !important;
	transition: box-shadow 0.2s ease !important;
}

.pkp_structure_content.has_sidebar .pkp_structure_sidebar .pkp_block:last-child {
	margin-bottom: 0 !important;
}

.pkp_structure_content.has_sidebar .pkp_structure_sidebar .pkp_block:hover {
	box-shadow: 0 6px 28px rgba(14, 56, 70, 0.08) !important;
}

/* Sidebar block headings */
.pkp_structure_content.has_sidebar .pkp_structure_sidebar .pkp_block .title,
.pkp_structure_content.has_sidebar .pkp_structure_sidebar h2.title {
	font-family: var(--jlf-serif) !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	color: #0E3846 !important;
	margin: 0 0 14px 0 !important;
	padding-bottom: 10px !important;
	border-bottom: 2.5px solid #EAA624 !important;
	display: block !important;
	letter-spacing: -0.01em !important;
}

/* Sidebar block lists */
.pkp_structure_content.has_sidebar .pkp_structure_sidebar .pkp_block .content ul {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

.pkp_structure_content.has_sidebar .pkp_structure_sidebar .pkp_block .content li {
	margin: 0 !important;
	padding: 0 !important;
}

.pkp_structure_content.has_sidebar .pkp_structure_sidebar .pkp_block .content li a {
	display: flex !important;
	align-items: center !important;
	padding: 10px 14px !important;
	border-radius: 8px !important;
	background: #F7F5F2 !important;
	color: #0E3846 !important;
	font-size: 13.5px !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	margin-bottom: 6px !important;
	border-left: 3px solid transparent !important;
	transition: all 0.18s ease !important;
	font-family: var(--jlf-sans) !important;
	box-sizing: border-box !important;
}

.pkp_structure_content.has_sidebar .pkp_structure_sidebar .pkp_block .content li a:hover,
.pkp_structure_content.has_sidebar .pkp_structure_sidebar .pkp_block .content li a:focus {
	background: #E2F6F4 !important;
	color: #00A896 !important;
	border-left-color: #00A896 !important;
	transform: translateX(3px) !important;
}

/* Web feed block — horizontal pills */
.pkp_structure_content.has_sidebar .pkp_structure_sidebar .block_web_feed .content ul {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	gap: 8px !important;
}

.pkp_structure_content.has_sidebar .pkp_structure_sidebar .block_web_feed .content li a {
	display: inline-flex !important;
	align-items: center !important;
	padding: 8px 12px !important;
	border: 1px solid #E2DED7 !important;
	border-radius: 8px !important;
	background: #FFFFFF !important;
	border-left: 1px solid #E2DED7 !important;
	margin-bottom: 0 !important;
}

.pkp_structure_content.has_sidebar .pkp_structure_sidebar .block_web_feed .content li a:hover {
	border-color: #00A896 !important;
	transform: translateY(-2px) !important;
}

.pkp_structure_content.has_sidebar .pkp_structure_sidebar .block_web_feed img {
	height: 20px !important;
	width: auto !important;
}

/* ── Inner page main content styling ── */
.pkp_structure_content.has_sidebar .pkp_structure_main .page {
	box-sizing: border-box !important;
}

.pkp_structure_content.has_sidebar .pkp_structure_main h1 {
	font-family: var(--jlf-serif) !important;
	font-size: 30px !important;
	font-weight: 700 !important;
	color: #0E3846 !important;
	margin-top: 0 !important;
	margin-bottom: 20px !important;
	line-height: 1.3 !important;
}

.pkp_structure_content.has_sidebar .pkp_structure_main p {
	font-size: 15.5px !important;
	line-height: 1.8 !important;
	color: #334155 !important;
	margin-bottom: 14px !important;
}

.pkp_structure_content.has_sidebar .pkp_structure_main a {
	color: #00A896 !important;
	text-decoration: underline !important;
	text-underline-offset: 2px !important;
}

.pkp_structure_content.has_sidebar .pkp_structure_main a:hover {
	color: #0E3846 !important;
}

/* Breadcrumbs */
.cmp_breadcrumbs {
	font-size: 13px !important;
	color: #64748B !important;
	margin-bottom: 20px !important;
	display: block !important;
}

.cmp_breadcrumbs ol {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 4px !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	font-size: 13px !important;
}

.cmp_breadcrumbs li {
	display: inline-flex !important;
	align-items: center !important;
}

.cmp_breadcrumbs a {
	color: #00A896 !important;
	text-decoration: none !important;
}

.cmp_breadcrumbs a:hover {
	text-decoration: underline !important;
}

.cmp_breadcrumbs .separator {
	margin: 0 4px !important;
	color: #94A3B8 !important;
}

.cmp_breadcrumbs .current {
	color: #64748B !important;
}

/* ── Responsive: inner-page sidebar ── */
@media (max-width: 991px) {
	.pkp_structure_content.has_sidebar {
		flex-direction: column !important;
		padding: 28px 16px 40px !important;
		gap: 32px !important;
	}

	.pkp_structure_content.has_sidebar .pkp_structure_sidebar {
		flex: none !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		order: 2 !important;
	}

	.pkp_structure_content.has_sidebar .pkp_structure_main {
		order: 1 !important;
	}
}

@media (max-width: 640px) {
	.pkp_structure_content.has_sidebar {
		padding: 20px 12px 32px !important;
		gap: 24px !important;
	}

	.pkp_structure_content.has_sidebar .pkp_structure_sidebar .pkp_block {
		padding: 18px 14px !important;
		border-radius: 12px !important;
	}
}

/* ── Non-sidebar pages: clean single column ── */
.pkp_structure_content:not(.has_sidebar) {
	max-width: 1360px !important;
	width: 100% !important;
	margin: 0 auto !important;
	padding: 36px 24px 60px !important;
	box-sizing: border-box !important;
}

.pkp_structure_content:not(.has_sidebar) .pkp_structure_main {
	width: 100% !important;
	max-width: none !important;
	float: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* ═══════════════════════════════════════════════════════
   22. MOBILE TOGGLE SHOW FIX (max specificity override)
   ═══════════════════════════════════════════════════════ */
@media screen and (max-width: 992px) {

	button.pkp_site_nav_toggle,
	.pkp_site_nav_toggle {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		visibility: visible !important;
		opacity: 1 !important;
	}
}

@media screen and (min-width: 993px) {

	button.pkp_site_nav_toggle,
	.pkp_site_nav_toggle {
		display: none !important;
	}
}