/*
Theme Name: Palembangpedia
Description: Tema blok untuk Palembangpedia, ensiklopedia digital Kota Palembang. Dirancang untuk dipakai bersama plugin Palembangpedia Core.
Version: 2.1.0
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
Author: Tim Palembangpedia
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: palembangpedia
*/

/* ============================================================
   PALEMBANGPEDIA v2.0 — EDITORIAL MEWAH
   Palet: biru muda (#B8D4EA) + emas (#C9A23A) + biru malam (#0A1F33)
   Hero gelap dramatis + isi terang
   Interaksi: hover, scroll reveal, parallax tipis
   ============================================================ */

/* ---------- Fokus keyboard (WCAG 2.4.7) ---------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--aksen);
	outline-offset: 2px;
}

/* ---------- Target sentuh minimal ---------- */
.wp-block-navigation-item__content,
.wp-block-button__link,
.wp-block-search__button {
	min-height: 44px;
	box-sizing: border-box;
}

.wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
}

/* ---------- Header: garis emas tipis ---------- */
.ppd-header {
	border-bottom: 3px solid var(--wp--preset--color--emas);
	background: rgba(255, 255, 255, 0.97);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	position: sticky;
	top: 0;
	z-index: 100;
}

.ppd-logo {
	margin: 0;
}

.ppd-logo img {
	display: block;
	max-width: 100%;
	height: auto;
}

@media (max-width: 599px) {
	.ppd-logo img {
		width: 215px !important;
	}
}

.ppd-header .wp-block-search__input {
	min-width: 0;
	width: 100%;
	min-height: 44px;
}

.ppd-header-cari {
	flex: 1 1 16rem;
	min-width: 0;
	max-width: 26rem;
}

.ppd-header-aksi .wp-block-button__link {
	white-space: nowrap;
}

@media (max-width: 599px) {
	.ppd-header-aksi {
		width: 100%;
	}
	.ppd-header-cari {
		flex: 1 1 auto;
		max-width: none;
	}
	.ppd-header-aksi .wp-block-button__link {
		padding-left: 0.9rem;
		padding-right: 0.9rem;
	}
}

/* Header, isi, dan footer menempel; jarak diatur oleh padding masing-masing bagian. */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

.ppd-header .wp-block-navigation__responsive-container-open {
	min-width: 44px;
	min-height: 44px;
}

/* ---------- Hero: gelap dramatis + ornamen ---------- */
.wp-block-cover.ppd-hero {
	isolation: isolate;
	overflow: hidden;
	position: relative;
}

.wp-block-cover.ppd-hero::before,
.wp-block-cover.ppd-hero::after {
	content: "";
	display: block;
	position: absolute;
	z-index: 2;
	pointer-events: none;
	min-height: 0;
}

.wp-block-cover.ppd-hero::before {
	inset: 0;
	background: url(assets/img/songket.svg) 0 0 / 48px 48px repeat;
	opacity: 0.16;
	-webkit-mask-image: linear-gradient(100deg, transparent 28%, #000 88%);
	mask-image: linear-gradient(100deg, transparent 28%, #000 88%);
}

.wp-block-cover.ppd-hero::after {
	right: -1rem;
	bottom: 0;
	width: min(760px, 62%);
	aspect-ratio: 720 / 250;
	background: url(assets/img/ampera-garis.svg) right bottom / contain no-repeat;
	opacity: 0.28;
}

.wp-block-cover.ppd-hero .wp-block-cover__inner-container {
	position: relative;
	z-index: 3;
}

/* Cahaya emas dari bawah hero (senja di Musi) */
.wp-block-cover.ppd-hero .wp-block-cover__background {
	box-shadow: inset 0 -140px 140px -70px rgba(201, 162, 58, 0.22);
}

/* Partikel cahaya emas mengambang */
.wp-block-cover.ppd-hero .wp-block-cover__inner-container::after {
	content: "";
	position: absolute;
	top: 15%;
	right: 10%;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wp--preset--color--emas-terang);
	box-shadow:
		0 0 12px 3px rgba(240, 214, 138, 0.5),
		40px 60px 0 -2px rgba(240, 214, 138, 0.35),
		80px 20px 0 -1px rgba(240, 214, 138, 0.28),
		120px 80px 0 -3px rgba(240, 214, 138, 0.22),
		160px 40px 0 -2px rgba(240, 214, 138, 0.18);
	animation: ppd-berkelip 4s ease-in-out infinite alternate;
	pointer-events: none;
}

@keyframes ppd-berkelip {
	from { opacity: 0.4; transform: translateY(0); }
	to   { opacity: 1;   transform: translateY(-8px); }
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-cover.ppd-hero .wp-block-cover__inner-container::after {
		animation: none;
	}
}

@media (max-width: 781px) {
	.wp-block-cover.ppd-hero::after {
		width: 115%;
		right: -20%;
		opacity: 0.14;
	}
}

/* ---------- Search box hero ---------- */
.ppd-hero .wp-block-search__input {
	min-height: 52px;
	font-size: 1.05rem;
	border: 0;
	border-radius: 12px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
	transition: box-shadow 0.25s ease;
}

.ppd-hero .wp-block-search__input:focus {
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35), 0 0 0 2px rgba(201, 162, 58, 0.4);
}

.ppd-hero .wp-block-search__button {
	min-height: 52px;
	background: var(--wp--preset--color--emas);
	color: var(--wp--preset--color--primer);
	font-weight: 700;
	border-radius: 12px;
}

.ppd-hero .wp-block-search__button:hover,
.ppd-hero .wp-block-search__button:focus {
	background: var(--wp--preset--color--emas-muda);
	color: var(--wp--preset--color--primer);
}

.ppd-hero :where(a, button, input):focus-visible {
	outline-color: var(--wp--preset--color--emas-muda);
}

.ppd-hero-tombol {
	margin-top: var(--wp--preset--spacing--40);
}

/* ---------- Tombol emas ---------- */
.ppd-tombol-emas .wp-block-button__link {
	background: var(--wp--preset--color--emas);
	color: var(--wp--preset--color--primer);
}

.ppd-tombol-emas .wp-block-button__link:hover,
.ppd-tombol-emas .wp-block-button__link:focus {
	background: var(--wp--preset--color--emas-muda);
	color: var(--wp--preset--color--primer);
}

.ppd-tombol-terang.is-style-outline .wp-block-button__link {
	color: #ffffff;
	border-color: rgba(255, 255, 255, 0.7);
	background: transparent;
}

.ppd-tombol-terang.is-style-outline .wp-block-button__link:hover,
.ppd-tombol-terang.is-style-outline .wp-block-button__link:focus {
	color: var(--wp--preset--color--primer);
	background: #ffffff;
	border-color: #ffffff;
}

/* ---------- Scroll halus ---------- */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* Jangkar beranda (#tempat, #sejarah, #jelajahi) tidak tertutup header sticky.
   --ppd-tinggi-header diisi interaksi.js dari tinggi header sebenarnya; 8rem cadangan bila JS mati. */
html {
	scroll-padding-top: var(--ppd-tinggi-header, 8rem);
}

/* ---------- Ornamen judul seksi ---------- */
.ppd-judul-seksi::after,
.ppd-daftar__judul::after {
	content: "";
	display: block;
	width: 88px;
	height: 14px;
	margin-top: 0.8rem;
	background: url(assets/img/ornamen-judul.svg) 0 0 / 88px 14px no-repeat;
	opacity: 0.9;
}

/* ---------- Kartu kategori: hover mengambang + garis emas animasi ---------- */
.ppd-kategori-kartu {
	position: relative;
	border-style: solid;
	border-top: 3px solid var(--wp--preset--color--emas) !important;
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
	            box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.ppd-kategori-kartu:hover,
.ppd-kategori-kartu:focus-within {
	border-color: var(--wp--preset--color--emas) !important;
	transform: translateY(-4px);
	box-shadow:
		0 2px 4px rgba(10, 31, 51, 0.05),
		0 12px 28px rgba(10, 31, 51, 0.13),
		0 32px 64px rgba(10, 31, 51, 0.09);
}

@media (prefers-reduced-motion: reduce) {
	.ppd-kategori-kartu:hover {
		transform: none;
	}
}

.ppd-kategori-kartu h3 a {
	text-decoration: none;
	color: var(--wp--preset--color--primer);
	transition: color 0.2s ease;
}

.ppd-kategori-kartu:hover h3 a {
	color: var(--wp--preset--color--aksen);
}

.ppd-kategori-kartu h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* ---------- Halaman detail: kolom samping sticky ---------- */
@media (max-width: 781px) {
	.ppd-kolom-entri {
		display: flex;
		flex-direction: column;
	}
	.ppd-kolom-samping {
		order: -1;
	}
}

@media (min-width: 782px) {
	.ppd-kolom-samping > * {
		position: sticky;
		top: 1.5rem;
	}
}

.wp-block-post-content img {
	height: auto;
}

.wp-block-post-featured-image img {
	border-radius: 12px;
	transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.wp-block-palembangpedia-kartu:hover .wp-block-post-featured-image img {
	transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-post-featured-image img {
		transition: none;
	}
	.wp-block-palembangpedia-kartu:hover .wp-block-post-featured-image img {
		transform: none;
	}
}

/* ---------- Footer: gelap elegan + pita pucuk rebung ---------- */
.ppd-footer {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--wp--preset--color--primer) !important;
}

.ppd-footer::before,
.ppd-footer::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	pointer-events: none;
}

.ppd-footer::before {
	top: 0;
	height: 24px;
	background: url(assets/img/pucuk-rebung.svg) 0 0 / 48px 24px repeat-x;
	z-index: 1;
}

.ppd-footer::after {
	top: 24px;
	bottom: 0;
	background: url(assets/img/songket.svg) 0 0 / 56px 56px repeat;
	opacity: 0.04;
	z-index: 0;
}

.ppd-footer > * {
	position: relative;
	z-index: 2;
}

.ppd-logo-footer {
	margin: 0 0 0.5rem;
}

.ppd-logo-footer img {
	display: block;
	max-width: 100%;
	height: auto;
}

.ppd-footer h2 {
	color: var(--wp--preset--color--emas-muda) !important;
}

.ppd-footer a {
	color: inherit;
}

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

.ppd-footer li {
	margin-bottom: 0.35rem;
}

.ppd-footer a:hover,
.ppd-footer a:focus {
	color: #ffffff;
}

.ppd-footer :where(a, button):focus-visible {
	outline-color: var(--wp--preset--color--emas-muda);
}

/* ---------- CTA: kartu mengambang ---------- */
.ppd-cta {
	position: relative;
	isolation: isolate;
	border-radius: 20px;
	margin: 0 1.25rem;
	box-shadow:
		0 1px 2px rgba(10, 31, 51, 0.04),
		0 8px 24px rgba(10, 31, 51, 0.07);
}

.ppd-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: url(assets/img/songket.svg) 0 0 / 48px 48px repeat;
	opacity: 0.1;
	-webkit-mask-image: radial-gradient(ellipse at center, transparent 45%, #000 100%);
	mask-image: radial-gradient(ellipse at center, transparent 45%, #000 100%);
	pointer-events: none;
}

@media (max-width: 781px) {
	.ppd-cta {
		margin: 0 0.5rem;
		border-radius: 14px;
	}
}

::selection {
	background: var(--wp--preset--color--emas-muda);
	color: var(--wp--preset--color--primer);
}

/* ---------- Bagian beranda disembunyikan bila belum ada konten ---------- */
.ppd-seksi:not(:has(.wp-block-palembangpedia-daftar-konten)) {
	display: none;
}

/* ============================================================
   TIPOGRAFI SERIF: nuansa editorial
   ============================================================ */
h1, h2, h3, .wp-block-heading {
	font-family: var(--wp--preset--font-family--judul);
}

/* Drop cap: huruf pertama besar ala majalah */
.wp-block-post-content > p:first-of-type::first-letter {
	font-family: var(--wp--preset--font-family--judul);
	font-weight: 700;
	font-size: 3.6em;
	line-height: 0.82;
	float: left;
	margin: 0.08em 0.08em 0 0;
	color: var(--wp--preset--color--primer);
}

@media (max-width: 599px) {
	.wp-block-post-content > p:first-of-type::first-letter {
		font-size: 3em;
	}
}

/* Kutipan: garis emas, serif italic */
.wp-block-quote {
	border-left: 3px solid var(--wp--preset--color--emas);
	padding-left: 1.5rem;
	font-family: var(--wp--preset--font-family--judul);
	font-style: italic;
}

.wp-block-quote cite {
	font-family: var(--wp--preset--font-family--sistem);
	font-style: normal;
	color: var(--wp--preset--color--teks-redup);
}

/* Garis pemisah */
.wp-block-separator {
	border-color: var(--wp--preset--color--garis);
}

.wp-block-separator.is-style-wide {
	border-top-width: 1px;
}

/* Angka tabular */
.wp-block-post-terms a,
.wp-block-post-date {
	font-variant-numeric: tabular-nums;
}

/* ============================================================
   INTERAKSI: SCROLL REVEAL (JS-driven, CSS-only fallback)
   Elemen muncul halus saat masuk viewport.
   ============================================================ */
.ppd-muncul {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
	            transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.ppd-muncul.ppd-tampil {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.ppd-muncul {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ============================================================
   NAVIGASI: garis emas animasi
   ============================================================ */
.wp-block-navigation-item__content {
	position: relative;
	transition: color 0.2s ease;
}

.wp-block-navigation .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	bottom: 2px;
	left: 50%;
	width: 0;
	height: 2px;
	background: linear-gradient(90deg,
		var(--wp--preset--color--emas),
		var(--wp--preset--color--emas-terang));
	border-radius: 1px;
	transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1),
	            left 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.wp-block-navigation .wp-block-navigation-item__content:hover::after,
.wp-block-navigation .current-menu-item .wp-block-navigation-item__content::after {
	width: 100%;
	left: 0;
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-navigation .wp-block-navigation-item__content::after {
		transition: none;
	}
}

/* ============================================================
   TOMBOL: pil, bayangan, angkat saat hover
   ============================================================ */
.wp-block-button__link {
	transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
	            box-shadow 0.25s ease,
	            background-color 0.2s ease;
	will-change: transform;
}

.wp-block-button__link:hover {
	transform: translateY(-2px);
}

.wp-block-button__link:active {
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-button__link:hover,
	.wp-block-button__link:active {
		transform: none;
	}
}