/* VivaWP: responsive & polish beyond the demo stylesheet. */

/* -------------------------------------------------------------------------
 * Base safety (desktop + mobile)
 * ---------------------------------------------------------------------- */
html {
	overflow-x: clip;
}

body {
	overflow-x: clip;
	min-width: 0;
}

.container {
	width: 970px;
	max-width: 100%;
	box-sizing: border-box;
}

.content,
.main-row,
.article,
.sidebar,
.post-row,
.post-article,
.post-content {
	min-width: 0;
	max-width: 100%;
}

/* Media & embeds always fit the column. */
.post-content img,
.post-content iframe,
.post-content video,
.post-content embed,
.post-content .wp-block-embed,
.post-content .wp-block-image,
.post-featured img {
	max-width: 100% !important;
	height: auto;
}

/* Widget thumbs fill their box (no letterbox gray bars). */
.topic .topic-image img,
.list .list-image img,
.popularpos .popularpos-image img,
.indeks .indeks-image img,
.headline .headline-image img,
.video .video-image img,
.infografis .infografis-image img {
	object-fit: cover !important;
	object-position: center center !important;
	width: 100% !important;
	height: 100% !important;
}

.post-content iframe,
.post-content .wp-block-embed__wrapper,
.post-content .wp-block-video video {
	width: 100%;
}

/* Wide tables scroll instead of blowing the layout. */
.post-content table {
	display: block;
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.post-content pre,
.post-content code {
	max-width: 100%;
	overflow-x: auto;
}

/* Empty ad columns should not leave a gap. */
.article-adv:empty,
.sticky-post:empty,
.ads-sticky-bottom:empty,
.sticky-ads-left:empty,
.sticky-ads-right:empty {
	display: none !important;
}

.post-content:not(.notfull) {
	max-width: 640px;
}

/* -------------------------------------------------------------------------
 * Tablet / narrow desktop (DevTools, iPad landscape, resize)
 * Sticky side ads need ~1620px; hide earlier to avoid horizontal scroll.
 * ---------------------------------------------------------------------- */
@media (max-width: 1620px) {
	.sticky-ads-left,
	.sticky-ads-right {
		display: none !important;
	}
}

@media (max-width: 1100px) {
	.container {
		width: auto !important;
		max-width: 100%;
		padding-left: 16px;
		padding-right: 16px;
	}

	.main-row {
		flex-wrap: wrap !important;
		justify-content: flex-start;
	}

	.main-row > .article {
		flex: 1 1 100% !important;
		max-width: 100% !important;
		width: 100% !important;
	}

	.main-row > .sidebar {
		flex: 1 1 100% !important;
		max-width: 100% !important;
		width: 100% !important;
		margin-top: 24px;
	}

	.sidebar-box,
	.sidebar-box.fixed {
		position: static;
		height: auto;
	}

	.sidebar-box .widget:last-child,
	.sidebar-box.fixed .widget:last-child {
		position: static;
		top: auto;
	}

	.post-row {
		flex-wrap: wrap !important;
	}

	.article-adv {
		display: none !important;
	}

	.post-content,
	.post-content.notfull,
	.post-content:not(.notfull) {
		max-width: 100% !important;
	}

	.parallxads-box,
	.notfull .parallxads-box {
		max-width: 100%;
	}

	.page-nav {
		display: none;
	}

	.main-row > .page-nav + .article {
		margin-left: 0;
		max-width: 100%;
	}

	.video .video-item {
		width: calc(50% - 10px);
	}

	.headline .headline-item:not(:first-child) {
		width: 50%;
	}

	.banner.ads970250,
	.ads-slot.ads970250,
	.banner.ads72890,
	.ads-slot.ads72890 {
		width: 100%;
		max-width: 100%;
		height: auto;
		min-height: 90px;
	}
}

/* -------------------------------------------------------------------------
 * Mobile (<= 991px) — complements main.css mobile block
 * ---------------------------------------------------------------------- */
@media (max-width: 991px) {
	.container {
		padding-left: 12px;
		padding-right: 12px;
	}

	/* Prevent iOS zoom on focus. */
	input,
	select,
	textarea {
		font-size: 16px !important;
	}

	.header .form-search {
		left: 12px;
		right: 12px;
		padding: 0;
		z-index: 1002;
	}

	.header .form-search input[type="search"],
	.header .form-search input[type="text"] {
		width: 100%;
		box-sizing: border-box;
	}

	.menu-utama nav {
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.menu-utama nav::-webkit-scrollbar {
		display: none;
	}

	.post-title {
		font-size: 26px;
		line-height: 1.3;
		word-break: break-word;
	}

	.share {
		flex-wrap: wrap;
		gap: 8px;
	}

	.share-content a {
		width: 36px;
		height: 36px;
	}

	.share-content a svg {
		height: 18px;
	}

	.video .widget-content {
		display: flex;
		flex-wrap: wrap;
		gap: 12px;
	}

	.video .video-item {
		width: calc(50% - 6px);
		margin: 0;
	}

	.indeks .indeks-image {
		width: 95px;
		flex-shrink: 0;
	}

	.list .list-image,
	.popularpos .popularpos-image {
		width: 88px;
		flex-shrink: 0;
	}

	.ads-sticky-bottom {
		width: 100% !important;
		max-width: 100%;
		left: 0;
		right: 0;
	}

	.ads-sticky-bottom .ads-slot,
	.ads-sticky-bottom .banner {
		max-width: 100%;
		width: 100% !important;
		height: auto;
	}

	.footer .widget .menu {
		display: flex;
		flex-wrap: wrap;
	}

	.footer .widget .menu li {
		width: 50%;
		box-sizing: border-box;
	}

	.commentAvatar {
		width: 40px;
		height: 40px;
	}

	.comments .comment-form-author,
	.comments .comment-form-email {
		width: 100%;
		float: none;
	}
}

/* -------------------------------------------------------------------------
 * Small phones
 * ---------------------------------------------------------------------- */
@media (max-width: 480px) {
	.container {
		padding-left: 10px;
		padding-right: 10px;
	}

	.post-title {
		font-size: 22px !important;
		line-height: 1.3 !important;
	}

	.headline .headline-item:first-child .headline-title {
		font-size: 18px;
	}

	.headline .headline-item:not(:first-child) {
		width: 100%;
	}

	.video .video-item {
		width: 100%;
	}

	.indeks .indeks-image {
		width: 84px;
		padding-bottom: 84px;
	}

	.list .list-image,
	.popularpos .popularpos-image {
		width: 76px;
		padding-bottom: 76px;
	}

	.footer .widget .menu li {
		width: 100%;
	}

	.topic .topic-image {
		height: 140px;
	}

	.share-label {
		width: 100%;
		margin: 0 0 4px;
	}

	.btn-top {
		right: 10px;
		bottom: 70px;
	}
}

/* Landscape phones: keep sticky header usable (respect WP admin bar). */
@media (max-width: 991px) and (orientation: landscape) {
	:root {
		--viva-mobile-header-h: 48px;
	}

	.header {
		height: var(--viva-mobile-header-h);
	}

	.menu-utama,
	.menu-utama.fixed,
	body.has-topbar .menu-utama {
		top: calc(var(--viva-admin-h) + var(--viva-mobile-header-h));
	}

	.sidebarmenu nav > ul {
		padding-bottom: 60px;
	}
}

/* Logged-in: WP admin bar is fixed; keep sticky chrome + sidebars clear of it. */
body.admin-bar .parallax-hide {
	top: calc(var(--viva-admin-h) + 10px);
}

@media (max-width: 991px) {
	body.admin-bar .sticky-post,
	body.admin-bar .page-nav nav {
		top: calc(var(--viva-admin-h) + var(--viva-mobile-header-h) + 48px);
	}
}