/**
 * Footer - Water-Themed Design
 * =============================
 * Complete footer styling with animated water effects
 * Features flowing waves, ripples, and light caustics
 */

/* ====================
   FOOTER BASE
   ==================== */

.site-footer {
  /* Light mode: Lighter gradient that blends with wave bottom */
  background: linear-gradient(180deg,
    rgb(79 195 247 / 0%) 0%,
    rgb(41 128 185 / 15%) 15%,
    rgba(25, 90, 130, 0.25) 50%,
    rgba(20, 70, 100, 0.45) 75%,
    rgba(13, 59, 102, 0.65) 100%) !important;
  color: var(--water-900) !important;
  position: relative;
  overflow: visible;
  padding-top: 3rem !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  font-size: 0.95rem;
  line-height: 1.8;
}
.footer-html {
    margin: 1.6em 0 0em 0;
}
/* Dark mode: Darker gradient for depth */
body.dark-mode .site-footer {
  background: linear-gradient(180deg,
    rgba(5, 15, 30, 0) 0%,
    rgba(5, 15, 30, 0.15) 15%,
    rgba(0, 60, 95, 0.18) 50%,
    rgba(10, 30, 45, 0.92) 75%,
    rgba(5, 15, 30, 1) 100%) !important;
}

body.dark-mode .site-bottom-footer-wrap {
  background: transparent !important;
  border-top: none !important;
}

.site-footer .footer-widget-area {
  margin-bottom: 0.5rem;
}

/* ====================
   WAVE DIVIDERS
   ==================== */

/* Primary animated wave divider - deeper waves */
.site-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  /* Light mode: Gradient fades to near-transparency at bottom for seamless blend */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='waveGrad' x1='0%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:rgba(79, 195, 247, 0.20);stop-opacity:1' /%3E%3Cstop offset='35%25' style='stop-color:rgba(41, 128, 185, 0.16);stop-opacity:1' /%3E%3Cstop offset='65%25' style='stop-color:rgba(25, 90, 130, 0.12);stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:rgba(79, 195, 247, 0.06);stop-opacity:1' /%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23waveGrad)' d='M0,35 C180,15 280,75 480,45 C620,25 740,80 920,50 C1100,20 1260,70 1440,40 L1440,120 L0,120 Z'%3E%3Canimate attributeName='d' dur='9s' repeatCount='indefinite' values='M0,35 C180,15 280,75 480,45 C620,25 740,80 920,50 C1100,20 1260,70 1440,40 L1440,120 L0,120 Z; M0,45 C180,70 280,20 480,60 C620,80 740,15 920,55 C1100,75 1260,25 1440,50 L1440,120 L0,120 Z; M0,30 C180,55 280,30 480,40 C620,60 740,35 920,45 C1100,30 1260,55 1440,35 L1440,120 L0,120 Z; M0,40 C180,25 280,65 480,50 C620,35 740,75 920,48 C1100,28 1260,68 1440,45 L1440,120 L0,120 Z; M0,35 C180,15 280,75 480,45 C620,25 740,80 920,50 C1100,20 1260,70 1440,40 L1440,120 L0,120 Z' /%3E%3C/path%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 0;
  opacity: 0.85;
}

/* Dark mode primary wave with depth */
body.dark-mode .site-footer::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='waveGrad' x1='0%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:rgba(60, 150, 200, 0.1);stop-opacity:1' /%3E%3Cstop offset='40%25' style='stop-color:rgba(41, 128, 185, 0.14);stop-opacity:1' /%3E%3Cstop offset='70%25' style='stop-color:rgba(25, 90, 130, 0.18);stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:rgba(5, 15, 30, 0.12);stop-opacity:1' /%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23waveGrad)' d='M0,35 C180,15 280,75 480,45 C620,25 740,80 920,50 C1100,20 1260,70 1440,40 L1440,120 L0,120 Z'%3E%3Canimate attributeName='d' dur='9s' repeatCount='indefinite' values='M0,35 C180,15 280,75 480,45 C620,25 740,80 920,50 C1100,20 1260,70 1440,40 L1440,120 L0,120 Z; M0,45 C180,70 280,20 480,60 C620,80 740,15 920,55 C1100,75 1260,25 1440,50 L1440,120 L0,120 Z; M0,30 C180,55 280,30 480,40 C620,60 740,35 920,45 C1100,30 1260,55 1440,35 L1440,120 L0,120 Z; M0,40 C180,25 280,65 480,50 C620,35 740,75 920,48 C1100,28 1260,68 1440,45 L1440,120 L0,120 Z; M0,35 C180,15 280,75 480,45 C620,25 740,80 920,50 C1100,20 1260,70 1440,40 L1440,120 L0,120 Z' /%3E%3C/path%3E%3C/svg%3E");
}

/* Secondary wave layer - surface ripples with foam */
.site-footer::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 90px;
  /* Light mode: Brighter foam that fades to transparency */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='foamGrad' x1='0%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:rgba(200, 230, 245, 0.25);stop-opacity:1' /%3E%3Cstop offset='30%25' style='stop-color:rgba(79, 195, 247, 0.18);stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:rgba(79, 195, 247, 0);stop-opacity:0' /%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23foamGrad)' d='M0,25 C120,12 200,45 360,30 C500,18 640,50 800,35 C960,22 1120,48 1280,32 C1360,25 1400,35 1440,28 L1440,100 L0,100 Z'%3E%3Canimate attributeName='d' dur='6s' repeatCount='indefinite' values='M0,25 C120,12 200,45 360,30 C500,18 640,50 800,35 C960,22 1120,48 1280,32 C1360,25 1400,35 1440,28 L1440,100 L0,100 Z; M0,32 C120,48 200,18 360,38 C500,52 640,20 800,42 C960,55 1120,25 1280,40 C1360,48 1400,28 1440,35 L1440,100 L0,100 Z; M0,28 C120,38 200,25 360,33 C500,42 640,28 800,38 C960,45 1120,30 1280,36 C1360,40 1400,32 1440,30 L1440,100 L0,100 Z; M0,30 C120,20 200,42 360,32 C500,25 640,45 800,36 C960,28 1120,44 1280,34 C1360,30 1400,36 1440,32 L1440,100 L0,100 Z; M0,25 C120,12 200,45 360,30 C500,18 640,50 800,35 C960,22 1120,48 1280,32 C1360,25 1400,35 1440,28 L1440,100 L0,100 Z' /%3E%3C/path%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 1;
  opacity: 0.5;
}

/* Dark mode secondary wave with foam */
body.dark-mode .site-footer::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='foamGrad' x1='0%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:rgba(150, 180, 200, 0.12);stop-opacity:1' /%3E%3Cstop offset='30%25' style='stop-color:rgba(60, 150, 200, 0.15);stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:rgba(41, 128, 185, 0);stop-opacity:0' /%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23foamGrad)' d='M0,25 C120,12 200,45 360,30 C500,18 640,50 800,35 C960,22 1120,48 1280,32 C1360,25 1400,35 1440,28 L1440,100 L0,100 Z'%3E%3Canimate attributeName='d' dur='6s' repeatCount='indefinite' values='M0,25 C120,12 200,45 360,30 C500,18 640,50 800,35 C960,22 1120,48 1280,32 C1360,25 1400,35 1440,28 L1440,100 L0,100 Z; M0,32 C120,48 200,18 360,38 C500,52 640,20 800,42 C960,55 1120,25 1280,40 C1360,48 1400,28 1440,35 L1440,100 L0,100 Z; M0,28 C120,38 200,25 360,33 C500,42 640,28 800,38 C960,45 1120,30 1280,36 C1360,40 1400,32 1440,30 L1440,100 L0,100 Z; M0,30 C120,20 200,42 360,32 C500,25 640,45 800,36 C960,28 1120,44 1280,34 C1360,30 1400,36 1440,32 L1440,100 L0,100 Z; M0,25 C120,12 200,45 360,30 C500,18 640,50 800,35 C960,22 1120,48 1280,32 C1360,25 1400,35 1440,28 L1440,100 L0,100 Z' /%3E%3C/path%3E%3C/svg%3E");
}

/* ====================
   WATER RIPPLE EFFECTS
   ==================== */

/* Deep water ripples with organic variation - Layer 1 */
.site-footer .site-footer-wrap::before,
.site-footer .site-bottom-footer-wrap::before {
  content: '';
  position: absolute;
  top: -5%;
  left: -5%;
  width: 110%;
  height: 110%;
  background:
    /* Large deep ripples */
    radial-gradient(ellipse 250px 180px at 18% 12%, rgba(41, 128, 185, 0.16) 0%, rgba(25, 90, 130, 0.1) 20%, transparent 45%),
    radial-gradient(ellipse 280px 200px at 72% 28%, rgba(30, 110, 150, 0.15) 0%, rgba(41, 128, 185, 0.09) 22%, transparent 48%),
    /* Medium ripples - mid depth */
    radial-gradient(ellipse 180px 140px at 42% 58%, rgba(50, 140, 180, 0.14) 0%, rgba(30, 110, 150, 0.08) 18%, transparent 40%),
    radial-gradient(ellipse 160px 130px at 88% 75%, rgba(41, 128, 185, 0.12) 0%, rgba(25, 90, 130, 0.07) 16%, transparent 38%),
    /* Smaller scattered ripples */
    radial-gradient(ellipse 120px 100px at 25% 48%, rgba(30, 110, 150, 0.11) 0%, rgba(41, 128, 185, 0.06) 15%, transparent 35%),
    radial-gradient(ellipse 140px 110px at 60% 82%, rgba(50, 140, 180, 0.1) 0%, rgba(30, 110, 150, 0.05) 14%, transparent 32%),
    radial-gradient(ellipse 100px 85px at 8% 70%, rgba(41, 128, 185, 0.09) 0%, rgba(25, 90, 130, 0.04) 12%, transparent 28%);
  animation: footer-ripple 20s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
  will-change: transform, opacity;
  opacity: 0.75;
}

/* ====================
   LIGHT CAUSTICS
   ==================== */

/* Enhanced flowing light caustics with depth shafts - Layer 2 */
.site-footer .site-footer-wrap::after,
.site-footer .site-bottom-footer-wrap::after {
  content: '';
  position: absolute;
  top: -5%;
  left: -5%;
  width: 110%;
  height: 110%;
  background:
    /* Light mode: More visible caustics for better effect */
    /* Bright surface caustics - larger patches */
    radial-gradient(ellipse 120px 180px at 15% 10%, rgba(150, 200, 230, 0.22) 0%, rgba(79, 195, 247, 0.14) 15%, transparent 35%),
    radial-gradient(ellipse 140px 200px at 55% 18%, rgba(160, 210, 235, 0.20) 0%, rgba(60, 150, 200, 0.13) 18%, transparent 40%),
    radial-gradient(ellipse 100px 160px at 85% 15%, rgba(150, 200, 230, 0.19) 0%, rgba(79, 195, 247, 0.12) 12%, transparent 32%),
    /* Mid-water dancing lights */
    radial-gradient(circle at 30% 45%, rgba(130, 185, 220, 0.17) 0%, rgba(50, 140, 180, 0.10) 10%, transparent 25%),
    radial-gradient(circle at 70% 55%, rgba(140, 195, 225, 0.16) 0%, rgba(60, 150, 200, 0.09) 12%, transparent 28%),
    radial-gradient(circle at 45% 70%, rgba(130, 185, 220, 0.14) 0%, rgba(79, 195, 247, 0.07) 8%, transparent 20%),
    /* Deeper subtle glows */
    radial-gradient(ellipse 80px 120px at 25% 80%, rgba(60, 150, 200, 0.13) 0%, rgba(41, 128, 185, 0.06) 20%, transparent 35%),
    radial-gradient(ellipse 90px 140px at 75% 85%, rgba(79, 195, 247, 0.12) 0%, rgba(50, 140, 180, 0.05) 18%, transparent 30%);
  animation: footer-caustics 25s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
  will-change: transform, opacity;
  mix-blend-mode: normal;
}

/* Dark mode: Subtler caustics for depth */
.dark-mode .site-footer .site-footer-wrap::after,
.dark-mode .site-footer .site-bottom-footer-wrap::after {
  background:
    /* Bright surface caustics - larger patches */
    radial-gradient(ellipse 120px 180px at 15% 10%, rgba(150, 200, 230, 0.14) 0%, rgba(79, 195, 247, 0.09) 15%, transparent 35%),
    radial-gradient(ellipse 140px 200px at 55% 18%, rgba(160, 210, 235, 0.12) 0%, rgba(60, 150, 200, 0.08) 18%, transparent 40%),
    radial-gradient(ellipse 100px 160px at 85% 15%, rgba(150, 200, 230, 0.13) 0%, rgba(79, 195, 247, 0.08) 12%, transparent 32%),
    /* Mid-water dancing lights */
    radial-gradient(circle at 30% 45%, rgba(130, 185, 220, 0.11) 0%, rgba(50, 140, 180, 0.06) 10%, transparent 25%),
    radial-gradient(circle at 70% 55%, rgba(140, 195, 225, 0.1) 0%, rgba(60, 150, 200, 0.05) 12%, transparent 28%),
    radial-gradient(circle at 45% 70%, rgba(130, 185, 220, 0.09) 0%, rgba(79, 195, 247, 0.04) 8%, transparent 20%),
    /* Deeper subtle glows */
    radial-gradient(ellipse 80px 120px at 25% 80%, rgba(60, 150, 200, 0.08) 0%, rgba(41, 128, 185, 0.03) 20%, transparent 35%),
    radial-gradient(ellipse 90px 140px at 75% 85%, rgba(79, 195, 247, 0.07) 0%, rgba(50, 140, 180, 0.02) 18%, transparent 30%);
}

/* ====================
   CONTENT LAYERING
   ==================== */

.site-footer .site-footer-wrap,
.site-footer .site-top-footer-wrap,
.site-footer .site-middle-footer-wrap,
.site-footer .site-bottom-footer-wrap,
.site-footer-inner-wrap {
  position: relative;
  z-index: 2;
}

.site-bottom-footer-inner-wrap {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* ====================
   FOOTER LINKS
   ==================== */

.site-footer a {
  color: var(--water-200) !important;
  text-decoration: none;
  transition: all var(--transition-base);
  position: relative;
  display: inline-block;
}

.site-footer a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(79, 195, 247, 0.8) 0%,
    rgba(0, 212, 228, 0.8) 100%);
  transition: width var(--transition-base);
}

.site-footer a:hover {
  color: var(--water-100) !important;
  text-shadow: 0 0 12px rgba(79, 195, 247, 0.4);
  transform: translateX(3px);
}

.site-footer a:hover::after {
  width: 100%;
}

/* ====================
   FOOTER HEADINGS
   ==================== */

.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer h5,
.site-footer h6,
.site-footer .widget-title {
  margin: 0.5rem 0 !important;
  color: var(--water-800) !important;
  font-weight: 600;
  position: relative;
  padding-bottom: 0.5rem;
}

.site-footer .widget-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg,
    rgba(79, 195, 247, 0.8) 0%,
    rgba(0, 212, 228, 0.4) 100%);
}

/* ====================
   FOOTER WIDGETS
   ==================== */

.site-footer .footer-widget-area {
  margin-bottom: 0.5rem;
}

.site-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-footer li {
  margin-bottom: 0.75rem;
  padding-left: 1.25rem;
  position: relative;
}

.site-footer li::before {
  content: '💧';
  position: absolute;
  left: 0;
  opacity: 0.6;
  font-size: 0.9rem;
}

/* ====================
   FOOTER BOTTOM BAR
   ==================== */

/* Transparent to show animated waves beneath */
.site-bottom-footer-wrap {
  background: transparent !important;
  border-top: none !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ====================
   SOCIAL ICONS
   ==================== */

.site-footer .social-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(79, 195, 247, 0.1);
  border: 1px solid rgba(79, 195, 247, 0.3);
  margin: 0 0.5rem;
  transition: all var(--transition-base);
}

.site-footer .social-icons a:hover {
  background: rgba(79, 195, 247, 0.2);
  border-color: rgba(79, 195, 247, 0.6);
  transform: translateY(-3px) scale(1.1);
  box-shadow: 0 4px 12px rgba(79, 195, 247, 0.3);
}

/* ====================
   ANIMATIONS
   ==================== */

@keyframes footer-ripple {
  0% {
    transform: scale(1) translateX(0);
    opacity: 0.9;
  }
  20% {
    transform: scale(1.025) translateX(3px);
    opacity: 0.85;
  }
  40% {
    transform: scale(0.98) translateX(-2px);
    opacity: 0.92;
  }
  60% {
    transform: scale(1.015) translateX(2px);
    opacity: 0.88;
  }
  80% {
    transform: scale(0.985) translateX(-3px);
    opacity: 0.9;
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 0.9;
  }
}

@keyframes footer-caustics {
  0% {
    transform: scale(1) translateY(0);
    opacity: 0.8;
  }
  18% {
    transform: scale(1.02) translateY(-4px);
    opacity: 0.75;
  }
  35% {
    transform: scale(0.98) translateY(2px);
    opacity: 0.85;
  }
  52% {
    transform: scale(1.015) translateY(-3px);
    opacity: 0.78;
  }
  68% {
    transform: scale(0.985) translateY(3px);
    opacity: 0.82;
  }
  85% {
    transform: scale(1.01) translateY(-2px);
    opacity: 0.8;
  }
  100% {
    transform: scale(1) translateY(0);
    opacity: 0.8;
  }
}