/* Centralized custom styles for Pramuka News */
:root{
  --brand-primary:#5a2ca0; /* purple */
  --brand-dark:#22252b;
  --brand-light:#ffffff;
  --text-muted:#6b7280;
}

body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;color:#0f172a;background:#f7f7f9}

a{color:var(--brand-primary);text-decoration:none}
a:hover{text-decoration:underline}

.topbar{background:#fff;border-bottom:1px solid #eee}
.topbar .date{color:#6b7280;font-size:.9rem}

.navbar-brand .logo-text{font-weight:800;letter-spacing:.5px}

.nav-tabs .nav-link.active{color:var(--brand-primary);font-weight:700}

.section-title{display:flex;align-items:center;gap:.5rem;margin:1rem 0 .75rem}
.section-title .line{height:2px;background:var(--brand-primary);flex:1}

/* Section surface wrapper to visually separate blocks */
.section-surface{background:#ffffff;border:1px solid #e7e9ee;border-radius:14px;padding:16px}
.section-surface .section-title{margin-top:0}
.section-surface + .section-surface{margin-top:18px}

.card-article{border:1px solid #e7e9ee;border-radius:10px;overflow:hidden;background:#fff}
.card-article .badge-cat{position:absolute;left:12px;top:12px;background:var(--brand-primary);color:#fff;border-radius:6px;padding:.25rem .5rem;font-size:.7rem}
.card-article img{width:100%;height:170px;object-fit:cover}
.card-article .content{padding:.75rem}
.card-article .title{font-weight:700;line-height:1.3;color:#111827}
.card-article .meta{font-size:.8rem;color:var(--text-muted)}

/* Slide effect for first card title */
.slide-title{position:relative;display:block;max-height:2.6em;overflow:hidden;width:100%}
.slide-title, .slide-title a{display:inline-block;white-space:nowrap;animation:marquee 12s linear infinite;will-change:transform}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-100%)}}

.footer-dark{background:var(--brand-dark);color:#cbd5e1;padding:2rem 0;margin-top:2rem}
.footer-dark .brand{font-weight:900;color:#fff}
.footer-dark .subtext{max-width:860px;margin:.5rem auto 1.25rem;text-align:center}
.footer-dark .copyright{border-top:1px solid rgba(255,255,255,.08);margin-top:1.25rem;padding-top:1rem;font-size:.85rem;color:#94a3b8}

/* Purple information footer */
.footer-purple{background:var(--brand-primary);color:#efe9ff;margin-top:2rem}
.footer-purple a{color:#fff;text-decoration:none}
.footer-purple a:hover{text-decoration:underline}
.footer-purple .footer-title{font-weight:800;letter-spacing:.2px;margin-bottom:.75rem;color:#fff;text-transform:uppercase;font-size:.95rem}
.footer-purple .footer-quote{color:#f6f3ff;opacity:.95;margin-top:.75rem}
.footer-purple .footer-social .btn{background:rgba(255,255,255,.08);color:#fff;border:none}
.footer-purple .footer-social .btn:hover{background:rgba(255,255,255,.18)}
.footer-purple .divider{border-top:1px solid rgba(255,255,255,.15);margin:1.5rem 0}
.footer-purple .bottom{color:#f3eefe;opacity:.9;font-size:.9rem}
.footer-purple .breadcrumbs a{color:#fff;opacity:.9}

.media-grid img{width:100%;height:140px;object-fit:cover;border-radius:10px;border:1px solid #eee}

.video-wrapper{position:relative;padding-top:56.25%;background:#000;border-radius:10px;overflow:hidden}
.video-wrapper iframe, .video-wrapper video{position:absolute;inset:0;width:100%;height:100%}

.headline-img{width:100%;height:420px;object-fit:cover;border-radius:10px}
.headline-caption{position:absolute;left:0;right:0;bottom:0;padding:16px 18px;background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.6) 60%, rgba(0,0,0,.75) 100%);color:#fff;border-radius:0 0 10px 10px}
.carousel-item{position:relative;border-radius:10px;overflow:hidden}

.badge{border-radius:6px}

/* Back to top floating button */
.back-to-top{position:fixed;right:16px;bottom:20px;z-index:1050;display:none;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;box-shadow:0 6px 18px rgba(0,0,0,.18)}
.back-to-top.show{display:inline-flex}

/* Utilities */
.text-muted-2{color:var(--text-muted)}
.rounded-10{border-radius:10px}

/* DataTables clean white theme */
table.dataTable tbody tr:hover{background:#fafafa}
table.dataTable thead th{background:#fff;border-bottom:2px solid #eee}

/* Print helpers */
@media print{
  .no-print{display:none !important}
}

/* Breadcrumb Navigation */
.breadcrumb {
  background: transparent;
  padding: 0;
  margin: 0;
  font-size: 0.9rem;
}

.breadcrumb-item + .breadcrumb-item::before {
  content: ">";
  color: var(--text-muted);
  font-weight: normal;
}

.breadcrumb-item a {
  color: var(--brand-primary);
  text-decoration: none;
}

.breadcrumb-item a:hover {
  text-decoration: underline;
}

.breadcrumb-item.active {
  color: var(--text-muted);
}

/* Responsive tweaks */
@media (max-width: 576px){
  .section-surface{padding:12px;border-radius:12px}
  /* Headline carousel mobile */
  .headline-img{height:220px}
  .headline-caption{padding:10px 12px}
  .headline-caption .title.h3{font-size:1.15rem}
  .headline-caption .meta{font-size:.8rem}
  .slide-title, .slide-title a{animation-duration:14s}

  /* Baca Juga list-style on mobile */
  .baca-juga .card-article{display:flex;align-items:center;gap:.75rem;border:none;background:transparent}
  .baca-juga .card-article img{width:92px;height:64px;object-fit:cover;border-radius:10px}
  .baca-juga .card-article .content{padding:0}
  .baca-juga .card-article .title{font-size:.95rem}
  .baca-juga .badge-cat{display:none}

  /* Warta list-style on mobile */
  #warta .card-article{display:flex;align-items:center;gap:.75rem;border:none;background:transparent}
  #warta .card-article img{width:92px;height:64px;object-fit:cover;border-radius:10px}
  #warta .card-article .content{padding:0}
  #warta .card-article .title{font-size:.95rem}
  #warta .badge-cat{display:none}
}

@media (max-width: 768px) and (min-width: 577px){
  .headline-img{height:320px}
}

@media (max-width: 400px){
  .headline-img{height:200px}
  .headline-caption .title.h3{font-size:1.05rem}
  .headline-caption .meta{font-size:.75rem}
}