/* ============================================================
   Portal Berita Bali – Frontend Styles
   ============================================================ */

/* ── Variables ─────────────────────────────────────────────── */
:root {
  --primary: #dc3545;
  --primary-dark: #a71d2a;
  --text-main: #212529;
  --text-muted: #6c757d;
  --bg-light: #f8f9fa;
  --transition: .2s ease;
}

/* ── Base ───────────────────────────────────────────────────── */
body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  color: var(--text-main);
  background: #fff;
}

a { color: inherit; }
img { max-width: 100%; }

/* ── Navbar ─────────────────────────────────────────────────── */
#mainNavbar .nav-link {
  transition: background var(--transition);
}
#mainNavbar .nav-link:hover,
#mainNavbar .nav-link.active {
  background: rgba(255,255,255,.15);
}
.cat-dot { display: inline-block; }

/* ── Breaking bar ───────────────────────────────────────────── */
.breaking-bar { overflow: hidden; }
.breaking-ticker { white-space: nowrap; }
.breaking-ticker-inner {
  display: inline-flex;
  gap: 3rem;
  animation: ticker 25s linear infinite;
}
.breaking-ticker-inner.paused { animation-play-state: paused; }
.breaking-ticker-inner a:hover { text-decoration: underline !important; }
@keyframes ticker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ── Card Post ───────────────────────────────────────────────── */
.card-post { transition: transform var(--transition), box-shadow var(--transition); }
.card-post:hover { transform: translateY(-3px); box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.12) !important; }
.card-post .card-img-top {
  height: 180px;
  object-fit: cover;
  transition: transform .3s ease;
}
.card-post:hover .card-img-top { transform: scale(1.03); }
.card-img-link { overflow: hidden; display: block; }

/* ── Featured card ───────────────────────────────────────────── */
.card-featured img { transition: transform .3s ease; }
.card-featured:hover img { transform: scale(1.02); }

/* ── Trending section ────────────────────────────────────────── */
.trending-rank { font-size: 1.25rem; min-width: 1.5rem; }

/* ── Post content ────────────────────────────────────────────── */
.post-content { font-size: 1.05rem; line-height: 1.85; }
.post-content h2, .post-content h3 { margin-top: 2rem; font-weight: 700; }
.post-content p { margin-bottom: 1.2rem; }
.post-content img { border-radius: .5rem; margin: 1rem 0; }
.post-content blockquote {
  border-left: 4px solid var(--primary);
  padding: .75rem 1.25rem;
  background: var(--bg-light);
  border-radius: 0 .5rem .5rem 0;
  font-style: italic;
  margin: 1.5rem 0;
}
.post-content a { color: var(--primary); text-decoration: underline; }
.post-content table { width: 100%; margin: 1rem 0; }
.post-content table th, .post-content table td {
  padding: .5rem .75rem;
  border: 1px solid #dee2e6;
}
.post-content table thead { background: var(--bg-light); }

/* ── Pagination ──────────────────────────────────────────────── */
.pagination .page-link { border-radius: .375rem !important; }
.pagination .page-item.active .page-link {
  background: var(--primary);
  border-color: var(--primary);
}

/* ── Comment ─────────────────────────────────────────────────── */
.comment-item { border-left: 3px solid transparent; transition: border-color var(--transition); }
.comment-item:hover { border-left-color: var(--primary); }

/* ── Breadcrumb ──────────────────────────────────────────────── */
.breadcrumb-item a { color: var(--primary); text-decoration: none; }
.breadcrumb-item a:hover { text-decoration: underline; }

/* ── Footer ──────────────────────────────────────────────────── */
.hover-text-white:hover { color: #fff !important; }

/* ── Sticky navbar ───────────────────────────────────────────── */
.sticky-top { z-index: 1030; }

/* ── Main content spacing ────────────────────────────────────── */
.main-content { min-height: 60vh; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .card-featured .row { flex-direction: column; }
  .card-featured .col-md-7 img { max-height: 220px !important; }
  .post-content { font-size: 1rem; }
}