/*
Theme Name: PRIYANATA BATIK
Theme URI: https://priyanata.duniaparenting.id/
Description: Tema katalog untuk Priyanata Batik. Menampilkan produk batik, kategori, halaman detail, dan pemesanan lewat WhatsApp. Bekerja bersama plugin Priyanata Catalog.
Author: Priyanata Batik
Version: 2.0.1
Requires at least: 6.5
Requires PHP: 8.0
Template: twentytwentyfive
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: priyanata-batik
Tags: block-templates, full-site-editing, e-commerce, one-column, custom-colors
*/

/* Nuansa logo: emas tempa di atas latar gelap, badan halaman kertas hangat. */

body {
	background-color: var(--wp--preset--color--kertas, #fcf9f4);
}

.pb-catalog,
.pb-detail,
.pb-hero,
.pb-kategori-grid {
	--pb-ink: var(--wp--preset--color--tinta, #1d1712);
	--pb-muted: var(--wp--preset--color--abu, #7c6e5d);
	--pb-line: var(--wp--preset--color--garis, #e8dfd1);
	--pb-paper: var(--wp--preset--color--kertas, #fcf9f4);
	--pb-accent: var(--wp--preset--color--sogan, #a97c2f);
	--pb-emas: var(--wp--preset--color--emas, #c69b3f);
	--pb-emas-terang: var(--wp--preset--color--emas-terang, #f0d48a);
	--pb-gelap: var(--wp--preset--color--gelap, #17120e);
}

/* -------------------------------------------------------------------------
 * Kepala halaman: mengambang, buram, menepi saat digulir
 * ---------------------------------------------------------------------- */

/* Header mengambang di atas konten. Tingginya diukur skrip lalu dibagikan
   lewat --pb-header-h; nilai di sini hanya cadangan bila skrip belum jalan. */
:root {
	--pb-header-h: 4.5rem;
}

.pb-header {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 100;
	padding-top: 0.9rem;
	padding-bottom: 0.9rem;
	border-bottom: 1px solid rgba(198, 155, 63, 0.18);
	background-color: rgba(23, 18, 14, 0.32);
	transition:
		transform 0.34s cubic-bezier(0.4, 0, 0.2, 1),
		background-color 0.24s ease,
		border-color 0.24s ease,
		box-shadow 0.16s ease,
		backdrop-filter 0.24s ease;
}

/* Buram hanya dipasang bila peramban benar-benar mendukungnya. Tanpa penjaga
   ini, peramban lama menampilkan header bening di atas foto dan tulisannya
   nyaris tidak terbaca. */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
	.pb-header {
		-webkit-backdrop-filter: blur(14px) saturate(140%);
		backdrop-filter: blur(14px) saturate(140%);
	}
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.pb-header {
		background-color: rgba(23, 18, 14, 0.82);
	}
}

/* Sudah tidak di pucuk halaman: latar sedikit dipekatkan agar tetap terbaca
   di atas isi yang terang. */
.pb-header.is-melayang {
	background-color: rgba(23, 18, 14, 0.55);
	border-bottom-color: rgba(198, 155, 63, 0.26);
}

/* Digulir turun: header menepi ke atas. */
.pb-header.is-tersembunyi {
	transform: translateY(-100%);
}

/* Digulir naik: kembali muncul dengan bayangan yang datang cepat. */
.pb-header.is-muncul {
	box-shadow: 0 12px 30px rgba(12, 9, 7, 0.45);
}

/* Kursor masuk area header: pekat, tanpa buram, tanpa tembus pandang. */
.pb-header.is-solid,
.pb-header:hover {
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	background-color: var(--wp--preset--color--gelap, #17120e);
	border-bottom-color: rgba(198, 155, 63, 0.4);
	box-shadow: 0 10px 26px rgba(12, 9, 7, 0.4);
}

/* Header tidak lagi memakan ruang di aliran halaman, jadi isi halaman yang
   bukan beranda perlu diberi ruang setinggi header. Beranda dibiarkan nol
   supaya hero tampil penuh di belakang header. */
.wp-site-blocks > main {
	padding-top: var(--pb-header-h);
}

.wp-site-blocks > main.pb-front {
	padding-top: 0;
}

/* Di beranda, isi hero diberi jarak tambahan agar label teratas tidak
   tertutup header. */
.pb-front .pb-hero {
	padding-top: calc(clamp(3rem, 8vw, 6rem) + var(--pb-header-h));
}

.pb-header-bar {
	gap: 1rem 1.5rem;
}

.pb-brand {
	gap: 0.75rem;
	align-items: center;
}

/* Logo diukur dari tingginya supaya pas dengan header apa adanya,
   berdampingan dengan tulisan nama situs. */
.pb-header .wp-block-site-logo img {
	width: auto;
	height: 2.2rem;
	max-width: 40vw;
}

.pb-header .pb-site-title a {
	color: var(--wp--preset--color--emas-terang, #f0d48a) !important;
	font-size: clamp(1.05rem, 3vw, 1.4rem);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-decoration: none;
	text-transform: uppercase;
}


.pb-header .pb-nav a {
	color: rgba(255, 255, 255, 0.86) !important;
	font-size: 0.92rem;
	letter-spacing: 0.04em;
	text-decoration: none;
}

.pb-header .pb-nav a:hover,
.pb-header .pb-nav .current-menu-item a {
	color: var(--wp--preset--color--emas-terang, #f0d48a) !important;
}

.pb-header .wp-block-navigation__responsive-container-open svg,
.pb-header .wp-block-navigation__responsive-container-close svg {
	fill: var(--wp--preset--color--emas-terang, #f0d48a);
}

.pb-header .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--gelap, #17120e);
}

.pb-header .wp-block-navigation__responsive-container.is-menu-open a {
	color: var(--wp--preset--color--emas-terang, #f0d48a) !important;
	font-size: 1.15rem;
}

/* Tanpa animasi: header tetap di tempatnya, hanya latarnya yang berganti. */
@media (prefers-reduced-motion: reduce) {
	.pb-header {
		transition: background-color 0.24s ease;
		transform: none !important;
	}
}
/* -------------------------------------------------------------------------
 * Halaman depan
 * ---------------------------------------------------------------------- */

.pb-front .pb-full-bleed {
	margin-top: 0;
}

.pb-section {
	margin-top: clamp(3rem, 7vw, 5rem);
}

.pb-section-title {
	margin: 0 0 0.5rem;
	font-size: clamp(1.5rem, 4vw, 2.1rem);
}

.pb-section-lead {
	margin: 0 0 1.75rem;
	max-width: 52ch;
	color: var(--wp--preset--color--abu, #7c6e5d);
}

.pb-section-more {
	margin-top: 1.75rem;
	font-weight: 600;
}

.pb-section-more a {
	text-decoration: none;
}

.pb-section-more a:hover {
	text-decoration: underline;
}

.pb-front > .pb-section:last-child {
	margin-bottom: clamp(3rem, 7vw, 5rem);
}

/* -------------------------------------------------------------------------
 * Halaman katalog dan detail
 * ---------------------------------------------------------------------- */

.pb-page-header {
	margin-bottom: 2rem;
}

.pb-page-header h1 {
	margin: 0 0 0.5rem;
	font-size: clamp(1.8rem, 5vw, 2.6rem);
}

.pb-page-header p {
	margin: 0;
	max-width: 46ch;
	color: var(--wp--preset--color--abu, #7c6e5d);
}

.pb-detail-desc h2,
.pb-detail-desc h3 {
	margin-top: 1.5rem;
}

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

@media (max-width: 600px) {
	.pb-header {
		padding-top: 0.6rem;
		padding-bottom: 0.6rem;
	}

	.pb-header .wp-block-site-logo img {
		height: 1.6rem;
	}

	.pb-header-bar {
		flex-wrap: nowrap;
	}
}

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

.pb-footer {
	box-sizing: border-box;
	margin-top: clamp(3rem, 8vw, 6rem);
	padding-top: clamp(2.5rem, 6vw, 4rem);
	padding-bottom: 1.5rem;
	color: rgba(255, 255, 255, 0.72);
}

.pb-footer *,
.pb-footer *::before,
.pb-footer *::after {
	box-sizing: border-box;
}

.pb-footer-atas {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr;
	gap: clamp(1.75rem, 4vw, 3.5rem);
	align-items: start;
	padding-bottom: clamp(2rem, 5vw, 3rem);
	border-bottom: 1px solid rgba(198, 155, 63, 0.24);
}

/* Logo tidak ditampilkan di footer atas permintaan; nama situs yang
   menjadi penanda mereknya di sini. */
.pb-footer .wp-block-site-logo {
	display: none;
}

.pb-footer-nama a {
	color: var(--wp--preset--color--emas-terang, #f0d48a) !important;
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-decoration: none;
	text-transform: uppercase;
}


.pb-footer-tagline {
	margin: 0.85rem 0 0;
	max-width: 42ch;
	color: rgba(255, 255, 255, 0.66);
	font-size: 0.92rem;
	line-height: 1.65;
}

.pb-footer-judul {
	margin: 0 0 0.9rem;
	color: #fff !important;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.pb-footer .pb-tautan-daftar {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pb-footer .pb-tautan-daftar li {
	margin-bottom: 0.5rem;
}

.pb-footer a {
	color: rgba(255, 255, 255, 0.78);
	font-size: 0.93rem;
	text-decoration: none;
	transition: color 0.15s ease;
}

.pb-footer a:hover,
.pb-footer a:focus-visible {
	color: var(--wp--preset--color--emas-terang, #f0d48a);
}

.pb-footer-semua {
	margin: 1rem 0 0;
}

.pb-footer-semua a {
	color: var(--wp--preset--color--emas-terang, #f0d48a);
	font-weight: 600;
}

.pb-footer-teks {
	margin: 0 0 1.1rem;
	max-width: 34ch;
	color: rgba(255, 255, 255, 0.66);
	font-size: 0.92rem;
	line-height: 1.6;
}

.pb-footer .pb-wa-button {
	display: inline-flex;
	box-sizing: border-box;
	max-width: 100%;
}

.pb-footer-bawah {
	padding-top: 1.5rem;
}

.pb-footer-hak {
	margin: 0;
	color: rgba(255, 255, 255, 0.5);
	font-size: 0.83rem;
}

@media (max-width: 860px) {
	.pb-footer-atas {
		grid-template-columns: 1fr 1fr;
	}

	.pb-footer-merek {
		grid-column: 1 / -1;
	}
}

@media (max-width: 560px) {
	.pb-footer-atas {
		grid-template-columns: 1fr;
	}

	.pb-footer .pb-wa-button {
		width: 100%;
	}
}

/* Twenty Twenty-Five memberi jarak antarblok pada setiap anak langsung
   .wp-site-blocks, termasuk <main>. Jaraknya menyisakan pita berwarna kertas
   selebar satu block-gap tepat di bawah header. Hero dan halaman seharusnya
   menempel langsung ke header. */
.wp-site-blocks > main {
	margin-block-start: 0;
}

/* Tata letak "constrained" WordPress menengahkan setiap anak yang lebih sempit
   dari wadahnya, dan melakukannya dengan `margin-left: auto !important`.
   Paragraf yang sengaja diberi max-width karena itu tergeser ke tengah dan
   tidak lagi sejajar dengan judul di atasnya. Menandingi !important milik inti
   adalah satu-satunya cara mengembalikannya rata kiri. */
.wp-block-group.pb-section .pb-section-lead,
.wp-block-group.pb-page-header .pb-page-lead,
.wp-block-group.pb-page-header p {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* -------------------------------------------------------------------------
 * Footer muncul perlahan saat pertama kali terlihat
 *
 * Dipakai transisi, bukan animasi: keadaan akhir yang terpasang lewat kelas
 * is-tampil adalah "terlihat penuh". Jadi kalaupun transisinya tidak sempat
 * berjalan — tab di latar belakang, animasi dimatikan peramban — isi footer
 * tetap berakhir tampil, tidak pernah tertinggal tak kelihatan.
 *
 * Keadaan tersembunyi pun hanya dipasang oleh skrip (kelas pb-siap-tampil),
 * sehingga tanpa skrip footer tampil biasa.
 * ---------------------------------------------------------------------- */

.pb-footer.pb-siap-tampil .pb-footer-merek,
.pb-footer.pb-siap-tampil .pb-footer-kolom,
.pb-footer.pb-siap-tampil .pb-footer-bawah {
	opacity: 0;
	transform: translateY(18px);
	transition:
		opacity 0.75s cubic-bezier(0.2, 0.7, 0.3, 1),
		transform 0.75s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.pb-footer.pb-siap-tampil.is-tampil .pb-footer-merek,
.pb-footer.pb-siap-tampil.is-tampil .pb-footer-kolom,
.pb-footer.pb-siap-tampil.is-tampil .pb-footer-bawah {
	opacity: 1;
	transform: none;
}

.pb-footer.pb-siap-tampil .pb-footer-kolom:nth-of-type(2) {
	transition-delay: 0.12s;
}

.pb-footer.pb-siap-tampil .pb-footer-kolom:nth-of-type(3) {
	transition-delay: 0.24s;
}

.pb-footer.pb-siap-tampil .pb-footer-bawah {
	transition-delay: 0.36s;
}

@media (prefers-reduced-motion: reduce) {
	.pb-footer.pb-siap-tampil .pb-footer-merek,
	.pb-footer.pb-siap-tampil .pb-footer-kolom,
	.pb-footer.pb-siap-tampil .pb-footer-bawah {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* -------------------------------------------------------------------------
 * Pita ajakan kolaborasi: satu-satunya bagian beranda dengan latar gelap,
 * supaya menonjol di antara bagian-bagian terang lainnya.
 * ---------------------------------------------------------------------- */

.pb-band-kolaborasi {
	padding-top: clamp(3rem, 7vw, 5rem);
	padding-bottom: clamp(3rem, 7vw, 5rem);
	background-color: var(--wp--preset--color--gelap, #17120e);
}

.pb-band-kolaborasi .pb-section-title,
.pb-band-kolaborasi .pb-kolaborasi p {
	color: #fff;
}

.pb-band-kolaborasi .pb-kolaborasi p {
	color: rgba(255, 255, 255, 0.78);
}

/* -------------------------------------------------------------------------
 * Penanda [DATA DIPERLUKAN]: dibuat mencolok secara visual, bukan sekadar
 * teks kurung siku, supaya pemilik situs tidak sampai melewatkannya saat
 * meninjau halaman sebelum dipublikasikan secara luas.
 * ---------------------------------------------------------------------- */

.pb-catatan-data {
	padding: 0.75rem 1rem;
	border: 1px dashed #c9a227;
	border-radius: 8px;
	background: #fdf6e0;
	color: #6b5310;
	font-size: 0.92rem;
	font-style: italic;
}

/* -------------------------------------------------------------------------
 * Tautan "Kontak" ditonjolkan sebagai CTA utama navigasi, sesuai brief.
 * ---------------------------------------------------------------------- */

.pb-nav-cta > a {
	padding: 0.4rem 1rem !important;
	border: 1px solid var(--wp--preset--color--emas, #c69b3f);
	border-radius: 999px;
	color: var(--wp--preset--color--emas-terang, #f0d48a) !important;
}

.pb-nav-cta > a:hover {
	background: rgba(198, 155, 63, 0.14);
}