.home-container {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    padding-top: 80px;
    padding-bottom: 20px; /* Give the audio recorder breathing room */
}

/* Ensure sections use the dark theme by default */
.section {
    min-height: 100dvh;
    height: auto; /* Allow the section to expand if content doesn't fit */
    padding-bottom: 50px; /* Ensure content isn't flush with the bottom */
    background-color: #000000;
    color: #ffffff;
}

.home-section {
    margin-bottom: 20px; /* Adds space between Home and The Band */
}

@media (prefers-reduced-motion: no-preference) {
    max-width: 768px;
    html {
        scroll-behavior: smooth;
    }
}
/** { outline: 1px solid red !important; }*/

.main-content {
    padding-top: 60px; /* Adjust this to match your bar's height */
}

/* Ensure the parent is a flex container if needed */
.parent-container {
    display: flex;
    flex-direction: column;
    height: 100vh; /* Set the parent to viewport height */
}

.menu-bar, .home-container {
    /* Fallback for older browsers */
    height: 100vh;
    /* Modern mobile standard: fits the actual visible area */
    height: calc(100dvh - 60px);

    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Global settings */
html, body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background-color: #000000;
    color: #ffffff; /* Sets white text globally */
    font-family: sans-serif;
}

.hero-text-overlay {
    text-align: center;
    color: white;
}

.band-name {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 5rem;
    letter-spacing: 0.1em;
    margin: 0;
}

.location {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.2rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    margin: 0.5rem 0;
    opacity: 0.8;
}

.music-desc {
    font-family: 'Special Elite', cursive; /* The unique "rock/typewriter" style */
    font-size: 1.8rem;
    font-style: italic;
    color: #ffffff; /* Subtle accent color for the rock vibe */
    margin: 0;
}
/* Ensure the player stays above everything */
.fixed {
    z-index: 1000;
}

/* Give the page a bottom margin so content isn't hidden by the player */
body {
    padding-bottom: 80px;
}

/* Override ONLY the sections you want to be light */
gallery {
    background-color: #ffffff;
    color: #000000; /* Dark text for the light background */
}

/* 1. Set the container to occupy space in the document flow */
.aether-hero {
    position: relative; /* REQUIRED: Anchors the absolute text container */
    width: 100%;
    height: 100vh; /* Viewport height: spans full browser height */
    overflow: hidden;
}

/* 2. Style the background image to cover the entire space */
.hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* ESSENTIAL: Scalably fills space without stretching */
    display: block;
}

/*!* 3. Style the translucent text overlay box *!*/
/*.hero-text-overlay {*/
/*    position: absolute; !* REQUIRED: Floats text container on top *!*/
/*    top: 50%; !* Position from the top edge *!*/
/*    left: 50%; !* Position from the left edge *!*/
/*    transform: translate(-50%, -50%); !* PERFECTLY centers the box itself *!*/

/*    !* THE SEE-THROUGH BOX *!*/
/*    background-color: rgba(255, 255, 255, 0.4); !* White at 40% opacity *!*/

/*    text-align: center;*/
/*    color: #fff; !* Bright white text color *!*/

/*    !* Size and structure of the box *!*/
/*    padding: 30px 60px;*/
/*    border-radius: 10px; !* Subtle rounded corners *!*/
/*    max-width: 90%; !* Stops the box from touching screen edges on mobile *!*/

/*    !* Typography matching the aesthetic *!*/
/*    font-family: 'Roboto Condensed', sans-serif;*/
/*}*/

/* 4. Individual element styling inside the overlay */
.hero-text-overlay h1 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
}

.hero-text-overlay p {
    font-family: 'Playfair Display', serif;
    font-style: italic;
}

.hero-text-overlay h1, .hero-text-overlay p {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.hero-text-overlay {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100vw; /* Forces the element to be 100% of the browser width */
    margin-left: calc(-50vw + 50%); /* Centers the element even if it overflows the parent */
    transform: translateY(-50%);

    background-color: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    text-align: center;
    color: white;
    padding: 40px 0;
    z-index: 10;
}

.social-icon {
    width: 40px;
    /* This filter turns any icon to pure white */
    filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(180deg) brightness(105%);
    transition: opacity 0.3s ease;
}

.social-icon:hover {
    opacity: 0.6;
}