/* Base */
body {
  background-color: #121212;  /* dark background */
  color: #f0f0f0;             /* light text */
}

a {
  color: #66ccff;
}


/* Headings */
h1.hero-title {
  font-family: 'Changa One', sans-serif;
}

.section-title {
  font-family: 'Changa One', sans-serif;
  color: #ffcc00;
}

.orange-text {
  color: orange; /* or #ff6600 */
}

h2 {
  font-size: 1.5rem;
  color: #00c4ff;
  font-family: 'Changa One', sans-serif;
}


/* Text + Button Section with background image */
.text-section {
  position: relative;
  background-image: url('../images/from-dj-desk.png');
  background-size: cover;
  background-position: center;
  width: 100%;
  color: #fff;
}
.text-section-summercamp {
  position: relative;
  /* Use a root-relative path if the CSS is in the same directory as images */
  background-image: url('../images/summercamp/in-marquee.jpg');
  background-size: cover;
  background-position: center;
  width: 100%;
  color: #fff;
  z-index: 1; /* Creates a new stacking context */
  overflow: hidden;
}

.text-section-summercamp::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5); /* Dark overlay */
  z-index: -1; /* Puts the overlay BEHIND the text but ABOVE the background-image */
}

/* Ensure all text inside stays on top */
.text-section-summercamp > * {
  position: relative;
  z-index: 1; 
}
.text-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5); /* dark overlay */
}

.text-section > * {
  position: relative; /* keep text above overlay */
}


/* Cards */
.card-text {
  font-size: 0.9rem;
}

.tight-text p {
  margin: 0.25rem 0;
}

.card-title {
  color: #00c4ff; /* vivid cyan accent */
  font-family: 'Changa One', sans-serif;
}


/* Us / We / They / Them Block */
.us-block {
  background: url('../images/the-crew.png') no-repeat center center;
  background-size: cover;
  position: relative;
}

.us-block::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0,0,0,0.4);
  z-index: 0;
}

.us-block .container {
  position: relative;
  z-index: 1;
}


/* Ethos Block */
.ethos-block {
  background: url('../images/friendly.jpg') no-repeat center center;
  background-size: cover;
  position: relative;
  min-height: 100vh;
  width: 100%;
}

.ethos-block::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0,0,0,0.4);
  z-index: 0;
}

.ethos-block .container {
  position: relative;
  z-index: 1;
}

/* What to Expect Block */
.expect-block {
  background: url('../images/your-host.jpg') no-repeat center center;
  background-size: cover;
  position: relative;
  min-height: 100vh;
  width: 100%;
}

/* History Block */
.history-block {
  background: url('../images/camber-dystopia.jpg') no-repeat center center;
  background-size: cover;
  position: relative;
  min-height: 100vh;
  width: 100%;
}

/* Dark overlay */
.history-block::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0,0,0,0.45); /* adjust opacity 0.2–0.7 */
  z-index: 0;
}

/* Ensure content sits above overlay */
.history-block .container {
  position: relative;
  z-index: 1;
}



/* Footer */
/* Now in native bootstrap */


/* Responsive tweaks */
@media (orientation: portrait) {
  .hero-section { height: 35vh; }
}

@media (orientation: landscape) and (max-width: 1024px) {
  .hero-section { height: 85vh; }
}