/* UmparanWP: additions the demo stylesheet gets from third-party scripts. */

/*
 * Fix: .info-post sticky — bar penulis/share ikut kebawa saat scroll.
 */
.info-post,
.single .info-post,
.single-post .info-post,
.page .info-post,
body .article-box .info-post,
body .article .info-post {
	position: static !important;
	top: auto !important;
	bottom: auto !important;
	inset: auto !important;
	z-index: 1 !important;
	transform: none !important;
}


/* Mobile scroll lock while popups are open (the demo CSS only defines .overflow-hide). */
body.overflow-hide {
	overflow: hidden;
}

/* Tim Redaksi: panah berputar saat panel dibuka */
.redaksi .icon-arrow {
	transition: transform 0.2s ease;
}
.redaksi.is-open .icon-arrow {
	transform: rotate(180deg);
}
.redaksi .redaksi-avatar-box .image-ava {
	position: relative;
}

/* Lightbox (replaces the Spotlight library). */
#umw-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.92);
	cursor: zoom-out;
}

#umw-lightbox .umw-lightbox-inner {
	max-width: 96vw;
	max-height: 94vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	cursor: default;
}

#umw-lightbox img {
	max-width: 96vw;
	max-height: 82vh;
	object-fit: contain;
	display: block;
}

#umw-lightbox .umw-lightbox-caption {
	max-width: 640px;
	margin-top: 12px;
	padding: 0 16px;
	color: #bbb;
	font-size: 13px;
	line-height: 1.4;
	text-align: center;
}

#umw-lightbox .umw-lightbox-caption:empty {
	display: none;
}

#umw-lightbox .umw-lightbox-close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	cursor: pointer;
}

#umw-lightbox .umw-lightbox-close:before,
#umw-lightbox .umw-lightbox-close:after {
	content: "";
	position: absolute;
	top: 19px;
	left: 10px;
	width: 20px;
	height: 2px;
	background: #fff;
	transform: rotate(45deg);
}

#umw-lightbox .umw-lightbox-close:after {
	transform: rotate(-45deg);
}

/* Slider arrows built by slick. */
.widget.slider .carousel-control-prev,
.widget.slider .carousel-control-next {
	cursor: pointer;
}

/* Pagination link rendered for crawlers and no-JS visitors. */
.pagination .paginationNext {
	display: none;
}

/*
 * Pages = layout Posts (content-box + sidebar).
 * Override max-width lama yang memaksa page jadi kolom sempit tanpa sidebar.
 */
.page-template-default .content-box .article {
	max-width: none;
	margin: 0;
	flex: 1;
}

/* Iklan kanan artikel OFF → teks full lebar kolom (jangan tetap 469px). */
.post-row.no-adv .post-detail,
.post-row:not(.has-adv) .post-detail.notfull {
	max-width: none !important;
}
.post-row.no-adv .post-article {
	width: 100%;
	max-width: 100%;
}

/*
 * Berita Terpopuler di sidebar pages rusak karena style list
 * hanya di-scope .single (jadi di .page tetap 3-kolom 33%).
 * Samakan dengan behavior single.
 */
.page .list .list-wrap,
.page-template-default .list .list-wrap {
	display: unset;
	flex-direction: unset;
	margin: unset;
}

.page .list .list-item,
.page-template-default .list .list-item {
	display: unset;
	-ms-flex: unset;
	flex: unset;
	max-width: unset;
	margin-bottom: 0;
	padding: 0;
}

.page .list .list-item:last-child .list-box,
.page-template-default .list .list-item:last-child .list-box {
	border: none;
}

.page .list .list-box,
.page-template-default .list .list-box {
	border: 0;
	border-bottom: 1px solid #eeeeee;
	padding: 16px 0;
}

.page .sidebar .list .list-item,
.page-template-default .sidebar .list .list-item {
	display: flex;
}

.page .sidebar .list .list-box,
.page-template-default .sidebar .list .list-box {
	padding: 0 0 16px 0;
	border: 0;
}

body.darkmode.page .list .list-box,
body.darkmode.page-template-default .list .list-box {
	border-bottom-color: #2a3440;
}

/*
 * Indeks / Terpopuler: pakai archive-main + sidebar (bukan kartu tengah).
 * Filter kategori cukup garis bawah, tanpa bayangan/gradient.
 */
.page-template-terkini .archive-box > .terkini-menu,
.page-template-trending .archive-box > .trending-menu {
	margin: 0 0 4px;
	border-bottom: 1px solid #eee;
}

.page-template-terkini .archive-box > .terkini-menu nav,
.page-template-trending .archive-box > .trending-menu nav {
	background: transparent;
}

.page-template-terkini .archive-box > .widget.list,
.page-template-trending .archive-box > .widget.list {
	padding-top: 0;
}

body.darkmode.page-template-terkini .archive-box > .terkini-menu,
body.darkmode.page-template-trending .archive-box > .trending-menu {
	border-bottom-color: #2a3440;
}

/*
 * Footer solo: sisi kanan (Jaringan / App / Sosial) tidak aktif
 * → konten kiri + copyright rata tengah.
 */
.footer--solo .footer-box--solo {
	justify-content: center;
	text-align: center;
}

.footer--solo .footer-left {
	width: 100%;
	max-width: 720px;
	margin: 0 auto;
}

.footer--solo .footer-left .widget-header,
.footer--solo .footer-left .widget-title {
	text-align: center;
}

.footer--solo .footer-left img {
	display: inline-block;
	margin-left: auto;
	margin-right: auto;
}

.footer--solo .footer-left .widget ul,
.footer--solo .footer-left .menu {
	justify-content: center;
}

.footer--solo .footer-left .widget ul li {
	width: auto;
	padding: 0 8px;
}

.footer--solo .copyright {
	text-align: center;
	margin-top: 8px;
}

.footer--solo .copyright .widget,
.footer--solo .copyright .textwidget {
	text-align: center;
}

/*
 * Responsive — tema desktop memakai min-width:1024px & fixed 1024px.
 * Saat viewport lebih kecil (resize / tablet / DevTools), konten kepotong.
 * Override di bawah supaya layout menumpuk & full-width.
 */
@media (max-width: 1023px) {
	html,
	body {
		overflow-x: hidden;
		max-width: 100%;
	}

	.content,
	body.desktop .content {
		min-width: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	.header-box,
	.header-box.bg-primary .header-container,
	.header-box.bg-submenu .header-container,
	.header-container,
	.main-container,
	.footer-container,
	.terkini-wrapper,
	.trending-wrapper,
	.custommenu-box,
	.banner-top,
	.banner-bottom {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
	}

	.header-container,
	.main-container,
	.footer-container {
		padding-left: 12px;
		padding-right: 12px;
	}

	/* Sticky ads samping & iklan dalam artikel — sembunyikan di layar sempit */
	.sticky-ads,
	.sticky-ads-left,
	.sticky-ads-right,
	.article-adv,
	.article-box > .adv,
	.post-row .post-adv {
		display: none !important;
	}

	.content-box {
		display: flex !important;
		flex-direction: column !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	.content-box .article,
	.content-box .article-box,
	.article-box {
		width: 100% !important;
		max-width: 100% !important;
		flex: none !important;
		-ms-flex: none !important;
	}

	.content-box .sidebar,
	.sidebar,
	.archive-main .sidebar,
	.archive-main2 .sidebar {
		width: 100% !important;
		max-width: 100% !important;
		flex: none !important;
		-ms-flex: none !important;
		flex-basis: auto !important;
		margin-top: 24px;
	}

	.archive-main,
	.archive-main2 {
		display: flex !important;
		flex-direction: column !important;
		width: 100% !important;
	}

	.archive-main .archive-article,
	.archive-main2 .archive-article,
	.archive-box {
		width: 100% !important;
		max-width: 100% !important;
		flex: none !important;
	}

	.sticky-post,
	.sticky-post .widget {
		position: static !important;
		width: 100% !important;
		height: auto !important;
		display: none !important;
	}

	.page-template-default .content-box .article {
		max-width: 100% !important;
		margin: 0;
		flex: none !important;
	}

	.post-row,
	.post-row.has-adv,
	.post-row.no-adv {
		display: block !important;
		width: 100% !important;
	}

	.post-row .post-article,
	.post-row .post-detail,
	.post-row .post-detail.notfull,
	.post-row.no-adv .post-detail,
	.post-row:not(.has-adv) .post-detail.notfull {
		width: 100% !important;
		max-width: 100% !important;
	}

	.footer-box {
		display: flex;
		flex-wrap: wrap;
		flex-direction: column;
		width: 100%;
	}

	.footer-box .widget {
		width: 100% !important;
		max-width: 100% !important;
		margin-bottom: 20px;
	}

	img,
	.wp-post-image,
	.attachment-post-thumbnail,
	.list-img img,
	.grid-img img,
	.headline-img img {
		max-width: 100% !important;
		height: auto !important;
	}

	iframe,
	embed,
	video,
	.wp-block-embed,
	.wp-video {
		max-width: 100% !important;
	}

	table {
		display: block;
		width: 100% !important;
		max-width: 100% !important;
		overflow-x: auto;
	}

	/* Grid / list beranda yang sering overflow */
	.grid-box .grid-wrap,
	.headline-box,
	.custommenu ul,
	.custommenu-box ul {
		width: 100% !important;
		max-width: 100% !important;
	}

	.custommenu ul.LinkList > li,
	.custommenu-box ul > li {
		width: auto !important;
		max-width: 100%;
	}

	/* Sidebar 300px & banner 728px dari desktop */
	.sidebar,
	.sidebar .widget,
	.adv-300,
	.banner-300,
	.ads-300 {
		width: 100% !important;
		max-width: 100% !important;
	}

	.banner-728,
	.ads-728,
	.adv-728,
	.banner-top img,
	.banner-bottom img,
	.adv img {
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
	}

	.slider {
		flex-direction: column !important;
		width: 100% !important;
	}

	.slider .slider-item,
	.slider > * {
		width: 100% !important;
		max-width: 100% !important;
	}
}

@media (max-width: 768px) {
	.page-template-terkini .archive-box > .terkini-menu,
	.page-template-trending .archive-box > .trending-menu {
		margin-left: 0;
		margin-right: 0;
	}

	.header-container,
	.main-container,
	.footer-container {
		padding-left: 10px;
		padding-right: 10px;
	}

	/* Menu horizontal: scroll, jangan potong */
	.header-menu,
	.header-menu nav,
	.custommenu,
	.custommenu-box,
	.terkini-menu,
	.trending-menu {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		max-width: 100%;
	}

	.header-menu ul.LinkList,
	.custommenu ul.LinkList {
		display: flex;
		flex-wrap: nowrap;
		width: max-content;
		min-width: 100%;
	}

	.list .list-wrap,
	.grid .grid-wrap {
		display: flex;
		flex-direction: column;
		width: 100%;
	}

	.list .list-item,
	.grid .grid-item {
		width: 100% !important;
		max-width: 100% !important;
		flex: none !important;
		-ms-flex: none !important;
	}

	.headline .headline-item,
	.headline-box .headline-item {
		width: 100% !important;
		max-width: 100% !important;
	}

	.post-title,
	.entry-title,
	h1.title {
		font-size: 1.35rem;
		line-height: 1.35;
		word-wrap: break-word;
		overflow-wrap: break-word;
	}

	.entry-content,
	.post-content,
	.article-content {
		font-size: 1rem;
		word-wrap: break-word;
		overflow-wrap: anywhere;
	}
}