/* General Page Styling */
body {
  margin: 0;
  padding: 0;
  background-color: #f1ecf6; /* Matching the light lilac background from your screenshot */
  font-family: 'Georgia', serif; /* Matching the elegant serif style of the quotes */
  color: #333;
}

/* Header and Navigation Styling */
header.main-header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 1rem 2rem;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.logo-container {
  display: flex;
  align-items: center;
}

.header-logo {
  height: 55px;
  width: auto;
  display: block;
}

.main-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  margin: 0 auto;
  padding: 0;
  background: none;
}

.main-nav a {
  margin: 0;
  text-decoration: none;
  color: #333;
  font-weight: bold;
}

.main-nav a.active {
  border-bottom: 2px solid #d4af37;
}

/* Layout Wrapper */
.guitar-showcase-container {
  max-width: 1200px;
  margin: 40px auto;
  padding: 20px;
}

/* 3-Column Layout Grid */
.showcase-layout {
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr; /* Image gets the widest center column */
  gap: 20px;
  align-items: center;
  position: relative;
}

/* Quote Box Styling */
.quote-box {
  background-color: #e5daee; /* Subtle lavender box fill */
  border: 2px solid #a894b9; /* Darker lavender border */
  padding: 20px;
  box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.05); /* Slight shadow effect */
  border-radius: 4px;
}

.quote-box p {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.5;
  color: #4a3b53;
  text-align: left;
}

/* Exact Positioning Placements */
.quote-top-left {
  grid-column: 1;
  align-self: start;
  margin-top: 40px;
}

.quote-bottom-left {
  grid-column: 1;
  align-self: end;
  margin-bottom: 40px;
}

.guitar-image-wrapper {
  grid-column: 2;
  text-align: center;
}

.guitar-image-wrapper img {
  max-width: 100%;
  height: auto;
  max-height: 75vh; /* Prevents the guitar from scaling too tall */
  object-fit: contain;
}

.quote-mid-right {
  grid-column: 3;
  align-self: center;
}

/* Responsive fixes for mobile devices */
@media (max-width: 768px) {
  .showcase-layout {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "quote-top-left quote-mid-right"
      "guitar guitar"
      "quote-bottom-left quote-bottom-right";
    gap: 15px;
  }
  .quote-top-left {
    grid-area: quote-top-left;
    margin: 0;
  }
  .quote-mid-right {
    grid-area: quote-mid-right;
    margin: 0;
  }
  .quote-bottom-left {
    grid-area: quote-bottom-left;
    margin: 0;
  }
  .quote-bottom-right {
    grid-area: quote-bottom-right;
    margin: 0;
  }
  .guitar-image-wrapper {
    grid-area: guitar;
    margin: 0;
  }
  /* Shrink the massive logo down to a normal size */
  .nav-logo img {
    height: 50px !important; /* Forces the height to a clean navbar size */
    width: auto !important;   /* Automatically adjusts width to prevent stretching */
    max-height: 50px;
    display: block;
  }
}