/* The entire page setup */
body {
    background-color: #121212;
    color: #ffffff;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    text-align: center;
    padding-top: 0;
    margin: 0;
}

/* Make your band name look massive and bold */
h1 {
    font-size: 3.5rem;
    letter-spacing: 2px;
    color: #ffffff;
    text-transform: uppercase;
}

/* Style the upcoming show announcement box wrapper */
.gig-box {
    background-color: #517D70;
    border: 3px solid #4A4A80;
    border-radius: 12px;
    padding: 20px;                 /* Reduced slightly from 30px to save spacing on mobile devices */
    margin-top: 40px;
    margin-bottom: 60px;
    margin-left: auto;             /* Centers the block box cleanly on the page layout */
    margin-right: auto;            /* Centers the block box cleanly on the page layout */
    box-shadow: 0px 10px 20px rgba(0,0,0,0.5);
    
    display: flex;                 /* CHANGED from inline-flex to allow normal fluid width behaviors */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px; 
    
    max-width: 600px;              /* Keeps the container reading layout tight on widescreen desktop monitors */
    width: 90%;                    /* FORCE: Allows the box to shrink fluidly on smartphone screens */
    box-sizing: border-box;        /* Enforces that padding remains safely within the width limits */
}


.gig-box h2 {
    color: #4A4A80;
    margin-top: 0;
    font-size: 1.8rem;
}

/* Style the arrow buttons */
.arrow-btn {
    background: none;
    border: none;
    color: #4A4A80; /* Match your theme accent color */
    font-size: 2rem;
    cursor: pointer;
    transition: 0.2s ease-in-out;
}

/* Make the arrows grow slightly when you hover over them */
.arrow-btn:hover {
    color: #ffffff;
    transform: scale(1.2);
}

/* Navigation Menu Styling */
.nav-menu {
    display: flex;
    justify-content: center;
    gap: 30px;
    padding: 20px;
    background-color: #111111;
    margin-bottom: 40px;
}

.nav-menu a {
    color: #888888;
    text-decoration: none;
    font-size: 1.2rem;
    font-weight: bold;
    transition: 0.2s ease-in-out;
}

.nav-menu a:hover, .nav-menu a.active {
    color: #4A4A80; /* Glows your theme accent color */
}

/* About Page Container - Fixed to support flex rows and prevent overflow blowout */
.about-container {
    background-color: #517D70; /* Exact same background as your gig-box */
    border: 3px solid #4A4A80;   /* Exact same twilight purple border */
    border-radius: 12px;         /* Exact same rounded corners */
    display: block;              /* FIXED from inline-block to allow proper row scaling */
    max-width: 800px;            /* Keeps the text layout readable and comfortable */
    width: 90%;                  /* Core fallback padding for mobile viewports */
    box-sizing: border-box;      /* Forces padding to stay inside width limits */
    padding: 30px;               /* Exact same inside spacing */
    margin-top: 40px;            /* Exact same top placement spacing */
    margin-bottom: 60px;
    margin-left: auto;           /* Centers the box block cleanly on the webpage */
    margin-right: auto;          /* Centers the box block cleanly on the webpage */
    box-shadow: 0px 10px 20px rgba(0,0,0,0.5); /* Exact same drop shadow */
    text-align: center;
    line-height: 1.6;
    overflow: hidden;            /* Failsafe against un-cropped child elements */
}

/* Ensure global section headings inside the About box match the home headings */
.about-container h1, 
.about-container h2 {
    color: #4A4A80;
    margin-top: 0;
    font-size: 1.8rem;
    text-transform: uppercase;
}

/* Cleaner text color configuration inside the box */
.band-bio {
    font-size: 1.2rem;
    color: #ffffff; /* Bright white text pops better on your sage background */
    margin-bottom: 30px;
}

/* Centering container for the logo */
.logo-container {
    text-align: center;
    background-color: #000000; /* Blends perfectly with the black logo background */
    padding: 20px 0 10px 0;    /* Adds clean space above and below the logo */
    margin: 0;
}

/* Control the physical size of the logo image */
.band-logo {
    max-width: 450px; /* Limits the width so it doesn't swallow the whole screen */
    width: 100%;       /* Makes it responsive so it shrinks nicely on phones */
    height: auto;      /* Prevents distortion or stretching */
    transition: transform 0.3s ease-in-out;
}

/* Subtle interactive effect: grows slightly when hovered over */
.band-logo:hover {
    transform: scale(1.03);
}

/* Photo Grid Arrangement for the updated Media Page Gallery */
.photo-grid, .gallery-grid {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: 30px;
    flex-wrap: wrap; /* Keeps it looking great on mobile phones */
}

/* Individual Picture Holders */
.photo-card, .gallery-item {
    background-color: #444853; /* Darker interior card contrast */
    border: 1px solid #4A4A80;
    border-radius: 8px;
    padding: 15px;
    max-width: 300px;
}

/* Temporal layout boxes until you upload actual image files */
.placeholder-img {
    width: 270px;
    height: 180px;
    background-color: #315855; /* Deep forest background */
    border: 2px dashed #96A5AC;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-weight: bold;
}

.photo-card p {
    font-size: 0.9rem;
    color: #96A5AC;
    margin-top: 10px;
    margin-bottom: 0;
}

/* Ensure uploaded gallery images fit perfectly inside their cards */
.gallery-photo {
    width: 100%;        /* Forces image to scale down to the exact width of the card */
    max-width: 270px;   /* Matches your placeholder dimensions */
    height: auto;       /* Keeps the image proportions perfect without stretching */
    border-radius: 4px; /* Smooths the edges slightly to match the layout style */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Gives the photo a subtle pop */
}


/* =========================================
   MEDIA PAGE STYLING
   ========================================= */

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    padding: 20px;
    background-color: #517D70; /* Sage Green Box Background */
    border: 2px solid #4A4A80; /* Twilight Purple Border */
    border-radius: 8px;
}

.gallery-item img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
    transition: transform 0.3s ease;
}

.gallery-item img:hover {
    transform: scale(1.03);
}


/* ==========================================
   BLUE SKYE LINEUP FORMATTING (CORRECTED)
   ========================================== */

/* Enforces layout rules matching the lineup-staggered-grid class in your HTML */
.lineup-staggered-grid {
    display: flex;
    flex-direction: column;
    gap: 25px;
    margin-top: 25px;
    width: 100%;
}

/* Category structural titles */
.section-divider-title {
    color: #4A4A80; /* Twilight Purple */
    font-size: 1.4rem;
    font-weight: bold;
    text-transform: uppercase;
    text-align: left;
    border-bottom: 2px solid rgba(74, 74, 128, 0.4);
    padding-bottom: 5px;
    margin-top: 25px;
    letter-spacing: 1px;
}

/* Individual profile block component cards */
.member-card {
    display: flex;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.15); /* Translucent charcoal contrast frame */
    padding: 20px;
    border-radius: 8px;
    border-left: 4px solid #4A4A80;       /* Purple left-side accent strip */
    gap: 25px;
    text-align: left;
    box-sizing: border-box;
}

/* Automatically reverses flex direction layouts for every second card row */
.member-card:nth-of-type(even) {
    flex-direction: row-reverse;
    border-left: none;
    border-right: 4px solid #4A4A80;      /* Purple accent strip shifts to the right edge */
    text-align: right;
}

/* STRICT CONTAINER: Locks down layout boundaries for the profile bubble rings */
.member-photo-frame {
    flex-shrink: 0;                       /* Absolutely prevents row dynamics from squishing portraits */
    width: 120px !important;              /* Locks custom physical structural width */
    height: 120px !important;             /* Locks custom physical structural height */
    border: 2px solid #96A5AC;            /* Slate Gray border accent frame */
    border-radius: 50% !important;        /* Enforces a perfect circular bubble */
    overflow: hidden !important;          /* Cookie-cutter operation: forces un-optimized image data to clip */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.4);
    display: block;
}

/* ASSET CONSTRAINT: Forces your giant raw photo files to scale down into the 120px bubble boundaries */
.member-img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    object-fit: cover !important;         /* Fills frames completely without stretch compression distortions */
    display: block;
}

/* Member identity container element alignment box */
.member-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

/* Band Member Name - Targeted directly to match your HTML h3 headers */
.member-info h3 {
    font-size: 1.3rem !important;
    color: #ffffff;                       /* Bright white name visibility */
    margin: 0;
    text-transform: none;                 /* Drops aggressive upper-case formatting rules */
    letter-spacing: 0;
}

/* Instrument & Vocal Assignments details line */
.member-role {
    color: #4A4A80;                       /* Highlights roles using twilight purple */
    font-size: 1rem;
    font-weight: bold;
    margin: 0;
}

/* Detailed descriptive profile biography lines */
.member-caption {
    font-size: 0.95rem;
    color: #96A5AC;                       /* Slate Gray text configuration style */
    line-height: 1.4;
    margin: 4px 0 0 0;
}

/* Mobile responsive fallback viewport parameters */
@media (max-width: 600px) {
    .member-card, 
    .member-card:nth-of-type(even) {
        flex-direction: column;
        text-align: center;
        align-items: center;
        border-left: 4px solid #4A4A80;
        border-right: none;
        gap: 15px;
    }
}



/* ==========================================
   HOMEPAGE HEADER BANNER IMAGE STYLING
   ========================================== */
.header-img-container {
    text-align: center;
    margin-top: 30px;
    padding: 0 15px; /* Adds safe cushioning for smaller screen edges */
}

.header-banner-photo {
    max-width: 600px !important;  /* Limits the horizontal size so it doesn't overwhelm the screen */
    width: 100% !important;       /* Allows it to automatically shrink cleanly on mobile phones */
    height: auto !important;      /* Preserves the original image proportions without distortion */
    border-radius: 8px; /* Smooths the edges slightly to match your website box style */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4); /* Lifts the banner cleanly off your background */
}

/* ==========================================
   HOMEPAGE TOUR CALENDAR LIST LAYOUT
   ========================================== */

/* Forces the box to display as a full column container instead of inline arrows */
.gig-list-container {
    width: 100%;
    max-width: 600px; /* FIXED: Changed from min-width to max-width to allow shrinking on mobile */
    display: flex;
    flex-direction: column;
    gap: 15px;
    text-align: left;
    box-sizing: border-box;
}

.gig-list-container h2 {
    text-align: center;
    margin-bottom: 20px;
    border-bottom: 2px solid #4A4A80;
    padding-bottom: 10px;
}

/* Individual Calendar Rows */
.gig-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 6px;
    border-left: 3px solid #96A5AC; /* Slate gray accent markers */
    transition: all 0.2s ease;
    gap: 15px;
}

/* Specific Highlight Block for your main event */
.active-show-row {
    border-left: 4px solid #4A4A80; /* Thicker twilight purple badge edge */
    background-color: rgba(0, 0, 0, 0.3);
}

.gig-date {
    font-size: 1.2rem;
    font-weight: bold;
    color: #ffffff;
    min-width: 80px;
}

.gig-info {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding-left: 15px;
}

.venue-name {
    font-size: 1.1rem;
    font-weight: bold;
    color: #ffffff;
}

.city-name {
    font-size: 0.9rem;
    color: #96A5AC; /* Slate gray accent string */
    margin-top: 3px;
}

.upcoming-status {
    font-size: 0.85rem;
    color: #96A5AC;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Mobile responsive fallback to prevent text squishing on phones */
@media (max-width: 500px) {
    .gig-row {
        flex-direction: column; /* Flips data, venue, and buttons into a centered vertical stack */
        text-align: center;
        gap: 12px;
        padding: 20px 15px;
    }
    .gig-info {
        padding-left: 0;
    }
    .gig-date {
        min-width: auto;
    }
}


/* ==========================================
   THE "NEXT SHOW" INTERACTIVE ACTION BUTTON
   ========================================== */
.next-show-btn {
    display: inline-block;
    padding: 8px 16px;
    background-color: #4A4A80; /* Your twilight purple signature palette shade */
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.9rem;
    border-radius: 4px;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.next-show-btn:hover {
    background-color: #514F9A; /* Lights up bright purple on hover */
    transform: scale(1.05);
    box-shadow: 0 6px 12px rgba(0,0,0,0.3);
}

/* FORCE the photo frame wrapper to strictly lock its structural layout boundaries */
.member-photo-frame {
    flex-shrink: 0;             /* Absolutely prevents flex layouts from warping the bubble shape */
    width: 120px;               /* Locks physical container width */
    height: 120px;              /* Locks physical container height */
    border: 2px solid #96A5AC;  /* Your Slate Gray accent */
    border-radius: 50%;         /* Creates a perfect circle */
    overflow: hidden;           /* FORCES any image content expanding past 120px to be clipped */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.4);
}

/* FORCE the raw un-optimized photo file to shrink and scale down to its container boundaries */
.member-img {
    width: 100%;                /* Scales the wide image edge down to exactly 120px */
    height: 100%;               /* Scales the tall image edge down to exactly 120px */
    object-fit: cover;          /* Crops and centers the portrait cleanly without stretching it */
    display: block;             /* Eliminates hidden inline text padding at the bottom edge */
}

/* Specific override to stop the old carousel styles from blowing up profile pictures */
.about-container .lineup-grid .member-photo-frame,
.lineup-grid .member-photo-frame {
    width: 120px !important;
    height: 120px !important;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    display: block;
}

.about-container .lineup-grid .member-img,
.lineup-grid .member-img {
    width: 100% !important;
    height: 100% !important;
    max-width: 1200px !important; /* Forces the huge 850px carousel code to drop its rule */
    object-fit: cover;
    display: block;
}
/* ==========================================================================
   FORCE SEPARATOR OVERRIDE FOR MEMBER PORTRAITS
   ========================================================================== */

/* 1. Reset the raw image properties to block it from expanding past 120px */
.about-container .lineup-staggered-grid img.member-img,
.lineup-staggered-grid .member-card img,
img.member-img {
    width: 120px !important;
    max-width: 120px !important;
    height: 120px !important;
    max-height: 120px !important;
    min-width: 120px !important;
    min-height: 120px !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
    display: block !important;
}

/* 2. Lock down the parent ring container sizes identically */
.about-container .lineup-staggered-grid .member-photo-frame,
.lineup-staggered-grid .member-photo-frame,
.member-photo-frame {
    width: 120px !important;
    max-width: 120px !important;
    height: 120px !important;
    max-height: 120px !important;
    min-width: 120px !important;
    min-height: 120px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    display: block !important;
}

/* Shifts the focus of the photo upward so heads aren't cut off */
.member-img.top-focus {
    object-position: center top !important;
}

/* ==========================================================================
   HOMEPAGE SOCIAL MEDIA FOOTER
   ========================================================================== */
.social-footer {
    background-color: #111111; /* Dark Charcoal background matching nav */
    padding: 30px 20px;
    margin-top: 40px;
    border-top: 2px solid rgba(74, 74, 128, 0.3); /* Subtle Twilight Purple border top */
}

.social-buttons-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

/* Base Interactive Social Buttons Styles */
.social-btn {
    display: inline-block;
    padding: 10px 20px;
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.95rem;
    border-radius: 6px;
    border: 2px solid #4A4A80; /* Twilight Purple accent border frame */
    background-color: rgba(0, 0, 0, 0.2);
    transition: all 0.25s ease-in-out;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

/* Global Hover Effects */
.social-btn:hover {
    background-color: #4A4A80; /* Lights up solid Twilight Purple on hover */
    transform: translateY(-3px); /* Elegant subtle lift effect */
    box-shadow: 0 6px 12px rgba(81, 79, 154, 0.4);
}

.footer-copyright {
    font-size: 0.85rem;
    color: #96A5AC; /* Slate Gray text */
    margin: 10px 0 0 0;
}

/* Contact Page specific social layout alignment helper */
.social-links-grid {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.contact-card {
    background-color: rgba(0, 0, 0, 0.15);
    padding: 20px;
    border-radius: 8px;
    border-left: 4px solid #4A4A80;
    margin-bottom: 30px;
    text-align: center;
}

.contact-email {
    font-size: 1.3rem;
    font-weight: bold;
    color: #ffffff;
    margin: 10px 0;
}

.contact-subtext {
    font-size: 0.95rem;
    color: #96A5AC;
    margin: 0;
}

/* ==========================================
   ABSOLUTE MOBILE FIX FOR TOUR BOX
   ========================================== */
.gig-box, 
body .gig-box {
    display: flex !important;           /* Force block flex behavior over inline-flex */
    flex-direction: column !important;
    width: 90% !important;              /* Force container fluid scaling on mobile screens */
    max-width: 600px !important;        /* Lock standard size for desktops */
    min-width: 0 !important;            /* Strip away hidden minimum scaling limits */
    margin-left: auto !important;       /* Center layout */
    margin-right: auto !important;      /* Center layout */
    box-sizing: border-box !important;  /* Keep padding locked inside */
    padding: 20px 15px !important;      /* Optimized inside spacing */
}

.gig-list-container,
body .gig-list-container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;            /* Force remove the old 500px blowout limit */
    box-sizing: border-box !important;
}

/* ==========================================
   FORCE INNER GIG ROW MOBILE COMPACT STACK
   ========================================== */
@media (max-width: 600px) {
    /* 1. Force the show row items to stack vertically instead of stretching wide */
    body .gig-row {
        flex-direction: column !important;
        text-align: center !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 12px !important;
        padding: 20px 15px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 2. Clear out the horizontal padding shifts that push layout boundaries sideways */
    body .gig-info {
        padding-left: 0 !important;
        width: 100% !important;
        align-items: center !important;
    }

    /* 3. Strip away minimum horizontal width properties from the date badges */
    body .gig-date {
        min-width: auto !important;
        width: 100% !important;
    }

    /* 4. Let the venue status badges text wrap naturally */
    body .upcoming-status {
        width: 100% !important;
        text-align: center !important;
    }
}