/* ════════════════════════════════════════
   VirentaNews — Complete Design System
   Dark/Light Mode + Responsive Grid/Flex
   ════════════════════════════════════════ */

/* ── CSS Variables (Dark default) ── */
:root, [data-theme="dark"] {
  --bg: #18181b;
  --bg-card: #1e1e24;
  --bg-side: #141417;
  --bg-header: #111114;
  --bg-hover: #27272f;
  --border: #2a2a35;
  --border-light: #1f1f28;
  --text-primary: #f4f4f5;
  --text-secondary: #a1a1aa;
  --text-muted: #52525b;
  --accent: #3b82f6;
  --accent-purple: #7c3aed;
  --accent-glow: rgba(59,130,246,0.25);
  --cat-bg: rgba(59,130,246,0.12);
  --cat-text: #93c5fd;
  --scrollbar: #2a2a35;
}

[data-theme="light"] {
  --bg: #f4f4f5;
  --bg-card: #ffffff;
  --bg-side: #f0f0f4;
  --bg-header: #ffffff;
  --bg-hover: #f0f0f4;
  --border: #e4e4e7;
  --border-light: #ebebef;
  --text-primary: #18181b;
  --text-secondary: #52525b;
  --text-muted: #a1a1aa;
  --accent: #2563eb;
  --accent-purple: #6d28d9;
  --accent-glow: rgba(37,99,235,0.15);
  --cat-bg: rgba(37,99,235,0.08);
  --cat-text: #1d4ed8;
  --scrollbar: #d4d4d8;
}

/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body {
  background: var(--bg) !important;
  color: var(--text-primary) !important;
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-size: 15px;
  line-height: 1.6;
  margin: 0 !important;
  padding: 0 !important;
}
.wp-site-blocks { background: var(--bg) !important; padding: 0 !important; }
img { display: block; max-width: 100%; }
a { text-decoration: none !important; color: inherit !important; }

/* ── HEADER ── */
.vn-header {
  background: var(--bg-header) !important;
  border-bottom: 1px solid var(--border) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 200 !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.vn-header-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
  height: 58px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.vn-logo {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-shrink: 0 !important;
  text-decoration: none !important;
}
.vn-logo-icon { display: flex; align-items: center; flex-shrink: 0; }
.vn-logo-text {
  font-size: 1.1rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  color: var(--text-primary) !important;
  white-space: nowrap !important;
}
.vn-logo-accent { color: var(--accent) !important; }
.vn-nav {
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
  flex: 1 !important;
  justify-content: center !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}
.vn-nav::-webkit-scrollbar { display: none; }
.vn-nav-link {
  display: inline-flex !important;
  align-items: center !important;
  padding: 5px 11px !important;
  border-radius: 6px !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  color: var(--text-muted) !important;
  white-space: nowrap !important;
  transition: color 0.15s, background 0.15s !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}
.vn-nav-link:hover { color: var(--text-primary) !important; background: var(--bg-hover) !important; }
.vn-nav-active { color: var(--text-primary) !important; background: var(--bg-hover) !important; }
.vn-header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
}
.vn-icon-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 8px !important;
  border: 1px solid var(--border) !important;
  background: transparent !important;
  color: var(--text-secondary) !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
  padding: 0 !important;
}
.vn-icon-btn:hover { background: var(--bg-hover) !important; color: var(--text-primary) !important; border-color: var(--border) !important; }
.vn-lang-wrap { position: relative !important; }
.vn-lang-drop {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  padding: 6px !important;
  min-width: 150px !important;
  display: none !important;
  z-index: 999 !important;
  box-shadow: 0 12px 32px rgba(0,0,0,0.4) !important;
}
.vn-lang-drop.vn-open { display: block !important; }
.vn-lang-item {
  display: block !important;
  padding: 7px 12px !important;
  font-size: 0.8rem !important;
  color: var(--text-secondary) !important;
  border-radius: 6px !important;
  transition: all 0.1s !important;
}
.vn-lang-item:hover { background: var(--bg-hover) !important; color: var(--text-primary) !important; }
.vn-menu-btn {
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 8px !important;
  border: 1px solid var(--border) !important;
  background: transparent !important;
  color: var(--text-secondary) !important;
  cursor: pointer !important;
  padding: 0 !important;
}

/* ── MAIN CONTENT WRAPPER ── */
.vn-body-wrap-blocks {
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding: 24px 20px 48px !important;
  background: transparent !important;
}
main.wp-block-group, .single main, .wp-singular main { background: transparent !important; }
.single .wp-block-group, .wp-singular .wp-block-group { background: transparent !important; }
.wp-block-group { background: transparent !important; }

/* ── SECTION HEADERS ── */
.vn-section-head {
  display: flex !important;
  align-items: center !important;
  margin-bottom: 18px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid var(--border) !important;
}
.vn-section-label {
  font-size: 0.65rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  color: var(--text-primary) !important;
  padding-left: 10px !important;
  border-left: 3px solid var(--accent) !important;
}

/* ── FEED LAYOUT (2 columns) ── */
.vn-feed-layout-blocks.wp-block-columns {
  display: grid !important;
  grid-template-columns: 68% 32% !important;
  gap: 28px !important;
  align-items: flex-start !important;
  margin: 0 !important;
}
.vn-feed-main-col, .vn-feed-side-col {
  width: auto !important;
  flex: unset !important;
}
.vn-feed-side-col {
  position: sticky !important;
  top: 74px !important;
  max-height: calc(100vh - 80px) !important;
  overflow-y: auto !important;
  scrollbar-width: thin !important;
  scrollbar-color: var(--scrollbar) transparent !important;
  padding-right: 4px !important;
}
.vn-feed-side-col::-webkit-scrollbar { width: 3px; }
.vn-feed-side-col::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 2px; }

/* ── HORIZONTAL CARDS (Main Feed) ── */
.vn-main-query .wp-block-post-template,
.vn-cards-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.vn-card-h {
  display: flex !important;
  flex-direction: row !important;
  gap: 0 !important;
  align-items: stretch !important;
  padding: 16px 0 !important;
  border-bottom: 1px solid var(--border-light) !important;
  transition: background 0.15s !important;
}
.vn-card-h:hover { background: var(--bg-hover) !important; margin: 0 -12px !important; padding: 16px 12px !important; border-radius: 8px !important; border-bottom-color: transparent !important; }
.vn-card-h-img {
  width: 180px !important;
  min-width: 180px !important;
  max-width: 180px !important;
  height: 120px !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  margin-right: 16px !important;
}
.vn-card-h-img a {
  display: block !important;
  width: 180px !important;
  height: 120px !important;
  aspect-ratio: unset !important;
  overflow: hidden !important;
}
.vn-card-h-img img {
  width: 180px !important;
  height: 120px !important;
  object-fit: cover !important;
  transition: transform 0.3s !important;
}
.vn-card-h:hover .vn-card-h-img img { transform: scale(1.05) !important; }
.vn-card-h-content {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  position: relative !important;
}
.vn-card-h-top {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
}
.vn-cat-badge a, .vn-cat-badge {
  display: inline-flex !important;
  align-items: center !important;
  padding: 3px 8px !important;
  background: var(--cat-bg) !important;
  color: var(--cat-text) !important;
  font-size: 0.6rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  border-radius: 4px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}
.vn-card-time, .vn-card-time time { color: var(--text-muted) !important; font-size: 0.7rem !important; }
.vn-card-h-title a, .vn-card-h-title {
  font-size: 1rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  color: var(--text-primary) !important;
  margin: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
.vn-card-h-title a:hover { color: var(--accent) !important; }
.vn-card-h-excerpt, .vn-card-h-excerpt p {
  color: var(--text-secondary) !important;
  font-size: 0.82rem !important;
  line-height: 1.5 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  margin: 0 !important;
}

/* ── AI SUMMARY BADGE (Glow effect) ── */
.vn-ai-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  margin-top: auto !important;
  padding: 4px 10px !important;
  background: linear-gradient(135deg, rgba(59,130,246,0.15), rgba(124,58,237,0.15)) !important;
  border: 1px solid rgba(59,130,246,0.3) !important;
  border-radius: 20px !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  color: #93c5fd !important;
  width: fit-content !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  box-shadow: 0 0 12px rgba(59,130,246,0.15) !important;
}
.vn-ai-badge:hover {
  background: linear-gradient(135deg, rgba(59,130,246,0.25), rgba(124,58,237,0.25)) !important;
  border-color: rgba(59,130,246,0.5) !important;
  box-shadow: 0 0 20px rgba(59,130,246,0.3) !important;
  color: #bfdbfe !important;
}
.vn-ai-badge svg { flex-shrink: 0; color: #60a5fa; }

/* ── PAGINATION ── */
.vn-pagination.wp-block-query-pagination {
  display: flex !important;
  gap: 6px !important;
  justify-content: center !important;
  margin-top: 28px !important;
  padding-top: 20px !important;
  border-top: 1px solid var(--border) !important;
}
.vn-pagination .wp-block-query-pagination-numbers a,
.vn-pagination .wp-block-query-pagination-previous a,
.vn-pagination .wp-block-query-pagination-next a {
  background: var(--bg-card) !important;
  color: var(--text-secondary) !important;
  padding: 6px 13px !important;
  border-radius: 6px !important;
  border: 1px solid var(--border) !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  transition: all 0.15s !important;
}
.vn-pagination .wp-block-query-pagination-numbers a:hover,
.vn-pagination .wp-block-query-pagination-previous a:hover,
.vn-pagination .wp-block-query-pagination-next a:hover,
.vn-pagination .wp-block-query-pagination-numbers .current {
  background: var(--accent) !important;
  color: #fff !important;
  border-color: var(--accent) !important;
}

/* ── TRENDING SIDEBAR ── */
.vn-trending-query .wp-block-post-template,
.vn-trending-list {
  display: flex !important;
  flex-direction: column !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
}
.vn-trend-item {
  display: flex !important;
  gap: 10px !important;
  align-items: flex-start !important;
  padding: 11px 0 !important;
  border-bottom: 1px solid var(--border-light) !important;
  transition: all 0.15s !important;
}
.vn-trend-item:last-child { border-bottom: none !important; }
.vn-trend-thumb {
  width: 60px !important;
  min-width: 60px !important;
  height: 48px !important;
  border-radius: 5px !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}
.vn-trend-thumb a { display: block !important; width: 60px !important; height: 48px !important; aspect-ratio: unset !important; overflow: hidden !important; }
.vn-trend-thumb img { width: 60px !important; height: 48px !important; object-fit: cover !important; }
.vn-trend-body { flex: 1 !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; gap: 3px !important; }
.vn-trend-cat a, .vn-trend-cat {
  color: var(--accent) !important;
  font-size: 0.58rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
}
.vn-trend-title a, .vn-trend-title {
  color: var(--text-primary) !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  margin: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
.vn-trend-title a:hover { color: var(--accent) !important; }
.vn-trend-time, .vn-trend-time time { color: var(--text-muted) !important; font-size: 0.65rem !important; }

/* ── SINGLE POST ── */
.vn-single-wrap {
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding: 24px 20px 48px !important;
}
.vn-single-cols.wp-block-columns {
  display: grid !important;
  grid-template-columns: 63% 37% !important;
  gap: 32px !important;
  align-items: flex-start !important;
  margin: 0 !important;
}
.vn-article-col, .vn-single-side-col { width: auto !important; flex: unset !important; }
.vn-single-side-col {
  position: sticky !important;
  top: 74px !important;
  max-height: calc(100vh - 80px) !important;
  overflow-y: auto !important;
  scrollbar-width: thin !important;
}
.vn-post-cat-badge a, .vn-post-cat-badge {
  display: inline-flex !important;
  align-items: center !important;
  padding: 3px 8px !important;
  background: var(--cat-bg) !important;
  color: var(--cat-text) !important;
  font-size: 0.6rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  border-radius: 4px !important;
  margin-bottom: 10px !important;
}
.vn-post-h1, .wp-block-post-title {
  color: var(--text-primary) !important;
  font-size: 1.85rem !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  margin: 8px 0 14px !important;
  letter-spacing: -0.02em !important;
}
.vn-post-meta-row { gap: 14px !important; margin-bottom: 12px !important; }
.vn-meta-author, .wp-block-post-author-name { color: var(--text-secondary) !important; font-size: 0.78rem !important; font-weight: 600 !important; }
.vn-meta-date time, .wp-block-post-date time, .vn-meta-date, .wp-block-post-date { color: var(--text-muted) !important; font-size: 0.72rem !important; }
.vn-post-lead, .wp-block-post-excerpt, .wp-block-post-excerpt p, .wp-block-post-excerpt__excerpt {
  color: var(--text-secondary) !important;
  font-size: 1rem !important;
  line-height: 1.65 !important;
  margin-bottom: 16px !important;
}
.vn-sep, .wp-block-separator { border-color: var(--border) !important; background: var(--border) !important; margin: 14px 0 !important; }
.vn-post-hero img, .wp-block-post-featured-image img { width: 100% !important; border-radius: 10px !important; margin-bottom: 24px !important; }
.vn-post-body, .wp-block-post-content, .entry-content { color: var(--text-secondary) !important; font-size: 1rem !important; line-height: 1.8 !important; }
.vn-post-body p, .wp-block-post-content p, .entry-content p { color: var(--text-secondary) !important; margin-bottom: 1.2em !important; }
.vn-post-body h2, .wp-block-post-content h2, .entry-content h2 { color: var(--text-primary) !important; font-size: 1.3rem !important; font-weight: 700 !important; margin-top: 2rem !important; padding-bottom: 10px !important; border-bottom: 1px solid var(--border) !important; }
.vn-post-body h3, .wp-block-post-content h3, .entry-content h3 { color: var(--text-primary) !important; font-size: 1.1rem !important; font-weight: 700 !important; margin-top: 1.6rem !important; }
.entry-content li, .wp-block-post-content li { color: var(--text-secondary) !important; margin-bottom: 6px !important; }
.entry-content ul li::marker, .entry-content ol li::marker { color: var(--accent) !important; }
.entry-content a, .wp-block-post-content a { color: var(--accent) !important; }
.entry-content strong, .wp-block-post-content strong { color: var(--text-primary) !important; }
.entry-content blockquote, .wp-block-quote { background: var(--bg-card) !important; border-left: 3px solid var(--accent) !important; padding: 14px 18px !important; border-radius: 0 8px 8px 0 !important; margin: 16px 0 !important; }
.entry-content blockquote p, .wp-block-quote p { color: var(--text-secondary) !important; }

/* ── MORE STORIES SIDEBAR ── */
.vn-more-query .wp-block-post-template, .vn-more-list { display: flex !important; flex-direction: column !important; list-style: none !important; margin: 0 !important; padding: 0 !important; gap: 0 !important; }
.vn-more-item { display: flex !important; gap: 10px !important; padding: 10px 0 !important; border-bottom: 1px solid var(--border-light) !important; align-items: flex-start !important; }
.vn-more-item:last-child { border-bottom: none !important; }
.vn-more-thumb { width: 64px !important; min-width: 64px !important; height: 50px !important; border-radius: 5px !important; overflow: hidden !important; flex-shrink: 0 !important; }
.vn-more-thumb a { display: block !important; width: 64px !important; height: 50px !important; aspect-ratio: unset !important; overflow: hidden !important; }
.vn-more-thumb img { width: 64px !important; height: 50px !important; object-fit: cover !important; }
.vn-more-body { flex: 1 !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; gap: 3px !important; }
.vn-more-cat a, .vn-more-cat { color: var(--accent) !important; font-size: 0.58rem !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; }
.vn-more-title a, .vn-more-title { color: var(--text-primary) !important; font-size: 0.76rem !important; font-weight: 600 !important; line-height: 1.35 !important; margin: 0 !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; }
.vn-more-title a:hover { color: var(--accent) !important; }
.vn-more-time, .vn-more-time time { color: var(--text-muted) !important; font-size: 0.62rem !important; }

/* ── FAQ / DETAILS ── */
details { background: var(--bg-card) !important; border: 1px solid var(--border) !important; border-radius: 8px !important; margin-bottom: 8px !important; overflow: hidden !important; }
details div { background: var(--bg-card) !important; }
details summary { color: var(--text-primary) !important; font-weight: 600 !important; font-size: 0.88rem !important; cursor: pointer !important; padding: 13px 16px !important; background: var(--bg-hover) !important; list-style: none !important; }
details summary::-webkit-details-marker { display: none !important; }
details summary::before { content: "+ " !important; color: var(--accent) !important; font-weight: 700 !important; }
details[open] summary::before { content: "- " !important; }
details p, details li { color: var(--text-secondary) !important; font-size: 0.88rem !important; line-height: 1.6 !important; padding: 12px 16px !important; margin: 0 !important; }

/* ── JETPACK SHARE ── */
.sharedaddy, .sd-sharing-enabled { background: transparent !important; border: none !important; }
.sharedaddy h3, .sd-title { color: var(--text-muted) !important; font-size: 0.6rem !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; }
.sd-content ul { background: transparent !important; }
.sd-content ul li a { background: var(--bg-card) !important; color: var(--text-secondary) !important; border: 1px solid var(--border) !important; border-radius: 6px !important; }
.sd-content ul li a:hover { background: var(--bg-hover) !important; color: var(--text-primary) !important; }

/* ── FOOTER ── */
.wp-block-template-part footer, footer.wp-block-template-part {
  background: var(--bg-side) !important;
  border-top: 1px solid var(--border) !important;
  padding: 28px 20px !important;
}
footer, footer p, footer span { color: var(--text-muted) !important; font-size: 0.78rem !important; }
footer a { color: var(--text-muted) !important; transition: color 0.15s !important; }
footer a:hover { color: var(--text-secondary) !important; }

/* ── GENERAL ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 3px; }
.wp-block-separator, hr { border-color: var(--border) !important; background: var(--border) !important; }
figcaption { color: var(--text-muted) !important; font-size: 0.72rem !important; text-align: center !important; margin-top: 8px !important; }

/* ══════════════════════════
   RESPONSIVE — Mobile First
   ══════════════════════════ */

/* Tablet: 1200px */
@media (max-width: 1200px) {
  .vn-feed-layout-blocks.wp-block-columns { grid-template-columns: 64% 36% !important; gap: 20px !important; }
  .vn-single-cols.wp-block-columns { grid-template-columns: 60% 40% !important; gap: 24px !important; }
}

/* Small tablet: 900px */
@media (max-width: 900px) {
  .vn-nav { display: none !important; }
  .vn-nav.vn-nav-open {
    display: flex !important;
    position: fixed !important;
    top: 58px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: var(--bg-header) !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 16px !important;
    z-index: 300 !important;
    gap: 4px !important;
    border-top: 1px solid var(--border) !important;
    overflow-y: auto !important;
  }
  .vn-nav.vn-nav-open .vn-nav-link { width: 100% !important; padding: 12px 16px !important; font-size: 0.9rem !important; }
  .vn-menu-btn { display: flex !important; }
  .vn-feed-layout-blocks.wp-block-columns { grid-template-columns: 1fr !important; gap: 0 !important; }
  .vn-feed-side-col { position: relative !important; top: 0 !important; max-height: none !important; overflow-y: visible !important; border-top: 1px solid var(--border) !important; padding-top: 24px !important; margin-top: 8px !important; }
  .vn-single-cols.wp-block-columns { grid-template-columns: 1fr !important; gap: 24px !important; }
  .vn-single-side-col { position: relative !important; top: 0 !important; max-height: none !important; overflow-y: visible !important; border-top: 1px solid var(--border) !important; padding-top: 24px !important; }
}

/* Mobile: 640px */
@media (max-width: 640px) {
  .vn-header-inner { padding: 0 14px !important; gap: 10px !important; }
  .vn-logo-text { font-size: 0.95rem !important; }
  .vn-body-wrap-blocks { padding: 14px 12px 32px !important; }
  .vn-single-wrap { padding: 14px 12px 32px !important; }
  .vn-card-h { flex-direction: column !important; gap: 10px !important; }
  .vn-card-h-img { width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: 180px !important; margin-right: 0 !important; }
  .vn-card-h-img a { width: 100% !important; height: 180px !important; }
  .vn-card-h-img img { width: 100% !important; height: 180px !important; }
  .vn-trend-thumb { width: 54px !important; min-width: 54px !important; height: 42px !important; }
  .vn-trend-thumb a { width: 54px !important; height: 42px !important; }
  .vn-trend-thumb img { width: 54px !important; height: 42px !important; }
  .vn-post-h1, .wp-block-post-title { font-size: 1.4rem !important; }
  .vn-more-query .wp-block-post-template { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; flex-direction: unset !important; }
}

/* Small mobile: 420px */
@media (max-width: 420px) {
  .vn-card-h-img { height: 150px !important; }
  .vn-card-h-img a { height: 150px !important; }
  .vn-card-h-img img { height: 150px !important; }
  .vn-more-query .wp-block-post-template { grid-template-columns: 1fr !important; }
}
/* Admin bar offset */
body.admin-bar .vn-header { top: 32px !important; }
@media screen and (max-width: 782px) {
  body.admin-bar .vn-header { top: 46px !important; }
}

/* ── Dark mode overrides for post_enhancer inline-styled sections ── */
[data-theme="dark"] .entry-content div[style*="background:rgba(99,102,241"],
[data-theme="dark"] .entry-content div[style*="background: rgba(99,102,241"] {
  background: rgba(99,102,241,0.15) !important;
}
[data-theme="dark"] .entry-content div[style*="background:rgba(99,102,241"] li,
[data-theme="dark"] .entry-content div[style*="background: rgba(99,102,241"] li {
  color: #c7d2fe !important;
}
[data-theme="dark"] .entry-content div[style*="background:#f8fafc"],
[data-theme="dark"] .entry-content div[style*="background: #f8fafc"],
[data-theme="dark"] .entry-content div[style*="background:#f0f9ff"],
[data-theme="dark"] .entry-content div[style*="background: #f0f9ff"] {
  background: #1e2035 !important;
}
[data-theme="dark"] .entry-content div[style*="background:#f8fafc"] a,
[data-theme="dark"] .entry-content div[style*="background: #f8fafc"] a {
  color: #818cf8 !important;
}
[data-theme="dark"] .entry-content div[style*="background:#f8fafc"] [style*="color:#64748b"],
[data-theme="dark"] .entry-content div[style*="background:#f8fafc"] [style*="color: #64748b"] {
  color: #94a3b8 !important;
}
[data-theme="dark"] .entry-content details {
  border-color: #2d2d3d !important;
}
[data-theme="dark"] .entry-content details summary {
  background: #1a1a2e !important;
  color: #e2e8f0 !important;
}
[data-theme="dark"] .entry-content details > div {
  background: #13131f !important;
  color: #cbd5e1 !important;
}
[data-theme="dark"] .entry-content div[style*="color:#0f172a"],
[data-theme="dark"] .entry-content p[style*="color:#0f172a"],
[data-theme="dark"] .entry-content li[style*="color:#0f172a"],
[data-theme="dark"] .entry-content p[style*="color:#374151"],
[data-theme="dark"] .entry-content li[style*="color:#334155"] {
  color: #cbd5e1 !important;
}
[data-theme="dark"] .entry-content div[style*="color:#64748b"],
[data-theme="dark"] .entry-content div[style*="color: #64748b"] {
  color: #94a3b8 !important;
}
/* Wikipedia background section */
[data-theme="dark"] .entry-content div[style*="background:#f0f9ff"] div[style*="color:#0284c7"] {
  color: #38bdf8 !important;
}
[data-theme="dark"] .entry-content div[style*="background:#f0f9ff"] p {
  color: #cbd5e1 !important;
}
/* Numbers fact */
[data-theme="dark"] .entry-content div[style*="background:#fefce8"] {
  background: #1c1a07 !important;
  border-left-color: #ca8a04 !important;
}
[data-theme="dark"] .entry-content div[style*="background:#fefce8"] p {
  color: #fef08a !important;
}
/* vn-keywords-block */
.vn-keywords-block { padding: 8px 0 16px; }
.vn-keywords-block a {
  display: inline-block;
  background: var(--cat-bg, rgba(59,130,246,0.12));
  color: var(--cat-text, #93c5fd) !important;
  border: 1px solid rgba(59,130,246,0.2);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: .78rem;
  font-weight: 600;
  text-decoration: none !important;
  margin: 3px 4px 3px 0;
  text-transform: uppercase;
  letter-spacing: .6px;
}
.vn-keywords-block a:hover { background: var(--accent); color: #fff !important; }

/* ── Search Overlay ─────────────────────────────────────── */
.vn-search-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(6px);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 80px;
  opacity: 0; visibility: hidden;
  transition: opacity .22s, visibility .22s;
}
.vn-search-overlay.vn-search-open {
  opacity: 1; visibility: visible;
}
.vn-search-box {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-card, #1e1e24);
  border: 1px solid var(--border, #2a2a35);
  border-radius: 14px;
  padding: 6px 6px 6px 20px;
  width: min(680px, 90vw);
  box-shadow: 0 24px 60px rgba(0,0,0,0.5);
}
.vn-search-form {
  display: flex; align-items: center; flex: 1; gap: 8px;
}
.vn-search-input {
  flex: 1; background: none; border: none; outline: none;
  color: var(--text-primary, #f4f4f5);
  font-size: 1.1rem; font-family: inherit;
  caret-color: var(--accent, #3b82f6);
}
.vn-search-input::placeholder { color: var(--text-muted, #52525b); }
.vn-search-submit {
  background: var(--accent, #3b82f6); border: none;
  color: #fff; border-radius: 8px;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  transition: background .15s;
}
.vn-search-submit:hover { background: #2563eb; }
.vn-search-close {
  background: none; border: none;
  color: var(--text-muted, #52525b);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 6px; border-radius: 6px;
  transition: color .15s;
}
.vn-search-close:hover { color: var(--text-primary, #f4f4f5); }

/* Light mode search */
[data-theme="light"] .vn-search-box {
  background: #fff; border-color: #e2e8f0;
}
[data-theme="light"] .vn-search-input { color: #18181b; }

/* ── Key Takeaways & FAQ — daha belirgin dark mode stiller ── */
[data-theme="dark"] .entry-content div[style*="background:rgba(99,102,241"] {
  background: rgba(99,102,241,0.18) !important;
  border-left-color: #818cf8 !important;
  box-shadow: 0 2px 16px rgba(99,102,241,0.12);
}
[data-theme="dark"] .entry-content div[style*="color:#6366f1"] {
  color: #a5b4fc !important;
}
[data-theme="dark"] .entry-content li[style*="color:#334155"] {
  color: #e2e8f0 !important;
}
/* TOC dark */
[data-theme="dark"] .entry-content div[style*="background:#f8fafc"][style*="border:1px"] {
  background: #16182a !important;
  border-color: #2d2d45 !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}
[data-theme="dark"] .entry-content div[style*="background:#f8fafc"] [style*="color:#64748b"],
[data-theme="dark"] .entry-content div[style*="background:#f8fafc"] [style*="color: #64748b"] {
  color: #7c87a8 !important;
}
[data-theme="dark"] .entry-content div[style*="background:#f8fafc"] a[style*="color:#6366f1"] {
  color: #a5b4fc !important;
}
/* FAQ wrapper */
[data-theme="dark"] .entry-content div[style*="margin:40px 0 24px"] [style*="color:#64748b"] {
  color: #94a3b8 !important;
}
[data-theme="dark"] .entry-content details summary {
  background: #1a1a2e !important;
  color: #e2e8f0 !important;
  font-weight: 600;
}
[data-theme="dark"] .entry-content details[open] summary {
  border-bottom: 1px solid #2d2d45;
}
[data-theme="dark"] .entry-content details > div[style*="background:#fff"] {
  background: #111120 !important;
  color: #cbd5e1 !important;
}
[data-theme="dark"] .entry-content details > div [style*="color:#475569"] {
  color: #cbd5e1 !important;
}