/**
 * ثهلان – تحسينات الوضع الداكن/الفاتح + لمسات تاريخية ثقافية
 * جماليات عربية إسلامية أصيلة
 */

/* ========== الوضع الفاتح المحسن ========== */
:root {
  --cultural-gold: #C9A227;
  --cultural-brown: #8B4513;
  --cultural-sand: #F5E6C8;
  --cultural-ink: #2D2419;
  --ornament-opacity: 0.04;
  --glow-soft: 0 4px 30px rgba(201, 162, 39, 0.08);
  --glow-warm: 0 4px 30px rgba(160, 82, 45, 0.08);
}

html:not([data-theme="dark"]) {
  --bg-gradient: linear-gradient(180deg, #FDFBF7 0%, #F5F1EB 50%, #EDE8E0 100%);
}

html:not([data-theme="dark"]) body {
  background: var(--bg-gradient);
}

html:not([data-theme="dark"]) .hero {
  background: linear-gradient(160deg, 
    #3D3530 0%, 
    #4A3D32 20%, 
    #5C4D42 40%, 
    #4A3D32 60%, 
    #3D3530 80%, 
    #2D2419 100%
  );
  background-size: 300% 300%;
}

/* ========== الوضع الداكن المحسن ========== */
[data-theme="dark"] {
  --bg-gradient: linear-gradient(180deg, #1A1816 0%, #1F1D1B 50%, #262422 100%);
  --ornament-opacity: 0.03;
  --glow-soft: 0 4px 30px rgba(212, 168, 75, 0.06);
  --glow-warm: 0 4px 30px rgba(201, 123, 74, 0.06);
}

[data-theme="dark"] body {
  background: var(--bg-gradient);
}

[data-theme="dark"] .hero {
  background: linear-gradient(160deg, 
    #1A1612 0%, 
    #2D2419 20%, 
    #3D3530 40%, 
    #2D2419 60%, 
    #1A1612 100%
  );
  background-size: 300% 300%;
}

[data-theme="dark"] .card {
  background: linear-gradient(145deg, #2D2A26 0%, #262422 100%);
  border-color: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .card:hover {
  border-color: rgba(212, 168, 75, 0.3);
  box-shadow: var(--glow-soft);
}

[data-theme="dark"] .side-block {
  background: linear-gradient(145deg, #2D2A26 0%, #262422 100%);
  border-color: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .newsletter {
  background: linear-gradient(145deg, #1F1D1B 0%, #151311 100%);
  border: 1px solid rgba(212, 168, 75, 0.15);
}

[data-theme="dark"] .event {
  background: linear-gradient(145deg, #2D2A26 0%, #262422 100%);
}

[data-theme="dark"] .pick {
  background: linear-gradient(145deg, rgba(45, 42, 38, 0.95) 0%, rgba(38, 36, 34, 0.95) 100%);
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .pick:hover {
  border-color: rgba(212, 168, 75, 0.4);
}

/* ========== زخارف تراثية ========== */
.heritage-ornament {
  position: relative;
}

.heritage-ornament::before,
.heritage-ornament::after {
  content: '❋';
  position: absolute;
  color: var(--cultural-gold);
  opacity: 0.4;
  font-size: 1.2rem;
}

.heritage-ornament::before {
  right: -1.5rem;
}

.heritage-ornament::after {
  left: -1.5rem;
}

/* ========== الخط العربي الأصيل ========== */
.arabic-title {
  font-family: 'Amiri', 'Tajawal', serif;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* ========== زخرفة العناوين ========== */
.lane h3 {
  position: relative;
}

.lane h3::after {
  content: '✦';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  color: var(--cultural-gold);
  font-size: 0.7rem;
  opacity: 0;
  transition: opacity 0.4s, transform 0.4s;
}

.lane:hover h3::after {
  opacity: 0.6;
  transform: translateY(-50%) translateX(-8px);
}

/* ========== إطار ذهبي تراثي ========== */
.golden-frame {
  border: 2px solid transparent;
  border-image: linear-gradient(135deg, var(--cultural-gold) 0%, transparent 50%, var(--cultural-gold) 100%) 1;
  padding: 1rem;
}

/* ========== خلفية ورقية قديمة ========== */
.parchment-bg {
  background-color: var(--cultural-sand);
  background-image: 
    radial-gradient(ellipse at 20% 30%, rgba(139, 69, 19, 0.03) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(201, 162, 39, 0.03) 0%, transparent 50%),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.02'/%3E%3C/svg%3E");
}

[data-theme="dark"] .parchment-bg {
  background-color: #2D2A26;
  background-image: 
    radial-gradient(ellipse at 20% 30%, rgba(212, 168, 75, 0.04) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(201, 123, 74, 0.04) 0%, transparent 50%),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
}

/* ========== نمط القصور الإسلامية ========== */
.palace-pattern {
  position: relative;
}

.palace-pattern::before {
  content: '';
  position: absolute;
  inset: 0;
  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='%23C9A227' fill-opacity='0.03'%3E%3Cpolygon points='50,5 61.8,38.2 95.1,38.2 68.6,58.8 79.4,92 50,71.4 20.6,92 31.4,58.8 4.9,38.2 38.2,38.2'/%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
  opacity: 0.7;
}

/* ========== فاصل زخرفي ========== */
.ornamental-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2rem 0;
  color: var(--cultural-gold);
  opacity: 0.5;
}

.ornamental-divider::before,
.ornamental-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cultural-gold), transparent);
}

.ornamental-divider span {
  padding: 0 1rem;
  font-size: 1.2rem;
}

/* ========== تأثير الحبر القديم ========== */
.ink-effect {
  color: var(--cultural-ink);
  text-shadow: 1px 1px 2px rgba(45, 36, 25, 0.1);
}

[data-theme="dark"] .ink-effect {
  color: var(--text);
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}

/* ========== إطار الصور التراثي ========== */
.heritage-frame {
  border: 3px solid var(--cultural-gold);
  border-radius: var(--radius);
  padding: 4px;
  background: linear-gradient(135deg, 
    rgba(201, 162, 39, 0.1) 0%, 
    transparent 50%, 
    rgba(201, 162, 39, 0.1) 100%
  );
  box-shadow: 
    inset 0 0 20px rgba(201, 162, 39, 0.05),
    0 4px 20px rgba(0, 0, 0, 0.1);
}

/* ========== زر التمرير للأعلى محسن ========== */
.back-to-top {
  position: fixed;
  bottom: 5.5rem;
  inset-inline-start: 1.5rem;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cultural-gold) 0%, var(--cultural-brown) 100%);
  color: #fff;
  border: none;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 4px 20px rgba(201, 162, 39, 0.3);
  z-index: 9000;
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(201, 162, 39, 0.4);
}

.back-to-top span {
  font-size: 1.2rem;
  font-weight: bold;
}

/* ========== تحسين زر التبديل للوضع الداكن/الفاتح ========== */
.btn-icon[aria-label*="الوضع"] {
  position: relative;
  overflow: hidden;
}

.btn-icon[aria-label*="الوضع"]::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--cultural-gold) 0%, transparent 100%);
  opacity: 0;
  transition: opacity 0.3s;
}

.btn-icon[aria-label*="الوضع"]:hover::before {
  opacity: 0.2;
}

/* ========== تحسين شريط الإحصائيات ========== */
.stats-strip {
  background: linear-gradient(180deg, rgba(45, 36, 25, 0.03) 0%, transparent 100%);
  border-top: 1px solid rgba(201, 162, 39, 0.15);
  position: relative;
}

.stats-strip::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cultural-gold), transparent);
  opacity: 0.3;
}

[data-theme="dark"] .stats-strip {
  background: linear-gradient(180deg, rgba(212, 168, 75, 0.03) 0%, transparent 100%);
}

/* ========== تحسين النشرة البريدية ========== */
.newsletter {
  position: relative;
  overflow: hidden;
}

.newsletter::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(201, 162, 39, 0.08) 0%, transparent 70%);
  pointer-events: none;
}

.newsletter h3 {
  position: relative;
}

.newsletter h3::before {
  content: '📬';
  margin-left: 0.5rem;
}

/* ========== تأثير الورق المطوي ========== */
.paper-fold {
  position: relative;
}

.paper-fold::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: 30px;
  background: linear-gradient(135deg, var(--bg-soft) 50%, transparent 50%);
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}

/* ========== شريط التاريخ ========== */
.date-ribbon {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 1rem;
  background: linear-gradient(135deg, var(--cultural-gold) 0%, var(--cultural-brown) 100%);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  position: relative;
}

.date-ribbon::before {
  content: '';
  position: absolute;
  right: 100%;
  top: 0;
  border: 0.8rem solid transparent;
  border-left-color: var(--cultural-gold);
}

/* ========== تحسين الفوتر ========== */
footer {
  position: relative;
}

footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    var(--cultural-gold) 20%, 
    var(--cultural-brown) 50%, 
    var(--cultural-gold) 80%, 
    transparent 100%
  );
  opacity: 0.3;
}

footer .footer-logo:hover {
  transform: scale(1.02);
}

/* ========== تأثير التوهج الذهبي ========== */
.golden-glow {
  box-shadow: var(--glow-soft);
  transition: box-shadow 0.4s;
}

.golden-glow:hover {
  box-shadow: 0 8px 40px rgba(201, 162, 39, 0.15);
}

/* ========== الجوال – تعديلات ========== */
@media (max-width: 640px) {
  .heritage-ornament::before,
  .heritage-ornament::after {
    display: none;
  }
  
  .back-to-top {
    width: 44px;
    height: 44px;
    bottom: 5rem;
    inset-inline-start: 1rem;
  }
  
  .ornamental-divider {
    margin: 1.5rem 0;
  }
}

/* ========== انتقال سلس بين الأوضاع ========== */
body,
header,
footer,
.card,
.side-block,
.newsletter,
.event,
.pick {
  transition: background 0.5s ease, 
              border-color 0.5s ease, 
              box-shadow 0.5s ease,
              color 0.3s ease;
}

/* ========== نص مظلل تراثي ========== */
::selection {
  background: rgba(201, 162, 39, 0.25);
  color: inherit;
}

::-moz-selection {
  background: rgba(201, 162, 39, 0.25);
  color: inherit;
}

/* ========== شعار المجلة في الفوتر – يتبدل حسب النمط ========== */
.footer-magazine-logo {
  margin-top: 1rem;
  text-align: center;
}

.footer-magazine-logo img {
  max-width: 120px;
  height: auto;
  transition: opacity 0.3s ease, filter 0.3s ease;
}

/* الوضع الفاتح: إظهار الشعار الفاتح فقط */
html:not([data-theme="dark"]) .footer-magazine-logo .logo-light {
  display: block;
}

html:not([data-theme="dark"]) .footer-magazine-logo .logo-dark {
  display: none;
}

/* الوضع الداكن: إظهار الشعار الداكن فقط */
[data-theme="dark"] .footer-magazine-logo .logo-light {
  display: none;
}

[data-theme="dark"] .footer-magazine-logo .logo-dark {
  display: block;
  filter: brightness(1.4) drop-shadow(0 0 8px rgba(201, 162, 39, 0.3));
}

@media (max-width: 640px) {
  .footer-magazine-logo img {
    max-width: 90px;
  }
}