/* ============================================================
   DARK.CSS — Dark & Cinematic theme
   Loaded by index.html alongside base.css
   ============================================================ */

/* --- Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow+Condensed:wght@400;600;700;800&family=Barlow:wght@300;400;500;600&display=swap');

/* ============================================================
   COLOUR TOKENS
   ============================================================ */
:root {
  --color-bg:              #0a0a0a;
  --color-bg-secondary:    #0f0f0f;
  --color-bg-card:         #141414;
  --color-hero-bg:         linear-gradient(145deg, #0a0a0a 0%, #110608 60%, #0a0a0a 100%);

  --color-text:            #f0f0f0;
  --color-text-muted:      #888888;

  --color-accent:          #c8102e;
  --color-accent-hover:    #e01233;
  --color-btn-text:        #ffffff;

  --color-border:          #222222;

  --color-nav-bg:          rgba(10, 10, 10, 0);
  --color-nav-bg-scrolled: rgba(10, 10, 10, 0.88);
}

/* ============================================================
   LOGO — invert to white on black backgrounds
   ============================================================ */
.nav__logo-img {
  filter: invert(1);
}

.footer__logo {
  filter: invert(1);
  mix-blend-mode: screen;
}

/* ============================================================
   HERO LOGO — large display logo replacing h1
   mix-blend-mode: screen removes the white/black background
   so only the logo shape is visible on any dark surface
   ============================================================ */
.hero__logo-display {
  display: block;
  width: min(700px, 86vw);
  height: auto;
  filter: invert(1);
  mix-blend-mode: screen;
  margin-bottom: var(--space-lg);
}

/* Centre the hero content for the dark version */
.hero .hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 100%;
}

.hero .hero__pre { text-align: center; }
.hero .hero__actions { justify-content: center; }

/* ============================================================
   HERO — photo background, centred on the stage
   ============================================================ */
.hero__bg {
  background-image:
    linear-gradient(
      to bottom,
      rgba(0,0,0,0.60) 0%,
      rgba(0,0,0,0.35) 45%,
      rgba(0,0,0,0.65) 100%
    ),
    url('../assets/images/rock-concert.jpg');
  background-size: cover;
  background-position: center center;
}


/* ============================================================
   ABOUT — photo background
   ============================================================ */
.about {
  background-image:
    linear-gradient(to right, rgba(0,0,0,0.88) 50%, rgba(0,0,0,0.6) 100%),
    url('../assets/images/IMG_7807 copy.jpg');
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
}

/* ============================================================
   CONTACT — photo background
   ============================================================ */
.contact {
  background-image:
    linear-gradient(rgba(0,0,0,0.82), rgba(0,0,0,0.88)),
    url('../assets/images/pampas-crowd.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

/* ============================================================
   SECTION ALTERNATION — keep dark, distinguish subtly
   ============================================================ */
.gallery { background: var(--color-bg-secondary); }

/* ============================================================
   SERVICES — photo background
   ============================================================ */
.services {
  background-image:
    linear-gradient(rgba(0,0,0,0.82), rgba(0,0,0,0.88)),
    url('../assets/images/0M4A4881 copy.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

/* ============================================================
   SERVICE CARDS — subtle red glow on hover
   ============================================================ */
.service-card:hover {
  box-shadow: 0 0 0 1px var(--color-accent),
              0 8px 32px rgba(200, 16, 46, 0.15);
}

/* ============================================================
   GALLERY — dark overlay on placeholder
   ============================================================ */
.gallery__placeholder {
  background: #0e0e0e;
}

/* ============================================================
   STAT CARDS
   ============================================================ */
.stat { background: #0e0e0e; }

/* ============================================================
   SCROLLBAR
   ============================================================ */
::-webkit-scrollbar              { width: 6px; }
::-webkit-scrollbar-track        { background: var(--color-bg); }
::-webkit-scrollbar-thumb        { background: #2a2a2a; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover  { background: var(--color-accent); }

/* ============================================================
   SELECTION
   ============================================================ */
::selection {
  background: var(--color-accent);
  color: #ffffff;
}