/* ============================================================
   Giturn Syria — light heritage theme layer (scoped to .sy-theme)
   Builds on top of giturn-2026.css without modifying it.
   Keeps the navy + gold base; adds subtle Damascene accents.
   ============================================================ */

.sy-theme {
  --sy-rose: #8a3b5d;     /* Damascene rose */
  --sy-olive: #556b2f;    /* Olive green */
  --sy-gold: #d4af37;     /* Damask gold */
}

/* Tajawal as a refined display alternative for headings */
.sy-theme .gt-h1,
.sy-theme .gt-hero h1,
.sy-theme .gt-h2 {
  font-family: "Tajawal", "Cairo", system-ui, sans-serif;
  letter-spacing: -0.01em;
}

/* ---- Subtle Umayyad / Arabesque geometric texture (~5%) ----
   Applied behind dark sections so it never clutters content. */
.sy-theme .gt-hero--home,
.sy-theme .gt-section--dark,
.sy-theme .gt-footer {
  position: relative;
}
.sy-theme .gt-hero--home > .gt-container,
.sy-theme .gt-section--dark > .gt-container,
.sy-theme .gt-footer > .gt-container {
  position: relative;
  z-index: 2;
}
.sy-theme .gt-section--dark::before,
.sy-theme .gt-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.05;
  background-image:
    radial-gradient(circle at 50% 0,   var(--sy-gold) 1.6px, transparent 2px),
    radial-gradient(circle at 0 50%,    var(--sy-gold) 1.6px, transparent 2px),
    radial-gradient(circle at 100% 50%, var(--sy-gold) 1.6px, transparent 2px),
    radial-gradient(circle at 50% 100%, var(--sy-gold) 1.6px, transparent 2px),
    linear-gradient(45deg,  transparent 47%, var(--sy-gold) 48%, var(--sy-gold) 52%, transparent 53%),
    linear-gradient(-45deg, transparent 47%, var(--sy-gold) 48%, var(--sy-gold) 52%, transparent 53%);
  background-size: 64px 64px;
}
.sy-theme .gt-footer::before { opacity: 0.04; }

/* ---- Hero: authentic Umayyad eight-pointed star (girih) lattice ----
   Faint gold vector pattern, masked to fade toward the center so it
   never competes with the headline. Replaces the blueprint grid on /sy. */
.sy-theme .gt-hero--home::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23d4af37' stroke-width='1.1'%3E%3Cpolygon points='50,18 72.6,27.4 82,50 72.6,72.6 50,82 27.4,72.6 18,50 27.4,27.4'/%3E%3Crect x='30' y='30' width='40' height='40'/%3E%3Crect x='30' y='30' width='40' height='40' transform='rotate(45 50 50)'/%3E%3Cline x1='50' y1='0' x2='50' y2='18'/%3E%3Cline x1='50' y1='82' x2='50' y2='100'/%3E%3Cline x1='0' y1='50' x2='18' y2='50'/%3E%3Cline x1='82' y1='50' x2='100' y2='50'/%3E%3Cline x1='0' y1='0' x2='27.4' y2='27.4'/%3E%3Cline x1='100' y1='0' x2='72.6' y2='27.4'/%3E%3Cline x1='0' y1='100' x2='27.4' y2='72.6'/%3E%3Cline x1='100' y1='100' x2='72.6' y2='72.6'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 132px 132px;
  background-position: center;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 78%);
}

/* ---- Eyebrow: Damascene rose / olive accent ribbon ---- */
.sy-theme .gt-eyebrow {
  border-color: rgba(138, 59, 93, 0.4);
  background: linear-gradient(135deg, rgba(138, 59, 93, 0.16), rgba(212, 175, 55, 0.12));
  color: #f1c35c;
}

/* ---- Pills get a subtle olive variant for secondary emphasis ---- */
.sy-theme .gt-pill {
  background: rgba(85, 107, 47, 0.14);
  color: #6b8a3a;
  border-color: rgba(85, 107, 47, 0.32);
}

/* ---- Section heads: thin decorative gold rule under H2 ---- */
.sy-theme .gt-section-head .gt-h2::after {
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  margin: 0.85rem auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--sy-gold), transparent);
}

/* ---- Floating Ugaritic glyphs ----
   Ugaritic is the world's earliest known alphabet, from Ugarit (Ras Shamra)
   on the Syrian coast. It is the Syrian heritage parallel to the cuneiform
   used on the Iraqi homepage. Styled to match the gold glow of .gt-glyph--cune. */
.sy-theme .gt-glyph--ugar {
  font-family: "Noto Sans Ugaritic", "Segoe UI Historic", serif;
  font-size: 6rem;
  font-weight: 400;
  color: rgba(241, 195, 92, 0.30);
  text-shadow: 0 0 26px rgba(241, 195, 92, 0.24), 0 0 6px rgba(241, 195, 92, 0.40);
  letter-spacing: 0.05em;
}
@media (max-width: 980px) {
  .sy-theme .gt-glyph--ugar { font-size: 4.2rem; }
}
@media (max-width: 540px) {
  .sy-theme .gt-glyph--ugar { font-size: 3.2rem; }
}

/* ---- Hero badge flags: ensure 4 flags stay tidy ---- */
.sy-theme .gt-hero-badge__flags svg { width: 17px; height: 11px; }

/* ---- Cards: warmer gold hover border to match heritage feel ---- */
.sy-theme .gt-card:hover { border-color: rgba(212, 175, 55, 0.5); }

/* ---- Footer flag card (Syria) subtle highlight ---- */
.sy-theme .gt-flag-card:hover { border-color: rgba(212, 175, 55, 0.4); }

@media (max-width: 540px) {
  .sy-theme .gt-hero--home::after,
  .sy-theme .gt-section--dark::before,
  .sy-theme .gt-footer::before {
    background-size: 48px 48px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sy-theme .gt-hero--home::after { background-attachment: scroll; }
}