/* ==========================================================================
   DJ King Brian — theme layer (loaded after Bootstrap 5.3 CDN + Bootstrap Icons)
   Structure mirrors index.html top-to-bottom. Overrides use Bootstrap's own
   CSS variables where possible instead of !important or a Sass rebuild.
   ========================================================================== */

/* ---- 1. Custom font ---- */
@font-face {
  font-family: 'Aubrey G';
  src: url('../assets/fonts/AubreyG.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ---- 2. Theme variables (Bootstrap overrides + custom palette) ---- */
:root {
  --bs-body-bg: #ffffff;
  --bs-body-color: #141414;
  --bs-primary: #f5a623;
  --bs-primary-rgb: 245, 166, 35;
  --bs-link-color: #c97f0d;
  --bs-link-hover-color: #a6690a;
  --bs-border-color: #e5e0d8;
  --bs-font-sans-serif: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  --font-display: 'Aubrey G', 'Arial Black', sans-serif;
  --color-bg-alt: #f4f1ec;
  --color-surface: #f8f6f2;
  --color-text-muted: #5c564d;
  --header-height: 132px;

  /* Equalizer gradient — matches the logo's red-orange-yellow-green bars */
  --eq-1: #ed1c24;
  --eq-2: #f7941d;
  --eq-3: #fdb913;
  --eq-4: #8dc63f;
  --eq-5: #39b54a;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ---- 3. Base ---- */
body {
  background-color: var(--bs-body-bg);
}

.section-eyebrow {
  color: var(--bs-primary);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.section-title {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 2rem;
  letter-spacing: 0.02em;
  margin-bottom: 1rem;
}

.section-intro {
  color: var(--color-text-muted);
  max-width: 60ch;
}

@media (min-width: 768px) {
  .section-title {
    font-size: 2.75rem;
  }
}

.content-section {
  background-color: var(--bs-body-bg);
}

.content-section--alt {
  background-color: var(--color-bg-alt);
}

/* ---- 4. Header: logo + nav + hero ---- */
.brand-row {
  padding-top: 1.25rem;
  padding-bottom: 0.75rem;
  background-color: var(--bs-body-bg);
}

/* Sized by width, not height, so the logo can never exceed the viewport.
   The logo is 1240x864 (~1.435:1), so a fixed height of 340px implies 488px
   of width — wider than every phone, which pushed the page into horizontal
   overflow and threw off centering. max-width keeps it inside its container
   and height:auto preserves the aspect ratio. */
.site-logo {
  width: 317px;
  max-width: 100%;
  height: auto;
}

@media (min-width: 768px) {
  .site-logo {
    width: 410px;
  }
}

.main-nav {
  background-color: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--bs-border-color);
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.main-nav .nav-link {
  color: var(--bs-body-color);
  font-weight: 500;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.5rem 1rem;
  position: relative;
}

.main-nav .nav-link.active {
  color: var(--bs-primary);
}

/* Equalizer active-state indicator under the current nav link (paired with ScrollSpy) */
.eq-indicator {
  display: inline-flex;
  align-items: flex-end;
  gap: 3px;
  height: 14px;
  margin-left: 6px;
  opacity: 0;
  transition: opacity 0.2s ease;
  vertical-align: middle;
}

.nav-link.active .eq-indicator {
  opacity: 1;
}

.eq-indicator i {
  display: block;
  width: 3px;
  border-radius: 1px;
  animation: eq-pulse 0.9s ease-in-out infinite;
}

.eq-indicator i:nth-child(1) { height: 40%; animation-delay: 0s; background-color: var(--eq-1); }
.eq-indicator i:nth-child(2) { height: 100%; animation-delay: 0.2s; background-color: var(--eq-3); }
.eq-indicator i:nth-child(3) { height: 65%; animation-delay: 0.4s; background-color: var(--eq-5); }

@media (prefers-reduced-motion: reduce) {
  .eq-indicator i {
    animation: none;
    height: 70%;
  }
}

.hero {
  position: relative;
  width: 100%;
  height: 70vh;
  min-height: 420px;
  overflow: hidden;
}

.hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.5rem;
  background: linear-gradient(180deg, rgba(13, 13, 13, 0.1) 0%, rgba(13, 13, 13, 0.75) 100%);
}

.hero-title {
  font-family: var(--font-display);
  font-weight: 400;
  color: #fff;
  font-size: 2.5rem;
  letter-spacing: 0.03em;
  margin-bottom: 0.5rem;
}

.hero-eyebrow {
  color: var(--bs-primary);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 1.4rem;
  font-weight: 800;
  margin-bottom: 0.75rem;
}

@media (min-width: 768px) {
  .hero-title {
    font-size: 4rem;
  }
  .hero-eyebrow {
    font-size: 2rem;
  }
}

/* Equalizer-bar section divider (used consistently between major sections) */
.eq-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 56px;
  background-color: inherit;
}

.eq-divider span {
  display: block;
  width: 7px;
  border-radius: 3px;
  animation: eq-pulse 1.4s ease-in-out infinite;
}

@media (min-width: 768px) {
  .eq-divider {
    gap: 12px;
    height: 72px;
  }

  .eq-divider span {
    width: 9px;
  }
}

.eq-divider span:nth-child(1) { height: 30%; animation-delay: 0s; background-color: var(--eq-1); }
.eq-divider span:nth-child(2) { height: 65%; animation-delay: 0.15s; background-color: var(--eq-2); }
.eq-divider span:nth-child(3) { height: 100%; animation-delay: 0.3s; background-color: var(--eq-3); }
.eq-divider span:nth-child(4) { height: 55%; animation-delay: 0.45s; background-color: var(--eq-4); }
.eq-divider span:nth-child(5) { height: 25%; animation-delay: 0.6s; background-color: var(--eq-5); }

@keyframes eq-pulse {
  0%, 100% { transform: scaleY(0.4); }
  50% { transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
  .eq-divider span {
    animation: none;
    transform: scaleY(0.8);
  }
}

/* ---- 5. About ---- */
.about-photo {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  width: 100%;
}

.bio-text {
  font-size: 1.05rem;
  line-height: 1.7;
}

/* ---- 6. Music & Snack Mix (shared mix-card component) ---- */
.mix-card {
  background-color: var(--color-surface);
  border: 1px solid var(--bs-border-color);
  height: 100%;
}

.mix-card .card-body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.mix-card .mix-title {
  font-weight: 600;
  margin-bottom: 0;
}

.mix-card .mix-meta {
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

.mix-card .mix-description {
  font-size: 0.9rem;
  line-height: 1.5;
  margin-bottom: 0.25rem;
}

.mix-card .genre-tag {
  display: inline-block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background-color: rgba(var(--bs-primary-rgb), 0.15);
  color: var(--bs-primary);
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  margin: 0 0.25rem 0.25rem 0;
  /* "Afrobeat/Amapiano" is one unbreakable token ~161px wide, which overflows
     a half-width column on a 320px screen and pushes the whole page sideways.
     These let it wrap instead of forcing the layout wider. */
  max-width: 100%;
  overflow-wrap: anywhere;
}

.mix-card .embed-wrap {
  position: relative;
  width: 100%;
}

.mix-card .embed-wrap iframe {
  width: 100%;
  border: 0;
  display: block;
}

.mix-card .embed-placeholder {
  min-height: 150px;
  background-color: rgba(0, 0, 0, 0.03);
  border: 1px dashed var(--bs-border-color);
}

.mix-card .embed-cover {
  width: 100%;
  object-fit: cover;
  display: block;
}

/* "Coming Soon" badge over the artwork of mixes that aren't uploaded yet.
   Real DOM text rather than baked into the image, so screen readers get it
   and the wording lives in one place (renderMixCard in js/main.js). */
.mix-card .embed-wrap {
  position: relative;
}

.coming-soon-badge {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  z-index: 2;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #fff;
  background-color: rgba(26, 26, 26, 0.85);
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
  backdrop-filter: blur(2px);
  pointer-events: none;
}

/* Music: larger, full sets */
#music-grid .embed-wrap iframe {
  height: 166px;
}

#music-grid .embed-cover {
  height: 220px;
}

/* Snack Mix: denser grid, slightly shorter embeds */
#snackmix-grid .embed-wrap iframe {
  height: 140px;
}

#snackmix-grid .embed-cover {
  height: 180px;
}

/* ---- 7. Press kit ---- */
.press-card {
  background-color: var(--color-surface);
  border: 1px solid var(--bs-border-color);
}

.press-card img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.press-card .logo-thumb {
  object-fit: contain;
  background-color: var(--color-bg-alt);
  padding: 1rem;
}

/* The white logo variant is designed for dark backgrounds — on the same
   light --color-bg-alt as the black logo its white lettering nearly
   disappears, so it gets its own dark card background instead. */
.press-card .logo-thumb--dark {
  background-color: #1a1a1a;
}

/* ---- 8. Booking form ---- */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-success {
  color: #1e7e34;
  font-weight: 500;
}

.form-error {
  color: #c0392b;
  font-weight: 500;
}

.btn-book-submit {
  background-color: var(--eq-1);
  border-color: var(--eq-1);
  color: #fff;
}

.btn-book-submit:hover,
.btn-book-submit:focus,
.btn-book-submit:active {
  background-color: #c8171e;
  border-color: #c8171e;
  color: #fff;
}

/* ---- 9. Social ---- */
.social-btn {
  border-radius: 999px;
  padding: 0.6rem 1.25rem;
}

.social-btn i {
  margin-right: 0.4rem;
}

/* ---- 9b. EPK page (epk.html) — at-a-glance facts ---- */
.epk-fact-label {
  color: var(--bs-primary);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.7rem;
  font-weight: 700;
  margin-bottom: 0.15rem;
}

.epk-fact-value {
  font-weight: 600;
  font-size: 1.05rem;
  margin-bottom: 0;
}

.epk-facts .col-6,
.epk-facts .col-md-3 {
  border-left: 3px solid var(--bs-border-color);
  padding-left: 0.9rem;
}

/* On the EPK the genre pills are informational rather than per-card, so they
   need the same wrap guard the mix-card ones got — several are long tokens. */
.epk-facts + .row .genre-tag,
.genres > .genre-tag {
  display: inline-block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background-color: rgba(var(--bs-primary-rgb), 0.15);
  color: var(--bs-primary);
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  margin: 0 0.25rem 0.35rem 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* ---- 10. Footer ---- */
.site-footer {
  background-color: var(--color-bg-alt);
  border-top: 1px solid var(--bs-border-color);
}

.footer-logo {
  height: 80px;
  width: auto;
  opacity: 0.85;
}

.footer-copy {
  color: var(--color-text-muted);
}

/* ---- 11. Scroll-reveal (gentle fade + rise) ---- */
[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}