/*
Theme Name: LPPM STIEBA
Theme URI: https://lppm.stieba.ac.id/
Author: LPPM STIE Bakti Bangsa
Author URI: https://lppm.stieba.ac.id/
Description: Tema untuk Lembaga Penelitian dan Pengabdian kepada Masyarakat STIE Bakti Bangsa. Tema anak dari Twenty Twenty-Five dengan palet hijau-emas-bata yang diambil dari logo LPPM, tipografi Literata dan Manrope, serta pola siap pakai untuk beranda, skema penelitian, pengabdian, publikasi, unduhan, dan kontak.
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 7.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lppm-stieba
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, accessibility-ready, education, news
*/

/*
 * Sebagian besar tampilan diatur lewat theme.json. Berkas ini hanya memuat hal
 * yang memang belum bisa dinyatakan di theme.json: perilaku lengket, transisi,
 * status hover majemuk, dan penomoran otomatis.
 */

/* ---------------------------------------------------------------------------
 * Dasar
 * ------------------------------------------------------------------------ */

:root {
	--lppm-transisi: 180ms cubic-bezier(0.4, 0, 0.2, 1);
	--lppm-radius: 10px;
	--lppm-radius-besar: 16px;
}

/*
 * Cincin fokus yang terlihat di atas latar terang maupun hijau tua. Dua lapis
 * outline dipakai supaya tetap kontras pada kedua sisi tanpa perlu aturan
 * terpisah per bagian halaman.
 */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-1);
	outline-offset: 2px;
	border-radius: 3px;
}

/* Lompat ke konten: hanya tampak saat difokuskan lewat papan ketik. */
.skip-link:focus {
	background-color: var(--wp--preset--color--accent-3);
	color: var(--wp--preset--color--base);
	z-index: 100000;
}

/*
 * Warna tautan bawaan (#16713F) terlalu gelap di atas bidang hijau tua, jadi
 * di dalam bidang gelap tautan biasa dialihkan ke emas. Tombol dikecualikan
 * karena warnanya sudah diatur sendiri lewat theme.json.
 *
 * Aturan ini juga yang mewarnai tautan di kaki halaman, karena kaki halaman
 * memakai latar accent-3 yang sama. Emas di atas hijau tua berbanding 4,9:1
 * terhadap latarnya, jadi tetap memenuhi ambang WCAG untuk teks biasa.
 */
.has-accent-3-background-color a:not(.wp-element-button),
.has-hijau-dalam-gradient-background a:not(.wp-element-button),
.has-tridharma-gradient-background a:not(.wp-element-button) {
	color: var(--wp--preset--color--accent-1);
}

.has-accent-3-background-color a:not(.wp-element-button):hover,
.has-hijau-dalam-gradient-background a:not(.wp-element-button):hover,
.has-tridharma-gradient-background a:not(.wp-element-button):hover {
	color: var(--wp--preset--color--base);
}

/* ---------------------------------------------------------------------------
 * Kepala halaman
 * ------------------------------------------------------------------------ */

/*
 * Kelas .lppm-header dipasang pada blok template-part, bukan pada grup di
 * dalamnya. Elemen `sticky` hanya bisa menempel selama kotak induknya masih
 * terlihat; kalau kelas ini ditaruh di grup dalam, induknya adalah <header>
 * setinggi kepala halaman itu sendiri sehingga menempelnya langsung lepas
 * begitu digulir. Pada pembungkus template-part, induknya adalah wadah seluruh
 * halaman, jadi menempelnya bertahan sampai dasar halaman.
 */
.lppm-header {
	position: sticky;
	top: 0;
	z-index: 100;
	transition: box-shadow var(--lppm-transisi);
}

/* Bilah kontak tipis di atas kepala halaman. */
.lppm-topbar {
	font-size: 0.8125rem;
	letter-spacing: 0.01em;
	max-height: 5rem;
	overflow: hidden;
	transition: max-height var(--lppm-transisi), opacity var(--lppm-transisi);
}

/*
 * Bilah kontak dilipat setelah halaman digulir supaya kepala halaman yang
 * menempel tidak memakan terlalu banyak tinggi layar.
 */
.lppm-header.is-scrolled .lppm-topbar {
	max-height: 0;
	opacity: 0;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

.lppm-header-utama {
	border-bottom: 1px solid rgba(11, 61, 38, 0.1);
}

.lppm-topbar a {
	color: inherit;
	text-decoration: none;
	opacity: 0.92;
	transition: opacity var(--lppm-transisi);
}

.lppm-topbar a:hover {
	opacity: 1;
	text-decoration: underline;
}

/* Bayangan baru muncul setelah halaman digulir, ditandai dari JavaScript. */
.lppm-header.is-scrolled {
	box-shadow: 0 1px 3px rgba(11, 61, 38, 0.08), 0 8px 24px -16px rgba(11, 61, 38, 0.35);
}

.lppm-header .wp-block-site-logo img {
	height: auto;
}

/*
 * Slogan situs berbunyi panjang ("Lembaga Penelitian dan Pengabdian kepada
 * Masyarakat STIE Bakti Bangsa"), jadi di kepala halaman hanya ditampilkan
 * saat memang ada ruang; di bawah itu logo dan nama sudah cukup menjelaskan.
 */
.lppm-tagline {
	display: none;
	max-width: 34ch;
	line-height: 1.35;
}

@media (min-width: 1200px) {
	.lppm-tagline {
		display: block;
	}
}

/* Kotak putih pembungkus logo di kaki halaman yang berlatar hijau tua. */
.lppm-logo-chip {
	width: fit-content;
}

/*
 * Garis emas yang tumbuh dari tengah saat tautan menu disentuh. Dibuat dengan
 * pseudo-element supaya tidak menggeser tata letak seperti border biasa.
 */
.lppm-nav .wp-block-navigation-item__content {
	position: relative;
	padding-block: 0.35em;
}

.lppm-nav .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 0;
	height: 2px;
	background-color: var(--wp--preset--color--accent-1);
	transform: translateX(-50%);
	transition: width var(--lppm-transisi);
}

.lppm-nav .wp-block-navigation-item:hover > .wp-block-navigation-item__content::after,
.lppm-nav .wp-block-navigation-item__content:focus-visible::after,
.lppm-nav .current-menu-item > .wp-block-navigation-item__content::after {
	width: 100%;
}

/* Submenu: sudut membulat dan bayangan lembut. */
.lppm-nav .wp-block-navigation__submenu-container {
	border-radius: var(--lppm-radius);
	border-color: rgba(11, 61, 38, 0.12);
	box-shadow: 0 12px 32px -12px rgba(11, 61, 38, 0.28);
	padding-block: 0.5rem;
	overflow: hidden;
}

.lppm-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after {
	display: none;
}

/* ---------------------------------------------------------------------------
 * Isi halaman
 * ------------------------------------------------------------------------ */

/*
 * Halaman yang disusun dari bagian selebar layar sudah membawa jarak atas dan
 * bawahnya sendiri. Padding pembungkus dilepas hanya bila bagian pertama atau
 * terakhirnya memang selebar layar, sehingga halaman teks biasa tetap punya
 * napas. Peramban tanpa dukungan :has() sekadar mendapat jarak lebih longgar.
 *
 * Padding-nya sengaja ditulis di sini, bukan sebagai gaya sebaris pada blok
 * di berkas template: gaya sebaris selalu mengalahkan lembar gaya, sehingga
 * kedua aturan :has() di bawah tidak akan pernah berlaku.
 */
.lppm-isi-halaman {
	padding-top: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--70);
}

.lppm-isi-halaman:has(> .wp-block-post-content > :first-child.alignfull) {
	padding-top: 0;
}

.lppm-isi-halaman:has(> .wp-block-post-content > :last-child.alignfull) {
	padding-bottom: 0;
}

/* ---------------------------------------------------------------------------
 * Label kecil di atas judul bagian
 * ------------------------------------------------------------------------ */

.lppm-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin-bottom: 0.75rem;
}

/* Strip emas pendek sebagai penanda visual, bukan teks, jadi disembunyikan
   dari pembaca layar lewat pseudo-element. */
.lppm-eyebrow::before {
	content: "";
	width: 1.75rem;
	height: 2px;
	background-color: var(--wp--preset--color--accent-1);
	flex: none;
}

.lppm-eyebrow.is-terang {
	color: var(--wp--preset--color--accent-1);
}

.lppm-eyebrow.is-gelap {
	color: var(--wp--preset--color--accent-8);
}

/* Versi tengah untuk judul bagian yang rata tengah. */
.lppm-eyebrow.is-tengah {
	justify-content: center;
}

/* ---------------------------------------------------------------------------
 * Kartu
 * ------------------------------------------------------------------------ */

.lppm-kartu {
	border-radius: var(--lppm-radius-besar);
	transition: transform var(--lppm-transisi), box-shadow var(--lppm-transisi),
		border-color var(--lppm-transisi);
	height: 100%;
	/* Memangkas sudut bidang sampul kartu jurnal agar ikut membulat. */
	overflow: hidden;
}

.lppm-kartu:hover {
	transform: translateY(-3px);
	box-shadow: 0 2px 4px rgba(11, 61, 38, 0.08), 0 18px 40px -16px rgba(11, 61, 38, 0.28);
	border-color: var(--wp--preset--color--accent-1);
}

/*
 * Kolom di dalam baris kartu diregangkan supaya kartu bersebelahan sama tinggi
 * walaupun panjang teksnya berbeda.
 */
.lppm-baris-kartu.wp-block-columns {
	align-items: stretch;
}

.lppm-baris-kartu > .wp-block-column {
	display: flex;
	flex-direction: column;
}

.lppm-baris-kartu > .wp-block-column > .wp-block-group {
	flex: 1;
}

/* Nomor besar pada kartu statistik. */
.lppm-angka {
	font-family: var(--wp--preset--font-family--literata);
	font-size: clamp(2.25rem, 1.4rem + 3vw, 3.25rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--wp--preset--color--accent-1);
	display: block;
	margin-bottom: 0.3rem;
}

.lppm-angka-label {
	font-size: 0.875rem;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.82);
}

/*
 * Ikon lingkaran di kepala kartu.
 *
 * Tata letak "terbatas" milik WordPress memberi margin kiri-kanan otomatis
 * pada setiap anaknya. Untuk blok selebar induknya itu tak terlihat, tapi
 * lingkaran ini lebarnya tetap 3rem sehingga jadi ter-tengah dan tidak
 * sejajar dengan judul kartu di bawahnya.
 *
 * !important di sini bukan jalan pintas: aturan bawaan WordPress berbunyi
 * `margin-left: auto !important` pada wadah tata letak terbatas, sehingga
 * deklarasi biasa -- setinggi apa pun kekhususannya -- tetap kalah.
 */
.lppm-ikon {
	margin-left: 0 !important;
	margin-right: auto !important;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--wp--preset--font-family--literata);
	font-size: 1.35rem;
	font-weight: 700;
	line-height: 1;
	background-color: var(--wp--preset--color--accent-9);
	color: var(--wp--preset--color--accent-3);
	margin-bottom: 1.1rem;
	flex: none;
}

/* ---------------------------------------------------------------------------
 * Daftar bertanda centang dan langkah bernomor
 * ------------------------------------------------------------------------ */

.lppm-daftar-cek {
	list-style: none;
	padding-left: 0;
	margin-left: 0;
}

.lppm-daftar-cek li {
	position: relative;
	padding-left: 1.9em;
	margin-bottom: 0.6em;
}

.lppm-daftar-cek li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.45em;
	width: 0.7em;
	height: 0.38em;
	border-left: 2px solid var(--wp--preset--color--accent-7);
	border-bottom: 2px solid var(--wp--preset--color--accent-7);
	transform: rotate(-45deg);
}

/*
 * Langkah bernomor memakai penghitung CSS supaya nomor tetap berurutan kalau
 * ada langkah yang ditambah atau dihapus lewat editor.
 */
.lppm-langkah {
	counter-reset: lppm-langkah;
	list-style: none;
	padding-left: 0;
	margin-left: 0;
}

.lppm-langkah > li {
	counter-increment: lppm-langkah;
	position: relative;
	padding-left: 3.25rem;
	padding-bottom: 1.75rem;
	margin-bottom: 0;
}

.lppm-langkah > li::before {
	content: counter(lppm-langkah);
	position: absolute;
	left: 0;
	top: 0;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background-color: var(--wp--preset--color--accent-3);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 0.9375rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	z-index: 1;
}

/* Garis penghubung antar langkah, tidak digambar pada langkah terakhir. */
.lppm-langkah > li::after {
	content: "";
	position: absolute;
	left: 1.125rem;
	top: 2.25rem;
	bottom: 0;
	width: 2px;
	background-color: rgba(11, 61, 38, 0.14);
}

.lppm-langkah > li:last-child {
	padding-bottom: 0;
}

.lppm-langkah > li:last-child::after {
	display: none;
}

.lppm-langkah strong {
	display: block;
	font-family: var(--wp--preset--font-family--literata);
	font-size: 1.0625rem;
	color: var(--wp--preset--color--accent-3);
	margin-bottom: 0.2rem;
}

/* ---------------------------------------------------------------------------
 * Baris unduhan
 * ------------------------------------------------------------------------ */

.lppm-unduhan .wp-block-group {
	transition: background-color var(--lppm-transisi), border-color var(--lppm-transisi);
}

.lppm-unduhan .wp-block-group:hover {
	background-color: var(--wp--preset--color--accent-9);
	border-color: var(--wp--preset--color--accent-1);
}

/* Label jenis berkas, mis. PDF atau DOCX. */
.lppm-berkas {
	display: inline-block;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	padding: 0.28em 0.6em;
	border-radius: 4px;
	background-color: var(--wp--preset--color--accent-3);
	color: var(--wp--preset--color--base);
	line-height: 1.3;
}

.lppm-berkas.is-doc {
	background-color: var(--wp--preset--color--accent-7);
}

.lppm-berkas.is-xls {
	background-color: var(--wp--preset--color--accent-8);
}

/* ---------------------------------------------------------------------------
 * Daftar berita
 * ------------------------------------------------------------------------ */

.lppm-berita .wp-block-post {
	transition: transform var(--lppm-transisi);
}

.lppm-berita .wp-block-post:hover {
	transform: translateY(-2px);
}

.lppm-berita .wp-block-post-featured-image img {
	border-radius: var(--lppm-radius);
	transition: filter var(--lppm-transisi);
}

.lppm-berita .wp-block-post:hover .wp-block-post-featured-image img {
	filter: saturate(1.08);
}

/*
 * Gambar unggulan yang kosong tetap menyisakan bidang berwarna supaya tinggi
 * kartu di satu baris tidak berbeda-beda saat ada tulisan tanpa gambar.
 */
.lppm-berita .wp-block-post-featured-image:empty {
	display: block;
	aspect-ratio: 16 / 10;
	border-radius: var(--lppm-radius);
	background: linear-gradient(135deg, var(--wp--preset--color--accent-2) 0%, var(--wp--preset--color--accent-9) 100%);
}

/* ---------------------------------------------------------------------------
 * Kaki halaman
 * ------------------------------------------------------------------------ */

/* Warna tautannya diwarisi dari aturan bidang gelap di bagian Dasar. */
.lppm-footer a {
	text-decoration: none;
	transition: color var(--lppm-transisi);
}

.lppm-footer a:hover {
	text-decoration: underline;
}

.lppm-footer ul {
	list-style: none;
	padding-left: 0;
	margin-left: 0;
}

.lppm-footer li {
	margin-bottom: 0.55em;
}

/* Judul kolom kaki halaman. */
.lppm-footer-judul {
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-1);
	margin-bottom: 1.1rem;
}

/* ---------------------------------------------------------------------------
 * Isi tulisan
 * ------------------------------------------------------------------------ */

/* Tabel di dalam artikel: garis tipis dan padding yang nyaman dibaca. */
.wp-block-table table {
	border-collapse: collapse;
}

.wp-block-table th,
.wp-block-table td {
	padding: 0.7em 0.9em;
	border: 1px solid rgba(11, 61, 38, 0.14);
}

.wp-block-table thead th {
	background-color: var(--wp--preset--color--accent-2);
	color: var(--wp--preset--color--accent-3);
	font-family: var(--wp--preset--font-family--manrope);
	font-weight: 700;
	text-align: left;
}

.wp-block-table tbody tr:nth-child(even) td {
	background-color: var(--wp--preset--color--accent-5);
}

/* ---------------------------------------------------------------------------
 * Hormati preferensi gerak minimal
 * ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.lppm-kartu:hover,
	.lppm-berita .wp-block-post:hover {
		transform: none;
	}
}

/* ---------------------------------------------------------------------------
 * Layar kecil
 * ------------------------------------------------------------------------ */

/*
 * Tombol "Ajukan Proposal" di kepala halaman disembunyikan sebelum menu
 * berubah jadi tombol tiga garis; kalau tetap ditampilkan, tombol dan menu
 * berebut ruang dan nama lembaga jadi terpotong. Ajakan yang sama tetap ada
 * di hero beranda dan di bilah penutup.
 */
@media (max-width: 1024px) {
	/*
	 * Pemilihnya perlu sekhusus ini: WordPress menerbitkan aturan
	 * `.wp-block-buttons.is-layout-flex { display: flex }` untuk blok tombol,
	 * dan `.lppm-header-cta` saja kalah khusus melawannya sehingga tombolnya
	 * tetap tampil lalu memaksa kepala halaman melebihi lebar layar.
	 */
	.lppm-header .lppm-header-cta.wp-block-buttons {
		display: none;
	}
}

@media (max-width: 781px) {
	/* Kepala halaman berhenti menempel di ponsel supaya tidak memakan tinggi
	   layar yang sudah terbatas. */
	.lppm-header {
		position: static;
	}

	.lppm-topbar {
		font-size: 0.75rem;
	}

	.lppm-angka {
		font-size: 2.25rem;
	}
}

/* ---------------------------------------------------------------------------
 * Kartu agenda
 *
 * Digambar oleh kode pendek [lppm_agenda], bukan oleh blok, sehingga
 * tampilannya sepenuhnya diatur di sini.
 * ------------------------------------------------------------------------ */

.lppm-agenda-butir {
	padding-bottom: var(--wp--preset--spacing--30);
	margin-bottom: var(--wp--preset--spacing--30);
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

/* Butir terakhir tidak diberi garis supaya tidak ada garis menggantung. */
.lppm-agenda-butir:last-child {
	padding-bottom: 0;
	margin-bottom: 0;
	border-bottom: 0;
}

.lppm-agenda-tanggal {
	margin: 0 0 0.15rem;
	color: var(--wp--preset--color--accent-1);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1.4;
}

.lppm-agenda-judul {
	margin: 0;
	font-family: var(--wp--preset--font-family--literata);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.4;
}

/*
 * Dua kelas dipakai berurutan agar aturan ini menang atas aturan "tautan di
 * bidang gelap berwarna emas" di bagian Dasar; judul agenda sengaja putih
 * supaya tanggalnyalah yang menonjol.
 */
.lppm-agenda .lppm-agenda-judul a {
	color: var(--wp--preset--color--base);
	text-decoration: none;
}

.lppm-agenda .lppm-agenda-judul a:hover {
	color: var(--wp--preset--color--accent-1);
	text-decoration: underline;
}

.lppm-agenda-semua {
	margin: var(--wp--preset--spacing--30) 0 0;
	font-size: 0.9375rem;
	font-weight: 600;
}

.lppm-agenda-kosong {
	margin: 0;
	color: rgba(255, 255, 255, 0.7);
	line-height: 1.6;
}

/* ---------------------------------------------------------------------------
 * Kartu jurnal
 * ------------------------------------------------------------------------ */

/*
 * Kartu jurnal melintang selebar kolom lebar-lebar, jadi efek terangkat saat
 * disentuh justru mengganggu -- itu dirancang untuk kartu kecil sebaris tiga.
 */
.lppm-kartu-jurnal:hover {
	transform: none;
	border-color: #E4E1D8;
	box-shadow: none;
}

/* Kolom sampul dan kolom teks dirapatkan agar bidang warnanya menyatu. */
.lppm-kartu-jurnal .wp-block-columns {
	margin-block: 0;
}

@media (max-width: 781px) {
	/* Saat kolom menumpuk, sampulnya tetap penuh selebar kartu. */
	.lppm-kartu-jurnal .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* Lencana akreditasi pada sampul kartu jurnal. */
.lppm-lencana {
	display: inline-block;
	padding: 0.35em 0.85em;
	border-radius: 999px;
	background-color: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--contrast);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.3;
}

/*
 * Tabel keterangan jurnal: kolom kiri berisi label, bukan judul kolom, jadi
 * garisnya dihilangkan dan yang tersisa hanya pemisah antarbaris.
 */
.lppm-meta-jurnal table {
	font-size: 0.9375rem;
}

.lppm-meta-jurnal td {
	border: 0;
	border-bottom: 1px solid rgba(11, 61, 38, 0.12);
	padding: 0.6em 0.9em 0.6em 0;
	vertical-align: top;
	background-color: transparent !important;
}

.lppm-meta-jurnal tr:last-child td {
	border-bottom: 0;
}

.lppm-meta-jurnal td:first-child {
	width: 30%;
	color: var(--wp--preset--color--accent-4);
	white-space: nowrap;
}

.lppm-meta-jurnal td:last-child {
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
	padding-right: 0;
}

@media (max-width: 600px) {
	/* Di layar sempit label dan nilainya ditumpuk agar tidak terjepit. */
	.lppm-meta-jurnal td,
	.lppm-meta-jurnal td:first-child {
		display: block;
		width: auto;
		white-space: normal;
	}

	.lppm-meta-jurnal td:first-child {
		border-bottom: 0;
		padding-bottom: 0.1em;
		font-size: 0.8125rem;
	}
}