/* 
 * Finest At Sea - SVG Wave Separators
 * This file contains standardized wave separators for section divisions
 */

.wave-container {
  width: 100%;
  height: 100px; /* Example height */
  position: relative; /* Needed if content inside uses absolute positioning */
  overflow: hidden; /* Good practice with clip-path */
}

.wave-content {
  margin-left: -10%;
  width: 120%;
  height: 300%;
  background: var(--dark-teal); /* Example background */
  color: white;
  padding: 0px;
  box-sizing: border-box; /* Include padding in height/width */
}

/* Example styling for content inside */
.wave-content h2,
.wave-content p {
  padding: 10rem;
  text-align: center;
  color: white;
  font-family: "Playfair Display", "Georgia", serif;
}

/* Old code */

/* Create a container for the wave separator */
.wave-separator {
  position: relative;
  width: 100%;
  height: 100px; /* Adjust height as needed */
  overflow: hidden;
}

/* Top wave (for bottom of sections) */
.wave-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
}

/* Bottom wave (for top of sections) */
.wave-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  transform: rotate(180deg);
}

/* 
 * Standardized wave separators with clear color transitions
 * Usage: Add the appropriate classes to your wave-separator div:
 * - wave-separator-dark-to-light: Transitions from dark teal to white
 * - wave-separator-light-to-dark: Transitions from white to dark teal
 * - wave-separator-medium-to-light: Transitions from medium teal to white
 * - wave-separator-light-to-medium: Transitions from white to medium teal
 * etc.
 */

/* Dark teal to white transition */
.wave-separator-dark-to-white .wave-fill {
  fill: var(--dark-teal);
}

/* White to dark teal transition */
.wave-separator-white-to-dark .wave-fill {
  fill: #ffffff;
}

/* Medium teal to white transition */
.wave-separator-medium-to-white .wave-fill {
  fill: var(--medium-teal);
}

/* White to medium teal transition */
.wave-separator-white-to-medium .wave-fill {
  fill: #ffffff;
}

/* Bright teal to white transition */
.wave-separator-bright-to-white .wave-fill {
  fill: var(--bright-teal);
}

/* White to bright teal transition */
.wave-separator-white-to-bright .wave-fill {
  fill: #ffffff;
}

/* Pale teal to white transition */
.wave-separator-pale-to-white .wave-fill {
  fill: var(--pale-teal);
}

/* White to pale teal transition */
.wave-separator-white-to-pale .wave-fill {
  fill: #ffffff;
}

/* Sand to white transition */
.wave-separator-sand-to-white .wave-fill {
  fill: var(--sand);
}

/* White to sand transition */
.wave-separator-white-to-sand .wave-fill {
  fill: #ffffff;
}

/* Wood to white transition */
.wave-separator-wood-to-white .wave-fill {
  fill: var(--wood);
}

/* White to wood transition */
.wave-separator-white-to-wood .wave-fill {
  fill: #ffffff;
}

/* Dark teal to pale teal transition */
.wave-separator-dark-to-pale .wave-fill {
  fill: var(--dark-teal);
}

/* Pale teal to dark teal transition */
.wave-separator-pale-to-dark .wave-fill {
  fill: var(--pale-teal);
}

/* Medium teal to pale teal transition */
.wave-separator-medium-to-pale .wave-fill {
  fill: var(--medium-teal);
}

/* Pale teal to medium teal transition */
.wave-separator-pale-to-medium .wave-fill {
  fill: var(--pale-teal);
}

/* Dark teal to sand transition */
.wave-separator-dark-to-sand .wave-fill {
  fill: var(--dark-teal);
}

/* Sand to dark teal transition */
.wave-separator-sand-to-dark .wave-fill {
  fill: var(--sand);
}

/* Medium teal to sand transition */
.wave-separator-medium-to-sand .wave-fill {
  fill: var(--medium-teal);
}

/* Sand to medium teal transition */
.wave-separator-sand-to-medium .wave-fill {
  fill: var(--sand);
}

/* Responsive adjustments for waves */
@media screen and (max-width: 768px) {
  .wave-separator {
    height: 70px;
  }
}

@media screen and (max-width: 576px) {
  .wave-separator {
    height: 50px;
  }
}