/* ───────────────────────────
   Global Tokens
   ─────────────────────────── */
:root{
  /* Colors */
  --dark:   #0d0511;
  --purple: #4c2070;
  /* Accent: neon pink */
  --gold:        #FF2CFD;   /* primary accent */
  --gold-hover:  #FF74FD;   /* softer hover tint */
  --light:  #ffffff;

  /* Typography */
  --font-heading:'Playfair Display',serif;
  --font-body:   'Open Sans',sans-serif;

  /* DEFAULT (desktop / large tablets) */
  --topbar-h: 3.5rem;   /* compact promo bar ≈ 56 px */
  --header-h: 6.5rem;   /* header height stays 6.5rem */
}

/* Reserve space for BOTH fixed elements */
body{
  margin:0;
  padding-top: calc(var(--topbar-h) + var(--header-h));
  font-family:var(--font-body);
  background:var(--dark);
  color:var(--light);
  line-height:1.6;
  box-sizing:border-box;
}

*,
*::before,
*::after{box-sizing:inherit;}

a{color:var(--gold);text-decoration:none;}
a:hover{color:#e4c55c;}

.container{width:90%;max-width:1200px;margin-inline:auto;}
.accent{color:var(--gold);}

/* ─── Promo Top-bar ─── */
.topbar{
  position:fixed;
  top:0; left:0; width:100%; height:var(--topbar-h);
  z-index:120;

  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:.75rem;

  background:var(--purple);
  color:var(--gold);
  padding:.6rem 1rem;
  font-weight:600;
  font-size:.95rem;
  text-align:center;
}

.topbar a{
  background:#F0C356;
  color:var(--dark);
  padding:.45rem 1.2rem;
  border-radius:4px;
  font-size:.9rem;
  white-space:nowrap;
}

/* ─── Fixed Header & Navigation ─── */
header{
  position:fixed;
  top:var(--topbar-h);          /* always clears the bar */
  left:0; width:100%; height:var(--header-h);
  background:rgba(0,0,0,.25);
  backdrop-filter:blur(6px);
  z-index:110;
}

.nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  height:100%;
  padding-inline:.6rem;
}

.logo-img-small{height:85px;width:auto;}

nav ul{display:flex;gap:1.3rem;list-style:none;margin:0;padding:0;}
nav a{font-weight:600;font-size:.95rem;}

#nav-toggle{
  display:none;
  background:none;
  border:none;
  color:var(--gold);
  font-size:2rem;
}

/* Mobile Nav */
@media (max-width:780px){
  nav{display:none;}
  #nav-toggle{display:block;}
  nav.open{
    display:block;
    position:absolute;
    right:5%;
    top:calc(100% + .6rem);
    background:var(--purple);
    padding:1rem;
    border:2px solid var(--gold);
    border-radius:8px;
  }
  nav.open ul{flex-direction:column;gap:1rem;}
    :root{
    --topbar-h: 6.5rem; /* taller bar on small screens */
  }
}

/* ─── Hero ─── */
.hero{
  height:92vh;
  background:url('img/daniel-obscura.webp') center/cover no-repeat;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  position:relative;
}
.hero::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(76,32,112,.25),rgba(13,5,17,.95));
}
.hero-inner{position:relative;}
.hero h1{
  font-family:var(--font-heading);
  font-size:2.7rem;
  margin-bottom:1rem;
}
.hero-tagline{font-size:1.2rem;margin-bottom:2rem;}

.btn{
  display:inline-block;
  background:var(--gold);
  color:var(--dark);
  padding:.75rem 1.6rem;
  border-radius:30px;
  font-weight:700;
  transition:transform .3s;
}
.btn:hover{transform:scale(1.05);}

/* ─── Venue ─── */
.venue{background:var(--purple);padding:5rem 0;}
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:3rem;
  align-items:center;
}
.venue-img{
  height:300px;
  background:url('img/brian-lawson-w9PMOY91GGM-unsplash.webp') center/cover no-repeat;
  border:3px solid var(--gold);
  border-radius:8px;
}
.venue-info h2{
  font-family:var(--font-heading);
  font-size:2rem;
  margin-bottom:1rem;
}
.badge{
  display:inline-block;
  background:var(--gold);
  color:var(--dark);
  padding:.3rem .8rem;
  border-radius:20px;
  font-weight:700;
  margin-top:1rem;
  font-size:.9rem;
}

/* ─── Experiences ─── */
.experiences{background:var(--dark);padding:5rem 0;}
.experiences h2{
  font-family:var(--font-heading);
  text-align:center;
  font-size:2.3rem;
  margin-bottom:2.5rem;
}
.cards{
  display:grid;
  gap:2rem;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
}
.card{
  background:var(--purple);
  padding:1.5rem;
  border:2px solid var(--gold);
  border-radius:10px;
}
.card h3{
  font-family:var(--font-heading);
  color:var(--gold);
  margin-bottom:.5rem;
}

/* ─── Gallery ─── */
.gallery{background:var(--purple);padding:5rem 0;}
.gallery h2{
  font-family:var(--font-heading);
  text-align:center;
  font-size:2.3rem;
  margin-bottom:2rem;
}
.images{
  display:grid;
  gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
}
.images img{
  width:100%;
  height:240px;
  object-fit:cover;
  border:2px solid var(--gold);
  border-radius:8px;
}

/* ─── Updates ─── */
.updates{background:var(--dark);padding:4rem 0;text-align:center;}
.updates h2{font-family:var(--font-heading);font-size:2.3rem;}
.updates p{margin-top:.4rem;}
.updates form{
  display:flex;
  justify-content:center;
  gap:.6rem;
  margin-top:1.2rem;
}
.updates input{
  flex:1;
  max-width:320px;
  padding:.8rem;
  border:none;
  border-radius:6px;
}
.updates .btn{border-radius:6px;}

/* ─── Footer ─── */
footer{
  background:var(--purple);
  text-align:center;
  padding:1.5rem 0;
  font-size:.9rem;
}
footer a{color:var(--gold);}