/* 
Theme Name: Визия Русе
Theme URI: https://viziaruse.com
Author: Визия Русе
Description: Гражданска платформа — Идеи за днес, План за утре
Version: 1.2.14
Text Domain: viziaruse
*/

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --color-blue:   #1A56A0;  /* Транспорт, Дигитализация */
  --color-red:    #C0392B;  /* Култура, Архитектура */
  --color-yellow: #E8A020;  /* Икономика, Образование */
  --color-green:  #1A8C5B;  /* Зеленина, Социална сфера */
  --color-dark:   #111110;  /* Фонове, текст */
  --color-light:  #F5F3EE;  /* Светъл фон */

  /* Backwards-compat aliases */
  --black:  var(--color-dark);
  --dark:   #1a1a18;
  --dark2:  #222220;
  --white:  var(--color-light);
  --muted:  #888882;

  /* Category color assignments */
  --cat-transport:  var(--color-blue);
  --cat-digital:    var(--color-blue);
  --cat-culture:    var(--color-red);
  --cat-arch:       var(--color-red);
  --cat-economy:    var(--color-yellow);
  --cat-edu:        var(--color-yellow);
  --cat-green:      var(--color-green);
  --cat-social:     var(--color-green);
}

html { scroll-behavior: smooth; }

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--white);
  color: var(--black);
  overflow-x: hidden;
}

/* NAV — CLEAN SINGLE NAVIGATION */

/* HEADER */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999;
  background: rgba(10, 22, 40, 0.95);
  -webkit-
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: background 0.3s, border-color 0.3s;
}
.site-header-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 16px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* Only on homepage — transparent over hero, dark on scroll */
body.home .site-header {
  background: transparent;
  border-bottom: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.home .site-header.scrolled {
  background: rgba(10, 22, 40, 0.95);
  -webkit-
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* LOGO */
.site-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

/* DESKTOP NAV */
.site-nav-desktop {
  display: flex;
  align-items: center;
  gap: 28px;
}
.site-nav-desktop a {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: rgba(247,245,240,0.7);
  text-decoration: none;
  transition: color 0.2s;
  white-space: nowrap;
}
.site-nav-desktop a:hover {
  color: #F7F5F0;
}
.site-nav-desktop a.active {
  color: #5DCAA5;
}
.site-nav-desktop a.nav-cta {
  background: #1A8C5B;
  color: #fff !important;
  padding: 8px 18px;
  border-radius: 4px;
  font-weight: 500;
  transition: opacity 0.2s;
}
.site-nav-desktop a.nav-cta:hover {
  opacity: 0.88;
}

/* PROFILE ICON */
.nav-profile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.7);
  transition: all 0.2s;
  margin-left: 4px;
}
.nav-profile:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.35);
  color: #fff;
}
.nav-profile span {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 14px;
  color: #5DCAA5;
  letter-spacing: 0.02em;
}

/* MOBILE HEADER RIGHT */
.site-nav-mobile-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.nav-profile-mobile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.7);
}
.nav-profile-mobile span {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 14px;
  color: #5DCAA5;
}

/* HAMBURGER */
.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 34px; height: 34px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}
.hamburger span {
  display: block;
  width: 20px; height: 1.5px;
  background: #F7F5F0;
  transition: transform 0.3s, opacity 0.3s;
  border-radius: 2px;
}
.hamburger.open span:nth-child(1), .hamburger.is-active span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.hamburger.open span:nth-child(2), .hamburger.is-active span:nth-child(2) {
  opacity: 0;
}
.hamburger.open span:nth-child(3), .hamburger.is-active span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* ════════════════════════════════
   MOBILE MENU — Fullscreen overlay 
   ════════════════════════════════ */

.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  background: #0A1628;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
  overflow: hidden;
}

.mobile-menu.open {
  opacity: 1;
  visibility: visible;
}

/* Top bar */
.mobile-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* Mobile menu logo text */
.mobile-menu-header .site-logo {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 18px;
  letter-spacing: 0.08em;
  text-decoration: none;
  display: flex;
  gap: 6px;
}
.mobile-menu-header .logo-primary {
  color: #B8A9C9;
}
.mobile-menu-header .logo-accent {
  color: #5DCAA5;
}


/* X close button */
.mobile-close {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: none;
  color: rgba(255,255,255,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.mobile-close:hover {
  background: rgba(255,255,255,0.12);
  color: #fff;
}

/* Nav links */
.mobile-menu-nav {
  display: flex;
  flex-direction: column;
  padding: 24px 32px;
}

.mobile-menu-nav a {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 32px;
  letter-spacing: 0.03em;
  color: #F7F5F0;
  text-decoration: none;
  padding: 10px 0;
  opacity: 1;
  transform: none;
  transition: color 0.2s, opacity 0.35s ease, transform 0.35s ease;
}

.mobile-menu-nav a:hover,
.mobile-menu-nav a.active {
  color: #5DCAA5;
}

/* Staggered entrance animation */
.mobile-menu.open .mobile-menu-nav a {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.35s ease,
    transform 0.35s ease, color 0.2s;
}

.mobile-menu.open .mobile-menu-nav a:nth-child(1) { transition-delay: 0.05s; }
.mobile-menu.open .mobile-menu-nav a:nth-child(2) { transition-delay: 0.1s; }
.mobile-menu.open .mobile-menu-nav a:nth-child(3) { transition-delay: 0.15s; }
.mobile-menu.open .mobile-menu-nav a:nth-child(4) { transition-delay: 0.2s; }
.mobile-menu.open .mobile-menu-nav a:nth-child(5) { transition-delay: 0.25s; }

/* Divider before CTA */
.mobile-menu-divider {
  height: 1px;
  background: rgba(255,255,255,0.06);
  margin: 12px 0 16px;
}

/* CTA link */
.mobile-menu-cta {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 16px !important;
  font-weight: 500;
  color: #5DCAA5 !important;
  letter-spacing: 0 !important;
}

/* Auth footer */
.mobile-menu-auth {
  padding: 20px 32px 32px;
  border-top: 1px solid rgba(255,255,255,0.06);
  margin-top: 24px;
  flex-shrink: 0;
}

/* Logged-in user */
.mobile-auth-user {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mobile-auth-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(29,158,117,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 15px;
  color: #5DCAA5;
}

.mobile-auth-name {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #F7F5F0;
  text-decoration: none;
}

.mobile-auth-logout {
  display: block;
  font-size: 12px;
  color: rgba(255,255,255,0.3);
  text-decoration: none;
  margin-top: 2px;
}

/* Logged-out buttons */
.mobile-auth-buttons {
  display: flex;
  gap: 10px;
}

.mobile-auth-login {
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  padding: 8px 18px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px;
  transition: all 0.2s;
}

.mobile-auth-login:hover {
  border-color: rgba(255,255,255,0.3);
  color: #fff;
}

.mobile-auth-register {
  font-size: 13px;
  color: #fff;
  text-decoration: none;
  padding: 8px 18px;
  background: rgba(29,158,117,0.85);
  border-radius: 20px;
  transition: opacity 0.2s;
}

.mobile-auth-register:hover {
  opacity: 0.85;
}

/* Desktop: hide mobile elements */
@media (min-width: 901px) {
  .site-nav-mobile-right {
    display: none !important;
  }
  .mobile-menu {
    display: none !important;
  }
}

/* HERO */
.hero {
  min-height: 100vh;
  background: var(--black);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 120px 48px 80px;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  opacity: 0.4;
  pointer-events: none;
}
.hero-skyline {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 180px;
  opacity: 0.06;
}
.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-green);
  margin-bottom: 32px;
  opacity: 0;
  animation: fadeUp 0.6s 0.1s forwards;
}
.hero-tag::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--color-green);
}
.hero-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(72px, 12vw, 160px);
  line-height: 0.92;
  color: var(--white);
  letter-spacing: 0.02em;
  margin-bottom: 8px;
  opacity: 0;
  animation: fadeUp 0.7s 0.2s forwards;
}
.hero-title .city {
  color: transparent;
  -webkit-text-stroke: 1px rgba(245,243,238,0.35);
}
.hero-sub {
  font-size: 15px;
  font-weight: 300;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 56px;
  opacity: 0;
  animation: fadeUp 0.7s 0.35s forwards;
}
.hero-actions {
  display: flex;
  gap: 16px;
  align-items: center;
  opacity: 0;
  animation: fadeUp 0.7s 0.5s forwards;
}

/* BUTTONS */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--color-green);
  color: var(--white);
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.03em;
  padding: 14px 28px;
  border-radius: 4px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform 0.2s, opacity 0.2s;
}
.btn-primary:hover { transform: translateY(-1px); opacity: 0.9; }
.btn-primary svg { transition: transform 0.2s; }
.btn-primary:hover svg { transform: translateX(3px); }
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(245,243,238,0.6);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.03em;
  text-decoration: none;
  padding: 14px 4px;
  border-bottom: 1px solid rgba(245,243,238,0.2);
  transition: color 0.2s, border-color 0.2s;
}
.btn-ghost:hover {
  color: var(--white);
  border-color: rgba(245,243,238,0.5);
}

/* STATS */
.stats {
  background: var(--dark2);
  padding: 0 48px;
}
.stats-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(245,243,238,0.06);
}
.stat-item {
  padding: 40px 0;
  border-right: 1px solid rgba(245,243,238,0.06);
}
.stat-item:last-child { border-right: none; padding-left: 48px; }
.stat-item:nth-child(2) { padding-left: 48px; }
.stat-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 56px;
  line-height: 1;
  color: var(--white);
  letter-spacing: 0.02em;
}
.stat-num span { color: var(--color-green); font-size: 36px; }
.stat-label {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 6px;
}

/* SECTION */
.section { padding: 80px 48px; }
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 40px;
}
.section-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 42px;
  letter-spacing: 0.03em;
  color: var(--black);
}
.section-link {
  font-size: 13px;
  color: var(--color-green);
  text-decoration: none;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--color-green);
  padding-bottom: 1px;
  transition: opacity 0.2s;
}
.section-link:hover { opacity: 0.7; }

/* IDEA CARDS */
.cards-scroll {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}
.idea-card {
  background: #fff;
  border: 1px solid rgba(17,17,16,0.08);
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.25s, box-shadow 0.25s;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
}
.idea-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(17,17,16,0.1);
}
.card-top { height: 5px; }
.card-body {
  padding: 22px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.card-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
}
.badge {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 3px;
  font-weight: 500;
}
.badge-cat { background: rgba(17,17,16,0.06); color: var(--black); }
.badge-district { color: var(--muted); font-size: 10px; }
.badge-editorial {
  background: rgba(232,160,32,0.12);
  color: #7a5200;
  margin-left: auto;
}
.badge-citizen {
  background: rgba(26,140,91,0.12);
  color: #0d5235;
  margin-left: auto;
}
.card-title {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: 10px;
  flex: 1;
}
.card-excerpt {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 18px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-footer {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(17,17,16,0.06);
}
.vote-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: 1px solid rgba(17,17,16,0.12);
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 12px;
  color: var(--black);
  cursor: pointer;
  transition: all 0.2s;
}
.vote-btn:hover {
  background: var(--color-green);
  color: #fff;
  border-color: var(--color-green);
}
.comments-count {
  font-size: 12px;
  color: var(--muted);
  margin-left: auto;
}

/* CATEGORIES */
.cats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.cat-card {
  background: #fff;
  border: 1px solid rgba(17,17,16,0.08);
  border-radius: 10px;
  padding: 28px 24px;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s, box-shadow 0.2s;
  position: relative;
  overflow: hidden;
}
.cat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(17,17,16,0.08);
}
.cat-bar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  opacity: 0;
  transition: opacity 0.2s;
}
.cat-card:hover .cat-bar { opacity: 1; }
.cat-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  font-size: 20px;
}
.cat-name { font-size: 15px; font-weight: 500; margin-bottom: 4px; }
.cat-count {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  color: var(--muted);
}

/* CTA BAND */
.cta-band {
  background: var(--black);
  padding: 60px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  position: relative;
  overflow: hidden;
}
/* .cta-band::before removed — decorative ИДЕЯ text */
.cta-label {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-green);
  margin-bottom: 16px;
}
.cta-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 36px;
  line-height: 1;
  color: var(--white);
  letter-spacing: 0.02em;
}
.cta-sub {
  font-size: 14px;
  font-weight: 300;
  color: var(--muted);
  margin-top: 12px;
  max-width: 360px;
  line-height: 1.6;
}

/* FOOTER */
footer.vr-footer {
  background: var(--dark);
  padding: 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(245,243,238,0.06);
}
.footer-logo {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 20px;
  letter-spacing: 0.05em;
  color: var(--white);
}
.footer-logo span { color: var(--color-green); }
.footer-links { display: flex; gap: 28px; }
.footer-links a {
  font-size: 12px;
  color: var(--muted);
  text-decoration: none;
  letter-spacing: 0.04em;
  transition: color 0.2s;
}
.footer-links a:hover { color: var(--white); }
.footer-copy {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  color: rgba(136,136,130,0.5);
}

/* ANIMATIONS */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.count-anim { display: inline-block; }

/* RESPONSIVE */
@media (max-width: 900px) {
    nav#vr-nav, nav#vr-nav.scrolled { padding: 16px 24px; }
    .nav-links { display: none; }
    .hamburger { display: block; }
    .hero { padding: 100px 24px 60px; }
    .stats { padding: 0 24px; }
    .stats-inner { grid-template-columns: 1fr; }
    .stat-item, .stat-item:nth-child(2), .stat-item:last-child {
        padding: 24px 0; border-right: none;
        border-bottom: 1px solid rgba(245,243,238,0.06);
    }
    .section { padding: 56px 24px; }
    .cats-grid { grid-template-columns: repeat(2, 1fr); }
    .cta-band {
    flex-direction: column;
    padding: 48px 24px;
    text-align: center;
    align-items: stretch;
  }
  .cta-band .cta-text {
    align-items: center;
  }
  .cta-band .cta-title {
    font-size: 28px;
  }
  .cta-band .cta-sub {
    max-width: 100%;
  }
  .cta-band .btn-primary {
    width: 100%;
    justify-content: center;
    padding: 14px 28px;
  }
    footer.vr-footer {
        flex-direction: column; gap: 24px;
        padding: 36px 24px; text-align: center;
    }
    .footer-links { flex-wrap: wrap; justify-content: center; }
}

/* HERO PARALLAX BACKGROUND */
.hero--parallax {
  background-attachment: scroll; /* was fixed - causes rendering issues */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* Fallback: dark bg when no image is set */
  background-color: var(--color-dark);
}

@media (max-width: 900px) {
  /* Disable parallax on mobile for performance */
  .hero--parallax {
    background-attachment: scroll;
  }
}
/* Fix: Ensure content below parallax hero renders on top */
.stats,
.last-ideas,
.categories-section,
.how-it-works,
.mini-map-section,
.news-section,
.cta-band,
footer.vr-footer {
  position: relative;
  z-index: 1;
}


/* ============================================================
   HOMEPAGE — Updated Idea Cards with Images
   ============================================================ */

/* Grid container for idea cards */
.ideas-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 900px) { .ideas-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ideas-grid { grid-template-columns: 1fr; } }

/* Card */
.idea-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 2px 10px rgba(0,0,0,0.07);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.idea-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.13);
}

/* Image area */
.idea-card__image {
  height: 200px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.idea-card:hover .idea-card__image {
  transform: scale(1.05);
}
/* The transform on image needs to be on a wrapper, not the card itself */
.idea-card__image {
  transition: transform 0.4s ease;
}

.idea-card__fallback-icon {
  font-size: 48px;
  opacity: 0.4;
  user-select: none;
  pointer-events: none;
}

/* Card body */
.idea-card__body {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.idea-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.idea-card__title {
  font-size: 15px;
  font-weight: 600;
  color: #111110;
  margin: 0 0 8px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.idea-card__excerpt {
  font-size: 13px;
  color: #666;
  line-height: 1.5;
  margin: 0 0 12px;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.idea-card__footer {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: #888;
  border-top: 1px solid #f0ede8;
  padding-top: 10px;
  margin-top: auto;
}

.idea-card__votes {
  color: #1A8C5B;
  font-weight: 600;
}

.idea-card__comments { color: #888; }

/* Badges */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}
.badge--cat      { background: #111110; color: #fff; }
.badge--district { background: #f0ede8; color: #555; }
.badge--citizen  { background: #e8f5f0; color: #1A8C5B; border: 1px solid #b8e0d0; }

/* Section header */
.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 28px;
}
.section-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 36px;
  letter-spacing: 0.05em;
  color: #111110;
  margin: 0;
}
.section-link {
  font-size: 13px;
  font-weight: 500;
  color: #1A8C5B;
  text-decoration: none;
}
.section-link:hover { text-decoration: underline; }

.last-ideas { padding: 60px 0; background: #F5F3EE; }
.last-ideas__inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* ============================================================
   HOMEPAGE — Category Blocks
   ============================================================ */

.categories-section { padding: 60px 0; background: #111110; }
.categories-section__inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.categories-section .section-title { color: #fff; }

.cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 900px) { .cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .cat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }
/* Когато последният елемент е сам на реда — центрирай го (за 13 категории) */
/* Desktop: 4 колони → сам на 4n+1 → заеми колони 2-3 */
.cat-grid > *:last-child:nth-child(4n+1) { grid-column: 2 / span 2; justify-self: center; width: 50%; }
/* Mobile (≤900px): 2 колони → сам на 2n+1 → заеми и двете колони, центриран */
@media (max-width: 900px) { .cat-grid > *:last-child:nth-child(2n+1) { grid-column: 1 / -1; justify-self: center; width: 50%; } }
@media (max-width: 480px) { .cat-grid > *:last-child:nth-child(2n+1) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 5px); } }

.cat-block {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  padding: 16px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.cat-block:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.35);
}
.cat-block:hover .cat-block__overlay { opacity: 1; }
.cat-block:hover .cat-block__arrow   { opacity: 1; transform: translate(0, 0); }

.cat-block__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.15);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
  border-radius: inherit;
}

.cat-block__fire {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 18px;
  z-index: 2;
}

.cat-block__deco-icon {
  position: absolute;
  top: 12px;
  left: 14px;
  font-size: 32px;
  opacity: 0.25;
  pointer-events: none;
  user-select: none;
}

.cat-block__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cat-block__name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  color: #fff;
  letter-spacing: 0.04em;
  line-height: 1;
}

.cat-block__count {
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  color: rgba(255,255,255,0.7);
  line-height: 1;
}

.cat-block__arrow {
  position: absolute;
  bottom: 14px;
  right: 14px;
  font-size: 20px;
  color: #fff;
  font-weight: bold;
  opacity: 0;
  transform: translate(6px, 6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 2;
}


/* ============================================================
   SECTION: HOW IT WORKS (КАК РАБОТИ)
   ============================================================ */
.how-it-works {
  background: #F5F3EE;
  padding: 80px 48px;
}
.how-inner {
  max-width: 1200px;
  margin: 0 auto;
}
.steps-row {
  display: flex;
  align-items: flex-start;
  gap: 0;
}
.step-item {
  flex: 1;
  text-align: center;
  padding: 0 24px;
  position: relative;
}
.step-number {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 80px;
  line-height: 1;
  opacity: 0.15;
  display: block;
  margin-bottom: -12px;
  pointer-events: none;
  user-select: none;
}
.step-icon {
  font-size: 32px;
  display: block;
  margin-bottom: 16px;
}
.step-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  letter-spacing: 0.04em;
  color: #111110;
  margin-bottom: 8px;
}
.step-desc {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: #888882;
  line-height: 1.6;
  max-width: 260px;
  margin: 0 auto;
}
.step-divider {
  width: 1px;
  align-self: stretch;
  background: rgba(17,17,16,0.08);
  flex-shrink: 0;
  min-height: 120px;
}

@media (max-width: 900px) {
  .how-it-works {
    padding: 56px 24px;
  }
  .steps-row {
    flex-direction: column;
    gap: 0;
  }
  .step-item {
    padding: 24px 0;
  }
  .step-divider {
    width: 100%;
    height: 1px;
    min-height: 0;
    background: rgba(17,17,16,0.08);
  }
}

/* ============================================================
   SECTION: MINI MAP (МИНИ КАРТА)
   ============================================================ */
.mini-map-section {
  background: #1a1a18;
  padding: 80px 48px;
}
.mini-map-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 48px;
}
.mini-map-text {
  width: 45%;
  flex-shrink: 0;
}
.mini-map-label {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #1D9E75;
  margin-bottom: 16px;
}
.mini-map-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 42px;
  line-height: 1.05;
  color: #F5F3EE;
  letter-spacing: 0.02em;
  margin-bottom: 16px;
}
.mini-map-desc {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: #888882;
  line-height: 1.6;
  margin-bottom: 28px;
  max-width: 340px;
}
.mini-map-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #F5F3EE;
  border: 1px solid rgba(245,243,238,0.3);
  border-radius: 4px;
  padding: 12px 24px;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.mini-map-btn:hover {
  background: #F5F3EE;
  color: #111110;
}
.mini-map-visual {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ruse-map-svg {
  width: 100%;
  max-height: 380px;
}
.ruse-map-svg .district {
  fill: #333332;
  stroke: #1a1a18;
  stroke-width: 2;
  transition: fill 0.25s ease;
  cursor: pointer;
}
.ruse-map-svg a:hover .district {
  fill: #1D9E75;
}
.pulse-dot {
  fill: #1D9E75;
  opacity: 0.8;
  animation: pulseDot 2s ease-in-out infinite;
}
.pulse-dot--delay1 { animation-delay: 0.5s; }
.pulse-dot--delay2 { animation-delay: 1s; }
.pulse-dot--delay3 { animation-delay: 1.5s; }

@keyframes pulseDot {
  0%, 100% { opacity: 0.3; r: 4; }
  50% { opacity: 0.9; r: 7; }
}

@media (max-width: 900px) {
  .mini-map-section {
    padding: 56px 24px;
  }
  .mini-map-inner {
    flex-direction: column-reverse;
    gap: 32px;
  }
  .mini-map-text {
    width: 100%;
    text-align: center;
  }
  .mini-map-desc {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  .mini-map-visual {
    width: 100%;
  }
  .ruse-map-svg {
    max-height: 260px;
  }
}

/* ============================================================
   SECTION: NEWS / АКТУАЛНО
   ============================================================ */
.news-section {
  background: #fff;
  padding: 80px 48px;
}
.news-inner {
  max-width: 1200px;
  margin: 0 auto;
}
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.news-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 2px 10px rgba(0,0,0,0.07);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.news-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.13);
}
.news-card__image {
  height: 200px;
  background-size: cover;
  background-position: center;
  background-color: #1a1a18;
  background-image: linear-gradient(135deg, #1a1a18, #2a2a28);
  flex-shrink: 0;
}
.news-card--placeholder .news-card__image {
  background-image: linear-gradient(135deg, #1a1a18, #2a2a28);
}
.news-card__body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.news-card__date {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #888882;
  margin-bottom: 8px;
}
.news-card__title {
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #111110;
  line-height: 1.4;
  margin: 8px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-card__excerpt {
  font-size: 13px;
  color: #888882;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}

@media (max-width: 900px) {
  .news-section {
    padding: 56px 24px;
  }
  .news-grid {
    grid-template-columns: 1fr;
  }
}

/* 
 *    NAV BACKGROUND BY PAGE TYPE
 *     */

/* Always dark on inner pages */
.nav--dark {
	  background: #111110 !important;
	  position: fixed;
	  top: 0; left: 0; right: 0;
	  z-index: 1000;
}

/* Homepage: transparent until scroll */
.nav--transparent {
	  background: transparent;
	  position: fixed;
	  top: 0; left: 0; right: 0;
	  z-index: 1000;
	  transition: background 0.3s ease;
}

.nav--transparent.scrolled {
	  background: rgba(17,17,16,0.95);
	  backdrop-filter: blur(12px);
}

/* ALL pages  nav links white on dark bg */
.nav--dark .nav-links a,
.nav--transparent .nav-links a {
	  color: rgba(245,243,238,0.85);
}

/* .nav--dark/.nav--transparent .nav-logo color removed — SVG has built-in colors */

/* Mobile hamburger always visible */
@media (max-width: 768px) {
	.hamburger {
		    color: #F5F3EE !important;
		    opacity: 1 !important;
	}

}

body:not(.home) main,
body:not(.home) .page-content,
body:not(.home) .hero,
body:not(.home) .site-content {
  padding-top: 70px;
}

body.admin-bar:not(.home) main,
body.admin-bar:not(.home) .page-content,
body.admin-bar:not(.home) .hero {
  padding-top: 102px;
}

/* ============================================================
   NAV — Mobile fixes: ensure nav--dark shows correctly
   on inner pages at all screen sizes
   ============================================================ */

/* nav--dark: always solid dark background, white text */
#vr-nav.nav--dark {
  background: #111110 !important;
}

/* #vr-nav.nav--dark .nav-logo color removed — SVG has built-in colors */

/* #vr-nav.nav--dark .nav-logo span removed — SVG has built-in colors */

#vr-nav.nav--dark .hamburger-line {
  background: #F5F3EE !important;
}

/* nav--transparent (homepage): hamburger lines are also white */
#vr-nav.nav--transparent .hamburger-line {
  background: #F5F3EE;
}

/* Mobile menu overlay is always dark with light text */
.mobile-menu {
  background: #111110 !important;
}

.mobile-link {
  color: rgba(245,243,238,0.85) !important;
}

/* Mobile: slightly smaller but same proportions */
@media (max-width: 768px) {
  .nav-logo svg {
    height: 32px !important;
    width: auto !important;
  }
}

@media (max-width: 380px) {
  .nav-logo svg {
    height: 28px !important;
  }
}

/* ===VR-FIX-START=== */
/* FIX 2: Desktop/Mobile nav visibility */
@media (min-width: 769px) {
  .mobile-header-right { display: none !important; }
}
@media (max-width: 768px) {
  .desktop-nav .nav-links { display: none !important; }
}

/* FIX 3: Profile icon in desktop nav */
.nav-profile-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  text-decoration: none;
  transition: background 0.2s;
  margin-left: 8px;
  color: rgba(255,255,255,0.7);
  border: 1px solid rgba(255,255,255,0.15);
}
.nav-profile-btn:hover {
  background: rgba(255,255,255,0.1);
  color: #fff;
  border-color: rgba(255,255,255,0.3);
}
.nav-profile-avatar {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 15px;
  color: #1D9E75;
}

/* FIX 4: Mobile header right */
.mobile-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mobile-profile-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.7);
  text-decoration: none;
}
.mobile-profile-btn:hover {
  background: rgba(255,255,255,0.1);
  color: #fff;
}

/* FIX 7: Mobile homepage */
@media (max-width: 768px) {
  .hero { padding: 100px 20px 60px; min-height: 85vh; }
  .hero-title { font-size: clamp(52px, 14vw, 80px); }
  .hero-actions { flex-direction: column; align-items: stretch; gap: 12px; }
  .hero-actions .btn-primary, .hero-actions .btn-ghost { justify-content: center; }
  .news-grid { grid-template-columns: 1fr; }
  .cta-band { flex-direction: column; padding: 48px 20px; }
  .cta-band .btn-primary { width: 100%; justify-content: center; }
}
/* ===VR-FIX-END=== */

/* Hide duplicate nav auth from wp_footer injection (we have our own profile button) */
.vr-nav-auth {
  display: none !important;
}

/* ── Auth links in desktop nav ── */
.nav-auth-link {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  color: rgba(247,245,240,0.7) !important;
  text-decoration: none;
  transition: color 0.2s;
  margin-left: 4px;
}
.nav-auth-link:hover {
  color: #F7F5F0 !important;
}
.nav-auth-btn {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #1A8C5B !important;
  text-decoration: none;
  background: transparent;
  padding: 7px 16px;
  border-radius: 4px;
  border: 1.5px solid #1A8C5B;
  transition: background 0.2s, color 0.2s;
  margin-left: 4px;
}
.nav-auth-btn:hover {
  background: #1A8C5B;
  color: #fff !important;
}

/* Separator between nav and auth links */
.nav-separator {
  display: inline-block;
  width: 1px;
  height: 18px;
  background: rgba(247,245,240,0.2);
  margin: 0 12px;
  vertical-align: middle;
}

/* Mobile registration button (visible in header bar, non-logged-in only) */
.nav-register-mobile {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 0 12px;
  border-radius: 4px;
  background: transparent;
  border: 1.5px solid #5DCAA5;
  color: #5DCAA5;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s;
}
.nav-register-mobile:hover {
  background: #5DCAA5;
  color: #0A1628;
}

/* Mobile menu footer animation */
.mobile-menu.open .mobile-menu-footer,
.mobile-menu.is-open .mobile-menu-footer {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.4s 0.45s, transform 0.4s 0.45s;
}
.mobile-menu-footer {
  opacity: 0;
  transform: translateY(12px);
}

/* Fix footer auth links style */
.mobile-menu-footer .mobile-profile-link {
  font-size: 18px !important;
  font-family: 'DM Sans', sans-serif !important;
  padding: 10px 0 !important;
  color: rgba(247,245,240,0.85) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.mobile-menu-footer .mobile-profile-link:last-child {
  border-bottom: none;
  color: #5DCAA5 !important;
}

/* Mobile registration button */
.nav-register-mobile { display: flex; align-items: center; justify-content: center; height: 30px; padding: 0 12px; border-radius: 4px; background: transparent; border: 1.5px solid #5DCAA5; color: #5DCAA5; font-family: 'DM Sans',sans-serif; font-size: 12px; font-weight: 500; text-decoration: none; white-space: nowrap; transition: background 0.2s,color 0.2s; }
.nav-register-mobile:hover { background: #5DCAA5; color: #0A1628; }

/* Mobile menu footer animation */
.mobile-menu-footer { opacity: 0; transform: translateY(12px); }
.mobile-menu.open .mobile-menu-footer, .mobile-menu.is-open .mobile-menu-footer { opacity: 1; transform: translateY(0); transition: opacity 0.4s 0.45s, transform 0.4s 0.45s; }
.mobile-menu-footer .mobile-profile-link { font-size: 18px !important; font-family: 'DM Sans',sans-serif !important; padding: 10px 0 !important; color: rgba(247,245,240,0.85) !important; border-bottom: 1px solid rgba(255,255,255,0.06); }
.mobile-menu-footer .mobile-profile-link:last-child { border-bottom: none; color: #5DCAA5 !important; }


/* ============================================
   MOBILE FIXES — appended 2026-04-19
   ============================================ */

@media (max-width: 900px) {

  /* Header padding */
  .site-header-inner {
    padding: 12px 16px;
  }

  /* Hero text sizing */
  .hero-title,
  .idei-hero-title,
  .kv-hero-title,
  .vr-hero-title {
    font-size: clamp(40px, 12vw, 64px) !important;
  }

  /* Filter bar horizontal scroll */
  .filter-top-row,
  .filter-top {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 10px 16px;
  }
  .filter-top-row::-webkit-scrollbar,
  .filter-top::-webkit-scrollbar {
    display: none;
  }

  /* Sticky filter bar */
  .idei-filters {
    padding: 0 16px;
    top: 56px;
  }

  /* Stats bar */
  .stats-bar {
    flex-direction: column;
  }

  /* Kvartali grid */
  .kv-featured-row {
    grid-template-columns: 1fr;
  }
  .kv-small-row,
  .kv-overflow-row {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Content padding */
  .idei-content,
  .kv-content {
    padding: 24px 16px 60px;
  }

  /* Hero padding (account for header) */
  .idei-hero,
  .kv-hero,
  .vr-hero {
    padding: 80px 20px 40px;
  }

  /* Mobile menu links */
  .mobile-menu-nav a {
    font-size: 36px;
    padding: 10px 0;
  }
}

/* RESPONSIVE: Hide desktop nav on mobile, show hamburger */
@media (max-width: 768px) {
	.site-nav-desktop { display: none !important; }
	.site-nav-mobile-right { display: flex !important; }
}


/* ===============================================
   SHARED HERO --- all pages
   =============================================== */
.vr-hero {
  background: #0A1628;
  padding: 100px 60px 48px;
  position: relative;
}

.vr-hero::before,
.vr-hero::after {
  display: none !important;
}

.vr-hero-label {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #1D9E75;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.vr-hero-label::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 1px;
  background: #1D9E75;
  flex-shrink: 0;
}

.vr-hero-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(48px, 8vw, 72px);
  line-height: 0.95;
  color: #F7F5F0;
  letter-spacing: 0.02em;
  margin-bottom: 14px;
}

.vr-hero-title span {
  color: #5DCAA5;
}

.vr-hero-sub {
  font-size: 15px;
  font-weight: 300;
  color: rgba(247,245,240,0.45);
  max-width: 520px;
}

@media (max-width: 768px) {
  .vr-hero {
    padding: 80px 24px 36px;
  }
  .vr-hero-title {
    font-size: clamp(36px, 10vw, 52px);
  }
}

/* ===============================================
   COMPACT HERO — inner pages (with background image)
   Uses body:not(.home) prefix to beat wp-custom-css
   specificity (see Customizer > Additional CSS)
   =============================================== */
body:not(.home) .vr-hero.vr-hero--compact {
  position: relative !important;
  overflow: hidden !important;
  padding: 100px 60px 60px !important;
  min-height: 388px !important;
  background: none !important;
  display: block !important;
  align-items: initial !important;
  justify-content: initial !important;
}
body:not(.home) .vr-hero.vr-hero--compact::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  background-image: url('https://viziaruse.com/wp-content/uploads/2026/04/ruse-aerial-view.jpg') !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  z-index: 0 !important;
  opacity: 1 !important;
}
body:not(.home) .vr-hero.vr-hero--compact::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(rgba(10, 22, 40, 0.65), rgba(10, 22, 40, 0.85)) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}
body:not(.home) .vr-hero.vr-hero--compact > * {
  position: relative !important;
  z-index: 2 !important;
}
body:not(.home) .vr-hero.vr-hero--compact .vr-hero-label {
  display: none !important;
}
body:not(.home) .vr-hero.vr-hero--compact .vr-hero-title {
  font-size: clamp(48px, 8vw, 80px) !important;
  color: #F7F5F0 !important;
  line-height: 0.95 !important;
  margin-bottom: 14px !important;
  width: auto !important;
  max-width: 100% !important;
  text-align: left !important;
}
body:not(.home) .vr-hero.vr-hero--compact .vr-hero-sub {
  font-size: 16px !important;
  color: rgba(247, 245, 240, 0.85) !important;
  max-width: 640px !important;
  text-align: left !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 300 !important;
}
body:not(.home) .vr-hero.vr-hero--compact .hero-actions,
body:not(.home) .vr-hero.vr-hero--compact .vr-hero-cta,
body:not(.home) .vr-hero.vr-hero--compact .btn-primary,
body:not(.home) .vr-hero.vr-hero--compact .btn-ghost {
  display: none !important;
}
@media (max-width: 768px) {
  body:not(.home) .vr-hero.vr-hero--compact {
    padding: 80px 24px 40px !important;
    min-height: 280px !important;
  }
  body:not(.home) .vr-hero.vr-hero--compact .vr-hero-title {
    font-size: clamp(36px, 10vw, 56px) !important;
  }
  body:not(.home) .vr-hero.vr-hero--compact .vr-hero-sub {
    font-size: 14px !important;
  }
}

/* COMPACT HERO full-width fix — break out of main container on /za-nas/ */
.vr-hero--compact {
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  width: 100vw !important;
  max-width: 100vw !important;
  box-sizing: border-box !important;
}
/* Remove main container’s top padding when it contains a compact hero */
main:has(> .vr-hero--compact) {
  padding-top: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}



/* ===============================================
   KARTA page — allow compact hero to display.
   The karta template's inline <style> uses selector
   body.page-karta-full > *:not(#karta-wrap):not(#wpadminbar):not(#vr-nav):not(#siteHeader):not(script):not(style)
   which has specificity (4,1,3) because of 4 ID
   :not() selectors. We beat it by stacking the same
   id 5 times on our rules (specificity 5,0,0).
   =============================================== */
#vr-karta-hero#vr-karta-hero#vr-karta-hero#vr-karta-hero#vr-karta-hero > * {
  position: relative !important;
  z-index: 2 !important;
}
#vr-karta-hero#vr-karta-hero#vr-karta-hero#vr-karta-hero#vr-karta-hero .vr-hero-label,
#vr-karta-hero#vr-karta-hero#vr-karta-hero#vr-karta-hero#vr-karta-hero .hero-actions,
#vr-karta-hero#vr-karta-hero#vr-karta-hero#vr-karta-hero#vr-karta-hero .vr-hero-cta,
#vr-karta-hero#vr-karta-hero#vr-karta-hero#vr-karta-hero#vr-karta-hero .btn-primary,
body.admin-bar.page-karta-full #karta-wrap {
  margin-top: 0 !important;
  height: auto !important;
  min-height: calc(100vh - 162px - 280px) !important;
}
@media (max-width: 768px) {
  }

/* Transparent header on all pages, darkens on scroll */
/* Transparent header on all pages, darkens on scroll - HIGH SPECIFICITY */
body .site-header,
body.home .site-header,
html body .site-header {
  background: transparent !important;
  transition: background 0.3s ease !important;
}
body .site-header.scrolled,
body.home .site-header.scrolled,
html body .site-header.scrolled {
  background: rgba(10, 22, 40, 0.95) !important;
}


/* site-header-inner-fullwidth-fix - global, not just home */
html body .site-header-inner {
  max-width: 100% !important;
}

/* ===============================================
   COMPACT HERO — match homepage style: flat dark blue, no image, no overlay
   =============================================== */
html body .vr-hero--compact {
  background-color: #0A1628 !important;
  background-image: none !important;
}
html body .vr-hero--compact::before,
html body .vr-hero--compact::after {
  display: none !important;
  content: none !important;
  background: none !important;
  background-image: none !important;
}

/* touch: 1777053671064 */

/* COMPACT HERO match homepage flat */
body:not(.home) .vr-hero.vr-hero--compact::before,
body:not(.home) .vr-hero.vr-hero--compact::after {
  display: none !important;
  content: none !important;
  background-image: none !important;
  background: none !important;
}
body:not(.home) .vr-hero.vr-hero--compact {
  background-color: #0A1628 !important;
  background-image: none !important;
}


/* ===============================================
   FIX: Homepage hero background image + overlay
   Added 2026-04-25
   =============================================== */
body.home .vr-hero {
  position: relative !important;
  overflow: hidden !important;
  background: none !important;
}
body.home .vr-hero::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  background-image: url('https://viziaruse.com/wp-content/uploads/2026/04/ruse-aerial-view.jpg') !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  z-index: 0 !important;
}
body.home .vr-hero::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    135deg,
    rgba(10, 22, 40, 0.82) 0%,
    rgba(10, 22, 40, 0.65) 50%,
    rgba(10, 22, 40, 0.75) 100%
  ) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}
body.home .vr-hero > * {
  position: relative !important;
  z-index: 2 !important;
}

/* ===============================================
   FIX: Viziya page — dark hero + dark nav
   Added 2026-04-25
   =============================================== */
/* Override the inline .vz-hero white background */
body.page-template-page-viziyata .vz-hero {
  background: #0A1628 !important;
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}
body.page-template-page-viziyata .vz-hero .vz-hero-eyebrow {
  color: #1D9E75 !important;
}
body.page-template-page-viziyata .vz-hero .vz-hero-title {
  color: #F7F5F0 !important;
}
body.page-template-page-viziyata .vz-hero .vz-hero-title .accent {
  color: #5DCAA5 !important;
}
body.page-template-page-viziyata .vz-hero .vz-hero-sub {
  color: rgba(247, 245, 240, 0.55) !important;
}
/* Nav on Viziya: solid dark background so links are visible */
body.page-template-page-viziyata .site-header {
  background: rgba(10, 22, 40, 0.95) !important;
}
body.page-template-page-viziyata .site-header.scrolled {
  background: rgba(10, 22, 40, 0.98) !important;
}

/* ===============================================
   FIX: Mobile hero + Viziya fixes
   Added 2026-04-25
   =============================================== */
@media (max-width: 900px) {
  /* Homepage hero: ensure bg image and overlay work on mobile */
  body.home .vr-hero {
    min-height: 85vh !important;
    padding: 80px 20px 40px !important;
  }
  body.home .vr-hero::before {
    background-position: center center !important;
    background-size: cover !important;
    background-attachment: scroll !important;
  }
  /* Homepage hero: stack buttons vertically */
  body.home .vr-hero .hero-actions {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
  body.home .vr-hero .hero-actions .btn-primary,
  body.home .vr-hero .hero-actions .btn-ghost {
    justify-content: center !important;
    text-align: center !important;
  }
  /* Viziya page hero mobile */
  body.page-template-page-viziyata .vz-hero {
    background: #0A1628 !important;
    padding: 80px 20px 36px !important;
  }
  /* Viziya page nav on mobile: ensure dark bg */
  body.page-template-page-viziyata .site-header {
    background: rgba(10, 22, 40, 0.95) !important;
  }
  /* Viziya filter bar: fix sticky position under mobile header */
  body.page-template-page-viziyata .vz-filter-bar {
    top: 56px !important;
  }
}

@media (max-width: 768px) {
  /* Smaller mobile: further adjustments */
  body.home .vr-hero {
    min-height: 80vh !important;
    padding: 72px 16px 36px !important;
  }
  body.home .vr-hero .vr-hero-title {
    font-size: clamp(40px, 14vw, 64px) !important;
  }
  /* Viziya hero small mobile */
  body.page-template-page-viziyata .vz-hero {
    padding: 72px 16px 32px !important;
  }
  body.page-template-page-viziyata .vz-hero .vz-hero-title {
    font-size: clamp(40px, 10vw, 56px) !important;
  }
}

/* ===============================================
   FIX: Viziya page — padding-top and nav gap fix
   The .vz-page main wrapper gets padding-top: 70px from
   body:not(.home) main rule, but .vz-hero already handles its own
   top padding. Remove the extra gap.
   =============================================== */
body.page-template-page-viziyata main.vz-page {
  padding-top: 0 !important;
}
/* The .vz-hero needs enough top padding to clear fixed nav */
body.page-template-page-viziyata .vz-hero {
  padding-top: 90px !important;
}
body.admin-bar.page-template-page-viziyata .vz-hero {
  padding-top: 122px !important;
}
@media (max-width: 768px) {
  body.page-template-page-viziyata .vz-hero {
    padding-top: 80px !important;
  }
  body.admin-bar.page-template-page-viziyata .vz-hero {
    padding-top: 112px !important;
  }
}

/* ===============================================
   HOMEPAGE HERO — centred, cinematic layout
   Added 2026-04-25 v2
   =============================================== */
body.home .vr-hero {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  min-height: 100vh !important;
  padding: 120px 40px 80px !important;
}
body.home .vr-hero .vr-hero-label {
  font-family: 'DM Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: #5DCAA5 !important;
  margin-bottom: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
}
body.home .vr-hero .vr-hero-label::before {
  content: '' !important;
  width: 28px !important;
  height: 1px !important;
  background: #5DCAA5 !important;
}
body.home .vr-hero .vr-hero-label::after {
  content: '' !important;
  width: 28px !important;
  height: 1px !important;
  background: #5DCAA5 !important;
}
body.home .vr-hero .vr-hero-title {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: clamp(80px, 14vw, 180px) !important;
  line-height: 0.9 !important;
  color: #F7F5F0 !important;
  letter-spacing: 0.06em !important;
  margin-bottom: 0 !important;
  text-transform: uppercase !important;
  text-align: center !important;
  width: auto !important;
}
body.home .vr-hero .vr-hero-title .hero-title-accent {
  color: transparent !important;
  -webkit-text-stroke: 2px rgba(245, 243, 238, 0.7) !important;
  display: block !important;
}
body.home .vr-hero .vr-hero-sub {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 15px !important;
  font-weight: 300 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: rgba(247, 245, 240, 0.55) !important;
  margin-top: 20px !important;
  margin-bottom: 48px !important;
  width: auto !important;
  max-width: none !important;
  text-align: center !important;
}
body.home .vr-hero .hero-actions {
  display: flex !important;
  flex-direction: row !important;
  gap: 16px !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Mobile adjustments for centred hero */
@media (max-width: 768px) {
  body.home .vr-hero {
    padding: 100px 24px 60px !important;
    min-height: 90vh !important;
  }
  body.home .vr-hero .vr-hero-title {
    font-size: clamp(56px, 18vw, 100px) !important;
    letter-spacing: 0.04em !important;
  }
  body.home .vr-hero .vr-hero-title .hero-title-accent {
    -webkit-text-stroke: 1.5px rgba(245, 243, 238, 0.6) !important;
  }
  body.home .vr-hero .vr-hero-sub {
    font-size: 12px !important;
    letter-spacing: 0.18em !important;
    margin-bottom: 36px !important;
  }
  body.home .vr-hero .hero-actions {
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
  }
  body.home .vr-hero .hero-actions .btn-primary,
  body.home .vr-hero .hero-actions .btn-ghost {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* ===============================================
   HERO PATCH v3 — 2026-04-26
   ВИЗИЯ = outline | РУСЕ = solid | Blue overlay | Visible ghost btn
   =============================================== */
body.home .vr-hero::after {
  background: linear-gradient(
    160deg,
    rgba(8, 32, 72, 0.82) 0%,
    rgba(12, 40, 90, 0.60) 45%,
    rgba(10, 28, 60, 0.78) 100%
  ) !important;
}
body.home .vr-hero .vr-hero-title {
  color: transparent !important;
  -webkit-text-stroke: 2.5px rgba(247, 245, 240, 0.85) !important;
}
body.home .vr-hero .vr-hero-title .hero-title-accent {
  color: #F7F5F0 !important;
  -webkit-text-stroke: 0 !important;
}
body.home .vr-hero .hero-actions .btn-ghost {
  background: rgba(247, 245, 240, 0.12) !important;
  border: 1.5px solid rgba(247, 245, 240, 0.5) !important;
  color: #F7F5F0 !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  padding: 14px 32px !important;
  border-radius: 8px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}
body.home .vr-hero .hero-actions .btn-ghost:hover {
  background: rgba(247, 245, 240, 0.22) !important;
  border-color: rgba(247, 245, 240, 0.7) !important;
}
@media (max-width: 768px) {
  body.home .vr-hero .vr-hero-title {
    -webkit-text-stroke: 2px rgba(247, 245, 240, 0.8) !important;
  }
  body.home .vr-hero .vr-hero-title .hero-title-accent {
    -webkit-text-stroke: 0 !important;
    color: #F7F5F0 !important;
  }
}

/* ===============================================
   PATCH v4 — 2026-04-26
   1. Nav profile button → по-видим
   2. Overlay → малко по-плътен
   =============================================== */

/* Nav profile кръгче — по-видим фон и border */
.site-header .nav-profile {
  background: rgba(247, 245, 240, 0.15) !important;
  border: 1.5px solid rgba(247, 245, 240, 0.45) !important;
}
.site-header .nav-profile span {
  color: #F7F5F0 !important;
  font-weight: 600 !important;
}
.site-header .nav-profile:hover {
  background: rgba(247, 245, 240, 0.25) !important;
  border-color: rgba(247, 245, 240, 0.65) !important;
}

/* Overlay — малко по-плътен синкав */
body.home .vr-hero::after {
  background: linear-gradient(
    160deg,
    rgba(8, 32, 72, 0.85) 0%,
    rgba(12, 40, 90, 0.68) 45%,
    rgba(10, 28, 60, 0.82) 100%
  ) !important;
}
/* ===============================================
   EDITORIAL SINGLE — Share buttons + Focal Point
   Added 2026-05-09
   =============================================== */

/* Feature image with focal-point support */
.vr-ed-feature {
  margin: 0;
}
.vr-ed-feature__img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 600px;
  object-fit: cover;
  object-position: center; /* default — overridden by inline style if focal point set */
}

/* Share bar layout */
.vr-ed-share {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 24px 0;
  border-top: 1px solid rgba(10, 22, 40, 0.08);
  border-bottom: 1px solid rgba(10, 22, 40, 0.08);
  margin: 32px 0;
}
.vr-ed-share__label {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(10, 22, 40, 0.5);
  margin-right: 4px;
}

/* Share buttons — circular with SVG icons */
.vr-ed-share__btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #F5F3EE;
  border: 1px solid rgba(10, 22, 40, 0.1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #0A1628;
  text-decoration: none;
  cursor: pointer;
  padding: 0;
  font: inherit;
  transition: all 0.15s ease;
}
.vr-ed-share__btn:hover {
  background: #0A1628;
  color: #fff;
  border-color: #0A1628;
  transform: translateY(-1px);
}
.vr-ed-share__btn svg {
  display: block;
}

/* Copy link — confirmation state */
.vr-ed-share__copy.is-copied {
  background: #1A8C5B;
  color: #fff;
  border-color: #1A8C5B;
}
.vr-ed-share__copy.is-copied:hover {
  background: #1A8C5B;
  color: #fff;
}
/* ===============================================
   EDITORIAL — Related posts (за тъмен фон)
   =============================================== */

.vr-ed-footer {
  background: #0A1628;
  padding: 60px 40px;
  margin-top: 40px;
}

.vr-ed-footer__inner {
  max-width: 1200px;
  margin: 0 auto;
}

.vr-ed-related__title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 32px;
  letter-spacing: 0.04em;
  color: #F7F5F0 !important;
  margin-bottom: 28px;
}

.vr-ed-related__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.vr-ed-related__card {
  display: flex;
  flex-direction: column;
  background: rgba(247, 245, 240, 0.05);
  border: 1px solid rgba(247, 245, 240, 0.1);
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}

.vr-ed-related__card:hover {
  transform: translateY(-4px);
  background: rgba(247, 245, 240, 0.08);
  border-color: rgba(247, 245, 240, 0.2);
}

.vr-ed-related__img {
  height: 180px;
  overflow: hidden;
}

.vr-ed-related__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.vr-ed-related__body {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.vr-ed-related__cat {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #5DCAA5;
}

.vr-ed-related__head {
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  color: #F7F5F0 !important;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.vr-ed-related__date {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  color: rgba(247, 245, 240, 0.5);
  margin-top: 4px;
}

@media (max-width: 900px) {
  .vr-ed-footer {
    padding: 48px 24px;
  }
  .vr-ed-related__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}
/* ===============================================
   EDITORIAL — Hero meta (по-четлив на тъмен фон)
   =============================================== */

.vr-ed-meta {
  color: #F7F5F0 !important;
}
.vr-ed-meta__name {
  color: #F7F5F0 !important;
  font-weight: 500 !important;
}
.vr-ed-meta__role {
  color: rgba(247, 245, 240, 0.65) !important;
}
.vr-ed-meta__author {
  color: #F7F5F0 !important;
}
.vr-ed-avatar {
  border: 2px solid rgba(247, 245, 240, 0.3) !important;
}
.vr-ed-meta__divider {
  background: rgba(247, 245, 240, 0.2) !important;
}

/* ===============================================
   EDITORIAL — Премахни дубликати в съдържанието
   (темата ги показва вече в hero)
   =============================================== */

.vr-ed-content .series-tag,
.vr-ed-article .series-tag,
.vr-ed-content > h1:first-child,
.vr-ed-content h1:first-of-type,
.vr-ed-content .standfirst,
.vr-ed-content > .standfirst,
.vr-ed-content hr.rule:first-of-type,
.vr-ed-content > hr.rule {
  display: none !important;
}

/* Премахни бялата линия между hero и съдържанието */
.vr-editorial-single .vr-ed-feature {
  margin-top: 0 !important;
}
.vr-ed-article {
  border-top: none !important;
}
/* ===============================================
   EDITORIAL — Hero gradient за четлив meta
   Тъмна сянка по дъното на hero, винаги работи
   =============================================== */

.vr-ed-hero {
  position: relative;
}

.vr-ed-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 50%;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(10, 22, 40, 0.4) 40%,
    rgba(10, 22, 40, 0.85) 100%
  );
  pointer-events: none;
  z-index: 1;
}

.vr-ed-hero__inner,
.vr-ed-hero > * {
  position: relative;
  z-index: 2;
}

/* Уверяваме се че мета редът е винаги бял */
.vr-ed-hero .vr-ed-meta,
.vr-ed-hero .vr-ed-meta__name,
.vr-ed-hero .vr-ed-meta__author {
  color: #F7F5F0 !important;
}
.vr-ed-hero .vr-ed-meta__role {
  color: rgba(247, 245, 240, 0.7) !important;
}
/* ===============================================
   EDITORIAL — Мета лента под hero (светъл фон)
   =============================================== */

.vr-ed-meta-bar {
  background: #F5F3EE;
  border-bottom: 1px solid rgba(10, 22, 40, 0.08);
  padding: 24px 0;
}

.vr-ed-meta-bar .vr-ed-meta {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  color: #0A1628 !important;
}

@media (max-width: 768px) {
  .vr-ed-meta-bar .vr-ed-meta {
    padding: 0 20px;
  }
}

.vr-ed-meta-bar .vr-ed-meta__name {
  color: #0A1628 !important;
  font-weight: 500 !important;
}

.vr-ed-meta-bar .vr-ed-meta__role {
  color: rgba(10, 22, 40, 0.55) !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.vr-ed-meta-bar .vr-ed-meta__author {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #0A1628 !important;
}

.vr-ed-meta-bar .vr-ed-avatar {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  border: 2px solid rgba(10, 22, 40, 0.1) !important;
}

.vr-ed-meta-bar .vr-ed-meta__col {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.vr-ed-meta-bar .vr-ed-meta__divider {
  width: 1px;
  height: 32px;
  background: rgba(10, 22, 40, 0.15) !important;
}

@media (max-width: 768px) {
  .vr-ed-meta-bar {
    padding: 18px 20px;
  }
  .vr-ed-meta-bar .vr-ed-meta {
    gap: 14px;
  }
  .vr-ed-meta-bar .vr-ed-meta__divider {
    height: 28px;
  }
}

/* Премахни тъмния gradient в hero — вече не е нужен */
.vr-ed-hero::after {
  display: none !important;
}