/*
 * GBI YABES - Warm & Welcoming restyle
 * Visual-only overrides. No content, menus, or images are changed.
 * Palette: cream / warm brown / terracotta / soft gold
 */

:root {
	--gy-cream: #fbf6ee;
	--gy-ivory: #fffdf8;
	--gy-sand: #f1e6d4;
	--gy-brown: #3e2a22;
	--gy-brown-soft: #5a4036;
	--gy-text: #4a3a33;
	--gy-terracotta: #b4533c;
	--gy-terracotta-dark: #8f3f2c;
	--gy-gold: #c58b3a;
	--gy-gold-soft: #e6c48a;
	--gy-radius: 14px;
	--gy-shadow: 0 10px 30px rgba(62, 42, 34, 0.12);
}

/* ---------- Base ---------- */
html body {
	background-color: var(--gy-cream) !important;
	color: var(--gy-text);
	font-family: 'Nunito', 'Segoe UI', sans-serif;
	-webkit-font-smoothing: antialiased;
}

html body .pagelayer-text-holder,
html body .pagelayer-text-holder p,
html body .entry-content p,
html body .entry-content li {
	font-family: 'Nunito', 'Segoe UI', sans-serif !important;
	line-height: 1.85;
}

html body .entry-content a,
html body .pagelayer-text-holder a {
	color: var(--gy-terracotta);
	text-decoration-color: var(--gy-gold-soft);
	text-underline-offset: 3px;
	transition: color .25s ease;
}
html body .entry-content a:hover,
html body .pagelayer-text-holder a:hover {
	color: var(--gy-terracotta-dark);
}

html body ::selection {
	background: var(--gy-gold-soft);
	color: var(--gy-brown);
}

/* ---------- Headings (serif for warmth) ---------- */
html body .pagelayer-heading .pagelayer-heading-holder,
html body .pagelayer-heading .pagelayer-heading-holder *,
html body .entry-title,
html body .entry-content h1,
html body .entry-content h2,
html body .entry-content h3,
html body .entry-content h4 {
	font-family: 'Lora', Georgia, 'Times New Roman', serif !important;
	letter-spacing: 0.2px !important;
}

/* Section headings on light background */
html body .entry-content .pagelayer-heading .pagelayer-heading-holder,
html body .entry-content .pagelayer-heading .pagelayer-heading-holder * {
	color: var(--gy-brown) !important;
}

/* Page banners (rows with a photo + dark overlay, e.g. About): keep text light,
   and tint the overlay warm brown instead of pure black */
html body .entry-content .pagelayer-row > .pagelayer-background-overlay {
	background-color: var(--gy-brown) !important;
	opacity: 0.6 !important;
}
html body .entry-content .pagelayer-row:has(> .pagelayer-background-overlay) .pagelayer-heading .pagelayer-heading-holder,
html body .entry-content .pagelayer-row:has(> .pagelayer-background-overlay) .pagelayer-heading .pagelayer-heading-holder *,
html body .entry-content .pagelayer-row:has(> .pagelayer-background-overlay) .pagelayer-text-holder,
html body .entry-content .pagelayer-row:has(> .pagelayer-background-overlay) .pagelayer-text-holder p,
html body .entry-content .pagelayer-row:has(> .pagelayer-background-overlay) .pagelayer-text-holder p span {
	color: #fffdf8 !important;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

/* ---------- Decorative dividers ---------- */
html body .pagelayer-divider-holder .pagelayer-divider-seperator {
	border-top-color: var(--gy-gold) !important;
	border-top-width: 3px !important;
	border-radius: 3px;
}

/* ---------- Header / navigation ---------- */
html body .p-3v36957 > .pagelayer-background-overlay {
	background: linear-gradient(90deg, #3e2a22 0%, #5a4036 100%) !important;
	opacity: 0.94 !important;
}

html body .pagelayer-header .pagelayer-wp_menu-ul > li > a,
html body .pagelayer-header .pagelayer-wp_menu-ul > li a:first-child {
	color: #fbf6ee !important;
	font-family: 'Nunito', sans-serif !important;
	letter-spacing: 0.8px !important;
	font-weight: 700 !important;
}
html body .pagelayer-header .pagelayer-wp_menu-ul > li > a:hover,
html body .pagelayer-header .pagelayer-wp_menu-ul > li.pagelayer-active-sub-menu > a:hover {
	color: var(--gy-gold-soft) !important;
}
html body .pagelayer-header .pagelayer-wp_menu-ul > li.current-menu-item > a {
	color: var(--gy-gold) !important;
	box-shadow: inset 0 -2px 0 var(--gy-gold);
}

/* Dropdown submenu */
html body .pagelayer-header .pagelayer-wp-menu-container ul.sub-menu {
	background-color: var(--gy-brown) !important;
	border-radius: 0 0 var(--gy-radius) var(--gy-radius);
	box-shadow: var(--gy-shadow);
	overflow: hidden;
}
html body .pagelayer-header .pagelayer-wp-menu-container ul.sub-menu > li a {
	color: #fbf6ee !important;
	transition: background .25s ease, color .25s ease;
}
html body .pagelayer-header .pagelayer-wp-menu-container ul.sub-menu > li a:hover {
	background: rgba(197, 139, 58, 0.25);
	color: var(--gy-gold-soft) !important;
}

/* Mobile menu */
html body .pagelayer-header .pagelayer-primary-menu-bar i {
	background-color: var(--gy-gold) !important;
	color: var(--gy-brown) !important;
	border-radius: 8px;
}
html body .pagelayer-header .pagelayer-menu-type-dropdown {
	background-color: var(--gy-brown) !important;
}

/* ---------- Hero ---------- */
html body .p-cge9338 > .pagelayer-background-overlay {
	background: linear-gradient(90deg, rgba(251, 246, 238, 0.92) 0%, rgba(251, 246, 238, 0.55) 55%, rgba(251, 246, 238, 0.15) 100%) !important;
	opacity: 1 !important;
}
html body .p-cge9338 .pagelayer-heading-holder,
html body .p-cge9338 .pagelayer-heading-holder * {
	color: var(--gy-brown) !important;
}
html body .p-cge9338 .pagelayer-text-holder p,
html body .p-cge9338 .pagelayer-text-holder p span {
	color: var(--gy-brown-soft) !important;
	font-weight: 600;
}

/* ---------- Buttons ---------- */
html body .pagelayer-btn .pagelayer-btn-holder {
	background-color: var(--gy-terracotta) !important;
	border-color: var(--gy-terracotta) !important;
	color: #fffdf8 !important;
	border-radius: 999px !important;
	-webkit-border-radius: 999px !important;
	box-shadow: 0 6px 16px rgba(180, 83, 60, 0.28);
	transition: transform .25s ease, background-color .25s ease, box-shadow .25s ease !important;
}
html body .pagelayer-btn .pagelayer-btn-holder:hover {
	background-color: var(--gy-gold) !important;
	border-color: var(--gy-gold) !important;
	color: var(--gy-brown) !important;
	transform: translateY(-2px);
	box-shadow: 0 10px 22px rgba(197, 139, 58, 0.35);
}

/* ---------- Images & media ---------- */
html body .entry-content .pagelayer-img,
html body .entry-content .pagelayer-image-slider-div,
html body .entry-content iframe,
html body .entry-content video {
	border-radius: var(--gy-radius);
}
html body .entry-content .pagelayer-image-slider-div {
	overflow: hidden;
	box-shadow: var(--gy-shadow);
}

/* Slider arrows */
html body .pagelayer-owl-prev,
html body .pagelayer-owl-next {
	background-color: var(--gy-brown) !important;
	color: var(--gy-cream) !important;
}

/* ---------- Testimonials / cards ---------- */
html body .pagelayer-testimonial,
html body .pagelayer-testimonial-holder {
	background: var(--gy-ivory);
	border-radius: var(--gy-radius);
}
html body .pagelayer-testimonial-author {
	color: var(--gy-terracotta) !important;
	font-family: 'Lora', Georgia, serif !important;
}

/* ---------- Posts / archives ---------- */
html body .site-main article {
	border-radius: var(--gy-radius);
}
html body .entry-title a {
	color: var(--gy-brown);
}
html body .entry-title a:hover {
	color: var(--gy-terracotta);
}

/* ---------- Forms ---------- */
html body input[type="text"],
html body input[type="email"],
html body input[type="url"],
html body input[type="tel"],
html body input[type="search"],
html body textarea,
html body select {
	background: var(--gy-ivory);
	border: 1px solid var(--gy-sand);
	border-radius: 10px;
	padding: 10px 14px;
	color: var(--gy-text);
	font-family: 'Nunito', sans-serif;
	transition: border-color .25s ease, box-shadow .25s ease;
}
html body input:focus,
html body textarea:focus,
html body select:focus {
	outline: none;
	border-color: var(--gy-gold);
	box-shadow: 0 0 0 3px rgba(197, 139, 58, 0.22);
}
html body input[type="submit"],
html body button[type="submit"] {
	background: var(--gy-terracotta);
	color: #fffdf8;
	border: none;
	border-radius: 999px;
	padding: 10px 26px;
	font-weight: 700;
	cursor: pointer;
	transition: background .25s ease, transform .25s ease;
}
html body input[type="submit"]:hover,
html body button[type="submit"]:hover {
	background: var(--gy-gold);
	color: var(--gy-brown);
	transform: translateY(-2px);
}

/* ---------- Footer ---------- */
html body .pagelayer-footer .p-eot5064,
html body .pagelayer-footer > .pagelayer-row:first-of-type {
	background: var(--gy-brown) !important;
}
html body .pagelayer-footer .p-uny8070,
html body .pagelayer-footer > .pagelayer-row:last-of-type {
	background: #2e1f19 !important;
}
html body .pagelayer-footer .pagelayer-heading-holder,
html body .pagelayer-footer .pagelayer-heading-holder *,
html body .pagelayer-footer .pagelayer-wp-title-heading {
	color: var(--gy-gold) !important;
	font-family: 'Lora', Georgia, serif !important;
}
html body .pagelayer-footer .pagelayer-list-item,
html body .pagelayer-footer .pagelayer-list-url {
	color: #f1e6d4 !important;
	transition: color .25s ease;
}
html body .pagelayer-footer .pagelayer-list-url:hover .pagelayer-list-item {
	color: var(--gy-gold-soft) !important;
}
html body .pagelayer-footer .pagelayer-list-icon {
	color: var(--gy-gold) !important;
}
html body .pagelayer-footer .pagelayer-icon-holder {
	background-color: var(--gy-gold) !important;
}
html body .pagelayer-footer .pagelayer-icon-holder:hover {
	background-color: var(--gy-terracotta) !important;
}
html body .pagelayer-footer .pagelayer-social-fa {
	color: var(--gy-brown) !important;
}
html body .pagelayer-footer .pagelayer-icon-holder:hover .pagelayer-social-fa {
	color: #fffdf8 !important;
}

/* ---------- Scroll-to-top & misc ---------- */
html body .scroll-to-top,
html body #pfx-scrolltop {
	background: var(--gy-terracotta) !important;
	border-radius: 50%;
}

/* ---------- Mobile polish ---------- */
@media (max-width: 480px) {
	html body .p-cge9338 > .pagelayer-background-overlay {
		background: rgba(251, 246, 238, 0.82) !important;
	}
	html body .entry-content .pagelayer-img {
		border-radius: 10px;
	}
}

/* ---------- Photos: framed, consistent, warm ---------- */
/* Single images, gallery images, and editor images get a soft print-style frame */
html body .entry-content .pagelayer-image-holder .pagelayer-img,
html body .entry-content .wp-block-image img,
html body .entry-content .gallery img {
	box-sizing: border-box;
	max-width: 100%;
	height: auto;
	border: 5px solid var(--gy-ivory);
	border-radius: var(--gy-radius);
	box-shadow: 0 12px 32px rgba(62, 42, 34, 0.16);
	filter: saturate(1.06) contrast(1.02) sepia(0.05);
	transition: transform .5s ease, box-shadow .5s ease, filter .5s ease !important;
}
html body .entry-content .pagelayer-image-holder .pagelayer-img:hover,
html body .entry-content .wp-block-image img:hover,
html body .entry-content .gallery img:hover {
	transform: translateY(-4px) scale(1.012);
	box-shadow: 0 18px 40px rgba(62, 42, 34, 0.24);
	filter: saturate(1.12) contrast(1.03) sepia(0.03);
}

/* Photo slider: one framed window, every slide the same height, cropped to fit */
html body .entry-content .pagelayer-image-slider-div {
	border: 6px solid var(--gy-ivory);
	border-radius: 18px;
	overflow: hidden;
	background: var(--gy-sand);
	box-shadow: 0 16px 40px rgba(62, 42, 34, 0.2);
}
html body .entry-content .pagelayer-image-slider-ul .pagelayer-slider-item .pagelayer-img {
	display: block;
	width: 100%;
	height: clamp(240px, 46vw, 540px);
	object-fit: cover;
	object-position: center 28%;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	filter: saturate(1.06) contrast(1.02) sepia(0.05);
}

@media (max-width: 480px) {
	html body .entry-content .pagelayer-image-holder .pagelayer-img,
	html body .entry-content .wp-block-image img,
	html body .entry-content .gallery img {
		border-width: 4px;
	}
	html body .entry-content .pagelayer-image-slider-div {
		border-width: 4px;
		border-radius: 14px;
	}
	html body .entry-content .pagelayer-image-slider-ul .pagelayer-slider-item .pagelayer-img {
		height: 240px;
	}
}

/* =====================================================
   Renungan Harian: daftar artikel + halaman artikel
   (styling only; all titles, dates, excerpts and text stay as they are)
   ===================================================== */

/* ---------- Judul halaman daftar / arsip ---------- */
html body .pagelayer-archive-title {
	font-family: 'Lora', Georgia, serif !important;
	font-size: 34px !important;
	font-weight: 700;
	color: var(--gy-brown);
	letter-spacing: 0.2px;
}
html body .pagelayer-archive-title::after {
	content: "";
	display: block;
	width: 64px;
	height: 3px;
	margin-top: 14px;
	background: var(--gy-gold);
	border-radius: 3px;
}

/* ---------- Kartu artikel ---------- */
html body .pagelayer-posts-container .pagelayer-wposts-col {
	display: flex;
	flex-direction: column;
	background: var(--gy-ivory) !important;
	border: 1px solid rgba(197, 139, 58, 0.2);
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 8px 24px rgba(62, 42, 34, 0.1);
	transition: transform .35s ease, box-shadow .35s ease;
}
html body .pagelayer-posts-container .pagelayer-wposts-col:hover {
	transform: translateY(-6px);
	box-shadow: 0 18px 38px rgba(62, 42, 34, 0.18);
}
html body .pagelayer-wposts-post {
	display: flex;
	flex-direction: column;
	height: 100%;
}
html body .pagelayer-wposts-featured {
	overflow: hidden;
}

/* Gambar kartu: rasio seragam */
html body .pagelayer-wposts-thumb {
	padding: 0 !important;
	aspect-ratio: 16 / 9;
	background-size: cover;
	background-position: center;
	transition: transform .6s ease;
}
html body .pagelayer-wposts-col:hover .pagelayer-wposts-thumb {
	transform: scale(1.05);
}

/* Kartu tanpa foto (placeholder abu-abu bawaan) diganti latar hangat dengan salib */
html body .pagelayer-wposts-thumb[style*="no_screenshot"] {
	position: relative;
	background:
		radial-gradient(circle at 82% 18%, rgba(255, 253, 248, 0.38) 0, rgba(255, 253, 248, 0) 46%),
		linear-gradient(135deg, #c58b3a 0%, #b4533c 100%) !important;
}
html body .pagelayer-wposts-thumb[style*="no_screenshot"]::after {
	content: "";
	position: absolute;
	inset: 0;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><path d='M27 6h10v18h18v10H37v24H27V34H9V24h18z' fill='%23fffdf8' fill-opacity='.88'/></svg>") center / 54px no-repeat;
}

/* ---------- Isi kartu ---------- */
html body .pagelayer-wposts-content {
	flex: 1;
	padding: 18px 22px 24px !important;
}
html body .pagelayer-wposts-title {
	font-family: 'Lora', Georgia, serif !important;
	font-size: 19px !important;
	font-weight: 700 !important;
	line-height: 1.38 !important;
	color: var(--gy-brown) !important;
	transition: color .25s ease;
}
html body .pagelayer-wposts-col:hover .pagelayer-wposts-title {
	color: var(--gy-terracotta) !important;
}
html body .pagelayer-wposts-meta {
	margin: 10px 0 12px;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.3px;
	color: #8a7466;
}
html body .pagelayer-wposts-meta a {
	color: inherit;
	text-decoration: none;
}
html body .pagelayer-wposts-meta a:hover {
	color: var(--gy-terracotta);
}
html body .pagelayer-wposts-sep {
	margin: 0 5px;
	color: var(--gy-gold-soft);
	font-weight: 400;
}
html body .pagelayer-wposts-meta .pagelayer-wposts-sep:last-child {
	display: none;
}
html body .pagelayer-wposts-excerpt {
	font-size: 15px;
	line-height: 1.7;
	color: var(--gy-text);
}

/* ---------- Nomor halaman ---------- */
html body .pagelayer-pagination {
	margin-top: 44px;
}
html body .pagelayer-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	margin: 0 4px 10px;
	padding: 0 14px;
	background: var(--gy-ivory);
	border: 1px solid var(--gy-sand);
	border-radius: 999px;
	color: var(--gy-brown);
	font-weight: 700;
	text-decoration: none;
	transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
html body .pagelayer-pagination a.page-numbers:hover {
	background: var(--gy-gold-soft);
	border-color: var(--gy-gold);
	transform: translateY(-2px);
}
html body .pagelayer-pagination .page-numbers.current {
	background: var(--gy-terracotta);
	border-color: var(--gy-terracotta);
	color: #fffdf8;
}
html body .pagelayer-pagination .page-numbers.dots {
	background: transparent;
	border-color: transparent;
}

/* ---------- Halaman artikel renungan ---------- */
html body .pagelayer-post-title {
	font-family: 'Lora', Georgia, serif !important;
	line-height: 1.3 !important;
	color: var(--gy-brown);
}
html body .pagelayer-post-title::after {
	content: "";
	display: block;
	width: 72px;
	height: 3px;
	margin: 18px auto 0;
	background: var(--gy-gold);
	border-radius: 3px;
}

/* Info penulis, tanggal, jam */
html body .pagelayer-post-info-list-link {
	color: #8a7466 !important;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}
html body .pagelayer-post-info-list-link:hover {
	color: var(--gy-terracotta) !important;
}
html body .pagelayer-post-info-icon {
	color: var(--gy-gold) !important;
}

/* Isi renungan: kartu bacaan yang nyaman */
html body .pagelayer-post_content .entry-content {
	padding: 38px 44px;
	background: var(--gy-ivory);
	border: 1px solid rgba(197, 139, 58, 0.2);
	border-radius: 18px;
	box-shadow: 0 10px 30px rgba(62, 42, 34, 0.1);
	font-family: 'Nunito', 'Segoe UI', sans-serif;
	font-size: 18px;
	line-height: 1.95;
	color: #3f2f28;
}
html body .pagelayer-post_content .entry-content p {
	margin: 0 0 1.3em;
}
html body .pagelayer-post_content .entry-content p:last-child {
	margin-bottom: 0;
}
html body .pagelayer-post_content .entry-content blockquote {
	margin: 1.6em 0;
	padding: 14px 22px;
	background: var(--gy-cream);
	border-left: 4px solid var(--gy-gold);
	border-radius: 0 12px 12px 0;
	font-family: 'Lora', Georgia, serif;
	font-style: italic;
	color: var(--gy-brown-soft);
}
html body .pagelayer-post_content .entry-content strong {
	color: var(--gy-brown);
}

@media (max-width: 780px) {
	html body .pagelayer-archive-title {
		font-size: 28px !important;
	}
	html body .pagelayer-post_content .entry-content {
		padding: 26px 22px;
		font-size: 17px;
		line-height: 1.85;
	}
}
@media (max-width: 480px) {
	html body .pagelayer-post_content .entry-content {
		padding: 22px 18px;
		border-radius: 14px;
	}
	html body .pagelayer-wposts-content {
		padding: 16px 18px 20px !important;
	}
}

/* =====================================================
   Revisi header: bar atas terang (tanpa merah) + logo menyatu
   ===================================================== */

/* Bar menu: warna krem polos, foto latar lama dimatikan */
html body .p-3v36957 {
	background: var(--gy-ivory) !important;
	background-image: none !important;
}
html body .p-3v36957 > .pagelayer-background-overlay {
	display: none !important;
}
html body .pagelayer-header {
	position: relative;
	z-index: 20;
	box-shadow: 0 4px 20px rgba(62, 42, 34, 0.08);
}

/* Logo: latar putih "dilebur" ke warna bar supaya tidak tampak seperti kotak */
html body .pagelayer-header .pagelayer-wp-title-img {
	mix-blend-mode: multiply;
	max-width: 100%;
	height: auto;
}

/* Teks menu */
html body .pagelayer-header .pagelayer-wp_menu-ul > li > a,
html body .pagelayer-header .pagelayer-wp_menu-ul > li a:first-child {
	color: var(--gy-brown) !important;
}
html body .pagelayer-header .pagelayer-wp_menu-ul > li > a:hover,
html body .pagelayer-header .pagelayer-wp_menu-ul > li.pagelayer-active-sub-menu > a:hover {
	color: var(--gy-terracotta) !important;
}
html body .pagelayer-header .pagelayer-wp_menu-ul > li.current-menu-item > a {
	color: var(--gy-terracotta) !important;
	box-shadow: inset 0 -3px 0 var(--gy-gold);
}

/* Dropdown submenu (desktop) */
html body .pagelayer-header .pagelayer-wp-menu-container ul.sub-menu {
	background-color: var(--gy-ivory) !important;
	border: 1px solid var(--gy-sand);
	border-radius: 0 0 var(--gy-radius) var(--gy-radius);
	box-shadow: var(--gy-shadow);
	overflow: hidden;
}
html body .pagelayer-header .pagelayer-wp-menu-container ul.sub-menu > li a {
	color: var(--gy-brown) !important;
}
html body .pagelayer-header .pagelayer-wp-menu-container ul.sub-menu > li a:hover {
	background: var(--gy-sand);
	color: var(--gy-terracotta) !important;
}

/* Menu HP / tablet */
html body .pagelayer-header .pagelayer-primary-menu-bar i {
	background-color: var(--gy-terracotta) !important;
	color: #fffdf8 !important;
	border-radius: 8px;
}
html body .pagelayer-header .pagelayer-menu-type-dropdown {
	background-color: var(--gy-ivory) !important;
	box-shadow: var(--gy-shadow);
}
html body .pagelayer-header .pagelayer-wp_menu-close i {
	background-color: var(--gy-sand) !important;
	color: var(--gy-brown) !important;
}

/* Foto hero di bawah menu: lapisan krem lebih merata agar warna foto lebih tenang */
html body .p-cge9338 > .pagelayer-background-overlay {
	background: linear-gradient(90deg, rgba(251, 246, 238, 0.92) 0%, rgba(251, 246, 238, 0.74) 55%, rgba(251, 246, 238, 0.52) 100%) !important;
	opacity: 1 !important;
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
	html body * {
		transition: none !important;
		animation: none !important;
	}
	html body .pagelayer-wow {
		visibility: visible !important;
	}
}