/**
 * Zivio shared home-page design tokens (fan / artist / venue).
 * Accent hues are overridden at runtime by /js/zivio-accent.js
 */
:root {
  --zivio-accent: #00c4ff;
  --accent: var(--zivio-accent);
  --accent-hover: color-mix(in srgb, var(--accent) 72%, #000);
  --accent-soft: color-mix(in srgb, var(--accent) 18%, transparent);
  --accent-glow: color-mix(in srgb, var(--accent) 34%, transparent);
  --surface-0: #0e0e12;
  --surface-1: #16161a;
  --surface-2: #1e1e24;
  --surface: var(--surface-1);
  --surface-raised: var(--surface-2);
  --border: rgba(255, 255, 255, 0.14);
  --border-soft: var(--border);
  --border-subtle: rgba(255, 255, 255, 0.08);
  --text: #ececf1;
  --muted: #8e8e93;
  --radius: 14px;
  --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.25);
  --shadow-panel: 0 8px 32px rgba(0, 0, 0, 0.28);
  --home-col-max: 960px;
}

html {
  background: var(--surface-0);
  min-height: 100%;
}

body.zivio-home {
  position: relative;
  background: transparent !important;
  background-color: transparent !important;
}

/* Full-page blurred hero (paired with WriteZivioPageBackground in ASP) */
.zivio-page-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  filter: blur(26px) saturate(1.35) brightness(0.9);
  transform: scale(1.12);
  pointer-events: none;
}
.zivio-page-bg--flat {
  filter: none;
  transform: none;
}
.zivio-page-bg-shade {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: linear-gradient(180deg, rgba(14, 14, 18, 0.28) 0%, rgba(14, 14, 18, 0.58) 55%, rgba(14, 14, 18, 0.72) 100%);
  pointer-events: none;
}

@media (min-width: 1024px) {
  .zivio-page-bg,
  .zivio-page-bg-shade {
    left: var(--sidebar-w, 280px);
    width: calc(100% - var(--sidebar-w, 280px));
  }
}

.bg-image {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

body.zivio-home .main-content,
body.zivio-home .main {
  position: relative;
  z-index: 2;
}

html {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.28);
  border: 2px solid transparent;
  background-clip: padding-box;
}
.sd-shows-scroll::-webkit-scrollbar-thumb,
.vh-review-list::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--accent) 35%, rgba(255, 255, 255, 0.12));
}

.zivio-card,
.vh-card {
  background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface-1) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

.posts-feed {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.post-card {
  background: var(--surface-2);
  border-radius: var(--radius);
  padding: 0;
  border: 1px solid var(--border);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.post-card:hover {
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.32);
}
.post-card.artist-post {
  border-left: 1px solid var(--border);
}
.post-source-header {
  border-bottom: 1px solid var(--border-subtle);
}

.sd-view-toggle {
  border: 1px solid var(--border) !important;
  background: var(--surface-1) !important;
}
.sd-view-toggle a:not(:last-child),
.sd-view-toggle button:not(:last-child) {
  border-right-color: var(--border-subtle) !important;
}
.sd-shows-scroll {
  border: 1px solid var(--border) !important;
  background: var(--surface-1) !important;
}
.sd-map-section {
  border: 1px solid var(--border) !important;
}
.sd-map-section-header {
  border-bottom-color: var(--border-subtle) !important;
}
.sd-empty-state {
  border: 1px solid var(--border) !important;
}