/*---Fonts for Styling */ 
/*For it to work in all browsers I need to include it at the top---*/ 
@import url('https://fonts.googleapis.com/css2?family=Limelight&family=Rosario:wght@300;400;500;600;700&display=swap'); 

/*------------------------------------------
CSS RESET BEGINS - SMALL BUSINESS WEBSITE
---------------------------------------------*/
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

*{
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}
/*CSS RESET END */


 /*------------------------------------------
GENERAL PAGE STYING 
---------------------------------------------*/

Body {
    font-family:"Rosario",'roboto', Helvetica, sans-serif;
    font-size: 1.2rem;
    line-height: 1.4;
    background-color:#FFF1D1; /*light cream background color */
    color: #533011; /* Dark brown for text */
}

a {
    text-decoration: none;  
}

h1, h2, h3{
    font-family: "Limelight", 'Georgia', 'Times New Roman', Times, serif;
    line-height: 1;
}

h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.6rem;
}

 /*------------------------------------------
HEADER STYLING
---------------------------------------------*/

header {
    display: grid;
    grid-template-columns: 150px 1fr; /* left column for navigation */
    min-height: 100vh; /* making full viewport in height */
    max-width: 1600px; /* max zoom in hero img */
    height: 100vh; /* Full viewport height */
    overflow: hidden; /* Prevents unwanted view height scrolling */
    position: relative;
    background-size: cover; 
    background-repeat: no-repeat; 
    
}

 /*------------------------------------------
RIGHT COLUMN: HERO SECTION IMG
---------------------------------------------*/

header img {
    grid-column: 2; 
    justify-self: center; 
    align-self: center; 
    width: 100%;
    height: auto;
    display: block;
}


#events header img, #catalog header img {
    max-width: 1100px;
}

#find-us header img  {
    max-width: 1200px;
}

/* --Main Header Navigation Styling ---*/

[aria-label*="Main"] {
    background-color: #267885;
    color: #FFF1D1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 7rem 0;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
}

/*logo style for home page and the rest*/
img[src="logo/second-logo.png"], 
img[src="../logo/second-logo.png"] { 
    width: 4rem; /*size of the logo on nav */
    height: auto;
    margin-bottom: 30px;
    background-color: #FFF1D1;
    border-radius: 1rem;
    padding-top: 0.4rem;
}

/* Naviagtion list */
[aria-label*="Main"] ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    position: relative;
}

/* naviagtion link styling */
[aria-label*="Main"] ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFF1D1;
    font-size: 2rem;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    transition: background-color 0.3s ease, color 0.3s ease;
    position: relative;
}

/* navigation hover effect */
[aria-label*="Main"] ul li:not(:first-child) a:hover {  /* won't impact the logo*/
    background-color: #EDAC36; /* Gold hover effect */
    color: #533011; /* Dark text */
}

/* Add Text on Hover */
[aria-label*="Main"] ul li a::after {
    content: attr(aria-label); /* /* I am using aria-label (e.g., Home, Events) */
    position: absolute;
    left: 60px; /* Position text to the right of the icon */
    top: 50%;
    transform: translateY(-50%);
    background-color: #FFF1D1; /* Background for text */
    color: #533011; /* Text color */
    font-size: 1rem;
    font-weight: bold;
    padding: 5px 10px;
    border-radius: 4px;
    white-space: nowrap;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
    opacity: 0; /* Initially hidden */
    visibility: hidden; /* Initially not visible */
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Show Text on Hover */
[aria-label*="Main"] ul li a:hover::after {
    opacity: 1; /* Make visible */
    visibility: visible; /* Make visible */
}

/* the logo I don't want it to show anything on hover turn it off */
[aria-label*="Main"] ul > li:first-child > a:hover::after {
    opacity: 0; /* Make visible */
    visibility: hidden; /* Make visible */
}


 /*------------------------------------------
MAIN CONTENT STYLING - HEADLINE STYLE
---------------------------------------------*/

main > div, #catalog main {
    width: 90%;
    margin: 0 auto;
}

/* Hide h1 in css because I am using the image as h1 headline */
#home main section h1, #catalog main h1 {
    display: none;
}

 /* ------------Homepage styling---------*/
/* --TEXT ANIMATION-- */
#home main > :first-child {
    overflow: hidden;
    display: flex;
    white-space: nowrap;
    position: relative;
    width: 100%;
    background-color: #91360A ;
    color: #FFF1D1;
    margin-bottom: 2rem;

}
#home main > :first-child p {
    display: inline-block; /* Ensure animation works */
    animation: scroll 30s linear infinite; /* Animation duration and repetition */
    white-space: nowrap; /* Prevent text wrapping */
    position: relative;
    padding-left: 1rem;

}

/* Duplicate text effect */
#home main  > :first-child p::before,
#home main  > :first-child p::after {
    content: "  For all your vinyl and CD needs, new and second-hand.  For all your vinyl and CD needs, new and second-hand.   For all your vinyl and CD needs, new and second-hand.  "; /* Same text */
    display: inline-block; /* Inline for seamless scrolling */
    padding-left: 1rem; /* Space between repetitions */
}

@keyframes scroll {
    0% {
        transform: translateX(0); /* Start at the beginning */
    }

    100% {
        transform: translateX(-100%); //* Scroll full length of the text and duplicate */
    }
}

 /*------------------------------------------
MAIN CONTENT STYLING - WHO WE ARE: home page 
---------------------------------------------*/

/* --Who We Are Headline-- */
main div section[aria-label*="Who"] h2  {
    background-color: #267885;
    color: #FFF1D1;
    padding: 2rem;
    margin-bottom: 2rem;
}

/* --About text-- */

#home main div section > p:nth-of-type(1) {
    background-color: #533011; /* Background color */
    color: #FFF1D1; /* Text color */
    padding: 2rem;
    margin-top: 1rem;
    /* Creates a zigzag shape spanning full width */
    clip-path: polygon(
        0 10px, 5% 0, 10% 10px, 15% 0, 20% 10px, 25% 0,
        30% 10px, 35% 0, 40% 10px, 45% 0, 50% 10px,
        55% 0, 60% 10px, 65% 0, 70% 10px, 75% 0,
        80% 10px, 85% 0, 90% 10px, 95% 0, 100% 10px,
        100% 100%, 0 100%
    ); 
    margin-bottom: 2rem;
}


 /*------------------------------------------
MAIN CONTENT STYLING - MONTHLY FEATURE: home page
---------------------------------------------*/

/*-----------------HOMEPAGE SYLING----------------------*/

/* -------MONTHLY ARTIST--------*/

#home div section:nth-of-type(2) {
    display: grid;
    grid-template-columns: 160px 1fr;
    align-items: start; /* Align items to the top */
    margin-top: 2rem; 
}

#home div section:nth-of-type(2) div img{
    display: block;
    width: 90%;
    height: auto;
}

/* Place all content in column two */
#home div section:nth-of-type(2) div  {
    grid-column: 2; /* Explicitly place all elements into the second column */
    margin-left: 2rem;
}

#home div section:nth-of-type(2) h3 {
  margin-bottom: 1rem;
  padding-top: 2rem;
  width: 80%; /* makes headline have a good structure in mobile */
}

/* illustration in the column */
#home main > div section:nth-of-type(2)::before {
    content: ''; /* Add empty content for styling */
    grid-column: 1 / 2;
    background-image: url(illustration/line-illustration-left.png);
    background-size: cover;
    background-repeat: no-repeat; 
    background-position: left top;
    display: block;
    width: 100%; /* Ensure it spans column one */
    height: 100%; /* Full height of the section */
}

/* --Featured paragraph styling */
#home div section:nth-of-type(2) p:nth-of-type(1){
    padding: 1.4rem 0 0.5rem;
    font-size: 1.2rem;
    font-weight: bold;
}

#home div section:nth-of-type(2) p:nth-of-type(2){
    line-height: 1.1;
}

/*format and genre p */
#home div section:nth-of-type(2) p:nth-of-type(3){
    font-size: 0.9rem;
    padding: 0.5rem 0;
    width: 80%; /* breaks the word into two line */
}

/* bolding format and genre */
#home div section:nth-of-type(2) span{
    font-weight: bold;
}

/* -------MONTHLY SONG--------*/

#home div section:nth-of-type(3){
    display: grid;
    grid-template-columns: 1fr 160px;
    align-items: start; /* Align items to the top */
    margin-top: 2rem; 
}

#home div section:nth-of-type(3) img{
    display: block;
    width: 90%;
    height: auto;
}

/* Place all content in column two */
#home div section:nth-of-type(3) div  {
    grid-column: 1; /* Explicitly place all elements into the second column */
}

#home div section:nth-of-type(3) h3 {
  margin-bottom: 1rem;
  padding-top: 2rem;
  width: 70%;
}

/* illustration in the column  next to the month features*/
#home div section:nth-of-type(3)::before {
    content: ''; /* Add empty content for styling */
    grid-column: 2 ;
    grid-row: 1 / -1;
    background-image: url(illustration/line-illustration-right.png);
    background-size: cover;
    background-repeat: no-repeat; 
    background-position: right top;
    display: block;
    width: 100%; /* Ensure it spans column one */
    height: 100%; /* Full height of the section */
}


/* --Featured paragraph styling */
#home div section:nth-of-type(3) p:nth-of-type(1){
    padding: 1.4rem 0 0.5rem;
    font-size: 1.2rem;
    font-weight: bold;
}

#home div section:nth-of-type(3) p:nth-of-type(2){
    line-height: 1.1;
}

#home div section:nth-of-type(3) p:nth-of-type(3){
    font-size: 0.9rem;
    padding: 0.5rem 0;
    width: 50%;
}

/* bolding format and genre */
#home div section:nth-of-type(3) span{
    font-weight: bold;
}

/* -------MONTHLY ALBUM--------*/

#home div section:nth-of-type(4) {
    display: grid;
    grid-template-columns: 160px 1fr;
    align-items: start; /* Align items to the top */
    margin-top: 2rem; 
}

#home div section:nth-of-type(4) div img{
    display: block;
    width: 90%;
    height: auto;
}

/* Place all content in column two */
#home div section:nth-of-type(4) div  {
    grid-column: 2; /* Explicitly place all elements into the second column */
    margin-left: 2rem;
}

#home div section:nth-of-type(4) h3 {
  margin-bottom: 1rem;
  padding-top: 2rem;
  width: 80%;
}

/* illustration in the column */
#home div section:nth-of-type(4)::before {
    content: ''; /* Add empty content for styling */
    grid-column: 1 / 2;
    background-image: url(illustration/line-illustration-left.png);
    background-size: cover;
    background-repeat: no-repeat; 
    background-position: left top;
    display: block;
    width: 100%; /* Ensure it spans column one */
    height: 100%; /* Full height of the section */
}

/* --Featured paragraph styling */
#home div section:nth-of-type(4) p:nth-of-type(1){
    padding: 1.4rem 0 0.5rem;
    font-size: 1.2rem;
    font-weight: bold;
}

#home div section:nth-of-type(4) p:nth-of-type(2){
    line-height: 1.1;
}

#home div section:nth-of-type(4) p:nth-of-type(3){
    font-size: 0.9rem;
    padding: 0.5rem 0;
    width: 80%;
}

/* bolding format and genre */
#home div section:nth-of-type(4) span{
    font-weight: bold;
}

 /*--------------------------------------------------
MAIN CONTENT STYLING - FIRST SECTION: 
EXPLORE COLLECTION - catalog page
 -------------------------------------------------- */

 /* (explore out collection of rare) p styling */
 #catalog .flex-container{
    display: flex;
    align-items: center; /* Aligns items in the center vertically */
    gap: 1rem; /* Adds spacing between elements */
    align-items: center;
    width: 90%;
    margin: 4rem auto 0;
 }

 #catalog .flex-container img {
    display: block;
    width: cover;
    height: auto;
 }

#catalog main > section:nth-of-type(1) h2 {
    background-color: #91360A;
    color: #FFF1D1;
    padding: 2rem;
    font-size: 3.5rem;
    margin-top: 3rem;
    margin: 0 auto;
}

/* text under headline */
#catalog main > section:nth-of-type(1) > p{
    background-color: #91360A;
    color: #FFF1D1;
    padding: 0 2rem 2rem;
    margin-bottom: 2rem;
}

/*------ visual Styling of filter for genre------*/

#catalog main nav{
    background-color: #267885;
    padding: 2rem 1rem;
    margin-bottom: 1.2rem;
}

#catalog main nav ul{
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}

#catalog main nav ul li {
    text-align: center;
    border-right: 0.1rem solid #FFF1D1;
    padding: 0.5rem 0.3rem ;
}

#catalog main nav ul li:last-child {
    border-right: none; /* Remove border for the last item */
}

#catalog main nav ul li a {
    color: #FFF1D1;
    font-size: 1rem;
    display: block;
    padding-right: 0.3rem;
}


/* -----NAV Hover effect---- */

#catalog main nav ul li a:hover {
    text-decoration: underline #EDAC36;
    color: #EDAC36;
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth hover effect */
}


#catalog main > div img {
    display: block;
    width: 100%;
    height: auto;
}


 /*--------------------------------------------------
MAIN CONTENT STYLING - functionality of Filter - Vinyl&CDS: catalog page
 -------------------------------------------------- */

/* Default: Show all articles */
div:nth-child(1) article {
    display: block;
}

/* Hide all articles by default when a filter is applied */
span:target ~ div article {
    display: none;
}

/* Show all articles when "All" is targeted */
#all:target ~ div article {
    display: block;
}

/* Show articles matching the genre when specific filters are targeted */
#jazz:target ~ div article[data-genre="jazz"],
#pop:target ~ div article[data-genre="pop"],
#blues:target ~ div article[data-genre="blues"],
#classical:target ~ div article[data-genre="classical"],
#rock:target ~ div article[data-genre="rock"] {
    display: block;
}

/* Optional: Smooth transitions */
div article {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

 /*--------------------------------------------------
MAIN CONTENT STYLING - VINYL LAYOUT catalog page
 -------------------------------------------------- */
#catalog main div article {

    padding-bottom: 3rem;
   
    /* song name */
    h3 {
        padding: 1rem 2rem 2rem;
        text-align: center;
        grid-column: 1/span 2;
        font-size: 2.3rem;
    }
    /* the overal text under image styl */
    div {
        background-color: #f9c76b;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto;
        padding: 1rem;
        justify-content: center;
        height: 400px;
    }

    /* artist name */
    p:nth-of-type(1) {
        font-size: 1.5rem;
        font-weight: bold;
        line-height: 1.2;
        padding-left: 2rem;
        width: 90%;
    }

    /*--details */
    p:nth-of-type(2), p:nth-of-type(3) {
        font-weight: 400;
        grid-column: 2;
        width: 95%;
        padding-left: 2rem;
    }

    /* --price-- */
    p:nth-of-type(3) {
        grid-column: 2;
        grid-row: 3;
    }

    /* the stock value style*/ 
    p:nth-of-type(4) {
        grid-column: 1/ span 2;
        grid-row: 3 ;
        background-color: #91360A;
        color: #FFF1D1;
        padding: 1rem;
        margin-top: 2.5rem;
        font-size: 1.4rem;
        font-weight: bold;
        font-family: 'Limelight', 'Georgia', 'Times New Roman', Times, serif;
    }
}


 /*------------------------------------------
MAIN CONTENT STYLING - UPCOMING EVENTS 
---------------------------------------------*/

/*Vinyl illustration on top of upcoming events headline */
[aria-label*="Upcoming"]::before {
    content: '';
    background-image: url(illustration/black-vinyl-illustartion.png);
    display: block;
    background-size: cover;
    background-repeat: no-repeat; 
    width: 100%; /* Makes the pseudo-element span the full width */
    height: 192px; /* Adjusts the height for the vinyl as needed */
}

/*--the entire section for upcoming event -- */
[aria-label*="Upcoming"] {
    color: #FFF1D1;
    touch-action: pan-x; /* Enable horizontal swipe for touch devices */
}


[aria-label*="Upcoming"] > h2 {
    font-size: 3.5rem;
    background-color: #267885;
    padding: 2rem;
    text-align: center;
    border: 2px solid #533011;
    border-bottom: none;
    margin: 0 auto;
}


/* ---Event content in upcoming event : homepage--- */
[aria-label*="Upcoming"] div article {
    background-color: #267885;
    padding: 1rem 1rem 2rem;
    flex: 0 0 100%; /* Each article takes 80% of the container width */
    scroll-snap-align: center; /* Snap articles to the center */
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: auto auto;
    gap: 0.8rem;
    border: 2px solid #533011;
    border-top: none;
    transition: all 0.3s ease-in-out;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.15);
}

/* Grid Editing for the Content */
[aria-label*="Upcoming"] div article div:nth-of-type(1) {
    grid-column: 1 / span 2; /* Span across both columns */
    grid-row: 1; /* Place in the first row */
}

[aria-label*="Upcoming"] div article div:nth-of-type(2) {
    grid-column: 1;
}

[aria-label*="Upcoming"] div article div:nth-of-type(3) address {
    text-align: left;
    grid-column: 2; /* Span across both columns */
    margin-bottom: 1.3rem;
}

[aria-label*="Upcoming"] div article div:nth-of-type(3) address span {
    font-weight: bold;
    font-size: 2rem;
}

/* ---RSVP Button styling: Upcoming events homepage---- */
[aria-label*="Upcoming"] div article div:nth-of-type(3) button {
    align-self: start; /* Align to the top of the cell */
    justify-self: center; /* Center horizontally in its grid column */
    padding: 0.5rem 1rem; /* Add padding to the button */
    background-color: #FFF1D1; /* Button background */
    color: #267885; /* Text color */
    border: none; /* Remove default button border */
    border-radius: 5px; /* Rounded button */
    cursor: pointer; /* Add pointer cursor on hover */
    transition: background-color 0.3s ease; /* Smooth hover effect */
}

/* Hover effect for button */
[aria-label*="Upcoming"] div article div:nth-of-type(3) button:hover {
    background-color: #EDAC36; /* Change background on hover */
    color: #533011; /* Change text color on hover */
}

/* Edits march and sat 6pm : homepage upcoming events*/
p > time{
   font-weight: 600;
   display: flex;
   flex-direction: column;
   font-size: 1.3rem;
   text-align: left;
}

/* number date style */
p > time span:nth-child(1) {
    font-size: 6rem;
    background-color: #EDAC36;
    padding: 1rem;
    text-align: center;
    margin-bottom: 0.5rem;
}


/* Style the 'th' in date specifically */
time span:nth-child(1)::after {
    content: 'th'; /* Add the superscript 'th' */
    font-size: 0.4em; /* Reduce font size */
    vertical-align: super; /* Align as superscript */
    margin-left: 0.05em; /* Add slight spacing */
    padding-right: 1.4rem;
}

[aria-label*="Upcoming"] div article h3 {
    color: #EDAC36;
    padding-bottom: 0.4rem;
}

/* scrollbar editing  for events home page slide*/

[aria-label*="Upcoming"] > div {
    display: flex;
    overflow: hidden;
    width: 100%;
    scroll-behavior: smooth;
    transition: transform 1s ease-in-out;
    -webkit-overflow-scrolling: touch; /* Enables momentum scrolling for iOS */
    scroll-snap-type: x mandatory; /* Snap horizontally */
    overflow-x: auto; /* Allow horizontal scrolling */
    gap: 0.4rem; /* Reduce gap between slides */
    /* --Firefox Scrollbar Styling-- */
    scrollbar-width: thin; /* Thin scrollbar for Firefox */
    scrollbar-color: #267885 #FFF1D1; /* Thumb (teal) and track (light cream) */
}


/*------------------------------------------
DIRECTION SECTION : FIND US PAGE 
---------------------------------------------*/

[aria-label*="Direction"] {
    padding: 2rem;
    text-align: center;
}

[aria-label*="Direction"] h1, [aria-label*="Direction"] p, [aria-label*="Direction"] > div {
    max-width: 1200px;
    margin: 0 auto;

}

[aria-label*="Direction"] h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
    margin-top: 3rem;
}

[aria-label*="Direction"] p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
}
/*MAP*/
[aria-label*="Direction"] > div {
    border: 4px solid #533011; 
    border-radius: 10px;
    overflow: hidden;
    margin: 0 auto;
    width: 100%;
    height: 400px;
}

iframe {
    width: 100%;
}

/*------------------------------------------
CONTACT SECTION - FIND US PAGE - CARD-BASED DESIGN
---------------------------------------------*/

/* overal section */
[aria-label*="Contact"] {
    padding: 2rem;
    background-color: #f9c76b;
    text-align: center;
}

/* <!--contact-content-->*/
[aria-label*="Contact"] > div {
    max-width: 1200px;
    margin: 0 auto;
}

[aria-label*="Contact"] h2 {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
}

/* <!--Card container--> */
[aria-label*="Contact"] > div > div {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

/* <!--contact-cards--> */
[aria-label*="Contact"] > div > div > div {
    background-color: #FFF1D1; 
    padding: 1.5rem;
    border-radius: 10px;
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}
/* <!-- Contact-cards - ICONS --> */
[aria-label*="Contact"] > div > div > div .material-icons {
    font-size: 3rem;
    color: #91360A; 
    margin-bottom: 1rem;
}
/* <!-- Contact-cards - headline --> */
[aria-label*="Contact"] > div > div > div h3{
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

/* Text and address inside the contact cards */
[aria-label*="Contact"] > div > div > div p, [aria-label*="Contact"] > div > div > div address  {
    font-size: 1.1rem;
    color: #533011; 
    text-align: center;
}

/* ---Social media Section-- */
[aria-label*="Contact"] > div > div > div > div {
    display: flex;
    justify-content: center;
    gap: 0.8rem;
    margin-top: 0.3rem;
    color: #533011;
}

/* social media link */
[aria-label*="Contact"] > div > div > div > div {

      a:link {
        color: #267885; 
      }

      a:visited {
        color: #267885;
      }

      a:hover {
        color: #91360A; 
        text-decoration: underline; 
      }
      
      a:active {
        color: #E36F2E; 
      }

      a {
        font-size: 1.2rem;
        font-family: 'Rosario','roboto', Helvetica, sans-serif;
        font-weight: 600;
      }
}

[aria-label*="Contact"] > div > div:nth-of-type(2) img {
    transition: transform 0.3s ease;

}

[aria-label*="Contact"] > div > div:nth-of-type(2) img:hover {
    transform: scale(1.1);
}



/*------------------------------------------
   FIND US PAGE : MESSAGE FORM 
---------------------------------------------*/

[aria-label="Message Form"] {
    padding: 2rem;
    margin: 0 auto;
    width: 90%;
    border-radius: 0 0 15px 15px; /* Soft rounded corners at bottom only */
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.15); /* shadow effect for form-Gives vintage style*/
    border: 4px solid #533011;
    border-top: none; /* Removes border at the top to merge with contact info */
    text-align: center;
}

/* Heading Styling */
[aria-label="Message Form"] h2 {
    line-height: 1.3;
    font-size: 2rem;
    color: #91360A; 
    margin-bottom: 2rem;
    text-shadow: 2.5px 2.5px 0px #f9c76b, 3px 3px 0px rgba(83,48,17,50%) ; /* Vinyl label shadow */
}

/* Overall Form Styling */
[aria-label="Message Form"] form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    font-family: 'Rosario','roboto', Helvetica, sans-serif;
}

/* Label Styling */
[aria-label="Message Form"] label {
    text-transform: uppercase;
    font-size: 0.9rem;
    font-weight: bold;
    color: #533011;
    letter-spacing: 1px; /* between each letter */
    text-align: left;
}

/* -- Input Fields - What Gets Filled - */
[aria-label="Message Form"] input {
    width: 100%;
    padding: 0.6rem;
    border: 2px solid #267885; /* Retro teal */
    border-radius: 10px;
    background: #FFF1D1; /* Matching background */
    color: #533011;
    font-size: 1rem;
    transition: all 0.3s ease-in-out;
    outline: none;
    font-family: 'Rosario', sans-serif;
}

[aria-label="Message Form"] #message{
    padding: 3rem;
}

/* Input Field Focus Effect */
[aria-label="Message Form"] input:focus {
    border-color: #533011; /* Orange focus effect */
    background: #E36F2E;
    color: #FFF1D1;
}

/* Submit Button */
[aria-label="Message Form"] button {
    background: #E36F2E;    
    color: #FFF1D1;
    padding: 0.8rem 1.5rem;
    font-size: 1rem;
    font-weight: bold;
    text-transform: uppercase;
    border: none;
    letter-spacing: 2px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease-in-out; 
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* for each form */
    font-family: 'Limelight', 'Georgia', 'Times New Roman', Times, serif;
    margin-top: 1rem;
}

/* Submit Button Hover Effect */
[aria-label="Message Form"] button:hover {
    background: #91360A; /* Darker vintage orange */
    color: #FFF1D1;
    transform: scale(1.05); /* Slight pop effect */
}

[aria-label="Message Form"] {
        width: 95%;
}

/*------------------------------------------
EVENTS PAGE STYLING SECTION - START HERE!
---------------------------------------------*/

/* Hide h1 (Events)  */
#events h1 {
    visibility: hidden;
    width: 0;
    height: 0;
}

/* --- Hero Paragraph (Join Us) --- */
main > p {
    font-size: 0.95rem;
    font-weight: 500;
    text-align: center;
    padding: 0.6rem 0.8rem;
    border-radius: 6px 6px 0 0;
    width: 70%;
    max-width: 500px;
    margin: 0 auto;
    font-style: italic;
    border-top: 4px solid #91360A; 
    border-left: 4px solid #91360A; 
    border-right: 4px solid #91360A; 
    box-shadow: 2px 2px 6px rgba(83, 48, 17, 0.15);
    margin-top: 3.5rem; /* hero img and (join us) space */
}

/* --- Countdown Box (Refined Retro Style) --- */
[aria-label="Count Down"] {
    background: #91360A; /* Deep retro brown */
    color: #FFF1D1; /* Creamy vintage text */
    font-weight: bold;
    text-align: center;
    padding: 1rem;
    max-width: 400px;
    border-radius: none ;
    margin: 0 auto;
    letter-spacing: 0.5px;
    margin-bottom: 3rem; 
    box-shadow: 2px 2px 6px rgba(83, 48, 17, 0.15);
}
/* --- Countdown Text Part --- */
[aria-label="Count Down"] p:nth-child(1){
    font-size: 1rem;
    width: 80%;
    margin: 0 auto;
}

/* --- Countdown Date Part --- */
[aria-label="Count Down"] p:nth-child(2) {
    font-size: 1.2rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-top: 1rem;
    border: 1px #FFF1D1 solid;
    padding: 0.5rem 0;
}

/*------------------------------------------
UPCOMING EVENTS SECTION - Event list : events page
---------------------------------------------*/

/* --- "Upcoming Events" Header (Blue Background) --- */
[aria-label="Upcoming Events"] h2 {
    font-size: 2rem;
    color: #FFF1D1; 
    background: #267885; 
    padding: 1.2rem;
    text-align: center;
    width: 80%;
    max-width: 600px;
    margin: 0 auto;
    border-radius: 0; 
}

/* --- Light Orange Background for Events Section --- */
[aria-label="Upcoming Events"] {
    background: #F8C57D; 
    padding: 2rem 1.5rem;
    border-radius: 0; 
}

/* The space it takes in the; center */
[aria-label="Upcoming Events"] div {
    width: 80%;
    margin: 0 auto;
}

[aria-label="Upcoming Events"] div article{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    
}

/* --- Event Cards --- */
article[aria-label*="Event"] {
    background: #FFF1D1;
    border: 2px solid #533011; /* Dark brown */
    border-radius: 6px;
    padding: 1rem;
    margin: 1rem auto;
    transition: all 0.3s ease-in-out;
    text-align: center;
    max-width: 600px;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.15);
}

/* --- Smaller Margins Around Events to Avoid Excessive Spacing --- */
article[aria-label*="Event"] {
    margin: 1.5rem auto;
    max-width: 90%;
}

/* --- Hover Effect for Event Cards --- */
article[aria-label*="Event"]:hover {
    transform: scale(1.01);
}

/* --- Event Image --- */
article[aria-label*="Event"] img {
    min-width: 50%;
    max-width: 80%;
    height: auto;
    border-radius: 6px;
}


/* --- Event Title --- */
article[aria-label*="Event"] h3 {
    font-size: 2rem;
    color: #533011;
    margin-top: 0.8rem;
}

/* --- Event Date --- */
article[aria-label*="Event"] time {
    font-size: 0.95rem;
    font-weight: bold;
    color: #FFF1D1;
    display: block;
    margin-top: 0.5rem;
}

/* --- Event Description --- */
article[aria-label*="Event"] p {
    background: #E36F2E; 
    color: #FFF1D1; 
    padding: 1rem;
    font-size: 0.95rem;
    border-radius: 6px;
    margin-top: 1rem;
    box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.1);
}

/*------------------------------------------
EXPANDABLE DETAILS & RSVP FORM
---------------------------------------------*/

/* --- Expandable Section (Retro Styling) --- */
details {
    background: #f8f1e9; 
    border: 2px solid #533011;
    padding: 0.6rem;
    margin: 0.8rem 0;
    border-radius: 6px;
    font-family: 'Poppins', sans-serif;
    transition: all 0.3s ease-in-out;
}

/* When Expanded */
details[open] {
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.15);
}

/* Summary (Click-to-Expand) */
summary {
    font-weight: bold;
    cursor: pointer;
    padding: 0.6rem;
    background: #E36F2E; 
    color: #FFF1D1; 
    border-radius: 6px;
    text-align: center;
    transition: background 0.3s ease, transform 0.2s ease;
}

/* Hover Effect */
summary:hover {
    background: #91360A; /* Darker burnt orange */
    transform: scale(1.02);
}

/* RSVP Form */
form[aria-label="RSVP Form"] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    width: 100%;
    max-width: 420px;
    margin: 1rem auto;
    text-align: left;
}

/* Form Labels */
form[aria-label="RSVP Form"] label {
    text-transform: uppercase;
    font-size: 0.85rem;
    font-weight: bold;
    color: #533011;
}

/* Form Inputs */
form[aria-label="RSVP Form"] input {
    width: 100%;
    padding: 0.6rem;
    border: 2px solid #267885;
    border-radius: 6px;
    background: #FFF1D1;
    color: #533011;
    font-size: 0.95rem;
    outline: none;
}

/* Input Focus Effect */
form[aria-label="RSVP Form"] input:focus {
    border-color: #E36F2E;
    background: #EDAC36;
    color: #533011;
}

/* Submit Button */
form[aria-label="RSVP Form"] button {
    background: #E36F2E;
    color: #FFF1D1;
    padding: 0.6rem 1rem;
    font-size: 0.95rem;
    font-weight: bold;
    text-transform: uppercase;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

/* Button Hover Effect */
form[aria-label="RSVP Form"] button:hover {
    background: #91360A;
    color: #FFF1D1;
    transform: scale(1.05);
}


 /*------------------------------------------
MAIN CONTENT STYLING - FOOTER for all pages
---------------------------------------------*/


/* FOOTER BASE STYLING */
footer {
    background: #533011; 
    color: #FFF1D1;
    padding: 4rem 2rem;
    font-family: 'Rosario','roboto', Helvetica, sans-serif;
    margin-top: 6rem;
    line-height: 1.6;
    letter-spacing: 0.05rem;
}

/* Three-Column Grid */
footer > div {
    display: grid;
    grid-template-columns: 1fr;
    text-align: center;
}


/* Footer Headings */
footer h3 {
    font-size: 1.4rem;
    text-transform: uppercase;
    color: #EDAC36;
    margin-bottom: 1rem;
    margin-top: 3rem;
    border-bottom: 2px solid #FFF1D1;
    padding-bottom: 0.5rem;
    letter-spacing: 0.07rem;
}

/* FOOTER NAVIGATION */

footer nav ul {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding-top: 1rem;
}

footer nav ul li a {
    color: #FFF1D1;
    font-size: 1.2rem;
    font-weight: bold;
    transition: color 0.3s ease;
}

footer nav ul li a:hover {
    color: #EDAC36; /* Gold hover */
    text-decoration: underline;
}

/* social icons */
footer > div:nth-of-type(2) > div:nth-of-type(1) ul li a img {
    width: 40px;
    height: 40px;
    transition: transform 0.3s ease;
}

footer > div:nth-of-type(2) > div:nth-of-type(1) ul li a img:hover {
    transform: scale(1.1);
}

/* Footer Logo */
footer nav > img {
    margin: 0 auto;
    display: block;
}

/*social icons */
footer div:nth-of-type(2) > div:nth-of-type(1) ul{
    display: flex;
    flex-direction: row;
    align-content: left;
    gap: 1rem;
    margin-top: 1rem;
 }
 

/* Address and Contact Info */
footer address {
    font-style: normal;
    line-height: 1.4;
    margin-bottom: 1rem;
    text-decoration: none;
}

/* Copyright */
footer p {
    font-size: 1rem;
    text-align: center;
    margin-top: 2rem;
    color: #FFF1D1;
    border: 0.2rem #EDAC36 solid;
    padding: 1rem;
}



 /*------------------------------------------
----------- MEDIA QUERY STYLING -----------
---------------------------------------------*/

@media (min-width: 600px) {

    /* ---HERO SECTION--- */

    header {
        display: grid;
        grid-template-columns: 200px 1fr; /* left column for navigation */
    }
    img[src="logo/second-logo.png"], 
    img[src="../logo/second-logo.png"] { 
        width: 6rem; /*size of the logo on nav */
    }
    /*-- NAVIGATION SECTION */

    /* Increase Icon Size */
    [aria-label*="Main"] ul li a .material-icons {
        font-size: 2.5rem ;
    }

    [aria-label*="Main"] ul li a::after {
        left: 90px; /* Shifting hover text further */
        font-size: 1.2rem;
        padding: 1rem 1rem;
    }

    /* Increase Navigation Icons */
    [aria-label*="Main"] ul li a {
        font-size: 3rem; /* Increase clickable area */
        width: 75px;
        height: 75px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    
    /* ---FOOTER SECTION ---*/

    /* footer section */

    footer div {
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: auto auto auto;
        text-align: left;
        margin: 0 auto;
        gap: 2rem;
        
    }

    footer div > p{
        grid-column: 1/span 3;
    }


    footer img {
        max-width: 150px;
    }
   
    /* footer */
    footer > div {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto; 
    }

    /* ---HOME PAGE: UPCOMING EVENT SECTION ---*/

    [aria-label*="Upcoming"]::before {
        width: 100%; /* Makes the pseudo-element span the full width */
        height: 350px; /* Adjusts the height for the vinyl as needed */
    }

    /* ---Event content in upcoming event : homepage--- */
    [aria-label*="Upcoming"] div article {
        padding: 4rem;
        gap: 2rem;
    }

    /* Grid Editing for the Content */
    [aria-label*="Upcoming"] div article div:nth-of-type(1) h3{
        font-size: 3rem
        
    }

    [aria-label*="Upcoming"] h2 {
        font-size: 5rem
    }

    [aria-label*="Upcoming"] div article div:nth-of-type(3) {
        margin-left: 2rem;
    }

   /* Events page */
    main > p {
        font-size: 1.2rem; /* Bigger text */
        font-weight: 500;
        border-radius: 6px 6px 0 0;
        width: 60%; /* Wider */
        max-width: 400px;
        margin-top: 4rem; /* Adds spacing above */
    }

    
    /* --- Event Date --- */
    article[aria-label*="Event"] time {
        font-size: 1.5rem;
        font-weight: bold;
        color: #FFF1D1;
        display: block;
        margin-top: 0.5rem;
    }

    /*-- CATALOG PAGE --*/

    .flex-container{
        font-size: 1.4rem;
        max-width: 1000px;
    }

    #catalog main > section:nth-of-type(1) h2 {
        font-size: 5rem;
        text-align: center;
    }

    #catalog main > section:nth-of-type(1) p {
        font-size: 1.3rem;
        text-align: center;
    }

    #catalog main nav{
        padding: 3rem 2rem;
        margin-bottom: 3rem;
    }

    #catalog main nav ul{
        display: flex;
        gap: 1rem;
        justify-content: center;
    }

    #catalog main nav ul li a {
        font-size: 1.1rem;
        padding-right: 1rem;
    } 
}

@media (min-width: 750px) {
   /* --Find-us page 600px---*/

    /* the container for contacts info */
    [aria-label*="Contact"] > div > div {
        flex-direction: row;
        justify-content: space-around;
    }

    /* contact cards section */
    [aria-label*="Contact"] > div > div > div {
        flex: 1;
        max-width: 300px;
    }


}

@media (min-width: 900px) {

/*---WHO WE ARE SECTION --- */

    section[aria-label*="Who"] {
        display: flex;
        flex-direction: row; 
        align-items: center; 
        gap: 2rem; 
        justify-content: center;
    }

    /* Prevent text from becoming too wide on larger screens */
    section[aria-label*="Who"] p {
        max-width: 600px;
    }

    #home main div section > p:nth-of-type(1) {
        
        /* Creates a zigzag shape on the left border */
        clip-path: polygon(
            0 0, 10px 5%, 0 10%, 10px 15%, 0 20%, 10px 25%, 
            0 30%, 10px 35%, 0 40%, 10px 45%, 0 50%, 
            10px 55%, 0 60%, 10px 65%, 0 70%, 10px 75%, 
            0 80%, 10px 85%, 0 90%, 10px 95%, 0 100%, 
            100% 100%, 100% 0
        ); 
    }

    /* Who are you section */

    section[aria-label*="Who"] h2 {
        margin-top: 1rem;
        max-width: 600px;
        height: 19rem;
        font-size: 3.5rem;
        align-content: center;
    }


    /*FEATURED of the month section */

    /*artist */

    /* Img and info side by side */
    #home div section:nth-of-type(2) div {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    
    #home div section:nth-of-type(2) div img{
        display: block;
        width: 100%;
        height: auto;
        grid-column: 1;
        grid-row: 1;
    }

    #home div section:nth-of-type(2) div h3 {
        grid-column: 2;
        grid-row: 1;
        width: 80%;
        font-size: 2.5rem;
        margin-left: 2rem;
        background-color: #F8C57D;
        padding: 3rem;
        align-self: center;
    }

    /* Description */
    #home div section:nth-of-type(2) div p:nth-of-type(2){
        grid-column: 1/ span 2;
        grid-row: 3;
        max-width: 500px;
        font-size: 1.5rem;
        margin-top: 1rem;
    }

    /* Name */
    #home div section:nth-of-type(2) div p:nth-of-type(1){
        grid-column: 1;
        grid-row: 2;
        padding: 0;
        font-size: 2rem;
        margin-top: 2rem;
    }

    /*format */
    #home div section:nth-of-type(2) div p:nth-of-type(3){
        grid-column: 1/ span 2;
        grid-row: 4;
        font-size: 1.1rem;
        margin-top: 0.5rem;
    }

    #home div section:nth-of-type(2) {
        grid-template-columns: 1fr 4fr 0fr;
    }

    /* ---SONG --*/

    /* Img and info side by side */
    #home div section:nth-of-type(3) div {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        gap: 1rem;
        
    }
    
    #home div section:nth-of-type(3) div img{
        display: block;
        width: 100%;
        height: auto;
        grid-column: 2;
        grid-row: 1;
    }

    #home div section:nth-of-type(3) div h3 {
        grid-column: 1;
        grid-row: 1;
        font-size: 2.5rem;
        margin-left: 2rem;
        background-color: #F8C57D;
        padding: 3rem;
        align-self: center;
        text-align: right;
        width: 80%;
    }

    /* Description */
    #home div section:nth-of-type(3) div p:nth-of-type(2){
        grid-column: 2;
        grid-row: 3;
        max-width: 430px;
        font-size: 1.5rem;
        text-align: right;
        justify-self: end;
    }

    /* Name */
    #home div section:nth-of-type(3) div p:nth-of-type(1){
        grid-column: 2;
        grid-row: 2;
        padding: 0;
        font-size: 2rem;
        margin-top: 1rem;
        text-align: right;
        justify-self: end;
    }

    /*format */
    #home div section:nth-of-type(3) div p:nth-of-type(3){
        grid-column: 2;
        grid-row: 4;
        font-size: 1.1rem;
        text-align: right;
        justify-self: end;
        width: 100%;
    }

    #home div section:nth-of-type(3) {
        display: grid;
        grid-template-columns: 5fr 1fr;
        align-items: start; /* Align items to the top */
        margin-top: 2rem; 
        gap: 2rem;
    }

    #home div section:nth-of-type(3) div {
        grid-column: 1;

    }

    /* ---ALBUM --*/

    /* Img and info side by side */
    #home div section:nth-of-type(4) div {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    
    #home div section:nth-of-type(4) div img{
        display: block;
        width: 100%;
        height: auto;
        grid-column: 1;
        grid-row: 1;
    }

    #home div section:nth-of-type(4) div h3 {
        grid-column: 2;
        grid-row: 1;
        width: 80%;
        font-size: 2.5rem;
        margin-left: 2rem;
        background-color: #F8C57D;
        padding: 3rem;
        align-self: center;
    }

    /* Description */
    #home div section:nth-of-type(4) div p:nth-of-type(2){
        grid-column: 1/ span 2;
        grid-row: 3;
        max-width: 500px;
        font-size: 1.5rem;
        margin-top: 1rem;
    }

    /* Name */
    #home div section:nth-of-type(4) div p:nth-of-type(1){
        grid-column: 1;
        grid-row: 2;
        padding: 0;
        font-size: 2rem;
        margin-top: 2rem;
    }

    /*format */
    #home div section:nth-of-type(4) div p:nth-of-type(3){
        grid-column: 1/ span 2;
        grid-row: 4;
        font-size: 1.1rem;
        margin-top: 0.5rem;
    }

    #home div section:nth-of-type(4) {
        grid-template-columns: 1fr 4fr 0fr;
    }


    /* Keep RSVP button visible */
    [aria-label*="Upcoming"] div article div:nth-of-type(3) button {
        font-size: 1.3rem;
        padding: 1rem 2rem;
    }


    /* EVENTS PAGE Section--*/

    /* --- (Upcoming Events) Header --- */
    [aria-label="Upcoming Events"] h2 {
        font-size: 6rem; /* 🔥 Big text */
        padding: 2.5rem;
        width: 90%; /* Make it take up more space */
        max-width: 1200px; /* Ensures it doesn't get too stretched */
        font-weight: bold;
        letter-spacing: 2px;
        margin: 0 auto; /* Centers the heading */
    }
    
    /* --- Countdown Box  --- */
    [aria-label="Count Down"] {
        padding: 2rem;
        max-width: 800px; /* Make it longer */
        margin: 0 auto 4rem; /* Centers it and adds spacing below */
        letter-spacing: 0.5px;
        font-size: 1.8rem; /* Larger text */
    }

    /* --- Countdown Text Part --- */
    [aria-label="Count Down"] p:nth-child(1) {
        font-size: 1.4rem;
    }

    /* --- Countdown Date Part --- */
    [aria-label="Count Down"] p:nth-child(2) {
        font-size: 1.6rem;
        font-weight: 700;
        border: 2px solid #FFF1D1;
        padding: 1rem;
    }

    main > p {
        font-size: 1.4rem; /* Bigger text */
        font-weight: 500;
        border-radius: 6px 6px 0 0;
        width: 70%; /* Wider */
        max-width: 800px;
        margin-top: 4rem; /* Adds spacing above */
    }

    /* -Catalog page -*/
    #catalog .flex-container img {
        width: 90%;
        height: auto;
     }

     #catalog main nav ul li a {
        font-size: 1.5rem;
        padding-right: 1rem;
    }

    #catalog main > section:nth-of-type(1) div > p {
        font-size: 1.6rem;
        text-align: center;
    }

    #catalog main > div:nth-of-type(1) {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }
    #catalog main div article > div p{
        font-size: 1.3rem;
    }

    #catalog main div article > div p:nth-of-type(1){
        font-size: 2rem;
    }

    #catalog main div article > div p:nth-of-type(4){
        font-size: 3rem;
    }

    #catalog data {
        font-weight: bold;
    }

     /* -Find Us Page-*/
    #find-us main {
        max-width: 1400px;
        margin: 0 auto ;
    }


    /* Home page UPCOMING EVENTS section */

    /* Upcoming Events section */
    [aria-label*="Upcoming"] {
        max-width: 1400px; /* Limits the width of the section */
        margin: 0 auto; 
    }
/*900px */
    /* Headline */
    [aria-label*="Upcoming"] > h2 {
        font-size: 5rem;
        padding: 3rem;
        max-width: 1400px; /* Limits the width of the headline */
    }

    /* Event articles container */
    [aria-label*="Upcoming"] > div {
        gap: 1rem; /* Adds spacing between articles */
        width: 100%; 
    }

    /* Individual event articles */
    [aria-label*="Upcoming"] div article {
        padding: 3rem;
        gap: 0.8rem;
        max-width: 800px; /* Limits the width of each article */
    }

    [aria-label*="Upcoming"] div article div p {
        padding: 1.3rem 0;
        font-size: 2rem;
    }

    [aria-label*="Upcoming"] div article div:nth-of-type(1) h3{
        font-size: 3.4rem;
        
    }

    [aria-label*="Upcoming"] address{
        font-size: 1.6rem
    }
    /* --- Event Description --- */
    article[aria-label*="Event"] p {
        padding: 2rem;
        font-size: 1.4rem;
        border-radius: 6px;
        margin-top: 1rem;
        box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.1);
    }
    
    /* Orange */
    summary {
        padding: 1.6rem 6rem;
    }
    
    /*white */
    details {
        padding: 1rem 2rem;
    }

}

@media (min-width: 1300px) {

    /* Headline for who we are secion centering */
    section[aria-label*="Who"] h2 {
        text-align: center;
        align-content: center;
    }

    /* hero section for events,find-us, catalog side img */
    footer {
        padding: 2rem;
    }

    /* ---HOME PAGE: UPCOMING EVENT SECTION ---*/

    [aria-label*="Upcoming"]::before {
        width: 100%; /* Makes the pseudo-element span the full width */
        height: 500px; /* Adjusts the height for the vinyl as needed */
    }
       /* --- Event Date --- */
       article[aria-label*="Event"] time {
        font-size: 2rem;
        margin-top: 1rem;
    }
    
   /* Catalog section */ 


   #catalog main > div:nth-of-type(1) {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;

    }
    #catalog main div article > div p{
        font-size: 1.3rem;
    }

    #catalog main div article > div p:nth-of-type(1){
        font-size: 2rem;
    }

    /* home page moving 'p' */
    #home main > :first-child {
        padding: 1.4rem;
        font-size: 1.4rem;
        margin-bottom: 3rem;
    }
    
}