/* ==========================================================================
   Responsive tema utama - Ruang Sekolah
   Dimuat SETELAH style.css. Prinsip: layout dasar dibuat fluid (mengikuti lebar
   layar), lalu disesuaikan di tiga titik patah:
     <= 1020px : tablet landscape / laptop kecil
     <=  820px : tablet portrait (konten & sidebar tersusun ke bawah)
     <=  520px : HP
   ========================================================================== */

/* ---- Dasar fluid (semua ukuran) ---- */
img, video, iframe, embed, object { max-width: 100%; }
img { height: auto; }
#container { width: auto; max-width: 960px; box-sizing: content-box; }
table { max-width: 100%; }
.post-content, .page-container, #content { overflow-wrap: anywhere; }
.page-container table, #content table { display: block; overflow-x: auto; width: 100% !important; }
.page-container iframe, #content iframe { width: 100%; }

/* Slider utama mengikuti lebar kontainer */
#slider.version1 .flexslider, #slider.version1 .flexslider .slides li { width: 100%; height: auto; }
#slider.version1 .flexslider .slides li img { width: 100%; height: auto; display: block; }
/* Teks berjalan "Sekilas Info" */
.horizontal-scroller { width: calc(100% - 230px); box-sizing: border-box; }

/* Tombol menu mobile (disembunyikan di desktop) */
.menu-toggle { display: none; }

/* ---- <= 1020px ---- */
@media (max-width: 1020px) {
	body { background-attachment: scroll !important; }
	#container { margin: 0 auto; padding: 14px; }
	footer { margin: 0 -14px -14px; padding: 20px 14px; }
	#top { margin: 0 -14px; }
	#content, .left-sidebar #content { width: calc(100% - 340px); box-sizing: border-box; padding-left: 20px; }
	#sidebar, .left-sidebar #sidebar { width: 320px; }
	#slider.version1 .flexslider .slides li img { width: 100%; }
	footer ul > li { box-sizing: border-box; }
}

/* ---- <= 820px: konten dan sidebar tersusun vertikal ---- */
@media (max-width: 820px) {
	#container { padding: 12px; }
	footer { margin: 0 -12px -12px; padding: 20px 12px; }
	#top { margin: 0 -12px; }
	#content, #sidebar,
	.left-sidebar #content, .left-sidebar #sidebar { float: none; width: 100%; border: 0; margin: 0; padding-left: 0; padding-right: 0; box-sizing: border-box; }
	#sidebar { border-top: 1px solid #e4e4e4; padding-top: 10px; }
	#sidebar ul { margin: 0; padding: 0; }
	#sidebar .widget { margin-left: 0; }

	/* Header: logo, tanggal & pencarian tersusun */
	#logo, #search-bar { float: none; margin-left: 0; width: 100%; height: auto; }
	#logo img { max-width: 260px; }
	#search-bar { margin-top: 10px; }
	#search-bar input[type="text"] { width: calc(100% - 44px); box-sizing: border-box; border: 1px solid #d8d8d8; }
	#search-bar input[type="submit"] { border: 1px solid #d8d8d8; border-left: 0; }

	/* Menu: tombol hamburger + daftar vertikal */
	header nav { margin-top: 12px; }
	.menu-toggle {
		display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px;
		background: #017dc3; color: #fff; border: 0; font: bold 14px/1 Arial, sans-serif; letter-spacing: .05em; cursor: pointer;
	}
	.menu-toggle span { display: block; width: 20px; height: 2px; background: #fff; box-shadow: 0 6px 0 #fff, 0 -6px 0 #fff; }
	.menu-toggle span:nth-of-type(2), .menu-toggle span:nth-of-type(3) { display: none; }
	.menu-toggle span:first-of-type { margin: 6px 6px 6px 0; }
	header nav > ul.sf-menu { display: none; float: none; width: 100%; }
	header nav.menu-open > ul.sf-menu { display: block; }
	header nav > ul > li { float: none; width: 100%; border-right: 0; border-bottom: 1px solid #e4e4e4; }
	header nav > ul > li > a { padding: 14px; }
	header nav ul ul { position: static !important; display: none; width: 100%; box-shadow: none; background: #f6f8fa; }
	header nav ul li.sub-open > ul { display: block !important; opacity: 1 !important; height: auto !important; visibility: visible !important; }
	header nav ul ul li a { padding: 10px 14px 10px 28px; }

	/* Slider & info */
	#slider.version1 .flex-caption { left: 0; right: 0; bottom: 0; width: auto; }
	#slider.version1 .flex-caption h1 { font-size: 16px; line-height: 1.3; }
	.horizontal-scroller { max-width: 100%; }

	/* Footer: kolom tersusun */
	footer > ul { padding: 0; }
	footer > ul > li { float: none; width: 100% !important; margin: 0 0 24px; }
	.fb-container iframe { max-width: 100%; }
}

/* ---- <= 520px: HP ---- */
@media (max-width: 520px) {
	#container { padding: 10px; border-top-width: 4px; }
	footer { margin: 0 -10px -10px; padding: 20px 10px; }
	#top { margin: 0 -10px; }
	.page-title { font-size: 18px; line-height: 1.3; }
	h1 { font-size: 20px; }
	.post-container, .post-container2 { padding-left: 0; }
	.post-container > a > img, .post-container2 > a > img { max-width: 100%; }
	.post-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; }
	.post-meta > div { float: none; }
	.flexslider .flex-direction-nav { display: none; }
	.commentForm input[type="text"], .commentForm input[type="email"], .commentForm textarea,
	.contact-form input[type="text"], .contact-form input[type="email"], .contact-form textarea { width: 100%; box-sizing: border-box; }
	#page_navigation a { display: inline-block; margin: 2px; }
	.copyright { text-align: center; }
	dialog#iklan-popup { max-width: 94vw; }
}

/* ---- Penyesuaian elemen isi ---- */
.zalimage { height: 150px; width: auto; max-width: 45%; object-fit: cover; }
.page-container .post-image img { width: 100%; max-width: 603px; box-sizing: border-box; }
.posts-container { overflow: hidden; }  /* menampung gambar yang float */
.main-post > a img { max-width: 100%; width: auto; }
@media (max-width: 520px) {
	.zalimage { float: none; display: block; max-width: 100%; height: auto; margin: 0 0 12px; }
}

/* Kontainer isi halaman mengikuti lebar kolom (bukan lebar gambar di dalamnya) */
.page-container { display: block; }
.videoembed, #map, #peta { width: 100%; box-sizing: border-box; }
.videoembed { aspect-ratio: 16 / 9; height: auto; }
@media (max-width: 820px) {
	#jsrp_related { display: none !important; }   /* kotak "artikel terkait" melayang tidak muat di layar kecil */
	.main-post { float: none; width: 100%; margin-right: 0; }
	.main-post > a img { width: 100%; }
}

/* Formulir komentar & kontak */
#reply, .contact-form, .commentForm { width: 100%; max-width: 100%; box-sizing: border-box; }
.commentForm input, .commentForm textarea { min-width: 0 !important; max-width: 100%; box-sizing: border-box; }
.commentForm input[type="text"], .commentForm input[type="email"], .commentForm textarea { width: 100%; }
.page-container ul:not(.children), .page-container ol:not(#comments) { box-sizing: border-box; max-width: 100%; width: auto; }

/* Sekilas Info: tinggi baris disesuaikan agar teks berjalan terlihat penuh */
.breaking-wrapper p { white-space: nowrap; }
@media (max-width: 820px) {
	.horizontal-scroller { height: 20px; margin-top: 6px; line-height: 20px; margin-left: 12px; width: calc(100% - 190px); }
}

/* Sekilas Info: teks berjalan sejajar dengan label di kirinya */
.horizontal-scroller { height: 22px; margin-top: -1px; line-height: 22px; }
.horizontal-scroller #scrollingtext { top: 0; left: 0; }
.horizontal-scroller #scrollingtext a { margin-top: 0; padding-bottom: 0; }

/* ---- Sidebar selebar layar di HP/tablet (ukuran asli 300px dibuat fluid) ---- */
@media (max-width: 820px) {
	#sidebar > ul > li, .left-sidebar #sidebar > ul > li, #sidebar .widget { float: none; width: 100%; max-width: 100%; margin-left: 0 !important; box-sizing: border-box; }
	#sidebar .tabs-widget .tab-links { display: flex; flex-wrap: wrap; }
	#sidebar .tabs-widget .tab-links li { float: none; flex: 1 1 auto; text-align: center; }
	#sidebar .tabs-widget > div { box-sizing: border-box; width: 100%; }
	#sidebar img, #sidebar iframe, #sidebar video { max-width: 100%; }
	.page-title2, .page-title2 a { box-sizing: border-box; max-width: 100%; }
}

/* ---- Sekilas Info: teks muncul dari tepi kanan bar abu-abu dan hilang di tepi kotak biru ---- */
.breaking-wrapper { position: relative; }
.horizontal-scroller {
	position: absolute; left: 162px; right: 12px; top: 10px;   /* 162px = lebar kotak biru "SEKILAS INFO" */
	width: auto; height: 22px; margin: 0; line-height: 22px; float: none; overflow: hidden;
}
@media (max-width: 820px) {
	.horizontal-scroller { left: 162px; right: 6px; width: auto; margin: 0; top: 10px; }
}
@media (max-width: 820px) {
	#sidebar .tabs-widget, #sidebar .tabs-widget > div, #sidebar .tabs-widget ul.ticker, #sidebar .tabs-widget ul { width: 100% !important; max-width: 100%; box-sizing: border-box; }
}