/* =========================================================
   Golf-rand voor Avada-containers
   ---------------------------------------------------------
   Gebruik: zet class "wave" (golf onderaan) of "wave-top"
   (golf bovenaan) op een Fusion Builder container.
   De golf pakt automatisch de achtergrond van die container
   over, dankzij background:inherit.
   ========================================================= */

:root {
	/* Je eigen SVG — absoluut pad, want een relatief pad breekt
	   zodra deze CSS in Avada > Theme Options > Custom CSS staat. */
	--wave-url: url('/wp-content/themes/Avada-Child-Theme/images/titlebar/wave.svg');

	/* Ingebouwde reserve-golf, geen bestand nodig. Wil je die gebruiken:
	   haal de regel hierboven weg en zet deze aan.
	--wave-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 128'%3E%3Cpath d='M0,64 C240,10 480,10 720,64 S1200,118 1440,64 V0 H0 Z' fill='black'/%3E%3C/svg%3E");
	*/

	--wave-height: 128px;
}

/* de container zelf: golf mag buiten de doos vallen en moet
   over de vólgende sectie heen liggen */
#wrapper .fusion-fullwidth.wave, #wrapper .fusion-fullwidth.wave-top {position:relative; z-index:1; overflow:visible;}

/* de golf */
#wrapper .fusion-fullwidth.wave::after, #wrapper .fusion-fullwidth.wave-top::before {content:''; position:absolute; left:0; width:100%; height:var(--wave-height); z-index:1; pointer-events:none; background:inherit; -webkit-mask-image:var(--wave-url); -webkit-mask-repeat:repeat-x; -webkit-mask-position:top left; -webkit-mask-size:auto 100%; mask-image:var(--wave-url); mask-repeat:repeat-x; mask-position:top left; mask-size:auto 100%;}

#wrapper .fusion-fullwidth.wave::after {top:calc(100% - 4px);}
#wrapper .fusion-fullwidth.wave-top::before {bottom:calc(100% - 4px); transform:scaleY(-1);}

/* mobiel: lagere golf, anders vreet hij de halve sectie op */
@media (max-width:640px) {
	#wrapper .fusion-fullwidth.wave, #wrapper .fusion-fullwidth.wave-top {--wave-height:64px;}
}


/* ---------------------------------------------------------
   Losse aanpassingen die je per sectie kunt maken
   ---------------------------------------------------------

   Andere golfhoogte voor één sectie:
   #wrapper .mijn-sectie.wave {--wave-height:180px;}

   Andere golfvorm voor één sectie:
   #wrapper .mijn-sectie.wave {--wave-url:url('/pad/naar/andere-golf.svg');}

   Kleur handmatig overschrijven (als background:inherit niet
   het juiste oppakt, bijvoorbeeld bij een achtergrondafbeelding):
   #wrapper .mijn-sectie.wave::after {background:#FAF7F2;}

   Haarlijntje aan de zijranden? Dan iets laten overhangen:
   #wrapper .fusion-fullwidth.wave::after {left:-8px; width:calc(100% + 16px);}
   ... maar zet er dan wel dit bij, anders krijg je een
   horizontale scrollbar:
   #wrapper {overflow-x:hidden;}
   --------------------------------------------------------- */