/**
 * Theriot / The Riot — design tokens & base styles.
 * Source of truth: nycc/mockup/The Riot/views/design-system.php
 * (colors, typography, buttons, dropdowns, dark-mode patterns, layout).
 *
 * Use Tailwind arbitrary values where possible, e.g. bg-[var(--venue-accent)].
 * Legacy --cc-* names remain aliases for older templates and scripts.
 */
:root {
  /* Primary — Gold (CTA, links, active states) */
  --venue-accent: #efa40c;
  --venue-accent-hover: #c78a0a;
  --venue-gold-light: #ffd966;
  --venue-gold-darker: #b87a08;
  /* Neutrals / surfaces */
  --venue-black: #000000;
  --venue-white: #ffffff;
  --venue-charcoal: #383839;
  --venue-surface-dropdown: #262626; /* Tailwind neutral-800 — dropdown panels */
  --venue-surface-dark: #1e1e1e; /* dark cards / legacy */
  --venue-surface-card-tint: rgba(0, 0, 0, 0.05); /* bg-black/5 cards */
  --venue-chip-dark: #383838;
  --venue-ticket-selected-bg: #fff8e6; /* soft gold tint for selected ticket rows */
  /* Legacy Comedy Craft Beer aliases → Theriot tokens */
  --cc-accent: var(--venue-accent);
  --cc-accent-hover: var(--venue-accent-hover);
  --cc-surface-dark: var(--venue-surface-dark);
  --cc-chip-dark: var(--venue-chip-dark);
  --cc-ticket-selected-bg: var(--venue-ticket-selected-bg);
}

[x-cloak] { display: none !important; }

/* Typography — design-system: Titles = Libre Baskerville (font-display), body = Montserrat (layout) */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Libre Baskerville', Georgia, 'Times New Roman', serif;
  font-weight: 700;
}
.font-display {
  font-family: 'Libre Baskerville', Georgia, 'Times New Roman', serif;
}

::selection {
  background: var(--venue-accent);
  color: #fff;
}

@keyframes venue-marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }
@keyframes cc-marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }

/* Buttons — design-system: rounded-[10px], font-bold, text-sm */
button,
a[class*="font-bold"][class*="px-"] {
  border-radius: 10px;
}
a.cc-tab-btn,
a.venue-tab-btn {
  border-radius: 5px;
}

.cc-no-scrollbar::-webkit-scrollbar,
.venue-no-scrollbar::-webkit-scrollbar { display: none; }
.cc-no-scrollbar,
.venue-no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Slide-in drawer (legacy ids) */
#cc-nav-drawer { transform: translateX(100%); transition: transform 0.3s ease; }
#cc-nav-drawer.cc-drawer-open { transform: translateX(0); }
#cc-drawer-backdrop { opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
#cc-drawer-backdrop.cc-drawer-open { opacity: 1; pointer-events: all; }

/* View fade — design-system: fade in 0.3s ease */
.cc-view-fade,
.venue-view-fade { animation: fadeIn 0.3s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* Marquee — design-system: 60s linear infinite */
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }

.cc-date-badge,
.venue-date-badge { min-width: 80px; }

.cc-gallery-item img,
.venue-gallery-item img { transition: transform 0.5s ease; }
.cc-gallery-item:hover img,
.venue-gallery-item:hover img { transform: scale(1.05); }

.cc-show-card:hover,
.venue-show-card:hover {
  box-shadow: 0 20px 40px color-mix(in srgb, var(--venue-accent) 12%, transparent);
}
.cc-show-card:hover .cc-show-card-img,
.venue-show-card:hover .venue-show-card-img { transform: scale(1.1); }
.cc-show-card-img,
.venue-show-card-img { transition: transform 0.5s ease; }

.cc-dotted-line,
.venue-dotted-line {
  border-bottom: 2px dotted rgba(255, 255, 255, 0.15);
  flex-grow: 1;
  margin: 0 1rem;
  position: relative;
  top: -2px;
}

#cc-main-nav,
#site-main-header { transition: padding 0.3s ease, box-shadow 0.3s ease; }
#cc-main-nav.cc-nav-scrolled,
#site-main-header.site-nav-scrolled {
  background: rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(12px);
  padding-top: 1rem;
  padding-bottom: 1rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* Featured carousel dots — Tailwind JIT may not see JS-only classes */
#ccDots .cc2-feature-dot,
#ccDots .featured-hero-dot,
#featured-hero-dots .cc2-feature-dot,
#featured-hero-dots .featured-hero-dot {
  width: 10px;
  height: 10px;
  min-width: 10px;
  min-height: 10px;
  border-radius: 9999px;
  background: #525252;
  border: 0;
  padding: 0;
  flex-shrink: 0;
  cursor: pointer;
  transition: width 0.3s ease, background 0.3s ease, min-width 0.3s ease;
}
#ccDots .cc2-feature-dot.is-active,
#ccDots .featured-hero-dot.is-active,
#featured-hero-dots .cc2-feature-dot.is-active,
#featured-hero-dots .featured-hero-dot.is-active {
  width: 32px;
  min-width: 32px;
  background: #fff;
}
#ccDots .cc2-feature-dot:focus-visible,
#ccDots .featured-hero-dot:focus-visible,
#featured-hero-dots .cc2-feature-dot:focus-visible,
#featured-hero-dots .featured-hero-dot:focus-visible {
  outline: 2px solid var(--venue-accent);
  outline-offset: 2px;
}

#cc-main-nav img.cc2-header-logo-img,
#site-main-header img {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none;
}

.cc-hero-carousel,
.venue-hero-carousel { overflow: hidden; }
.cc-hero-track,
.venue-hero-track { display: flex; transition: transform 0.5s ease; }
.cc-hero-slide,
.venue-hero-slide { flex: 0 0 100%; }

.cc-hover-lift:hover,
.venue-hover-lift:hover { transform: translateY(-2px); }

/* Event view: in-page tabs */
a.cc-event-tab:hover,
a.venue-event-tab:hover {
  border-color: var(--venue-accent);
  color: var(--venue-accent);
}

/* Event view: coupon / discount line */
#event-view-page .ticket-price.original.slashed,
#event-view-page .ticket-price.slashed {
  text-decoration: line-through;
  color: #a3a3a3;
  font-weight: 600;
}
#event-view-page .breakdown-base-original.slashed,
#event-view-page .breakdown-fee-original.slashed {
  text-decoration: line-through;
  color: #a3a3a3;
}
#event-view-page .ticket-price-wrapper [class^="discount-price-"]:not(:empty) {
  margin-left: 0.35rem;
  color: var(--venue-accent);
  font-weight: 700;
  text-decoration: none;
}

/* Checkout: coupon line styling (theriot.js toggles .slashed / .discounted) */
.evc-checkout-page .original.slashed {
  text-decoration: line-through;
  color: #a3a3a3;
  font-weight: 600;
}
.evc-checkout-page .discounted:not(:empty) {
  margin-left: 0.35rem;
  color: var(--venue-accent);
  font-weight: 700;
  text-decoration: none;
}