/* ==========================================================================
   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;
}
@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;
	}
}