/*
 * Wave Graphics & Decorations
 * Subtle flowing lines inspired by the logo design
 */

/* ===================================
   WAVE DIVIDERS
   Subtle section separators
   ================================= */

.wave-divider {
  position: relative;
  width: 100%;
  height: 60px;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* Teal wave divider */
.wave-divider-teal {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0,30 Q300,10 600,30 T1200,30' fill='none' stroke='%232D7D8E' stroke-width='2' opacity='0.15'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}

/* Gold wave divider */
.wave-divider-gold {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0,35 Q300,15 600,35 T1200,35' fill='none' stroke='%23D4A747' stroke-width='2' opacity='0.2'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}

/* Dual wave divider (teal + gold) */
.wave-divider-dual {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0,25 Q300,5 600,25 T1200,25' fill='none' stroke='%232D7D8E' stroke-width='2' opacity='0.15'/%3E%3Cpath d='M0,35 Q300,15 600,35 T1200,35' fill='none' stroke='%23D4A747' stroke-width='1.5' opacity='0.12'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}

/* Flowing wave divider (more curves) */
.wave-divider-flow {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0,30 C150,10 250,45 400,30 C550,15 650,40 800,30 C950,20 1050,35 1200,30' fill='none' stroke='%232D7D8E' stroke-width='2' opacity='0.15'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}

/* ===================================
   WAVE BACKGROUNDS
   Subtle background accents
   ================================= */

.wave-bg {
  position: relative;
  overflow: hidden;
}

.wave-bg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 0;
}

/* Teal wave background - subtle */
.wave-bg-teal::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800' preserveAspectRatio='none'%3E%3Cpath d='M0,400 Q200,300 400,400 T800,400 Q1000,300 1200,400 L1200,800 L0,800 Z' fill='%232D7D8E' opacity='0.03'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: bottom;
}

/* Gold wave background - very subtle */
.wave-bg-gold::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800' preserveAspectRatio='none'%3E%3Cpath d='M0,500 Q300,400 600,500 T1200,500 L1200,800 L0,800 Z' fill='%23D4A747' opacity='0.04'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: bottom;
}

/* Flowing lines background pattern */
.wave-bg-lines::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 600'%3E%3Cpath d='M0,100 Q300,50 600,100 T1200,100' fill='none' stroke='%232D7D8E' stroke-width='1' opacity='0.05'/%3E%3Cpath d='M0,200 Q300,150 600,200 T1200,200' fill='none' stroke='%232D7D8E' stroke-width='1' opacity='0.04'/%3E%3Cpath d='M0,300 Q300,250 600,300 T1200,300' fill='none' stroke='%23D4A747' stroke-width='1' opacity='0.03'/%3E%3Cpath d='M0,400 Q300,350 600,400 T1200,400' fill='none' stroke='%232D7D8E' stroke-width='1' opacity='0.03'/%3E%3Cpath d='M0,500 Q300,450 600,500 T1200,500' fill='none' stroke='%232D7D8E' stroke-width='1' opacity='0.02'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}

/* Circular wave pattern (logo-inspired) */
.wave-bg-circular::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 800'%3E%3Ccircle cx='400' cy='400' r='300' fill='none' stroke='%232D7D8E' stroke-width='1' opacity='0.04'/%3E%3Cpath d='M 400,100 Q 500,150 550,250 Q 600,350 550,450 Q 500,550 400,600' fill='none' stroke='%23D4A747' stroke-width='1.5' opacity='0.05'/%3E%3Cpath d='M 400,700 Q 300,650 250,550 Q 200,450 250,350 Q 300,250 400,200' fill='none' stroke='%232D7D8E' stroke-width='1.5' opacity='0.05'/%3E%3C/svg%3E");
  background-size: 60%;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.5;
}

/* ===================================
   WAVE ACCENTS
   Decorative elements
   ================================= */

.wave-accent {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 0;
}

.wave-accent-corner {
  position: absolute;
  width: 200px;
  height: 200px;
  opacity: 0.08;
}

.wave-accent-corner.top-right {
  top: 0;
  right: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M200,0 Q150,50 100,0 Q50,50 0,0 L0,50 Q50,100 100,50 Q150,100 200,50 Z' fill='%232D7D8E' opacity='0.5'/%3E%3C/svg%3E");
}

.wave-accent-corner.bottom-left {
  bottom: 0;
  left: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M0,200 Q50,150 100,200 Q150,150 200,200 L200,150 Q150,100 100,150 Q50,100 0,150 Z' fill='%23D4A747' opacity='0.5'/%3E%3C/svg%3E");
}

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

@media (max-width: 767px) {
  .wave-divider {
    height: 40px;
  }

  .wave-accent-corner {
    width: 120px;
    height: 120px;
  }
}

/* ===================================
   ENSURE CONTENT STAYS ON TOP
   ================================= */

.wave-bg > *:not(.wave-accent) {
  position: relative;
  z-index: 1;
}