/*
Theme Name: D-Marche
Theme URI: 
Author: Team Tangible
Author URI: 
Description: 
Requires at least: 7.1
Tested up to: 7.1
Requires PHP: 5.7
Version: 0.0.1293
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: twentytwentyfive
Text Domain: d-marche
Tags: 
*/

/* =====================================================================
   Wave Field + Wave Separator — two Figma components, three Group block
   styles (a block can only have one style, so the combination is its own):
     is-style-wave-field            → hills only          (::before)
     is-style-wave-separator        → white curve only    (::after)
     is-style-wave-field-separator  → both
   Confetti + Gradient Rings are added with the class .dm-confetti.
   All positions/sizes come from the Figma hero frame (1920 × 450).
   ===================================================================== */

:root {
	/* Wave Separator (Figma, 1920×73). Drawn as a mask, so its colour comes from CSS. */
	--dm-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 73' preserveAspectRatio='none'%3E%3Cpath d='M0 32.9314C200 72.9314 520 72.9314 860 26.2648C1160 -13.7352 1520 -7.06858 1920 39.5981V72.9314H0V32.9314Z'/%3E%3C/svg%3E");
}

/* Shared: positioning context, content above decorations, no sideways scroll */
.is-style-wave-field,
.is-style-wave-separator,
.is-style-wave-field-separator {
	position: relative;
	overflow: hidden;
}
.is-style-wave-field > *,
.is-style-wave-separator > *,
.is-style-wave-field-separator > * {
	position: relative;
	z-index: 1;
}

/* ----- Wave Field: the Figma component as one image (1920 × 640), its
         background rects removed (the Group's "Abyssal Tint" gradient draws
         them). Full width, natural proportions, anchored to the bottom, so
         the pattern looks exactly like the component; anything taller than
         the block is cropped at the top. ----- */
.is-style-wave-field,
.is-style-wave-field-separator {
	--dm-hills: url("assets/images/wave-field.svg") center bottom / 100% auto no-repeat;
}
.is-style-wave-field::before,
.is-style-wave-field-separator::before {
	content: "";
	position: absolute;
	inset: 0;
	bottom: -5vh;
	background: var(--dm-hills);
	pointer-events: none;
	z-index: 0;
}

/* ----- Confetti (class .dm-confetti): Gradient Rings, dot, triangle (right) and
         plus, square, dot grid (left). Drawn above the hills in the same
         layer. Sized and placed in vw so they match Figma at 1920px and
         scale with the screen. ----- */
.dm-confetti {
	--dm-confetti:
		url("assets/images/confetti-left.svg") left 4.427vw top 3.75vw / 5vw auto no-repeat,          /* x85 y72, 96 wide */
		url("assets/images/confetti-right.svg") right 4.844vw top 1.458vw / 31.823vw auto no-repeat;  /* x1216–1827 y28, 611 wide */
}
.dm-confetti::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--dm-confetti), var(--dm-hills, none);
	pointer-events: none;
	z-index: 0;
}

/* ----- Wave Separator: white curve along the bottom edge ----- */
.is-style-wave-separator::after,
.is-style-wave-field-separator::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: max(32px, 3.802vw); /* 73px at 1920px (73 / 1920), keeps scaling on larger screens */
	background: var(--wp--preset--color--base); /* colour of the section below */
	-webkit-mask: var(--dm-wave) bottom / 100% 100% no-repeat;
	mask: var(--dm-wave) bottom / 100% 100% no-repeat;
	pointer-events: none;
	z-index: 2;
}

/* ----- Phones: enlarge the hills (edges are clipped) and hide the
         decorations, which would crowd the text.
         Starting values — compare with Figma's mobile hero and adjust. ----- */
@media (max-width: 781px) {
	/* Phones: fill the block height instead (sides are cropped) so the
	   hills don't shrink to a thin strip; hide the decorations. */
	.is-style-wave-field,
	.is-style-wave-field-separator {
		--dm-hills: url("assets/images/wave-field.svg") center bottom / cover no-repeat;
	}
	.dm-confetti {
		--dm-confetti: none;
	}
}