/* Cleaned / restored CSS */
:root{
  --hero-bg: #B43E3E; /* added so body fallback works */
  --accent: #041104;
  --slack: #4A154B;
  --text-dark: #111;
  --muted-white: rgba(255,255,255,0.9);
}

*{box-sizing: border-box}

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--text-dark);
    scroll-behavior: smooth;
    scroll-snap-type: y mandatory;

    /* keep a matching fallback color so no white bar shows */
    background-color: var(--hero-bg);
}

/* HERO / first section — show more of the bottom of the photo */
.hero {
    background-image:
      linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.35)),
      url("night_stars_lights.jpg"); /* relative path, case-sensitive */
    background-repeat: no-repeat;
    /* x y: anchor to the right and bias vertically toward the bottom */
    background-position: right 75%;
    background-size: cover;        /* fills area, crops top so bottom is visible */
    background-attachment: scroll;
    background-color: var(--hero-bg); /* fallback */
    color: #fff;
    min-height: 100vh;
    padding: 2rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    scroll-snap-align: start;
    margin-top: 0;    /* ensure no page gap shows through */
    padding-top: 48px; /* small inward nudge so content isn't flush with top */
}

/* small screens: nudge the focus further down so bottom remains visible */
@media (max-width: 600px) {
    .hero {
        background-position: right 85%;
        background-size: cover;
        padding-top: 28px;
    }
}

/* requested global h1 (kept), but ensure hero h1 stays white for contrast */
h1 {
    text-align: center;
    font-style: italic;
    color: rgb(43, 5, 5);
    margin: 30px;
    font-size: 3rem;
}
.hero h1 {
    color: #fff;
}

.camp-image {
    display: block;
    margin: 0 auto;
    max-width: 30%;
    height: auto;
}

p {
    text-align: center;
    font-size: 20px;
}

/* links */
.bornhack {
    color: #cec9c9;
    font-weight: bold;
    text-decoration: underline;
}

/* buttons */
button {
    display: block;
    margin: 40px auto; /* fixed from "40  px" */
    padding: 10px 20px;
    font-size: 16px;
    background-color: #041104;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

/* anchor styled buttons */
.button, .button2 {
    color: rgb(33, 112, 26);
    text-decoration: none;
    display: inline-block;
    padding: 20px 25px;
    background-color: #275527;
    border-radius: 1px;
    font-style: italic;
    font-size: larger;
}

/* small undertext */
.undertext {
    text-align: center;
    font-size: 15px;
    color: #cec9c9;
    font-style: italic;
}

/* other link styles */
.hackclub {
    color: #cec9c9;
    font-weight: bold;
    text-decoration: underline;
    font-style: italic;
}

.slack {
    color: #cec9c9;
    font-weight: bold;
    font-style: italic;
    font-size: small;
}

/* details page */
.details-page {
    background-color: #ffffff;
    color: #111;
    min-height: 1vh;
    padding: 4rem 1rem;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    scroll-snap-align: start;
}
.details-inner {
    max-width: 1000px;
    width: 100%;
    padding: 3rem 2rem;   /* space around the FAQ content */
}

/* responsive tweaks */
@media (max-width: 600px) {
    .camp-image { max-width: 60%; }
    .button, .button2, button { padding: 8px 12px; font-size: 15px; }
    .details-inner { padding: 0 1rem; }
}

/* space around the FAQ heading */
.faq {
    margin: 0 1rem 1.5rem auto; /* right-align-ish with extra bottom space */
    padding-left: 1rem;        /* gap between decorative line and text if used */
    font-size: 1.5rem;
}

/* space between heading and list */
.faq + dl {
    margin-top: 1rem;
}

/* spacing for items */
.details-inner dl {
    margin: 0;
    padding: 0;
}
.details-inner dl dt {
    margin-top: 1.25rem;   /* gap before each question */
    font-weight: 700;
}
.details-inner dl dd {
    margin: 0.4rem 0 0.8rem 1rem;  /* small indent and vertical spacing */
    line-height: 1.5;
    color: #333;
}

/* smaller screens */
@media (max-width: 600px) {
    .details-inner { padding: 2rem 1rem; }
    .faq { margin-right: 0.6rem; padding-left: 0.7rem; font-size: 1.25rem; }
    .details-inner dl dt { margin-top: 0.9rem; }
}

p{
    text-align: center;
    color: #cec9c9;
}

.faq{
    text-align: center;
    color: #111;
    font-style: italic;
}

.footer{
    text-align: center;
    color: #cec9c9;
    font-style: italic;
}

p2{
    color: #cec9c9;
    font-style: italic;
    font-size: 18px;
}

/* center the button row and ensure .button2 is horizontally centered */
.button-row {
  display: flex;
  flex-direction: column; /* stacks undertext above the button */
  align-items: center;    /* centers children horizontally */
  justify-content: center;
  gap: 0.5rem;
  text-align: center;
}

/* ensure .button2 has no stray margins and stays centered */
.button2 {
  margin: 0;              /* reset any inherited margins */
  display: inline-block;
}

/* small-screen tweaks */
@media (max-width: 600px) {
  .button-row { gap: 0.4rem; }
  .button2 { padding: 8px 12px; }
}