/**
 * PATCH: Syrian Design System — Cultural Elements for Nawafith
 *
 * Authentic Syrian architectural & artistic motifs translated into CSS/SVG:
 *   1. Rub el Hizb Star (logo, favicon, spinner, bullets)
 *   2. Mashrabiya Lattice (page background texture)
 *   3. Pointed Arch Card Headers (nawfitha window frames)
 *   4. Ablaq Banding (row striping, dividers)
 *   5. Ajami Panel Borders (featured/spotlight cards)
 *   6. Jasmine Vine Scroll (section dividers)
 *   7. Syrian Color Palette (Umayyad Gold, Damascene Rose, etc.)
 *   8. Octagonal Filter Chips (geometric clip-path)
 *   9. Window-Opening Transition (page navigation)
 *  10. 8-Pointed Star Loading Spinner
 *
 * HOW TO APPLY: Append to styles.css
 */


/* ═══════════════════════════════════════════════════════════════════════
   SYRIAN COLOR VARIABLES — Add to :root
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* Syrian accent palette */
  --syrian-gold: #d4a853;        /* Umayyad Mosque mosaics, Ajami gold leaf */
  --syrian-rose: #c4566a;        /* Damascene Rose (ward al-jouri) */
  --syrian-olive: #6b7c5e;       /* Syrian olive groves, Ghouta */
  --syrian-sand: #c2a67d;        /* Desert sand, Palmyra limestone */
  --syrian-aleppo: #8b9caa;      /* Aleppo citadel grey limestone */
  --syrian-jasmine: #e8e4dc;     /* Jasmine blossoms, limestone white */
}


/* ═══════════════════════════════════════════════════════════════════════
   1. RUB EL HIZB STAR — Logo / Favicon / Spinner / Bullets
   ═══════════════════════════════════════════════════════════════════════ */

/* Base star container */
.hizb-star {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hizb-star .sq {
  position: absolute;
  border: 2px solid var(--accent);
  border-radius: 2px;
}

.hizb-star .sq:nth-child(2) {
  transform: rotate(45deg);
}

/* Size variants */
.hizb-star--logo {
  width: 80px;
  height: 80px;
}
.hizb-star--logo .sq {
  inset: 12px;
  border-width: 2.5px;
  border-radius: 3px;
}

.hizb-star--favicon {
  width: 32px;
  height: 32px;
}
.hizb-star--favicon .sq {
  inset: 5px;
  border-width: 1.5px;
  border-radius: 1px;
}

.hizb-star--header {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
.hizb-star--header .sq {
  inset: 3px;
  border-width: 1.5px;
  border-radius: 1px;
}

/* Spinner: one square rotates */
.hizb-star--spinner {
  width: 48px;
  height: 48px;
}
.hizb-star--spinner .sq {
  inset: 8px;
}
.hizb-star--spinner .sq:nth-child(1) {
  animation: hizbSpin 3s linear infinite;
}
.hizb-star--spinner .sq:nth-child(2) {
  transform: rotate(45deg);
  opacity: 0.4;
}

@keyframes hizbSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Assembling spinner */
.hizb-star--assembling {
  width: 48px;
  height: 48px;
}
.hizb-star--assembling .sq {
  inset: 8px;
}
.hizb-star--assembling .sq:nth-child(1) {
  animation: hizbAssemble1 2s ease-in-out infinite;
}
.hizb-star--assembling .sq:nth-child(2) {
  animation: hizbAssemble2 2s ease-in-out infinite;
}

@keyframes hizbAssemble1 {
  0%   { transform: rotate(0deg) scale(0.5); opacity: 0; }
  30%  { transform: rotate(0deg) scale(1);   opacity: 1; }
  70%  { transform: rotate(0deg) scale(1);   opacity: 1; }
  100% { transform: rotate(0deg) scale(0.5); opacity: 0; }
}

@keyframes hizbAssemble2 {
  0%   { transform: rotate(0deg) scale(0.5); opacity: 0; }
  15%  { transform: rotate(0deg) scale(0.5); opacity: 0; }
  45%  { transform: rotate(45deg) scale(1);  opacity: 1; }
  70%  { transform: rotate(45deg) scale(1);  opacity: 1; }
  100% { transform: rotate(90deg) scale(0.5); opacity: 0; }
}

/* Pulsing star (gold variant) */
.hizb-star--pulse .sq {
  border-color: var(--syrian-gold);
}
.hizb-star--pulse .sq:nth-child(1) {
  animation: hizbPulse 1.5s ease-in-out infinite;
}
.hizb-star--pulse .sq:nth-child(2) {
  transform: rotate(45deg);
  animation: hizbPulse45 1.5s ease-in-out infinite 0.2s;
}

@keyframes hizbPulse {
  0%, 100% { opacity: 0.3; transform: scale(0.9); }
  50%      { opacity: 1;   transform: scale(1.05); }
}
@keyframes hizbPulse45 {
  0%, 100% { opacity: 0.3; transform: rotate(45deg) scale(0.9); }
  50%      { opacity: 1;   transform: rotate(45deg) scale(1.05); }
}

/* Star bullet points */
.hizb-bullet {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.hizb-bullet-icon {
  position: relative;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.hizb-bullet-icon .sq {
  position: absolute;
  inset: 1px;
  border: 1px solid var(--syrian-gold);
}

.hizb-bullet-icon .sq:nth-child(2) {
  transform: rotate(45deg);
}


/* ═══════════════════════════════════════════════════════════════════════
   2. MASHRABIYA LATTICE — Page Background Texture
   ═══════════════════════════════════════════════════════════════════════ */

.mashrabiya-bg {
  position: relative;
}

.mashrabiya-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Crect x='12' y='12' width='24' height='24' fill='none' stroke='%2360a5fa' stroke-width='0.8'/%3E%3Crect x='12' y='12' width='24' height='24' fill='none' stroke='%2360a5fa' stroke-width='0.8' transform='rotate(45 24 24)'/%3E%3Ccircle cx='24' cy='24' r='2' fill='%2360a5fa' opacity='0.5'/%3E%3Ccircle cx='0' cy='0' r='2' fill='%2360a5fa' opacity='0.3'/%3E%3Ccircle cx='48' cy='0' r='2' fill='%2360a5fa' opacity='0.3'/%3E%3Ccircle cx='0' cy='48' r='2' fill='%2360a5fa' opacity='0.3'/%3E%3Ccircle cx='48' cy='48' r='2' fill='%2360a5fa' opacity='0.3'/%3E%3C/svg%3E");
  background-size: 48px 48px;
  z-index: 0;
}

.mashrabiya-bg > * {
  position: relative;
  z-index: 1;
}


/* ═══════════════════════════════════════════════════════════════════════
   3. POINTED ARCH CARD HEADERS — Nawfitha Window Frames
   ═══════════════════════════════════════════════════════════════════════ */

.arch-card {
  border-radius: 0 0 12px 12px;
  overflow: hidden;
  background: var(--bg-secondary, #1e293b);
  border: 1px solid var(--border, #334155);
}

.arch-card-header {
  position: relative;
  height: 44px;
  background: rgba(96, 165, 250, 0.05);
  display: flex;
  align-items: center;
  padding: 0 14px;
  gap: 8px;
  overflow: hidden;
}

/* Arch SVG curve — inject via JS or inline SVG */
.arch-card-header .arch-svg {
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.arch-card-header .arch-label {
  position: relative;
  z-index: 1;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: var(--accent);
  text-transform: uppercase;
}

.arch-card-body {
  padding: 16px;
}


/* ═══════════════════════════════════════════════════════════════════════
   4. ABLAQ BANDING — Row Striping & Dividers
   ═══════════════════════════════════════════════════════════════════════ */

/* Alternating row colors (apply to table or list) */
.ablaq-rows tr:nth-child(odd) td,
.ablaq-rows li:nth-child(odd) {
  background: #0f172a;
}

.ablaq-rows tr:nth-child(even) td,
.ablaq-rows li:nth-child(even) {
  background: #131b2e;
}

.ablaq-rows tr:hover td,
.ablaq-rows li:hover {
  background: rgba(96, 165, 250, 0.05);
}

/* Thin ablaq divider (2-tone) */
.ablaq-divider {
  height: 3px;
  border: none;
  background: repeating-linear-gradient(
    90deg,
    #334155 0px, #334155 12px,
    #1e293b 12px, #1e293b 24px
  );
  opacity: 0.6;
  border-radius: 2px;
}

/* Thick ablaq divider (3-tone, Mamluk-era) */
.ablaq-divider--thick {
  height: 6px;
  border: none;
  background: repeating-linear-gradient(
    90deg,
    #334155 0px, #334155 16px,
    #1a2332 16px, #1a2332 32px,
    #1e293b 32px, #1e293b 48px
  );
  opacity: 0.5;
  border-radius: 3px;
}


/* ═══════════════════════════════════════════════════════════════════════
   5. AJAMI PANEL BORDERS — Featured / Spotlight Cards
   ═══════════════════════════════════════════════════════════════════════ */

.ajami-panel {
  position: relative;
  padding: 24px;
  border: 1px solid rgba(96, 165, 250, 0.15);
  outline: 1px solid rgba(96, 165, 250, 0.08);
  outline-offset: 5px;
  background: var(--bg-primary, #0f172a);
}

/* Top corner diamonds (::before and ::after) */
.ajami-panel::before,
.ajami-panel::after {
  content: '';
  position: absolute;
  width: 9px;
  height: 9px;
  border: 1px solid rgba(96, 165, 250, 0.25);
  transform: rotate(45deg);
  background: var(--bg-deep, #080810);
}
.ajami-panel::before { top: -5px; left: -5px; }
.ajami-panel::after  { top: -5px; right: -5px; }

/* Bottom corners — use child elements */
.ajami-panel-corner-bl,
.ajami-panel-corner-br {
  position: absolute;
  width: 9px;
  height: 9px;
  border: 1px solid rgba(96, 165, 250, 0.25);
  transform: rotate(45deg);
  background: var(--bg-deep, #080810);
}
.ajami-panel-corner-bl { bottom: -5px; left: -5px; }
.ajami-panel-corner-br { bottom: -5px; right: -5px; }

.ajami-panel-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--syrian-gold);
  text-transform: uppercase;
  margin-bottom: 10px;
}

/* Gold variant for breaking news */
.ajami-panel--gold {
  border-color: rgba(212, 168, 83, 0.2);
  outline-color: rgba(212, 168, 83, 0.1);
}
.ajami-panel--gold::before,
.ajami-panel--gold::after,
.ajami-panel--gold .ajami-panel-corner-bl,
.ajami-panel--gold .ajami-panel-corner-br {
  border-color: rgba(212, 168, 83, 0.3);
}


/* ═══════════════════════════════════════════════════════════════════════
   6. JASMINE VINE SCROLL — Section Dividers
   ═══════════════════════════════════════════════════════════════════════

   Usage: <svg class="vine-divider"> with the SVG path inline.
   See syrian-elements.patch.js for the buildVineDivider() helper.
   ═══════════════════════════════════════════════════════════════════════ */

.vine-divider {
  width: 100%;
  height: 24px;
  display: block;
  margin: 8px 0;
}


/* ═══════════════════════════════════════════════════════════════════════
   8. OCTAGONAL FILTER CHIPS — Geometric Clip-Path
   ═══════════════════════════════════════════════════════════════════════ */

.oct-chip {
  clip-path: polygon(
    20% 0%, 80% 0%, 100% 20%, 100% 80%,
    80% 100%, 20% 100%, 0% 80%, 0% 20%
  );
  background: rgba(96, 165, 250, 0.08);
  padding: 8px 20px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary, #94a3b8);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: none;
}

.oct-chip:hover {
  background: rgba(96, 165, 250, 0.15);
  color: var(--text-primary, #f1f5f9);
}

.oct-chip.active,
.oct-chip[aria-selected="true"] {
  background: rgba(96, 165, 250, 0.2);
  color: var(--accent);
}


/* ═══════════════════════════════════════════════════════════════════════
   9. WINDOW-OPENING TRANSITION — Page Navigation
   ═══════════════════════════════════════════════════════════════════════ */

.window-transition {
  perspective: 800px;
  position: relative;
  overflow: hidden;
}

.window-panel-left,
.window-panel-right {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  background: var(--bg-secondary, #1e293b);
  border: 1px solid var(--border, #334155);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 10;
}

.window-panel-left {
  left: 0;
  transform-origin: left center;
}

.window-panel-right {
  right: 0;
  transform-origin: right center;
}

.window-transition.open .window-panel-left {
  transform: rotateY(-75deg);
}

.window-transition.open .window-panel-right {
  transform: rotateY(75deg);
}


/* ═══════════════════════════════════════════════════════════════════════
   UTILITY: Syrian accent color classes
   ═══════════════════════════════════════════════════════════════════════ */

.text-gold     { color: var(--syrian-gold); }
.text-rose     { color: var(--syrian-rose); }
.text-olive    { color: var(--syrian-olive); }
.text-sand     { color: var(--syrian-sand); }
.text-aleppo   { color: var(--syrian-aleppo); }

.bg-gold       { background-color: var(--syrian-gold); }
.bg-rose       { background-color: var(--syrian-rose); }
.bg-olive      { background-color: var(--syrian-olive); }
.bg-sand       { background-color: var(--syrian-sand); }
.bg-aleppo     { background-color: var(--syrian-aleppo); }

/* Badge variants using Syrian colors */
.badge-breaking {
  background: rgba(212, 168, 83, 0.15);
  color: var(--syrian-gold);
  border: 1px solid rgba(212, 168, 83, 0.25);
}

.badge-alert {
  background: rgba(196, 86, 106, 0.15);
  color: var(--syrian-rose);
  border: 1px solid rgba(196, 86, 106, 0.25);
}

.badge-verified {
  background: rgba(107, 124, 94, 0.15);
  color: var(--syrian-olive);
  border: 1px solid rgba(107, 124, 94, 0.25);
}