body {
    margin: 0;
    font-family: 'Segoe UI', sans-serif;
    background-color: #6E6E6E;
    /* Concrete-like */
    color: #ECECEC;
    /* Light gray text for readability */
}

/* Headings */
h1,
h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid #555;
    /* Softer than #444 */
    padding-bottom: 0.5rem;
    text-align: center;
    color: #f0f0f0;
}

/* ======= Navigation Bar ======= */

/* Main navigation container */
.nav {
    background-color: #333;
    /* Dark background */
    padding: 0px;
    /* No padding */
    margin: 0px;
    /* No margin */
    height: 100px;
    /* Fixed height */
    display: flex;
    /* Flexbox layout */
    justify-content: center;
    /* Center horizontally */
    align-items: center;
    /* Center vertically */
    user-select: none;
    /* Disable text selection */
    position: fixed;
    /* Fixed position on screen */
    top: 0;
    /* Stick to top */
    width: 100%;
    /* Full width */
    transition: top 0.3s ease;
    /* Smooth transition for hiding/showing nav */
    z-index: 10;
    /* Stay above other content */
}

/* Navigation list container */
.nav-list {
    list-style: none;
    /* Remove bullet points */
    padding: 0;
    /* Remove default padding */
    margin: 0;
    /* Remove default margin */
    width: 200px;
    /* Fixed width */
}

/* Container for menu toggle (dropdown) */
.menu-toggle {
    position: relative;
    /* Position relative for submenu absolute positioning */
    display: inline-block;
    /* Inline block for layout */
}

/* Label/button for menu toggle */
.menu-label {
    background: #444;
    /* Medium dark background */
    color: #f0f0f0;
    /* Light text color */
    padding: 12px 15px;
    /* Padding inside button */
    cursor: pointer;
    /* Pointer cursor on hover */
    border-radius: 5px;
    /* Rounded corners */
    transition: background-color 0.3s ease;
    /* Smooth background color change */
}

/* Hover effect on menu label */
.menu-label:hover {
    background-color: #555;
    /* Slightly lighter background on hover */
}

/* Submenu list styling */
.submenu {
    list-style: none;
    /* Remove bullets */
    padding: 0;
    /* Remove padding */
    margin: 0;
    /* Remove margin */
    display: none;
    /* Hidden by default */
    position: absolute;
    /* Absolute positioning relative to menu-toggle */
    top: 100%;
    /* Position directly below parent */
    left: 0;
    /* Align left edges */
    min-width: 180px;
    /* Minimum width */
    background-color: #333;
    /* Dark background */
    border-radius: 0 0 5px 5px;
    /* Rounded bottom corners */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    /* Drop shadow for depth */
    z-index: 5;
    /* Layer above other content but below nav */
}

/* Submenu links styling */
.submenu li a {
    display: block;
    /* Block level links */
    color: white;
    /* White text */
    padding: 10px 15px;
    /* Padding inside links */
    text-decoration: none;
    /* Remove underline */
    border-top: 1px solid #555;
    /* Top border to separate items */
}

/* Hover effect on submenu links */
.submenu li a:hover {
    background-color: #555;
    /* Highlight background on hover */
}

/* When menu-toggle has 'open' class, show submenu */
.menu-toggle.open .submenu {
    display: block;
    /* Show submenu */
}

/* Change arrow icon when menu is open */
.menu-toggle.open .menu-label::after {
    content: " ▴";
    /* Up arrow */
}

/* Default arrow icon on menu label */
.menu-label::after {
    content: " ▾";
    /* Down arrow */
}


/* ======= Banner Section ======= */

/* Main banner container with background image and styling */
.home-banner {
    background: url('../images/banner.jpg') center center / cover no-repeat;
    /* Background image centered and covers area */
    height: 80vh;
    /* Height set to 80% of viewport height */
    display: flex;
    /* Flexbox layout */
    align-items: center;
    /* Vertically center content */
    justify-content: center;
    /* Horizontally center content */
    text-align: center;
    /* Center text inside */
    position: relative;
    /* For stacking context */
    color: #000000;
    /* Text color black */
    box-shadow: inset 0 0 100px rgb(0, 0, 0.5);
    /* Dark inset shadow overlay */
    z-index: 1;
    /* Layer order */
}

/* Inner content box inside banner */
.banner-content {
    background-color: rgba(0, 0, 0, 0.5);
    /* Semi-transparent black background */
    padding: 40px 20px;
    /* Padding inside content */
    border-radius: 10px;
    /* Rounded corners */
    max-width: 600px;
    /* Maximum width */
    margin: 0 1rem;
    /* Horizontal margin */
}

/* Banner heading style */
.banner-content h1 {
    font-size: 3em;
    /* Large heading */
    margin-bottom: 10px;
    /* Space below heading */
}

/* Banner paragraph style */
.banner-content p {
    font-size: 1.2em;
    /* Slightly larger paragraph text */
    margin-bottom: 20px;
    /* Space below paragraph */
    color: #ddd;
    /* Light gray text */
}

/* Call-to-action button inside banner */
.banner-button {
    display: inline-block;
    /* Inline block for proper sizing */
    padding: 12px 25px;
    /* Padding around text */
    background-color: #e63946;
    /* Bright red background */
    color: #ffffff;
    /* White text */
    text-decoration: none;
    /* Remove underline */
    border-radius: 5px;
    /* Rounded corners */
    font-weight: bold;
    /* Bold text */
    transition: background-color 0.3s ease;
    /* Smooth color transition */
}

/* Hover effect for banner button */
.banner-button:hover {
    background-color: #d62828;
    /* Darker red on hover */
}

/* ======= Background colors and padding for sections ======= */

/* Shared background and padding for main page sections */
.home-banner,
.content,
.band-members,
.booking-form-container,
.site-footer {
    background-color: #222;
    /* Very dark background */
    padding: 40px 20px;
    /* Padding inside sections */
}

/* Shared background, padding, and text color for content-related sections */
.content,
.band-members,
.music-media,
.merch-support,
.booking-form-container {
    background-color: #333333;
    /* Dark gray background */
    /* Dark but not black, softer on eyes */
    padding: 40px 20px;
    /* Padding inside sections */
    color: #ddd;
    /* Light gray text */
}

/* ======= Content Container ======= */

/* Main content wrapper */
.content {
    max-width: 800px;
    /* Limit content width */
    margin: 0 auto;
    /* Center horizontally */
}

/* ======= Bio Section ======= */

/* Band or artist bio text styling */
.bio {
    font-size: 1rem;
    /* Regular font size */
    line-height: 1.6;
    /* Line spacing for readability */
    margin-bottom: 2rem;
    /* Bottom margin */
    text-align: center;
    /* Centered text */
}

/* ======= Video Player Section ======= */

/* Container for video player */
.video-container {
    max-width: 320px;
    /* Limit width */
    margin: 0 auto;
    /* Center horizontally */
    padding: 1rem;
    /* Inner padding */
    background-color: #222;
    /* Dark background */
    border: 2px solid #444;
    /* Border around container */
    border-radius: 12px;
    /* Rounded corners */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    /* Subtle shadow */
    display: flex;
    /* Flex layout */
    flex-direction: column;
    /* Stack children vertically */
    align-items: center;
    /* Center children horizontally */
}

/* Video element styling */
video {
    width: 100%;
    /* Full container width */
    border-radius: 12px;
    /* Rounded corners */
    background-color: #000;
    /* Black background */
}

/* Controls container below video */
.controls {
    margin-top: 1rem;
    /* Space above controls */
    display: flex;
    /* Flex layout */
    gap: 1rem;
    /* Space between buttons */
    justify-content: center;
    /* Center controls */
}

/* Style for control buttons */
.controls button {
    background-color: #333;
    /* Dark button background */
    color: #eee;
    /* Light text color */
    border: 1px solid #555;
    /* Border around buttons */
    padding: 0.5rem 1rem;
    /* Padding inside buttons */
    border-radius: 5px;
    /* Rounded corners */
    font-size: 1rem;
    /* Button font size */
    cursor: pointer;
    /* Pointer cursor on hover */
    transition: background-color 0.2s ease;
    /* Smooth background transition */
}

/* Hover effect for control buttons */
.controls button:hover {
    background-color: #555;
    /* Slightly lighter background on hover */
}


/* ======= VIDEO PLAYER ======= */

/* Container for video player and controls */
.video-container {
    max-width: 320px;
    /* Limit max width */
    margin: 0 auto;
    /* Center horizontally */
    padding: 1rem;
    /* Inner spacing */
    background-color: #222;
    /* Dark background */
    border: 2px solid #444;
    /* Border around container */
    border-radius: 12px;
    /* Rounded corners */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    /* Soft shadow for depth */
    display: flex;
    /* Flex layout */
    flex-direction: column;
    /* Stack items vertically */
    align-items: center;
    /* Center items horizontally */
}

/* Video element styling */
video {
    width: 100%;
    /* Full container width */
    border-radius: 12px;
    /* Rounded corners to match container */
    background-color: #000;
    /* Black background behind video */
}

/* Controls container below video */
.controls {
    margin-top: 1rem;
    /* Space above controls */
    display: flex;
    /* Flex layout for buttons */
    gap: 1rem;
    /* Space between buttons */
    justify-content: center;
    /* Center controls horizontally */
}

/* Individual control buttons styling */
.controls button {
    background-color: #333;
    /* Dark button background */
    color: #eee;
    /* Light text */
    border: 1px solid #555;
    /* Border to define edges */
    padding: 0.5rem 1rem;
    /* Padding inside buttons */
    border-radius: 5px;
    /* Rounded corners */
    font-size: 1rem;
    /* Readable font size */
    cursor: pointer;
    /* Pointer cursor on hover */
    transition: background-color 0.2s ease;
    /* Smooth background transition */
}

/* Hover effect for control buttons */
.controls button:hover {
    background-color: #555;
    /* Slightly lighter background on hover */
}


/* ======= AUDIO PLAYER ======= */

/* Container for audio player section */
.audio-player-container {
    background-color: #fff;
    /* White background for contrast */
    padding: 30px;
    /* Inner padding */
    border-radius: 12px;
    /* Rounded corners */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    /* Subtle shadow */
    text-align: center;
    /* Center text and controls */
    width: 320px;
    /* Fixed width matching video player */
    margin: 0 auto 2rem auto;
    /* Center horizontally, bottom margin */
}

/* Heading inside audio player container */
.audio-player-container h2 {
    font-size: 1.2rem;
    /* Slightly larger font */
    margin-bottom: 20px;
    /* Space below heading */
    color: #333;
    /* Dark text */
}

/* Native audio element styling */
audio {
    width: 100%;
    /* Full container width */
    margin-bottom: 15px;
    /* Space below audio controls */
}

/* Container for audio control buttons */
.buttons {
    display: flex;
    /* Flex layout */
    justify-content: space-between;
    /* Spread buttons apart */
    margin-bottom: 15px;
    /* Space below buttons */
}

/* Note or caption styling */
.note {
    font-size: 0.85rem;
    /* Smaller font size */
    color: #666;
    /* Medium gray color */
}

/* Links inside note */
.note a {
    color: #ffffff;
    /* White text */
    text-decoration: none;
    /* No underline by default */
}

/* Hover effect for links in note */
.note a:hover {
    text-decoration: underline;
    /* Underline on hover */
}


/* ======= BUTTONS SHARED ======= */

/* Base style for all buttons */
button {
    background-color: #726b6b;
    /* Muted dark gray background */
    color: #fff;
    /* White text */
    border: none;
    /* No border */
    padding: 8px 12px;
    /* Padding inside button */
    border-radius: 5px;
    /* Rounded corners */
    font-size: 0.9rem;
    /* Slightly smaller font size */
    cursor: pointer;
    /* Pointer cursor on hover */
    transition: background-color 0.3s ease;
    /* Smooth color transition */
}

/* Hover effect for buttons */
button:hover {
    background-color: #ffffff;
    /* White background on hover */
}


/* ======= BOOKING FORM ======= */

/* Container centering booking form */
.booking-form-container {
    display: flex;
    /* Flexbox layout */
    justify-content: center;
    /* Center horizontally */
    align-items: center;
    /* Center vertically */
}

/* Booking form styling */
.booking-form {
    background-color: #222;
    /* Dark background */
    padding: 30px;
    /* Inner padding */
    border-radius: 10px;
    /* Rounded corners */
    max-width: 400px;
    /* Max width */
    width: 100%;
    /* Full width up to max */
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.05);
    /* Soft light shadow */
}

/* Booking form heading */
.booking-form h2 {
    text-align: center;
    /* Center heading */
    margin-bottom: 20px;
    /* Space below heading */
    font-weight: 700;
    /* Bold text */
    color: #f0f0f0;
    /* Light gray text */
}

/* Labels for form fields */
.booking-form label {
    display: block;
    /* Block display for full width */
    margin-bottom: 5px;
    /* Space below label */
    font-weight: bold;
    /* Bold text */
}

/* Input fields and textarea styling */
.booking-form input,
.booking-form textarea {
    width: 100%;
    /* Full width of container */
    padding: 10px;
    /* Inner padding */
    margin-bottom: 15px;
    /* Space below fields */
    border: none;
    /* Remove default borders */
    border-radius: 5px;
    /* Rounded corners */
    background-color: #333;
    /* Dark background */
    color: #fff;
    /* White text */
}

/* Focus styles for inputs and textarea */
.booking-form input:focus,
.booking-form textarea:focus {
    outline: 2px solid #666;
    /* Highlight with outline */
}

/* Submit button styling to match banner button */
.booking-form button {
    width: 100%;
    /* Full width */
    padding: 12px;
    /* Padding inside button */
    background-color: #e63946;
    /* Bright red background */
    font-weight: bold;
    /* Bold text */
}

/* Hover effect for submit button */
.booking-form button:hover {
    background-color: #d62828;
    /* Darker red on hover */
}


/* ======= TABLE ======= */

/* Style for the table element */
table {
    width: 100%;
    /* Full width of container */
    border-collapse: collapse;
    /* Collapse borders into single line */
    margin: 30px 0;
    /* Vertical margin above and below table */
    background-color: #1c1c1c;
    /* Dark background for table */
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.05);
    /* Subtle glow around table */
    font-size: 0.95rem;
    /* Slightly smaller font size */
}

/* Style for both table headers and table cells */
th,
td {
    padding: 12px 15px;
    /* Padding inside each cell */
    border: 1px solid #333;
    /* Dark border around cells */
    text-align: left;
    /* Align text to the left */
}

/* Style specifically for table headers */
th {
    background-color: #333;
    /* Dark gray background for headers */
    text-transform: uppercase;
    /* Uppercase text */
    letter-spacing: 0.5px;
    /* Slight spacing between letters */
}

/* Style for even-numbered table rows */
tr:nth-child(even) {
    background-color: #222;
    /* Slightly lighter background for zebra striping */
}

/* Hover effect for table rows */
tr:hover {
    background-color: #2a2a2a;
    /* Highlight row on hover */
}

/* ======= BAND MEMBERS ======= */

/* Container for band members section */
.band-members {
    text-align: center;
    /* Center-align text and content */
}

/* Heading in band members section */
.band-members h2 {
    font-size: 2em;
    /* Large font size for heading */
    margin-bottom: 30px;
    /* Space below heading */
}

/* Grid container for member cards */
.member-grid {
    display: grid;
    /* Use CSS grid layout */
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    /* Responsive columns */
    gap: 20px;
    /* Gap between grid items */
    justify-items: center;
    /* Center items horizontally within grid cells */
}

/* Individual member card styling */
.member-card {
    background-color: #1c1c1c;
    /* Dark card background */
    border-radius: 10px;
    /* Rounded corners */
    padding: 20px;
    /* Inner spacing */
    max-width: 300px;
    /* Maximum width */
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.05);
    /* Subtle glow */
    text-align: center;
    /* Center-align text */
}

/* Member card image */
.member-card img {
    width: 100%;
    /* Full width of card */
    border-radius: 8px;
    /* Rounded image corners */
    margin-bottom: 15px;
    /* Space below image */
}

/* Member card heading */
.member-card h3 {
    margin: 10px 0 5px;
    /* Margin above and below heading */
    font-size: 1.2em;
    /* Slightly larger font size */
}

/* Member card paragraph */
.member-card p {
    font-size: 0.95em;
    /* Slightly smaller font size */
    color: #ccc;
    /* Light gray text color */
}


/* ======= FOOTER ======= */

/* Main footer container */
.site-footer {
    background-color: #333;
    /* Dark gray background for footer */
    padding: 30px 20px;
    /* Padding inside the footer */
    margin-top: 60px;
    /* Space above the footer */
    border-top: 1px solid #333;
    /* Top border to separate footer from content */
    text-align: center;
    /* Center-align all text inside footer */
}

/* Container for footer content elements */
.footer-content {
    display: flex;
    /* Use flexbox for layout */
    flex-direction: column;
    /* Stack items vertically */
    align-items: center;
    /* Center items horizontally */
    gap: 15px;
    /* Space between each footer element */
}

/* Paragraphs inside footer content */
.footer-content p {
    font-size: 0.9rem;
    /* Slightly smaller font size */
    margin: 0;
    /* Remove default margin */
    color: #ccc;
    /* Light gray text color */
}


/* Container for social media icons */
.social-links {
    display: flex;
    /* Arrange icons in a horizontal row */
    gap: 25px;
    /* Space between each icon */
}

/* Style for each social media icon image */
.social-links img {
    width: 28px;
    /* Fixed width */
    height: 28px;
    /* Fixed height for uniformity */
    filter: brightness(0) invert(1);
    /* Make icons white by inverting black */
    opacity: 0.85;
    /* Slightly transparent for subtle look */
    transition: transform 0.2s ease, opacity 0.2s ease;
    /* Smooth hover transitions */
}

/* Hover effect for social media icons */
.social-links img:hover {
    transform: scale(1.15);
    /* Slightly enlarge icon */
    opacity: 1;
    /* Fully opaque on hover */
}

/* ======= MERCH SECTION ======= */
.merch-section {
    max-width: 700px;
    margin: 2rem auto;
    font-family: 'Segoe UI', sans-serif;
}



/* Wider screens — switch to horizontal nav */
@media (min-width: 600px) {
    .nav ul {
        flex-direction: row;
        /* Layout items side-by-side */
        background-color: transparent;
        /* No background on larger viewports */
        width: auto;
        /* Fit content instead of full width */
        gap: 0;
        /* Spacing handled per item */
    }

    .nav ul li {
        border: none;
        /* Remove borders for flat look */
        margin-right: 12px;
        /* Space between items */
        border-radius: 4px;
        /* Slight rounding for hover/bg */
    }

    .nav ul li a {
        padding: 10px 15px;
        /* Clickable padding */
        color: black;
        /* Link text color */
        background-color: transparent;
        /* Transparent default background */
    }

    .nav ul li a:hover,
    .nav ul li a:focus {
        background-color: rgb(255, 255, 255);
        /* Subtle highlight on hover/focus */
        color: rgb(255, 0, 0);
        /* Accent color on interaction */
    }
}