/* ==========================================================================
   JOMSIGN — Journal style sheet (upload via Settings > Website > Appearance >
   Advanced > Journal style sheet). Works on top of the JOMSIGN Theme.

   1. "About the Journal" block on the homepage (journal summary)
   2. Small header fix (removes the thin band between header and banner)
   3. Artistic main menu: gold rule, kawung diamonds, outlined search pill
   4. Indexer logos in a row (paste indexer-html.txt into Additional Content)
   5. Quick Menu / Submission blocks (.quickmenu-header + .quickmenu-list)
   6. Other sidebar blocks with .edutech-panel-title (e.g. Visitor)

   Selectors start with "body" so they win over the theme stylesheet,
   which OJS loads after this file.
   ========================================================================== */

/* ---------- 2. Header: remove the 16px band above the banner ---------- */
body .pkp_structure_head .pkp_navigation_primary_row { margin-bottom: 0; }
body .pkp_structure_head .pkp_head_wrapper { padding-bottom: 16px; }

/* ---------- 1. About the Journal ---------- */
body .page_index_journal > .homepage_about {
	background: #fff;
	border: 1px solid #E2E6EC;
	border-radius: 14px;
	padding: 28px;
	margin-bottom: 28px;
	color: #1A2230;
}
@media (min-width: 768px) {
	body .page_index_journal > .homepage_about { padding: 36px 40px; }
}

/* Eyebrow + heading */
body .page_index_journal > .homepage_about > h2 {
	font-family: "Plus Jakarta Sans", system-ui, sans-serif;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #D4922A;
	margin: 0 0 14px;
}

/* Running text */
body .page_index_journal > .homepage_about > p {
	font-size: 1rem;
	line-height: 1.75;
	max-width: 78ch;
	margin: 0 0 14px;
}

/* First paragraph (ISSN link) becomes a pill */
body .page_index_journal > .homepage_about > p:first-of-type { margin-bottom: 16px; }
body .page_index_journal > .homepage_about > p:first-of-type a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #EAF0F6;
	color: #16324F;
	border-radius: 999px;
	padding: 5px 14px;
	font-size: .82rem;
	font-weight: 700;
	text-decoration: none;
}
body .page_index_journal > .homepage_about > p:first-of-type a::before {
	content: "\f02b"; /* FontAwesome tag */
	font-family: FontAwesome;
	font-weight: normal;
	color: #D4922A;
}

/* Second paragraph (main description) slightly larger */
body .page_index_journal > .homepage_about > p:nth-of-type(2) {
	font-size: 1.06rem;
	color: #1A2230;
}

/* Address paragraph */
body .page_index_journal > .homepage_about > p:nth-of-type(3) {
	font-size: .9rem;
	color: #5B6676;
	padding-left: 26px;
	position: relative;
}
body .page_index_journal > .homepage_about > p:nth-of-type(3)::before {
	content: "\f041"; /* map marker */
	font-family: FontAwesome;
	position: absolute;
	left: 4px;
	top: 0;
	color: #D4922A;
}

/* Empty spacer paragraphs ( ) take almost no room */
body .page_index_journal > .homepage_about > p:has(> br:only-child),
body .page_index_journal > .homepage_about > p:not(:has(*)):not(:first-of-type):not(:nth-of-type(2)):not(:nth-of-type(3)) {
	margin: 0;
	line-height: .6;
	font-size: .6rem;
}

/* Registration help line becomes a notice */
body .page_index_journal > .homepage_about > p:has(.ryNqvb) {
	background: #FDF6EA;
	border-left: 4px solid #D4922A;
	border-radius: 8px;
	padding: 12px 16px 12px 44px;
	font-size: .9rem;
	line-height: 1.6;
	position: relative;
	max-width: none;
}
body .page_index_journal > .homepage_about > p:has(.ryNqvb)::before {
	content: "\f05a"; /* info circle */
	font-family: FontAwesome;
	position: absolute;
	left: 16px;
	top: 12px;
	color: #D4922A;
	font-size: 1.05rem;
}
body .page_index_journal > .homepage_about > p:has(.ryNqvb) a { color: #16324F; }

/* ---- Journal information panel (.edutech-about) ---- */
body .homepage_about .edutech-about {
	display: grid;
	gap: 28px;
	margin: 24px 0 8px;
	padding-top: 28px;
	border-top: 1px solid #E2E6EC;
	align-items: start;
}
@media (min-width: 760px) {
	body .homepage_about .edutech-about { grid-template-columns: 220px minmax(0, 1fr); gap: 36px; }
}

body .homepage_about .edutech-left { text-align: center; }
body .homepage_about .edutech-left img {
	width: 220px;
	max-width: 100%;
	height: auto;
	border-radius: 8px;
	box-shadow: 0 1px 2px rgba(22, 50, 79, .06), 0 18px 34px -16px rgba(22, 50, 79, .45);
	transform: rotate(-1.5deg);
	transition: transform .3s;
}
body .homepage_about .edutech-left img:hover { transform: rotate(0) translateY(-3px); }

body .homepage_about .edutech-right { min-width: 0; }

/* hide the FIELD / DETAILS header row */
body .homepage_about .edutech-header { display: none; }

body .homepage_about .edutech-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2px;
	padding: 12px 0;
	border-bottom: 1px solid #EEF1F5;
}
@media (min-width: 560px) {
	body .homepage_about .edutech-row { grid-template-columns: 150px minmax(0, 1fr); gap: 16px; align-items: baseline; }
}
body .homepage_about .edutech-row:last-child { border-bottom: 0; }

body .homepage_about .edutech-row > div:first-child {
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #5B6676;
}
body .homepage_about .edutech-row > div:last-child {
	font-weight: 600;
	color: #16324F;
	font-size: .96rem;
	min-width: 0;
	overflow-wrap: anywhere;
}
body .homepage_about .edutech-row > div:last-child p {
	margin: 0;
	font-weight: 400;
	color: #1A2230;
	line-height: 1.7;
	font-size: .93rem;
}
body .homepage_about .edutech-row a { color: #16324F; text-decoration-color: rgba(212, 146, 42, .6); text-underline-offset: 3px; }

body .homepage_about .edutech-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #16324F;
	color: #fff !important;
	border-radius: 999px;
	padding: 7px 16px;
	font-size: .84rem;
	font-weight: 700;
	text-decoration: none;
	transition: background .2s, color .2s;
}
body .homepage_about .edutech-btn::before {
	content: "\f19d"; /* graduation cap */
	font-family: FontAwesome;
	font-weight: normal;
}
body .homepage_about .edutech-btn:hover { background: #D4922A; color: #16324F !important; }

/* ---------- 3. Artistic main menu (desktop) ---------- */
@media (min-width: 992px) {
	/* the bar: no box, just a fine gold-tinted rule above and below */
	body .pkp_structure_head .pkp_navigation_primary_row {
		background: transparent !important;
		border-radius: 0;
		padding: 0;
		margin-bottom: 0;
		border-top: 1px solid rgba(255, 255, 255, .10);
		border-bottom: 1px solid rgba(212, 146, 42, .45);
		box-shadow: none;
		position: relative;
	}
	/* small kawung diamond where the rule starts */
	body .pkp_structure_head .pkp_navigation_primary_row::before {
		content: "";
		position: absolute;
		left: 0;
		bottom: -4px;
		width: 7px;
		height: 7px;
		background: #D4922A;
		transform: rotate(45deg);
	}
	body .pkp_structure_head .pkp_site_nav_menu { background: transparent !important; }
	body .pkp_structure_head .pkp_navigation_primary_wrapper {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		background: transparent !important;
	}
	/* clearfix pseudo-elements would otherwise act as flex items */
	body .pkp_structure_head .pkp_navigation_primary_wrapper::before,
	body .pkp_structure_head .pkp_navigation_primary_wrapper::after { display: none; }
	/* first label lines up with the journal title */
	body .pkp_structure_head .pkp_navigation_primary { margin-left: -22px; }

	/* items */
	body .pkp_structure_head .pkp_navigation_primary > li { position: relative; }
	body .pkp_structure_head .pkp_navigation_primary > li + li::before {
		content: "";
		position: absolute;
		left: 0;
		top: 50%;
		width: 3px;
		height: 3px;
		margin-top: -1.5px;
		border-radius: 50%;
		background: rgba(255, 255, 255, .28);
	}
	body .pkp_structure_head .pkp_navigation_primary > li > a {
		position: relative;
		display: block;
		border: 0 !important;
		border-radius: 0;
		margin: 0;
		padding: 16px 22px 15px;
		color: rgba(255, 255, 255, .84);
		font-weight: 600;
		font-size: .9rem;
		letter-spacing: .04em;
		/* gold underline that grows from the centre (a background, so the
		   dropdown caret in ::after stays intact) */
		background: linear-gradient(#D4922A, #D4922A) no-repeat 50% 100% / 0 2px !important;
		transition: color .25s, background-size .3s cubic-bezier(.2, .7, .2, 1);
	}
	/* tiny diamond that drops in above the label */
	body .pkp_structure_head .pkp_navigation_primary > li > a::before {
		content: "";
		position: absolute;
		left: 50%;
		top: 5px;
		width: 5px;
		height: 5px;
		margin-left: -2.5px;
		background: #D4922A;
		transform: translateY(-4px) rotate(45deg);
		opacity: 0;
		transition: opacity .25s, transform .3s;
	}
	body .pkp_structure_head .pkp_navigation_primary > li > a:hover,
	body .pkp_structure_head .pkp_navigation_primary > li > a:focus,
	body .pkp_structure_head .pkp_navigation_primary > li.show > a,
	body .pkp_structure_head .pkp_navigation_primary > li > a[aria-expanded="true"] {
		color: #fff;
		background-size: 56% 2px !important;
	}
	body .pkp_structure_head .pkp_navigation_primary > li > a:hover::before,
	body .pkp_structure_head .pkp_navigation_primary > li > a:focus::before,
	body .pkp_structure_head .pkp_navigation_primary > li > a[aria-expanded="true"]::before {
		opacity: 1;
		transform: translateY(0) rotate(45deg);
	}

	/* dropdown caret in gold */
	body .pkp_structure_head .pkp_navigation_primary > li > a::after { border-top-color: #D4922A; margin-left: 6px; }

	/* dropdown panel */
	body .pkp_structure_head .pkp_navigation_primary ul {
		border: 0;
		border-top: 2px solid #D4922A;
		border-radius: 0 0 12px 12px;
		box-shadow: 0 18px 40px -16px rgba(10, 22, 36, .45);
		padding: 8px;
		margin-top: 0;
		min-width: 220px;
	}
	body .pkp_structure_head .pkp_navigation_primary ul a {
		border: 0 !important;
		border-radius: 8px;
		padding: 9px 14px;
		font-size: .9rem;
		color: #1A2230;
		position: relative;
		transition: background .2s, padding .2s, color .2s;
	}
	body .pkp_structure_head .pkp_navigation_primary ul a:hover,
	body .pkp_structure_head .pkp_navigation_primary ul a:focus {
		background: #F4F6F9;
		color: #16324F;
		padding-left: 22px;
	}
	body .pkp_structure_head .pkp_navigation_primary ul a::before {
		content: "";
		position: absolute;
		left: 10px;
		top: 50%;
		width: 5px;
		height: 5px;
		margin-top: -2.5px;
		background: #D4922A;
		transform: rotate(45deg) scale(0);
		transition: transform .2s;
	}
	body .pkp_structure_head .pkp_navigation_primary ul a:hover::before,
	body .pkp_structure_head .pkp_navigation_primary ul a:focus::before { transform: rotate(45deg) scale(1); }

	/* search as an outlined pill */
	body .pkp_structure_head .pkp_navigation_search_wrapper { padding: 6px 0; margin-left: auto; }
	body .pkp_structure_head .pkp_navigation_search_wrapper a {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		border: 1px solid rgba(255, 255, 255, .32) !important;
		border-radius: 999px;
		padding: 7px 18px;
		color: #fff;
		font-size: .85rem;
		font-weight: 600;
		letter-spacing: .03em;
		transition: background .25s, color .25s, border-color .25s;
	}
	body .pkp_structure_head .pkp_navigation_search_wrapper a:hover,
	body .pkp_structure_head .pkp_navigation_search_wrapper a:focus {
		background: #D4922A;
		border-color: #D4922A !important;
		color: #16324F;
	}
	body .pkp_structure_head .pkp_navigation_search_wrapper a::before { color: inherit; }
}

@media (prefers-reduced-motion: reduce) {
	body .pkp_structure_head .pkp_navigation_primary > li > a,
	body .pkp_structure_head .pkp_navigation_primary > li > a::before { transition: none; }
}

/* ---------- 4. Indexer logos in a row (Additional Content on homepage) ---------- */
body .page_index_journal > .additional_content:has(.indexer-content) {
	background: #fff;
	border: 1px solid #E2E6EC;
	border-radius: 14px;
	padding: 28px;
	margin-bottom: 28px;
}
@media (min-width: 768px) {
	body .page_index_journal > .additional_content:has(.indexer-content) { padding: 32px 36px; }
}

body .edutech-panel-title {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 20px;
	font-family: "Plus Jakarta Sans", system-ui, sans-serif;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #D4922A;
}
/* fine rule with a kawung diamond after the title */
body .edutech-panel-title::after {
	content: "";
	flex: 1;
	height: 1px;
	background: linear-gradient(90deg, #E2E6EC, rgba(226, 230, 236, 0));
}
body .edutech-panel-title::before {
	content: "";
	width: 7px;
	height: 7px;
	flex: none;
	background: #D4922A;
	transform: rotate(45deg);
}

body .indexer-content {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
	gap: 14px;
	font-size: 0; /* neutralises stray   between items */
}
body .indexer-item {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 78px;
	padding: 12px 16px;
	background: #F8FAFC;
	border: 1px solid #E2E6EC;
	border-radius: 12px;
	font-size: 1rem;
	overflow: hidden;
	transition: transform .25s, box-shadow .25s, border-color .25s, background .25s;
}
/* gold line that slides in along the bottom on hover */
body .indexer-item::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	height: 3px;
	width: 100%;
	background: #D4922A;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .3s cubic-bezier(.2, .7, .2, 1);
}
body .indexer-item:hover,
body .indexer-item:focus-within {
	transform: translateY(-3px);
	background: #fff;
	border-color: #CBD3DE;
	box-shadow: 0 14px 28px -16px rgba(22, 50, 79, .35);
}
body .indexer-item:hover::after,
body .indexer-item:focus-within::after { transform: scaleX(1); }

body .indexer-item a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}
body .indexer-item img {
	display: block;
	width: auto !important;
	height: auto !important;
	max-width: 100%;
	max-height: 42px;
	object-fit: contain;
}

@media (prefers-reduced-motion: reduce) {
	body .indexer-item, body .indexer-item::after { transition: none; }
	body .indexer-item:hover { transform: none; }
}

/* ---------- 5. Quick Menu (custom sidebar block or Additional Content) ---------- */
/* the sidebar block becomes a frameless card so the menu header can reach the edges */
body .pkp_block:has(.quickmenu-header) { padding: 0; overflow: hidden; border-radius: 14px; }
body .pkp_block:has(.quickmenu-header) > .title { display: none; }

body .edutech-quickmenu,
body .edutech-submission {
	background: #fff;
	border-radius: 14px;
	overflow: hidden;
}
/* when placed outside a sidebar block, give it its own frame */
body .page_index_journal :is(.edutech-quickmenu, .edutech-submission),
body .additional_content :is(.edutech-quickmenu, .edutech-submission) { border: 1px solid #E2E6EC; }

body .quickmenu-header {
	position: relative;
	padding: 18px 22px 16px;
	background-color: #16324F;
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.1' stroke-width='1.2'%3E%3Cellipse cx='28' cy='14' rx='8' ry='13'/%3E%3Cellipse cx='28' cy='42' rx='8' ry='13'/%3E%3Cellipse cx='14' cy='28' rx='13' ry='8'/%3E%3Cellipse cx='42' cy='28' rx='13' ry='8'/%3E%3C/g%3E%3C/svg%3E"),
		radial-gradient(120% 160% at 100% 0%, rgba(212, 146, 42, .35), rgba(212, 146, 42, 0) 60%);
	border-bottom: 3px solid #D4922A;
}
body .quickmenu-header .qm-title {
	display: flex;
	align-items: center;
	gap: 10px;
	color: #fff;
	font-family: "Newsreader", Georgia, serif;
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: .01em;
}
body .quickmenu-header .qm-title::before {
	content: "";
	width: 8px;
	height: 8px;
	flex: none;
	background: #D4922A;
	transform: rotate(45deg);
}

body :is(.edutech-quickmenu, .edutech-submission, .pkp_block, .additional_content) ul.quickmenu-list {
	list-style: none;
	margin: 0;
	padding: 8px;
	counter-reset: qm;
}
body :is(.edutech-quickmenu, .edutech-submission, .pkp_block, .additional_content) ul.quickmenu-list li { margin: 0; padding: 0; border: 0; }
body :is(.edutech-quickmenu, .edutech-submission, .pkp_block, .additional_content) ul.quickmenu-list li + li { border-top: 1px solid #F0F2F6; }

body :is(.edutech-quickmenu, .edutech-submission, .pkp_block, .additional_content) ul.quickmenu-list li a {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 34px 10px 12px;
	border-radius: 8px;
	color: #1A2230 !important;
	font-size: .92rem;
	font-weight: 500;
	line-height: 1.35;
	text-decoration: none !important;
	transition: background .2s, color .2s, padding .25s;
}
/* small diamond bullet */
body :is(.edutech-quickmenu, .edutech-submission, .pkp_block, .additional_content) ul.quickmenu-list li a::before {
	content: "";
	width: 6px;
	height: 6px;
	flex: none;
	border: 1.5px solid #D4922A;
	transform: rotate(45deg);
	transition: background .2s, transform .25s;
}
/* arrow that slides in on hover */
body :is(.edutech-quickmenu, .edutech-submission, .pkp_block, .additional_content) ul.quickmenu-list li a::after {
	content: "\2192";
	position: absolute;
	right: 12px;
	top: 50%;
	color: #D4922A;
	font-weight: 700;
	opacity: 0;
	transform: translate(-6px, -50%);
	transition: opacity .2s, transform .25s;
}
body :is(.edutech-quickmenu, .edutech-submission, .pkp_block, .additional_content) ul.quickmenu-list li a:hover,
body :is(.edutech-quickmenu, .edutech-submission, .pkp_block, .additional_content) ul.quickmenu-list li a:focus {
	background: #F4F6F9;
	color: #16324F !important;
	padding-left: 16px;
}
body :is(.edutech-quickmenu, .edutech-submission, .pkp_block, .additional_content) ul.quickmenu-list li a:hover::before,
body :is(.edutech-quickmenu, .edutech-submission, .pkp_block, .additional_content) ul.quickmenu-list li a:focus::before { background: #D4922A; transform: rotate(225deg); }
body :is(.edutech-quickmenu, .edutech-submission, .pkp_block, .additional_content) ul.quickmenu-list li a:hover::after,
body :is(.edutech-quickmenu, .edutech-submission, .pkp_block, .additional_content) ul.quickmenu-list li a:focus::after { opacity: 1; transform: translate(0, -50%); }

/* on the homepage (no sidebar) the list runs in two columns */
@media (min-width: 640px) {
	body .page_index_journal ul.quickmenu-list,
	body .additional_content ul.quickmenu-list { columns: 2; column-gap: 16px; }
	body .page_index_journal ul.quickmenu-list li,
	body .additional_content ul.quickmenu-list li { break-inside: avoid; }
	body .page_index_journal ul.quickmenu-list li + li,
	body .additional_content ul.quickmenu-list li + li { border-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
	body :is(.edutech-quickmenu, .edutech-submission, .pkp_block, .additional_content) ul.quickmenu-list li a, body :is(.edutech-quickmenu, .edutech-submission, .pkp_block, .additional_content) ul.quickmenu-list li a::before, body :is(.edutech-quickmenu, .edutech-submission, .pkp_block, .additional_content) ul.quickmenu-list li a::after { transition: none; }
}

/* ---------- 6. Other sidebar blocks that use .edutech-panel-title (e.g. Visitor) ---------- */
body .pkp_structure_sidebar .pkp_block:has(> .content > .edutech-panel-title) { padding: 0; overflow: hidden; border-radius: 14px; }
body .pkp_structure_sidebar .pkp_block:has(> .content > .edutech-panel-title) > .title { display: none; }
body .pkp_structure_sidebar .pkp_block .content > .edutech-panel-title {
	margin: 0;
	padding: 18px 22px 16px;
	gap: 10px;
	background-color: #16324F;
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.1' stroke-width='1.2'%3E%3Cellipse cx='28' cy='14' rx='8' ry='13'/%3E%3Cellipse cx='28' cy='42' rx='8' ry='13'/%3E%3Cellipse cx='14' cy='28' rx='13' ry='8'/%3E%3Cellipse cx='42' cy='28' rx='13' ry='8'/%3E%3C/g%3E%3C/svg%3E"),
		radial-gradient(120% 160% at 100% 0%, rgba(212, 146, 42, .35), rgba(212, 146, 42, 0) 60%);
	border-bottom: 3px solid #D4922A;
	color: #fff;
	font-family: "Newsreader", Georgia, serif;
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: .01em;
	text-transform: none;
}
body .pkp_structure_sidebar .pkp_block .content > .edutech-panel-title::before { width: 8px; height: 8px; }
body .pkp_structure_sidebar .pkp_block .content > .edutech-panel-title::after { display: none; }

/* contents of such blocks: padded, one column, centred */
body .pkp_structure_sidebar .pkp_block .indexer-content {
	grid-template-columns: 1fr;
	gap: 12px;
	padding: 16px;
	justify-items: center;
}
body .pkp_structure_sidebar .pkp_block .indexer-item { width: 100%; height: 72px; }
body .pkp_structure_sidebar .pkp_block .indexer-content > a { display: block; font-size: 1rem; line-height: 0; }
body .pkp_structure_sidebar .pkp_block .indexer-content > a img { max-width: 100%; height: auto; border-radius: 8px; }
/* empty   paragraphs left behind by the editor */
body .pkp_structure_sidebar .pkp_block:has(> .content > .edutech-panel-title) .content > p { margin: 0; line-height: 0; font-size: 0; }