/* BBPKA-PDN I - user.css v2.4 (child template cassiopeia_bbpka1) */
/* Font dan sticky header diatur dari admin (Advanced), bukan dari CSS ini. */

:root{
  --bb-navy:#283470; --bb-navy-deep:#1B2354; --bb-gold:#E0A526;
  --bb-ground:#F4F6FA; --bb-ink:#1B2433; --bb-muted:#5B6577;
  --bb-map-height:160px; /* tinggi peta sidebar: ubah di sini */
  --cassiopeia-color-primary:#283470;
  --cassiopeia-color-hover:#1B2354;
  --cassiopeia-color-link:#283470;
  --link-color:#283470;
  --link-color-rgb:40,52,112;
  --link-hover-color:#8A6100;
}
body.site{
  color:var(--bb-ink);
  background-color:var(--bb-ground);
}

/* ---------- Header: logo kiri, menu kanan, navy, lengket ---------- */
.container-header{
  display:flex; flex-wrap:nowrap; align-items:center; justify-content:space-between; gap:24px;
  padding:0 max(24px, calc((100% - 1320px) / 2));
  background:var(--bb-navy) !important; background-image:none !important;
  box-shadow:0 1px 0 rgba(255,255,255,.12);
}
.container-header .grid-child{width:auto; margin:0; padding:0; flex:0 0 auto}
.container-header .container-nav{flex:1 1 auto; display:flex; justify-content:flex-end; align-items:center}
.container-header .navbar{padding:0}

/* Brand: logo (gambar latar) + judul situs + deskripsi */
.container-header .navbar-brand{
  position:relative; display:flex; flex-direction:column; justify-content:center;
  min-height:76px; margin:0; padding:.5rem 0 .5rem 62px;
}
.container-header .navbar-brand::before{
  content:""; position:absolute; left:0; top:50%; width:46px; height:58px; transform:translateY(-50%);
  background:url("../images/logo-kemendagri.png") center/contain no-repeat;
}
.container-header .navbar-brand .brand-logo,
.container-header .navbar-brand .brand-logo span{
  color:#fff; text-decoration:none; font-size:1.15rem !important; font-weight:800; line-height:1.2;
}
.container-header .site-description{margin:0; color:#C9D4EA; font-size:.8rem}

/* Menu atas: satu baris, tidak boleh membungkus */
.container-header .container-nav{min-width:0}
.container-header .mod-menu{flex-wrap:nowrap}
.container-header .mod-menu>li{white-space:nowrap}
.container-header .mod-menu>li>a,
.container-header .mod-menu>li>.mod-menu__heading,
.container-header .mod-menu>li>.mm-toggler-nolink{
  padding:1.7rem .7rem; font-size:.95rem; font-weight:400; color:#fff; text-decoration:none;
}
.container-header .mod-menu>li.active>a{border-bottom:3px solid var(--bb-gold)}
.container-header .mod-menu>li>a:hover{color:var(--bb-gold)}
.container-header .metismenu.mod-menu .mm-collapse{
  background:var(--bb-navy-deep); border-radius:0 0 10px 10px; min-width:280px;
  box-shadow:0 12px 28px rgba(18,48,92,.25);
}

/* ---------- Konten & berita ---------- */
.container-component .page-header h1,
.container-component h1{font-size:1.6rem; font-weight:800; color:var(--bb-navy)}
.blog-item{
  background:#fff; border:1px solid #E3E8F1; border-radius:14px; padding:28px 32px !important; margin-bottom:28px;
  overflow:hidden; box-shadow:0 2px 10px rgba(18,48,92,.07);
}
.blog-item h2{font-size:1.2rem; line-height:1.35; font-weight:800; margin:0 0 .6rem}
.blog-item h2 a{color:var(--bb-navy); text-decoration:none}
.blog-item h2 a:hover{color:#8A6100}
.article-info{font-size:.8rem; color:var(--bb-muted); margin:0 0 1.2rem; padding:0}
.article-info-term{display:none}

/* Isi berita: poster persegi kecil di kiri, teks di kanan, teks dibatasi 5 baris */
.blog-item .item-content{font-size:.95rem; line-height:1.7; color:#3A4457}
.blog-item .item-content strong,
.blog-item .item-content b{font-weight:400}
.blog-item img{max-width:100%; height:auto; border-radius:8px}
.blog-item .item-content img{float:left; width:min(200px,36%); margin:0 24px 12px 0}
.blog-item .item-content::after{content:""; display:block; clear:both}
.blog-item .item-content p{margin:0 0 .75rem}
.blog-item .item-content p:not(:has(img)){
  display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden;
}
.blog-item .readmore{margin:.5rem 0 0; clear:both}
.blog-item .readmore a{
  border:0; background:none; padding:0; box-shadow:none;
  font-size:.9rem; font-weight:600; color:var(--bb-navy);
}
.blog-item .readmore a:hover{color:#8A6100}

/* v1.8 - berita lebih lapang: dipaksa 2 kolom, poster kecil di kiri, jarak lebih longgar */
.blog-item{transition:box-shadow .2s, transform .2s}
.blog-item:hover{box-shadow:0 10px 28px rgba(18,48,92,.14); transform:translateY(-2px)}
.blog-items:not(.items-leading){
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:28px;
}
@media (max-width:900px){.blog-items:not(.items-leading){grid-template-columns:1fr}}
.article-info .category-name{display:none}
.blog-items:not(.items-leading) .blog-item h2{font-size:1.15rem}
.blog-items:not(.items-leading) .blog-item .item-content p:not(:has(img)){-webkit-line-clamp:4}
.blog-item .item-content{line-height:1.75}
.blog-item .readmore{margin-top:1rem}

/* v1.9 - berita utama (leading) lebih besar dari kartu di bawahnya */
.items-leading .blog-item{padding:36px 40px !important; margin-bottom:32px; border-radius:16px}
.items-leading .blog-item h2{font-size:1.75rem; line-height:1.25}
.items-leading .blog-item .article-info{font-size:.85rem; margin-bottom:1.4rem}
.items-leading .blog-item .item-content{font-size:1.05rem; line-height:1.8}
.items-leading .blog-item .item-content img{width:min(420px,44%); margin:0 36px 16px 0; border-radius:12px}
.items-leading .blog-item .item-content p:not(:has(img)){-webkit-line-clamp:8}
.items-leading .blog-item .readmore a{
  background:var(--bb-navy) !important; color:#fff !important;
  padding:.65rem 1.2rem !important; border-radius:8px; font-size:.95rem;
}
.items-leading .blog-item .readmore a:hover{background:var(--bb-navy-deep) !important; color:#fff !important}
@media (max-width:700px){
  .items-leading .blog-item{padding:24px !important}
  .items-leading .blog-item h2{font-size:1.4rem}
  .items-leading .blog-item .item-content img{float:none; width:100%; margin:0 0 16px}
}

/* ---------- Modul sidebar ---------- */
.card{border:0; border-radius:12px; overflow:hidden; box-shadow:0 2px 10px rgba(18,48,92,.07)}
.card-header{
  background:transparent; border:0; padding:1rem 1.1rem .25rem;
  font-size:.9rem; font-weight:800; letter-spacing:.06em; color:var(--bb-muted);
}
.card img{max-width:100%; height:auto; border-radius:8px}

/* ---------- Hero (posisi banner): teks kiri, foto kegiatan kanan ---------- */
.container-banner{
  display:grid; grid-template-columns:1.1fr 1fr; gap:40px; align-items:center;
  padding:48px max(24px, calc((100% - 1320px) / 2));
  background:var(--bb-navy);
}
.container-banner:empty{display:none}
.bb-hero-eyebrow{margin:0 0 12px; color:var(--bb-gold); font-size:.8rem; font-weight:800; letter-spacing:.1em}
.bb-hero-title{margin:0; color:#fff; font-size:2.4rem; font-weight:800; line-height:1.15}
.container-banner .br-simple-slider-container{border-radius:14px; overflow:hidden}
@media (max-width:900px){
  .container-banner{grid-template-columns:1fr; padding:32px 24px}
  .bb-hero-title{font-size:1.7rem}
}

/* ---------- Footer disembunyikan ---------- */
.container-footer{display:none}

/* =====================================================================
   v2.0
   ===================================================================== */

/* v2.0 - peta embed (Google Maps) di sidebar kanan: muat di kartu, ukuran kompak.
   Tinggi diatur lewat variabel --bb-map-height di bagian :root atas file. */
.container-sidebar-right,
.sidebar-right{min-width:0}
.card iframe,
.container-sidebar-right iframe,
.sidebar-right iframe{
  display:block;
  width:100% !important;
  max-width:100% !important;
  height:var(--bb-map-height) !important;
  min-height:0 !important;
  border:0;
  border-radius:8px;
}
.card .card-body{padding:.6rem !important; overflow:hidden}

/* v2.0 - counter pengunjung (modul Statistics) di sidebar kanan, gaya biru-putih */
.counter-box .list-group{
  border-radius:6px;
}
.counter-box .list-group-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:14px 10px 16px;
  border:1px solid #1e4d8c;
  border-top:4px solid #1e4d8c;
  background:#ffffff;
  color:#1e4d8c;
  font-size:.85rem;
  font-weight:600;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.counter-box .badge{
  background:transparent !important;
  color:#1e4d8c;
  padding:0;
  font-family:"Times New Roman", Times, serif;
  font-size:2rem;
  font-weight:700;
  line-height:1.1;
  letter-spacing:.08em;
  text-transform:none;
  font-variant-numeric:lining-nums tabular-nums;
}

/* v2.0 - slider sidebar kiri (Nara Hubung & Dokumentasi Mingguan): foto utuh, tidak terpotong */
.sidebar-left img{
  object-fit:contain !important;
  background:#eef3fa;
}
.sidebar-left [style*="background-image"]{
  background-size:contain !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-color:#eef3fa;
}

/* v2.4 - hero: tukar sisi kolom (teks di kiri, slider di kanan) tanpa bergantung pada urutan modul */
.container-banner{direction:rtl; grid-template-columns:1fr 1.1fr}
.container-banner > *{direction:ltr}
@media (max-width:900px){
  .container-banner{direction:ltr; grid-template-columns:1fr}
}

/* v2.3 - header: sembunyikan gambar logo besar dari admin, ganti dengan teks.
   Kalau nanti Site Title/Description sudah diisi di pengaturan template dan Logo File dikosongkan,
   hapus 4 aturan di bawah ini. */
.container-header .navbar-brand img{display:none !important}
.container-header .navbar-brand .brand-logo{display:block}
.container-header .navbar-brand .brand-logo::after{
  content:"BBPKA-PDN I"; color:#fff; font-size:1.15rem; font-weight:800; line-height:1.2;
}
.container-header .navbar-brand::after{
  content:"Bukittinggi · Kementerian Dalam Negeri"; color:#C9D4EA; font-size:.8rem;
  }
  /* ---------- Header HP/tablet (<= 992px) ---------- */
.container-header .nav-toggle { display: none; }

@media (max-width: 992px) {
   .container-header {
    position: sticky !important;
    top: 0;
    z-index: 1000 !important;
  }
  .container-header { flex-wrap: wrap; gap: 8px; padding: 0 16px; }
  .container-header > .grid-child:first-child { flex: 1 1 0; min-width: 0; }

  .container-header .navbar-brand { min-height: 56px; padding-left: 52px; }
  .container-header .navbar-brand::before { width: 38px; height: 46px; }
  .container-header .navbar-brand .brand-logo,
  .container-header .navbar-brand .brand-logo span { font-size: 1rem !important; }

  .container-header .nav-toggle {
    display: block; flex: none;
    font-size: 1.5rem; line-height: 1; padding: .4rem .7rem;
    color: #fff; background: transparent;
    border: 1px solid rgba(255,255,255,.4); border-radius: 6px;
  }

  .container-header .container-nav {
    order: 3; flex: 1 1 100%; display: block; justify-content: flex-start;
  }
  .container-header.nav-js .container-nav { display: none; }
  .container-header.nav-js .container-nav.is-open {
    display: block; max-height: 70vh; overflow-y: auto;
  }
  .container-header .mod-menu { flex-direction: column; align-items: stretch; }
  .container-header .mod-menu .nav-item > a { display: block; padding: .75rem 0; }
  .container-header .mod-menu__sub {
    position: static; box-shadow: none; background: transparent; padding-left: 1rem;
  }
  .container-header .mod-menu__sub[aria-hidden="true"] { display: none; }
     .container-header .mod-menu .mod-menu__sub a { display: block; padding: .6rem 0; font-size: .95rem; }  
  .container-header .mod-menu .nav-item.parent {
    display: flex; flex-wrap: wrap; align-items: center;
  }
  .container-header .mod-menu .nav-item.parent > a { flex: 1 1 auto; }
  .container-header .mod-menu .nav-item.parent > .mod-menu__toggle-sub {
    flex: none; padding: .75rem; background: transparent; border: 0; color: #fff;
  }
    .container-header .mod-menu .nav-item.parent > .mod-menu__sub { flex: 0 0 100%; }