/*
Theme Name: Evidences of Islam
Description: A custom WordPress theme for presenting rational evidence for Islam with Islamic design aesthetics, dual navigation system, and scholarly presentation. Built with Tailwind CSS and shadcn/ui components.
Version: 2.0
Author: Evidences of Islam
Text Domain: evidences-islam
*/

/* Import Tailwind CSS */
@import url('https://cdn.tailwindcss.com');

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@300;400;500;600;700&display=swap');

/* Custom CSS for Islamic-specific elements that can't be replaced by Tailwind */

/* Islamic Border Gradient */
.islamic-border {
  position: relative;
}

.islamic-border::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, 
    #14b8a6 0%, 
    #2dd4bf 25%, 
    #f59e0b 50%, 
    #2dd4bf 75%, 
    #14b8a6 100%);
}

/* Islamic Gradient Text */
.gradient-text {
  background: linear-gradient(135deg, #14b8a6, #f59e0b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Verse Decoration for Islamic Quotes */
.verse-decoration {
  position: relative;
  padding: 2rem;
}

.verse-decoration::before,
.verse-decoration::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  background: #f59e0b;
  opacity: 0.6;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.verse-decoration::before {
  top: 0.5rem;
  left: 0.5rem;
}

.verse-decoration::after {
  bottom: 0.5rem;
  right: 0.5rem;
  transform: rotate(180deg);
}

/* Evidence Box Styles */
.evidence-box {
  border: 2px solid #14b8a6;
  background: #ecfeff;
  border-radius: 8px;
  padding: 1.5em;
  margin: 1.5em 0;
  box-shadow: 0 2px 8px rgba(20, 184, 166, 0.08);
}
.evidence-box p,
.evidence-box ul,
.evidence-box ol {
  margin-bottom: 1em;
}
.evidence-box ul,
.evidence-box ol {
  padding-left: 2em;
}

/* WordPress-specific overrides */
body {
  font-family: 'Inter', system-ui, sans-serif;
  background-color: #0f172a;
  color: #f8fafc;
}

/* Ensure WordPress admin bar doesn't interfere */
.admin-bar .site-header {
  top: 32px;
}

@media screen and (max-width: 782px) {
  .admin-bar .site-header {
    top: 46px;
  }
}

/* Custom scrollbar for Islamic theme */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #475569;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(#14b8a6, #f59e0b);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(#0d9488, #d97706);
}

/* Print styles */
@media print {
  .site-header,
  .site-footer,
  .no-print {
    display: none !important;
  }
  
  body {
    background: white !important;
    color: black !important;
  }
  
  .islamic-border::before {
    background: #333 !important;
  }
}