/*
 * Ritme vertikal antara header, isi, dan footer, sama di semua halaman
 * ber-section penuh (template dengan <main class="halaman-penuh">).
 *
 * Header melayang (fixed, tinggi 71px desktop / 81px mobile), jadi section
 * pertama memberi ruang 7rem (mobile) / 9rem (desktop) di atas isinya.
 * Section terakhir selalu 6rem sebelum footer; tepi bergelombang footer
 * (maks 3,5rem) muat di ruang itu.
 *
 * Lebar horizontal mengikuti header: isi maks 76rem, padding 1,25rem
 * (mobile) / 2rem (desktop >= 64rem). Section memakai nilai itu sendiri.
 */

.halaman-penuh > .wp-block-post-content > :first-child,
.halaman-penuh > :first-child:not(.wp-block-post-content) {
	padding-top: 7rem;
}

.halaman-penuh > .wp-block-post-content > :last-child,
.halaman-penuh > :last-child:not(.wp-block-post-content) {
	padding-bottom: 6rem;
}

@media (min-width: 64rem) {
	.halaman-penuh > .wp-block-post-content > :first-child,
	.halaman-penuh > :first-child:not(.wp-block-post-content) {
		padding-top: 9rem;
	}
}

/*
 * Ikon gambar kecil (core/image "is-resized" di dalam kotak ikon atau di
 * depan baris daftar). <img> tampil inline, jadi <figure> setinggi satu baris
 * teks dan ikon menempel di dasarnya: turun 3-8px dari tengah. Tanpa tinggi
 * baris, figure = tinggi ikon, sehingga flex memusatkan ikonnya sendiri.
 */
.halaman-penuh .wp-block-image.is-resized {
	line-height: 0;
}

/* Ikon di depan baris daftar (flex items-start): turunkan 2px ke tengah baris
   pertama teks. Kelas mt-0.5 di pola kalah oleh m-0, jadi ditegaskan di sini. */
.halaman-penuh .flex.items-start > .wp-block-image.is-resized {
	margin-top: 0.125rem;
}

/*
 * Dua tingkat lebar isi: kartu (Hero, Persyaratan, Harga) 76rem seperti
 * header/footer; kolom baca (Alur, FAQ, CTA) 48rem. Kontainer FAQ/CTA di
 * halaman layanan memakai max-w-3xl + px-5, yang membuat isinya 44rem;
 * padding ditambahkan di luar 48rem agar sama dengan kolom Alur.
 */
.halaman-penuh .mx-auto.max-w-3xl.px-5 {
	max-width: calc(48rem + 2.5rem);
}

@media (min-width: 64rem) {
	.halaman-penuh .mx-auto.max-w-3xl.px-5 {
		max-width: calc(48rem + 4rem);
	}
}

/*
 * FAQ halaman layanan (core/details) disamakan dengan FAQ beranda: tanpa
 * segitiga bawaan browser, ikon plus di kanan yang berputar jadi silang,
 * dan transisi buka/tutup (Chrome/Edge 131+, lainnya membuka seketika).
 */
.halaman-penuh details.wp-block-details:not(.faq__item) {
	interpolate-size: allow-keywords;
}

.halaman-penuh details.wp-block-details:not(.faq__item) > summary {
	position: relative;
	display: block;
	padding-right: 2.75rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	list-style: none;
}

.halaman-penuh details.wp-block-details:not(.faq__item) > summary::-webkit-details-marker {
	display: none;
}

.halaman-penuh details.wp-block-details:not(.faq__item) > summary::after {
	content: "";
	position: absolute;
	right: 0;
	top: 50%;
	width: 1.5rem;
	height: 1.5rem;
	margin-top: -0.75rem;
	border-radius: 999px;
	color: var(--wp--preset--color--primary-800);
	background:
		linear-gradient(currentColor, currentColor) center / 0.625rem 2px no-repeat,
		linear-gradient(currentColor, currentColor) center / 2px 0.625rem no-repeat,
		var(--wp--preset--color--primary-50);
	transition: transform 0.25s ease;
}

.halaman-penuh details.wp-block-details[open]:not(.faq__item) > summary::after {
	transform: rotate(45deg);
}

.halaman-penuh details.wp-block-details:not(.faq__item) > summary:hover {
	color: var(--wp--preset--color--primary-800);
}

.halaman-penuh details.wp-block-details:not(.faq__item) > summary:focus-visible {
	outline: 3px solid var(--wp--preset--color--primary-700);
	outline-offset: 4px;
	border-radius: 0.375rem;
}

.halaman-penuh details.wp-block-details:not(.faq__item)::details-content {
	block-size: 0;
	overflow: hidden;
	opacity: 0;
	transition: block-size 0.3s ease, opacity 0.3s ease, content-visibility 0.3s allow-discrete;
}

.halaman-penuh details.wp-block-details[open]:not(.faq__item)::details-content {
	block-size: auto;
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.halaman-penuh details.wp-block-details:not(.faq__item) > summary::after,
	.halaman-penuh details.wp-block-details:not(.faq__item)::details-content {
		transition: none;
	}
}