/*
 Theme Name: Berita Pasti – Mobile Child v9.2 (Pretty Header + Category)
 Description: Mengembalikan header cantik (AppBar mobile + BrandBar desktop + nav gradien) dan tetap mempertahankan category.php khusus untuk arsip kategori.
 Author: lily + guru
 Version: 1.9.2
 Template: berita-pasti-clone
 Text Domain: berita-pasti-mobile-child
*/

/* ====== MOBILE HEADER ====== */
@media (max-width: 768px){
  :root{
    --grad-a:#ff3b3b; --grad-b:#7a2cff; --brand:#e31837; --hi:#ffd54a;
    --radius:14px; --shadow:0 10px 24px rgba(15,23,42,.10); --text:#0f172a;
  }
  .brandbar{ display:none !important; }      /* desktop only */
  .m-appbar{ display:flex; align-items:center; justify-content:space-between; padding:10px 16px; }
  .m-appbar .logo a{ display:flex; align-items:center; gap:10px; font-weight:900; color:#111; }
  .m-icons{ display:flex; gap:14px; align-items:center; font-size:20px; }
  .nav{ background:linear-gradient(90deg,var(--grad-a),var(--grad-b)); color:#fff; }
  .nav .wrapper{ overflow:hidden }
  .menu{ display:flex; gap:22px; padding:12px 16px; margin:0; list-style:none; white-space:nowrap; overflow:auto; -webkit-overflow-scrolling:touch; }
  .menu li{ list-style:none; flex:0 0 auto }
  .menu a{ color:#fff; font-weight:800; letter-spacing:.2px; padding:0 0 10px; display:inline-block; opacity:.95 }
  .menu .current-menu-item a, .menu a:hover{ border-bottom:3px solid var(--hi) }
  /* ticker */
  .ticker{ background:#f9fafb; border-top:1px solid #eef2f7; border-bottom:1px solid #eef2f7 }
  .ticker .wrapper{ padding:8px 16px; display:flex; gap:10px; align-items:center; }
  .ticker-badge{ color:#e11d48; font-weight:900 }
}

/* ====== DESKTOP HEADER ====== */
@media (min-width: 769px){
  .brandbar{ background:#fff; border-bottom:1px solid #ececec; }
  .brandbar .wrapper{
    max-width:1200px; margin:0 auto; padding:10px 16px;
    display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:16px;
  }
  .brandbar .brand{ display:flex; align-items:center; gap:10px; }
  .brandbar .home-icon{
    display:inline-grid; place-items:center; width:48px; height:48px; border-radius:16px; background:#f3f4f6;
    color:#0f172a; text-decoration:none; font-size:26px; font-weight:900; box-shadow:0 2px 6px rgba(0,0,0,.06);
  }
  .brandbar .brand img{ height:40px; width:auto }
  .brandbar .site-title{ font-weight:900; font-size:22px; color:#111; text-decoration:none }
  .brandbar .search-slot{ justify-self:end }
  .brandbar .search-field{
    width:280px; height:36px; border-radius:9999px; border:none; padding:0 14px;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
  }

  .nav{ position:sticky; top:0; z-index:50; box-shadow:0 2px 0 rgba(0,0,0,.05); background:linear-gradient(90deg,#ff3b3b,#7a2cff); }
  .nav .wrapper{ max-width:1200px; margin:0 auto; padding:0 16px; display:flex; align-items:center; gap:20px; }
  .menu{ display:flex; gap:24px; color:#fff }
  .menu a{ color:#fff; font-weight:800; padding:16px 6px; }
  .menu .current-menu-item a{ border-bottom:3px solid #ffd54a }

  .ticker{ background:#f5f5f5; border-top:1px solid #ececec; border-bottom:1px solid #ececec; }
  .ticker .wrapper{ max-width:1200px; margin:0 auto; padding:8px 16px; display:flex; gap:12px; align-items:center; }
  .ticker-badge{ font-weight:800; color:#c00 }
}

/* ====== CATEGORY (mobile list) ====== */
@media (max-width: 768px){
  .cat-head{ max-width:1100px; margin:8px auto 0; padding:0 16px; }
  .cat-badge{ display:inline-block; background:#e31837; color:#fff; padding:6px 10px; border-radius:10px; font-size:12px; font-weight:800; }
  .cat-title{ margin:8px 0 10px; font-weight:900; font-size:clamp(22px, 6vw, 28px); }
  .wrapper{ width:100%; padding:0 16px; box-sizing:border-box; }
  .m-list{ display:flex; flex-direction:column; gap:18px; margin:12px 0 34px; }
  .m-item{ display:grid; grid-template-columns: 120px 1fr; gap:12px; align-items:center; background:#fff; border:1px solid #e5e7eb; border-radius:14px; box-shadow:0 10px 24px rgba(15,23,42,.06); padding:10px; }
  .m-item .thumb{ width:100%; aspect-ratio:1/1; border-radius:12px; overflow:hidden }
  .m-item img{ width:100%; height:100%; object-fit:cover; display:block }
  .m-item h3{ margin:0 0 4px; font-size:17px; line-height:1.25; color:#0f172a; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
  .m-item .meta{ font-size:12px; color:#6b7280; display:flex; gap:10px; align-items:center; flex-wrap:wrap }
  .m-item .badge{ display:inline-block; background:#e31837; color:#fff; padding:4px 8px; border-radius:8px; font-size:11px; font-weight:800 }
}