/* --- CSS VARIABLES: Space Bucket's Vivid, Solid Palette --- */
:root {
    --color-pink: #FF007F;    /* Hot Pink / Vivid Fuschia */
    --color-blue: #0000FF;    /* Pure Electric Blue */
    --color-yellow: #FFFF00;  /* Pure Neon Yellow */
    --color-red: #FF0000;     /* Pure Red for highlights */
    --color-black: #000000;   /* Solid Black */
    --color-white: #FFFFFF;   /* Solid White */

    --color-main-bg: var(--color-black); /* Overall page background */
    --color-left-pane-bg: var(--color-pink); /* Solid pink for left pane */
    --color-right-pane-bg: var(--color-white); /* Solid white for right pane */
    --color-section-bg-content: var(--color-black); /* Black background for content blocks in white pane */

    --border-thickness: 3px;
    --border-style: var(--border-thickness) solid var(--color-black); /* Default border */
}

/* --- GLOBAL STYLES & RESET --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth; /* Smooth scrolling for navigation links */
}

body {
    font-family: 'Open Sans', sans-serif;
    line-height: 1.6;
    color: var(--color-black); /* Default text color for elements on white backgrounds */
    background-color: var(--color-main-bg); /* Overall page background is black */
    overflow-x: hidden; /* Prevent horizontal scroll */
}

a {
    color: var(--color-blue); /* Links are electric blue */
    text-decoration: none;
    transition: color 0.2s ease, transform 0.1s ease; /* Simple transitions */
}

a:hover {
    color: var(--color-yellow); /* Yellow on hover */
    transform: translateY(-1px); /* Slight lift */
}

/* --- TYPOGRAPHY --- */
h1, h2, h3, h4 {
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    margin-bottom: 0.5em;
    line-height: 1.2;
    text-shadow: none; /* No text shadows/glows */
    letter-spacing: 0.03em;
    overflow-wrap: break-word; /* Fix for text running off */
    word-break: break-word;
}

/* General H1 (Left Pane Display) */
.band-name-display {
    font-size: clamp(3em, 8vw, 5em);
    font-weight: 700;
    line-height: 1;
    margin-bottom: 0.5em;
    color: var(--color-yellow); /* Band name in yellow */
    border: var(--border-thickness) solid var(--color-red); /* Red border around name */
    padding: 0.2em 0.5em;
}

.tagline {
    font-size: clamp(1em, 3.5vw, 1.5em);
    font-weight: 700;
    color: var(--color-white); /* Tagline white on pink background */
    margin-bottom: 2em;
    border: var(--border-thickness) solid var(--color-black); /* Black border around tagline */
    padding: 0.2em 0.5em;
    background-color: var(--color-black); /* Solid black background for tagline */
}

/* Section Titles (Right Pane Blog) */
.section-title {
    font-size: clamp(2.5em, 7vw, 4em);
    font-weight: 700;
    color: var(--color-pink); /* Section titles in pink */
    text-align: center;
    margin-bottom: 1.5em;
    padding-bottom: 0.5em;
    border-bottom: var(--border-thickness) solid var(--color-blue); /* Blue underline */
    display: inline-block;
    width: fit-content;
    white-space: nowrap; /* Prevent breaking across lines for underlines */
    margin-left: auto;
    margin-right: auto;
}

/* Blog Post Titles */
.blog-post h3, .album-feature h3 {
    font-size: clamp(1.8em, 5vw, 2.5em);
    font-weight: 700;
    color: var(--color-yellow); /* Post titles in yellow */
    margin-bottom: 0.5em;
}

/* Smaller Headings (e.g., band member roles) */
h4 {
    font-size: clamp(1.1em, 2.5vw, 1.5em);
    font-weight: 700;
    color: var(--color-blue); /* H4 in electric blue */
    margin-top: -0.5em;
    margin-bottom: 1em;
}

/* Paragraph text */
p {
    font-size: clamp(1em, 1.8vw, 1.1em);
    color: var(--color-white); /* White text on black content blocks */
}

/* --- BUTTONS (Solid Fills) --- */
.button {
    display: inline-block;
    padding: 0.8em 1.5em;
    background-color: var(--color-blue); /* Solid blue button default */
    color: var(--color-white); /* White text on blue button */
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    border: var(--border-thickness) solid var(--color-black); /* Black border */
    border-radius: 5px; /* Slightly rounded for classiness */
    margin: 0.5em 0.5em 0.5em 0;
    transition: background-color 0.2s ease, color 0.2s ease; /* Simple color change */
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
}

.button:hover {
    background-color: var(--color-yellow); /* Yellow on hover */
    color: var(--color-black); /* Black text on yellow hover */
    border-color: var(--color-red); /* Red border on hover */
}

/* Specific button styles */
.button-primary {
    background-color: var(--color-pink);
    color: var(--color-white);
}
.button-primary:hover {
    background-color: var(--color-red);
    color: var(--color-white);
}

.button-secondary {
    background-color: var(--color-black);
    color: var(--color-white);
}
.button-secondary:hover {
    background-color: var(--color-blue);
    color: var(--color-white);
}

/* --- MAIN CONTAINER LAYOUT (DESKTOP) --- */
.main-container {
    display: flex; /* Creates the two columns */
    min-height: 100vh; /* Ensures it takes full screen height initially */
    /* overflow: hidden; /* Removed to allow page scrolling */
}

/* --- LEFT STATIC PANE --- */
.left-pane {
    flex: 0 0 35%; /* Fixed width for the left pane (35% of viewport width) */
    background-color: var(--color-left-pane-bg); /* Solid pink background */
    display: flex;
    flex-direction: column; /* Stack content vertically */
    align-items: center; /* Center horizontally */
    justify-content: flex-start; /* Align content to top of pane */
    padding: 2em;
    border-right: var(--border-thickness) solid var(--color-red); /* Red separator border */
    
    /* Re-introducing sticky for desktop */
    position: sticky;
    top: 0;
    height: 100vh; /* Full viewport height for static effect */
    overflow-y: auto; /* Allow scrolling within the left pane if content is too tall */
}

.left-pane-content {
    text-align: center;
    max-width: 90%; /* Content doesn't go to edges */
    color: var(--color-black); /* Text on pink background is black */
}

.language-switcher {
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    font-size: 1.1em;
    margin-bottom: 2em;
    color: var(--color-black); /* Black text */
}

.language-switcher a {
    color: var(--color-white); /* White link text */
    background-color: var(--color-black); /* Black background for link */
    padding: 0.2em 0.5em;
    border: var(--border-thickness) solid var(--color-red); /* Red border for link */
}

.language-switcher a:hover {
    color: var(--color-black);
    background-color: var(--color-yellow);
    border-color: var(--color-black);
}

.language-switcher .active-lang {
    background-color: var(--color-white); /* Active language highlight */
    color: var(--color-pink);
    padding: 0.2em 0.5em;
    border: var(--border-thickness) solid var(--color-black);
}

.band-photo {
    max-width: 50%; /* Image takes up 50% of left pane's width */
    height: auto;
    border: var(--border-thickness) solid var(--color-black); /* Black border */
    margin-bottom: 2em;
}

.main-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.main-nav ul li {
    margin-bottom: 0.8em;
}

.main-nav ul li a {
    font-family: 'Oswald', sans-serif;
    font-size: 1.4em;
    font-weight: 700;
    color: var(--color-white); /* White text for menu links */
    display: block;
    padding: 0.5em 1em;
    border: var(--border-thickness) solid var(--color-black);
    background-color: var(--color-black); /* Black background for links */
}

.main-nav ul li a:hover {
    background-color: var(--color-white); /* White background on hover */
    color: var(--color-pink); /* Pink text on hover */
    border-color: var(--color-pink);
}

/* --- RIGHT SCROLLING CONTENT PANE --- */
.right-pane {
    flex: 1; /* Takes up all remaining width */
    background-color: var(--color-right-pane-bg); /* Solid white background */
    padding: 2em;
    overflow-y: auto; /* This pane scrolls independently for its content */
}

.content-container {
    max-width: 900px; /* Constrain content width */
    margin: 0 auto;
}

.content-section {
    background-color: var(--color-section-bg-dark); /* Solid black background for content blocks */
    color: var(--color-white); /* White text within content blocks */
    border: var(--border-thickness) solid var(--color-yellow); /* Yellow border for sections */
    padding: 2.5em;
    margin-bottom: 3em;
    border-radius: 5px; /* Slight rounding for classiness */
    position: relative;
    transform: rotate(var(--section-rotation, 0deg)); /* Subtle rotation */
    margin-left: var(--section-margin-offset, 0em);
    margin-right: var(--section-margin-offset, 0em);
}

/* Subtle section rotations */
#latest-transmission { --section-rotation: -0.2deg; --section-margin-offset: -0.5em; border-color: var(--color-red); }
#music-section { --section-rotation: 0.3deg; --section-margin-offset: -0.8em; border-color: var(--color-pink); }
#show-dates { --section-rotation: -0.1deg; --section-margin-offset: -0.3em; border-color: var(--color-blue); }
#meet-the-bucket { --section-rotation: 0.2deg; --section-margin-offset: -0.7em; border-color: var(--color-yellow); }
#contact-us { --section-rotation: -0.3deg; --section-margin-offset: -0.9em; border-color: var(--color-red); }
#get-merch { --section-rotation: 0.1deg; --section-margin-offset: -0.4em; border-color: var(--color-pink); }


/* News Section */
.news-item {
    border: var(--border-thickness) solid var(--color-pink); /* Pink border for individual news items */
    padding: 1.5em;
    margin-bottom: 2em;
    background-color: var(--color-black); /* Ensure background for news items is black */
    color: var(--color-white); /* Text on news item is white */
}

.news-item h3 {
    color: var(--color-yellow); /* News title in yellow */
}
.news-item time {
    display: block;
    font-size: 0.9em;
    color: var(--color-red); /* Date in red */
    margin-bottom: 1em;
}
.member-quote {
    font-style: italic;
    color: var(--color-yellow); /* Yellow quote */
    text-align: right;
    margin-top: 1.5em;
    padding-top: 1em;
    border-top: var(--border-thickness) solid var(--color-blue); /* Blue line above quote */
}

/* Music Section */
.album-feature {
    text-align: center;
    border: var(--border-thickness) solid var(--color-blue); /* Blue border for album feature */
    padding: 1.5em;
    margin-bottom: 2em;
    background-color: var(--color-black);
    color: var(--color-white);
}
.album-cover {
    max-width: 250px;
    height: auto;
    border: var(--border-thickness) solid var(--color-yellow); /* Yellow border */
    margin: 1em auto;
    display: block;
    filter: none; /* No filters */
}
audio {
    width: 100%;
    max-width: 400px;
    margin: 1em auto;
    display: block;
    filter: none; /* No filters */
    border: var(--border-thickness) solid var(--color-red); /* Red border for audio player */
    background-color: var(--color-grey-dark); /* Simple background */
}
.discography ul {
    list-style: none;
    padding-left: 0;
    text-align: center;
}
.discography li {
    margin-bottom: 0.5em;
}
.discography li a {
    color: var(--color-pink); /* Pink link */
    font-weight: bold;
}

/* Shows Section */
.show-list {
    list-style: none;
    padding-left: 0;
    text-align: center;
}
.show-list li {
    border: var(--border-thickness) solid var(--color-pink); /* Pink border for show items */
    padding: 0.8em 1.5em;
    margin-bottom: 1em;
    background-color: var(--color-black);
    color: var(--color-white);
}
.show-list li a {
    color: var(--color-yellow); /* Yellow link for tickets */
}
.show-date {
    font-weight: 700;
    color: var(--color-blue); /* Blue date */
    margin-right: 0.5em;
}

/* About Section */
.band-bio {
    text-align: center;
    color: var(--color-white); /* White text */
}
.member-profiles-grid {
    display: grid;
    /* Default single column for mobile, adjusted for horizontal on large screens below */
    gap: 2em; /* Gap between members */
    margin-top: 2em;
}
.member-profile {
    border: var(--border-thickness) solid var(--color-red); /* Red border for profiles */
    padding: 1.5em;
    text-align: center;
    background-color: var(--color-black);
    color: var(--color-white);
}
.member-profile:nth-child(even) {
    border-color: var(--color-blue); /* Blue for even profiles */
}
.member-profile:nth-child(odd) {
    border-color: var(--color-yellow); /* Yellow for odd profiles */
}

.member-photo {
    width: 150px;
    height: 150px;
    border-radius: 50%; /* Circle photos */
    object-fit: cover;
    border: var(--border-thickness) solid var(--color-white); /* White border */
    margin-bottom: 1em;
    filter: none; /* No filters */
}
.member-profile h3 {
    color: var(--color-pink); /* Pink name */
}
.member-profile h4 {
    color: var(--color-yellow); /* Yellow role */
    margin-bottom: 0.5em;
}
.member-profile p {
    color: var(--color-white); /* White text */
}

/* Contact Section */
.contact-list {
    list-style: none;
    padding-left: 0;
    text-align: center;
    margin-bottom: 2em;
}
.contact-list li {
    margin-bottom: 0.8em;
    color: var(--color-white); /* White text */
}
.contact-list li a {
    color: var(--color-yellow); /* Yellow link */
}
.social-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1em;
}
.social-button { /* Reusing button styles for consistency */
    background-color: var(--color-blue);
    color: var(--color-white);
    font-size: 0.9em;
}
.social-button:hover {
    background-color: var(--color-red);
    color: var(--color-white);
}

/* Merch Section */
.merch-gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5em;
    margin-bottom: 2em;
}
.merch-item {
    width: 180px;
    height: auto;
    border: var(--border-thickness) solid var(--color-blue); /* Blue border */
    filter: none; /* No filters */
}

/* Archive Links (at bottom of sections) */
.archive-link {
    text-align: center;
    margin-top: 2em;
}
.archive-link a {
    font-weight: bold;
    color: var(--color-pink); /* Pink link */
}

/* --- FOOTER --- */
footer {
    background-color: var(--color-black);
    color: var(--color-white);
    text-align: center;
    padding: 1.5em;
    font-size: 0.9em;
    border-top: var(--border-thickness) solid var(--color-pink); /* Pink border top */
}
.small-web-badge img {
    max-width: 100px;
    height: auto;
    margin-top: 1em;
    filter: none; /* No filters */
}

/* --- MOBILE RESPONSIVENESS --- */
@media (max-width: 768px) {
    .main-container {
        flex-direction: column; /* Stack panes vertically */
        min-height: auto; /* Allow content to dictate height */
    }

    .left-pane {
        width: 100%; /* Full width on mobile */
        height: 100vh; /* Full screen height on initial view */
        position: static; /* Not sticky on mobile */
        border-right: none; /* No right border */
        border-bottom: var(--border-thickness) solid var(--color-red); /* Red bottom border */
        padding-top: 5em; /* Adjust top padding for better mobile viewing */
        padding-bottom: 5em; /* Ensure some space at bottom */
        justify-content: flex-start; /* Align content to top of mobile screen */
    }

    .left-pane-content {
        max-width: 100%; /* Allow content to use full width */
    }

    .band-name-display {
        font-size: clamp(3em, 12vw, 6em); /* Make it bigger on mobile initial view */
    }

    .tagline {
        font-size: clamp(1em, 4vw, 2em);
    }

    .band-photo {
        max-width: 60%; /* Slightly larger on mobile */
    }

    .main-nav {
        margin-top: 3em; /* Space below image */
    }

    .right-pane {
        width: 100%; /* Full width on mobile */
        overflow-y: visible; /* Content flows naturally, no fixed scroll area */
        padding-top: 3em; /* Padding for blog content */
    }

    .content-section {
        padding: 1.5em;
        margin-bottom: 2em;
        transform: rotate(0deg); /* No rotation on mobile */
        margin-left: 0;
        margin-right: 0;
    }

    .section-title {
        font-size: clamp(2em, 9vw, 4em);
    }

    .news-item, .album-feature, .show-list li, .member-profile {
        padding: 1em;
        margin-bottom: 1.5em;
    }

    .blog-post h3, .album-feature h3 {
        font-size: clamp(1.5em, 6vw, 2em);
    }

    .member-profiles-grid {
        grid-template-columns: 1fr; /* Stack members vertically on mobile */
    }
}

/* Adjustments for tablets and medium screens */
@media (min-width: 769px) and (max-width: 1024px) {
    .member-profiles-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* 2 columns on tablets */
    }
}


/* Adjustments for larger desktop screens */
@media (min-width: 1025px) {
    .member-profiles-grid {
        grid-template-columns: repeat(3, 1fr); /* Horizontal stacking for 3 members */
    }
}