/* ── Scrollbar ── */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ── Quote ── */
.quote-border { border-left: 4px solid #1B3C35; }

/* ── Mobile footer hidden on desktop ── */
@media (min-width: 768px) { .mobile-footer { display: none !important; } }

/* ── Category icon cards ── */
.cat-icon { transition: transform .2s; }
.cat-icon:hover { transform: translateY(-3px); }

/* ── Hero slider dots ── */
.dot { width:8px; height:8px; border-radius:50%; background:#ccc; display:inline-block; transition:.2s; }
.dot.active { background:#1B3C35; width:20px; border-radius:4px; }

/* ── Mobile hero gradient ── */
.hero-gradient { background: linear-gradient(135deg, #1B3C35 0%, #2D5A4C 60%, #3d7a6a 100%); }

/* ── Card hover ── */
.news-card { transition: box-shadow .2s, transform .2s; }
.news-card:hover { box-shadow: 0 8px 24px rgba(27,60,53,.12); transform: translateY(-2px); }

/* ── Live pulse ── */
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.5} }
.live-dot { animation: pulse 1.5s infinite; }

/* ── Grain texture overlay ── */
body::before {
 content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
 background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
 opacity:.4;
}

/* ── WordPress body class compatibility ── */
.wp-content img { max-width:100%; height:auto; }

/* ── Dark header nav links ── */
#header-nav .nav-link-text,
header .bg-satu-green a .nav-link-text,
header .bg-satu-green li a,
header nav a {
  transition: opacity .2s;
}
header .bg-satu-green li a:hover,
header .bg-satu-green a .nav-link-text:hover {
  opacity: .8;
}

/* ── Article card hover effect ── */
article.group:hover .group-hover\:scale-105 {
  transform: scale(1.05);
}

/* ── Search overlay animation ── */
#searchOverlay {
  transition: opacity .2s ease;
}
#searchOverlay:not(.hidden) {
  display: flex !important;
}

/* ── Line clamp fallback ── */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }