/**
 * Theme Name:        Pelajar In Aja
 * Theme URI:         https://cms.pelajarinaja.web.id/
 * Description:       Tema block ringan untuk situs materi pembelajaran Teknik Komputer dan Jaringan. Dioptimalkan untuk tutorial teknis: blok kode dengan nomor baris dan tombol salin, kotak catatan praktikum, tabel responsif, daftar isi otomatis, serta mode gelap otomatis. Tanpa framework CSS eksternal, tanpa jQuery, tanpa font dari CDN.
 * Author:            SMK Negeri 1 - Teknik Komputer dan Jaringan
 * Author URI:        https://cms.pelajarinaja.web.id/
 * Version:           1.0.0
 * Requires at least: 6.6
 * Tested up to:      6.8
 * Requires PHP:      8.2
 * License:           GNU General Public License v2 or later
 * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain:       pelajarinaja
 * Tags:              blog, education, one-column, block-patterns, full-site-editing, accessibility-ready, translation-ready
 *
 * Pelajar In Aja dilisensikan di bawah GNU General Public License v2 atau versi setelahnya.
 */

/* -------------------------------------------------------------------------
 * CATATAN UNTUK PENGELOLA TEMA
 *
 * Sebagian besar tampilan (warna, ukuran huruf, jarak, layout) diatur lewat
 * theme.json, BUKAN lewat berkas ini. Berkas style.css hanya berisi:
 *   1. Header tema di atas (wajib ada supaya WordPress mengenali tema).
 *   2. Override variabel warna untuk MODE GELAP.
 *   3. Penyesuaian kecil pada header/footer/navigasi yang tidak bisa
 *      diungkapkan lewat theme.json.
 *
 * Komponen konten (blok kode, kotak catatan, tabel, daftar isi, meta artikel)
 * ada di assets/css/konten.css supaya bisa dipakai ulang di editor.
 * ---------------------------------------------------------------------- */

/* =========================================================================
 * 1. MODE GELAP OTOMATIS
 *
 * Cara kerjanya: theme.json mencetak variabel --wp--preset--color--* di :root.
 * Di sini kita cukup menimpa nilai variabel yang sama ketika sistem pengguna
 * memakai tema gelap. Semua blok yang memakai preset warna ikut berubah,
 * tanpa perlu menulis ulang satu per satu.
 *
 * Selektor ditulis `:root:root` (dua kali) agar spesifisitasnya lebih tinggi
 * daripada gaya global WordPress, apa pun urutan pemuatan berkas CSS-nya.
 * ====================================================================== */

:root {
	color-scheme: light;
}

@media ( prefers-color-scheme: dark ) {

	:root:root {
		color-scheme: dark;

		/* Latar halaman dan permukaan kartu. */
		--wp--preset--color--base: #0f141b;
		--wp--preset--color--surface: #19202a;

		/* Teks utama dan teks sekunder. */
		--wp--preset--color--contrast: #e8edf4;
		--wp--preset--color--muted: #a2aebd;

		/* Biru: dipakai untuk judul dan tautan, jadi harus TERANG di mode gelap. */
		--wp--preset--color--primary: #8ec1f0;
		--wp--preset--color--primary-soft: #16283a;

		/* Biru gelap: dipakai sebagai LATAR header/footer, jadi tetap gelap. */
		--wp--preset--color--primary-dark: #0a1017;

		/* Oranye aksen. */
		--wp--preset--color--accent: #f7a05a;
		--wp--preset--color--accent-soft: #37220f;

		/* Garis pembatas. */
		--wp--preset--color--border: #2a323d;
	}

	/* Gambar dan sematan sedikit diredupkan agar tidak menyilaukan. */
	:root:root img:not( .pnj-no-dim ),
	:root:root .wp-block-embed iframe {
		filter: brightness( 0.88 ) contrast( 1.02 );
	}
}

/* =========================================================================
 * 2. DASAR
 * ====================================================================== */

/* Penggulir halus hanya untuk yang tidak sensitif terhadap animasi.
   Dipakai saat mengeklik tautan di Daftar Isi. */
@media ( prefers-reduced-motion: no-preference ) {

	html {
		scroll-behavior: smooth;
	}
}

/* Judul yang jadi target Daftar Isi tidak boleh tertutup header lengket. */
:where( h2, h3, h4 )[ id ] {
	scroll-margin-top: 1.5rem;
}

/* Cegah kata panjang (mis. perintah terminal di paragraf) merusak layout 360px. */
body {
	overflow-wrap: break-word;
	text-rendering: optimizeLegibility;
	-webkit-text-size-adjust: 100%;
}

/* =========================================================================
 * 3. AKSESIBILITAS
 * ====================================================================== */

/* Cincin fokus yang selalu terlihat di kedua mode warna. */
:where( a, button, input, select, textarea, summary, [ tabindex ] ):focus-visible {
	outline: 3px solid var( --wp--preset--color--accent );
	outline-offset: 2px;
	border-radius: 2px;
}

/* Kelas bawaan WordPress untuk teks yang hanya dibaca pembaca layar. */
.screen-reader-text {
	border: 0;
	clip-path: inset( 50% );
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* Tautan "Lewati ke konten" muncul saat difokuskan dengan keyboard. */
.skip-link:focus {
	background-color: var( --wp--preset--color--surface );
	color: var( --wp--preset--color--primary );
	clip-path: none;
	height: auto;
	left: 1rem;
	top: 1rem;
	margin: 0;
	padding: 0.75rem 1.25rem;
	width: auto;
	z-index: 100000;
	border-radius: 6px;
	box-shadow: 0 4px 16px rgba( 0, 0, 0, 0.25 );
	font-weight: 600;
}

/* =========================================================================
 * 4. HEADER DAN NAVIGASI
 * ====================================================================== */

.pnj-header {
	position: relative;
	z-index: 20;
}

.pnj-header a {
	color: inherit;
}

/* Jangan beri cincin fokus pada <main> ketika difokuskan lewat skip link. */
#pnj-konten:focus {
	outline: none;
}

/*
 * Tagline situs disembunyikan di layar sempit supaya nama situs dan tombol
 * menu tetap muat dalam satu baris di layar 360px.
 */
.pnj-tagline {
	border-left: 1px solid rgba( 255, 255, 255, 0.3 );
	margin: 0 0 0 0.5rem;
	opacity: 0.85;
	padding-left: 0.65rem;
}

@media ( max-width: 781px ) {

	.pnj-tagline {
		display: none;
	}
}

/* Menu utama: jarak antaritem cukup lebar untuk jari di layar sentuh. */
.pnj-header .wp-block-navigation {
	--wp--style--block-gap: 0.25rem;
}

.pnj-header .wp-block-navigation .wp-block-navigation-item__content {
	padding: 0.5rem 0.65rem;
	border-radius: 6px;
	text-decoration: none;
}

.pnj-header .wp-block-navigation .wp-block-navigation-item__content:hover {
	background-color: rgba( 255, 255, 255, 0.12 );
}

/* Menu tumpang tindih (overlay) di HP: latar biru gelap, bukan putih. */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var( --wp--preset--color--primary-dark ) !important;
	color: var( --wp--preset--color--on-dark ) !important;
	padding-top: 4.5rem;
}

.wp-block-navigation__responsive-container.is-menu-open a {
	color: var( --wp--preset--color--on-dark ) !important;
	font-size: 1.125rem;
}

/* Ikon pencarian di header. */
.pnj-header .wp-block-search__button {
	background-color: transparent;
	border: 1px solid rgba( 255, 255, 255, 0.35 );
	color: inherit;
	padding: 0.5rem;
}

.pnj-header .wp-block-search .wp-block-search__input {
	background-color: rgba( 255, 255, 255, 0.1 );
	border: 1px solid rgba( 255, 255, 255, 0.3 );
	color: inherit;
	border-radius: 6px;
	padding: 0.5rem 0.75rem;
}

.pnj-header .wp-block-search .wp-block-search__input::placeholder {
	color: rgba( 255, 255, 255, 0.65 );
}

/* =========================================================================
 * 5. FOOTER
 * ====================================================================== */

.pnj-footer a {
	color: inherit;
}

.pnj-footer .wp-block-navigation .wp-block-navigation-item__content {
	text-decoration: none;
}

.pnj-footer .wp-block-navigation .wp-block-navigation-item__content:hover {
	text-decoration: underline;
}

/* =========================================================================
 * 6. KARTU (dipakai di beranda, arsip, dan hasil pencarian)
 * ====================================================================== */

.pnj-kartu {
	background-color: var( --wp--preset--color--surface );
	border: 1px solid var( --wp--preset--color--border );
	border-radius: 10px;
	overflow: hidden;
	padding: 0 0 1.25rem;
	height: 100%;
	display: flex;
	flex-direction: column;
	transition: border-color 0.15s ease, transform 0.15s ease;
}

@media ( prefers-reduced-motion: reduce ) {

	.pnj-kartu {
		transition: none;
	}
}

.pnj-kartu:hover {
	border-color: var( --wp--preset--color--primary );
}

.pnj-kartu > *:not( .wp-block-post-featured-image ) {
	padding-inline: 1.25rem;
}

.pnj-kartu .wp-block-post-featured-image {
	margin-bottom: 1rem;
}

.pnj-kartu .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pnj-kartu .wp-block-post-title {
	margin-block: 0.35rem 0.5rem;
}

.pnj-kartu .wp-block-post-title a {
	text-decoration: none;
}

.pnj-kartu .wp-block-post-title a:hover {
	text-decoration: underline;
}

/* Nama kategori di kartu tampil seperti label kecil. */
.pnj-kartu .wp-block-post-terms a {
	color: var( --wp--preset--color--accent );
	text-decoration: none;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 0.75rem;
}

/* Kartu kategori di beranda (dibuat lewat pola "Kartu Kategori"). */
.pnj-kartu-kategori {
	background-color: var( --wp--preset--color--surface );
	border: 1px solid var( --wp--preset--color--border );
	border-left: 4px solid var( --wp--preset--color--accent );
	border-radius: 10px;
	height: 100%;
}

.pnj-kartu-kategori:hover {
	border-color: var( --wp--preset--color--primary );
	border-left-color: var( --wp--preset--color--accent );
}

.pnj-kartu-kategori a {
	text-decoration: none;
}

.pnj-kartu-kategori a:hover {
	text-decoration: underline;
}

/* =========================================================================
 * 7. PAGINASI DAN TOMBOL
 * ====================================================================== */

.wp-block-query-pagination {
	margin-top: var( --wp--preset--spacing--50 );
}

.wp-block-query-pagination-numbers .page-numbers {
	display: inline-block;
	min-width: 2.5rem;
	padding: 0.4rem 0.6rem;
	text-align: center;
	border: 1px solid var( --wp--preset--color--border );
	border-radius: 6px;
	text-decoration: none;
	margin-inline-end: 0.25rem;
}

.wp-block-query-pagination-numbers .page-numbers.current {
	background-color: var( --wp--preset--color--primary );
	border-color: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--on-dark );
	font-weight: 700;
}

/* =========================================================================
 * 8. HALAMAN ARSIP DAN PENCARIAN
 * ====================================================================== */

/* Deskripsi kategori di bagian atas arsip. */
.pnj-deskripsi-arsip {
	background-color: var( --wp--preset--color--primary-soft );
	border-radius: 10px;
	padding: var( --wp--preset--spacing--40 );
}

.pnj-deskripsi-arsip p:last-child {
	margin-bottom: 0;
}

/* Kotak pencarian besar (halaman hasil pencarian dan 404). */
.pnj-cari-besar .wp-block-search__input {
	background-color: var( --wp--preset--color--surface );
	border: 2px solid var( --wp--preset--color--border );
	border-radius: 8px;
	padding: 0.75rem 1rem;
	font-size: 1.0625rem;
	color: var( --wp--preset--color--contrast );
}

.pnj-cari-besar .wp-block-search__button {
	border-radius: 8px;
	padding: 0.75rem 1.25rem;
}