/*
  MOROCCAN ZELLIGE / MOSAIC BACKGROUND PATTERNS
  Used as subtle decorative backgrounds throughout the homepage
  
  Color palette:
  - Deep Indigo #1B2D4F (brand primary)
  - Terracotta #C65D3B (brand secondary)
  - Saffron Gold #D9A44D (brand gold)
  - Moroccan Flag Green #006233
  - Moroccan Flag Red #C1272D
  - Majorelle Blue #1E4D92
*/

/* --- PATTERN 1: Classic 8-point star (used on parch sections) --- */
.zl-mosaic-light {
  background-color: var(--parch);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none'%3E%3C!-- 8-point star outline --%3E%3Cpolygon points='60,6 68,38 96,30 78,54 102,68 72,68 72,96 54,78 36,96 36,68 6,68 30,54 12,30 40,38' fill='none' stroke='rgba(27,45,79,.055)' stroke-width='1'/%3E%3C!-- Center square --%3E%3Crect x='36' y='36' width='48' height='48' fill='none' stroke='rgba(217,164,77,.04)' stroke-width='.8'/%3E%3C!-- Diamond --%3E%3Cpolygon points='60,24 96,60 60,96 24,60' fill='none' stroke='rgba(198,93,59,.04)' stroke-width='.8'/%3E%3C!-- Corner small stars --%3E%3Ccircle cx='0' cy='0' r='3' fill='rgba(0,98,51,.06)'/%3E%3Ccircle cx='120' cy='0' r='3' fill='rgba(0,98,51,.06)'/%3E%3Ccircle cx='0' cy='120' r='3' fill='rgba(0,98,51,.06)'/%3E%3Ccircle cx='120' cy='120' r='3' fill='rgba(0,98,51,.06)'/%3E%3Ccircle cx='60' cy='60' r='2' fill='rgba(193,39,45,.05)'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 120px 120px;
}

/* --- PATTERN 2: Zellige tile grid (dark bg sections) --- */
.zl-mosaic-dark {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none'%3E%3C!-- 12-point star motif --%3E%3Cpolygon points='40,5 43,18 52,10 49,23 60,20 53,30 65,32 56,40 65,48 53,50 60,60 49,57 52,70 43,62 40,75 37,62 28,70 31,57 20,60 27,50 15,48 24,40 15,32 27,30 20,20 31,23 28,10 37,18' fill='none' stroke='rgba(217,164,77,.08)' stroke-width='.7'/%3E%3C!-- Interlace lines --%3E%3Cline x1='40' y1='5' x2='40' y2='75' stroke='rgba(255,255,255,.03)' stroke-width='.5'/%3E%3Cline x1='5' y1='40' x2='75' y2='40' stroke='rgba(255,255,255,.03)' stroke-width='.5'/%3E%3C!-- Moroccan green accents --%3E%3Ccircle cx='40' cy='40' r='4' fill='rgba(0,98,51,.08)'/%3E%3Ccircle cx='0' cy='0' r='3' fill='rgba(193,39,45,.07)'/%3E%3Ccircle cx='80' cy='80' r='3' fill='rgba(193,39,45,.07)'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 80px 80px;
}

/* --- PATTERN 3: Dense zellige grid for sections --- */
.zl-mosaic-dense {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none'%3E%3C!-- Square tile --%3E%3Crect x='5' y='5' width='50' height='50' stroke='rgba(181,69,27,.07)' stroke-width='.8'/%3E%3C!-- Inner rotated square --%3E%3Crect x='12' y='12' width='36' height='36' stroke='rgba(217,164,77,.07)' stroke-width='.8' transform='rotate(45 30 30)'/%3E%3C!-- Center cross --%3E%3Cline x1='30' y1='5' x2='30' y2='55' stroke='rgba(27,45,79,.05)' stroke-width='.6'/%3E%3Cline x1='5' y1='30' x2='55' y2='30' stroke='rgba(27,45,79,.05)' stroke-width='.6'/%3E%3C!-- Star dots --%3E%3Ccircle cx='30' cy='30' r='2' fill='rgba(0,98,51,.07)'/%3E%3Ccircle cx='5' cy='5' r='1.5' fill='rgba(193,39,45,.07)'/%3E%3Ccircle cx='55' cy='5' r='1.5' fill='rgba(193,39,45,.07)'/%3E%3Ccircle cx='5' cy='55' r='1.5' fill='rgba(193,39,45,.07)'/%3E%3Ccircle cx='55' cy='55' r='1.5' fill='rgba(193,39,45,.07)'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 60px 60px;
}

/* --- PATTERN 4: Moroccan flag star pattern --- */
.zl-flag-accent {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='100' viewBox='0 0 200 100'%3E%3Cg fill='none'%3E%3C!-- Moroccan flag colors subtle band --%3E%3Crect x='0' y='0' width='100' height='100' fill='rgba(193,39,45,.018)'/%3E%3Crect x='100' y='0' width='100' height='100' fill='rgba(0,98,51,.018)'/%3E%3C!-- Flag star (simplified) --%3E%3Cpath d='M 50 15 L 54 30 L 68 30 L 57 39 L 61 54 L 50 45 L 39 54 L 43 39 L 32 30 L 46 30 Z' fill='none' stroke='rgba(0,98,51,.06)' stroke-width='.8'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 200px 100px;
}