/* Classes Page Intro Section */
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap');

/* Base Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Body Styling */
body {
  font-family: 'Segoe UI', sans-serif;
  background-color: #f7fdfd;
  color: #333;
  line-height: 1.6;
  padding: 1rem;
}

/* Header/banner styles */
header {
  background: #e0f7fa;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}


/* New header container */
.header-container {
	display: flex;
	align-items: center;
	justify-content: flex-start; /* Alighn logo and title to the left */
	background: #ffffff; /* Navigation header white */
	padding: 0.5rem 1rem;
	border-bottom: 2px solid #cfe8f3; /* soft border under header */
}

/* logo */
.logo img {
	width: 140px; /* the logo size */
	height: auto;
}

/* site title (next to logo) */
.site-title {
	margin-left: 1rem;
}

.site-title h1 {
  font-family: 'Bodoni Poster', serif;
  font-size: 2.5rem;
  color: #ff80ab; /* Pastel pink */
}

/* tagline */
.tagline {
  color: #00695c;
  font-style: italic;
}

/* Navigation */
nav {
	width: 100%; /* <-- Make navigation stretch across the page */
	background-color: #ffffff; /* navigation bar white */
	border-bottom: 2px solid #cfef83;
	padding: 0.5rem 0;
	margin-top: 1rem; 
}

nav ul {
  list-style: none;
  display: flex;
  justify-content: center; /* center the nav items */
  align-items: center;
  flex-wrap: wrap;
  gap: 2rem;  /* wide gap between the links */
}

nav li {
	display: inline-block;
}


nav a {
  text-decoration: none;
  color: #79a7d3; /* pastel blue for links */
  font-weight: bold;
  font-size: 1.1rem; /*slightly bigger */
  transition: color 0.3s;
}

nav a:hover {
	color: #4d90c3; /* darker pastel blue when hovering */
}

/* Hero Section */
.hero {
  text-align: center;
  position: relative;
}

.hero img {
  width: 100%;
  height: auto;
  margin-top: 1rem;
}

/* Hero Title */
.hero h2 {
  color: #f8bbd0; /* Pastel pink color */
  font-size: 2.5rem; /* Adjust font size */
  font-family: 'Bodoni Moda', serif; /* Use Bodoni Moda font */
  margin-top: 1rem; /* Add space at the top */
}

/* Main Content */
main {
  max-width: 900px;
  margin: 2rem auto;
  text-align: center;
}

.highlight {
  background-color: #fce4ec;
  padding: 1rem;
  border-radius: 8px;
  margin-top: 2rem;
}

button {
  background-color: #ba68c8;
  color: white;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 5px;
  margin-top: 1rem;
  cursor: pointer;
}

/* Info Boxes Section */
.info-boxes {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; /* adjust boxes to be spaced out */
  gap: 1.5rem; /* reduce gap to fit three boxes comfortable */
  margin-top: 2rem;
}

.box {
  background-color: #ffffff;
  border: 2px solid #90caf9;
  border-radius: 10px;
  padding: 1rem;
  flex: 1 1 30%; /* flexible width with a minimum of 300px */
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
  overflow-y: auto; /* Allows scrolling if content exceeds height */
  font-family: 'Garamond', serif;
}

.box h2 {
  color: #00796b;
  margin-bottom: 1rem;
}

.box ul {
  list-style-type: none;
  padding-left: 0;
}

.box a {
  color: #0288d1;
  text-decoration: none;
}

.box a:hover {
  color: #4d90c3;
}

/* Adjust box one to have a scroll bar when the content overflows */
.box:first-of-type {
  max-height: 750px;
  overflow-y: auto;
}

/* Studio Preview Box */
.studio {
	display: flex;
	align-items: flex-start;
	gap: 15px;
	margin-bottom: 25px;
}

.studio-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.studio-image {
  width: 50%;
  height: auto;
  border-radius: 8px;
}

.studio-text {
  margin-top: 1rem;
  color: #555;
}

.studio-text p {
  font-size: 1rem;
  line-height: 1.4;
}

.studio-text a {
  text-decoration: underline;
  color: #0288d1;
}

.studio-text a:hover {
  color: #4d90c3;
}
 
/* event image */
.event-image {
  width: 100%;
  max-width: 250px;
  height: 150px;
  object-fit: cover;
  margin-top: 0.5rem;
  border-radius: 8px;
  display: block;
}

/* Find Your Rhythm Section */
.find-your-rhythm {
  font-family: 'Didot', serif;
  font-size: 3rem;
  text-align: center;
  color: #79a7d3;
  -webkit-text-stroke: 1px black;
  text-shadow: 1px 1px black;
  margin-top: 2rem;
}

/* Banner */
.banner-container {
  position: relative;
  text-align: center;
  margin-top: 2rem;
}

.banner {
  width: 100%;
  height: 100px; /* adjust this for banner size */
  background-image: url('images/dance-banner.jpg');
  background-size: cover;
  background-position: center;
}

.banner h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
  font-family: 'Bodoni Poster', serif;
  color: #ff80ab; /* Pastel pink */
  text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2);
}

/* Dance banner image */
.dance-banner img {
  width: 100%;  /* Make the image stretch across the container */
  height: auto; /* Maintain the aspect ratio */
  border-radius: 10px;
  display: block;
  margin: 1rem 0;
}

/* Only underlines the specific sentence */
.underline {
  text-decoration: underline;
}

/* Classes page intro section */

.classes-intro {
  text-align: left;
  margin: 30px 20px; /* Adds space from the edges */
}

.classes-title {
  font-family: 'Dancing Script', cursive;
  font-size: 2.5rem;
  color: #333; /* You can change the color if you want */
}

.classes-description {
  font-family: 'Garamond', serif;
  font-size: 1.2rem;
  color: #555;
  margin-top: 10px;
}

/* Classes Page GIF Banner */
.classes-banner {
  position: relative;
  width: 100%;
  height: 300px;
  background-image: url('classesbanner.gif'); /* <-- Banner for classes */
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.banner-text {
  font-family: Impact, Charcoal, sans-serif;
  font-size: 2rem;
  color: white;
  text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.8);
}

.diva-dance-image {
  width: 100%; /* Make it responsive */
  max-width: 120px; /* Controls the maximum width */
  height: auto; /* Maintain aspect ratio */
  border-radius: 10px; /* Smooth rounded corners */
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3); /* Soft shadow */
  display: block;
  margin: 1rem auto; /* Center the image horizontally with spacing */
}

/* Class Entry flex layout */
.class-entry {
  display: flex;
  align-items: flex-start; /* Align top edges of text and image */
  gap: 2rem;
  margin-top: 1.5rem;
  flex-wrap: wrap; /*keeps it responsive to the text area */
  
}

.class-image {
  flex: 2; /* fixed width for image */
  min-width: 250px;
}

.class-image p {
	text-align: left; /*aligns the paragraph text to the left */
	font-size: 1rem;
	line-height: 1.5;
}


.class-media img {
	width: 50%;
	height: auto;
	border-radius: 8px;
	box-shadow: 0 4px 8px rgba(0,0,0,0.1)
}

.class-description {
	flex: 1; /* take up the remaining space */
}

/* Footer */
footer {
  text-align: center;
  margin-top: 3rem;
  font-size: 0.9rem;
  color: #666;
  padding-bottom: 1rem;
}
/*Contact info styling */
footer p a {
	color: #0288d1;
	text-decoration: none;
}

footer p a:hover {
	color: #4d90c3;
}


/* Responsive */
@media (max-width: 768px) {
  .info-boxes {
    flex-direction: column; /* stack boxes vertically on smaller screens */
    align-items: flex-start;
	}
	
.class-entry {
    flex-direction: column;
    align-items: center;
  }

 nav ul {
    flex-direction: column;
    gap: 1rem;
  }

 .site-title h1 {
    font-size: 2rem;
  }

 .banner h1 {
    font-size: 2.2rem;
  }

 .find-your-rhythm {
    font-size: 2rem;
  }
	
.box {
    flex: 1 1 100%; /* Let the boxes take up full width on smaller screens */
    margin: 1rem 0; /* Add vertical spacing between stacked boxes */
 }

.header-container {
	flex-direction: column;
	align-items: center;
	}

.site-title {
	margin-left: 0;
	margin-top: 0.5rem;
	text-align: center;
	}
.logo img {
	width: 90px; /* Even smaller logo on mobile */
}

.local-studios img {
  width: 300px; /* match the Diva Dance image width */
  height: 200px; /* consistent height for all */
  object-fit: cover; /* crops image to fill space without distortion */
  display: block;
  margin-bottom: 10px;
  border-radius: 10px;
  box-shadow: 0 0 8px rgba(0,0,0,0.2);
}
.studio {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20px;
  gap: 0; /* removes the space between image and text */
  padding-left: 0; /* removes any internal padding */
}

.studio-img {
  width: 70px;
  height: auto;
  max-height: 70px;
  object-fit: cover;
  border-radius: 6px;
  margin-right: 10px; /* small controlled spacing between image and text */
}

.studio-description {
  max-width: 500px;
  text-align: center;
}
.left-column {
  margin: 0;
  padding: 0;
  position: relative;
  left: 0;
  width: 100%;
  max-width: none;
  text-align: left;
}
.classes-layout {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 2rem;
  padding: 2rem;
}

.left-content {
  flex: 2;
}

.right-sidebar {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.box {
  background-color: #f3f3f3;
  padding: 1rem;
  border-radius: 8px;
  border: 1px solid #ccc;
}

/* Contact Info for site */
.contact-container {
  display: flex;
  flex-direction: column; /* stack items */
  padding: 2rem;
  gap: 2rem;
  max-width: 800px;
  margin: 0 auto;
}
.contact-form, .contact-info {
  background-color: #fefefe;
  padding: 1.5rem;
  border: 1px solid #ccc;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.contact-map {
  flex: 1 1 350px;
  min-height: 400px;
}

.contact-map iframe {
  width: 100%;
  height: 300px;
  border: none;
  margin-top: 2rem;
}

.contact-form form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.contact-form label {
  font-weight: bold;
}

.contact-form input,
.contact-form textarea {
  padding: 0.75rem;
  font-size: 1rem;
  border: 1px solid #ccc; /* Light blue border */
  border-radius: 8px;
}

.contact-form button {
  padding: 0.75rem;
  background-color: #e91e63;
  color: white;
  border: none;
  font-size: 1rem;
  font-weight: bold;
  border-radius: 8px;
  cursor: pointer;
}

.contact-form button:hover {
  background-color: #d81b60;
}

h2.contact-title, .follow-us {
  font-family: 'Dancing Script', cursive;
  font-size: 2rem;
}

.pink-bar {
		height: 10px;
		background: linear-gradient(to right, #e91e63, #ff4081);
		margin: 1rem 0;
		border-radius: 5px;
}


/* About Boxes */
/* Bio Section - About Me */
.bio-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 2rem;
  align-items: start;
  padding: 2rem;
  background-color: #fff;
  border: 2px solid #ddd;
  border-radius: 12px;
  max-width: 1000px;
  margin: 0 auto;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.bio-image img {
  width: 100%;
  max-width: 200px; /* Makes the image smaller */
  height: auto;
  border-radius: 10px;
  display: block;.
  margin: 0 auto;
}

.bio-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.bio-text p {
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 1rem;
}

@media (max-width: 768px) {
  .bio-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .bio-image img {
    max-width: 80%;
    margin: 0 auto;
  }

  .bio-text {
    margin-top: 1rem;
  }
}


/* EVENTS PAGE STYLES */

/* Flex container for events layout */
.info-boxes {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  padding: 2rem;
  justify-content: space-between;
  align-items: flex-start;
}

/* Event left box ( Dancing oppotunities ) */
.left-box {
	flex: 1 1 45%;
}

/* Right-side column */
.right-side {
  flex: 1 1 45%;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
/* Right Column Aside Styling */
.right-column {
  max-width: 300px;
  margin: 2rem auto;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.right-column .box {
  background-color: #ffffff;
  border: 2px solid #ffccbc;
  border-radius: 10px;
  padding: 1rem;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.05);
  text-align: left;
  font-family: 'Garamond', serif;
}

.right-column h3 {
  color: #d81b60; /* soft pink/red tone */
  margin-bottom: 0.5rem;
}


/* Shared card styles */
.box h3,
.box h2 {
  margin-top: 1rem;
  color: #00796b;
  font-family: 'Garamond', serif;
}
.left-box, .right-side {
    flex: 1 1 100%;
}

/* Event Image */
.event-image {
  display: block;
  margin: 0 auto;
  width: 100%;
  height: auto;
  border-radius: 6px;
}

/* Align image above the title */
.box h2, .box h3 {
	text-align: center;
}
/* Events Grid */
.events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  padding: 20px;
}

/* Each event card */
.event-card {
  background-color: #fff;
  padding: 15px;
  border-radius: 8px;
  border: 1px solid #ccc;
  box-shadow: 2px 2px 6px rgba(0,0,0,0.1);
}

/* Banner Text */
.banner-text {
  text-align: center;
  font-size: 2rem;
  font-weight: bold;
  margin-top: 2rem;
  color: #e91e63;
  text-transform: uppercase;
  border-bottom: 3px solid #e91e63;
  display: inline-block;
  padding-bottom: 0.5rem;
}

/* Event Link */
.event-link {
  display: inline-block;
  margin-top: 0.75rem;
  background-color: #ba68c8;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  text-decoration: none;
  font-weight: bold;
}

.event-link:hover {
  background-color: #9c27b0;
}

/* Responsive */
@media (max-width: 768px) {
  .info-boxes {
    flex-direction: column;
  }

  .events-grid {
    flex-direction: column;
    align-items: center;
  }

  .event-card {
    max-width: 90%;
  }
}

/* three column layout */
.flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  padding: 0 2rem 3rem;
}
/* Flex container for main and aside */
.content-wrapper {
  display: flex;
  flex-direction: column; /* Stacks on mobile first */
  gap: 2rem;
  padding: 1rem;
}

.main-content {
  flex: 2;
}

.right-column {
  flex: 1;
}

/* Responsive layout for wider screens */
@media (min-width: 768px) {
  .content-wrapper {
    flex-direction: row;
    align-items: flex-start;
  }
}
/* Grid layout for main content */
.main-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
  padding: 20px;
}

main, aside {
  background-color: #f0f0f0;
  padding: 10px;
  border-radius: 10px;
}


/* Responsive stacking for small screens */
@media (max-width: 768px) {
  .main-layout {
    grid-template-columns: 1fr;
  }

	aside.right-column {
    margin-top: 20px;
  }
}
/* Upcoming Events Section */
.upcoming-events {
  padding: 2rem;
  background-color: #f7f7f7;
  text-align: center;
}

.section-title {
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 1.5rem;
  color: #333;
  text-transform: uppercase;
  border-bottom: 2px solid #e91e63;
  display: inline-block;
  padding-bottom: 0.5rem;
}

.events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 2rem;
  padding: 20px;
}

/* Event Card Styling */
.event-card {
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.event-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* Event Image */
.event-image {
  width: 100%;
  height: auto;
  border-bottom: 2px solid #ddd;
}

/* Event Title */
.event-title {
  font-size: 1.8rem;
  font-weight: bold;
  margin: 1rem 0;
  color: #333;
}

/* Event Date */
.event-date {
  font-size: 1rem;
  color: #e91e63;
  margin-bottom: 1rem;
}

/* Event Description */
.event-description {
  font-size: 1rem;
  color: #555;
  margin-bottom: 1rem;
}

/* Event Link */
.event-link {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background-color: #ba68c8;
  color: white;
  font-weight: bold;
  border-radius: 6px;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.event-link:hover {
  background-color: #9c27b0;
}