/* ==========================================================================
   Viral-Vibe News — design system + component styles
   Ported from the React source (src/index.css + Tailwind tokens).
   ========================================================================== */

/* --- Design tokens ------------------------------------------------------- */
:root {
  --vv-bg-page: #F8FAFC;
  --vv-bg-card: #FFFFFF;
  --vv-bg-muted: #F1F5F9;
  --vv-border-main: #E2E8F0;
  --vv-border-strong: #CBD5E1;
  --vv-text-primary: #0F172A;
  --vv-text-secondary: #334155;
  --vv-text-muted: #64748B;
  --vv-text-heading: #020617;
  --vv-accent: #DC2626;
  --vv-accent-soft: #FEE2E2;
  --vv-font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --vv-font-serif: 'Playfair Display', Georgia, Cambria, 'Times New Roman', Times, serif;
  --vv-font-mono: 'Space Mono', monospace;
  --vv-radius: 12px;
  --vv-shadow: 0 1px 3px rgba(2, 6, 23, 0.08), 0 1px 2px rgba(2, 6, 23, 0.04);
  --vv-shadow-lg: 0 10px 30px rgba(2, 6, 23, 0.14);
  --vv-maxw: 1280px;
}

.dark {
  --vv-bg-page: #0F172A;
  --vv-bg-card: #1E293B;
  --vv-bg-muted: #172033;
  --vv-border-main: #334155;
  --vv-border-strong: #475569;
  --vv-text-primary: #F8FAFC;
  --vv-text-secondary: #94A3B8;
  --vv-text-muted: #64748B;
  --vv-text-heading: #FFFFFF;
  --vv-accent: #EF4444;
  --vv-accent-soft: rgba(239, 68, 68, 0.15);
  --vv-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  --vv-shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.55);
}

body {
  background: var(--vv-bg-page);
  color: var(--vv-text-primary);
  font-family: var(--vv-font-sans);
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.2s, color 0.2s;
}

.vv-serif { font-family: var(--vv-font-serif); }
.vv-mono  { font-family: var(--vv-font-mono); }
.vv-accent { color: var(--vv-accent); }
.vv-accent-bg { background: var(--vv-accent); color: #fff; }

.vv-container { max-width: var(--vv-maxw); margin: 0 auto; padding: 0 24px; }

/* --- Buttons & pills ----------------------------------------------------- */
.vv-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--vv-font-sans); font-weight: 600; font-size: 13px;
  line-height: 1; padding: 10px 16px; border-radius: 9999px;
  border: 1px solid var(--vv-border-strong); background: var(--vv-bg-card);
  color: var(--vv-text-primary); cursor: pointer; text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
  white-space: nowrap;
}
.vv-btn:hover { border-color: var(--vv-accent); color: var(--vv-accent); }
.vv-btn:active { transform: scale(0.97); }
.vv-btn--solid { background: var(--vv-accent); border-color: var(--vv-accent); color: #fff; }
.vv-btn--solid:hover { background: #b91c1c; color: #fff; }
.vv-btn--icon { padding: 9px 11px; }
.vv-btn:focus-visible { outline: 2px solid var(--vv-accent); outline-offset: 2px; }

.vv-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--vv-font-sans); font-weight: 600; font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 9999px;
  border: 1px solid var(--vv-border-main); color: var(--vv-text-secondary);
  cursor: pointer; text-decoration: none; transition: all 0.15s;
}
.vv-pill:hover { border-color: var(--vv-accent); color: var(--vv-accent); }
.vv-pill.is-active { background: var(--vv-accent); border-color: var(--vv-accent); color: #fff; }

/* --- Header ribbon ------------------------------------------------------- */
.vv-ribbon {
  background: #0F172A; color: #CBD5E1; font-size: 12px;
  padding: 8px 0; border-bottom: 1px solid #1E293B;
}
.vv-ribbon-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.vv-live-badge { display: inline-flex; align-items: center; gap: 6px; color: #F87171; font-weight: 700; letter-spacing: 0.08em; font-size: 11px; }
.vv-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #EF4444; animation: vv-pulse 1.6s infinite; }
.vv-clocks { display: flex; gap: 16px; }
.vv-clock { display: flex; gap: 6px; align-items: center; }
.vv-clock b { color: #E2E8F0; font-weight: 600; }
.vv-ribbon-actions { display: flex; gap: 8px; }

/* --- Header main --------------------------------------------------------- */
.vv-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--vv-bg-card); border-bottom: 1px solid var(--vv-border-main);
  backdrop-filter: blur(8px); transition: background 0.2s;
}
.vv-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 24px; max-width: var(--vv-maxw); margin: 0 auto; flex-wrap: wrap; }
.vv-brand { display: flex; flex-direction: column; gap: 2px; text-decoration: none; }
.vv-brand-title { font-family: var(--vv-font-serif); font-weight: 800; font-size: 26px; line-height: 1; letter-spacing: -0.02em; color: var(--vv-text-heading); }
.vv-brand-title .vv-accent { color: var(--vv-accent); }
.vv-brand-tagline { font-size: 11px; color: var(--vv-text-muted); letter-spacing: 0.06em; }
.vv-header-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vv-nav { display: flex; gap: 20px; align-items: center; }
.vv-nav a { font-weight: 600; font-size: 14px; color: var(--vv-text-secondary); text-decoration: none; }
.vv-nav a:hover, .vv-nav a.is-active { color: var(--vv-accent); }

/* --- Ticker -------------------------------------------------------------- */
.vv-ticker {
  display: flex; align-items: stretch; overflow: hidden;
  background: var(--vv-bg-card); border-bottom: 1px solid var(--vv-border-main);
}
.vv-ticker-label {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  background: var(--vv-accent); color: #fff; font-weight: 700;
  font-size: 11px; letter-spacing: 0.1em; padding: 8px 16px; z-index: 1;
}
.vv-ticker-viewport { overflow: hidden; flex: 1 1 auto; display: flex; align-items: center; }
.vv-ticker-track { display: inline-flex; animation: vv-marquee 35s linear infinite; white-space: nowrap; }
.vv-ticker-track:hover { animation-play-state: paused; }
.vv-ticker-item {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 18px; font-size: 13px; font-weight: 500;
  color: var(--vv-text-secondary); text-decoration: none;
}
.vv-ticker-item:hover { color: var(--vv-accent); }
.vv-ticker-item::before { content: "•"; color: var(--vv-accent); font-weight: 700; }
@keyframes vv-marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes vv-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* --- Hero ---------------------------------------------------------------- */
.vv-hero { display: grid; grid-template-columns: 2fr 1fr; gap: 28px; padding: 28px 0; }
.vv-hero-spotlight { text-decoration: none; color: inherit; display: block; }
.vv-hero-img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--vv-radius); box-shadow: var(--vv-shadow); }
.vv-hero-tag { display: inline-block; margin: 16px 0 8px; }
.vv-hero-title { font-family: var(--vv-font-serif); font-size: 38px; line-height: 1.12; font-weight: 800; color: var(--vv-text-heading); letter-spacing: -0.01em; }
.vv-hero-title:hover { color: var(--vv-accent); }
.vv-hero-sub { color: var(--vv-text-secondary); font-size: 17px; line-height: 1.55; margin-top: 10px; }
.vv-hero-meta { display: flex; gap: 14px; margin-top: 14px; font-size: 13px; color: var(--vv-text-muted); flex-wrap: wrap; }

.vv-trending { border-left: 1px solid var(--vv-border-main); padding-left: 24px; }
.vv-trending-head { font-family: var(--vv-font-serif); font-size: 22px; font-weight: 700; color: var(--vv-text-heading); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.vv-trending-head .vv-fire { color: var(--vv-accent); }
.vv-trend-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.vv-trend-item { display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--vv-border-main); cursor: pointer; text-decoration: none; }
.vv-trend-item:last-child { border-bottom: none; }
.vv-trend-rank { font-family: var(--vv-font-mono); font-size: 22px; font-weight: 700; color: var(--vv-border-strong); min-width: 28px; }
.vv-trend-item:hover .vv-trend-rank, .vv-trend-item:hover .vv-trend-title { color: var(--vv-accent); }
.vv-trend-title { font-weight: 600; font-size: 15px; line-height: 1.4; color: var(--vv-text-primary); }
.vv-trend-views { font-size: 12px; color: var(--vv-text-muted); margin-top: 4px; }

/* --- Category nav + search ---------------------------------------------- */
.vv-catnav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 18px 0; border-top: 1px solid var(--vv-border-main); }
.vv-catnav .vv-pill { font-size: 13px; letter-spacing: 0.04em; text-transform: none; padding: 7px 14px; }
.vv-search { flex: 1 1 100%; display: flex; gap: 8px; margin-top: 12px; }
.vv-search-input {
  flex: 1 1 auto; padding: 10px 16px; border: 1px solid var(--vv-border-strong);
  border-radius: 9999px; background: var(--vv-bg-card); color: var(--vv-text-primary);
  font-family: var(--vv-font-sans); font-size: 14px;
}
.vv-search-input:focus { outline: 2px solid var(--vv-accent); outline-offset: 0; border-color: transparent; }
.vv-region-select {
  padding: 10px 14px; border: 1px solid var(--vv-border-strong); border-radius: 9999px;
  background: var(--vv-bg-card); color: var(--vv-text-primary); font-size: 13px;
}

/* --- Article grid & cards ------------------------------------------------ */
.vv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 12px 0 40px; }
.vv-card {
  display: flex; flex-direction: column; background: var(--vv-bg-card);
  border: 1px solid var(--vv-border-main); border-radius: var(--vv-radius);
  overflow: hidden; text-decoration: none; color: inherit; cursor: pointer;
  transition: transform 0.16s, box-shadow 0.16s, border-color 0.16s;
}
.vv-card:hover { transform: translateY(-3px); box-shadow: var(--vv-shadow-lg); border-color: var(--vv-border-strong); }
.vv-card-imgwrap { position: relative; }
.vv-card-img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.vv-card-tag { position: absolute; top: 12px; left: 12px; background: rgba(15, 23, 42, 0.82); color: #fff; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 10px; border-radius: 9999px; }
.vv-card-body { display: flex; flex-direction: column; flex: 1; padding: 16px; gap: 8px; }
.vv-card-title { font-family: var(--vv-font-serif); font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--vv-text-heading); }
.vv-card:hover .vv-card-title { color: var(--vv-accent); }
.vv-card-excerpt { font-size: 14px; color: var(--vv-text-secondary); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vv-card-meta { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--vv-border-main); font-size: 12px; color: var(--vv-text-muted); }
.vv-card-meta span { display: inline-flex; align-items: center; gap: 5px; }
.vv-bookmark {
  background: none; border: none; cursor: pointer; font-size: 16px; color: var(--vv-text-muted);
  padding: 4px; border-radius: 6px; line-height: 1;
}
.vv-bookmark:hover { color: var(--vv-accent); }
.vv-bookmark.is-active { color: var(--vv-accent); }

/* --- AI recommendation feed --------------------------------------------- */
.vv-aifeed { border-top: 1px solid var(--vv-border-main); padding: 24px 0; }
.vv-aifeed-head { display: flex; align-items: center; gap: 8px; font-family: var(--vv-font-serif); font-size: 22px; font-weight: 700; color: var(--vv-text-heading); margin-bottom: 16px; }
.vv-aifeed-row { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x proximity; }
/* Cards are .vv-card (from card_markup) — pin a fixed basis so the rail scrolls
   instead of squeezing every card to the container width (was ~48px on phones). */
.vv-aifeed-row .vv-card { flex: 0 0 300px; min-width: 0; scroll-snap-align: start; }

/* --- Modals & drawers (shared) ------------------------------------------ */
.vv-modal-backdrop {
  position: fixed; inset: 0; background: rgba(2, 6, 23, 0.6); z-index: 90;
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.vv-modal-backdrop.is-open { display: flex; }
.vv-modal {
  background: var(--vv-bg-card); border: 1px solid var(--vv-border-main);
  border-radius: 16px; max-width: 720px; width: 100%; max-height: 88vh;
  overflow-y: auto; padding: 28px; box-shadow: var(--vv-shadow-lg);
  position: relative;
}
.vv-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.vv-modal-close { background: none; border: none; font-size: 24px; cursor: pointer; color: var(--vv-text-muted); line-height: 1; padding: 4px; }
.vv-modal-close:hover { color: var(--vv-accent); }
.vv-modal-title { font-family: var(--vv-font-serif); font-size: 24px; font-weight: 800; color: var(--vv-text-heading); line-height: 1.2; }

/* --- Article reader modal ------------------------------------------------ */
.vv-reader-hero { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; margin-bottom: 18px; }
.vv-reader-meta { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; color: var(--vv-text-muted); margin-bottom: 14px; }
.vv-reader-content { font-size: 17px; line-height: 1.7; color: var(--vv-text-primary); }
.vv-reader-content p { margin: 0 0 16px; }
.vv-takeaways { background: var(--vv-bg-muted); border: 1px solid var(--vv-border-main); border-radius: 12px; padding: 16px 18px; margin: 18px 0; }
.vv-takeaways h4 { font-family: var(--vv-font-serif); font-size: 16px; margin: 0 0 10px; color: var(--vv-text-heading); }
.vv-takeaways ul { margin: 0; padding-left: 18px; }
.vv-takeaways li { margin-bottom: 6px; font-size: 14px; color: var(--vv-text-secondary); }
.vv-reader-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--vv-border-main); }

.vv-analysis { border-top: 1px solid var(--vv-border-main); margin-top: 18px; padding-top: 16px; }
.vv-analysis h4 { font-family: var(--vv-font-serif); font-size: 16px; color: var(--vv-text-heading); margin: 0 0 10px; }
.vv-analysis ul { margin: 0 0 12px; padding-left: 18px; color: var(--vv-text-secondary); font-size: 14px; }
.vv-analysis p { color: var(--vv-text-secondary); font-size: 14px; line-height: 1.6; margin: 0 0 10px; }
.vv-bias-meter { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--vv-text-secondary); }
.vv-bias-bar { flex: 1; height: 8px; background: var(--vv-bg-muted); border-radius: 9999px; overflow: hidden; }
.vv-bias-fill { height: 100%; background: var(--vv-accent); }

/* --- Briefing / generator / copilot -------------------------------------- */
.vv-brief-headline { font-family: var(--vv-font-serif); font-size: 26px; font-weight: 800; color: var(--vv-accent); margin: 0 0 6px; }
.vv-brief-theme { font-size: 14px; color: var(--vv-text-muted); margin-bottom: 14px; letter-spacing: 0.04em; }
.vv-brief ul { margin: 0 0 16px; padding-left: 18px; }
.vv-brief li { margin-bottom: 8px; color: var(--vv-text-secondary); font-size: 15px; }
.vv-brief-sentiment, .vv-brief-action { font-size: 14px; color: var(--vv-text-primary); padding: 10px 14px; border-radius: 10px; background: var(--vv-bg-muted); margin-bottom: 8px; }
.vv-brief-sentiment b, .vv-brief-action b { color: var(--vv-accent); }

.vv-form-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.vv-form-field label { font-weight: 600; font-size: 13px; color: var(--vv-text-secondary); }
.vv-input, .vv-textarea, .vv-select {
  padding: 10px 14px; border: 1px solid var(--vv-border-strong); border-radius: 10px;
  background: var(--vv-bg-card); color: var(--vv-text-primary); font-family: var(--vv-font-sans); font-size: 14px;
}
.vv-textarea { min-height: 96px; resize: vertical; }
.vv-input:focus, .vv-textarea:focus, .vv-select:focus { outline: 2px solid var(--vv-accent); outline-offset: 0; border-color: transparent; }

.vv-copilot-drawer {
  position: fixed; top: 0; right: 0; height: 100%; width: min(420px, 94vw);
  background: var(--vv-bg-card); border-left: 1px solid var(--vv-border-main);
  z-index: 95; transform: translateX(105%); transition: transform 0.25s ease-out;
  display: flex; flex-direction: column; box-shadow: var(--vv-shadow-lg);
}
.vv-copilot-drawer.is-open { transform: translateX(0); }
.vv-copilot-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--vv-border-main); }
.vv-copilot-head h3 { font-family: var(--vv-font-serif); font-size: 18px; margin: 0; color: var(--vv-text-heading); }
.vv-chat { flex: 1; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.vv-msg { max-width: 84%; padding: 10px 14px; border-radius: 14px; font-size: 14px; line-height: 1.5; }
.vv-msg--user { align-self: flex-end; background: var(--vv-accent); color: #fff; border-bottom-right-radius: 4px; }
.vv-msg--ai { align-self: flex-start; background: var(--vv-bg-muted); color: var(--vv-text-primary); border-bottom-left-radius: 4px; }
.vv-copilot-input { display: flex; gap: 8px; padding: 14px; border-top: 1px solid var(--vv-border-main); }

/* --- Bookmarks desk ------------------------------------------------------ */
.vv-bookmarks-list { display: flex; flex-direction: column; gap: 12px; }
.vv-bookmark-row { display: flex; gap: 14px; align-items: center; padding: 12px; border: 1px solid var(--vv-border-main); border-radius: 12px; cursor: pointer; text-decoration: none; color: inherit; }
.vv-bookmark-row:hover { border-color: var(--vv-accent); }
.vv-bookmark-row img { width: 96px; height: 64px; object-fit: cover; border-radius: 8px; flex: 0 0 auto; }
.vv-bookmark-row-title { font-weight: 700; font-size: 15px; color: var(--vv-text-heading); line-height: 1.35; }
.vv-bookmark-row-meta { font-size: 12px; color: var(--vv-text-muted); margin-top: 4px; }

/* --- Language menu ------------------------------------------------------- */
.vv-lang-menu { position: relative; }
.vv-lang-dropdown {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 200px;
  background: var(--vv-bg-card); border: 1px solid var(--vv-border-main);
  border-radius: 12px; box-shadow: var(--vv-shadow-lg); padding: 8px; z-index: 60;
  display: none; max-height: 320px; overflow-y: auto;
}
.vv-lang-dropdown.is-open { display: block; }
.vv-lang-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px 10px; border: none; background: none; cursor: pointer; border-radius: 8px; font-size: 14px; color: var(--vv-text-primary); }
.vv-lang-item:hover { background: var(--vv-bg-muted); }
.vv-lang-item.is-active { color: var(--vv-accent); font-weight: 700; }

/* --- RSS modal ----------------------------------------------------------- */
.vv-rss-sources { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.vv-rss-source { display: flex; flex-direction: column; gap: 6px; padding: 14px; border: 1px solid var(--vv-border-main); border-radius: 12px; }
.vv-rss-source h4 { margin: 0; font-size: 15px; color: var(--vv-text-heading); font-weight: 700; }
.vv-rss-source p { margin: 0; font-size: 13px; color: var(--vv-text-secondary); line-height: 1.45; }
.vv-rss-source .vv-region { font-size: 11px; color: var(--vv-text-muted); text-transform: uppercase; letter-spacing: 0.05em; }

/* --- Footer -------------------------------------------------------------- */
.vv-footer { border-top: 1px solid var(--vv-border-main); background: var(--vv-bg-muted); margin-top: 24px; }
.vv-footer-inner { max-width: var(--vv-maxw); margin: 0 auto; padding: 40px 24px 24px; }
.vv-footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; }
.vv-footer h4 { font-family: var(--vv-font-serif); font-size: 18px; color: var(--vv-text-heading); margin: 0 0 12px; }
.vv-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.vv-footer a { color: var(--vv-text-secondary); text-decoration: none; font-size: 14px; }
.vv-footer a:hover { color: var(--vv-accent); }
.vv-footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--vv-border-main); font-size: 13px; color: var(--vv-text-muted); flex-wrap: wrap; }

/* --- Scrollbar ----------------------------------------------------------- */
.vv-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
.vv-scrollbar::-webkit-scrollbar-track { background: transparent; }
.vv-scrollbar::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.4); border-radius: 9999px; }
.vv-scrollbar::-webkit-scrollbar-thumb:hover { background: rgba(148, 163, 184, 0.7); }

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 1024px) {
  .vv-hero { grid-template-columns: 1fr; }
  .vv-trending { border-left: none; padding-left: 0; border-top: 1px solid var(--vv-border-main); padding-top: 20px; }
  .vv-grid { grid-template-columns: repeat(2, 1fr); }
  .vv-footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .vv-grid { grid-template-columns: 1fr; }
  .vv-hero-title { font-size: 28px; }
  .vv-header-inner { padding: 12px 16px; }
  .vv-container { padding: 0 16px; }
  .vv-clocks { display: none; }
}

/* ==========================================================================
   Elementor legacy header (post43) + footer (post44) component styles
   Hooked via css_classes on legacy containers; theme-aware via --vv-* tokens.
   -------------------------------------------------------------------------- */

/* --- Header — single dark premium band (post43) ------------------------------ */
/* Sticky full-width wrapper carries the dark gradient + crimson glow; the boxed
   row inside (vv-header-single) arranges brand · cats · actions on ONE line.
   The band is intentionally always dark in both themes. */
.vv-header-wrap {
  position: sticky; top: 0; z-index: 50;
  background:
    radial-gradient(1100px 320px at 50% -140px, rgba(239, 68, 68, 0.20), transparent 60%),
    linear-gradient(180deg, #0B1220 0%, #020617 100%);
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
  box-shadow: 0 14px 34px -22px rgba(2, 6, 23, 0.7);
}

.vv-brand-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 14px; flex: 0 0 auto;
  background: linear-gradient(135deg, #EF4444 0%, #B91C1C 100%);
  color: #fff; font-family: var(--vv-font-serif); font-weight: 800;
  font-size: 24px; line-height: 1;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.28);
}
.vv-edition-badge {
  display: inline-flex; align-items: center; align-self: center;
  font-family: var(--vv-font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
  color: var(--vv-accent); background: var(--vv-accent-soft);
  padding: 3px 8px; border-radius: 9999px;
}
.vv-tag-dot { margin: 0 6px; color: var(--vv-text-muted); }
.vv-zero-bias {
  display: inline-flex; align-items: center; gap: 4px;
  color: #059669; font-weight: 600;
}
.vv-zero-bias:hover { color: #047857; }

/* --- Single-band layout (post43) ------------------------------------------- */
/* Strip the standalone .vv-container centering + page-flow borders — the boxed
   band row owns the spacing. */
.vv-header-single .vv-container,
.vv-header-single .vv-catnav { max-width: none; margin: 0; padding: 0; border-top: 0; }

/* Brand on dark — only the V-mark + logotype stay visible; the tagline, edition
   badge, LIVE pill and clocks are tucked away to keep one line clean. */
.vv-header-single .vv-header-brand .elementor-heading-title {
  color: #F8FAFC !important; font-size: 22px !important; line-height: 1.05;
}
.vv-header-single .vv-header-brand .elementor-widget-text-editor,
.vv-header-single .vv-header-brand .vv-live-wire,
.vv-header-single .vv-header-brand .vv-clocks,
.vv-header-single .vv-header-brand .vv-edition-badge { display: none; }

/* Single-row layout:
   Brand (15%) | Categories (45%) | Actions + Search (40%)
   All items on one line, flex-wrap:wrap handles smaller screens. */
.vv-header-single .vv-header-brand { width: 15% !important; order: 1; flex-wrap: nowrap; }
.vv-header-single .vv-header-cats { width: 45% !important; order: 2; }
.vv-header-single .vv-header-actions { width: 40% !important; order: 3; justify-content: flex-end; flex-wrap: wrap; gap: 8px; align-items: center; }

/* Category pills — centered rail, bright text on dark, crimson hover/active. */
.vv-header-single .vv-header-cats .vv-catnav { flex-wrap: wrap; justify-content: center; gap: 6px; }
.vv-header-single .vv-header-cats .vv-pill {
  border-color: rgba(148, 163, 184, 0.22); color: #CBD5E1;
  background: rgba(255, 255, 255, 0.03); white-space: nowrap;
}
.vv-header-single .vv-header-cats .vv-pill:hover { border-color: #F87171; color: #fff; }
.vv-header-single .vv-header-cats .vv-pill.is-active {
  background: var(--vv-accent); border-color: var(--vv-accent); color: #fff;
}

/* Search — enlarged dark-glass input in the actions zone. */
.vv-header-single .vv-header-actions .vv-search { flex: 0 0 auto; width: 200px; margin-top: 0; }
.vv-header-single .vv-header-actions .vv-region-select { display: none; }
.vv-header-single .vv-header-actions .vv-search-input {
  background: rgba(255, 255, 255, 0.06); border-color: rgba(148, 163, 184, 0.25);
  color: #F1F5F9; padding: 8px 14px; font-size: 13px;
}
.vv-header-single .vv-header-actions .vv-search-input::placeholder { color: #64748B; }
.vv-header-single .vv-header-actions .vv-search .vv-btn { padding: 8px 14px; font-size: 13px; }

/* Trigger buttons — glass buttons on dark; AI Brief stays crimson solid.
   Labels are visible so every button is self-explanatory. */
.vv-header-single .vv-header-actions .vv-btn {
  background: rgba(255, 255, 255, 0.06); border-color: rgba(148, 163, 184, 0.25);
  color: #E2E8F0; padding: 7px 10px; font-size: 12px; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 5px;
}
.vv-header-single .vv-header-actions .vv-btn:hover { border-color: #F87171; color: #fff; }
.vv-header-single .vv-header-actions .vv-btn--solid {
  background: var(--vv-accent); border-color: var(--vv-accent); color: #fff;
}
.vv-header-single .vv-header-actions .vv-btn--solid:hover { background: #DC2626; color: #fff; }
.vv-header-single .vv-header-actions .vv-btn .vv-btn-label {
  font-weight: 500; letter-spacing: 0.02em;
}
.vv-header-single .vv-header-actions .vv-theme-toggle,
.vv-header-single .vv-header-actions .vv-lang-menu > .vv-btn { padding: 7px 10px; }
.vv-header-single .vv-header-actions .vv-lang-dropdown {
  background: var(--vv-bg-card); border-color: var(--vv-border-main);
}

/* Responsive — below 1200 brand+cats shrink to keep single row; below 768 everything stacks
   brand→cats (scrollable rail)→actions. */
@media (max-width: 1200px) {
  .vv-header-single .vv-header-brand { width: 18% !important; }
  .vv-header-single .vv-header-cats { width: 42% !important; }
  .vv-header-single .vv-header-actions { width: 40% !important; }
}
@media (max-width: 767px) {
  .vv-header-single .vv-header-brand,
  .vv-header-single .vv-header-cats,
  .vv-header-single .vv-header-actions { width: 100% !important; }
  .vv-header-single .vv-header-actions { justify-content: center; }
  .vv-header-single .vv-header-actions .vv-search { width: 100%; }
  .vv-header-single .vv-header-cats {
    overflow-x: auto; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 18px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 18px), transparent);
  }
  .vv-header-single .vv-header-cats::-webkit-scrollbar { display: none; }
  .vv-header-single .vv-header-cats .vv-catnav { flex-wrap: nowrap; justify-content: flex-start; }
}

/* --- Ribbon -------------------------------------------------------------- */
.vv-live-wire {
  display: inline-flex; align-items: center; gap: 7px;
  background: #DC2626; color: #fff;
  font-family: var(--vv-font-sans); font-size: 10px; font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 4px 12px; border-radius: 9999px; white-space: nowrap;
}
.vv-live-wire-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #fff; animation: vv-pulse 1.6s infinite;
}
.vv-clock-label { color: #64748B; font-size: 10px; font-weight: 600; letter-spacing: 0.04em; }

/* --- Theme toggle (labeled) ---------------------------------------------- */
.vv-theme-toggle {
  background: #0F172A; border-color: #0F172A; color: #F8FAFC;
  font-size: 12px; padding: 8px 14px;
}
.vv-theme-toggle:hover { border-color: var(--vv-accent); color: #fff; }
.vv-theme-toggle .vv-theme-ico { font-size: 13px; }
.vv-footer .vv-theme-toggle {
  background: #1E293B; border-color: #334155; color: #E2E8F0;
}
.vv-footer .vv-theme-toggle:hover { border-color: var(--vv-accent); color: #fff; }

/* --- Trigger-button variants (shortcode .vv-btn modifiers) ---------------- */
.vv-btn--soft {
  background: var(--vv-bg-muted); border-color: var(--vv-border-main);
  color: var(--vv-text-secondary);
}
.vv-btn--soft:hover { border-color: var(--vv-accent); color: var(--vv-accent); }
.vv-btn--dark { background: #0F172A; border-color: #0F172A; color: #fff; }
.vv-btn--dark:hover { background: #1E293B; border-color: #1E293B; color: #fff; }

/* --- Footer (post44) ------------------------------------------------------ */
/* Column widths are set natively in Elementor (Layout → Width on each panel:
   desktop 30/22/16/24, tablet 48, mobile 100/46/46/100). No CSS grid — the
   panels are plain flex children of the parent row. Only the sub-420px stack
   (Elementor's smallest breakpoint is 767px) is handled here. */

.vv-verified-ico { font-size: 12px; }

.vv-footer--glossy .vv-f-bureaus .elementor-icon-list-icon i { color: #EF4444; font-size: 8px; }
.vv-footer--glossy .vv-f-bureaus .elementor-icon-list-text { color: #94A3B8; }
.vv-footer--glossy .vv-f-bureaus .elementor-icon-list-item:hover .elementor-icon-list-text { color: #E2E8F0; }

/* Explore category links — bright & readable on the plain dark ground */
.vv-footer--glossy .vv-f-sections .elementor-icon-list-item {
  padding-bottom: 6px;
}
.vv-footer--glossy .vv-f-sections .elementor-icon-list-icon {
  align-self: flex-start; margin-top: 7px;
}
.vv-footer--glossy .vv-f-sections .elementor-icon-list-icon i {
  color: #EF4444; font-size: 7px;
}
.vv-footer--glossy .vv-f-sections .elementor-icon-list-text {
  color: #E2E8F0; font-size: 14px; font-weight: 500; line-height: 1.5;
  transition: color 0.15s;
}
.vv-footer--glossy .vv-f-sections .elementor-icon-list-item:hover .elementor-icon-list-text { color: #fff; }

.vv-newsletter { display: flex; gap: 8px; margin-top: 14px; }
.vv-newsletter-input {
  flex: 1 1 auto; min-width: 0;
  font-family: var(--vv-font-sans); font-size: 13px;
  color: #E2E8F0; background: #1E293B;
  border: 1px solid #334155; border-radius: 10px;
  padding: 10px 14px; outline: none; transition: border-color 0.15s;
}
.vv-newsletter-input::placeholder { color: #64748B; }
.vv-newsletter-input:focus { border-color: var(--vv-accent); }
.vv-newsletter-btn {
  font-family: var(--vv-font-sans); font-weight: 600; font-size: 13px;
  color: #fff; background: var(--vv-accent);
  border: 1px solid var(--vv-accent); border-radius: 10px;
  padding: 10px 18px; cursor: pointer; white-space: nowrap;
  transition: background 0.15s;
}
.vv-newsletter-btn:hover { background: #B91C1C; }
.vv-newsletter.is-subscribed .vv-newsletter-input { border-color: #10B981; }
.vv-newsletter.is-subscribed .vv-newsletter-btn { background: #059669; border-color: #059669; }
.vv-dispatch-note {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: #64748B; margin-top: 10px;
}
.vv-dispatch-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #10B981; animation: vv-pulse 1.6s infinite;
}

/* ── Social icon row (below newsletter) ─────────────────────────────────────
   Single horizontal row of compact icon-only buttons. 7 × 28px icons fit
   within the 229px inner width (24% of kit's 1140px boxed − 44px padding)
   using space-evenly distribution. Touch target ~33px (footer utility row). */
.vv-footer--glossy .vv-f-social-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  gap: 4px 0;
  margin-top: 8px;
}
.vv-footer--glossy .vv-f-social-btn {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 6px;
  color: #64748B;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  font-size: 13px;
  text-decoration: none;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.vv-footer--glossy .vv-f-social-btn:hover {
  color: #fff;
  background: rgba(255,255,255,0.08);
  border-color: rgba(239,68,68,0.35);
}
.vv-footer--glossy .vv-f-social-btn:focus-visible {
  outline: 2px solid var(--vv-accent, #EF4444);
  outline-offset: 2px;
}

/* Verified Sources trigger (moved from header → footer). Compact dark-glass
   pill that sits below the social row in the news panel. */
.vv-footer--glossy .vv-f-verified-btn { margin-top: 12px; }
.vv-footer--glossy .vv-f-verified-btn .vv-btn {
  font-size: 12px; padding: 7px 12px;
  color: #94A3B8; background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
}
.vv-footer--glossy .vv-f-verified-btn .vv-btn:hover {
  color: #fff; border-color: var(--vv-accent, #EF4444);
}
.vv-footer--glossy .vv-f-verified-btn .vv-btn:focus-visible {
  outline: 2px solid var(--vv-accent, #EF4444); outline-offset: 2px;
}

.vv-legal-link {
  color: #94A3B8; font-weight: 500; text-decoration: none;
  transition: color 0.15s;
}
.vv-legal-link:hover { color: #F8FAFC; text-decoration: underline; }
.vv-legal-sep { margin: 0 10px; color: #475569; }

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 768px) {
  .vv-edition-badge, .vv-tag-dot, .vv-zero-bias { display: none; }
}
@media (max-width: 640px) {
  .vv-brand-mark { width: 38px; height: 38px; font-size: 20px; border-radius: 12px; }
  .vv-newsletter { flex-direction: column; }
  .vv-newsletter-input, .vv-newsletter-btn { width: 100%; }
  .vv-legal-sep { margin: 0 6px; }
}
@media (max-width: 420px) {
  /* Elementor's smallest native breakpoint is 767px, so the ≤767px layout
     (brand+news full, explore+bureaus side-by-side) persists down to 420px.
     Below 420px we stack all four panels one-per-row. */
  .vv-footer--glossy .vv-f-sections,
  .vv-footer--glossy .vv-f-bureaus { width: 100% !important; }
}

/* --- Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .vv-ticker-track { animation: none; }
  .vv-copilot-drawer { transition: none; }
  .vv-card, .vv-btn { transition: none; }
}

/* ==========================================================================
   Footer "Glossy" redesign (post44) — gradient base, plain columns
   Hooked via .vv-footer--glossy / .vv-f-divider classes.
   Panel columns sit flat on the gradient (no cards) — the four columns are
   plain flex children; widths are set natively in Elementor (Layout → Width).
   -------------------------------------------------------------------------- */

/* Deep gradient base: dark slate → near-black, crimson glow from top, sheen */
.vv-footer--glossy {
  position: relative;
  border-top: none;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0) 32%),
    radial-gradient(120% 70% at 50% -5%, rgba(239, 68, 68, 0.16) 0%, rgba(239, 68, 68, 0) 62%),
    radial-gradient(55% 45% at 85% 112%, rgba(239, 68, 68, 0.07) 0%, rgba(239, 68, 68, 0) 70%),
    linear-gradient(180deg, #0F172A 0%, #0B1220 50%, #020617 100%) #020617;
}

/* Top accent hairline (full-bleed, above the boxed content) */
.vv-footer-hairline-wrap { width: 100% !important; }
.vv-footer-hairline {
  width: 100%; height: 3px;
  background: linear-gradient(90deg, rgba(239, 68, 68, 0) 0%, rgba(239, 68, 68, 0.9) 50%, rgba(239, 68, 68, 0) 100%);
}

/* ── Panel widths set natively in Elementor — no custom grid needed ──────── */

/* ── Verified pill — shield SVG replaces emoji ────────────────────────────── */
.vv-verified-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--vv-font-sans); white-space: nowrap;
  background: rgba(239,68,68,0.12); border: 1px solid rgba(239,68,68,0.35);
  border-radius: 999px; padding: 4px 12px 4px 10px;
  font-size: 11px; font-weight: 600; color: #FEE2E2; letter-spacing: 0.04em;
}
.vv-verified-ico { color: #EF4444; font-size: 12px; }

/* ── Section headings ─────────────────────────────────────────────────────── */
.vv-footer--glossy .elementor-widget-heading .elementor-heading-title { color: #F8FAFC; }

/* ── Gradient hairline dividers ───────────────────────────────────────────── */
.vv-f-divider .elementor-divider {
  border-top: none !important;
  height: 1px;
  background: linear-gradient(90deg, rgba(148,163,184,0) 0%, rgba(148,163,184,0.2) 18%, rgba(239,68,68,0.55) 50%, rgba(148,163,184,0.2) 82%, rgba(148,163,184,0) 100%);
}

/* ── Newsletter glass input + CTA ─────────────────────────────────────────── */
.vv-footer--glossy .vv-newsletter-input {
  background: rgba(15, 23, 42, 0.55);
  border-color: rgba(148, 163, 184, 0.28);
  box-shadow: inset 0 1px 3px rgba(2, 6, 23, 0.5), 0 1px 0 rgba(255,255,255,0.04);
}
.vv-footer--glossy .vv-newsletter-btn {
  background: linear-gradient(135deg, #EF4444 0%, #B91C1C 100%);
  box-shadow: 0 6px 18px rgba(220,38,38,0.4), inset 0 1px 0 rgba(255,255,255,0.22);
}
.vv-footer--glossy .vv-newsletter-btn:hover {
  box-shadow: 0 10px 26px rgba(220,38,38,0.55), inset 0 1px 0 rgba(255,255,255,0.25);
}

/* ── Social icon row — hover lift ─────────────────────────────────────────── */
.vv-footer--glossy .vv-f-social-btn { transition: color 0.15s, background 0.15s, border-color 0.15s, transform 0.15s; }
.vv-footer--glossy .vv-f-social-btn:hover { transform: translateY(-1px); }

/* Responsive widths set natively in Elementor (width / width_tablet / width_mobile) */