/*BY FASIKA KELILE */

/*---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 REVISTEDS
---------------------------------------------*/

/* 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;
   scroll-behavior: smooth;
  
}

a {
	text-decoration: none; /* removes underline */
  }
  


/*CSS RESET END */

/*------------------------------------------
        1. Base
---------------------------------------------*/

.home-page, #find-us, #catalog, #events{
	font-family: "Rosario", Arial, Helvetica, sans-serif;
	color: #533011;
	background-color: #FFF1D1;
	overflow-x: hidden;
}
  
h1, h2, h3 {
	font-family: "Limelight", 'Georgia', 'Times New Roman', Times, serif;
	line-height: 1.2;
	color: #3d1f00;
}

p, a {
	font-family: "Rosario", Arial, Helvetica, sans-serif;
}
  
img {
	height: auto;
	display: block;
}


.main-information {
	max-width: clamp(300px, 70vw, 700px); /* Larger starting size with responsive cap */
}



/*------------------------------------------
		  2. Layout helpers
---------------------------------------------*/
.container {
	margin: 0 auto;
	padding: 2rem;
}
  
.grid-two-column {
	display: grid;
	grid-template-columns: 1fr 1fr;
}
  
/*------------------------------------------
		  3. Module: Site Header 
---------------------------------------------*/
  
/*header section */ 

header {
	background-color: #FFF1D1;
}
  
header nav[aria-label="Main navigation"] {
	background-color: #267885;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1rem 2rem;
	gap: 2rem;
}
  
header nav ul {
	display: flex;
	gap: 1.5rem;
	align-items: center;
}
  
header nav li {
	list-style: none;
	position: relative;
}
  
header nav a {
	font-size: 1.2rem;
	font-weight: 600;
	padding: 0.5rem;
	border-radius: 4px;
	transition: background-color 0.3s ease, color 0.3s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: "Rosario", Arial, Helvetica, sans-serif;
	color: #3b2b23;
}
  
/* Excludes hover highlight for logo link */
header nav ul:first-child a:hover {
	background-color: transparent;
	color: inherit;
}
  
/* Adds hover labels below icons, excluding logo */
header nav ul:not(:first-child) a::after {
	content: attr(aria-label);
	position: absolute;
	bottom: -1.5rem;
	left: 50%;
	transform: translateX(-50%);
	background-color: #FFF1D1;
	color: #533011;
	font-size: 0.75rem;
	font-weight: 600;
	padding: 0.2rem 0.4rem;
	border-radius: 4px;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease;
	pointer-events: none;
}
  
header nav ul:not(:first-child) a:hover::after {
	opacity: 1;
	visibility: visible;
}
  
.logo-icon {
	width: 4rem;
	height: 4rem;
	background: #FFF1D1;
	border-radius: 1rem;
	padding: 0.4rem;
}
  
.material-icons {
	width: 2rem;
	height: 2rem;
	fill: currentColor;
}
  

/*------------------------------------------
		  4. Module: Footer
---------------------------------------------*/
footer {
	background: #533011;
	color: #FFF1D1;
	padding: 2rem;
	font-family: 'Rosario', sans-serif;

	align-content: center;
  }
  
  /* --- NAVIGATION + LOGO --- */
  footer nav {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.2rem;
	margin-bottom: 2rem;
	border-bottom: 1px solid #EDAC36;
	padding-bottom: 3rem;
  }
  
  footer p {
	color: #FFF1D1;
  }
  /* NAVIGATION LINKS */
  footer .footer-nav a {
	color: #FFF1D1;
	font-weight: bold;
	font-size: 1.3rem;
	text-decoration: none;
	transition: color 0.3s ease, text-decoration 0.3s ease;
  }
  
  .footer-nav a:hover {
	color: #EDAC36;
	text-decoration: underline;
  }
  
  footer nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 1.2rem;
	justify-content: center;
	list-style: none;
  }
  
  /* --- MAIN CONTENT --- */
  .footer-content {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	text-align: center;
	margin-top: 2rem;
  }

  .footer-content li {
	padding-bottom: 0.5rem;
	font-size: clamp(1rem, 2vw, 1.2rem);
	line-height: 1.2;
  }
  
  /* SECTION HEADINGS */
  footer section h3 {
	font-size: 1.3rem;
	color: #EDAC36;
	margin-bottom: 0.75rem;
	margin-top: 0;
	border: none; /* no underline */
  }
  
  /* SECTION BLOCKS */
  footer section {
	padding: 1rem;
  }
  
  /* ADDRESS AND CONTACT */
  footer address {
	font-style: normal;
	line-height: 1.6;
	font-size: clamp(1rem, 2vw, 1.2rem);
  }
  
  /* SOCIAL MEDIA ICONS */
  .social-media ul {
	display: flex;
	justify-content: center;
	gap: 1rem;
	padding: 0;
	list-style: none;
	margin-top: 1rem;
  }
  
  .social-icons {
	width: 32px;
	height: 32px;
	fill: #FFF1D1;
	transition: transform 0.3s ease;
  }
  
  .social-icons:hover {
	transform: scale(1.1);
	fill: #EDAC36;
  }
  
  /* COPYRIGHT */
  footer .copyright {
	text-align: center;
	font-size: 1rem;
	border-top: 1px solid #EDAC36;
	padding-top: 2rem;
	color: #FFF1D1 !important;
	max-width: 1200px;
	margin: 2rem auto;
  }

/*------------------------------------------
		  5. Page: Home Page
---------------------------------------------*/

/* home base*/ 

.home-page h2 {
	font-size: 2rem;
}
  
.home-page h3 {
	font-size: 1.6rem;
}
  
.home-page p {
	line-height: 1.6;
	color: #3b2b23;
}

/* ------Store Hours display */ 
#stickyBanner {
	position: fixed;
	bottom: 50%;
	right: 0;
	transform: translateY(50%);
	background-color: #EDAC36;
	color: #3b2b23;
	padding: 1.5rem;
  	font-size: 1.4rem;
  	text-align: center;
	font-size: 1.4;
	width: auto;
	height: auto;
	writing-mode: vertical-rl;
	text-orientation: mixed;
	z-index: 1000;
	display: flex;
	justify-content: center;
	align-items: center;
	border-top-left-radius: 1rem;
	border-bottom-left-radius: 1rem;
	transition: width 0.3s ease, padding 0.3s ease;
	cursor: default;
  }
  
  #stickyBanner.collapsed {
	width: 20px;
	padding: 0.5rem 0;
	font-size: 0;
	cursor: pointer;
  }
  
  #stickyBanner .close-btn {
	position: absolute;
	bottom: -5%;
	left: -12%;
	background: #3d1f00;
	color: #FFF1D1;
	border: none;
	border-radius: 50%;
	width: 2rem;
	height: 2rem;
	cursor: pointer;
	font-weight: bold;
	z-index: 1001;
  }
  
  #stickyBanner.collapsed .close-btn {
	display: none;
  }
  
  #stickyBanner.collapsed::after {
	content: "☰";
	font-size: 16px;
	color: #3d1f00;
	writing-mode: vertical-rl;
  }

/* --------Hero section-------- */ 

.hero-section {
	background-color: #FFF1D1;
	display: grid;
	grid-template-columns: 1fr 1.3fr;
}

  
.hero-section img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
  
/* to shift the illustration image so that it can connect. */
.hero-section img:first-child {
	z-index: 0;
}

.hero-section img:last-child {
	z-index: 1;
}

/* -------Moving banner------ */
.moving-banner {
	overflow: hidden;
	background-color: #91360A;
	color: #FFF1D1;
	height: 2.5rem;
	display: flex;
	align-items: center;
	white-space: nowrap;
	position: relative;
}
  
.banner-track {
	display: flex;
	white-space: nowrap;
	will-change: transform;
}
  
.banner-track span {
	display: inline-block;
	padding-right: 1rem;
	font-size: 1.2rem;
	font-family: "Rosario", Arial, Helvetica, sans-serif;
}

.moving-banner:hover {
	cursor: pointer;
}
  
/*-------------------- ABOUT SECTION ------------------*/
.about-section {
	max-width: 1000px;
	margin: 0 auto;
}

.about-section h1 {
	background-color: #267885;
	color: #FFF1D1;
	padding: 2rem;
	margin-bottom: 2rem;
	font-family: "Limelight", 'Georgia', 'Times New Roman', Times, serif;
	font-size: 2.5rem;
	line-height: 1.2;
	
}
  
.about-section p {
	background-color: #533011;
	color: #FFF1D1;
	padding: 2rem;
	margin-top: 1rem;
	font-family: "Rosario", Arial, Helvetica, sans-serif;
	line-height: 1.5;
	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;
	font-size: 1.1rem;
}


/* -------------FEATURES OF THE MONTH (mobile first)-----------------*/ 

/* Title for Feature of the month */
.monthly-features {
	margin: 0 auto;

}

.monthly-features h2 {
	background-color: #267885;
	color: #FFF1D1;
	padding: 2rem;
	text-align: center;
	font-size: 2rem;
	font-weight: 600;
	line-height: 1.2;
	margin-bottom: 3rem;
}

.featured-artist .main-information img,
.featured-song .main-information img,
.featured-album .main-information img {
	display: block;
	width: 100%;
	height: auto;
	position: relative;
}

/* Headings in features */
.featured-artist .main-information h3,
.featured-song .main-information h3,
.featured-album .main-information h3 {
	font-size: clamp(1.5rem, 2vw + 0.5rem, 3rem);
}

/* Artist/song/album name */
.featured-artist .main-information p:nth-of-type(1),
.featured-song .main-information p:nth-of-type(1),
.featured-album .main-information p:nth-of-type(1) {
	font-size: clamp(1.5rem, 2vw, 3rem);
	background-color: #FFF1D1;
	padding: 1.2rem;
}

/* Description paragraphs */
.featured-artist .main-information p:nth-of-type(2),
.featured-song .main-information p:nth-of-type(2),
.featured-album .main-information p:nth-of-type(2) {
	font-size: clamp(1rem, 2vw, 1.3rem);
	background-color: #FFF1D1;
	padding: 1.2rem;
}

.description {
	font-size: clamp(1rem, 2vw, 1.3rem);
}

/* Grid layout for each monthly highlights */
/* -------MONTHLY ARTIST--------*/

.wrap-artist {
	display: grid;
	grid-template-columns: 160px 1fr;
	grid-template-areas:
		"description main";
	min-height: 300px;
	position: relative;
	align-items: start;
	margin: 2rem 0 2rem auto; /* Top, Right (auto), Bottom, Left */
	max-width: 800px;
	justify-self: start;
	padding: 0 2rem;
	

}

.featured-artist { 
	overflow: clip; 
	position: relative;
	isolation: isolate;
	width: 100vw;
	margin-left: calc(-50vw + 50%); /* full-width breakout */
}



.featured-artist .main-information{
	grid-area: main;
}

.featured-artist h3{
	background-color: #91360A;
	color: #FFF1D1; 
	padding: 1rem;
	width: 100%;
	grid-column: 2;
	grid-row: 1;
} 

/*artist name */
.featured-artist .main-information p:nth-of-type(1) {
	font-weight: 500;
	padding-top: 0.5rem;
}

/* about artist */
.featured-artist .main-information p:nth-of-type(2){
	margin-bottom: 4rem;
	padding-top: 0.5rem;
}

/*format and genre*/
.featured-artist .description{
	grid-area: description;
	position: relative;
	z-index: 2;

}

.featured-artist .description p {
	color: #FFF1D1;
	background-color: #533011;
	padding: 1rem;
}

.featured-artist .description p:nth-of-type(1){
	margin-bottom: 1rem;
	margin-top: 1.5rem;
}

/* Left-side illustration styling */
.featured-artist::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 110%;
	height: 100%;
	background-image: url(assets/illustration/illustration-hero-wave.svg);
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: center;
	transform: scaleX(-1) scaleY(-1) rotate(180deg) translateX(-5%) translateY(-5%);
	z-index: -99;
	pointer-events: none;
	
}

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

.home-main .wrap-song{
	display: grid;
	grid-template-columns: 1fr 160px;
	grid-template-areas:
		"main description";
	min-height: 300px;
	position: relative;
	align-items: start;
	justify-content: end; /* Push content to right */
	text-align: right;    /* Align text right */
	margin: 2rem;
	max-width: 800px;

}
.home-main .featured-song {
	overflow: clip; 
  	position: relative;
  	isolation: isolate;
  	width: 100vw;
  	margin-left: calc(-50vw + 50%); /* full-width breakout */

}

/* Text and image container */
.featured-song .main-information {
	grid-area: main;
	display: flex;
	flex-direction: column;
	align-items: flex-end; /* Push image and text to the right */
}

/* Heading */
.home-main .featured-song h3 {
	background-color: #91360A;
	color: #FFF1D1; 
	padding: 1rem;
	width: 100%;
	max-width: 700px;
}

/* Artist name */
.featured-song .main-information p:nth-of-type(1) {
	font-weight: 500;
	padding-top: 0.5rem;
	width: 100%;
}

/* About song */
.featured-song .main-information p:nth-of-type(2) {
	margin-bottom: 4rem;
	padding-top: 0.5rem;
}

/* Responsive image */
.featured-song .main-information img {
	display: block;
	width: 100%;
	max-width: clamp(300px, 70vw, 700px);
	height: auto;
}

/* Description block */
.featured-song .description {
	grid-area: description;
	position: relative;
	z-index: 2;
	align-self: start;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

/* Description text blocks */
.featured-song .description p {
	color: #FFF1D1;
	background-color: #533011;
	padding: 1rem;
}

/* Spacing */
.featured-song .description p:nth-of-type(1) {
	margin-top: 1.5rem;
}

/* Decorative background wave */
.featured-song::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 110%;
	height: 100%;
	background-image: url(assets/illustration/illustration-hero-wave.svg);
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: center;
	transform: scaleX(1) scaleY(-1) rotate(180deg) translateX(-5%) translateY(-10%);
	z-index: -99;
	pointer-events: none;
}




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

.featured-album {
	overflow: clip; 
	position: relative;
	isolation: isolate;
	margin-left: calc(-50vw + 50%); /* full-width breakout */
	width: 100vw;

}
.wrap-album {
	display: grid;
	grid-template-columns: 160px 1fr;
	grid-template-areas:
		"description main";
	min-height: 300px;
	position: relative;
	align-items: start;
	margin: 2rem 0 2rem auto; /* Top, Right (auto), Bottom, Left */
	max-width: 800px;
	justify-self: start;
	padding: 0 2rem;

}

.featured-album .main-information{
	grid-area: main;
}

.featured-album h3{
	background-color: #91360A;
	color: #FFF1D1; 
	padding: 1rem;
	width: 100%;
	grid-column: 2;
	grid-row: 1;
	max-width: 700px;
} 

/*artist name */
.featured-album .main-information p:nth-of-type(1) {
	font-weight: 500;
	padding-top: 0.5rem;
}

/* about artist */
.featured-album .main-information p:nth-of-type(2){
	margin-bottom: 4rem;
	padding-top: 0.5rem;
}

/*format and genre*/
.featured-album .description{
	grid-area: description;
	position: relative;
	z-index: 2;

}

.featured-album .description p {
	color: #FFF1D1;
	background-color: #533011;
	padding: 1rem;
}

.featured-album .description p:nth-of-type(1){
	margin-bottom: 1rem;
	margin-top: 1.5rem;
}

/* Left-side illustration styling */
.featured-album::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 110%;
	height: 100%;
	background-image: url(assets/illustration/illustration-hero-wave.svg);
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: center;
	transform: scaleX(-1) scaleY(-1) rotate(180deg) translateX(-5%) translateY(-10%);
	z-index: -99;
	pointer-events: none;
}




/* -----------UPCOMING EVENTS ------------------*/ 



/*--the entire section for upcoming event -- */
.home-page [aria-label*="Upcoming"] {
    color: #FFF1D1;
    touch-action: pan-x; /* Enable horizontal swipe for touch devices */
	margin: 0 auto 6rem;
	max-width: 1500px;
}

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

/* ---Event content in upcoming event : homepage--- */
.home-page [aria-label*="Upcoming"] div article {
    background-color: #267885;
    padding: 1rem 1rem 2rem;
    flex: 0 0 90%; /* 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 */
.home-page [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 */
	color:#FFF1D1;
}

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

.home-page [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;
	line-height: 1.2rem;
	font-size: clamp(1rem, 2vw, 1.3rem);
}

.home-page [aria-label*="Upcoming"] div article div:nth-of-type(3) address span {
    font-weight: bold;
	font-size: 1.6rem;
	display: inline-block; /* necessary for margin to apply */
  	margin-bottom: 1rem;
}



/* ---RSVP Button styling: Upcoming events homepage---- */
.home-page [aria-label*="Upcoming"] div article div:nth-of-type(3) .rsvp-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 */
.home-page [aria-label*="Upcoming"] div article div:nth-of-type(3) .rsvp-button:hover {
    background-color: #EDAC36; /* Change background on hover */
    color: #533011; /* Change text color on hover */
}

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

/* number date style */
.home-page 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 */
.home-page 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;
}

.home-page [aria-label*="Upcoming"] div article h3 {
    color: #EDAC36;
    padding-bottom: 0.4rem;
	font-size: clamp(1.4rem, 5vw, 2rem);
}

/* scrollbar editing  for events home page slide*/

.home-page [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) */
}

.about-event {
	color: #FFF1D1;
	font-size: clamp(1.2rem, 3vw, 1.4rem);
	line-height: 1;
	margin-bottom: 1rem;
}

.home-page [aria-label*="Upcoming"] .about-event {
	color: #FFF1D1 !important;
}


/*------------------------------------------
		  6. Events page
---------------------------------------------*/

#events {
	overflow-x: hidden
}


/* hero image */
#events header div {
	display: flex;
    justify-content: center;
	height: 100vh;
	width: 100vw;
	
	background-image: 
		linear-gradient(rgba(255, 241, 209, 0.2), rgba(255, 241, 209, 0.5)),
		url('assets/photos/hero-image/eventpage-store-.webp');
	background-repeat: no-repeat;   
  	background-size: cover;             
 	background-position: center top; /* center it horizontally and vertically */
	margin-bottom: 3rem;
	
}

#events header div img {
	width: clamp(300px, 50vw, 600px);
	max-width: 1000px;
    height: auto;
	object-fit: contain;
	justify-self: center; 
    align-self: center; 
    display: block;
}

/* the rest of the main content */ 


/* design for title h1 */

#events h1{
	background:#533011;
	color: #FFF1D1;
	font-size: 3rem;
	font-weight: bolder;
	padding: 2rem;
	text-align: center;
	margin-bottom: 3rem;
}

/* upcoming event design */
.main-layout{
	display: flex;
	flex-direction: column;
	gap: 2rem;
	justify-content: center;
	margin-bottom: 4rem;
}

#events h1, .main-layout {
	width: 90%;
	margin: 0 auto 4rem;
}

/* zig zag side */
.side-layout {
	background-color: #267885;
	align-content: center;
	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%
	);

	padding: 2rem ;
	flex: 1;
	width: 100%; /* fallback for stacked mobile view */

}

.side-layout h2{
	font-size: clamp(2rem, 3vw, 3rem);
	text-shadow: 1px 1px #533011;
	text-align: center;
	padding: 2rem 0 1.5rem;
	color: #FFF1D1;
}

.side-layout p{
	font-size: clamp(1.4rem, 2vw, 1.5rem);
	text-align: center;
	padding: 0 2rem;
	color: #FFF1D1;
}

.next-event-image, .side-layout {
	width: 100%;
	max-width: 750px;
	margin: 0 auto;
	justify-content: center;
  }
  
  .next-event-image img {
	width: 100%;
	height: auto;
	max-width: 100%;
	object-fit: cover;
  }

/* design for count down */

/*background container for the live counter*/
.event-hero {
	max-width: 400px;
	margin: 0 auto;
	padding: 2.5rem 1.25rem 0;
	text-align: center;
}

.countdown {
	display: flex;
	justify-content: center;
	gap: 1.25rem;
	background: #533011;
	color: #FFF1D1;
	padding: 1.2rem;
	border-radius: 0.75rem;
	margin-bottom: 2rem;
	clip-path: polygon(0 15%, 10% 0%, 90% 0%, 100% 15%, 100% 85%, 90% 100%, 10% 100%, 0% 85%);
	font-size: 2rem;
	font-weight: bold;
	font-family: "Limelight", 'Georgia', 'Times New Roman', Times, serif;
}

/* the inside of the numbers */

.countdown div {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.countdown small {
	font-size: 0.75rem;
	color: #EDAC36;
	margin-top: 0.2rem;
}

/* RSVP Button */
.rsvp {
	display: inline-block;
	background: #EDAC36;
	color: #533011;
	padding: 0.6rem 1.75rem;
	font-weight: bold;
	font-size: 1rem;
	text-decoration: none;
	border-radius: 10px;
	box-shadow: 2px 2px rgba(34, 1, 1, 0.057);
	transition: transform 0.2s ease;
}

.rsvp:hover {
	transform: scale(1.05);
	background: #f8c45c;
}


/* ----the wave decorative style divider---- */

.wave-divider {
	width: 100vw;              /* Full viewport width */
	margin-left: calc(-50vw + 50%); /* Pull it out of container */
	line-height: 0;
	overflow: hidden;
	z-index: 0;
	position: relative;
  }
  
.wave-divider img {
	display: block;
	width: 100%;
	height: auto;
}

  /*----------more events section-------- */

.more-events{
	background-color: #F9A900;  
	overflow: hidden; 
	padding-bottom: 4rem;
}
.more-events h2{
	font-size: clamp(2rem, 3vw, 3rem);
	padding: 2rem;
	text-align: center;
	background-color: #533011;
	color: #FFF1D1;;
	overflow: wrap;
	white-space: normal;
	width: 90%;
	margin: 0 auto;   
	
}

article[aria-label="First Event"],
article[aria-label="Second Event"],
article[aria-label="Third Event"] {
	background-color: #FFF1D1;
	border: #91360A solid 2px;
	padding: 2rem;
	max-width: 1200px;
	display: flex;
	flex-direction: row;
	width: 90%;
	margin: 4rem auto;   
}


/*----Layout for the more events mobile-first----*/

.more-events article {
	display: flex;
	flex-direction: column;
	background-color: #FFF1D1;
	border: 4px solid #91360A;
	padding: 2rem;
	border-radius: 12px;
	box-shadow: inset 0 0 0 3px #EDAC36; /* Creates inner second line */
	position: relative;
	gap: 1.5rem;
	margin: 3rem auto;
	width: 90%;
  }


  /*music notes */
  .more-events article::before {
	content: '🎶';
	font-size: 2rem;
	position: absolute;
	color: #91360A;
  }
  
  .more-events article::before {
	top: -0.8rem;
	left: -0.8rem;
  }
  
  .more-events article::after {
	bottom: -0.8rem;
	right: -0.8rem;
  }
  
  
  
  .more-events article img {
	width: 100%;
	max-width: 400px;
	height: auto;
	border: 3px solid #EDAC36;
	border-radius: 8px;
	margin: 0 auto;
  }
  
  .more-events article > div {
	flex: 1;
  }
  
  .more-events h3 {
	font-family: "Limelight", Georgia, serif;
	font-size: 2rem;
	color: #91360A;
	margin-bottom: 0.5rem;
	text-align: center;
  }
  
  .more-events time {
	font-size: 1.1rem;
	font-weight: bold;
	color: #533011;
	display: block;
	text-align: center;
	margin-bottom: 1rem;
  }
  
  .more-events details {
	background-color: #267885;
	color: #FFF1D1;
	padding: 1rem;
	border-radius: 10px;
	margin-top: 1rem;
  }
  .more-events details p{ 
	font-size: 1rem;
	padding-top: 1rem;
	line-height: 1.2;
  }
  
  .more-events summary {
	font-weight: bold;
	font-size: 1.1rem;
	cursor: pointer;
  }
  
  .more-events form {
	margin-top: 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
  }
  
  .more-events form label {
	font-weight: bold;
	color: #FFF1D1;
  }
  
  .more-events form input {
	padding: 0.5rem;
	border-radius: 6px;
	border: 2px solid #EDAC36;
	font-family: "Rosario", sans-serif;
  }
  
  .more-events form button {
	margin-top: 0.5rem;
	padding: 0.6rem 1.2rem;
	background: #EDAC36;
	color: #3d1f00;
	font-weight: bold;
	border: none;
	border-radius: 8px;
	font-family: 'Limelight', Georgia, serif;
	cursor: pointer;
	transition: transform 0.2s ease, background-color 0.3s ease;
  }
  
  /* buttons get scale effect on hover */
  .more-events form button:hover {
	background-color: #f9c76b;
	transform: scale(1.05);
  }

/* the form for the name and the box */ 
.more-events form div{
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.more-info-container time{
	font-size: clamp(1.2rem, 2vw, 1.6rem);
}
.more-info-container h3{
	font-size: clamp(2rem, 3vw, 3rem);
}

.more-events button {
	font-size: 1rem;
}

/*------------------------------------------
		  7. Catalogs
---------------------------------------------*/

#catalog {
	background-color: #FFF1D1;
	overflow-x: hidden
}

#catalog main {
	width: 85%;
	margin: 0 auto 6rem;
}

/* hero image */
#catalog header div {
	display: flex;
    justify-content: center;
	height: 100vh;
	width: 100vw;
	max-height: 800px;

}

#catalog header div img {
	width: clamp(300px, 80vw, 800px);
	max-width: 1200px;
    height: auto;
	object-fit: contain;
    display: block;
	justify-self: center; 
    align-self: center; 

}

 /*--Main content - First section: Explore Collection - catalog page ------ */


#catalog main > section:nth-of-type(1) h1 {
    background-color: #91360A;
    color: #FFF1D1;
    font-size: 3rem;
    margin-top: 3rem;
    margin: 0 auto;
	padding: 2rem 0;
	font-family: "Limelight", 'Georgia', 'Times New Roman', Times, serif;
	text-align: left;
	
}


/* text under headline */

#catalog main section {
    background-color: #91360A;
    color: #FFF1D1;
	margin-bottom: 2rem;
	padding: 2rem 4rem 2rem 4rem;
	max-width: 1300px;
	margin: 0 auto 2rem auto;
}

/* h2 is first text under h1 */
#catalog main section h2 {
	font-family: "Rosario", Arial, Helvetica, sans-serif;
	font-size: 1.4rem;
	max-width: 900px;
	color: #FFF1D1;
	line-height: 1.2;
	padding-bottom: 1rem ;
	text-align: left;
}

#catalog main section p {
	max-width: 900px;
	padding-bottom: 1rem ;
	line-height: 1.2;
	font-size: 1.1rem;
	text-align: left;
}

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

/* this is the filter system */ 
#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: 1.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;
}



 /*--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;
}


/*----content STYLING - VINYL LAYOUT catalog page --*/

#catalog main div article {

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

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

    /*--details */
	.album-detail p:nth-of-type(2) {
        font-weight: 600;
        grid-column: 2;
		grid-row: 2;
        width: 95%;
        padding-left: 2rem;
    }

	/* price and stock */
	.value {
		display: grid;
		flex-direction: row;
		gap: 1rem;
		background-color: #91360A;
		padding: clamp(1.2rem, 2vw, 1.4rem);
	}

	/* --price-- */
	.value p:nth-of-type(1) {
        color: #FFF1D1;
		font-size: clamp(1.4rem, 3vw, 2.5rem);
        font-weight: bold;
        font-family: 'Limelight', 'Georgia', 'Times New Roman', Times, serif;
		padding-left: 2rem;
    }

    /* the stock value style*/ 
	.value p:nth-of-type(2) {
		font-weight: 600;
		font-size: clamp(1.2rem, 2vw, 2rem);
		font-weight: bold;
		color: #FFF1D1;
		padding-left: 2rem;
	}
}



/*------------------------------------------
		  8. Find-Us page
---------------------------------------------*/

#find-us{
	background-color: #FFF1D1;
	overflow-x: hidden
}

#find-us main {
	width: 85%;
	margin: 0 auto;
}

/* hero image */
#find-us header div {
	display: flex;
    justify-content: center;
	height: 100vh;
	width: 100vw;
	max-height: 800px;
	overflow: hidden;

}

#find-us header div img {
	max-width: 1200px;
    height: 900px;
	object-fit: cover;
	object-position: 40% 60%;  
    display: block;
	

}

#find-us header {
	margin-bottom: 0;
  }


/* main content of find us 
DIRECTION SECTION : FIND US PAGE ----------------------*/

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

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

}

#find-us main section:first-child {
	background-color: #f9c76b;
	width: 100vw;  
	margin-left: calc(-50vw + 50%);  /* Centering */ 
	margin-bottom: 4rem;
}

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

[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: #FFF1D1;
    text-align: center;
	box-shadow: 0 4px 12px rgba(61, 31, 0, 0.4);
}

/* <!--contact-content-->*/
[aria-label*="Contact"] > div {
    max-width: 1000px;
    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: #E36F2E; 
    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;
	color: #FFF1D1; 
}

/* 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: #FFF1D1; 
    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: #3d1f00; 
      }

      a:visited {
        color: #3d1f00;
      }

      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 6rem;
    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;
	max-width: 1000px;
}

/* Heading Styling */
[aria-label="Message Form"] h2 {
    line-height: 1.3;
    font-size: 2rem;
    color: #91360A; 
    margin-bottom: 2rem;
}

/* 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 {
    font-size: 1.2rem;
	font-weight: 500;
    font-weight: bold;
    color: #533011;
    letter-spacing: 1px; /* between each letter */
    text-align: left;
}

/* -- Input Fields - What Gets Filled - */
[aria-label="Message Form"] input, [aria-label="Message Form"] textarea {
    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;
}

/* Input Field Focus Effect */
[aria-label="Message Form"] input:focus, [aria-label="Message Form"] textarea: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;
    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%;
}  

/*------------------------------------------
		  9. Back-to-top arrow
---------------------------------------------*/
.back-to-top,
.back-to-top:visited {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  background-color: #f3b962;
  color: #3d1f00;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  border: 2px solid white;
  font-size: 0.9rem;
  text-decoration: none;
  font-weight: bold;
  z-index: 1000;
  transition: all 0.3s ease;
}

.back-to-top:hover,
.back-to-top:focus {
  color: #3b2b23;
  background-color: #E36F2E;
  text-decoration: underline;
}

/*------------------------------------------
		  10. 404 error page
---------------------------------------------*/

#error-page {
	background-color: #FFF1D1;
	font-family: 'Rosario', sans-serif;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	min-height: 100vh;
	overflow-x: hidden;
	position: relative;
	width: 100vw;
	height: 100vh;
}
  
.vinyl-icon {
	margin-top: 10rem;
	font-size: 12rem;
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 10;
	cursor: pointer;
	transform: translateX(-50%);
}
  
.vinyl-icon.spinning {
	animation: spin 10s linear infinite;
}
  
@keyframes spin {
	0% { transform: translateX(-50%) rotate(0deg); }
	100% { transform: translateX(-50%) rotate(360deg); }
}
  
.error-wrapper {
	margin-top: 18rem;
	text-align: center;
	max-width: 650px;
	padding: 4rem 2rem 2rem;
	background: #ffffff;
	border: 3px solid #EDAC36;
	border-radius: 12px;
	box-shadow: 3px 3px 0 #267885;
	position: relative;
	z-index: 5;
}
  
#error-page h1 {
	font-family: 'Limelight', cursive;
	font-size: 2.25rem;
	color: #267885;
	margin-top: 2rem;
	margin-bottom: 1.5rem;
}
  
.error-message p {
	font-size: 1.1rem;
	line-height: 1.7;
	color: #3d1f00;
	margin: 1rem 0;
}
  
.error-message strong {
	color: #267885;
	font-weight: bold;
}
  
#error-page .home-btn {
	display: inline-block;
	margin-top: 1.5rem;
	padding: 0.75rem 1.75rem;
	font-family: 'Limelight', cursive;
	font-size: 1rem;
	color: #3d1f00;
	background-color: #EDAC36;
	border: 2px solid #3d1f00;
	border-radius: 8px;
	text-decoration: none;
	transition: all 0.3s ease;
}
  
#error-page .home-btn:hover {
	background-color: #3d1f00;
	color: #FFF1D1;
	border-color: #EDAC36;
	text-decoration: underline;
}
  
/*------------------------------------------
		  11. Utilities
---------------------------------------------*/
  
.hidden {
	display: none !important;
}
  
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
  

/*------------------------------------------
		12. Responsive 
---------------------------------------------*/

@media (min-width: 400px) {

    /*--details of alabum */
	.album-detail p:nth-of-type(2) {
        font-weight: 600;
		font-size: 1.2rem;
    }
	
}


@media (min-width: 600px) {

	/*-- CATALOG PAGE --*/

	#catalog main > section:nth-of-type(1) h1 {
		font-size: 4rem;

	}

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

	#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) {

	/* home page events section */
	.home-page [aria-label*="Upcoming"] div article {
		padding-left: 4rem;
	}


	/* --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;
	}


	.wrap-album, .wrap-artist {
		margin: 2rem 5rem 2rem auto; /* Top, Right (auto), Bottom, Left */
	}
 
	.wrap-song{
		padding-left: 5rem;
	}

		
	/* ---FOOTER SECTION ---*/

	/* footer section */

	.footer-content {
		flex-direction: row;
		justify-content: space-between;
		text-align: left;
		padding-top: 2rem;
		position: relative;
	  }
	
	  .footer-content > section {
		flex: 1;
		padding: 0 1.5rem;
		position: relative;
	  }
	
	  .footer-content > section:not(:last-child)::after {
		content: '';
		position: absolute;
		right: 0;
		top: 0;
		height: 100%;
		width: 2px;
		background-color: #EDAC36;
	  }
	
	  footer nav {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	  }
	  .footer-content .social-media ul {
		justify-content: left;
	  }

	/* ---------------------EVENTS PAGE ----------------- */
	/* the counter section */
	.side-layout {
		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
			); 
	}


	/* upcoming event design */
	.main-layout{
		flex-direction: row;
		align-items: stretch;
		max-width: 1200px;
		margin: 4rem auto 0;
	}


	.next-event-image {
		width: 50%;
		flex: 0 0 50%;
		display: flex;
		align-items: stretch;
	  }
	  
	.next-event-image img {
		width: 100%;
		height: auto;
		object-fit: cover; /* or 'contain' if you prefer no cropping */
		display: block;
		
	  }

	#events h1 {
		max-width: 1200px;
		margin: 4rem auto;
	}

 }


@media (min-width: 900px) {


	/* HOME PAGE */

	/* featured artist */
	.featured-artist {
		position: relative;
		width: 85%;
		margin: 0 auto;
		z-index: 1;
		overflow: visible; /* or clip if needed */
		isolation: isolate;
	  }


	.featured-artist::before {
		content: '';
		position: absolute;
		top: 0;
		left: 50%;
		width: 110vw;
		height: 100%;
		background-image: url(assets/illustration/illustration-hero-wave.svg);
		background-repeat: no-repeat;
		background-size: cover; /* or 100% auto if needed */
		background-position: center;
		transform: translateX(-50%);
		z-index: -1;
		pointer-events: none;

	}



	/* Featured song */

	.home-main .featured-song {
		position: relative;
		width: 85%;
		margin: 0 auto;
		isolation: isolate;
		z-index: 1;
		overflow: visible;
	}


	.featured-song::before {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		width: 110vw;
		height: 100%;
		background-image: url(assets/illustration/illustration-hero-wave.svg);
		background-repeat: no-repeat;
		background-size: 100% auto;
		background-position: center;
		transform: scaleX(1) scaleY(-1) rotate(180deg) translateX(-13%) translateY(-10%);
		z-index: -99;
		pointer-events: none;
	}





	/* Featured album */

	.featured-album {
		position: relative;
		width: 85%;
		margin: 0 auto;
		z-index: 1;
		isolation: isolate;
		overflow: visible;
	}

	.featured-album::before {
		content: '';
		position: absolute;
		top: 0;
		left: 50%;
		width: 110vw;
		height: 100%;
		background-image: url(assets/illustration/illustration-hero-wave.svg);
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		transform: translateX(-50%) translateY(-5%);
		z-index: -1;
		pointer-events: none;
	}





	/* Nav Icon Sizing*/ 
	/* Large screens (e.g., small laptops) */
		.logo-icon {
			width: 6rem;
			height: 6rem;
		}
		
		.material-icons {
		  width: 3rem;
		  height: 3rem;
		}
	  
		header nav a {
		  font-size: 1.5rem;
		}
	
		header nav[aria-label="Main navigation"] {
			padding: 1rem 4rem;
		}
	
	
		/*banner text */
		.banner-track span {
			font-size: 1.5rem;
		}
	
		.moving-banner {
			padding: 1.6rem 0;
		}
	
	
		/*---WHO WE ARE ABOUT SECTION --- */
	
		.about-section {
			display: flex;
			flex-direction: row; 
			align-items: center; 
			gap: 2rem; 
			justify-content: center;
		}
	
		.about-section p {
			max-width: 600px;
			/* 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
			); 
			padding: 2rem;
			margin-top: 1rem;
			margin-bottom: 2rem;
			font-size: 1.3rem;
		}
	
		/* Who are you section */
	
		.about-section h1 {
			margin-top: 1rem;
			margin-bottom: 2rem;
			max-width: 600px;
		  line-height: 4rem;
			font-size: 3.5rem;
			align-content: center;
		}


		/* --footer section--- */

		.footer-content,
		footer nav {
		  max-width: 1000px;
		  margin: 0 auto;
		}
	
		/* ---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;
			}


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

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


		/*--EVENTS PAGE ---- */
			/* more vents section */
			.more-events article {
				display: flex;
				flex-direction: row;
				gap: 2rem;
				align-items: stretch;
				padding: 2rem;
				border: 4px double #91360A;
				border-image: url('./assets/illustration/music-notes-border.svg') 30 round;
				background-color: #FFF1D1;
				border-radius: 12px;
				position: relative;
				min-height: 500px;
			  }
			
			  .more-events article img {
				width: 350px;            
				height: auto;
				object-fit: cover;
				border: 3px solid #EDAC36;
				border-radius: 8px;
				flex-shrink: 0;
			  }
			
			  /* right column */
			  .more-info-container {
				display: flex;
				flex-direction: column;
				justify-content: center;
				flex: 1;
				position: relative;
				text-align: center;
				align-items: center;
			  }
			
			  .more-info-container h3,
			  .more-info-container time,
			  .more-info-container summary {
				transition: opacity 0.3s ease;
				z-index: 1;
			  }
			
			  /* HIDE the h3/time/summary when details opens */
			  .more-info-container details[open] ~ h3,
			  .more-info-container details[open] ~ time,
			  .more-info-container details[open] ~ summary {
				opacity: 0;
				pointer-events: none;
				height: 0;
				overflow: hidden;
				margin: 0;
			  }
			
			  /* Base state for details — clean & invisible */
			  .more-events article details {
				position: relative;
				z-index: 1;
				width: 100%;
				padding: 0;
				background: transparent;
			  }

			  .more-events article details p{
				line-height: 1.2;
				font-size: clamp(1rem, 2vw, 1.2rem);
				padding-bottom: 0.5rem;
				text-align: left;
			  }
			
			  /* Expanded blue form */
			  .more-events article details[open] {
				top: 0;
				right: 0;
				bottom: 0;
				left: auto;
				position: absolute;
				height: 100%;
				background: #267885;
				color: #FFF1D1;
				padding: 0 2rem; 
				margin: 0;
				border-radius: 10px;
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				align-items: center;
				align-content: center;
			}
			
			  .more-events article summary {
				display: inline-block;
				font-weight: bold;
				font-size: clamp(1.1rem, 2vw, 1.4rem);
				color: #267885;
				background: #FFF1D1;
				border: 2px solid #267885;
				border-radius: 8px;
				padding: 0.5rem 1.2rem;
				cursor: pointer;
				transition: background-color 0.3s ease;
				z-index: 2;
			  }
			
			  .more-events article summary:hover {
				background-color: #EDAC36;
				color: #3d1f00;
			  }
			
			  .more-events article details[open] summary {
				color: #FFF1D1;
				background-color: transparent;
				border-color: #FFF1D1;
				align-self: flex-end;
				margin-bottom: 0.5rem;
			  }
			
			  .more-events form {
				display: flex;
				flex-direction: column;
				gap: 0.75rem;
				width: 100%;
			  }

			  /* the form for the name and the box */ 
			  .more-events form div{
				display: flex;
				flex-direction: row;
				align-items: center;
			  }
			
			  /*the description */
			  .more-events form label {
				font-weight: bold;    
				color: #FFF1D1;
				width: 90px;
				text-align: left;
				flex-shrink: 0;
				line-height: 1.2rem;
			  }
			
			  .more-events form input {
				flex: 1;    
				padding: 0.5rem;
				border-radius: 6px;
				border: 2px solid #EDAC36;
				font-family: "Rosario", sans-serif;
			  }
			
			  .more-events form button {
				padding: 0.6rem 1.2rem;
				background: #EDAC36;
				color: #3d1f00;
				font-weight: bold;
				border: none;
				border-radius: 8px;
				font-family: 'Limelight', Georgia, serif;
	
				cursor: pointer;
				transition: transform 0.2s ease, background-color 0.3s ease;
			  }
			
			  .more-events form button:hover {
				background-color: #f9c76b;
				transform: scale(1.05);
			  }
			
			
	}


@media (min-width: 1300px) {

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

	/* --footer section --*/
	.footer-content,
	footer nav {
	  max-width: 1200px;
	}
  
	.footer-nav a {
	  font-size: 1.4rem;
	}
  
	footer {
	  padding: 3rem 4rem;
	}
  
	

    /* ---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 --- */
      .home-page 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;
    }

    
}