/**
 * tuah-site.css
 * Tuah Open Journal Collection — Site Style Sheet
 * Target: OJS 3.3.0.14, tema Default (bukan tema kustom)
 *
 * Dipasang lewat: Administration > Site Settings > Appearance > Site Style Sheet
 * Tidak memerlukan akses server, template, atau JavaScript.
 *
 * ------------------------------------------------------------------
 * VERIFIKASI SELECTOR SEBELUM PERCAYA PENUH
 * ------------------------------------------------------------------
 * CSS ini menyasar markup tema Default OJS 3.3 pada halaman site index:
 *
 *   .page_index_site
 *     ul.journals
 *       li
 *         .thumb  > a > img
 *         .body
 *           h3 > a
 *           .description   (isi field Journal Description, termasuk <table>)
 *           ul.links > li.view / li.current
 *
 * Buka situs, klik kanan pada salah satu kartu jurnal > Inspect.
 * Kalau nama kelasnya berbeda, sesuaikan di bagian 4-6. Sisanya tetap jalan.
 *
 * Daftar isi
 *  1. Token
 *  2. Kerangka halaman
 *  3. Judul seksi "Journals"
 *  4. Kartu jurnal
 *  5. Sampul
 *  6. Catalog record (tabel metadata di dalam .description)
 *  7. Tautan aksi
 *  8. Footer & navigasi
 *  9. Responsif
 * 10. Aksesibilitas
 */

/* ==========================================================================
   1. TOKEN
   Palet diambil dari banner situs: tinta, gading, emas antik.
   ========================================================================== */

.pkp_structure_page {
	--tuah-ink: #17140f;
	--tuah-ink-soft: #3d3830;
	--tuah-muted: #7a7266;

	--tuah-paper: #faf8f3;
	--tuah-card: #ffffff;
	--tuah-rule: #e2dacb;
	--tuah-rule-soft: #efe9dc;

	--tuah-gold: #a8842f;
	--tuah-gold-bright: #c9a961;
	--tuah-gold-wash: #fbf5e6;

	--tuah-shadow-card: 0 1px 2px rgba(23, 20, 15, .05),
	                    0 12px 28px -14px rgba(23, 20, 15, .22);
	--tuah-shadow-book: 10px 12px 26px -10px rgba(23, 20, 15, .45);

	--tuah-serif: Georgia, 'Times New Roman', 'Noto Serif', serif;
	--tuah-sans: 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;

	--tuah-max: 1140px;
}

/* ==========================================================================
   2. KERANGKA HALAMAN
   ========================================================================== */

body.pkp_page_index,
.pkp_structure_page {
	background: var(--tuah-paper);
	color: var(--tuah-ink-soft);
}

.pkp_structure_main,
#pkp_content_main {
	max-width: var(--tuah-max);
	margin-inline: auto;
	padding-inline: 24px;
	float: none;
	width: auto;
}

/* Tema Default membungkus konten dalam kolom mengambang. Dinetralkan agar
   kartu bisa memakai lebar penuh kontainer. */
.pkp_structure_content {
	max-width: none;
	padding: 0;
}

.page_index_site {
	padding-block: 8px 56px;
}

/* Blok deskripsi situs, kalau field About the Site diisi. */
.page_index_site .about_site,
#homepageAbout {
	max-width: 72ch;
	margin-block: 32px 8px;
	font-family: var(--tuah-serif);
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--tuah-ink-soft);
}

/* ==========================================================================
   3. JUDUL SEKSI "JOURNALS"
   ========================================================================== */

.page_index_site > h2 {
	margin: 40px 0 4px;
	font-family: var(--tuah-sans);
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--tuah-gold);
}

.page_index_site > h2::after {
	content: "";
	display: block;
	width: 100%;
	height: 1px;
	margin-top: 14px;
	background: linear-gradient(90deg,
		var(--tuah-gold-bright) 0,
		var(--tuah-rule) 22%,
		transparent 60%);
}

/* ==========================================================================
   4. KARTU JURNAL
   ========================================================================== */

.page_index_site ul.journals {
	list-style: none;
	margin: 28px 0 0;
	padding: 0;
	display: grid;
	gap: 22px;
}

.page_index_site ul.journals > li {
	display: grid;
	grid-template-columns: 200px minmax(0, 1fr);
	gap: 34px;
	margin: 0;
	padding: 30px 32px;
	background: var(--tuah-card);
	border: 1px solid var(--tuah-rule);
	border-radius: 4px;
	box-shadow: var(--tuah-shadow-card);
	transition: box-shadow .22s ease, border-color .22s ease;
}

.page_index_site ul.journals > li:hover {
	border-color: var(--tuah-gold-bright);
	box-shadow: 0 1px 2px rgba(23, 20, 15, .05),
	            0 20px 40px -16px rgba(23, 20, 15, .3);
}

/* Aksen emas tipis di tepi kiri kartu. */
.page_index_site ul.journals > li {
	position: relative;
	overflow: hidden;
}

.page_index_site ul.journals > li::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: 3px;
	background: linear-gradient(180deg, var(--tuah-gold-bright), var(--tuah-gold));
	opacity: 0;
	transition: opacity .22s ease;
}

.page_index_site ul.journals > li:hover::before {
	opacity: 1;
}

.page_index_site ul.journals .body {
	min-width: 0;
}

.page_index_site ul.journals h3 {
	margin: 0 0 16px;
	font-family: var(--tuah-serif);
	font-size: 1.4375rem;
	font-weight: 400;
	line-height: 1.28;
	letter-spacing: -.01em;
}

.page_index_site ul.journals h3 a {
	color: var(--tuah-ink);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.page_index_site ul.journals h3 a:hover,
.page_index_site ul.journals h3 a:focus-visible {
	color: var(--tuah-gold);
	border-bottom-color: var(--tuah-gold-bright);
}

/* ==========================================================================
   5. SAMPUL
   ========================================================================== */

.page_index_site ul.journals .thumb {
	margin: 0;
	width: 200px;
}

.page_index_site ul.journals .thumb img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 2px;
	box-shadow: var(--tuah-shadow-book);
	transition: transform .25s ease;
}

.page_index_site ul.journals > li:hover .thumb img {
	transform: translateY(-3px);
}

/* ==========================================================================
   6. CATALOG RECORD
   Tabel metadata berasal dari field Journal Description, bukan dari tema.
   Ditata ulang menjadi kartu katalog, bukan tabel data.
   ========================================================================== */

.page_index_site .description {
	font-family: var(--tuah-sans);
	font-size: .9375rem;
	line-height: 1.72;
	color: var(--tuah-ink-soft);
}

.page_index_site .description p {
	margin: 0 0 14px;
	max-width: 78ch;
}

.page_index_site .description a {
	color: var(--tuah-gold);
	text-decoration: none;
	border-bottom: 1px solid var(--tuah-rule);
}

.page_index_site .description a:hover,
.page_index_site .description a:focus-visible {
	border-bottom-color: var(--tuah-gold);
}

/* Banner "Call for Paper" dan deretan logo pengindeks. */
.page_index_site .description img {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

/* -- tabel menjadi catalog record -- */
.page_index_site .description table {
	width: 100%;
	margin: 0 0 18px;
	border-collapse: collapse;
	background: var(--tuah-gold-wash);
	border: 1px solid var(--tuah-rule);
	border-radius: 3px;
	overflow: hidden;
	font-size: .8125rem;
	line-height: 1.6;
}

.page_index_site .description table td,
.page_index_site .description table th {
	padding: 9px 16px;
	border: 0;
	border-bottom: 1px solid var(--tuah-rule-soft);
	text-align: start;
	vertical-align: top;
}

.page_index_site .description table tr:last-child td,
.page_index_site .description table tr:last-child th {
	border-bottom: 0;
}

/* Kolom pertama = label. Huruf kecil berspasi, gaya kartu katalog. */
.page_index_site .description table td:first-child,
.page_index_site .description table th:first-child {
	width: 168px;
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--tuah-muted);
	background: rgba(255, 255, 255, .55);
	border-inline-end: 1px solid var(--tuah-rule-soft);
	white-space: nowrap;
}

/* Isi field Description sering membungkus label dengan <strong>.
   Penebalan ganda dinetralkan agar label tetap rata rasa. */
.page_index_site .description table td:first-child strong,
.page_index_site .description table td:first-child b {
	font-weight: 700;
}

.page_index_site .description table td:not(:first-child) {
	color: var(--tuah-ink-soft);
}

.page_index_site .description table td:not(:first-child) strong,
.page_index_site .description table td:not(:first-child) b {
	font-weight: 600;
	color: var(--tuah-ink);
}

/* Judul yang ditulis manual di dalam deskripsi, misalnya
   "Journal Information" dan "About the Journal" pada GPP. */
.page_index_site .description h2,
.page_index_site .description h3,
.page_index_site .description h4 {
	margin: 20px 0 10px;
	font-family: var(--tuah-sans);
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--tuah-gold);
}

/* ==========================================================================
   7. TAUTAN AKSI
   ========================================================================== */

.page_index_site ul.links {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 20px 0 0;
	padding: 18px 0 0;
	border-top: 1px solid var(--tuah-rule-soft);
}

.page_index_site ul.links li {
	margin: 0;
	padding: 0;
}

.page_index_site ul.links a {
	display: inline-block;
	padding: 9px 20px;
	border-radius: 2px;
	font-family: var(--tuah-sans);
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .02em;
	text-decoration: none;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.page_index_site ul.links .view a {
	background: var(--tuah-ink);
	color: #fff;
	border: 1px solid var(--tuah-ink);
}

.page_index_site ul.links .view a:hover,
.page_index_site ul.links .view a:focus-visible {
	background: var(--tuah-gold);
	border-color: var(--tuah-gold);
}

.page_index_site ul.links .current a {
	background: transparent;
	color: var(--tuah-ink-soft);
	border: 1px solid var(--tuah-rule);
}

.page_index_site ul.links .current a:hover,
.page_index_site ul.links .current a:focus-visible {
	color: var(--tuah-gold);
	border-color: var(--tuah-gold);
	background: var(--tuah-gold-wash);
}

/* ==========================================================================
   8. FOOTER & NAVIGASI
   ========================================================================== */

.pkp_navigation_user {
	font-family: var(--tuah-sans);
	font-size: .8125rem;
}

.pkp_structure_footer_wrapper {
	margin-top: 8px;
	border-top: 1px solid var(--tuah-rule);
	background: var(--tuah-card);
}

.pkp_structure_footer {
	max-width: var(--tuah-max);
	margin-inline: auto;
	padding: 30px 24px;
}

.pkp_brand_footer img {
	opacity: .5;
	transition: opacity .2s ease;
}

.pkp_brand_footer img:hover {
	opacity: 1;
}

/* ==========================================================================
   9. RESPONSIF
   ========================================================================== */

@media (max-width: 900px) {
	.page_index_site ul.journals > li {
		grid-template-columns: 150px minmax(0, 1fr);
		gap: 24px;
		padding: 24px;
	}

	.page_index_site ul.journals .thumb {
		width: 150px;
	}

	.page_index_site .description table td:first-child,
	.page_index_site .description table th:first-child {
		width: 130px;
		white-space: normal;
	}
}

@media (max-width: 640px) {
	#pkp_content_main,
	.pkp_structure_main {
		padding-inline: 16px;
	}

	.page_index_site ul.journals > li {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
		padding: 20px;
	}

	.page_index_site ul.journals .thumb {
		width: 132px;
	}

	.page_index_site ul.journals h3 {
		font-size: 1.25rem;
	}

	/* Tabel dijadikan bertumpuk agar tidak memaksa gulir mendatar. */
	.page_index_site .description table,
	.page_index_site .description table tbody,
	.page_index_site .description table tr,
	.page_index_site .description table td,
	.page_index_site .description table th {
		display: block;
		width: auto;
	}

	.page_index_site .description table td:first-child,
	.page_index_site .description table th:first-child {
		width: auto;
		padding-bottom: 2px;
		border-inline-end: 0;
		border-bottom: 0;
		background: transparent;
	}

	.page_index_site .description table td:not(:first-child) {
		padding-top: 0;
	}

	.page_index_site ul.links a {
		display: block;
		text-align: center;
	}
}

/* ==========================================================================
   10. AKSESIBILITAS
   ========================================================================== */

.page_index_site a:focus-visible,
.pkp_navigation_user a:focus-visible {
	outline: 2px solid var(--tuah-gold);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.page_index_site ul.journals > li,
	.page_index_site ul.journals .thumb img,
	.page_index_site ul.journals > li::before,
	.page_index_site ul.links a {
		transition: none;
	}

	.page_index_site ul.journals > li:hover .thumb img {
		transform: none;
	}
}