/* ─────────────────────────────────────────────────────────────────
   ZdravaFakta — theme toggle button + dark-mode palette overrides
   Loaded alongside the inline page CSS. Uses the same token names
   so :root[data-theme="dark"] just flips the values.
   ───────────────────────────────────────────────────────────────── */

/* ZF brand gold — fixed-identity tokens (named by hue, used contextually) */
:root {
  --zf-gold:      #F7C46B;  /* warm honey — used in dark mode */
  --zf-gold-dark: #C8951B;  /* deep saturated yellow-gold — used in light mode */
  --zf-text-dark: #1A2540;  /* deep navy — heading text in light mode */
}

/* SITE HEADER BAR — transparent, blurs content scrolling beneath */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 64px;
  z-index: 95;
  background: rgba(250, 250, 247, 0.5);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  backdrop-filter: blur(28px) saturate(160%);
  border-bottom: 1px solid var(--line);
  pointer-events: none;
}
[data-theme="dark"] .site-header {
  background: rgba(15, 24, 37, 0.5);
}

/* THEME TOGGLE BUTTON — naked icon on the header bar */
.theme-toggle {
  position: fixed;
  top: 20px;
  right: clamp(20px, 5vw, 64px);
  z-index: 100;
  width: 40px;
  height: 40px;
  border-radius: 100px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  color: var(--fg);
  transition: background 0.3s, transform 0.4s cubic-bezier(0.16,1,0.3,1), color 0.3s;
  line-height: 1;
  padding: 0;
}

.theme-toggle:hover {
  background: rgba(27, 58, 107, 0.08);
  color: var(--brand-blue);
  transform: rotate(20deg) scale(1.05);
}

.theme-toggle:active { transform: rotate(20deg) scale(0.95); }

.theme-toggle .icon-sun  { display: none; }
.theme-toggle .icon-moon { display: inline-block; line-height: 1; }

/* DARK PALETTE FLIP
   ───────────────────────────────────────────────────────────────── */
:root[data-theme="dark"] {
  --bg:               #0F1825;
  --bg-elev:          #1A2538;
  --bg-elev-2:        #243049;
  --fg:               #F5F1E8;
  --fg-soft:          #B8B0A3;
  --fg-muted:         #7A7367;
  --brand-blue:       #6BA3E0;
  --brand-blue-soft:  rgba(107, 163, 224, 0.16);
  --brand-blue-deep:  #4A88CC;
  --brand-gold-soft:  rgba(245, 200, 66, 0.18);
  --gold-deep:        #E0B238;
  --villain:          #E5634F;
  --villain-soft:     rgba(229, 99, 79, 0.18);
  --line:             rgba(245, 241, 232, 0.08);
  --line-strong:      rgba(245, 241, 232, 0.16);
}

/* Smooth crossfade between themes */
body, .card, .article-card, .stat-card, .reel-card, .reel-intro,
.prog-nav, .filters-wrap, .newsletter, .articles-pin, .related,
.cta-ghost, .newsletter-form, .stat-callout, .sources, .theme-toggle,
.hero-tag, .article-art .label {
  transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

/* TOGGLE: dark mode — naked icon, subtle hover */
[data-theme="dark"] .theme-toggle:hover {
  background: rgba(107, 163, 224, 0.12);
}
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun  { display: inline-block; line-height: 1; }

/* Paper grain — flip to screen blend so a faint texture shows on dark */
[data-theme="dark"] body::before {
  opacity: 0.05;
  mix-blend-mode: screen;
}

/* Ambient gold corner glow — same hue, lower intensity */
[data-theme="dark"] body::after {
  background: radial-gradient(circle at 50% 50%, rgba(245, 200, 66, 0.06) 0%, transparent 50%);
}

/* Glass surfaces — dark variant */
[data-theme="dark"] .prog-nav,
[data-theme="dark"] .filters-wrap     { background: rgba(26, 37, 56, 0.78); }
[data-theme="dark"] .hero-tag         { background: rgba(26, 37, 56, 0.6); }
[data-theme="dark"] .cta-ghost        { background: rgba(26, 37, 56, 0.45); }
[data-theme="dark"] .stat-card        { background: rgba(26, 37, 56, 0.6); }
[data-theme="dark"] .newsletter-form  { background: rgba(26, 37, 56, 0.85); }
[data-theme="dark"] .sources          { background: rgba(26, 37, 56, 0.4); }
[data-theme="dark"] .article-art .label { background: rgba(26, 37, 56, 0.85); }

/* Cream/warm gradient sections — dark variants */
[data-theme="dark"] .articles-pin {
  background: linear-gradient(180deg, var(--bg) 0%, #14202F 100%);
}
[data-theme="dark"] .related {
  background: linear-gradient(180deg, var(--bg) 0%, #14202F 100%);
}
[data-theme="dark"] .newsletter {
  background: radial-gradient(ellipse at center, #1F2E47 0%, var(--bg) 70%);
}

/* Primary CTA — gold pill in both themes, so keep dark navy text in dark mode
   (otherwise the flipped sky-blue brand colour disappears against gold). Pinned
   for :hover too since hover keeps the same gold-background combo. */
[data-theme="dark"] .cta-primary,
[data-theme="dark"] .cta-primary:hover { color: #1B3A6B; }

/* Badges — re-balance for dark contrast */
[data-theme="dark"] .badge.verified {
  color: var(--brand-gold);
  background: rgba(245, 200, 66, 0.12);
  border-color: rgba(245, 200, 66, 0.35);
}
[data-theme="dark"] .badge.myth {
  background: rgba(229, 99, 79, 0.14);
  border-color: rgba(229, 99, 79, 0.4);
}

/* Hero title — navy on cream in light mode, cream on navy bg in dark mode */
[data-theme="dark"] .hero-title { color: var(--fg); }
/* View tabs (Články / Videa) — flip active text to cream in dark mode */
[data-theme="dark"] .view-tab.active { color: var(--fg); }
/* Hero title highlight — flip to the lighter honey gold in dark mode */
[data-theme="dark"] .hero-title .grad { color: var(--zf-gold); }

/* Card shadows — soften so they read on a dark canvas */
[data-theme="dark"] .card:hover,
[data-theme="dark"] .article-card,
[data-theme="dark"] .stat-card:hover,
[data-theme="dark"] .reel-card,
[data-theme="dark"] .stat-callout {
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}
[data-theme="dark"] .article-card:hover {
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}