/*
 * 10 — Texture system (Process Book 2.6). Three layers, no image assets, no gradients.
 *   1. Global grain: feTurbulence noise as a fixed overlay.
 *   2. Section bands: the "Band" group style (paper-deep).
 *   3. Halftone: the "Halftone" group style. An SVG dot pattern used as a mask, so the dots take
 *      the `line` token colour. (The book suggests radial-gradient; CLAUDE.md bans every gradient.)
 *      Max two per page.
 * The page must work with all of it removed.
 */

/* 1. Grain */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 99999;
	pointer-events: none;
	opacity: var(--wp--custom--texture--grain-opacity);
	mix-blend-mode: multiply;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	background-repeat: repeat;
}

@media print, (forced-colors: active) {
	body::after {
		display: none;
	}
}

/* 2. Section band */
.is-style-band {
	background-color: var(--wp--preset--color--paper-deep);
	padding-top: var(--wp--custom--section);
	padding-bottom: var(--wp--custom--section);
}

/* 3. Halftone accent: dots sit behind the content. */
.is-style-halftone {
	position: relative;
	isolation: isolate;
}

.is-style-halftone::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-color: var(--wp--preset--color--line);
	opacity: var(--wp--custom--texture--halftone-opacity);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Ccircle cx='5' cy='5' r='1.6'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Ccircle cx='5' cy='5' r='1.6'/%3E%3C/svg%3E");
	-webkit-mask-size: var(--wp--custom--texture--halftone-size);
	mask-size: var(--wp--custom--texture--halftone-size);
}

@media (forced-colors: active) {
	.is-style-halftone::before {
		display: none;
	}
}