/* ============================================
   ALTERNATING SECTION BACKGROUNDS
   Creates visual separation between sections
   ============================================ */

/* Story Section - Cream (default) */
.story-section {
  background-color: var(--cream) !important;
}

/* Services Section - White */
.services {
  background-color: #ffffff !important;
}

/* Trust Section - Light Cream */
.trust-section {
  background: linear-gradient(135deg, #faf8f5 0%, #ffffff 100%) !important;
  border-top: 1px solid rgba(26, 26, 26, 0.05);
  border-bottom: 1px solid rgba(26, 26, 26, 0.05);
}

/* Team Section - Cream */
.team {
  background-color: var(--cream) !important;
}

/* Instagram Feed Section - White */
.instagram-feed {
  background-color: #ffffff !important;
  padding: 80px 0;
}

/* Reviews Section (inside Instagram) - Light Gray Tint */
.reviews-section {
  background-color: #f9f7f4 !important;
  padding: 60px 0;
  margin-top: 60px;
  border-radius: 8px;
}

/* FAQ Section - Cream */
.faq-section {
  background-color: var(--cream) !important;
  padding: 80px 0;
}

/* FAQ Items - White cards on Cream background */
.faq-item {
  background: white !important;
  margin-bottom: 20px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(26, 26, 26, 0.1);
}

.faq-question {
  background: white !important;
}

.faq-question:hover {
  background-color: var(--cream) !important;
}

.faq-answer {
  background: white !important;
}

/* Contact Section - White */
.contact {
  background-color: #ffffff !important;
  padding: 80px 0;
}

/* Service Area Section - Charcoal (dark contrast) */
.service-area {
  background: var(--charcoal) !important;
  color: white;
  padding: 60px 0;
  text-align: center;
}

/* Footer - Dark with subtle gradient */
.site-footer {
  background: linear-gradient(180deg, #1a1a1a 0%, #0d0d0d 100%) !important;
  color: white;
  padding: 40px 0;
  border-top: 2px solid var(--gold);
}

/* ============================================
   SECTION BORDERS & TRANSITIONS
   ============================================ */

/* Add subtle borders between sections */
.story-section,
.services,
.trust-section,
.team,
.instagram-feed,
.faq-section,
.contact {
  position: relative;
  transition: background-color 0.3s ease;
}

/* Smooth section transitions */
.story-section::after,
.services::after,
.team::after,
.instagram-feed::after,
.faq-section::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(26, 26, 26, 0.1) 50%,
    transparent 100%);
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) {
  .trust-section,
  .faq-section,
  .contact,
  .service-area {
    padding: 60px 0;
  }

  .reviews-section {
    padding: 40px 0;
    margin-top: 40px;
  }

  .instagram-feed {
    padding: 60px 0;
  }
}

/* ============================================
   VISUAL HIERARCHY ENHANCEMENTS
   ============================================ */

/* Cream sections get subtle shadow on scroll */
.story-section,
.team,
.faq-section {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* White sections stay clean */
.services,
.contact,
.instagram-feed {
  background-color: #ffffff;
}

/* Trust badges section gets special gradient */
.trust-section {
  background: linear-gradient(135deg,
    #faf8f5 0%,
    #ffffff 50%,
    #f5f2ed 100%);
}

/* Service area dark section stands out */
.service-area {
  box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.1),
              0 5px 20px rgba(0, 0, 0, 0.1);
}

/* ============================================
   PATTERN OVERLAYS (Optional subtle texture)
   ============================================ */

/* Add very subtle texture to cream sections */
.story-section::before,
.team::before,
.faq-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 10px,
      rgba(255, 255, 255, 0.03) 10px,
      rgba(255, 255, 255, 0.03) 20px
    );
  pointer-events: none;
  opacity: 0.3;
}

/* ============================================
   SECTION TITLE COLORS (Maintain consistency)
   ============================================ */

.section-title {
  color: var(--charcoal);
}

/* Service Area titles in white */
.service-area .service-area__title {
  color: white;
}

/* Footer titles in white */
.site-footer .footer__brand p {
  color: rgba(255, 255, 255, 0.8);
}

/* ============================================
   PRINT STYLES (Remove backgrounds for print)
   ============================================ */

@media print {
  .story-section,
  .services,
  .trust-section,
  .team,
  .instagram-feed,
  .reviews-section,
  .faq-section,
  .contact,
  .service-area,
  .site-footer {
    background: white !important;
    color: black !important;
  }
}