@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;600;700&family=Poppins:wght@400;500;600;700&display=swap');

:root {
  --primary: #1A1A1A;
  /* Dark almost black */
  --secondary: #FFC000;
  /* Vibrant Egao Yellow */
  --accent: #E53935;
  /* House accent — section eyebrows, the Friday music row, menu + discover
     headings. Used in ~11 places across 5 templates, so it is theme, not
     promotion, despite once being commented "Fiery Red" after a campaign that
     happened to share it. */
  --campaign-accent: var(--accent);
  /* Campaign chrome ONLY — the hero badge and hero glow. Overridden per-page from
     data/venues/egao.json → campaign.accent, and falls back to the house accent so
     a campaign with no colour of its own still renders. Deleting the campaign block
     removes the chrome entirely; this token then goes unused rather than stale. */
  --bg: #FFFDF7;
  /* Warm creamy background */
  --bg-dark: #121212;
  --text: #1A1A1A;
  --text-light: #555555;
  --white: #ffffff;
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  font-family: 'Poppins', sans-serif;
  line-height: 1.6;
}

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

body {
  background-color: var(--bg);
  color: var(--text);
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
.display-font {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 1px;
}

a {
  text-decoration: none;
  color: inherit;
  transition: var(--transition);
}

button {
  cursor: pointer;
  border: none;
  outline: none;
  font-family: 'Poppins', sans-serif;
  transition: var(--transition);
}

/* Glassmorphism Effect for nav */
.glass {
  background: rgba(25, 25, 25, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 2px solid var(--secondary);
}

/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-in {
  animation: fadeIn 0.8s ease forwards;
}

section {
  padding: 80px 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.btn-primary {
  background: var(--secondary);
  color: var(--primary);
  padding: 12px 32px;
  border-radius: 50px;
  /* rounded, playful shape */
  font-weight: 700;
  font-size: 1.1rem;
  box-shadow: 0 4px 15px rgba(255, 192, 0, 0.4);
}

.btn-primary:hover {
  background: var(--primary);
  color: var(--secondary);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.sticker-price {
  background-color: var(--secondary);
  color: var(--primary);
  padding: 5px 12px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 1.1rem;
  transform: rotate(-5deg);
  display: inline-block;
}

.accent-text {
  color: var(--accent);
}

.yellow-bg {
  background-color: var(--secondary);
  color: var(--primary);
}

.dark-bg {
  background-color: var(--primary);
  color: var(--white);
}

.image-card {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  transition: var(--transition);
  background: var(--white);
  border: 4px solid var(--white);
}

.image-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
  border-color: var(--secondary);
}

/* ===== HTMX/Python port supplements ===== */

/* Scrolled navbar state (was a React isScrolled inline-style toggle) */
#navbar.scrolled {
  padding: 1rem 5% !important;
  background-color: var(--primary) !important;
  border-bottom: 2px solid var(--secondary);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Image zoom on card hover (the JSX :hover-in-style object never actually fired) */
.image-card img {
  transition: transform 0.5s ease;
}
.image-card:hover img {
  transform: scale(1.08);
}

a.btn-primary {
  display: inline-block;
  text-decoration: none;
}