/* CSS file for Chili website */

/***************************** WHOLE SITE ********************************/

/* COLORS - For reference, leave commented out */

/* BODY */
body {
    background-color: rgb(255,250,240);
    margin: 0;
    font-family: Arial, sans-serif;
    color: black;
}

/* TEXTS */
/* h1 - headers */
h1 {
    /*color: rgb(100, 20, 0);*/ /*Dark Brown*/
    color: rgb(60, 40, 40); /*Dark Gray*/
    font-size: 48px;
    margin: 10px 10px;
} 

/* h2 style - Special Headers */
h2 {
    /*color: rgb(100, 20, 0);*/ /*Dark Brown*/
    color: rgb(60, 40, 40); /*Dark Gray*/
    font-size: 40px;
    margin: 10px 10px;
    /*text-decoration: underline;*/
    font-style: Bold;
    font-style: Italic;
}
/* h3 style - Sub-Headers */
h3 {
    color: rgb(60, 40, 40); /*Dark Gray*/
    font-size: 24px;
    margin: 10px 10px;
    font-style: Bold;
}

/* h4 style - body text */
h4 {
    color: rgb(60, 40, 40); /*Dark Gray*/
    font-size: 24px;
    margin: 10px 10px;
}
/* Unused h5 style, kept for reference
h5 {
    color: rgb(0,0,0);
    font-size: 24px;
    margin: 10px 10px;
}
*/
/* h6 style - Italicised */
h6 {
    color: rgb(60,40,40); /*Dark Gray*/
    font-size: 28px;
    margin: 10px 10px;
    font-style: italic;
}

.orange-body {
    color: rgb(255,70,40); /*Logo rgb*/
    font-size: 24px;
    margin: 10px 10px;
}


/* HEADER */
.header-content {
    /* Responsive header using CSS variables and clamp() so it scales with viewport */
    --header-padding: clamp(0.5rem, 2vw, 1.5rem);
    --header-logo-max: clamp(48px, 12vh, 160px);
    --header-link-size: clamp(14px, 2.2vw, 20px);
    --header-gap: clamp(8px, 2vh, 28px);

    width: 100%;
    padding: var(--header-padding);
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 1fr auto 1fr; /* logo centered with nav & socials at sides */
    align-items: center;
    gap: var(--header-gap);
    min-height: clamp(60px, 12vh, 220px);
    margin: 0;
}

.header-nav {
    display: flex;
    justify-content: center; /* Horizontal alignment */
    align-items: center; /* Vertical alignment */
    gap: var(--header-gap); /* Space between links */
    list-style: none;
    flex-wrap: wrap; /* allow nav items to wrap on smaller screens */
}

.header-nav-links { /* Link (text) style, edit layout in main-nav */
    color: rgb(255,70,40); /*Logo rgb*/
    font-family: Arial, sans-serif;
    font-size: var(--header-link-size);
    text-decoration: none;
    /*transition: background 0.2s;*/
}

.header-logo {
    display: block;
    height: auto;
    width: auto;
    max-height: var(--header-logo-max); /* scales with viewport */
    justify-self: center; /* Center in grid cell */
    margin: 0px; /* space on left and right of logo */
}

.header-socials {
    display: flex;
    justify-content: center; /* Horizontal alignment */
    align-items: center; /* Vertical alignment */
    gap: clamp(6px, 1.5vw, 16px); /* Space between links */
    margin-right: 10px; /* Space from right edge, adjust if changing logo margin */
}

/* Mobile / small screens: stack header elements and reduce spacing */
@media (max-width: 700px) {
    .header-content {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        justify-items: center;
        row-gap: calc(var(--header-gap) / 2);
        padding: clamp(6px, 3vw, 12px);
    }

    /* Ensure logo stays on top and nav/socials stack underneath */
    .header-logo { order: 0; }
    .header-nav { order: 1; justify-content: center; gap: 0.6rem; }
    .header-socials { order: 2; }

    .header-nav-links { font-size: clamp(12px, 3.5vw, 18px); }
}

.social-icon {
    height: auto;
    width: auto;
    max-height: 32px; /* Adjust as needed */
    display: block;
}


.home-banner-image {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
}

/* SECTIONS */
section { /* General section styles */
    padding: 50px; /* Space around content */
    margin: 0 auto; /* Center section */
}


/* FOOTER */
.footer-image-container {
    position: relative;
    display: inline-block;
    width: 100%;
}

.footer-image {
    width: 100%;
    height: auto;
    margin: 0;
}

.footer-copyright {
    position: absolute;
    bottom: 20px; /* Adjust as needed */
    left: 50%;
    transform: translateX(-50%);
    color: rgb(255,72,48);
    font-size: 16px;
    text-align: center;
}

/***************************** Home Page ********************************/
/* MUSIC RELEASE */
.music-release-2022 {
    display: flex;
    flex-direction: column;   /* stack rows */
    height: 80vh; 
    width: 60vw;
    text-align: center;
    border: 4px double rgb(100, 20, 0);     /* thickness, style, color (dark brown) */
    border: 4px double rgb(60, 40, 40);     /* thickness, style, color (dark gray) */
    border-radius: 12px;         /* optional: rounded corners */
    padding: 0px;               /* space inside border */
    margin: 40px auto;  
    overflow: hidden;
    
}

.row {
    display: flex;
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
}

.release-text {
    flex: 1;
    text-align: center;
    background-color: rgb(179, 204, 190); /* table-light rgb (179, 204, 190)
    /*background-color: rgb(117, 151, 134); /* table-dark rgb (134, 49, 3) */
    /*background-color: rgb(174, 49, 3); /* tomato soup rgb (134, 49, 3) */
}

.release-art {
    flex: 5;
    overflow: hidden;
    background-color: rgb(179, 204, 190); /* table-light rgb (179, 204, 190)
    /*background-color: rgb(117, 151, 134); /* table-dark rgb (134, 49, 3) */
    /*background-color: rgb(174, 49, 3); /* tomato soup rgb (134, 49, 3) */
}

.release-art img {
    max-height: 85%;
    max-width: 100%;
    height: auto;
    width: auto;
    object-fit: contain;
    box-shadow: 5px 5px 15px 0 rgba(0,0,0,0.5); /* Shadow effect */
}

.release-links {
    flex: 1;
    display: flex;
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
    text-align: center;
    gap: clamp(6px, 1.5vw, 16px); /* Space between links */
    background-color: rgb(179, 204, 190); /* table-light rgb (179, 204, 190)
    /*background-color: rgb(117, 151, 134); /* table-dark rgb (134, 49, 3) */
    /*background-color: rgb(174, 49, 3); /* tomato soup rgb (134, 49, 3) */
}


/* UPCOMING SHOWS */
.home-upcoming-shows {
    display: flex;
    flex-direction: column;   /* two rows */
    text-align: center;
}

.home-shows {
    list-style: none;
}

/* CONTACT */
.home-contact {
    display: flex;
    flex-direction: column;   /* two rows */
    text-align: center;
}

/* CONTACT FORM - TODO
.home-contact-form {

}
*/

/* GALLERY - TODO
.home-gallery {
    display: grid;
    grid-template-columns: repeat(3, 100px); 
    grid-template-rows: repeat(3, 100px); 
    gap: 10px; 
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
 
}

.gallery-image img{
    aspect-ratio: 1/1;
    width: 100%;
    object-fit: cover;
    display: block;
}
*/



/*********************Shows Page*****************************/
.shows-upcoming-shows {
    display: flex;
    flex-direction: column;   /* two rows */
    text-align: center;
}

.shows-shows {
    list-style: none;
}

/* TODO *****************************
.shows-upcoming-shows {
    display: grid;
    grid-template-columns: 30% 70%;
    gap: 0px;
    background-color: rgb(48, 234, 255);
}

.shows-upcoming-shows-image {
    display: block;
    width: 100%;
    height: auto;
}

.shows-upcoming-shows-list {
    list-Style: square;
    margin: 50px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
*********************************************/



/*********************Merch Page*****************************/
.merch-body {
    display: flex;
    flex-direction: column;   /* two rows */
    text-align: center;
}

/*********************Contact Page*****************************/
.contact-body {
    display: flex;
    flex-direction: column;   /* two rows */
    text-align: center;
}