/**
 * islamic-patterns.css — SVG-based Islamic geometric patterns
 * Used as subtle background textures throughout the app
 */

/* ───────────── MAIN ISLAMIC PATTERN OVERLAY ───────────── */
.islamic-pattern-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cg fill='none' stroke='%23c9a84c' stroke-width='0.5'%3E%3Cpath d='M40 0 L80 40 L40 80 L0 40Z'/%3E%3Cpath d='M40 10 L70 40 L40 70 L10 40Z'/%3E%3Cpath d='M40 20 L60 40 L40 60 L20 40Z'/%3E%3Ccircle cx='40' cy='40' r='15'/%3E%3Ccircle cx='40' cy='40' r='8'/%3E%3Cpath d='M0 0 L40 0 M40 0 L80 0 M80 0 L80 40 M80 40 L80 80 M80 80 L40 80 M40 80 L0 80 M0 80 L0 40 M0 40 L0 0'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
}

/* ───────────── ARABESQUE BORDER PATTERN ───────────── */
.arabesque-border {
  position: relative;
}

.arabesque-border::before,
.arabesque-border::after {
  content: '';
  display: block;
  height: 3px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    #c9a84c 15%,
    #e8d48b 30%,
    #c9a84c 50%,
    #e8d48b 70%,
    #c9a84c 85%,
    transparent 100%
  );
  opacity: 0.6;
}

.arabesque-border::before {
  margin-bottom: 1rem;
}

.arabesque-border::after {
  margin-top: 1rem;
}

/* ───────────── STAR PATTERN (for section dividers) ───────────── */
.star-divider {
  text-align: center;
  margin: 2rem 0;
  position: relative;
}

.star-divider::before {
  content: '✦';
  color: #c9a84c;
  font-size: 1.2rem;
  letter-spacing: 1.5rem;
}

/* ───────────── OCTAGONAL FRAME (for cards) ───────────── */
.octagon-frame {
  position: relative;
  overflow: hidden;
}

.octagon-frame::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  background: 
    linear-gradient(135deg, transparent 8px, #c9a84c33 8px, #c9a84c33 9px, transparent 9px),
    linear-gradient(225deg, transparent 8px, #c9a84c33 8px, #c9a84c33 9px, transparent 9px),
    linear-gradient(315deg, transparent 8px, #c9a84c33 8px, #c9a84c33 9px, transparent 9px),
    linear-gradient(45deg,  transparent 8px, #c9a84c33 8px, #c9a84c33 9px, transparent 9px);
  pointer-events: none;
  z-index: 1;
}

/* ───────────── TESSELLATION HEADER PATTERN ───────────── */
.header-pattern {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cg fill='none' stroke='%23c9a84c' stroke-width='0.3' opacity='0.3'%3E%3Cpath d='M30 0 L60 30 L30 60 L0 30Z'/%3E%3Ccircle cx='30' cy='30' r='10'/%3E%3Cpath d='M15 15 L45 15 L45 45 L15 45Z'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
}

/* ───────────── MOSQUE SILHOUETTE DECORATION ───────────── */
.mosque-silhouette {
  display: block;
  margin: 0 auto;
  opacity: 0.15;
}

/* ───────────── CRESCENT MOON ICON (CSS-only) ───────────── */
.crescent-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  box-shadow: 5px -2px 0 0 #c9a84c;
  margin: 0 0.3rem;
  vertical-align: middle;
}